关于 hierarchy-principles
hierarchy-principles 是一项用于对话中设计工作的视觉层级技能，强调每个屏幕都应有明确的主元素，并通过多种视觉线索匹配内容优先级。
主要功能
- 01为每个屏幕确立主元素
- 02至少使用两种层级线索
- 03让视觉权重匹配内容优先级
- 04遮住部分屏幕来检验层级
适用场景
- 01明确屏幕的视觉焦点
- 02检查元素相互争夺注意力的布局
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/hierarchy-principles确认已加载。
详细介绍
层级原则
这是任何视觉设计中最重要的一点。
如何使用
/hierarchy-principles将层级约束应用于本次对话中的任何设计工作。
约束
层级规则
- MUST 在每个屏幕上明确设置一个主元素。如果所有内容都很重要，就等于没有重点。
- MUST 至少通过以下两种方式建立层级：尺寸、字重、对比度、颜色、留白、位置
- MUST 确保视觉权重与内容优先级相符（最重要的内容应最醒目）
- NEVER 让两个元素处于同一层级并相互竞争，除非刻意制造张力
- SHOULD 通过遮住半个屏幕进行测试。你还能看出什么最重要吗？
层级工具
- 尺寸： 越大的元素越先被看到。最大与最小元素之间的比例决定了层级范围。
- 字重： 越粗的元素越能吸引注意力。应谨慎使用，否则就没有元素能脱颖而出。
- 对比度： 高对比度元素能吸引视线。低对比度元素则退居次要位置。
- 颜色： 高饱和度的颜色更醒目，低饱和度的颜色则更低调。在中性色系统中加入一种强调色，就能立即建立层级。
- 留白： 更多留白意味着更重要。拥挤的元素会让人觉得是元数据。
- 位置： 左上角最先被看到（从左到右的阅读方向）。中心位置会吸引注意力。右下角通常容易被忽略，除非通过层级设计引导视线。
反模式
- 只用尺寸作为层级工具（会造成单调的布局）
- 所有内容都加粗（会削弱加粗的作用）
- 在同一屏幕上设置相互竞争的行动号召
- 导航的视觉存在感强于其服务的内容
评论
支持 Markdown