Chapter 01
视觉层级与设计原则
起点页立了一个判断:专业感来自规则,不是天赋。这章给出那套规则的总纲——设计的唯一目的是引导视线,而引导靠五个可操作的杠杆:对比、接近、对齐、重复、留白。
本章你将建立的 schema
- 视觉层级是设计的目的:让重要的先被看到、让相关的被看成一组
- preattentive(前注意)处理与视觉权重:为什么"大小 / 明度对比 / 位置"能不经扫描就抓住注意
- 五个杠杆:对比拉开主次、接近表达分组、对齐建立秩序、重复制造一致、留白给一切呼吸
- 一个可迁移的诊断习惯:看到界面"乱",依次排查是哪一条断了
"这个界面看着不太对,但说不出哪里不对。"——这是工程师面对自己作品最常见的感受。本章的目标是把这种模糊的不适,拆成五条可以逐个排查的具体问题。一旦能逐条排查,"看着不对"就从玄学变成了 bug 列表。
1.1视觉层级:设计的唯一目的
视觉层级 = 界面元素"被注意到的先后顺序";专业的界面让最重要的元素第一个被看到。
用户打开界面的第一件事,是搜索“目标在哪”。层级清晰,这次搜索几乎瞬间完成;层级扁平——每个元素同等显眼——等于每个元素都不显眼,用户被迫逐个扫描。一个所有元素都在喊的界面,和一个所有元素都沉默的界面,对用户是一样的。
底层机制(比文档深一层):视觉系统分两个阶段处理画面。第一阶段是 preattentive(前注意)处理——在约 200 毫秒内,并行、无需聚焦地处理少数几种属性:大小、明度对比、颜色、朝向、位置。第二阶段才是逐个聚焦的 attentive 扫描。层级的全部技巧,是把"重要"编码进那几种前注意属性里,让重点在第一阶段就弹出(pop-out),用户根本不必进入费力的逐个扫描。一个元素吸引注意的强度叫视觉权重(visual weight),它不是单一属性,而是 大小 × 明度对比 × 颜色饱和 × 周围留白 的合成。这解释了一件事:抬高一个元素的重要性,有四个独立旋钮可拧,不止"放大"一个。
视觉层级像报纸头版:大标题、导语、正文用字号差异编码了“阅读的先后”。失效之处——报纸是静态的;界面里 hover、focus、选中态也是层级的一部分,会动态改变权重,这是平面设计没有的维度。
实例:一张用户卡片的"改之前 / 改之后"
信息一字未改,改的只是权重分配:姓名 15→18px 加粗(抬高 size + weight);邮箱压成 13px 浅灰(主动降低);主操作"关注"做成实心强调色、次操作"消息"做成描边灰(用颜色权重区分主次)。三步都没增加任何元素。
如果把卡片里每个字都加粗,层级会更清晰吗?
先想 10 秒再展开
不会。层级是相对的:全部加粗 = 没有对比 = 权重再次被拉平。加粗只在"少数元素加粗、其余保持常规"时才制造层级。这是新手最常见的误解——以为"强调 = 到处加强",其实强调 = 制造差异。同理,把所有卡片都加阴影、所有按钮都用品牌色,都是在用力却消灭层级。
与下一节的关系:视觉权重的差异从哪来?最直接、最便宜的来源是对比。
1.2对比:层级的引擎
对比 = 两个元素在某视觉属性(大小 / 明度 / 字重 / 颜色)上的差异量;差异越大,主次越分明。
对比是制造层级最直接的杠杆——不加元素、不加颜色,只把已有元素之间的差异拉开。上一节说视觉权重靠对比制造,这一节解决一个更具体的问题:对比要拉多大才有效。
底层机制(比文档深一层):视网膜神经节细胞存在侧抑制(lateral inhibition)——被激活的细胞会抑制相邻细胞,从而主动放大相邻区域的差异。人眼天生是个"差异探测器",对绝对亮度不敏感,对差值极敏感。由此得到一个反直觉的结论:重要的不是元素本身多大、多深,而是它和邻居差多少。16px 旁边的 14px 几乎无层级;16px 旁边的 32px 才有。新手最普遍的失败是对比太胆怯(timid contrast):字号差 2px、灰度差一档——在 Figma 里盯着放大看得出差别,真实使用场景里读者完全感知不到。要么拉开到一眼可辨,要么干脆不做这层区分。
对比像音量:一个声音是否突出,不取决于它的绝对分贝,而取决于它和背景噪音的差。失效之处——视觉对比有多个维度(大小 / 明度 / 颜色)可叠加,而音量只有一维。
同一原则,三种发力点(换三种情境看):把对比拉大,可以发生在不同属性上——① 字号对比(标题 32 vs 正文 16);② 字重对比(标题 700 vs 正文 400);③ 明度对比(标题 #111 vs 正文 #6b7280 vs 元数据 #9ca3af)。专业界面常把三者叠加,而不是靠单一维度硬拉到极端。03 章会把"明度对比建立三层文字"做成可复用的规则。
一个卡片里两个相邻按钮都用品牌色实心,用户会先点哪个?
先想 10 秒再展开
无法判断——同等对比 = 同等权重 = 选择困难。任何一组操作里,主操作和次操作之间必须有对比差:一实一虚、或一彩一灰。把所有按钮都做成"显眼",等于没有主按钮。这条规则在 06 章会上升为组件库里"primary / secondary / ghost"三级按钮的来由。
与下一节的关系:对比解决"谁重要";而"谁和谁是一组",由空间关系决定。
1.3接近性与分组:距离就是信号
接近性 = 空间上靠近的元素,会被视觉系统自动看成一组;距离本身就是分组信号。
界面里的信息总要分组:标签和它的输入框、标题和它的正文、一组相关操作。分组表达对了,用户不必思考就知道什么属于什么;表达错了,就出现"这个 label 到底是上面还是下面那个框的"这类卡顿。
底层机制(比文档深一层):这是格式塔(Gestalt)知觉律中的接近律(law of proximity)。视觉系统在进入逐个聚焦的扫描之前,就已经根据空间距离推断出"哪些是一组"——这个推断比读边框、读分隔线更快、更底层。由此得到一个极实用的推论:一条分隔线、一个边框,是"更贵"的分组信号(它多引入一层视觉元素,占用对比预算),而调整间距是"免费"的——把相关元素的间距收紧、把无关元素的间距拉开,往往不画任何线就完成了分组。新手爱用边框切分一切,结果满屏框线在抢夺注意力,真正重要的内容反而沉了下去。
接近性像超市货架:同类商品挨着摆,不需要标签你也知道它们是一类。失效之处——接近律在元素过密时会"误粘"不相关项,所以组内紧凑的同时,组间必须留出明显更大的间隙,靠的是间距的差值而非绝对值。
实例:表单字段的归属歧义
左边 label 与输入框等间距(都是 12px),眼睛分不清 label 属于上面还是下面的框。右边只改了两个数:label 距它的输入框 4px(组内紧)、字段组之间 20px(组间松)——歧义消失,且没加任何线。
一个 label 上方间距 8px、下方间距 8px,它在表达"属于上面还是下面的输入框"?
先想 10 秒再展开
都不属于,或者说有歧义——等间距让分组失败。label 必须离它修饰的输入框更近(如下方 4px),离上一个字段更远(如上方 20px)。间距的不对称,才是分组的本体。这条在 04 章会变成"用间距阶里相邻两档表达组内、跨档表达组间"。
与下一节的关系:接近性表达"成组";但一组元素若边缘参差不齐,仍然显乱——秩序由对齐建立。
1.4对齐:看不见的边
对齐 = 让元素共享一条看不见的边或中线;界面里不同的对齐轴越少、越一致,就越显秩序。
对齐制造的是"这是有人精心摆放过的"信号。错位哪怕只有几像素,也会被感知为"廉价 / 草率"——用户说不出哪里不对,但整体印象掉了一档。对齐是性价比极高的一条:几乎不花对比预算,纯靠"摆正"就提升精致度。
底层机制(比文档深一层):对齐利用格式塔的连续律(continuity)——视觉系统会沿元素的边缘自动延伸出一条隐形的线,并期待后续元素落在这条线上。每多一条不同的对齐线,就多一条要追踪的隐形线,画面就多一分"散"。专业排版的潜规则因此是:能共用一条对齐轴,就不要新开一条。这也解释了居中对齐的隐藏代价:每行的起始边都不在同一条竖线上——多行正文居中,左缘会变成锯齿,秩序和可读性双降。所以正文几乎从不居中;居中只留给单行标题或刻意对称的英雄区(hero section)。
对齐像建筑立面上的窗户都对齐到同一条垂线,错一扇就显歪。失效之处——刻意的不对称(asymmetry)是高级技巧,但它建立在"先能对齐"的能力之上,不是新手的随意乱放。
一个卡片:标题居中、正文左对齐、按钮右对齐。它有几条对齐轴?读起来会是什么感觉?
先想 10 秒再展开
至少三条轴(居中线、左缘、右缘),视觉上"散"。把三者统一成"全部左对齐到同一条竖线",立刻收拢。对齐轴越少越整——这是最容易执行、又最常被忽略的一条。
与下一节的关系:对齐建立单屏的秩序;而跨组件、跨页面的秩序,靠重复。
1.5重复与一致性
重复 = 同类元素在不同位置使用同一套视觉规则;一致性让界面"成体系"而非"拼凑感"。
重复让用户"学一次,处处复用":一旦知道"实心强调色 = 主操作",在任何页面都认得。它也是品牌识别和"高级感"的主要来源——杂乱的不一致,会让产品整体掉价。
底层机制(比文档深一层):重复把零散的视觉决策,变成一套可学习的视觉语言。读者第一次见到某种按钮样式时建立一个映射;之后每次重复都在强化它,识别成本逐次下降到接近零。反过来,任何无意义的不重复(同样是主按钮,却换了圆角 / 颜色 / 间距)都会被读成"这里不一样,值得停下来想想"——于是一次毫无信息的视觉变化,变成了一次毫无必要的认知打断。这正是 design tokens 和设计系统(05、06 章)存在的根本理由:把"重复"从靠人工自律,升级成由系统强制。
重复像代码里的命名规范:同一概念到处用同一个名字,读者(和未来的你)不必每次重新理解。失效之处——重复过头会单调;需要变化时,变化要"成体系地变"(例如在同一套间距阶里取不同档),而不是随机地变。
主按钮在首页是 6px 圆角、在详情页是 12px 圆角,用户会"注意到"吗?
先想 10 秒再展开
多数用户不会明确指出来,但会模糊地觉得"详情页好像有点不一样 / 不够精致"。不一致的代价通常不是显性投诉,而是整体观感掉价——这种伤害悄无声息,正因如此更需要靠 token 系统在工程层面消灭它,而不是靠每次手动记得对齐。
与下一节的关系:对比、接近、对齐、重复都在"安排元素";但它们全都需要一种共同的原料——空出来的地方。
1.6留白:不是浪费,是媒介
留白 = 元素之间和周围"故意留空"的区域;它是让层级、分组、对齐得以表达的媒介,不是没用完的空间。
前面每个原则都要花留白:对比要靠周围的空让重点"透气";接近性里的"组间松"就是留白;对齐线两侧也需要空。留白不足时,前面所有原则会同时失效——这也是"信息塞满"的界面看起来最业余的根因。
底层机制(比文档深一层):区分宏观留白(macro:区块之间、页面边距)和微观留白(micro:行间、字间、内边距)。一个元素的视觉权重,一半来自它本身,另一半来自它周围的空——同一个标题,四周留白越大,权重越高(孤立 = 重要,这也是前注意阶段"孤立项弹出"的效应)。新手的默认倾向是"把空间填满 = 信息量大 = 划算",但密集排布让前注意阶段无从弹出任何东西,结果是"信息很多,却什么都没看进去"。留白是用"看得见的少",换"读得进的多"。
实例:同一段内容,只改留白
文字一字未改。右边只动了三处:行高 1.25→1.65、标题与正文间距、两段之间间距。可读性的差距,全部来自空。03 章会把"行高怎么定"做成可推导的规则。
一个"信息密集"的后台表格,加大行高和留白,会让它显得"信息更少"吗?
先想 10 秒再展开
视觉上更空,但读取速度更快、误读更少。密度的目标不是"塞进最多",而是"单位时间读到最多"。适度留白通常提升有效密度。真正的高信息密度界面(如交易终端)也极其讲究行高与对齐,不是靠贴边硬塞。
1.7收束:CRAP 清单与诊断流程
把五个杠杆压成一张可执行的清单。CRAP = Contrast(对比)/ Repetition(重复)/ Alignment(对齐)/ Proximity(接近),留白贯穿这四者。它不是四个孤立技巧,而是"看到乱就过一遍"的检查表。
五者如何协作(把本章概念串起来):对比定主次 → 接近定分组 → 对齐定秩序 → 重复定一致 → 留白是这四者的预算。一个"看着不对但说不清"的界面,几乎总能定位到其中某一条断了。
| 杠杆 | 解决 | 断掉时的症状 |
|---|---|---|
| 对比 | 谁最重要 | 一片"平",抓不住重点;或处处都在喊 |
| 接近 | 谁和谁一组 | 归属歧义,label 不知道修饰谁 |
| 对齐 | 整体秩序 | 边缘参差,显廉价 / 草率 |
| 重复 | 跨页一致 | 拼凑感,同类元素各长各的 |
| 留白 | 以上四者的预算 | 挤、闷,所有原则同时失效 |
一个可迁移的诊断流程——看到一个界面觉得乱,依次问自己五个问题:
- 最重要的元素,第一眼跳出来了吗?(对比 / 视觉权重)
- 相关的东西,被看成一组了吗?(接近)
- 边缘对齐到了尽量少的轴吗?(对齐)
- 同类元素长得一样吗?(重复)
- 哪里挤得喘不过气?(留白)
这套流程是本章最该带走的东西。后面五章——色彩、排版、空间、落地、系统——本质上都是在为这五个问题提供可度量的工具:色阶让"对比"可量化,字阶让"层级"可推导,间距阶让"接近 / 对齐 / 留白"有据可依。
§本章 self-check
先合上教程,把答案写在纸上或编辑器里。写完再展开对照——直接点开,等于把这一节当成又读了一遍。
- 视觉层级靠"制造差异"还是"把重点都加强"实现?为什么把一段文字里每个字都加粗会失败?
- 为什么说"用间距分组,比用边框分组更便宜"?背后是哪条知觉机制?
- 一个表单 label 的上下间距相等,会造成什么问题?用接近性怎么修?
- 正文为什么几乎从不用居中对齐?用"对齐轴 / 隐形线"解释,而不是只说"不好看"。
答案(先做完再展开)
- 靠制造差异。层级是相对的,全部加粗会把权重重新拉平,等于没有强调——强调 = 少数元素与其余的差异,不是整体加强。
- 因为视觉系统在聚焦扫描之前,就靠空间距离(接近律)推断分组,这比读边框 / 分隔线更快更底层;边框是额外的视觉元素,要消耗对比预算,而调间距不占用任何笔墨。
- 造成归属歧义——眼睛分不清 label 修饰上面还是下面的输入框。修法:把 label 贴近它的输入框(组内紧,如 4px)、把字段组之间拉开(组间松,如 20px),用间距的不对称表达分组。
- 因为多行居中会让每行的左起始边落在不同位置,制造出锯齿状的多条隐形对齐轴,违反连续律,秩序和可读性同时下降;左对齐让所有行共用一条轴,只需追踪一条隐形线。
让"推荐档"从三档定价里跳出来——不许加新元素、不许加新颜色
一个定价区:三档套餐并排,每档都有"档名 / 价格 / 三条特性 / 一个按钮",信息量完全相同。现在只用本章的五个杠杆,让中间的"推荐档"明显跳出来,同时让每档内部的"价格 / 特性 / 按钮"分组清晰。约束:不加任何新元素,不引入新颜色(只能用已有的深灰 / 浅灰 / 一个强调色)。
提示(卡住再展开)
推荐档 = 对比(整卡放大一点 / 描边强调)+ 留白(四周比邻档多留)+ 故意打破重复(三档里唯一一个加 badge 或实心按钮)。档内分组 = 接近性(把价格、特性、按钮拉成间距不同的三簇)。三档的档名、按钮位置则靠对齐 + 重复保持在同一条轴、同一种样式。注意:让推荐档跳出来的,是它和另两档的差异,所以另两档要主动"压低"(更灰、更小、更挤一点),而不只是把推荐档调大。