很多新手在做活动页或表单页时，都会遇到同一种尴尬。内容明明不多，标题一句，补充一句，几条卖点，再放一个按钮，按理说怎么排都不至于乱，可一落到画面里就像一把散沙，哪一块都在抢镜，哪一块也都站不稳。

于是你开始补救。先加一条分割线，让段落看起来更像段落；再给某段文字铺个底色，试图把重点抬出来；接着塞几个小图标，希望用符号把信息钉住。做着做着，页面变得更热闹，信息却更拥挤。你越是想把秩序补回来，噪声就越多，真正该被看见的那一句，反而被淹得更深。

问题往往不在你不够用心，而在这页没有把发言顺序排好。视觉层级的意义，不是把所有元素都做得更强，而是让它们有主有次，有先有后。留白在这里像舞台的走位，它不抢台词，只负责把位置让对。空间一旦摆顺，标题自然站到前排，按钮自然成了下一步，说明文字会往后退半步，仍然可见，却不打断主线。你不必拉着读者的手指路，页面自己就会把阅读路径铺得清清楚楚。

1  什么叫留白

1.1 留白不是纯白色

留白这件事，最常见的误会，是把它等同于白色。其实留白和颜色没有必然关系，它真正指向的是元素之间的空隙，是一整套空间关系在界面里的呈现。你看到的那一片空，可能来自页面的左右边距，来自模块与模块之间的间距，来自文字的行高与段距，来自卡片的内边距，来自栅格本身留出的缝隙。有时它甚至不是某个具体的距离，而是背景足够安静，让内容像被稳稳托住，轮廓和层次因此更清楚。

Apple 产品页首屏，大留白聚焦一个主信息

也正因为如此，留白并不只发生在白底页面。深色界面同样可以有留白，只要空间关系足够干净，元素之间的距离能把主次拉开，层级就会自然显现出来。换句话说，留白不是一种颜色，而是一种让信息站得住、看得清的空间安排。

1.2 微观与宏观留白

微观留白藏在细节里。字与字之间留多少距离，行与行是否有足够的呼吸，图标和文字隔得近不近，标题和副标题之间有没有一个明确的停顿，这些看似很小的空隙，会直接决定一段内容读起来顺不顺。微观留白做得好，眼睛几乎不用费力就能沿着信息往下走，哪里该停一下，哪里该继续，都很自然。

微观留白让页面更易扫读

宏观留白则发生在结构层面。模块与模块之间隔多少，区域与区域怎样拉开，页面节奏是紧一点还是松一点，这些更大的空间安排，决定的不是单句好不好读，而是整页清不清楚。宏观留白把信息分成块，把主次摆出队列，让用户第一眼就能看懂哪里是重点，哪里是一组，阅读应该从哪里开始。

Airbnb 网页模块与模块之间的距离在做分组。每个房源卡片都有自己的呼吸区，卡片之间的留白让用户可以快速扫读与对比，不会把一屏信息看成一整坨

1.3 留白与密度

留白不是越多越好，它真正对应的是信息密度。密度一旦升高，元素就会挤在一起，边界变得黏连，用户不得不花更多力气去分辨哪里是一组，哪里该先看。注意力也会被不断打断，像被切成许多小块，读完一眼还得回头确认。

Gmail 手机版密度的三个档位图，信息密度升高，信息变多，注意力会更碎。密度降低 信息更少，结构会更清楚

当密度降下来，信息之间有了空气，结构就更容易被看见。用户不用反复做判断题，视线能顺着主线往下走，理解也更省力。说到底，你在调留白时，其实是在调注意力的权重。把某个区域的密度收紧，它会自然退到次要位置；把某个区域的密度放松，它就更像一个停留点，读者会愿意在这里多看一眼。

2 留白为什么能改变层级

2.1 隔离

人的视觉系统对距离非常敏感。两样东西靠得近，我们几乎不需要思考，就会把它们当成同一组；拉开一点距离，又会立刻觉得它们属于不同的块。这种归类是本能的，所以用留白来分组，往往是最省解释、也最不费力的一种做法。

iOS Settings 分组几乎全靠间距，同一组条目彼此更近，不同组之间用更大的垂直间距断开，用户不用读就能看出分组

很多界面习惯用分割线来切内容，线当然有用，它能快速划出边界。但线用多了，也容易把页面切成一格一格的，阅读像在看表格，视线被线条牵着走，反而更累。相较之下，模块之间的间距更柔和，它不靠刀口去切，而是用空间去分。你只要把组与组之间的距离拉开一些，组内保持更紧凑一致，用户就会自然把信息打包成块，先看懂结构，再进入细节。视觉层级也会从这一刻开始变得稳。

2.2 强调

强调不一定靠更大、更亮，有时候只要更松，就已经足够。重点信息一旦被留白围住，它会像站在开阔处的人，不用提高嗓门，也更容易被看见。你可以把它理解成一种舞台感。主角之所以像主角，并不是因为他永远在发光，而是因为周围被清理得干净，道具不挤、杂音不缠，视线自然会落到他身上。

界面也是同样的道理。主按钮周围如果留出一圈清爽的空间，它就更像下一步的出口，用户会更笃定地去点。关键数字如果有足够呼吸，记忆点会更快立住，后面的解释与细节也更容易被接住。留白在这里像聚光灯，但它的方式不是把某个东西照得更亮，而是先把旁边的东西收一收，让重点在安静里自己站出来。

选择计划按钮被一圈开阔的留白托住，视觉上像清场后的舞台中央。读者会更容易把这块当作主叙事和下一步行动

2.3 降噪

真正让人疲劳的，往往不是信息本身有多少，而是它们被挤在一起时产生的摩擦。元素一旦贴得太近，边界就会变得含糊，每一次扫视都像在做一连串小判断，你得反复确认哪一行是标题，哪一句是补充，哪些内容属于同一组。看似只是多看了两眼，累积起来却很耗神，因为注意力不断被切换，阅读也很难顺着主线走下去。

留白的作用，是把这些判断变轻。它用空间把关系讲明白，让页面不必处处争抢注意力。该靠近的内容更靠近，形成清楚的小组；该分开的部分拉开距离，结构一眼可见。这样读者先看懂组织方式，再决定是否深入细节，理解路径会顺很多。

StoryXpress的dashboard面板卡片之间的空隙让模块边界天然成立

更重要的是，次要信息并不是被删掉，而是被安排到更合适的位置。它可以更紧凑、更内收，存在感更克制，像书页边上的注释，随时可查，却不会打断主线。主任务因此更突出，读者的注意力也更容易停在该停的地方，页面的主次关系会更清楚、更可靠。

3 留白在界面里具体调哪里

新手做设计，往往有一种无力感。明明知道哪里看起来挤，也隐约知道该加点空，可一动手就只会调内边距。改完要么还是乱，要么变得松散，像把东西摊开了，却没有把关系讲清楚。问题不在你没审美，而在你把留白当成一种感觉在调，而不是当成一组有层级的空间参数在调。

3.1 页面级

页面级的留白，先解决一件最朴素的事，让内容别贴着屏幕边缘生长。左右边距就像一条隐形的安全线，它决定这页给人的第一印象是从容还是局促。边距太小，信息像贴在玻璃上，视线没有落脚点，读者会本能地紧张。边距太大也不一定更好，内容列被挤得过窄，行长变短，眼睛需要更频繁地换行，阅读节奏容易被打断。更理想的状态，是让边距像画框一样把内容托住，既不抢镜，也不松散，视线能自然落在画面中心。

首屏与折叠线附近的空间同样关键，因为它决定这页有没有一个清晰的入口。首屏不该像货架一样把所有信息摆满，它更像开场白，要先把主标题、核心卖点和主行动的位置摆出来，并且给它们留出足够的呼吸区。这样用户第一眼就知道从哪里开始读，下一步该做什么，也更愿意继续往下滑。

GOV.UK 的首页首屏使用了大量的留白

另外，顶部标题区与内容区之间的距离，会直接影响页面的开场节奏。距离太紧，标题像被推着往下走，读者还没来得及进入状态就被迫开始读正文。距离太松，又会让人误以为中间丢了一段内容，或者觉得标题和正文不属于同一页。合适的间隔像一次自然的停顿，让读者在视线落下之前有一个缓冲，进入内容时更顺畅。

3.2 区域级

区域级的留白，负责把页面从一整张纸，变成几块有边界的内容区。区块与区块之间的距离，就是最直接的分隔符。距离一旦拉开，读者几乎不用读字，就能先看懂结构，知道这里是一段完整内容，那边是另一段，阅读顺序也会更自然。相反，如果区块之间的间距都差不多，页面会像一串连在一起的句子，哪里该停、哪里该换话题，很难一眼分清。

分区标题和内容之间的上下距离，也是在做角色分配。离得太近，标题会被正文吞进去，看起来像第一句正文。离得太远，标题又像被抛在外面，变成漂着的一行字，和下面内容断了关系。更合适的做法，是让标题像门牌一样贴近它要管理的内容，既清楚告诉你这一块讲什么，也把下面的文字和组件一起纳入同一个区域里。

至于浅底分区或卡片分区，很多人容易只做对一半。卡片本身确实能形成容器感，但真正让分区成立的，不只是卡片的边界，更是卡片外侧有没有走道。外侧没有空间，卡片就会挤成一片，区域感反而变弱，读者看见的不是一块一块的内容，而是一堵密密麻麻的墙。把卡片外侧的间距留出来，让卡片之间能喘口气，它们才更像一张张桌子，彼此独立，又能保持整齐的节奏。

3.3 模块级

卡片内边距决定质感。内边距过小，内容像硬塞进盒子里。内边距过大，信息漂浮，失去聚焦。好的内边距让内容有呼吸，但仍然紧凑。

列表项高度与行间距决定可扫读性。列表不是让人逐字读完的，它要允许用户扫一眼抓住主信息，再决定是否停下来。适当的行高让主信息稳住，合理的行间距让副信息退后，层级就会在同一条列表项里自然出现。

blinkist不同模块间存在大量的留白，将页面变成几块有边界的内容区

图文组合间距同样重要，图标与文字，标题与副标题，按钮与说明，这些距离决定了元素之间是协作还是抢戏。距离太近会混成一团，距离太远会断开关系。你需要在紧密与清晰之间找平衡，让同一组像一个整体，不同组像两个层级。

3.4 文本级

文本级的留白，决定的是阅读能不能一路走下去。很多页面看起来结构没问题，可一旦开始读，就会觉得累，觉得眼睛总在打滑，注意力抓不住。原因通常不复杂，就是文字周围的空间关系没有处理好。

字号和行高是一对最基础的搭档。行高太紧，字行像贴在一起，眼睛在换行时找不到清楚的落点，读几行就会觉得压迫。行高太松也会出问题，段落像被拉散，读者需要跨过更长的空档才能接上下一行，阅读节奏容易变慢。更合适的做法，是让行高服务于内容长度与阅读场景。信息密集、需要快速扫读时，行高可以克制些，但必须保证不串行。叙述性强、句子更长时，行高要更从容，让视线能顺着行与行自然滑下去。

段落之间没有距离，信息会粘连；段落距离过大，内容会断裂

段前段后则像结构的停顿。段落之间几乎没有间距，信息会黏成一条长带，读者很难判断哪里是一个意思的结束，哪里是另一个意思的开始。段距过大又会把内容拆得太碎，读起来像断断续续的卡片，主线被反复打断。你需要用段落间距来表达层级，同一层级的段落保持一致的节奏，关键段落可以留出更明确的停顿，补充说明则更紧凑一些，让读者知道哪些该停下来读，哪些可以顺手带过。

说明文与正文的距离关系尤其敏感，因为它直接影响主线是否顺畅。说明更像注释，它应该紧贴它所解释的对象，让人一眼知道它在解释什么，但它又不该和正文站在同一排位置，抢同一份注意力。更克制的做法是，在空间上让说明更内收、更紧凑，位置上保持贴近关联元素，同时在整体节奏上比正文更轻一些。这样说明始终可见，需要时随时可查，却不会把读者从主线里拽出来。

4 留白做层级的通用公式

4.1 间距先分组

同一组里的内容，应该靠得更近一些，而且距离要尽量一致。它们的关系越亲密，读者越容易把它们当成一个整体来理解。相反，不同组之间的距离要更大，要大到足以让人一眼感到这里换了一块内容，阅读节奏也该在这里停一下，再继续往下走。

这里真正起作用的，并不是你选了 8 还是 12 这样的数字，而是距离之间有没有形成清楚的差别。只要组内更紧凑，组间更宽裕，信息就会自动被打包成块。读者先看懂块与块的结构，再进入块内的细节，主次关系也会自然浮现出来。你不需要额外加很多线条或装饰，空间本身就能把分组和层级说清楚。

4.2 留白托重点

标题、关键数据、主按钮这些核心信息，想要被第一眼抓住，并不一定要更大、更亮、更用力。很多时候，更有效的做法是给它们留出更宽裕的空间，让它们有一个清晰的落点，成为页面的视觉锚点。

这里说的更孤独，并不是把它丢到很远的角落，变成离群的一块。恰恰相反，它应该仍然处在阅读路径的中心位置，只是周围更干净一些，少一点拥挤，少一点干扰。你把它附近的元素往后退半步，或者把这块区域的密度降下来，锚点就会自然显出来，用户几乎不需要思考就会先落到这里。

锚点一旦成立，后面的信息就更好展开。用户先在标题或关键数字处完成定位，确认自己在看什么、要做什么，再顺着页面往下读取卖点、细节、说明。主次关系不靠吵闹来争夺，而是靠空间把顺序排出来。这样整页的阅读路径会更清楚，理解也更省力。

4.3 分层靠留白

层级越高，留白差越要拉开，这是让结构被一眼看懂的关键。页面分区之间的距离，本质上是在告诉读者现在换到另一块内容了，你可以在这里停一下，再继续往下读。模块分组之间的间距也是同样的作用，它让一屏里不同任务、不同信息包有清楚的边界，不会黏成一团。

低层级的留白则要更克制，它负责把同一组内容收拢起来，让读者在一个小范围内快速建立主次关系。比如标题和正文之间要有停顿，但停顿不需要夸张到像换页。补充说明要贴近它所解释的对象，距离太远会断开关系，距离太近又会抢位置。更合适的做法，是用更小的间距把它们拢在一起，同时通过字号、行高或灰度把它轻轻往后放，让它随手可读，但不会打断主线。

一旦层级差不够，问题就会立刻出现。高层级没有明显的留白断点，读者看不出哪里是分区，哪里是分组，整页像被拉成一条长带。低层级又没有足够的内收，细节和主信息挤在同一排，视线只能反复做判断，重点反而更难浮出来。你需要做的，就是把大层级的距离拉开，把小层级的距离收紧，让空间关系自己把主次和结构说清楚。

4.4 档位管间距

别让每个模块都临时发明一套间距。你需要做的，是先把空间的选择收敛成两到三档，形成一套可复用的尺度。小档位用在组内细节，比如标题与说明、图标与文字、输入框与帮助文案，这些本来就该靠得更近的关系。中档位用在同一层级的模块之间，比如两张卡片、两段列表、同一屏里的并列区块，让它们彼此分开但仍保持连贯。大档位留给跨层级的分区切换，比如从首屏进入正文，从概览进入明细，从一个主题进入另一个主题，让读者一眼知道这里换了一段内容，节奏也该停一下再往下走。

当你把间距变成少量档位，并且在全站反复使用，界面的空间语言会更一致，层级关系也更容易被看懂。对新手来说，这一步尤其关键，因为它会直接改变你的工作方式。你不再靠感觉在 13 和 17 之间来回拉扯，而是在少量档位里做选择，判断这两块内容是同一组还是不同组，是同一层还是跨层。空间一旦有了规则，你的布局决策会更快，页面也更不容易出现这里空得离谱、那里挤得难受的情况。

5 典型场景拆解

在真实项目里，留白不是用来讲道理的，它更像一套随时要动手的工具。我们常常会在活动页、表单、列表、卡片流、数据看板里反复碰到同一种问题，信息并不复杂，却总是挤在一起，主次说不清，读者第一眼找不到入口。

5.1 列表页

列表页的目标很明确，让用户能快速扫到主信息，同时细节也读得清楚。最常见的失误，是用密集的分割线把列表切得很碎，或是把主信息和副信息挤在同一条高度线上，结果每一行看起来都同等重要，眼睛一上来就不知道该先抓哪一句。

调整其实可以从两个地方下手。第一是列表项的高度和分隔方式，尽量用上下间距来做分隔，让每一行都有稳定的呼吸感，页面会轻很多。第二是给主信息和辅助信息做出距离差，让主信息先站出来，副信息贴近但更内收，像补充说明一样跟在后面，不去抢主线。

这样改完后，你扫一眼会先抓到主标题，再顺手看到关键状态或数值，最后才决定要不要读细节。阅读路径会更顺，判断也更省力。

5.2 表单页

表单页真正要解决的，是让人愿意开始填，也能一路填下去。常见的问题不是字段太多，而是元素挤在一起。标签、输入框、提示文案、错误信息几乎贴成一团，分组边界又不清楚，用户填着填着就会失去位置感，需要反复确认自己现在属于哪一段、还剩哪一段没完成。

调整可以从两处入手。第一处是标签、输入框与错误提示的空间关系。标签与输入框保持稳定的相对距离，让每一行的结构一致，眼睛扫过去更容易建立节奏。错误提示也要有固定落点，出现时只在该出现的位置出现，不要把布局挤变形，更不要把用户的视线从主线里硬拽出去。第二处是分组标题与组内字段的间距对比，让组间间距明显大于组内字段间距。用户一眼就能看出这里换了一段任务，不必靠逐行阅读来找边界。

这样改完，表单会更像一条被整理过的引导路径。每填完一组，视线自然停一下，再进入下一组。错误提示也更容易被注意到，因为它不再淹没在拥挤的文字里，而是清清楚楚地站在它该站的位置上。

5.3 卡片流

卡片流看起来很简单，做起来却很容易翻车。明明都是一张张卡片，有的页面读起来轻松，信息像被摆放过一样有序；有的页面却像把素材贴上去就结束了，卡片挤、内容贴边、重点漂移，越看越乱。差别往往不在配色和圆角，而在留白的两层关系有没有处理清楚。

第一层是卡片与卡片之间的外间距，它决定整页的节奏。外间距太小，卡片会彼此黏住，读者需要费力分辨边界，卡片也失去独立单元的感觉。外间距太随意，某些地方密、某些地方松，视觉会断断续续，像路面忽宽忽窄。更合适的做法，是让同一层级的卡片保持一致的间距，再用更大的间距区分不同分区。读者先看见分区，再扫卡片，路径会顺很多。

第二层是卡片内部的内边距，它决定卡片看起来是否体面。内边距不足时，标题、图片、按钮像贴着边缘挤在一起，即使内容不多也显得局促。内边距够用时，内容会自然各就其位，标题能先被看到，辅助信息稍微退后，按钮周围有呼吸区，卡片内部的主次关系不需要靠颜色硬拉，也能读出来。

当外间距把节奏排好，内边距把内容安顿好，卡片就会同时满足两件事。它既像独立的单元，彼此不抢，也能在整页里形成一致的呼吸感。读者扫过去，会先抓到每张卡的标题和关键点，再决定是否点进细看，页面看起来也更整齐、更耐读。

5.4 数据看板

数据看板的第一任务，是让用户一眼抓到最关键的指标，然后再决定要不要往下深挖。常见的问题在于，数字虽然做得很大，但它周围挤满了单位、趋势箭头、解释文字、对比口径、次级指标。结果看起来信息很全，实际却很吵，视线一落上去就被四周拉扯，重点反而不集中。

调整可以从两点入手。第一是给关键数字留出更明确的呼吸区，让它周围更干净，位置更突出，成为这一屏的视觉锚点。第二是把次级指标收拢起来，紧凑地组织成一块，作为补充信息放在旁边或下方，既可扫到，也不会抢走主角的位置。

这样处理之后，阅读顺序会更自然。用户先落在最重要的那一个数上，完成定位与判断，再顺势去看趋势和解释，最后才扫一眼其它指标作补充。整张看板会显得更清爽，也更像一份被整理过的报告。

5.5 活动页

活动页要做的事很直接，让用户在很短的时间里看懂你在卖什么，然后做出下一步选择。常见的问题是首屏塞得太满，利益点、角标、装饰、规则提示同时上场，每一块都在抢位置，结果反而没有明确的入口。用户第一眼找不到主线，只能在画面里来回扫，理解变慢，决定也更迟疑。

调整可以抓两处。第一处是视觉锚点周围要留干净，把主标题、核心利益点和主按钮附近的空间放出来，让它们先站出来说话。与其继续叠元素，不如把靠得太近的东西往后退一点，降低首屏的拥挤感。第二处是把规则说明和行动区分开。规则必须可见，但不该占据主线位置，把它放到更次级的区域，或用更克制的节奏收住，让需要的人能快速找到，不需要的人不会被打断。

这样改完，页面的顺序会更清楚。用户先抓住核心信息，再自然落到按钮或表单上完成动作，规则留在一旁随时可查。氛围仍然可以热闹，但阅读路径不会被打散。

6 常见误区

6.1 只会拉边距

很多人一想到留白，第一反应就是把页面四周的边距拉大。这样做有时会变好看，但它并不等于层级更清楚。因为你只是把内容往中间挤了一下，结构并没有因此被说明白。

更常见的结果是，内容列变窄了，行长被压短，视线不得不更频繁地换行。阅读节奏被切碎，用户反而更难顺着主线往下走。页面看起来是空了，却不是清楚了。

留白真正该落在关系上，而不是只落在外圈。该拉开的，是分区与分区之间的距离，是模块之间的走道，是标题与正文的停顿，是主信息周围那圈呼吸区。把空用在这些地方，结构会自己站出来，读者也更容易找到阅读路径。

6.2 线条切碎页面

分割线当然有用，它能快速把内容切开，让边界变得明确。但问题在于，线一多，页面就像被刀口划成一格一格。你看见的是很多边界，却不一定看见结构。视线会被线条不断打断，扫读更像在逐格核对，读起来反而更费力。

空间的分隔更柔和，也更符合人的阅读习惯。把同一组内容收拢，让它们彼此更接近，再把不同组之间的距离拉开，分组会自然成立。用户先看懂块与块的关系，再进入块内细节，不需要靠一条条线去提醒哪里结束、哪里开始。

所以更理想的做法是，先用间距把结构排清楚，分割线只在必要处点到为止。线负责补一刀，空间负责讲明白。

6.3 松到没有重点

还有一种更隐蔽的问题，看起来很清爽，实际上更难读。你把组内的间距放大了，把组与组之间的距离也放大了，结果整页像被摊开，每一块都各自站得很开，却没有谁更重要，也没有哪一块更像同一组。用户第一眼找不到落点，只能在画面里游走，越看越不确定该从哪里开始。

留白要发挥作用，关键在对比，而不是一味变大。组内的内容应该更亲近，让人一眼把它们打包成一个整体。组与组之间则要更宽裕，让人明确感到这里换了一段。层级更高的分区距离要更大，层级更低的细节距离要更小。空间差异拉开之后，结构会自己出现，主次也会自然分出来。

6.4 全凭直觉调

很多页面的混乱，不是某一处做错了，而是每一处都在凭感觉。今天这一块你觉得该空一点，明天那一块你又觉得要紧一点，单独看似乎都说得通，放在一起却像各说各话。模块之间的节奏忽松忽紧，读者的视线也只能跟着忽停忽走，整体很难形成一致的阅读体验。

更可靠的做法，是先定一套统一的间距尺度，把选择收敛成少量档位，再在全站反复复用。这样你在排版时不需要每次重新发明距离，而是在判断这两块内容属于同一组还是不同组，属于同一层级还是跨层级。尺度一旦统一，空间语言就会一致，层级也更容易被读出来。

6.5 该省也要留

在小屏、信息密集、B 端这些场景里，你确实不可能大手大脚地留一大片空。但这不代表可以不要留白。真正该保住的，是空间里的层级差。

做法很简单，至少让组间比组内更松，让关键点周围更干净一点。哪怕你只用两档间距，也能把结构拉开，把阅读压力降下来。省着用，不是把空抹掉，而是把空用在该用的地方。

7 一套可执行方法

7.1 标出主次

动手之前，先把这一屏要说的话写成顺序。主目标是什么，也就是用户此刻最该完成的一步。主信息是什么，也就是用户必须先看懂的那一句或那一个数。辅信息是什么，也就是用来补充解释、降低犹豫、提供对照的内容。很多时候你写不出来，不是你不会写，而是内容本身还没理顺，你其实是在把信息堆上去，而不是在安排一条清楚的叙述线。

7.2 圈定分组

接着做分组。把必须一起出现的内容先圈成同一组，比如标题与它的解释、输入框与它的提示、关键数字与它的单位。再把会互相干扰的内容拆到不同区域，比如主行动和规则说明，比如主要卖点和次要补充。分组不是为了好看，它是在确认关系。关系明确之后，你才知道哪里该靠近，哪里必须拉开，留白才有落点。

7.3 只调间距

然后先做一次只靠空间的排版。只调边距、间距、行高、段距，不要急着加底色、阴影和分割线。你要检查的是，读者在不借助颜色提示的情况下，能不能一眼看出主次、分组和阅读顺序。如果这一步做不出来，直接上颜色只会让问题更显眼，因为你只是把混乱用更强的视觉信号放大了。

7.4 再加强化

等空间结构已经清楚，再去加视觉强化，而且只做辅助。线条用来轻轻提示边界，底色用来托住模块，阴影用来区分层级，但它们不应该替代分组和层级本身。做到这一步，你往往会发现很多装饰其实可有可无，因为留白已经把关系讲明白了，强化只是在轻轻点题。

8. 自检清单

你可以用下面这份自检清单，快速判断这一页的留白有没有真的在做层级。先别纠结 8 还是 12 这种具体数值，先看空间关系有没有讲明白。

1. 给自己三秒钟，看你能不能立刻指出这页的视觉锚点。它可以是标题、关键数字、主按钮，但必须有且只有一个最先被看见的落点。如果你需要多看两眼才确定重点在哪里，说明留白没有把顺序排出来。

2. 检查组内与组间的距离有没有差别。属于同一组的内容应该更亲近，而且距离要一致。不同组之间要明显更宽裕，让人一眼感到这里换了一块内容。组内和组间如果差不多，分组就很难成立。

3. 看主信息周围有没有一圈干净的呼吸区。不是把它孤零零放远，而是让它在阅读路径里更突出，附近少一点拥挤与干扰。只要这圈空间存在，主信息就更容易被第一眼抓住。

4. 看说明性文字是不是站在合适的位置。它应该贴近它所解释的对象，让关系一眼清楚，但整体存在感要更克制，别和主信息抢同一排位置，更别把阅读主线拽走。

5. 回到全页的间距选择，看看你是不是在到处随手调。尽量把间距控制在少量档位里，并且在同一层级反复复用。只要档位一致，页面的空间语言就会更统一。

6. 缩放一下屏幕，或模拟小屏与窄屏，看看层级是否还能读出来。压缩时你要知道先牺牲哪一类空间，比如次要装饰、次级留白可以先收紧，但分区断点、主锚点的呼吸区、关键分组的间距差这些不该轻易被挤没。只要这些还在，页面就不容易失去结构。

9. 小结

留白在界面里真正承担的，是结构与顺序的工作。它不是把页面做得更空，而是用空间关系把信息分成块，把主次排成队，让读者第一眼知道从哪里开始，第二眼该看什么，最后才进入细节。无论是页面级的边距与首屏呼吸区，还是区域级的分区断点与标题停顿，或是模块级的卡片走道与内边距，再到文本级的行高段距与说明文位置，它们都在回答同一个问题：哪些内容必须更亲近，哪些内容必须更分开。

当组内更紧凑、组间更宽裕，高层级更松、低层级更克制，空间就会自然形成层级。你不必依赖密集分割线，也不必把每一块都做得更大更亮来争夺注意力。相反，重点信息被留白托住时，会更像视觉锚点，次要信息也能以更收敛的方式存在，随时可读却不打断主线。到这里，留白不再是审美偏好，而是一套可执行的排版方法：先定层级，再分组，用间距把结构排清楚，最后再用其它视觉元素做辅助强化。