web-design-mastery

Web Design Mastery

来自 Adam Wathan 和 Steve Schoger 的《Refactoring UI》中的生产级 UI 设计原则。

---

核心设计工作流

1. 从功能入手，而不是布局

• 先设计实际的功能模块
• 不要从导航、侧边栏或外壳开始
• 细节留到后面处理——先用灰度设计
• 不要设计太多——分阶段迭代

2. 设计前先建立系统

预先定义以下系统，以消除决策疲劳：

间距刻度（px）：

标记	尺寸	使用场景
1	4	极小间隙
2	8	紧凑间距，组件内部
3	12	相关元素之间
4	16	区块内边距
6	24	区块之间
8	32	较大的分隔
12	48	大间隙
16	64	主视觉区间距
24	96	最大分隔

字号刻度（px）：

尺寸	使用场景
12	标签、元信息、附注
14	正文，默认字号
16	强调内容、副标题
18	区块标题
20	卡片标题
24	页面区块标题
30	页面标题
36	主视觉区副标题
48	主视觉区标题
60-72	展示文本

阴影刻度（5 个级别）：

级别	使用场景
1	按钮、轻微浮起效果
2	卡片、输入框
3	下拉菜单、弹出层
4	粘性元素
5	模态框、对话框

3. 构建层次，而非装饰

• 主要：深色（标题、关键操作）
• 次要：灰色（辅助文本、日期）
• 第三级：浅灰色（元数据、版权信息）

关键原则：

• 尺寸不是一切——善用字重和颜色
• 通过弱化竞争元素来突出重点
• 标签是最后手段——应与对应值结合
• 语义优先级低于层次

4. 有意义地营造层次感

• 光线来自上方
• 阴影表现层级（越靠近 = 越受关注）
• 使用双层阴影营造高级质感
• 考虑让元素相互重叠，以形成层次

5. 最后润色

• 强化默认样式（项目符号 → 图标，设置引言样式）
• 添加强调色边框，提升视觉趣味
• 将空状态设计为第一印象
• 减少边框——优先使用阴影或间距

---

颜色系统

所需类别：

1. 灰色（8-10 个色阶）：文本、背景、面板、边框
2. 主色（5-10 个色阶）：操作、激活状态、链接
3. 强调色（按语义区分）：成功、警告、错误状态

定义色阶的流程：

1. 选择适合作为按钮背景的基础色（500）
2. 选择两端色阶（100 用于染色背景，900 用于文本）
3. 填补中间色阶：700、300 → 800、600、400、200

关键规则：

• 使用 HSL 进行直观调整
• 在明度极端处提高饱和度
• 较浅色调的色相朝明亮色相（60°、180°、300°）偏移
• 灰色可以偏暖（带黄色/橙色色调），也可以偏冷（带蓝色色调）
• 无障碍性：普通文本的对比度为 4.5:1，大号文本为 3:1

---

反模式

绝对不要：

• 在彩色背景上使用灰色文本（改为手动挑选颜色）
• 内容不需要时仍填满整个屏幕
• 盲目使用网格（固定宽度往往更好）
• 使用含糊不清的间距（组间距应大于组内间距）
• 使用无法按比例缩放的相对尺寸
• 将图标放大到超出其预期尺寸
• 只依靠颜色表达含义

---

参考文件

特定主题的详细指南：

主题	文件	阅读时机
视觉层次、标签、强调	hierarchy.md	平衡元素的重要性
间距、留白、布局网格	spacing-layout.md	确定布局
排版、字体、行高	typography.md	设置文本样式
HSL、色阶、无障碍性	color.md	创建调色板
阴影、层级、层次	depth.md	为 UI 增加层次感
边框、背景、空状态	finishing-touches.md	润饰设计