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