视觉层次（Visual Hierarchy）是版式设计中最核心的概念——通过大小、颜色、位置、留白等手段，让页面元素按重要程度有序排列，引导读者视线自然流动。掌握 F 型和 Z 型两种浏览模式，建立清晰的字号层级，善用留白和对比，你的设计立刻就能"高级起来"。
视觉层次（Visual Hierarchy）是指通过设计手段让页面中的元素按照重要程度有序排列，从而引导读者的视线优先关注最重要的信息。一个设计作品中，不是所有元素都同等重要——有些需要被立刻看到（如标题、行动按钮），有些只需要在需要时能找到（如辅助说明、版权信息）。
研究表明，人在浏览网页时平均只用3-5 秒决定是否继续阅读。在这短短几秒内，视觉层次决定了读者能否迅速抓住核心信息。没有视觉层次的设计，就像一篇没有段落、没有标题的文章——读者会感到困惑和疲劳。
| 原理 | 实现方式 | 效果 | 适用场景 |
|---|---|---|---|
| 大小对比 | 字号、图形尺寸的差异化 | 最大的最引人注目 | 标题层级、CTA 按钮 |
| 色彩对比 | 高饱和色 vs 低饱和色 | 鲜艳的颜色先被看到 | 强调关键信息、链接 |
| 空间距离 | 间距远近、分组排列 | 近的元素被视为一组 | 信息分组、导航栏 |
| 留白（负空间） | 元素周围的空间量 | 留白越多越突出 | 高端品牌、产品展示 |
把你的设计作品缩小到手机屏幕大小，眯起眼睛看 3 秒。你能立刻看出哪个是标题、哪个是按钮、哪个最重要吗？如果不能，说明视觉层次不够清晰，需要加强对比和分组。
人眼浏览页面是有固定模式的。了解这些模式，就能在正确的位置放置正确的内容，最大化信息传达效率。
适用于文字密集、信息量大的页面，如新闻网站、博客文章、搜索结果页。读者的视线轨迹：
设计建议：把最重要的信息放在页面顶部和左侧。段落首句要足够吸引人，因为读者往往只读每段的前几个字。
适用于图文混合、信息密度较低的页面，如着陆页（Landing Page）、海报、宣传册。视线轨迹：
设计建议：在四个"拐点"（左上、右上、左下、右下）放置关键元素。左上放品牌 Logo，右上放导航，中央放主视觉，右下放行动按钮。
| 对比维度 | F 型模式 | Z 型模式 |
|---|---|---|
| 适用页面 | 博客、新闻、文档 | 着陆页、海报、宣传册 |
| 信息密度 | 高（大量文字） | 低（图文结合） |
| 焦点区域 | 顶部和左侧 | 四个拐点和中央 |
| 用户行为 | 阅读型（仔细读文字） | 扫描型（快速浏览） |
| CTA 位置 | 段落之间穿插 | 右下角最终位置 |
不要随意设置字号——建立一个有规律的层级系统：
| 层级 | 字号 | 用途 | 权重 |
|---|---|---|---|
| H1 主标题 | 36-48px | 页面主标题 | 700-800 |
| H2 章节标题 | 24-28px | 段落/章节标题 | 600-700 |
| H3 子标题 | 18-20px | 子章节标题 | 600 |
| 正文 | 16px | 主要阅读内容 | 400 |
| 注释 | 12-14px | 辅助信息、注释 | 400 |
留白不是浪费空间，而是最强的视觉引导工具。一个元素周围的空白越多，它就越引人注目。奢侈品牌（如苹果、LV）的页面往往有 60% 以上的留白——这就是高级感的来源。
在浅色背景上，暖色（橙色、红色）比冷色（蓝色、绿色）更吸引注意力。行动按钮（CTA）使用与页面主色调对比的颜色，点击率可提高 20%-30%。
选择一个对齐方式（左对齐最常用）并坚持到底。混用对齐方式是排版混乱的主要原因。文字内容推荐左对齐（中文阅读习惯），标题和少量装饰元素可以居中。
相同类型的元素使用相同的样式（字号、颜色、间距），让读者建立心理预期。一致性是专业感的基础。
字体不超过 3 种（标题字体 + 正文字体 + 装饰字体），颜色不超过 5 种（主色 + 辅助色 + 强调色 + 中性色），图标风格统一（线框或填充，选一种）。少即是多。
完成设计后问自己：
1. 3 秒内能看出最重要的信息是什么吗？
2. 标题和正文的字号差距够明显吗？（建议 2 倍以上）
3. 元素之间的间距统一吗？
4. 所有文字都左对齐了吗？
5. 页面用了多少种颜色？（超过 5 种就做减法）
6. 有没有给重要元素留出足够的呼吸空间？
当所有内容都被放大到"很重要"的程度，就没有什么是重要的了。修正方法：选出一个核心元素（通常是标题），把它做大做重，其他元素相应缩小。
各元素之间的距离随机变化——段落间距、标题间距、图片边距各不相同。修正方法：建立间距规范，如使用 8px 的倍数（8px、16px、24px、32px），让整个页面有统一的节奏感。
把所有可用空间都填满，认为"空着就是浪费"。修正方法：先做减法——去掉不必要的元素，给剩下的内容留出空间。记住：留白本身就是一种设计。
文字颜色太浅（如灰色文字放在白色背景上）、行间距太小（小于 1.4 倍）、段落太长（超过 70 个汉字不换行）。修正方法：正文字号不小于 16px，行高不小于 1.6，段落不超过 5-6 行，文字颜色与背景的对比度至少 4.5:1。
读者不知道从哪里开始看、接下来看什么。修正方法：明确设计一个"起点 → 路径 → 终点"的视线流动。起点通常是标题或主图，终点应该是行动按钮或联系方式。