hierarchy

评估并改善视觉层级，让界面能够立即传达优先级，而不是让用户手动判断。

当问题主要在于优先级和强调时使用此方法。如果更大的问题是间距随意、分组不清晰或布局节奏单调，请使用 arrange。

必做准备

阅读 frontend-design，并遵循其上下文收集流程。重用现有上下文，只针对影响重大的信息缺口提问。

---

评估层级问题

分析界面在哪些方面未能清晰体现优先级：

1. 进行灰度测试：

   • 如果颜色消失，屏幕是否仍然一目了然？
   • 你能否在约 2 秒内识别主要、次要和第三级元素？

2. 检查竞争关系：

   • 是否有多个卡片、标题或按钮同样醒目？
   • 章节标题是否比其所标注的内容更吸引注意力？
   • 辅助信息相对于主要任务是否过于醒目？
   • 醒目的图标、粗体标签或深色元数据，是否比其本应辅助的内容更突出？

3. 检查一致性和可预测性：

   • 在整个流程中，操作颜色和按钮样式是否始终表达相同含义？
   • 相似的成功、错误或辅助消息是否采用平行的表达结构？
   • 图标样式、排版角色和常见布局区域是否足够一致，让用户能够运用已学会的经验？

4. 检查操作优先级：

   • 是否有一个明显的主要操作？
   • 次要操作是否清晰但不那么醒目？
   • 第三级操作是否便于找到，同时又不会争夺注意力？

5. 检查标签和值：

   • 是否所有内容都僵化地采用 label: value 模式，即使值本身已经不言自明？
   • 是否应将标签与值合并，或降低标签的强调程度？

6. 检查视觉和谐度：

   • 是否有明确的视觉焦点？
   • 页面是否在各处都采用同一种平衡模式（例如，每个章节都重复相同的左右分栏）？
   • 文本和图像是否平衡，还是其中一方意外地过于突出？

7. 检查间距、邻近关系和对齐方式：

   • 组内间距是否小于组间间距？
   • 标签、输入框、卡片和导航项是否足够紧密地分组，让用户能看出它们彼此相关？
   • 共用的对齐线和容器宽度是否有助于清晰浏览屏幕？
   • 页面是否支持与内容密度相适应的扫描模式（例如，密集内容采用 F 形扫描，较轻内容采用定向 Z 形扫描）？

如果无法从代码库中判断上述任何一点，请直接向用户询问，以澄清无法推断的信息。

关键：层级问题不是表面问题。如果用户无法判断什么最重要，设计就未能有效传达信息。

计划层级修正

查看层级检查清单，了解灰度测试、标签与值的处理、操作层级和弱化技巧。 如果问题涉及标题克制、标签与值的结构、行长、语义与视觉层级，或字重与对比度的平衡，请查看文本层级与可读性。 如果层级问题部分源于操作样式、图标逻辑不一致，或产品中组件处理方式的偏差，请查看设计系统一致性。 如果层级问题实际上是伪装成层级问题的间距、分组或对齐问题，请查看空间设计和间距系统参考资料。

将共享参考资料作为层级和可读性原则的权威来源，然后聚焦于这项技能：修正实际界面中的优先级和强调方式。

围绕以下杠杆制定计划：

• 什么应该成为主要内容？
• 什么应该弱化？
• 哪些标签可以删除、合并或弱化？
• 哪些操作需要采用不同的样式？
• 哪些不一致之处传递了错误的模式？
• 采用哪种平衡方式能让屏幕更清晰、更完整？
• 哪些间距和对齐调整能让分组更明显？
• 布局应该支持怎样的浏览路径？

系统性地改善层级

明确层级结构

• 确立一个清晰的主要焦点
• 让次要和第三级内容的样式明显更低调
• 优先通过空间、字重、对比度和位置来调整，而不是凭空添加装饰性修正

通过弱化其他元素来突出重点

• 降低竞争元素的对比度
• 弱化次要图标或文字的颜色
• 在强化主视觉之前，先弱化侧边栏、元数据和标签

修正操作层级

• 使用一种清晰的主要按钮样式
• 使用次要样式呈现辅助操作
• 使用类似链接的样式或第三级样式呈现低频操作
• 仅在确认环节使用视觉上突出的危险样式，而不是为每个删除按钮都使用这种样式

重构标签和值

• 如果值的格式已经一目了然，就移除标签
• 如果有助于浏览，就合并标签和值
• 默认将标签作为辅助内容处理
• 在技术场景中，当用户正在查找规格或字段名称时，可稍微加强标签的强调程度

弱化分区标题

• 除非分区标题确实需要作为标题突出显示，否则应像标签一样处理
• 当内容应成为焦点时，缩小标题或降低其对比度
• 将语义重要性与视觉尺寸区分开；结构上重要的标题也可以在视觉上保持克制

保持可预测性

• 在相似情境中，保持操作颜色和按钮样式的语义一致
• 让重复的消息模式和标签保持平行，以便用户更快熟悉系统
• 保持图标系列、布局区域和熟悉的导航结构一致，除非有充分的工作流理由需要改变

改善整体协调，而非一味增强视觉效果

• 当分区需要显得稳定有序时使用对称布局，但避免到处重复相同的对称结构
• 当屏幕需要动感或更明确的视觉焦点时使用非对称布局，同时保持整体视觉重量平衡
• 当某个元素确实需要成为明确无疑的焦点时，使用居中或放射状强调
• 重新平衡文字和图像，避免任何一方意外压过另一方

利用空间明确优先级

• 分组之间的留白应多于组内元素之间的留白
• 当主要元素需要更突出时，增加其周围的空间
• 除非有意营造边缘张力，否则文字、控件和媒体都应与容器边缘保持距离
• 让不同分区之间保持足够间隔，使用户能感受到主题转换

有意运用邻近关系与对齐

• 将相关字段、标签和辅助文本彼此靠近
• 增加互不相关的分组之间的间距
• 需要对比时，将相邻的大块内容顶端对齐
• 让主要区块与稳定的容器边缘对齐，确保浏览轻松顺畅
• 仅当内容足够紧凑、仍能清晰阅读时，才选择居中对齐

支持预期的浏览模式

• 信息密集的屏幕采用更紧凑的从左到右、从上到下的布局
• 以行动号召为主的轻量屏幕采用更清晰的引导式构图
• 将 Logo、主标题和主要操作等视觉锚点放在用户视线能快速找到的位置

平衡视觉权重与对比度

• 如果图标比附近的文本更抢眼，先降低图标的对比度，而不是改变其他所有元素
• 如果分隔线太淡，可先考虑稍微加粗处理，而不是让它们变得更深、更刺眼
• 需要时，通过降低对比度让突出的元素更柔和，并通过加重来凸显低对比度的细微元素

切勿：

• 让每个区块标题都像主标题一样醒目
• 将每个操作都设为主要操作
• 只用颜色来体现层级
• 当数据更重要时，仍让标签与数据具有相同的视觉权重
• 随意改变用户已经熟悉的操作含义、图标逻辑或布局模式
• 仅靠添加更多装饰来弥补层级不清的问题

验证层级优化效果

• 灰度清晰度：没有颜色时，效果仍然好吗？
• 2 秒浏览测试：用户能快速识别主要操作和关键信息吗？
• 操作清晰度：是否有一个操作明显优先？
• 标签与数值的效率：调整结构后，数据是否更易于浏览？
• 减少竞争：次要元素是否确实退居次要位置？

记住：优秀的层级设计能让正确的内容一目了然。如果用户还得仔细研究屏幕，说明层级仍有待改进。