设计基础与视觉
视觉设计的本质不是「好看」，而是让信息被正确阅读。本页沉淀版式、色彩、字体排印与视觉层次的方法论，回答「界面长什么样、为什么长这样」；CSS 层的具体实现见前端样式方案，组件与令牌的规模化见UI 界面与设计系统。
版式：把空间当成本
网格与间距系统
所有间距从一个基础单位出发（通常 4px 或 8px），避免随意取数：
| 基础单位 | 常用间距 | 适用 |
|---|---|---|
| 4px 系 | 4 / 8 / 12 / 16 / 20 / 24… | 紧凑型工具界面 |
| 8px 系 | 8 / 16 / 24 / 32 / 48… | 通用界面，手机端友好 |
- 同层级元素间距一致：同一组的内部间距 < 组与组之间距（间距建立分组，见「亲密性」）；
- 跨屏幕用栅格：12 列栅格 + 固定 gutter，内容宽度给弹性余量，而不是每个断点手工重排；
- 宁多留白不少留白：拥挤是信息层级失败最常见的信号。
版式自检三问
- 用户扫一眼能说出「这块是什么区块」吗？
- 最重要的操作在视线路径上吗（通常为左上 → 中右的 Z / F 型路径）？
- 去掉所有颜色后，仅靠位置与大小还能分清层级吗？
色彩：先定语义，再谈好看
配色系统的构成
一套克制的中性色（灰阶）比花哨的主色更重要：
| 层 | 角色 | 说明 |
|---|---|---|
| 中性色（灰阶） | 文字、背景、边框、分隔 | 占界面 90%+ 面积，决定干净度 |
| 品牌色 | 主操作、品牌强调 | 1~2 个主色 + 若干场景色，不滥用 |
| 语义色 | 成功 / 警告 / 错误 / 信息 | 必须与「状态含义」强绑定，见下文 |
| 渐变/点缀色 | 营销、插画 | 与功能界面分离，避免干扰 |
选色决策依据
- 先定对比度再定色相：正文与背景对比度 ≥ 4.5:1（WCAG AA），大字号 ≥ 3:1；用对比度工具（如 WebAIM Contrast Checker）验证后再谈「这颜色好不好看」；
- 用 HSL/HSV 视角调色：同一色板内，浅色=提高明度降低饱和度，深色=降低明度，避免「加黑加白」导致的脏色；
- 语义色不靠猜：错误「红」要与品牌红区分，用色相（Hue）+ 明度双维度定义，并从不用颜色作为唯一提示（色盲友好，配图标/文字，与可用性与无障碍互链）；
- 一套色板进入令牌体系：命名按语义（
text-primary/bg-danger）而非色值（#ff0000），映射关系交给设计系统统一管理。
60-30-10 的简化应用
- 60%：中性色大面积背景；
- 30%：次级区块、边框、次要文字；
- 10%：品牌色或语义色，只给主操作与关键状态。
每加一种「强调色」，都在稀释真正的重点。
字体排印：让文字有节奏
字阶（Type Scale）
用模数比例生成字阶，而不是「大一点、小一点」随意调：
常用比例 1.25（主要文字）/ 1.333（大标题）：
正文 16 → 标题 20 / 25 / 31 / 39…| 要素 | 建议 | 理由 |
|---|---|---|
| 正文字号 | 移动端 ≥ 16px | 防止 iOS 聚焦缩放，且可读性更稳 |
| 行高 | 正文 1.5~1.7 倍字号 | 中文阅读需要更宽松行距 |
| 行宽 | 单栏 45~75 字符（中文 30~40 字） | 过长折行会丢行 |
| 字重 | 同屏 ≤ 2 种（常规 + 一档粗体） | 层级靠字号而非字重堆叠 |
| 中英混排 | 中文字体族在前、西文字体兜底 | 见下方字体栈写法 |
中文排印注意
- 标点悬挂与行首禁则：中文引号/括号不落在行首，交给排版或逐字检查；
- 中西文混排加细空格：数字与单位、中文与英文间建议加空格（如「VitePress 1.6」而非「VitePress1.6」）；
- 全角/半角统一：正文用全角标点，代码、URL 用半角，不混用。
视觉层次：四大原则
| 原则 | 做法 | 常见误用 |
|---|---|---|
| 对比（Contrast） | 大小 / 明暗 / 色相制造焦点 | 处处都「强调」，等于没有重点 |
| 亲密性（Proximity） | 相关元素靠近，形成分组 | 用大量分隔线代替间距（线越多越吵） |
| 对齐（Alignment） | 同一列元素统一左对齐/基线对齐 | 居中滥用（长文本居中难读） |
| 重复（Repetition） | 标题、间距、圆角、图标风格保持一致 | 每个页面重新发明样式 |
层级速查（从高到低）
- 页面标题与主操作（最大对比）；
- 区块标题（次级字号 / 字重）；
- 正文与标签（中性色文字）；
- 辅助信息、元数据（弱化灰 + 小字号，但对比度仍达 WCAG AA）。
品牌一致性
- 一致性不是「每个页面都一样」，而是「每种角色长得一样」：所有「主按钮」同规格、「所有错误提示」同语气；
- 落地手段：设计令牌 + 组件库（见UI 界面与设计系统）+ 使用规范文档；
- 非设计资产（图标、插画）也应有统一网格与描边规范，否则随数量增长迅速失控。
常见坑速查
| 坑 | 现象 | 解法 |
|---|---|---|
| 先好看后语义 | 颜色漂亮但无法区分状态 | 先定语义与对比度，再调色相 |
| 灰阶缺失 | 界面全靠线条/投影分区 | 补充 2~3 档中性灰做底与文字 |
| 字重堆层级 | 粗体黑体到处都是 | 用字号 + 间距做层级 |
| 间距随意 | 4px、7px、13px 到处出现 | 统一 4/8px 单位阶梯 |
| 强调色过多 | 一屏 5 种颜色 | 中性色占 60%，强调留给主操作 |
| 色彩唯一表达 | 红=错误但无图标/文字 | 视觉双通道表达，避免色盲误读 |
检查清单
- [ ] 正文与背景对比度 ≥ 4.5:1，大字号 ≥ 3:1（已用工具验证）
- [ ] 颜色都有语义命名，且从不单独承载信息
- [ ] 间距全部落在 4/8px 基础单位阶梯上
- [ ] 字阶由模数比例生成，全站同屏字重 ≤ 2
- [ ] 去掉颜色后仅凭位置/大小仍能分清主次
- [ ] 同角色元素（按钮/提示/标签）全局同规格
- [ ] 中英文混排、标点与全半角已统一
规模化（令牌、组件、明暗主题）见UI 界面与设计系统；对比度等可访问性量化标准见可用性与无障碍；CSS 实现见前端样式方案。