:root {
  /* 主色 - 品牌核心，用于关键操作和品牌元素 */
  --primary: #3b82f6;
  --primary-light: #60a5fa;
  --primary-dark: #2563eb;
  
  /* 辅助色 - 补充主色，创造视觉多样性 */
  --secondary: #8b5cf6;
  --accent: #10b981;
  
  /* 功能色 - 传达特定含义 */
  --success: #10b981;    /* 成功/正确 */
  --warning: #f59e0b;    /* 警告/注意 */
  --error: #ef4444;      /* 错误/危险 */
  --info: #06b6d4;       /* 信息提示 */
  
  /* 中性色 - 文本、背景、边框 */
  --gray-50: #f9fafb;
  --gray-900: #111827;
}

色彩应用原则

主色：CTA 按钮、关键链接、重点突出元素。主色应该是品牌的视觉代表
辅助色：次要操作、装饰元素、背景强调。用于创造层级感
成功色：成功提示、完成状态、验证通过。用户已识别的积极信号
警告色：警告信息、需要注意的操作。确保用户不会误操作
中性色：文本、背景、边框。中性色的选择直接影响可读性和专业度

小贴士：避免使用超过 5 个主要颜色，保持色彩系统简洁而有力。

排版规范

排版是 UI 设计的灵魂。好的排版能让内容更易阅读，提升用户留存率。根据研究，排版优化能提升阅读时间 20% 以上。

字体选择

选择合适的字体比其他任何设计决策都更重要：

标题字体：选择特征鲜明的字体，传达品牌个性
正文字体：优先选择无衬线字体，确保在小尺寸下仍然清晰易读
代码字体：使用等宽字体，提高代码可读性

字体层级

建立清晰的字体层级帮助用户理解内容结构：

/* 标题层级 - 从大到小递进 */
h1 { font-size: 3rem; font-weight: 700; letter-spacing: -0.5px; }
h2 { font-size: 2.25rem; font-weight: 600; letter-spacing: -0.3px; }
h3 { font-size: 1.875rem; font-weight: 600; }
h4 { font-size: 1.5rem; font-weight: 600; }

/* 正文 - 易阅读的尺寸 */
body { font-size: 1rem; line-height: 1.75; font-weight: 400; }

/* 辅助文本 */
small { font-size: 0.875rem; line-height: 1.6; }

行高和间距

正文行高：1.5 - 1.75（推荐 1.6），提升长篇幅阅读的舒适度
标题行高：1.2 - 1.4，避免多行标题时行距过大
段落间距：1em - 1.5em，给内容合理的呼吸空间
字母间距：大标题适当增加字母间距，提升高级感

交互设计

好的交互设计是看不见的，用户甚至不会意识到它的存在，因为一切都是那么自然和直观。

按钮状态

为所有交互元素提供清晰的视觉反馈是基础的可用性原则：

.button {
  /* 默认状态 - 清晰可点击 */
  background: var(--primary);
  cursor: pointer;
  transition: all 0.2s ease;
  
  /* 悬停状态 - 告诉用户这是可点击的 */
  &:hover { 
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  
  /* 激活状态 - 提供即时反馈 */
  &:active { 
    transform: scale(0.98);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  /* 焦点状态 - 键盘用户需要 */
  &:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }
  
  /* 禁用状态 - 明确表示不可用 */
  &:disabled { 
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }
}

动画原则

动画是提升体验的微妙艺术，需要节制和目的性：

时长选择：快速反馈 150-200ms，页面转换 300-400ms，避免用户感知延迟
缓动函数：使用 ease-out 进入，ease-in 离开，创造自然流畅的感觉
性能考虑：使用 transform 和 opacity 优化性能，避免触发重排
意图传达：每个动画都应该有明确的视觉目的，服务于用户理解而非炫耀

设计系统

设计系统是扩展和维护大型项目的关键。它不仅是组件的集合，更是团队的共同语言。

组件库构成

基础组件：按钮、输入框、复选框等原子级元素
复合组件：卡片、导航、表单等分子级元素
布局组件：容器、栅格、间距等骨架级元素
设计令牌：颜色、字体、间距等设计决策的代码化表示

建立设计令牌

:root {
  /* 间距系统 */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  
  /* 圆角 */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  
  /* 阴影 */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

实际案例

在实际项目中应用这些原则能带来显著效果。一个知名电商网站通过优化设计系统，实现了：

页面加载时间减少 30%
用户停留时间增加 45%
转化率提升 23%

总结

优秀的设计需要系统化的思考和持续的优化。建立设计规范，保持团队协作的一致性，最重要的是时刻以用户为中心，为用户提供既美观又易用的体验。

记住：设计的最高境界不是让用户赞叹"这很漂亮"，而是让用户根本不会意识到设计的存在，因为一切都那么自然顺畅。

现代 Web 设计规范与最佳实践

现代 Web 设计规范与最佳实践

设计的重要性

核心设计原则

1. 一致性（Consistency）

2. 层级关系（Hierarchy）

3. 可访问性（Accessibility）

色彩系统

主色调选择