hierarchy

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

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

必要准备

用户通过 /hierarchy 启动此工作流。此技能启用后，加载 $frontend-design——其中包含设计原则、反模式和上下文收集协议。继续之前，请遵循该协议——如果尚无设计上下文，必须先加载 $setup。

---

评估层级问题

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

1. 进行灰度测试：

   • 如果颜色消失，屏幕仍然容易理解吗？
   • 你能否在约 2 秒内识别主要、次要和第三级元素？

2. 检查是否存在视觉竞争：

   • 是否有多个卡片、标题或按钮同样醒目？
   • 分区标题是否抢走了其所标注内容的焦点？
   • 辅助细节相对于主要任务是否过于突出？
   • 沉重的图标、粗体标签或深色元数据是否盖过了它们本应辅助的内容？

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

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

4. 检查操作优先级：

   • 是否有一个一目了然的主要操作？
   • 次要操作是否清晰但更低调？
   • 第三级操作是否易于发现，又不会造成干扰？

5. 检查标签和值：

   • 是否所有内容都僵化地采用 label: value 模式，即使值本身已经不言自明？
   • 是否应该将标签和值合并，或弱化标签？

6. 检查视觉和谐：

   • 是否有明确的视觉焦点？
   • 页面是否处处都依赖同一种平衡方式（例如，每个分区都重复相同的左右布局）？
   • 文本与图像是否平衡，还是其中一方意外地过于突出？

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

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

如果从代码库中无法明确判断上述任何一点，请直接询问用户，澄清你无法推断的内容。

重要：层级问题不是表面问题。如果用户无法分辨哪些内容重要，设计就未能有效传达信息。

计划层级修正

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

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

围绕以下杠杆制定计划：

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

系统性地改善层级

明确层级结构

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

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

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

修正操作层级

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

重构标签和值

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

弱化分区标题

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

保持可预测性

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

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

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

利用空间明确优先级

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

有意运用邻近关系与对齐

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

支持预期的浏览模式

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

平衡视觉权重与对比度

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

切勿：

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

验证层级优化效果

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

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