Visual Hierarchy 视觉层级
视觉层级像舞台灯光。主角更亮、更靠前,配角安静支撑。如果所有元素都在喊,用户就不知道该先看标题、证据、价格还是按钮。
关键结构图
同一页面里标题最大、摘要次之、证据较弱、CTA 高亮,旁边用箭头标出视线顺序。
What
Visual Hierarchy 是用大小、位置、颜色、间距和对比度安排用户先看什么、后看什么。
Visual Hierarchy 视觉层级是界面通过视觉权重组织信息优先级的设计原则。它使用字号、字重、颜色、对比、留白、位置、分组和动效来引导视线。它的边界是表达信息重要性,不是让某个元素单纯更抢眼。
StructureVisual Hierarchy = 重要性排序 + 视觉权重 + 扫读路径 + 行动优先级
When
当页面有多个标题、卡片、按钮、说明、价格、图表或状态,用户不知道看哪里时,就需要重新处理视觉层级。
How
先写出信息重要性排序,再为每一层分配视觉权重。主信息只保留少数高权重元素,辅助信息降低对比,行动入口和证据要出现在合适路径上。
Examples
定价页把方案名、价格、核心差异和购买按钮放在清楚层级里,用户能快速比较。
卡片列表中每张卡标题、摘要、标签和按钮权重一致,用户就能高效扫读,而不是被某个随机图标吸走注意力。
来源
类型:视觉设计 / 可用性原则
事实线:可用性和视觉设计实践都强调用户会先扫读页面,再选择是否深入阅读;视觉层级影响扫读路径和行动判断。
依据:Gestalt 组织原则、NN/g 关于扫读和视觉注意的可用性研究、设计系统排版和 spacing 实践。
边界:适合组织页面和组件优先级;不能替代清楚文案和真实信息架构。
常见误读:不要把视觉层级理解成“主按钮越大越好”。层级要服务任务和内容关系。