当我们访问一个陌生页面时，视线通常不会从左上角开始逐字往下阅读。视线会先被页面上某个元素吸引，落在那个位置，然后再移向别处。最先吸引视线的元素，几乎总是页面中最大的那个。

这是视觉系统的基本工作机制。面积大的物体会被优先捕捉，这个反应发生在意识介入之前，不受阅读习惯和文化背景的影响。大的元素先被注意到，小的元素后被注意到，再小的元素可能永远不会被注意到。

设计师可以利用这个机制来控制用户的阅读顺序。通过调整元素之间的大小差距，替用户完成一次信息排序。什么最重要、什么次要、什么可以忽略，用户扫一眼就能感知到，不需要逐条阅读之后自己去判断。这就是版式设计中大小对比的核心作用。

1. 大小如何控制用户的视线落点

用户在面对一个新页面时，不会逐行阅读。视线会先快速扫过整个页面，在几百毫秒之内建立起一个粗略的"地图"，大致感知哪里有大块的内容，哪里有空白，哪里有颜色突出的区域。在这个扫描过程中，面积最大的元素会成为视线的第一个落点。视线在这个落点上停留之后，再根据页面的布局向其他区域跳转。

这意味着页面上最大的元素不只是"最先被看到"，它同时也是用户理解整个页面的起点。用户从这个起点出发，建立对页面内容的初步预期。如果最大的元素是一个标题，用户会预期接下来是对这个标题的展开说明。如果最大的元素是一个数字，用户会把这个数字当作页面的核心信息。大小对比在这里做的事情，不只是"让某个东西更醒目"，而是在定义用户进入页面的入口。

当页面上所有元素的大小接近时，这个入口就消失了。用户的视线在页面上漫无目的地游荡，找不到第一个该落下的位置。这种状态对用户来说，不是"平等地看到了所有信息"，而是"不知道该先看哪个"。认知心理学把这种状态叫做 选择瘫痪（Choice paralysis）。当选项之间没有明显差异时，人不会更自由地选择，反而会犹豫不决，甚至放弃选择。

选择瘫痪一旦发生在界面设计里，用户就不得不花额外的精力去判断信息的优先级。这个判断过程本身就是认知负担。如果一个页面需要用户自己分辨哪个信息重要、哪个可以跳过，这个页面的版式就没有完成它的工作。版式设计的核心职责之一，就是替用户做好这个判断，而大小对比是完成这个职责最直接的手段。

在现实设计中，并不是做了大小对比，层级就一定清楚。设计师经常遇到的情况是：对比已经做了，但页面看起来还是分不清主次。原因往往不是缺少对比，而是对比做在了错误的元素上。

举一个例子。一个内容卡片里有标题、描述文字、标签和操作按钮。设计师把标签做得很大，因为标签的视觉效果好，适合做装饰性的处理。但标签在信息层级里属于辅助信息，用户真正需要先看到的是标题。标签抢走了视线的第一落点，用户进入卡片时先看到了分类标签，再去找标题，阅读路径就完全被打乱了。

所以大小对比有一个核心原则：最大的元素必须是最重要的信息。在实际排版中，这个原则非常容易被打破。设计师在调整版面时，常常因为视觉平衡、装饰需要或者个人偏好，不自觉地把某个次要元素做大了。检查的方法是问自己一个问题：如果用户只有两秒钟看这个页面，他第一眼看到的是什么？如果那个东西不是页面上最重要的信息，大小关系就需要重新调整。

2. 放大什么，用户就做什么

上面讲的是大小对比怎么帮用户"看"到信息。但大小对比的作用往往不止于此，它同时也在引导用户的行为。当设计师放大某个元素时，不只是在说"这个重要"，也在说"先处理这个"。用户的视线落在最大的元素上之后，注意力自然集中在那里，接下来的操作也会围绕那个元素展开。

定价页面是一个很典型的场景。定价页的核心目标是让用户快速比较不同方案的价格，然后做出选择。如果设计师把价格数字放大，比如 ¥99 和 ¥299 用明显大于周围文字的字号呈现，用户的视线会第一时间落在价格上，直接进入比价环节，不需要先读完每个方案的功能列表再去找价格在哪里。放大价格数字，实际上是在缩短用户从"浏览"到"决策"之间的路径。

反过来，如果功能列表的文字和价格数字大小接近，用户就需要先扫描整个卡片，在一堆文字中寻找价格信息，比价效率大幅降低。更糟糕的情况是，价格数字因为和周围文字没有大小差异，视线没有理由在那个位置停下来，用户根本没注意到价格被埋在了哪里。

数据看板也是同样的逻辑。看板通常包含很多指标，但运营人员打开看板时，首先需要知道的是核心指标的状态，比如今日营收、转化率或者活跃用户数。设计师把核心指标的数字放大，放在看板最显眼的位置，运营人员一眼就能抓到关键数据，不需要在一堆大小相近的数字里逐一辨认。

但这里有一个容易出错的细节。放大的应该是指标的数值，不是指标的名称。用户关心的是"今天营收是多少"，不是"这个指标叫什么名字"。如果把"今日营收"四个字做大、把实际数字做小，信息层级就和用户的需求错位了。用户的视线先落在名称上，然后还要去找对应的数值，多了一步不必要的认知操作。

按钮的场景更常见。一个对话框里有"确认"和"取消"两个按钮，设计师把"确认"做大、"取消"做小，用户在面对两个选项时视线会先落在"确认"上，按错的概率降低。这不是在操控用户的选择，而是在用大小关系告诉用户，大多数情况下，你想点的是这个。如果两个按钮大小完全相同，用户每次都需要停下来辨认哪个是"确认"、哪个是"取消"。这个辨认过程只需要零点几秒，但在高频操作中，比如批量审批、逐条处理消息，每一次零点几秒的犹豫都会积累成明显的效率损耗。

以上三个场景背后的逻辑是一致的。设计师在决定放大什么的时候，实际上在回答一个问题：这个页面最希望用户做什么？放大价格，是在引导用户比价。放大核心指标，是在引导用户快速获取关键数据。放大主操作按钮，是在引导用户完成预期操作。大小对比不是装饰手法，而是一种目标导向的设计决策。

每次调整元素大小之前，设计师都可以先问自己这个问题。如果答不上来，说明还没想清楚这个页面的目标，调大小只是在做表面的视觉调整，不会真正改善用户的体验。

3. 对比的分寸

知道了大小对比能控制视线、引导行为之后，紧接着的问题是：大小之间的差距应该有多大？

很多设计师的第一反应是"差距越大越好"。对比确实需要足够大才能被用户感知到，但超过某个临界点之后，继续拉大差距不会增强层级感，反而会制造新的问题。

先说差距不够大的情况。人的视觉系统在判断两个元素是否属于不同层级时，有一个感知阈值。如果两个文字元素的大小差距低于这个阈值，用户不会把它们理解为两个层级，而是当成同一层级的内容。这种情况在界面设计中非常常见。设计师设了 16px 的正文和 18px 的小标题，自己在设计稿里能看到差距，但用户在实际使用时根本感知不到这两行文字有大小区别。

感知阈值不是一个固定的数字，它和观看距离、屏幕分辨率、周围元素的干扰程度都有关系。但有一个粗略的参考：两个相邻层级之间的大小比例，至少要达到 1.2 到 1.5 倍，用户才能在快速扫视时明确感知到"这两个不一样大"。低于 1.2 倍的差距，在静态设计稿里看得出来，但在用户实际浏览的速度和注意力状态下，很容易被忽略。

差距过大同样会出问题。当页面上最大的元素和最小的元素之间差距悬殊，比如标题 48px、正文 12px，整个页面的视觉节奏会断裂。用户的视线在大元素和小元素之间切换时，需要做一次大幅的焦距调整，这个调整本身就是阅读障碍。类似于在读一本书时，突然插入了一页完全不同字号的内容，读者需要重新适应才能继续。

差距过大还会导致一个更隐蔽的问题：次要信息被彻底忽视。如果标题太大、正文太小，用户的注意力会被标题牢牢锁住。视线跳到正文时，因为大小差距太悬殊，大脑会把正文当成不重要的注释直接跳过。设计师本来想让标题和正文构成"主→从"的阅读关系，但过大的差距把"从"变成了"忽略"，正文里的内容再好也没有被读到。

4. 控制大小档位

大小差距既不能太小也不能太大，那一个页面里到底应该有多少种大小？答案是控制在 3 到 4 个档位。

3 个档位的典型分配是：大（标题和核心信息）、中（正文和主要内容）、小（辅助信息和标注）。4 个档位在这个基础上增加一级副标题或小标题。超过 4 个档位之后，相邻档位之间的差距会被压缩到感知阈值以下，用户无法清楚区分每个档位的优先级，多出来的层级等于白费。

设计师在实际操作中容易犯的一个错误，是为不同的内容分别设定一个"刚好合适"的大小，最后发现页面上有六七种甚至更多的大小档位。每个单独看都合理，放在一起就乱了。遇到这种情况，需要做的不是继续微调每个元素的大小，而是退一步想清楚这个页面真正需要区分几个层级，然后把所有元素归入这几个档位，不在档位之外再增加中间值。

5. 大小不必独扛所有层级

把档位控制在 3 到 4 个之后，可能会遇到一个新问题：有些信息层级确实不同，但归入同一个大小档位后区分不开了。这时候不应该再增加档位，而应该让字重、颜色和间距来分担层级压力。

一个标题和一段正文，如果只靠字号区分，标题至少需要比正文大 1.5 倍以上才能让层级足够清晰。但如果在字号差距的基础上，再给标题加上粗体、用更深的颜色、并且在标题下方留出更大的间距，那么即使字号差距只有 1.2 倍，层级也能很清楚地成立。多个维度同时发力，每个维度都不需要做到极端，叠加起来层级信号就足够强了。

多维度协同也能帮助诊断问题。当设计师发现自己在反复拉大某个元素的字号，但层级仍然不够清晰时，问题往往不在字号不够大，而在于其他维度没有配合。这时候应该停下来检查：这个元素的字重是不是和周围的文字一样？颜色对比度是不是不够？和周围元素之间有没有足够的间距？先把这些维度调整到位，再回头看大小是否还需要继续放大。

6. 怎么判断大小关系调对了

理解了大小对比的原理、分寸和多维度配合之后，设计师在实际操作中还需要一个验证环节。版面调完之后，自己盯着设计稿很难客观判断层级是否成立，因为设计师已经知道每个元素是什么、在哪里，视线会自动按预期路径走。以下四个问题可以帮助设计师跳出这个盲区，站在用户的角度重新审视版面。

页面中最大的元素，是不是最重要的信息？ 把注意力从设计稿上挪开，假装自己是第一次看到这个页面的用户。第一眼看到的是什么？那个东西是不是页面的核心信息？如果第一眼看到的是一个装饰性的标签、一个辅助说明或者一张背景图，大小关系就和信息优先级错位了。

相邻层级之间的大小差异，用户能一眼分辨吗？ 把设计稿缩小到手机屏幕的实际大小（不是在电脑上看 2 倍稿），在正常的阅读距离下快速扫一眼。如果需要仔细看才能分辨两行文字谁大谁小，说明差距低于感知阈值，需要拉大，或者用字重、颜色来辅助区分。

大小档位超过四级了吗？ 数一下页面上到底有几种不同的大小。如果超过四种，检查是否有可以合并的档位。两个大小接近的元素如果属于同一个信息层级，应该统一成同一个尺寸，不要给每个元素单独设一个"最合适"的大小。

有没有次要信息抢了不该有的视觉权重？ 检查页面上面积第二大、第三大的元素，它们在信息层级里的位置和视觉权重是否匹配。如果一个辅助性的标签在视觉上比正文内容还突出，即使它没有变成最大的元素，也在干扰用户的阅读路径。