视觉层级与留白

界面不是把信息塞满就完事。视觉层级用大小、字重、颜色、间距、位置，告诉用户"先看哪"；留白用空白让界面透气。两者配合，界面才抓得住重点、不憋得慌。

为什么有的界面"信息爆炸"

打开一个界面，信息密密麻麻、所有字号和颜色全一样，一眼下去不知道"该先看什么"——这叫信息爆炸。根源有二：一、缺少视觉层级，所有内容争抢注意力，结果谁都没抢到；二、没有留白，内容塞满每个角落，没有空隙让眼睛歇脚。前面 05 排版层级、09 对齐与亲密性教了"怎么把单个信息排好"，这一课把它们整合起来：让用户先看重要的、再看次要的，并留出喘气的空间。

视觉层级：五手段引导"先看哪"

关键澄清："层级 = 放大字号"是核心误区。字号是最常用的手段，但层级绝不只是字号——一个灰色小字用"粗体加大"也压不过旁边一个鲜红的"微信支付"。专业界面常常不动字号、只改字重和颜色就能拉开层级：比如"删除"按钮不放大，只把颜色改成红色。层级是大小、字重、颜色、间距、位置五把手笔的合力。

视觉层级就是用一套视觉手段，引导用户眼睛"先看重要内容、后看次要内容"。手段有五件，依赖 05 排版层级、09 对齐与亲密性、03 色彩：

手段	怎么"先看"	依赖
大小	字号大的先被看到	05 字号阶梯
字重	加粗的那一档更重	05
颜色	深色 / 高饱和 = 重要，浅灰 = 次要	03 色彩
间距	周围空白多，这个元素越突出	08 / 09
位置	靠上、靠前的天然占注意力优先位	09

记住一句话：重要 = 大 / 粗 / 深 / 靠前。别只用其中一个，五样配合，层级才稳。

层级五手段：大小、字重、颜色、间距、位置；口诀"重要 = 大 / 粗 / 深 / 靠前"。

留白 White Space：让界面"呼吸"

关键澄清："把内容全填满是充分利用"是核心误区。新手常以为界面上空着就是浪费，于是把字号调大、把间距压小、把每个角落塞满。恰恰相反——留白是版式的一部分，不是没填满的缺陷。留白少的界面读起来堵；留白得当的界面信息一样多却清爽可读。留白不是"没内容"，而是用"没有"来凸显"有"。

留白指的是元素与元素之间的空白区域——边距、间距、行距、段落距，都是留白。它不承载文字，却让界面呼一口气，起三个作用：

作用	解释
分隔	用空隙把不同信息块切开
聚焦	让留白多的那个元素"跳出来"（呼应层级的位置手段）
呼吸	眼睛有地方歇脚，长时间看不累

留白三作用：分隔、聚焦、呼吸；留白是版式的一部分，不是没填满的缺陷。

微信案例：「发现」页与「我」页

页面	层级做法	效果
「发现」页	入口按语义分组，组间 24~32px、组内 8~16px；图标文字统一、刻意平铺	整页从上往下匀速扫读
「我」页	头像/昵称/微信号顶部大字深色（最高层）；下方入口统一浅色（次要层）	先见"我是谁"，再找"我能干嘛"

微信「发现」页列出一长串入口，它靠三招建立层级：分组 + 间距，用较大间距把入口切成几组（组间间隔明显大于组内间隔）；图标大小 + 颜色，每个入口统一大小、统一颜色、整体"平铺"，刻意压低单条入口的层级，让整页从上往下匀速扫读；位置，竖排时靠上的入口（朋友圈）天然更显眼。

「我」页则相反：头像、昵称、微信号在顶部靠上、字号大、深色，是视觉最高层；下面"服务、收藏、朋友圈、设置"等入口统一图标文字、颜色浅一些，是次要层——用户一进来先看到"我是谁"，再往下找"我能干嘛"。

分组靠间距：组间 24~32px、组内 8~16px（微信 iOS 以 8pt 体系推断的合理值）。

层级与留白是一套系统的两面

"层级"和"留白"不是两件事，而是同一套"引导视线"系统的两面：留白多本身就能制造层级——让某个元素周围空出来，它自然突出。它们有各自的主客观：手段（能不能引导）是客观的、可检验的——人眼对大小、深浅、位置的反应普遍稳定，大的一般先被看，这些是生理使然；取舍（引导谁）是主观的——同一张界面，微信觉得"支付"最重要，你可能觉得"聊天"最重要。所以先客观地把要突出的内容用五手段做足，再主观地决定哪件事值得突出。

留白也不是越多越好，三条经验：内容越复杂越需要留白（信息多时空隙是分组的骨架；信息少时留白过多会显得空）；关键元素周围留白要多（给按钮、标题"让出场地"）；间距用 08 的标尺——组内 --space-sm/md（8/16），组间 --space-lg/xl（24/32），边缘留 --space-md/lg（16/24）。留白不是随手空一点，而是按间距 Token 系统来。

留白间距标尺：组内 8/16，组间 24/32，边缘 16/24；手段客观、取舍主观。

深度

原理：为什么层级是"客观引导多数人视线"？ 人眼对"大小、颜色深浅、位置"的反应是普遍稳定、几乎人人成立的——这是生理使然。所以能用五手段"客观地"把不同内容分出主次。但"具体谁最重要"由业务决定，是主观的（微信觉得支付重要，你觉得聊天重要）。设计时先客观做足手段，再主观定取舍。

边界：留白不是越多越好。 内容越复杂，留白越重要（空隙是分组的骨架）；信息本来就少时，留白过多会显得空、显得没内容（比如空落落的登陆页）。

实例：体会"克制压层级"的力量。 如果把微信「发现」页入口的字号调成参差、颜色调成深浅不一，整页立刻变乱——可见此页的"整齐"恰恰来自克制地压低层级 + 靠间距分组 + 靠留白透气。数据说明：微信 iOS 实际细节随版本微调，这里以 8pt 体系推断合理值，用于学习"如何拆解"，而非精确工匠数据。

误区

误解	正解
层级 = 放大字号	层级有五手段（大小/字重/颜色/间距/位置）；只放大字号最偷懒、最容易过头
把内容全填满才不浪费	留白是版式的一部分；留白让界面透气、分组、聚焦
重点是主观的，没法改	手段（能否引导视线）客观可检验；只有"突出谁"是主观取舍
所有内容都要抢注意力	全都要抢 = 全都抢不到；层级要"有主有次"，次要就得退到暗处
留白越多越好	内容多时留白帮分组，内容少时空留白显得空；要按间距 Token 系统克制地用
层级和留白是两件事，互不相干	留白多本身就能制造层级；两者是同一套"引导视线"系统的两面

练习

即时题 一个新手把微信「发现」页的"朋友圈"入口字号调成 28、颜色调成红色，还把每个入口之间的间距全压到 4px。请分别指出他在"视觉层级"和"留白"上各犯了什么错？正确的做法应该是什么？

模块题 设计一张"个人名片"卡片，内含：姓名、职业、联系方式、一个"立即联系"按钮。用"视觉层级 + 留白"说明：你会让哪个元素成为最高层，用哪几种手段（大/粗/深/间距/位置）抬它？哪个元素是次要层、怎么压低？元素之间留白多少（用 8pt），卡片边缘留多少？为什么这样设计能"一眼抓住重点"？

迷你案例：给微信「我」页做层级与留白实验 在 Penpot 新建一个 375×812 画板：

1. 顶部放头像（60px）、昵称（粗体 17px）、微信号（浅灰 12px）——最高层 + 次要层（字号对齐 Type Scale：标题 17 加粗、辅助 12）。
2. 下方列 4 个入口（服务、收藏、朋友圈、设置），每个图标 24px + 文字 17px，统一中灰——刻意"平铺"，不抢戏（文字对齐正文 17）。
3. 头像/昵称区与入口区之间留 32px 明显间隔；每个入口上下留 16px；画板边缘留 16px 内边距——留白。
4. 对比实验：把昵称字号调小、颜色调浅，再把入口间距压到 4px——立刻看到"重点没了、页面憋闷了"。
5. 再对比：把"朋友圈"入口单独调大、调红——整页"乱"起来，说明此页的整齐来自"克制压层级 + 靠间距分组 + 靠留白透气"。

做完你会信服：视觉层级 + 留白，是界面"抓重点、透气"的收束之功。

答案 即时题：层级上——"朋友圈"不该被单独放大变红，这破坏了整页"匀速扫读"的平铺层级，制造了无意义的抢戏；正确的做法是让所有入口统一大小颜色，只靠分组间距区分。留白上——间距压到 4px 让整页憋闷、失去分组感；正确做法是组内留 8~16px、组间与页面边缘留 24px 以上。模块题：姓名/按钮作最高层，靠大/粗/深/周围多留白抬起来；职业、联系方式压低字号颜色；元素间 8~16px、按钮周围 16~24px、卡片边缘 16px——让视线先落重点、再顺次扫到次要信息。

素材

• 👉 打开交互演示：视觉层级与留白 — 同一张个人名片切换"有层级 / 平铺"与"呼吸感 / 挤满"：开关 A「层级」让姓名放大加粗变深、按钮高饱和、周围留白多，关闭则四样拉平、间距压死；开关 B「留白」打开时四块内容间留 24px、卡片边缘 16px 内边距，关闭时挤满、间距压到 4px。两个开关独立拨动，分别体会"层级"和"留白"各自的作用。
• 视觉层级原理：搜索 "visual hierarchy design principles"（大小、颜色、字重、位置如何引导视线）。
• 留白 / White Space：搜索 "white space in UI design"（留白作为版式的一部分，而非浪费）。
• Apple HIG：Layout 与 Visual Hierarchy 章节（官方，如何用大小、颜色、间距组织信息层级）。
• Material Design 3：Understanding layout 与 Emphasis 章节（官方，层级与强调的实践）。
• 后续衔接：本课把 05 排版层级、09 对齐与亲密性的手段整合成"层级"；后续 11 画板规范、13 Auto-Layout 把这些手段落到工程实现。

---