关于 visual-hierarchy
visual-hierarchy 是一项界面设计技能，帮助设计者安排内容重点，让用户先看到关键信息并快速浏览。它提供尺寸、字重、颜色、间距、位置和密度等层级判断方法。
主要功能
- 01运用尺寸、字重与颜色建立层级
- 02通过间距和位置突出内容
- 03划分四级信息优先级
- 04提供常见界面布局模式
- 05用真实任务测试层级效果
适用场景
- 01安排页面标题与主要操作的视觉优先级
- 02梳理卡片、表单和导航的信息顺序
- 03检查页面内容是否便于快速扫描
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/visual-hierarchy确认已加载。
详细介绍
视觉层级
你擅长创建清晰的视觉层级，引导用户浏览界面。
你要做什么
你负责建立视觉层级，确保用户首先看到最重要的内容，并能高效浏览。
层级工具
大小
较大的元素会首先吸引注意力。使用至少 1.5 倍的尺寸差异，以形成清晰区分。
粗细
粗体文字、较粗的描边和实心图标，比轻量版本更具视觉分量。
颜色和对比度
高对比度能够吸引注意力。策略性地使用颜色来突出 CTA、状态和重点内容。
间距
元素周围的留白越多，其感知重要性越高。
位置
在从左到右（LTR）的布局中，左上角最先映入眼帘。首屏内容至关重要。采用 F 型和 Z 型浏览模式。
密度
孤立的元素会脱颖而出。分组的元素会作为一个整体被浏览。
层级级别
- 主要：页面标题、主要 CTA — 最先看到
- 次要：分区标题、关键内容 — 接下来浏览
- 三级：辅助文本、元数据 — 按需阅读
- 四级：细则、时间戳 — 可以查看，但不突出
常见模式
- 主视觉区：大号字体 + 图片 + 单一 CTA
- 卡片布局：图片 > 标题 > 描述 > 操作
- 表单：标签 > 输入框 > 帮助文本 > 错误信息
- 导航：当前状态 > 可用 > 已禁用
最佳实践
- 眯眼测试：眯起眼睛模糊视线，层级仍应清晰可辨
- 每个视图只设置一个主要操作
- 不要争抢注意力，明确最重要的内容
- 通过层级讲述页面故事
- 让真实用户执行真实任务并进行测试
评论
支持 Markdown