Back to Details

establish-visual-hierarchy

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Skill: Establish Visual Hierarchy

技能：建立视觉层级

Purpose

目的

Determine what UI element should draw attention first, second, third. Visual hierarchy controls the order in which users process information using size, weight, color, and de-emphasis strategies.
确定哪些UI元素应分别成为第一、第二、第三吸引用户注意力的对象。视觉层级通过尺寸、字重、颜色及弱化策略，控制用户处理信息的顺序。

Quick Reference

快速参考

StrategyWhen to Use
Size + WeightPrimary headlines, important CTAs
Color ContrastSecondary content, supporting text
De-emphasizeWhen primary isn't standing out
Weight/Contrast BalanceIcons next to text, borders
策略使用场景
尺寸+字重主标题、重要CTA
色彩对比次要内容、辅助文本
弱化处理当主元素不够突出时
字重/色彩对比平衡文本旁的图标、边框

Execution Workflow

执行流程

Step 1: Identify Primary Element

步骤1：确定主元素

  • What is the single most important thing on this screen?
  • What action should the user take?
  • What information is critical?
  • 该界面上最重要的内容是什么？
  • 用户应执行什么操作？
  • 哪些信息是关键的？

Step 2: Assess Current Hierarchy

步骤2：评估当前视觉层级

Check visual weight of each element:
  • Size: Larger = more attention
  • Weight: Bolder = more importance
  • Color: Higher contrast = more prominent
  • Whitespace: More surrounding space = stands out
检查每个元素的视觉权重：
  • 尺寸：越大越吸引注意力
  • 字重：越粗越重要
  • 颜色：对比度越高越突出
  • 留白：周围空间越多越醒目

Step 3: Apply Multi-Factor Hierarchy

步骤3：应用多因素层级设计

Don't rely on size alone:
  1. Use weight (600-700) for emphasis
  2. Use color (grey scale) to de-emphasize
  3. Keep sizes reasonable
不要仅依赖尺寸：
  1. 使用字重（600-700）来强调
  2. 使用颜色（灰度）来弱化
  3. 保持尺寸合理

Step 4: De-emphasize Competitors

步骤4：弱化竞争元素

If primary element isn't standing out:
  • Reduce contrast of surrounding elements
  • Use softer colors for secondary content
  • Remove unnecessary backgrounds
如果主元素不够突出：
  • 降低周围元素的对比度
  • 为次要内容使用柔和色调
  • 移除不必要的背景

Decision Criteria

判定标准

PASS

通过标准

  • Most important element has highest visual weight
  • Hierarchy uses weight/color, not just size
  • Surrounding elements are subdued
  • Clear visual path: primary → secondary → tertiary
  • 最重要的元素具有最高视觉权重
  • 层级设计结合字重/色彩，而非仅依赖尺寸
  • 周围元素被弱化
  • 清晰的视觉路径：主元素→次要元素→三级元素

FAIL

不通过标准

  • Relying solely on font size
  • Everything equally emphasized
  • Critical elements buried
  • Decorative elements competing
  • 仅依赖字体尺寸
  • 所有元素被同等强调
  • 关键元素被埋没
  • 装饰元素与主元素争夺注意力

Common Patterns

常见模式

Pattern: Marketing Page Hero

模式：营销页面首屏

H1: 48px, weight 700, dark    ← Primary
CTA: 16px, solid brand color  ← Secondary
Body: 16px, weight 400, grey  ← Tertiary
H1: 48px, weight 700, dark    ← Primary
CTA: 16px, solid brand color  ← Secondary
Body: 16px, weight 400, grey  ← Tertiary

Pattern: Dashboard Card

模式：仪表盘卡片

Metric: 32px, weight 700      ← Primary
Label: 14px, weight 400, grey ← Secondary
Action: Text link, brand color ← Tertiary
Metric: 32px, weight 700      ← Primary
Label: 14px, weight 400, grey ← Secondary
Action: Text link, brand color ← Tertiary

Anti-Patterns

反模式

Anti-PatternWhy It FailsFix
Logo larger than headlineBrand over valueReduce logo, increase headline
60px headline, 12px bodySize extremesUse 40px + weight, 16px body
All bold textNothing stands outUse weight hierarchy
Large section titlesContent buriedMake titles smaller than content
反模式失败原因修复方案
Logo比标题大品牌优先于价值传递缩小Logo，增大标题
60px标题搭配12px正文尺寸差距过大使用40px标题（加粗）搭配16px正文
所有文本加粗无元素突出使用字重层级
大尺寸章节标题内容被埋没让标题尺寸小于内容

References

参考资料

  • references/size-isnt-everything.md
  • references/emphasize-by-de-emphasizing.md
  • references/ignore-document-hierarchy.md
  • references/size-isnt-everything.md
  • references/emphasize-by-de-emphasizing.md
  • references/ignore-document-hierarchy.md

Examples

示例

See 
examples/visual-hierarchy/
for before/after cases.
查看
examples/visual-hierarchy/
目录下的前后对比案例。