视觉层级（Visual Hierarchy）决定用户"先看什么、后看什么"；留白（Whitespace / Negative Space）决定"哪里重要、哪里呼吸"。二者共同把版面从"信息堆"变成"可扫描的路径"。

什么是视觉层级

定义：通过尺寸、颜色、对比、位置、留白等手段，为元素排定重要度顺序，引导视线按设计意图流动。

常用层级工具（由强到弱）：尺寸差异 → 颜色/明度对比 → 字重 → 位置（左上优先）→ 留白隔离 → 装饰（边框、阴影）。

F 型与 Z 型阅读模式

模式	适用场景	视线路径	设计启示
F 型	文字密集型页面（博客、搜索结果、文档）	顶部横向扫读 → 中间较短横向 → 左侧纵向扫描	标题、关键词、段首放关键信息；NN/g 眼动研究佐证
Z 型	文本少、视觉多的页面（着陆页、首页、海报）	左上 → 右上 → 斜向下 → 左下 → 右下	logo 放左上，CTA 放路径终点（右下）

注意：F/Z 是对"扫描习惯"的归纳，不是铁律；移动端单列布局与无障碍场景下应灵活调整。

格式塔原则（感知分组）

格式塔心理学解释了人脑如何把零散元素知觉为整体，是视觉层级与留白背后的感知机制：

原则	含义	设计应用
接近性 Proximity	靠得近的元素被知觉为一组	用间距表达信息分组（同 CRAP 亲密性）
相似性 Similarity	长得像的元素被知觉为同类	同色/同字体 = 同功能
闭合 Closure	大脑自动补全不完整的形状	图标、徽标可以留缺口
图底 Figure-Ground	前景与背景分离	用留白/阴影制造层次
连续性 Continuity	视线沿平滑路径延伸	列表、时间线、引导线

留白（负空间）不是浪费

• 定义：元素之间、元素与边框之间的空白区域，也称负空间（Negative Space）。
• 作用：隔离关键元素、提升其感知重要性；分组相关元素、降低认知负荷；给版面"呼吸感"。
• 操作要点：围绕主视觉/CTA 留出明显空白；宁可删减内容，不要填满；用统一间距系统（如 4/8px 基数）保证一致性。
• 误区：把留白当成"没做完"而强行填满；用装饰元素替代留白的功能。

视觉层级检查清单

• 3 秒扫描测试：截稿前问"第一眼看到的，是不是最重要的元素"。
• 主次比例：标题/正文/注释三档字号是否清晰可辨。
• 颜色克制：强调色是否只用于 1-2 处关键交互。
• 留白检查：关键元素周围是否有"专属空白"。
• 网格对齐：所有元素是否落在同一套对齐线上。

常见误区

• 层级扁平：所有元素字号相近，用户找不到入口。
• 滥用颜色：全都高亮等于没有焦点（见 CRAP 对比原则）。
• 不敢留白：页面拥挤，阅读负担大。
• 忽略网格：元素随机摆放，即使有层级也显得乱。

一句话总结

层级按尺寸→明度对比→字重→位置逐级加强，留白不是浪费而是隔离关键元素、分组相关元素的工具；交稿前用"3 秒扫描测试"验证第一眼看到的是不是最重要的元素。

关联概念

• 分组与对齐基础：设计原则-对比对齐重复亲密性（亲密性、对齐与网格）
• 强调色与对比：色彩理论-基础与色轮
• 生成视觉稿时如何描述层级：提示词工程-基础与框架