审美的逻辑 · ISSUE 006 · 2026-05-19

视觉层级:让眼睛先看该看的东西

层级不是把标题放大那么简单,而是安排观看顺序。好设计会让眼睛知道先看哪里、再看哪里,以及哪里可以暂时不看。

视觉层级信息设计5-8 分钟
先看这里尺寸、重量、对比和位置共同制造第一注意力。

层级的本质,是把注意力排队。

01 · Core idea

视觉层级是设计里最朴素、也最残酷的问题:观众第一眼看什么?第二眼看什么?看完之后是否知道该做什么?

一个版面可能字体很好、颜色不错、图片也精致,但如果所有元素都在抢第一眼,它仍然会显得吵。反过来,一个简单页面只要层级准确,就会让人觉得清楚、专业、可信。

AI 生成的版面常见问题正是层级失控:标题、按钮、装饰、图片都很“有表现力”,但没有谁愿意退后。设计师的判断力,在这里体现为一种克制:不是让每个元素都好看,而是让每个元素知道自己的位置。

视觉层级图解展示尺寸、重量、对比、位置和留白如何制造观看顺序。VISUAL HIERARCHY / 视觉层级层级不是单一变量,而是尺寸、重量、对比、位置与留白的合谋。01大尺寸建立入口强对比制造焦点留白让重点有呼吸
图解:视觉层级不是“谁最大谁赢”,而是多个变量一起安排观看顺序。
02 · Context

层级来自印刷,也来自日常观看

报纸、杂志、海报和书籍很早就发展出层级语言:头版标题、导语、正文、图注、栏目名、页码,每一种信息都有自己的音量。读者不需要被说明,也知道哪里是新闻标题,哪里是补充信息。

现代信息设计把这套能力放大到导视、界面和数据图表里。机场指示牌、地铁线路图、手机设置页,都在处理同一个问题:在有限时间里,让人先得到最重要的信息。

所以层级并不是为了漂亮,而是为了尊重注意力。观众的注意力是有限资源,设计师必须替他们排序。

层级清楚的版面,不是在命令观众,而是在替观众节省判断成本。
03 · Judgement

判断层级好坏,看五个变量

不要只问标题够不够大。真正有效的层级通常由多个变量同时建立。

01 尺寸

尺寸决定入口,但不能滥用。所有东西都大,就没有大的意义。

02 字重

字重比颜色更稳定。Medium、Bold、Regular 的关系要有明确功能。

03 对比

明暗、冷暖、虚实、粗细都能制造焦点。对比越强,越需要节制。

04 位置

视线会受阅读方向、中心和边缘影响。重要信息不应被放在视觉死角。

05 留白

留白不是空,而是让重点显出来的空间。拥挤会抹平层级。

04 · Cases

三个案例:层级如何让信息变清楚

Headline

报纸头版

标题、导语、正文、图注各有音量。传统报纸看似密集,却依靠层级让读者快速扫描。

界面行动按钮

主按钮必须比次级按钮更明确。若所有按钮都同样醒目,用户反而不知道下一步。

数据图表

图表不是把数据摆出来,而是让关键差异先被看见。颜色和尺寸必须服务比较。

05 · Mistakes

常见误区

标题越大越有设计感

大标题只能制造入口,不能自动制造秩序。如果正文、图像和按钮没有跟上,版面会失衡。

用颜色替代层级

颜色可以强调,但不能承担全部结构。真正稳定的层级,黑白状态下也应该大致成立。

每个模块都想突出

设计里最难的不是强调,而是让一部分内容安静。没有退后,就没有前进。

忽略移动端阅读顺序

桌面双栏在手机上会变成单列。移动端层级要重新检查,不是自动缩小就结束。

06 · Practice

今天的观察练习

找一个你常用的 App 页面或一张海报,花 15 分钟做一次层级诊断。

01

用 1、2、3 标出你第一眼、第二眼、第三眼看到的内容。

02

把页面想象成黑白,判断这个观看顺序是否仍然成立。

03

选一个抢戏的元素,把它缩小、变轻或增加留白,观察整体是否更清楚。

如果一个页面只能让别人记住一件事,你希望那件事是什么?