[!info] related notes

• 所属 MOC: ui-ux-moc
• 相关概念:
• 易混淆概念:
• 相关资源:

视觉层级、留白与 UI 减法

核心结论

视觉设计最重要的任务之一，不是“让每个元素都更精致”，而是：

让用户不需要认真研究界面，就自然知道先看什么、哪些东西属于一起、哪里可以操作。

因此视觉层级的本质是注意力分配。

Visual Hierarchy：第一眼、第二眼、第三眼

做完信息架构以后，可以强迫自己回答：

第一眼应该看到什么？
第二眼应该看到什么？
第三眼才需要看到什么？

如果答案是“所有东西都很重要”，通常意味着还没有完成设计。

视觉层级主要通过这些变量表达：

• Size：尺寸；
• Weight：字重；
• Contrast：对比度；
• Position：位置；
• Spacing：间距；
• Color：颜色；
• Density：信息密度；
• Motion：必要时的动态强调。

BodySense 例子

身体状态区域可能希望用户：

第一眼：人体图上有哪些区域有记录
第二眼：当前选中的区域是什么
第三眼：该区域的具体观察、历史与依据

这意味着人体图和区域标记应该成为主视觉信息，而不是让页面标题、说明段落、多个卡片边框和背景层同时抢注意力。

为什么“所有东西都加框”会变乱

Card、Border、Background 都在表达“这是一个独立区域”。

如果每个元素都使用这些信号：

大容器有背景
  └─ 业务区域有边框
       └─ 人体有 Card
            └─ 状态又有 Card

视觉上会不断产生新的“区域边界”，用户需要先理解容器，再理解内容。

很多时候，正确的分组只需要：

Title
Description

[适当间距]

Content

而不需要额外的 Card。

Gestalt：为什么间距本身就能分组

Proximity：接近原则

靠得近的东西会自然被理解为一组。

左肩
持续观察

          32px

颈部
已确认记录

即使没有边框，也可以自然分成两组。

这就是为什么 UI设计中的间距管理 不只是 CSS 数值问题，它同时承担信息关系表达。

Similarity：相似原则

样式相同的元素会被认为属于同一类。

因此：

• 所有身体区域标记应有一致交互语言；
• 相同层级标题不要忽大忽小；
• 相同类型状态不要每个页面发明新颜色和形状。

Common Region：共同区域

Card 的确可以表达“这些内容属于一起”，但它应该在真正需要明确边界时使用，而不是默认容器。

Whitespace：留白不是浪费空间

留白提供：

• 分组；
• 节奏；
• 视觉呼吸；
• 重点；
• 阅读路径。

一个常见间距阶梯是：

4 / 8 / 12 / 16 / 24 / 32 / 48 / 64

具体规则已经沉淀在 UI设计中的间距管理。

关键不是死记某个像素值，而是建立层次：

4 / 8      紧密绑定
12 / 16    同一组件内部
24 / 32    同一 Section 内不同组
48 / 64    大 Section 之间

Typography：字体首先表达层级

Typography 不只是“选一个好看的字体”。

至少要区分：

Page / Section Heading
Primary Content
Body Text
Secondary Text
Metadata / Caption

常见错误是：

• 标题、正文、辅助信息尺寸太接近；
• 所有标题都 Bold；
• 用颜色弥补缺失的字号与字重层级；
• 辅助说明比真正内容更抢眼。

设计时先用尺寸 + 字重 + 间距建立层级，再考虑颜色。

Color：颜色是强调手段，不是分组万能胶

颜色适合表达：

• 品牌；
• 可交互状态；
• 语义状态；
• 重点；
• 选择与风险。

不适合用几十种颜色弥补结构混乱。

BodySense 还要特别注意：

• 不把颜色当成唯一状态编码；
• 风险、关注、普通记录之间的语义要稳定；
• 健康相关信息避免用过度惊吓的视觉语言放大不确定结论。

UI 减法：什么应该删

面对一个元素，可以按下面顺序判断。

1. 它是否服务当前 User Goal？

如果不服务，先考虑移出主界面。

2. 它是否提供独一无二的信息？

如果只是重复标题、重复状态或重新解释视觉已经表达的东西，优先删除。

3. 它是否必须永久显示？

如果只在首次使用、错误、空态或特定选择时需要，就让它只在那个状态出现。

4. 它是不是在弥补另一个设计问题？

例如：

因为分组不清 → 加 Card
因为 Card 太多 → 加背景色区分
因为背景太多 → 再加 Border

这时应该回头修 IA 和 spacing，而不是继续叠视觉层。

保留 / 弱化 / 按需 / 删除

一个实用的四分法：

KEEP
当前目标、当前状态、安全、核心操作所必需

DE-EMPHASIZE
有用但不是主要任务

ON-DEMAND
偶尔需要，放到展开、Drawer、Tooltip、详情

DELETE
重复、装饰性噪音、解释实现而非帮助用户

BodySense：为什么那批说明文字可以删

假设页面已有：

身体状态地图
用身体区域快速定位当前记录
当前状态
[人体 SVG + 区域标记]
区域标记来自已确认信息与持续观察，仅用于组织身体记录……
把已经确认的信息、持续观察和仍待分析的线索集中在这里……

逐项审查：

• “身体状态地图”：如果页面上下文已经明确，可以弱化甚至省略；
• “用身体区域快速定位当前记录”：如果人体图本身已经明显表达，可放空态或首次引导；
• “当前状态”：如果下面没有真正独立的状态概念，只是一个标签，则可能是冗余标题；
• 两段长说明：更像设计者解释系统，不是用户当前任务，适合按需或删除。

理想状态可能只留下：

[人体 SVG]
  ● 左肩
  ● 颈部

[选中某区域后才出现的相关内容]

无数据时再出现：

暂时没有身体记录。完成一次对话后，相关区域会显示在这里。

这就是“状态驱动的文案”而不是“永久解释型文案”。

Decoration 最后做

完整顺序仍然应该是：

User Goal
→ IA
→ Flow
→ Interaction
→ Hierarchy
→ Layout
→ Spacing
→ Typography
→ Color
→ Decoration

Decoration 包括：

• 阴影；
• 渐变；
• 特殊材质；
• 装饰性背景；
• 复杂光效。

这些可以提高品牌感，但不能修复前面的结构问题。

Review 时不要只问“好不好看”

可以改成：

1. 第一眼看到的是不是最重要的信息？
2. 两个相关元素能否靠 spacing 自然分组，而无需 Card？
3. 是否存在 Card inside Card？
4. 是否有 Border、Background、Shadow 同时表达同一个边界？
5. 辅助文字是不是比主内容更抢眼？
6. 是否有永久存在但只在 Empty / Error / Onboarding 才有意义的文案？
7. 颜色是否承担了过多结构职责？
8. 删除一个元素以后，任务完成是否完全不受影响？如果是，为什么还保留？

最短记忆

结构决定秩序，间距决定关系，排版决定层级，颜色决定强调，装饰只负责最后的气质。

相关知识

• 信息架构（Information Architecture）
• UI设计中的间距管理
• UI设计中手机端的间距管理
• UI设计的要点
• Design System：从 Token 到产品界面