Back to Details

hierarchy

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
Assess and improve visual hierarchy so the interface communicates priority immediately instead of making users decode it manually.
Use this when the problem is mainly priority and emphasis. If the bigger issue is arbitrary spacing, weak grouping, or monotonous layout rhythm, use 
arrange
.
评估并优化视觉层级，让界面直接传达优先级，而非让用户自行解读。
当问题主要集中在优先级与重点时使用此方法。若核心问题是间距混乱、分组模糊或布局节奏单调，请使用
arrange
。

MANDATORY PREPARATION

必备准备步骤

Users start this workflow with 
/hierarchy
. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first.
用户通过
/hierarchy
启动此工作流。激活该技能后，加载$frontend-design——其中包含设计原则、反模式以及上下文收集规范。在继续操作前请遵循该规范——如果尚未建立设计上下文，必须先加载$setup。

Assess Hierarchy Problems

评估层级问题

Analyze where the interface is failing to prioritize clearly:
  1. Run the grayscale test:
    • If color disappeared, would the screen still make sense?
    • Can you identify primary, secondary, and tertiary elements within about 2 seconds?
  2. Scan for competition:
    • Are multiple cards, titles, or buttons equally loud?
    • Are section titles stealing focus from the content they label?
    • Are supporting details too strong relative to the main task?
    • Are heavy icons, bold labels, or dark metadata outweighing the content they are supposed to support?
  3. Check consistency and predictability:
    • Do action colors and button treatments keep the same meaning across the flow?
    • Are similar success, error, or helper messages written with parallel structure?
    • Are icon styles, typography roles, and familiar layout regions consistent enough that users can transfer what they learned?
  4. Check action priority:
    • Is there one obvious primary action?
    • Are secondary actions clear but quieter?
    • Are tertiary actions discoverable without competing?
  5. Check labels and values:
    • Does everything use a rigid 
      label: value
      pattern even when the value is self-explanatory?
    • Should labels be combined with values or de-emphasized?
  6. Check visual harmony:
    • Is there a clear focal point?
    • Is the page relying on one balance mode everywhere (for example, the same left-right split repeated section after section)?
    • Are text and imagery balanced, or is one accidentally overpowering the other?
  7. Check spacing, proximity, and alignment:
    • Is space within groups smaller than the space between groups?
    • Are labels, inputs, cards, and navigation items grouped tightly enough to read as related?
    • Are shared alignment lines and container widths helping the screen scan cleanly?
    • Does the page support the right scan pattern for the content density (for example, denser F-pattern scanning vs lighter directed Z-pattern scanning)?
If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer.
CRITICAL: Hierarchy problems are not cosmetic. If users can't tell what matters, the design is failing at communication.
分析界面在优先级呈现上的不足之处：
  1. 执行灰度测试:
    • 如果去掉颜色，界面是否依然清晰易懂？
    • 能否在约2秒内识别出主要、次要和三级元素？
  2. 排查视觉冲突:
    • 是否存在多个卡片、标题或按钮视觉权重相同的情况？
    • 章节标题是否抢走了其标注内容的注意力？
    • 辅助细节相对于核心任务是否过于突出？
    • 厚重的图标、加粗的标签或深色元数据是否盖过了本应支持的内容？
  3. 检查一致性与可预测性:
    • 操作颜色和按钮样式在整个流程中是否保持语义一致？
    • 相似的成功、错误或提示信息是否采用统一结构？
    • 图标样式、排版角色和熟悉的布局区域是否足够一致，让用户可以迁移已掌握的使用经验？
  4. 检查操作优先级:
    • 是否有一个明确的主操作？
    • 次要操作是否清晰但视觉上更低调？
    • 三级操作是否可被发现但不与其他元素冲突？
  5. 检查标签与值:
    • 是否所有内容都严格采用
      label: value
      格式，即便值本身已经不言自明？
    • 是否应该将标签与值合并或弱化标签的视觉权重？
  6. 检查视觉协调性:
    • 是否有明确的视觉焦点？
    • 页面是否过度依赖同一种平衡模式（例如，重复使用左右分栏结构）？
    • 文本与图像是否平衡，还是其中一方意外地盖过了另一方？
  7. 检查间距、邻近性与对齐方式:
    • 组内间距是否小于组间间距？
    • 标签、输入框、卡片和导航项是否足够紧凑，让用户能识别出它们的关联性？
    • 统一的对齐线和容器宽度是否有助于用户流畅浏览界面？
    • 页面是否支持适合内容密度的扫描模式（例如，高密度内容的F型扫描 vs 轻量化内容的Z型定向扫描）？
如果从代码库中无法明确上述任何问题，请直接询问用户以澄清无法推断的信息。
关键提示：层级问题并非表面美化问题。如果用户无法分辨内容的重要性，说明设计在信息传达上已经失败。

Plan Hierarchy Fixes

规划层级修复方案

Consult the hierarchy checklist for grayscale tests, label/value handling, action hierarchy, and de-emphasis techniques. Consult the text hierarchy and readability when title restraint, label/value structure, line length, semantic-vs-visual hierarchy, or weight-versus-contrast balancing are part of the problem. Consult the design-system alignment when hierarchy problems are partly caused by inconsistent action styles, icon logic, or drifted component treatments across the product. Consult the spatial design and spacing system references when hierarchy problems are really spacing, grouping, or alignment problems in disguise.
Use the shared references as the canonical source for hierarchy and readability doctrine, then focus this skill on fixing priority and emphasis in the actual interface.
Create a plan around these levers:
  • What should be primary?
  • What should become quieter?
  • Which labels can be removed, combined, or de-emphasized?
  • Which actions need differentiated treatments?
  • Which inconsistencies are teaching the wrong pattern?
  • What balance mode would make the screen feel clearer and more complete?
  • What spacing and alignment changes would make grouping more obvious?
  • What scan path should the layout support?
参考层级检查清单获取灰度测试、标签/值处理、操作层级以及弱化视觉权重的技巧。 当问题涉及标题克制、标签/值结构、行长度、语义层级vs视觉层级或权重与对比度平衡时，参考文本层级与可读性。 当层级问题部分源于产品中操作样式、图标逻辑或组件处理不一致时，参考设计系统对齐。 当层级问题实际是间距、分组或对齐问题的伪装时，参考空间设计和间距系统文档。
将共享参考文档作为层级与可读性原则的权威来源，然后聚焦于修复实际界面中的优先级与重点问题。
围绕以下维度制定修复计划：
  • 哪些内容应作为核心重点？
  • 哪些内容需要降低视觉权重？
  • 哪些标签可以移除、合并或弱化？
  • 哪些操作需要差异化处理？
  • 哪些不一致性在传递错误的使用模式？
  • 哪种平衡模式能让界面更清晰、更完整？
  • 哪些间距和对齐调整能让分组更明显？
  • 布局应支持何种扫描路径？

Improve Hierarchy Systematically

系统性优化层级

Clarify the Pyramid

明确层级金字塔

  • Establish one clear primary focus
  • Give secondary and tertiary content visibly quieter treatments
  • Use space, weight, contrast, and placement before inventing decorative fixes
  • 确立一个清晰的核心视觉焦点
  • 为次要和三级内容设置明显更低调的视觉处理方式
  • 在使用装饰性修复前，优先利用间距、权重、对比度和位置来区分层级

Emphasize by De-emphasizing

通过弱化次要元素强化重点

  • Reduce contrast on competing elements
  • Soften secondary icon or text colors
  • Quiet sidebars, metadata, and labels before making the hero louder
  • 降低冲突元素的对比度
  • 柔和次要图标或文本的颜色
  • 在强化核心内容前，先弱化侧边栏、元数据和标签的视觉权重

Fix Action Hierarchy

修复操作层级

  • Use one clear primary button style
  • Use secondary styles for supportive actions
  • Use link-like or tertiary styles for low-frequency actions
  • Reserve visually dominant destructive styling for confirmation moments, not every delete button
  • 使用一种清晰的主按钮样式
  • 为辅助操作使用次要样式
  • 为低频率操作使用类链接或三级样式
  • 仅在确认环节使用视觉突出的破坏性样式，而非所有删除按钮

Restructure Labels and Values

重构标签与值

  • Remove labels when the value format is already obvious
  • Combine labels and values when that improves scanning
  • Treat labels as supporting content by default
  • In technical contexts, let labels take slightly more emphasis when users are scanning for specs or field names
  • 当值的格式已经明确时，移除标签
  • 合并标签与值以提升扫描效率
  • 默认将标签视为辅助内容
  • 在技术场景中，当用户需要扫描规格或字段名称时，可适当提升标签的视觉权重

Quiet Section Titles

弱化章节标题

  • Treat section titles like labels unless they truly deserve headline treatment
  • Make titles smaller or lower contrast when the content should lead
  • Separate semantic importance from visual size; a structurally important heading can still be visually restrained
  • 除非章节标题确实需要标题级别的视觉处理，否则将其视为标签
  • 当内容应成为焦点时，缩小标题尺寸或降低其对比度
  • 将语义重要性与视觉尺寸分离；结构上重要的标题仍可保持视觉克制

Preserve Predictability

保持可预测性

  • Keep action colors and button styles semantically stable across similar contexts
  • Keep repeated message patterns and labels parallel so users learn the system faster
  • Keep icon families, layout regions, and familiar navigation structures consistent unless there is a strong workflow reason to change them
  • 在相似场景中，保持操作颜色和按钮样式的语义稳定性
  • 保持重复的消息模式和标签的统一性，让用户更快熟悉系统
  • 保持图标家族、布局区域和熟悉的导航结构一致，除非有充分的工作流理由需要更改

Improve Harmony, Not Just Loudness

提升视觉协调性，而非仅增强醒目度

  • Use symmetry when the section should feel stable and orderly, but avoid repeating the same symmetrical structure everywhere
  • Use asymmetry when the screen needs movement or stronger focal direction, but keep the weight balanced
  • Use centered or radial emphasis when one item truly deserves unmistakable focus
  • Rebalance text and images so neither side accidentally crushes the other
  • 当需要让章节感觉稳定有序时使用对称结构，但避免在所有地方重复相同的对称结构
  • 当界面需要动态感或更强的焦点导向时使用不对称结构，但要保持视觉权重平衡
  • 当某个元素确实需要无可争议的焦点时，使用居中或放射状强调方式
  • 重新平衡文本与图像，避免其中一方意外压制另一方

Use Space to Clarify Priority

利用间距明确优先级

  • Keep more space around groups than within them
  • Increase space around the primary element when it needs stronger focus
  • Keep text, controls, and media off container edges unless edge tension is intentional
  • Separate different sections enough that users can feel the topic change
  • 组间间距大于组内间距
  • 当核心元素需要更强的焦点时，增加其周围的间距
  • 除非有意营造边缘张力，否则避免文本、控件和媒体紧贴容器边缘
  • 不同章节之间保持足够间距，让用户能感知到主题的变化

Use Proximity and Alignment Deliberately

刻意利用邻近性与对齐方式

  • Pull related fields, labels, and support text closer together
  • Increase separation between unrelated groups
  • Top-align larger neighboring blocks when comparison matters
  • Keep major sections aligned to stable container edges so scanning stays effortless
  • Choose centered alignment only when the content is compact enough that it still reads clearly
  • 将相关字段、标签和辅助文本拉近
  • 增加不相关组之间的间距
  • 当需要进行对比时，将相邻的大块内容顶部对齐
  • 让主要章节对齐稳定的容器边缘，确保浏览流畅
  • 仅当内容足够紧凑且易于阅读时，才选择居中对齐

Support the Intended Scan Pattern

支持预期的扫描模式

  • Use denser left-to-right, top-to-bottom structure for information-heavy screens
  • Use cleaner directional composition for lighter, CTA-led screens
  • Place anchors like logos, main titles, and primary actions where the eye can find them quickly
  • 针对信息密集型界面，使用更紧凑的从左到右、从上到下结构
  • 针对轻量化、以CTA为核心的界面，使用更简洁的定向布局
  • 将Logo、主标题和主操作等锚点放置在用户视线容易快速找到的位置

Balance Weight and Contrast

平衡权重与对比度

  • If icons feel louder than nearby text, soften their contrast before changing everything else
  • If separators are too faint, consider a slightly heavier treatment before making them darker and harsher
  • Use contrast reduction to quiet heavy elements and weight to support subtle low-contrast elements when needed
NEVER:
  • Make every section title feel like a headline
  • Style every action as primary
  • Use color as the only hierarchy tool
  • Leave labels at the same visual weight as the data they describe when the data matters more
  • Randomly change action meaning, icon logic, or layout patterns that users already learned
  • Try to fix weak hierarchy only by adding more decoration
  • 如果图标比附近的文本更醒目，先降低图标的对比度，再考虑更改其他元素
  • 如果分隔线过于模糊，可适当增加其权重，而非直接加深颜色使其更刺眼
  • 必要时，通过降低对比度来弱化厚重元素，通过增加权重来支持低对比度的细微元素
绝对禁止:
  • 让每个章节标题都像主标题一样醒目
  • 将所有操作都设置为主操作样式
  • 将颜色作为唯一的层级区分工具
  • 当数据更重要时，让标签与所描述的数据保持相同的视觉权重
  • 随意更改用户已熟悉的操作含义、图标逻辑或布局模式
  • 仅通过添加更多装饰来修复薄弱的层级结构

Verify Hierarchy Improvements

验证层级优化效果

  • Grayscale clarity: Does it still work without color?
  • 2-second scan: Can users identify the primary action and key content quickly?
  • Action clarity: Is one action clearly first?
  • Label/value efficiency: Is data easier to scan after restructuring?
  • Reduced competition: Do quieter elements actually recede?
Remember: Great hierarchy makes the right thing feel obvious. If users have to study the screen, the hierarchy still needs work.
  • 灰度清晰度：去掉颜色后界面是否依然可用？
  • 2秒扫描测试：用户能否快速识别主操作和关键内容？
  • 操作清晰度：是否有一个明确的首要操作？
  • 标签/值效率：重构后数据是否更易于扫描？
  • 冲突减少：弱化的元素是否真正退居次要位置？
记住：优秀的层级设计会让正确的选择显得理所当然。如果用户需要仔细研究界面，说明层级设计仍需改进。