关于 establish-visual-hierarchy
Establish Visual Hierarchy 是用于确定界面元素注意力顺序的设计技能，通过评估大小、字重、颜色和留白来明确视觉路径。
主要功能
- 01识别屏幕上的首要元素
- 02评估大小、字重与对比度
- 03运用多因素建立层级
- 04弱化竞争注意力的元素
- 05检查主次视觉顺序
适用场景
- 01明确营销页面的视觉焦点
- 02突出仪表盘指标
- 03减少界面元素之间的注意力竞争
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/establish-visual-hierarchy确认已加载。
详细介绍
技能：建立视觉层级
用途
确定哪个 UI 元素应最先、其次、再次吸引注意力。视觉层级通过尺寸、字重、颜色和弱化策略，控制用户处理信息的顺序。
快速参考
| 策略 | 使用场景 |
|---|---|
| 尺寸 + 字重 | 主标题、重要的 CTA |
| 颜色对比度 | 次要内容、辅助文本 |
| 弱化 | 主要元素不够突出时 |
| 字重/对比度平衡 | 紧邻文本的图标、边框 |
执行工作流
步骤 1：识别主要元素
- 屏幕上最重要的内容是什么？
- 用户应该采取什么操作？
- 哪些信息至关重要？
步骤 2：评估当前层级
检查每个元素的视觉权重：
- 尺寸：越大越能吸引注意力
- 字重：越粗越重要
- 颜色：对比度越高越醒目
- 留白：周围空间越多越突出
步骤 3：应用多因素层级
不要只依赖尺寸：
- 使用 字重（600-700）来强调
- 使用 颜色（灰度）来弱化
- 保持合理的尺寸
步骤 4：弱化竞争元素
如果主要元素不够突出：
- 降低周围元素的对比度
- 次要内容使用更柔和的颜色
- 移除不必要的背景
判断标准
通过
- 最重要的元素具有最高的视觉权重
- 层级运用字重/颜色，而不只是尺寸
- 周围元素得到弱化
- 视觉路径清晰：主要 → 次要 → 第三层
未通过
- 仅依赖字号
- 所有元素都同样醒目
- 关键元素被埋没
- 装饰元素争夺注意力
常见模式
模式：营销页面主视觉区
H1: 48px, weight 700, dark ← Primary
CTA: 16px, solid brand color ← Secondary
Body: 16px, weight 400, grey ← Tertiary
模式：仪表板卡片
Metric: 32px, weight 700 ← Primary
Label: 14px, weight 400, grey ← Secondary
Action: Text link, brand color ← Tertiary
反模式
| 反模式 | 失败原因 | 修复方法 |
|---|---|---|
| Logo 比标题更大 | 品牌压过价值 | 缩小 Logo，放大标题 |
| 60px 标题，12px 正文 | 尺寸差异过大 | 使用 40px + 字重，正文 16px |
| 所有文字都加粗 | 没有内容能脱颖而出 | 使用字重层级 |
| 区块标题过大 | 内容被埋没 | 让标题小于内容 |
参考资料
references/size-isnt-everything.mdreferences/emphasize-by-de-emphasizing.mdreferences/ignore-document-hierarchy.md
示例
查看 examples/visual-hierarchy/ 中的前后对比案例。
评论
支持 Markdown