🎨 网站风格统一规范：打造一致的视觉体验

核心原则：一致性 > 创意性

一个优秀的网站，不仅功能要强大，视觉体验也要统一。混乱的风格会让用户感到困惑，降低信任感。

一、色彩系统

1. 主色调

--primary-color: #c41e3a;        /* 中国红 */
--primary-hover: #a01830;        /* 悬停状态 */
--secondary-color: #8b4513;      /* 棕色 */
--accent-color: #f39c12;         /* 橙色 */

2. 背景色

--bg-primary: #1a1a2e;           /* 深蓝黑 */
--bg-secondary: #16213e;         /* 稍浅 */
--bg-content: rgba(255,255,255,0.05);  /* 半透明白 */

3. 文字颜色

--text-primary: #ffffff;         /* 白色 */
--text-secondary: #e0e0e0;       /* 浅灰 */
--text-success: #2ecc71;         /* 绿色 */
--text-warning: #f39c12;         /* 橙色 */
--text-danger: #e74c3c;          /* 红色 */

二、字体系统

font-family: 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', sans-serif;

--font-h1: 2.5rem;    /* 36px */
--font-h2: 2rem;      /* 28px */
--font-h3: 1.5rem;    /* 24px */
--font-body: 1rem;    /* 16px */

三、布局系统

1. 间距规范（基础单位：8px）

--spacing-xs: 4px;      /* 0.5x */
--spacing-sm: 8px;      /* 1x */
--spacing-md: 16px;     /* 2x */
--spacing-lg: 24px;     /* 3x */
--spacing-xl: 32px;     /* 4x */

2. 卡片布局

.card {
    background: var(--bg-content);
    border-radius: 12px;
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

四、组件规范

1. 按钮样式

.btn {
    padding: 12px 24px;
    border-radius: 8px;
    transition: all 0.3s ease;
}
.btn-primary {
    background: var(--primary-color);
    color: white;
}

2. 导航栏

.navbar {
    height: 60px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
}

五、板块结构规范

┌─ 板块标题 (H2)
│
├─ 整体分析
│  ├─ 十神影响
│  ├─ 地支关系
│  ├─ 紫微斗数
│  └─ 身强身弱分析
│
└─ 行动建议
   ├─ 有利方向
   ├─ 求财时间
   └─ 开运方法

六、移动端适配

/* 手机竖屏 */
@media (max-width: 480px) { }

/* 手机横屏/小平板 */
@media (max-width: 768px) { }

/* 平板/小笔记本 */
@media (max-width: 1024px) { }

七、命名规范

/* ✅ 正确 */
.card-content { }
.btn-primary { }
--primary-color: #c41e3a;

/* ❌ 避免 */
.myDiv { }
.red-text { }
--red: #c41e3a;

八、检查清单

每次开发新功能后检查：

• ✅ 颜色使用符合色彩系统
• ✅ 字号符合层级规范
• ✅ 间距使用基础单位的倍数
• ✅ 板块结构符合标准模板
• ✅ 标题层级正确
• ✅ 移动端适配测试通过

总结

设计的本质不是装饰，而是沟通。

统一的风格让用户感到专业和可靠。每一次破例都是对品牌的伤害。

遵守规范，就是尊重用户。