第 05 章 视觉动线：让眼睛按你的顺序走
去年年底，你们组搞了个技术开放日，你自告奋勇做海报。
A3 竖版，深灰底。顶上一行大字”Go 并发编程实战工作坊”，字是白的，加了点字重。中间是主讲人的半身照——从公司内网扒的，白衬衫，侧身四十五度，脸朝画面右侧看。照片下面一行小字写时间地点。右下角一个二维码，二维码上方你用橙色写了一行：“名额 30 人，先到先得”。字号不小，你自己觉得挺醒目。
你把海报拿给坐对面的同事，让人家看三秒，然后问：你记住了什么。
同事说：“周六下午。”
你愣了一下。你最想让人记住的是”名额有限、先到先得”。这句话你特意用了画面里唯一的橙色，字号也不小。同事完全没看见。
“为什么？我那行字挺大的。”
这就是这一章要回答的问题。先别急着改海报，我们得先把”大”这个字拆开。
一、“他在看重点”这个假设本身就是错的
我先问你一个更根本的问题：你觉得，观众看一张图的时候，是”你让他看什么他看什么”，还是别的什么？
“我觉得……至少我可以引导吧。不然做设计干什么。”
能引导，但引导的机制跟你想的不一样。
第 01 章我们说过，你的眼球每秒跳三次左右，这种跳动叫扫视（saccade，眼球在两个注视点之间的快速跳转）。只有停下来的时候你才真的看得清东西，跳的过程中基本是瞎的。每一次”停”，大脑只处理指尖那么大的一块区域。也就是说，观众看你的海报，实际上是在你的画面上采了五到十几个样本点，然后把这些点串成一个”我看懂了”的故事。
关键在这里：这五到十几个点，是观众自己选的，不是你指定的。
你能做的只有一件事——改变每个位置被选中的概率。
“那我把最重要的东西放在正中间，是不是概率就最高？”
不一定。你回忆一下，你走进一个陌生房间，第一眼看的是什么？
”……最亮的窗户？还是正对着门那面墙？”
大部分人会先看最亮的那个东西，或者正在动的东西，或者——如果房间里有人的话——看那个人的脸。位置在其中排得很靠后。
这就是我要在这一章立起来的第一个判断：位置是弱牵引力，对比是强牵引力。 你把主信息放在黄金位置，只是给了它一个”起跑时的微小优势”；而一个高对比的小点，可以从画面的任何角落把眼睛抢过去。
回到你那张海报。主讲人照片里那双眼睛朝右看，视线把观众的目光带向了画面右侧——那里是空白。而”名额 30 人”这行字虽然在右下角、虽然是橙色，但它周围还有二维码（黑白方块，边缘密度极高）、还有时间地点的小字。它的”局部对比”被邻居稀释了。
更狠的是：那张人脸。人脸是画面里唯一一个能被”识别”的东西，其他都是文字和色块。人脑有一个专门处理脸的模块，快到你来不及选择。所以你同事的眼睛第一跳落在了脸上，第二跳顺着视线方向滑出去，滑到画面外——然后他觉得”看完了”，回来告诉你”周六下午”。
“所以我那行橙字输给了一张脸？”
对。而且输得不冤。
这一章要做的事，就是把这个”输赢”的规则拆给你看。前面四章——观看与看见的分野（第 01 章）、视知觉机制（第 02 章）、格式塔（第 03 章）、图与底（第 04 章）——讲的都是”眼睛这套硬件是怎么工作的”。这一章是把它们收拢起来，回答一个实战问题：既然眼睛是这么个东西，我怎么让它按我的顺序走。
这个顺序，就叫视觉动线（visual path / eye flow）。
二、阅读习惯不是自然律
大多数设计文章会告诉你：人看东西是从左到右、从上到下的。然后它们在这个基础上推导 Z 型、F 型。
我们先停一下，问一句：凭什么？
“从小看书不就是这样吗？这不是人的本能吗？”
不是本能，是训练出来的。而且训练的时间非常短——你从五六岁才开始识字，到现在也不过二三十年。进化尺度上，这是一眨眼的功夫，根本来不及改变硬件。
我给你几个反证。
第一个反证：文字方向不同的文化，动线起点也不同。
希伯来语和阿拉伯语是从右往左书写的。有眼动研究比较过不同文字背景的读者看同一张图，结果发现：他们的扫描起点和推进方向，跟他们的阅读方向一致。也就是说，对阿拉伯语读者而言，“左上”这个位置并不天然强势，右上才是。
中文更麻烦。传统中文竖排是从上到下、从右到左的。你去看任何一幅传统中国画上的题跋、任何一块老匾额，阅读起点都在右侧。今天日文漫画依然保留这个秩序——你翻开一本日文漫画，第一页在物理上的”最后一页”。
所以”从左到右”不是人的属性，是你所属的文字社群的属性。它是一份可以被改写的默认配置，不是底层固件。
第二个反证：不识字的人看图，顺序不一样。
这个更关键。研究者给没有接受过文字训练的成人和儿童看图片，发现他们的眼动顺序更受画面本身的”显著性”支配——哪里对比强、哪里亮、哪里有脸，就看哪里。位置习惯的影响很小，甚至没有。而受过阅读训练的人，在同样的图上会多出一整层”扫读”行为：他们会在没有任何内容的地方也做从左到右的横扫。
这说明什么？
说明阅读习惯是一种”背景程序的空转”。当画面没有给它强刺激的时候，它就按默认顺序跑；一旦有强刺激，刺激会直接接管。
你可以自己验证：打开任何一个内容很长的中文网页，随便找一段文字，然后在段落中间放一个鲜红的圆点。你会发现你的眼睛根本没读前面的字，直接被那个红点吸走了。你的阅读习惯连一毫秒都没抵抗。
第三个反证：媒介换了，习惯也跟着换。
这是最实用的一条。从左到右从上到下这个习惯，是在横向展开的、文字密集的、宽度远大于字高的页面上训练出来的。报纸、书本、网页。换一个媒介，它就不成立了。
桌面横屏。 屏幕横向展开，一行能放三四十个汉字，视线在水平方向有充分的活动空间。这时候 Z 型、F 型有机会成立——因为眼睛真的有横向”跑起来”的余地。但也别高兴太早：屏幕越宽，两侧的利用率越低。超宽屏上，人的视线实际上集中在中间一个竖长的带状区域里，两侧大面积是”没人看的地方”。你在 21:9 的显示器上把导航放在最左边缘，跟藏起来差不多。
手机竖屏。 这是重点。屏幕宽度只有六七厘米，一行十五到二十个汉字。横向空间压缩到这个程度，Z 型根本展不开——它没有”跑”的距离。所以手机上的动线退化成了一条自上而下的单列瀑布流：横向竞争几乎消失，纵向竞争白热化。这也是为什么手机上”第一屏”这个位置如此昂贵：屏幕一折叠，下面的东西存在感断崖式下跌，不是因为不重要，是因为它要在滚动之后才存在。
而且手机上还有一组冲突，很多新手不知道：视线在上，拇指在下。
单手持机的时候，你的眼睛自然落在屏幕上半部分（这是视野舒适区），但你的拇指舒适区在屏幕下半部分，尤其是底部三分之一。所以”视觉钩子”和”操作入口”在手机上天生是两个位置。你非要把主按钮做得又大又亮又放在顶部，视觉上赢了，操作上输了；放在底部，操作顺了，但它在动线的末端。
主流解法是什么？是分裂：上部放视觉钩子（让人知道这是什么），底部放操作入口（让人能立刻动手），中间用一条明确的层级线把两者连起来。你去看任何一个成熟的电商 App 的商品详情页，全是这个结构——上面是图，下面是”加入购物车”的固定底栏。这不是巧合，这是被两组生理约束夹出来的唯一解。
投影和大屏。 PPT 是另一种东西。投影上的动线不只是眼睛在动，还有演讲者的声音在牵引。观众看哪里，很大程度上被”他现在讲到哪”控制。所以 PPT 的动线设计有一个反常识的规则：页面上同时只能有一个落点，多了观众就会分心去读、然后漏听你正在说的话。这个我们后面在案例里细说。
空间动线（展厅、货架）。 这个尺度上动线变成了身体的运动。眼睛跟着脚走，脚又被通道、灯光、地面的材质牵引。宜家那种单向环形动线是极端例子——它用物理通道剥夺了你的选择权，让”动线”这个词回到了字面意思。超市货架则是半开放的：人的身体沿通道横向推进，眼睛在货架上做”横向扫 + 垂直定位”的组合动作，一个商品平均只被扫到零点几秒。
“所以’从左到右从上到下’到底还管不管用？”
管一点用，但只在一种情况下管用：当画面里没有强牵引力的时候。 它是默认值，不是优先级最高的规则。一旦你在画面任何地方放了一个足够强的刺激，习惯立刻让位。
记住这句话，后面讲经典动线模式的局限时，它会回来找你。
三、真的能拉动眼球的东西：六加一种牵引力
现在讲干货。有哪些形式因素，是真能拉动眼球的？每一条我都要讲”凭什么”——不讲凭什么的规则跟迷信没有区别。
1. 明暗对比最陡的地方
这是最强的一条。注意我说的不是”最亮的地方”，是明暗变化最剧烈的地方。
凭什么？
你的视网膜上有一层神经细胞，它们的工作方式不是”报告这里有多亮”，而是”报告这里和旁边的亮度差多少”。这种机制叫侧抑制（lateral inhibition：一个被激活的神经细胞会抑制它邻近的细胞，从而把差异放大）。它带来一个著名的错觉叫马赫带（Mach band）——在两块不同亮度的色块交界处，你会看到亮的那侧更亮、暗的那侧更暗，而那条”更亮更暗”的线在物理上根本不存在（详见第 02 章）。
这套机制的意义是：均匀的平面是冗余信息，边界才是新信息。 视觉系统从进化第一天起就在压缩数据——一片均匀的灰，一个数字就能描述，不需要反复采样；而一条边界意味着”这里有东西和那里不一样”，必须上报。
所以对设计来说，最有效的钩子从来不是”最亮的色块”，而是最陡的那条边。
这解释了一个常见困惑：“为什么我整张海报都调得很亮，反而显得没重点？“因为全都亮等于没有边界。对比陡峭度是相对的，你对全局提亮，等于什么都没做。
同理解释了另一个现象：为什么在深色背景上一个小小的白点，比一个巨大的浅灰字块更能吸引眼球？因为前者的局部梯度是满的，后者虽然面积大，但和背景的差值小，边界过于平缓。
2. 边缘密度突变处
第二条和第一条是亲戚，但不一样。第一条讲”亮度差”，第二条讲**“纹理密度差”**。
一片均匀的草地里有一块砖，你一眼就能看到那块砖。不是因为砖更亮，而是因为那里的”细节密度”突然变了——草地是高频的、细碎的，砖是低频的、光滑的。
凭什么？视觉皮层里有专门响应纹理和空间频率的细胞。它们对”频率的边界”敏感。而且这套机制在视野的周边区域也能工作——你眼睛的余光分不清细节，但能感觉到”那一片的质感跟周围不一样”。这在进化上很好理解：你的余光本来就是用来发现”有东西”的，而”质感不一样”往往是”有东西”的可靠信号。
设计上这意味着什么？
意味着密度本身就是一种排版材料。一片密集排列的小字，和它旁边的一片空白，会形成一条极其清晰的边界——这条边界比任何分割线都有效。同样，一群排得很密的图标里突然空了一格，那个空格会比周围的图标更显眼（这是”孤立”的一个变体）。
反过来：如果你的画面到处都是中等密度、到处都差不多，这条牵引力就完全失效了。这就是”哪儿都一样重”为什么看起来那么累——不是因为它难看，是因为眼睛找不到可以”咬住”的边缘。
3. 指向性线条与隐含方向
一条真实的线能引导视线，这不难理解。难理解的是：不需要真的有线。
一排鸽子朝同一个方向站着，你的视线会跟着它们走。一个手指着右边的手，你的视线会往右走。三个逐渐缩小的圆点，你的视线会顺着它们往里走。
凭什么？两个原因叠加。
第一个是格式塔的连续性（continuity，详见第 03 章）：大脑倾向于把”能连成一条平滑曲线的元素”看成一个整体。一旦它把三个点连成了一条线，你的扫视就获得了”沿这条线滑行”的低成本路径——扫视本身是有能耗的，沿着一个已知的连续结构跳，比在杂乱中重新搜索下一个目标便宜得多。眼动是懒惰的，它走阻力最小的路。
第二个更隐蔽：指向性的东西会激活你的空间预期。一个箭头不只是让你看它，它是在告诉你”接下来那边有东西”。大脑会提前把注意力资源投到那个方向去等着。这种”预备”是非常强的，因为它来自一个古老的生存机制——同伴的目光方向意味着那边有猎物或者有危险，不看的人死了。
设计上最常用也最容易翻车的是用真实线条做指向。我见过太多人在标题和正文之间画一条斜线，以为这叫”引导”。结果那条线自己成了一个最显眼的元素，把主内容抢了。记住：引导者应该是仆人，不是主角。 真正好的指向往往是隐含的——一个倾斜的产品、一排渐变的色块、一组人物的目光、一段留白的形状。
4. 人脸与视线
这条强到不公平。
凭什么？人脑有一个专门处理面孔的区域（梭状回面孔区），它的激活快到你来不及做选择——在你能意识到”这是一张脸”之前，你的注意力已经被它拿走了。更过分的是， newborn 的婴儿在出生后不久就表现出对”类脸图案”的偏好：两个点加一个倒三角的嘴巴，就能让他们的目光停留更久。这套东西是硬连线，不是学来的。
而视线方向触发的是另一套更强的东西，叫共同注意（joint attention）：当一个人看向某处，你会不由自主地跟着看。这个反应的强度大到什么程度？大到广告业有一整套研究在讨论”模特该看产品还是看观众”——看产品，观众就跟着看产品；看观众，观众就和模特对视，形成一次短暂的”社交接触”，但产品反而没人看了。
所以人脸和视线是一把双刃剑，而且极其霸道。你在画面里放一张脸，就等于宣布这里是一级落点，其他所有元素都得往后排。如果你的主信息不在那张脸附近，你就给自己制造了一个巨大的动线事故。
回想你那张开放日海报——你用的就是一张正脸偏侧的人像照片，而且他看向画面外。你等于给观众的眼睛装了一个”离场箭头”。
“那我以后是不是别用人物照片了？”
不是。人物照片是极好的钩子，问题是你要用好它：让模特看向主信息，让人脸在画面中的位置靠近你想让人读的东西，让人脸的视线方向和你的动线方向一致。做不到的话，宁可裁掉脸，用局部（手、背影、剪影）。
5. 运动暗示
静态的图里没有运动。但静态的图可以暗示运动。
哪些手法？倾斜的水平线、被裁切出画面的主体（暗示它正要走出去）、拖影和动态模糊、飞溅的水滴、飘动的衣角、模糊的背景配清晰的主体（暗示镜头追着主体跑）、以及最经典的——一个正在发生但还没完成的动作（球在最高点、水泼到一半）。
凭什么？你的视觉系统里有一套非常古老的、专门探测运动的通路。它在视野周边尤其强大——你的余光对运动的敏感度远高于对细节的敏感度。这是被捕食者逼出来的设计：草丛里动一下，你得在看清那是什么之前就反应。
而这套通路有个特点：它容易被”骗”。一个静态的形状，只要携带了运动的典型特征（倾斜、不对称、模糊的方向性），就能激活它。这在生理上叫”代表性动量”（representational momentum）：你看到一个倾斜的物体，大脑会把它”往前推”一点，你记忆中的它比实际的它更倾斜、更靠前。
设计上的用法很直接：动感是注意力的捷径，但它是有情绪代价的（第 01 章讲过这个道理）。运动暗示带来的是紧张、活力、不稳定、瞬间感。你做运动品牌、音乐节、游戏、赛车，这是好东西；你做银行年报、医疗说明、法律文件，这种”不稳”就是负资产。
6. 孤立
一个元素，周围全是空白，它就赢了。
凭什么？这条其实是第 04 章图底关系的一个直接推论。图能从底里”浮出来”，靠的是它在某个维度上和周围拉开了差距。而”周围什么都没有”是拉开差距最彻底的方式——它的局部对比不只是大，是满的。
但孤立还有第二层机制，更深：它打破了节奏。 如果你的画面是一串规律重复的元素（一排等距的图标、一列等宽的文字块），突然有一个不在那个节奏里，它会被立刻识别为”异常”。而异常——前面讲过——是注意力系统的头号目标。
所以孤立的本质不只是”空”，更是”对比于周围的规律”。这也意味着：孤立不需要真的很大一片空白。在一个极其密集的排版里，把一个元素单独拿出来放在一个稍微空一点的位置，效果可能比在大留白里放十个元素还强。
“那我把主标题放在一大片空白中间，是不是就稳了？”
如果画面里只有它一个候选，是的。但要注意一个陷阱：孤立的位置本身也是信息。 放在正中的孤立元素是”宣言”，放在角落的孤立元素是”脚注”，放在边缘的孤立元素是”被人遗忘的东西”。空不是中立的位置，空会放大位置的含义。
7. 补充一条：文字与可读符号
严格说这不是”牵引力”，是”劫持”。
凭什么？因为阅读是一个自动化的、强制的过程。识字的人看到一个词，会读它——这个过程不需要你同意，它在你意识到之前就完成了。有个经典的现象叫 Stroop 效应（字义干扰颜色判断：让你说出”红”这个字的印刷颜色，而这个字是用蓝墨水写的，你会变慢甚至说错），它证明了熟练读者对文字的加工已经自动化到无法关闭。
设计上的后果：画面里的任何一段可读文字，都是一个强制性的注意力竞争者，无论它多小、多灰。 一个十二像素的灰色提示文字，仍然会抢走一部分注意力，因为大脑忍不住去读它。
这解释了为什么”删掉一句没用的话”经常比”把主标题放大”更有效。你不是少了一个元素，你是关掉了一个抢答器。
顺带解决一个悬案：为什么”把字放大”经常没用？
因为尺寸是所有牵引力里最弱的一个。尺寸的作用是”增加面积”，但如果你在放大字的同时没有改变它的对比（比如它还是中灰、背景还是中灰），它只是变大的一片模糊。真正有效的不是”大”，是**“大 + 与周围不同的明度 + 与周围不同的密度”**。三样一起上，才叫层级。
所以牵引力的强度大致可以这样排（粗略，且依赖场景）：
局部明暗对比 > 人脸与视线 > 孤立 > 指向与运动暗示 > 边缘密度突变 > 尺寸 > 位置（文化习惯）
最后那个”位置”排最后，是不是有点意外？这就是这一节最反常识的结论：你以为的”黄金位置”，其实是所有手段里最便宜也最弱的一个。 它只在其他条件都差不多的时候才起作用——而现实里其他条件从来都差很多。
四、五种经典动线模式，以及它们什么时候会失效
现在讲那些你一定听说过的模式。我会讲清楚它们凭什么成立，但更重要的，我会告诉你它们什么时候会失效——这部分比模式本身值钱得多。
先说一个前提，这个前提很多人搞反了。
这些模式不是规定，是统计。是先有人这么排、研究者去记录眼睛的去向，然后画出来的平均路径。它们是”事后描述”，不是”事前律法”。把它们当成”照着做就能成功”的公式，是用错了工具。
1. Z 型
是什么：视线从左上起，横扫到右上，斜向左下，再横扫到右下。两条横线一条斜线，像个 Z。
凭什么成立：它依赖两件事——一是阅读习惯（横扫），二是”扫视走捷径”（斜线是最短路径）。它成立的最佳条件是：画面里没有特别强的单一焦点，元素分布相对均匀，宽度足够横向跑得起来。
适用：横幅广告、网页头部、信息量小的海报、PPT 的封面页。典型的组合是”左上放 logo、右上放导航、中间放主视觉、右下放行动按钮”。
什么时候失效：
- 内容一多就失效。Z 型假定你只需要四个落点，一旦画面里有七八个元素，眼睛不会乖乖走 Z，它会去找最强的那个点。
- 文本一多就失效。有大段文字时，人会切换成”阅读模式”而不是”扫描模式”，Z 型的横扫变成逐行读，模式崩掉。
- 竖屏就失效。前面说过，手机上没有横向跑的距离，Z 型会退化成”之”字都画不出来的垂直瀑布。
- 画面里只要出现一张脸，Z 型立刻失效。
2. F 型
是什么：视线先在顶部横扫一条，然后往下退一点再横扫一条（短一些），然后沿着左边缘垂直往下扫，偶尔向右伸出一小截。
凭什么成立：有研究者做过眼动实验，观察大量用户阅读文本密集的网页，发现他们的注视点分布确实呈现这个形状。它的成因很实际：人在网页上不是在”阅读”，是在”搜索”。他们要快速判断这一屏值不值得读，所以扫标题、扫每段开头，不合意就往下走。
适用：文本密集的页面——文章、列表页、搜索结果页、文档。它的实践意义是：把重要的词放在每段开头（而不只是放在标题里），因为段首是 F 型那两条横线的必经之地。
什么时候失效：
-
卡片式和网格布局会破坏它。Pinterest、电商首页那种等距卡片阵，眼睛走的是”之”字或者螺旋，不是 F。
-
图像为主时失效。F 型的那条”竖线”存在的前提是左侧有可供快速判断的文本锚点（标题、列表项）。纯图页面没有这个锚点。
-
最重要的一条：F 型是”失败”的证据，不是”成功”的目标。
这句话我要说重一点。很多人把”我的页面符合 F 型”当成设计目标，这是彻底的误解。F 型描述的是用户在努力寻找、并且没找到时的行为：他们扫第一行，没找到；扫第二行，没找到；沿着左边往下找……如果你的用户呈现出完美的 F 型，说明你的页面没有给他一个明确的入口，他被迫自己搜索。
一个真正成功的页面，用户的路径应该是：一眼命中主信息，然后往下阅读。这个路径的形状是”一个点，然后一条线”，不是 F。
所以 F 型的正确用法是：用它来检查”当用户在搜索时，他能不能扫到关键信息”，而不是用它来排版。
3. 古腾堡图表（Gutenberg Diagram）
是什么：一位美国的报纸版面顾问在二十世纪中期提出的一个模型（借用了活字印刷发明人的名字）。它把画面用横竖两条线分成四个象限，然后指出：
- 左上是第一视觉区（primary optical area）：视线自然的起点，最强势。
- 右上是强休耕区（strong fallow area）：很少被扫到，除非有意识引导。
- 左下是弱休耕区（weak fallow area）：最弱，几乎无人问津。
- 右下是终点区（terminal area）：视线扫描的终点，是”最后被看到、也最适合放行动号召”的地方。
凭什么成立：它其实就是阅读习惯（左上起）+ 扫视惰性（沿对角线滑行最省力）的几何化表达。在报纸那种”均匀排列的文本块 + 图片”的版面上，它描述得相当准。
适用：以文本块和图像块混合排布、且没有极强单一焦点的版面。杂志跨页、报纸版面、宣传单页、简历。
什么时候失效：
- 一旦画面里出现一个压倒性的视觉焦点（一张大脸、一块高饱和色），四个象限的规则被瞬间击穿。眼睛直接跳到那个焦点，根本没走流程。
- 在非横排文字文化里，起点象限要镜像翻转。
- 在竖屏上，右上和左上的区别几乎消失（因为横向距离太短），这个模型退化成”上强下弱”，信息量损失大半。
- 它最大的问题是：它假设所有元素权重相同。 现实中从来没有。所以它最适合用在”我有一堆差不多重要的东西要排”的场景，而这恰恰是比较少见的场景。
4. 中心放射
是什么：视线落在画面中心（或略偏上的视觉中心），然后向四周扩散。
凭什么成立：由两个因素叠加。一是孤立机制和”中央偏好”——人在没有信息的时候，会本能地把视线投向画面的中心；二是中心构图的对称本身会产生”场”，所有元素围绕一个点组织，视线自然从那个点向外辐射。
适用：单一主体、产品图、证件照式的人物海报、logo、需要”权威感/纪念感/仪式感”的场合。它自带庄重、稳定、不容置疑的气质。
什么时候失效：
- 需要传达”顺序”和”流程”时彻底失效。中心放射没有方向，它给不出”然后呢”。你要讲一个分三步的操作说明，用中心构图就是自杀。
- 多元素时失效。三个元素同时围绕中心，等于三个都在抢，放射变成混乱。
- 需要”动感”时失效。中心构图是静止的、封闭的、向内的。你要表现速度、冲突、突破，它是反作用力。
- 一个实用提醒：真正的”视觉中心”不是几何中心，而是几何中心稍微往上一点（大约高出一个画面高度的十分之一）。几何中心会让人觉得东西”往下掉”。这条经验在摄影和绘画里叫”光学中心”的偏移，你现在可以拿手机里任何一张居中构图的照片验证。
5. 对角线
是什么：视线沿着一条从某个角到对角的斜线推进。
凭什么成立：斜线是画面里唯一同时具备”方向”和”张力”的元素。水平线是静止的，垂直线是庄重的，斜线是”正在变化”的——它不稳定，所以它看起来在动，而动的东西吸引眼睛。另外，对角线是矩形画面里最长的直线，它能串起最多的元素。
适用：叙事性的画面、运动题材、电影剧照、需要表现冲突或突破的海报、需要引导读者从 A 走到 B 的长图。
什么时候失效：
- 需要”稳”的场合。银行、保险、政府、医疗、财报——这些场合要的是”不会倒”，对角线天生在说”可能会倒”。
- 元素太多时对角的”线”会被打断，动线在半路散掉。
- 方向搞错会有副作用。一般认为从左下往右上的对角线是”上升、积极、进取”，从左上往右下是”下降、消极、坠落”。这不是什么铁律，但在我们的文化语境里（配合从左往右的阅读惯性，“往右上”意味着”往前进的方向”）是普遍成立的。你要做一张”业绩下滑”的说明页，用上升对角线，就是在跟自己的内容打架。
把这五个模式放在一起看
它们的共同局限，我总结成三条，这三条比五个模式本身重要：
第一，它们都是”默认路径”，只在”画面里没有强牵引力”时才生效。 任何一条模式，都扛不住一个高对比的小点。所以正确的思考顺序是：先用牵引力确定落点，再用模式检查这些落点之间连不连得起来。 反过来做（先套模式再塞内容）是本末倒置，也是绝大多数”套了模板还是不好看”的根源。
第二，它们把”看”当成了二维扫描，忽略了时间。 一个真实的观众不是均匀扫过的，他在第一个点上停两百毫秒，在第二个点上停八百毫秒，第三个点直接跳过。模式图上的线条粗细都一样，这不是真实。真实是有节奏的，而节奏才是设计的对象。
第三，它们无法处理”层级”。 模式告诉你”人会经过这里”，但没告诉你”他会在这里停多久”。而设计真正要控制的恰恰是停留时间，不是经过。
五、怎么知道眼睛到底往哪走
讲了这么多，你会问一个很实在的问题：我怎么验证？
眼动研究是怎么做的
正规的做法叫眼动追踪（eye tracking）。原理说起来不复杂：用红外光照射眼睛，摄像机拍摄眼球，通过角膜反射的光点和瞳孔中心的相对位置，算出眼球的朝向，再结合标定（让用户依次看屏幕上若干个已知点，建立映射）算出他正在看屏幕上的哪个位置。
采样率通常几十到上千赫兹。从原始数据里，研究者会分出两类事件：
- 注视（fixation）：眼球相对静止，通常持续一两百毫秒到几百毫秒。这段时间里信息才真正进来。
- 扫视（saccade）：两次注视之间的快速跳转，通常几十毫秒。这段时间里视觉输入基本被屏蔽了（这一点第 01 章讲过）。
把一串注视点按时间顺序连起来，叫扫描路径（scanpath）。把多个人的注视点密度叠在一张图上，叫热点图（heatmap）。再划定一些区域做统计，叫兴趣区（area of interest）分析，常用的指标有”首次注视到达时间”（多快被看到）和”注视总时长”（看了多久）。
这里有一个很多人踩的坑，我必须说清楚：
热点图不等于动线。
热点图是密度的叠加，它告诉你”这里被看了很多次”，但它丢掉了顺序。两个热点区域，你不知道哪个先被看、中间有没有往返、有没有跳过。而且热点图是多人平均的——五个人各看了一个不同的地方，平均之后可能呈现出”五个人都看了中间”的假象，实际上一个人都没看中间。
所以看眼动报告的时候，一定要追问：能不能单独看每个人的 scanpath？只看平均热点图得出的结论，经常是错的。
你自己能用的四种自查法
你没有眼动仪，但你不需要有。下面四种方法，第一种测”首因”，第二种测”骨架”，第三种测”顺序”，第四种测”因果”。
方法一：三秒闭眼回忆法
找一个人（最好是没参与过这个设计的人，越陌生越好，因为熟悉会污染结果），给他看三秒，拿走，让他立刻说出他记住了什么。
注意几个操作细节，不然测出来是废数据：
- 只能看一次。看第二次他就开始”阅读”了，不是”看见”。
- 三秒是真三秒，心里数，别心软数到八秒。
- 让他说出，不是让你问他”你看到标题了吗”。引导性问题会制造虚假答案。就问”你记住了什么”，然后闭嘴。
- 记录他说的第一个词。第一个词比后面的都重要，它就是动线的第一个落点。
这个方法测的是”首因”——第一个落点和最重要的那个印象。它的局限是测不出完整顺序，人只能回忆起两三个东西。
多找几个人做，如果五个人里四个说的第一个词都不是你想让他记住的，你的动线就是失败的，别再辩解了。
方法二：模糊测试法（也叫眯眼法、缩略图法）
第 01 章教过眯眼看骨架，这里往前推一步，做成三种变体：
- 眯眼：眯到看不清字，只看明暗块。这时候如果整张图糊成一团均匀的灰，说明它在明暗上没有主张（无重点）。
- 缩略图：把图缩到名片那么大（或者手机上看，退后两步看）。细节全部消失，只剩结构。这时候你能不能一眼说出”主角是谁”？如果缩到这么小，画面里还有三四个同样重的东西在打架，那它在真实尺寸下也在打架，只是你有细节可以逃。
- 去色：把颜色去掉只看黑白。很多人靠颜色制造的重点，一去色就全塌了。第 08 章会讲明度为什么是老大，这里先记住这个现象：颜色是最容易伪造的层级，去色能验钞。
方法三：口述顺序法
让人边看边说。不是看完回忆，是看着的时候实时说他在看什么。
“我现在在看这个标题……哦这有个图……这个价格挺大的……”
这个方法能拿到完整的顺序，而且能暴露”卡住”的时刻——他停顿了、说”嗯……”、或者说”这个是什么”的地方，就是动线上的断点。
它的缺点是会稍微改变人的自然行为（说话占用了工作记忆），但瑕不掩瑜，作为自查完全够用。
方法四：遮挡法
这是最被低估的一种。把画面里的某个元素挡住（用便签、用手、用色块），然后重新看：动线怎么变了？
如果你挡住 A，眼睛立刻去了 B——说明 A 确实是第一落点。 如果你挡住 A，眼睛去了 C 然后卡住了——说明 C 到 B 之间没有连接，动线本来就靠 A 在硬撑。 如果你挡住 A，动线完全没变——说明 A 根本没参与动线，它是纯装饰，它在白占位置。
这个方法其实是在回答一个更根本的问题：这个元素是必需的吗？ 第 01 章讲过遮住主信息那个判断法，这里是它的推广版——逐个遮挡，逐个问”没有你行不行”。
四个方法加起来，覆盖了你日常需要的几乎全部诊断能力。它们的共同点是：都用别人的眼睛，不用你自己的。 这一点非常重要，因为它绕开了设计师最大的盲区——你知道答案，所以你不可能假装不知道。
六、动线的三种失败
现在讲失败。我把最常见的问题归成三类，每一类我都会说清楚”它为什么诱人”，因为一个没人会犯的错误不值得写。
失败一：无重点——哪儿都一样重
症状：眯眼之后整张图是一片均匀的灰。眼睛落上去之后不知道该去哪，来回漂几下就走了。三秒回忆测试里，人说不出任何东西，或者只能说出”好像是关于……的”。
为什么诱人：三个原因叠加。
第一，“平均”看起来很”整齐”。新手最缺的就是秩序感，所以一上手就倾向于把所有字号调成差不多、所有间距调成相等、所有颜色调成同一族。这确实解决了”乱”的问题，但它制造了一个更大的问题——没有入口。
第二，“不偏袒”看起来很”专业”。很多人觉得把某个元素做得特别突出是”俗气”的，克制才是高级的。这个直觉在特定场合是对的（第 01 章讲过奢侈品广告的低对比策略），但它有个前提：你得先有重点，才有资格谈克制。 一张从来没有重点的图，不是克制，是没做。
第三，也是最隐蔽的一个：设计师自己知道每个元素的重要性，所以他想象不出”看不出重点”是什么感觉。 这是典型的”知识的诅咒”。你看自己的图，你当然知道哪句最重要——因为是你写的。但观众不知道。你必须假装自己是第一次看到这张图。
为什么会失败：注意力需要一个”入口”。没有入口的时候，大脑会启动一个昂贵的操作——自己搜索。而搜索是费力的，人的默认策略是：费力就放弃。 所以无重点的图，观众不是”看不懂”，是”根本没开始看”。
怎么修：注意，修法不是”加重点”，是**“减次要”**。
这是新手最容易搞反的一条。遇到”没有重点”，人的第一反应是把主标题再放大一点、换个更亮的颜色。结果所有元素的水位一起抬高，相对关系没变，还是没有重点。
正确的做法是：把其他东西的对比度降下来。 把副标题的明度往背景靠，把装饰元素的饱和度抽掉，把次要信息的字号缩小到”看得见但不必读”。重点不是被”加”出来的，是被”让”出来的。
失败二：多重点打架——三四个元素在抢
症状：眯眼之后能看到三四个同样亮的块。眼睛在它们之间来回跳，跳几次之后累了就走。三秒回忆测试里，人能说出两三个东西，但说不出哪个是主要的，而且每个人说的都不一样。
为什么诱人：这个错误的根源通常不在设计师，在需求方。
“这个是老板要求放的。""这个 logo 不能小。""活动时间很重要。""二维码必须显眼。""赞助商给了钱的。”
每一条单独看都合理。加在一起就是四个”第一”。
设计师的失职在于：没有把这些要求翻译成一个优先级排序，而是试图同时满足所有人。 这在技术上叫”讨好式设计”，它的结果不是”皆大欢喜”，是”谁都没被服务到”。
还有一个更隐蔽的诱因：设计师自己分不清主次。他手上有五条信息，他不知道客户最想要哪一条，于是他把五条都做成”差不多重要”，把这个选择题丢给观众。这是把设计决策转嫁成了用户的认知负担。
为什么会失败：多个第一，等于没有第一。
这不是修辞，是生理事实。注意力在任何一个瞬间只能锁定一个目标。当画面里有两个同样强的候选时，眼睛会在它们之间来回跳（视觉竞争），每一次跳转都消耗时间，而且——关键——每一次跳转都会部分重置你的工作记忆。跳三次之后，第一个点的内容已经开始淡出。
所以多重点打架的图，观众看完之后什么都记不全，只记得”好像挺热闹”。热闹是印象，不是信息。
怎么修：分三步。
第一步，排序。拿出一张纸，把所有元素按重要性写下 1、2、3、4。这个动作看着傻，但它是唯一有效的解药。如果排序的时候你卡住了、觉得”这两个一样重要”，那说明你还没有真正理解这个设计的目标——这时候该做的不是设计，是回去问清楚。
第二步，牺牲。明确告诉自己（和需求方）：排在第三第四的，就是要被牺牲的。它们不是”稍微弱一点的第一”，它们是”清楚地第二、第三”。设计里有句老话：如果什么都重要，就什么都不重要。
第三步，用不同的手段区分。这是技术层面的关键。很多人以为”层级”就是把字号从 48 降到 36 再降到 24。这远远不够——字号差异太小的时候，它们还是在同一量级上竞争。真正有效的层级是用不同的维度：一级用高对比（明暗差），二级用大小，三级用位置，四级用色彩。不同维度之间的竞争远弱于同一维度内的竞争。就像一支队伍里，最高的人、最胖的人、穿红衣服的人，可以各有各的显眼，互不冲突；但三个都靠”高”来争，就只能有一个赢。
失败三：动线中途断掉——读者走到一半不知道接下来看哪
症状：观众顺利看到了第一、第二个元素，然后——停住了。他的眼睛开始无目的地漂，或者干脆跳出了画面。三秒回忆测试里，他能说出标题，然后什么都没有了。
这种失败最难被发现，因为它前两步是成功的。设计师测的时候看到”观众记住了标题”，就以为没问题了。但他没注意到观众只记住了标题。
为什么会发生：三种情况。
第一种，距离太远。第二个落点和第三个落点之间隔了太大的空白，或者一个很强的干扰元素。眼睛从 A 跳到 B 是有成本的，距离越远成本越高。如果 B 的吸引力不足以支付这个成本，眼睛就会去找更近、更容易的目标——哪怕那个目标不重要。
第二种，没有过渡。A 是极强，B 是极弱。眼睛看完 A，再看 B，发现 B 太弱了，不够构成下一个”值得跳”的目标。这就像下楼梯，第一级台阶高三十厘米，第二级高两厘米——你会踩空。动线需要梯度，需要中间强度的”踏脚石”。
第三种，方向冲突。A 的指向朝左，B 却在右边。或者 A 和 B 对齐了，B 和 C 却完全没有关系。每一步都要重新搜索，观众在第三步就耗尽了耐心。
为什么会失败：因为人的耐心是极短的。看一张海报的平均时间不到两秒，看一个网页首屏的平均时间不到十秒。你只有两三次跳动的机会。断一次，就没了。
怎么修：三个具体手段。
铺踏脚石。 在两个重要元素之间，放一个中等强度的东西——可以是一行小字、一条细线、一个图标、甚至只是一块稍亮的底色。它的作用不是被读，是提供下一个落脚点。就像过河的石头，你不需要每块都看清，你需要的是它们之间的距离别超过一步。
用格式塔连接。 第 03 章讲过邻近性、相似性、连续性。这三条就是动线的”胶水”：让下一个元素和上一个靠近（邻近）、长得像（相似）、或者在一条线上（连续）。对齐在这里的价值不是”整齐”，是”给眼睛一条低成本的滑道”——这是很多人不知道的秘密，对齐最大的收益是动线效率，其次才是美观。
给一个明确的”终点”。 动线需要收尾。观众看完所有信息之后，你要告诉他”结束了，现在去这里”——那通常是一个二维码、一个按钮、一个网址、一个电话号码。没有终点的动线，观众会一直在画面里打转，最后什么都没做就走了。这个终点在动线设计里叫”出口”，它跟入口一样重要。
补充一个第四种，比较特殊：动线提前离场。
它的症状是：观众看了第一眼就走了，根本没走完。原因通常不是”没重点”，而是第一落点给错了东西——它很强，但它不重要。最典型的就是前面那张开放日海报：人脸是最强的钩子，但它不是主信息，观众看完脸就觉得”我看懂了，是一张人物海报”，然后走了。
这种失败的阴险之处在于：第一落点越强，离场越早。 你以为你做了个很吸引人的钩子，实际上你做了个”看完就走”的陷阱。
修法只有一条：第一落点必须同时具备”最强吸引力”和”最重要的信息”，或者，第一落点的吸引力必须被用来把视线送向主信息。 你的钩子不能是终点，它必须是入口。
七、跨场景：动线在六个真实场面里长什么样
理论讲了够多，我们把它放到具体的画面里。下面是六个完全不同的场景，我会把画面里有什么、眼睛怎么走、为什么这么走，全部写清楚。
案例一：一张音乐节海报（A1 竖版，贴在地铁通道）
画面里有什么：底色是很深的墨蓝，几乎接近黑。画面上半部分偏左，有一个巨大的金黄色小号剪影——不是正着放的，是斜的，喇叭口朝向右下。小号占据了画面大约五分之一的面积，是整张图唯一的亮色和唯一的暖色。喇叭口的右下方，是一行白色的日期”10.18-10.20”，字号中等。画面底部是一条横排的艺术家名单，白色小字，等距排列，一共十二个名字。左上角是音乐节的英文缩写，也是白色，字号小。
眼睛怎么走：
第一跳，落在小号上。凭什么？它是全画面唯一的暖色 + 最亮的块 + 最大的边缘密度突变（深蓝底上的金黄色轮廓，明暗梯度拉满）。这一跳几乎是强制的，你在五米外就会看到它。
第二跳，从喇叭口滑向右下角的日期。凭什么？小号的喇叭口是一个天然的指向结构，它形成了一条从左上到右下的隐含斜线。眼睛沿着这条线滑行的成本极低。而且日期那行白字，是深蓝底上唯一的纯白小块——它自己也有足够的对比成为候选。两个条件叠加，这一跳是稳的。
第三跳，落到底部横排的艺术家名单。凭什么？名单是等距重复的十二个白色小字，形成一个横向的高密度条带。它和第二跳的日期在垂直方向上对齐（都在画面右侧偏下的区域），而且它的”密度”和上面的”孤立”形成对比，非常容易被识别为一个独立的区域。
第四跳，回到左上角的音乐节名。凭什么？这是最弱的一跳，也是最考验设计的一跳。它之所以能发生，是因为观众在看完名单之后，会有一个”我到底在看什么活动”的回溯需求。而左上角是阅读习惯的默认起点——在前面的强牵引力都用完之后，习惯接管，眼睛回到起点去找标题。
这个设计的聪明之处：它把”最强的钩子”（小号，纯图形，零信息量）和”最重要的信息”（日期）用一条隐含的斜线连在了一起。钩子不是终点，是入口。
如果重做会怎么改：我会考虑把日期那行字再做大一点点，或者给它加一个浅浅的深色底衬，让它和小号之间的”强度落差”缩小——因为现在小号太强、日期太弱，落差太大，有一部分观众会跳过日期直接去看名单。这就是前面说的”台阶差太大”的问题。
案例二：一个外卖 App 的首页（手机竖屏，6.1 英寸）
画面里有什么：最上面是状态栏和搜索框（浅灰底的圆角矩形，里面一行灰色小字”搜索商家、商品”）。搜索框下面是横向可滑动的品类入口，两排共十六个小图标，彩色的。再下面是四个并排的方形 Banner，其中第一个最大（占整行），里面是一张汉堡的特写照片，浅景深，背景虚化。Banner 下面是”猜你喜欢”的商家列表，每个条目是左边一张小方图、右边几行文字。最底部是固定的 tab bar，五个图标。
眼睛怎么走：
第一跳，落在第一个 Banner 的汉堡图上。凭什么？它是全屏唯一的大尺寸照片，而且是浅景深——主体清晰、背景模糊，这本身就是极强的”边缘密度突变”，同时它还是食物（人脸之外最容易被识别的类别之一）。
第二跳，往下滑到商家列表的第一条。凭什么？纯粹是垂直瀑布流的惯性，加上列表第一条的左图形成了一个新的密度块。
问题在哪：品类入口的十六个小图标，几乎没被看到。
凭什么没被看到？因为它们夹在搜索框（低对比的灰底）和 Banner（高对比的大图）之间。Banner 的吸引力把它们”压”了下去——眼睛从搜索框直接跳过了图标区，落到了 Banner 上。而且图标本身是彩色的、等距的、数量多的，这是一个典型的”多重点打架”结构：十六个同样大小、同样权重的彩色方块，谁也不比谁强，结果整组作为一个整体被视作”背景纹理”，被跳过了。
这就是界面设计里一个经典的失败模式：Banner 吃掉一切。 运营同学都想要顶部大图，因为点击率高；设计师也喜欢，因为大图好看。但每一次你在首屏顶部放一张强对比的大图，你都在牺牲它上方的所有导航。
怎么修：三种思路。
一是降低 Banner 的绝对强度——不是删掉它，是让它和上面的图标区在明度上更接近（比如给它统一加一层半透明的深色罩，把对比压下来）。这是”减次要”的思路，但这里减的是那个”太强的不重要元素”。
二是给图标区一个独立的强特征——比如让十六个图标变成统一的单色（去掉彩色），形成一条整齐的、有节奏的条带。密度突变本身就是牵引力：一片纯色背景上突然出现一排规整的小形状，这个”纹理边界”足以让它成为独立的一站。
三是顺序调换——把品类入口放到 Banner 下面。这是最直接的，但通常运营不同意。
你自己打开手机里任何一个 App 的首页，用三秒闭眼回忆法测一下：你能记住的是不是永远只有那张最大的图？如果是，那个 App 的导航效率就是低的，只是它规模大、用户黏性强，掩盖了这个缺陷。
案例三：一张雨夜街头的照片（摄影）
画面里有什么：横构图。三分之二的画面是湿漉漉的柏油路面，路面上有一摊水，映着霓虹灯的光，是整个画面最亮的区域，橙红色。右侧三分线上有一个打伞的人影，逆光，几乎全黑，只有轮廓，伞是斜的。上方四分之一是天空，深蓝偏黑，有几根电线横穿。远处的霓虹招牌是模糊的彩色光斑。
眼睛怎么走：
第一跳，落在那摊水面的反光上。凭什么？最亮 + 暖色（前进色，详见第 10 章）+ 边缘密度突变（柏油路面是均匀的暗，水面的反光是破碎的亮）。
第二跳，滑到右侧的人影。凭什么？两个原因。第一，人影虽然很暗，但它是画面里唯一一个”可识别的形状”，极暗的轮廓压在中等亮度的路面上，形成了一个极强的局部对比——注意，这里起作用的是”暗对中灰”，不是”亮对暗”。第二，伞是斜的，而且人影的位置在右侧三分线上，这是水平方向扫动时的自然停靠点。
第三跳，往上扫到模糊的霓虹光斑。凭什么？是色相。前两跳都是明暗在起作用，这一跳是”唯一的高饱和彩色”在起作用。人看完明暗之后，开始找颜色。
第四跳，扫过天空，然后回到水面。这时候观众开始意识到”这是一张雨夜的照片”，情绪完成。
这张照片的关键决策：摄影师把天空压得很暗，几乎到黑。
为什么？因为雨夜的天空其实是有内容的（云、月光、远处楼顶的灯），如果不压暗，它会和路面的反光竞争。而天空在这个故事里不重要——故事在地面。所以要么压暗它，要么干脆裁掉它（裁切的问题详见第 26 章）。
这就是摄影里的动线控制：你不是在决定拍什么，你是在决定让哪部分”失声”。
反例：新手拍雨夜，最常见的错误是”什么都想留下”——天空有点细节、地面有反光、招牌清晰、人物也清晰。结果四个区域都是中等对比，四个都在竞争，观众的眼睛在画面里打转，最后只留下一个印象”好像挺好看的”。好看但说不出为什么，通常就是没有动线。
案例四：超市货架上的酱油瓶（包装）
画面里有什么：这是一整排货架，从地面到两米高，横向三米。上面密密麻麻排着几十个品牌的酱油，瓶型各异，标签颜色各异——红的多、黄的多、深棕的多。其中有一个品牌，它的瓶子是矮胖的，标签是大面积的深黑底 + 一小块亮黄的品牌名，而且它家有三款产品（生抽、老抽、蒸鱼豉油）在货架上纵向连成了一竖列，从第二层一直排到第四层。
眼睛怎么走：
这个场景的动线机制和前面全都不一样，因为身体在动。
第一步：顾客推着车沿通道横向走，眼睛在货架上做的是”横向扫视”，每个商品被扫到的时间不到半秒。这时候起作用的是远距离的、低分辨率的特征——细节全部失效，只有大的明暗结构、大的色块还有效。
第二步：在这一片花花绿绿里，那个”深黑 + 亮黄”的组合形成了唯一的强局部对比（周围都是中明度的红黄棕）。它在三米外就能被看到。这是边缘密度突变（一片中等明度的彩色里出现一块纯黑）和明暗对比的双重作用。
第三步：顾客走近，这时候纵向的”品牌块”起作用了。三款产品在货架上纵向连成一列，形成一个垂直的”墙”。这个连续的深色块在垂直方向上拉出了一条线，它把眼睛从第二层”导”到了第四层。这就是格式塔连续性在一个完全商业的场景里的应用——它不是为了好看，是为了让你在这个品牌面前停留更久。
第四步：顾客伸手。注意手会伸向哪个高度——视线平齐到腰部这一段是”黄金货架”，这一段卖得最好，这不是秘密，是零售业的常识。
这个案例最值得学的：包装设计不是在平面上设计，是在**“三米外的模糊状态”和”三十厘米前的清晰状态”**两种模式下同时设计。
很多包装设计在电脑上看很精致——细线条、小字、微妙的渐变、低对比的高级灰。放到货架上，它在三米外就是一团模糊的灰，完全不显眼。反过来，那些在货架上赢的包装，在电脑上单独看经常”很土”——大色块、巨大字、高对比。
这不是审美水平的问题，是它服务的距离不同。判断一个包装好不好，你必须在三米外看一次，在三十厘米前看一次。只看一个距离的包装设计师，做的都是半个设计。
案例五：一页汇报 PPT（投影，会议室）
画面里有什么：一页讲”三季度系统稳定性”的 PPT。左上角标题”Q3 系统稳定性复盘”。中间是三个并排的卡片，分别是”可用性 99.95%”、“故障 3 次”、“平均恢复 12 分钟”，三个卡片样式完全一样，同样大小、同样蓝色边框。右下角一个折线图，很小。左下角一整段文字说明。
眼睛怎么走（假设没人讲）：第一跳落在三个卡片中的某一个（通常是最左边那个，凭的是阅读习惯），然后在三个卡片之间来回跳（它们等强），然后跳到那整段文字，读两句就放弃了，最后走人。
眼睛怎么走（有人讲）：这是关键。有人在讲的时候，动线被两层控制——画面和声音。
如果演讲者正在说”故障三次，比上季度少了一次”，观众的视线会全部集中在中间那个卡片上，其他两个卡片、图表、文字全部失焦。这时候画面上其他元素的存在感接近于零。
这就暴露了 PPT 动线设计的第一原则：每页只能有一个落点，而且它必须和演讲者此刻在说的内容重合。
为什么？因为观众的工作记忆被”听”占用了一大半。你在他正在听”故障三次”的时候，画面上同时有三个等强的数字、一个图表、一段文字，他就必须在听和看之间做取舍。取舍的结果是：他两个都没记住。
所以那一页正确的做法是：
- 三个数字不要同时以”等强”出现。要么只留一个这页要讲的数字，另外两个弱化；要么用动画让它们依次出现（注意，这里的动画不是为了”炫”，是为了让动线随时间展开——因为 PPT 是一个有时间轴的媒介，这是它和海报最大的区别）。
- 图表如果这页不讲，就删掉。留着一个”可能有人会问”的图表，是给自己找安全感，不是给观众信息。它永远是一个抢注意力的候选者。
- 那段文字，观众不会读。真的，一段超过两行的文字放在 PPT 上，等于不存在。要么把它变成三四个关键词，要么把它放到讲义里。
PPT 动线的第二个特点：投影上的对比度会被环境光吃掉。会议室开着灯，投影的黑色会变成深灰，你的所有”靠明度差建立层级”的手段都被压缩了。所以在 PPT 上，你要比在电脑上看的时候加大一档对比，而且更依赖颜色和大小而不是微妙的明暗差。这是媒介特性，不是审美选择。
第三个特点：PPT 的动线是跨页面的。观众记得的不是某一页，是”刚才那几页讲了什么”。所以每一页的落点应该构成一条连贯的线——如果连续三页的第一落点分别在左上、右下、中间，观众会感到一种说不清的疲惫。这就是为什么模板有价值：它保证了落点位置的一致性，让观众不用每页重新找。
案例六：一个展馆的参观动线（空间尺度）
最后这个案例，尺度完全不同，但原理一模一样。
画面里有什么：一个两百平的临时展厅，入口在左侧。进门之后正对着一面两米高的深色墙，墙上只有一个亮着的灯箱，里面是展览的主题大字。深色墙的右边是一个开口，透出光。展厅内部有六个展区，用半透明的纱幔隔开，每个展区有一件主展品和一块说明牌。地面是深灰水泥，但在通往每个展区的路径上，嵌着一条浅色的灯带。出口在右后方。
身体和眼睛怎么走：
第一步：观众从入口进来，视线立刻落在那面深色墙的灯箱上。凭什么？它是进厅之后视野里唯一的高亮度面。而且它是正对着入口的——空间动线里，“正对入口”这个位置比平面设计里的”左上角”还要强势，因为你没有别的选择，你走进来的时候脸就朝那个方向。
这里有个设计意图：那面深色墙是一块”视觉挡板”。它的作用是挡住后面所有的展品，让你在进入的第一个瞬间只接收一条信息——展览主题。如果不设这块挡板，观众一进门就能看到里面的六个展区，注意力立刻被分散成六份，主题信息一个都进不去。
这和你做海报时”第一落点必须唯一”是同一条规则，只不过它用一面墙来实现。
第二步：观众看完灯箱，会寻找”往哪走”。这时候右边那个透光的开口起作用了。凭什么？光是空间里最强的牵引力，一个亮的开口意味着”那边有东西”。这是纯粹的生物性——人类趋光。
第三步：观众走进去，地面上的浅色灯带接管。凭什么？在深灰地面上，一条浅色的线是极强的边缘对比；而且它是连续的，符合格式塔连续性，眼睛（和脚）会本能地沿着它走。这是”指向性线条”在空间里的字面实现。
第四步：走到第一个展区，纱幔的半透明产生了”隐约可见”的效果——你能看到下一个展区有东西，但看不清。这个”看不清”极其重要：它是动线的燃料。 完全看不见，观众没有动力往前走；完全看清，观众觉得已经看完了，转身就走。半遮半露是空间动线里最有效的牵引手段，因为它制造的是”未完成”。
这个案例给你的启发：当你把设计的对象从”一张图”换成”一段路”，你会发现所有的牵引力都还在，只是尺度变了。这也反过来证明了它们不是”平面设计的技巧”，而是注意力的物理学。
心法
这一章的技术内容到此为止。现在讲点更根本的东西。
我想让你接受一个说法，它一开始会有点别扭，但想通了之后，你看所有设计的方式都会变：
你不是在安排元素，你是在安排时间。
你做设计的时候，手上的动作是”把这个放这里、把那个放那里”，你心里想的是空间。但观众拿到手的，不是空间，是一段零点几秒到几秒的时间。他不会同时看到你的画面，他只能在时间轴上，一个点一个点地采。
而且——这一点更关键——这段时间的长度不由你决定。 海报平均不到两秒，网页首屏不到十秒，货架上的商品半秒，PPT 一页三十秒（还得看你讲得快不快）。你是在一个长度不可控、且随时可能中断的时间窗口里，塞进一串有先后顺序的信息。
所以动线设计的本质，是一个调度问题，不是布局问题。
我给你一个你会立刻懂的类比。你的画面是一个任务队列，观众的眼睛是一个单核 CPU。它一次只能跑一个任务（一次注视只处理一个点），任务之间的切换有成本（扫视期间失明，切换后要重新聚焦、重建上下文）。你的工作不是”把任务摆在桌面上”，你的工作是给它们排优先级，并且尽量减少不必要的上下文切换。
这个类比能推导出三条你在别处很难看到的东西。
第一条：每一个多出来的元素，都在消耗主信息的中标概率。
你的画面里能容纳的元素数量，和主信息被看到的概率，是负相关的。不是线性，是接近指数——每加一个候选者，最重要的那个被第一个选中的概率就会下降一截。
所以”加个元素”这个动作的真实成本，从来不是”多占了一点地方”，是”稀释了所有其他元素的竞争力”。这就是为什么删减永远比添加更有效，也是为什么新手做减法难如登天——加法看得见成果，减法的成果是”什么都没多出来”，心理上不像在工作。
记住一句话：在一个注意力稀缺的系统里，沉默是一种贡献。 那些你忍住没放上去的东西，正在替主信息让路。
第二条：你不能控制时间，你只能控制概率。
这是个很硬的认识。设计师经常会说”我要让观众第一眼看到这个”。严格讲，你做不到。你只能做到”让这个成为最可能的下一个落点”。
区别在哪？区别在于前者让你产生一种虚假的确定感，你会觉得”我已经强调了，所以他会看到”；后者让你保持诚实，你会去测、去问、去验证。
而且概率这个视角会逼你做一件新手极不愿意做的事：量化地看待”强弱”。你不能只说”这个比那个重要”，你得问”这个比那个强多少”。强一点点是不够的——在概率的意义上，强 10% 几乎等于没强，因为现场有太多随机因素（观众的心情、环境光、他刚才在看什么）。经验法则是：相邻两级之间要有明显的、数量级的差距，比如面积差三到四倍，或者明度差半个灰阶以上。半吊子的层级比没有层级更糟，因为它制造了”有层级”的假象，实际上眼睛会在两者之间犹豫。
第三条：动线的失败，往往不是排版问题，是信息问题。
这一条是最重要的。
当你面对一张”怎么排都排不好”的图，通常的原因不是你不会排，是你手上的那堆信息本身没有优先级。你自己都说不出哪条最重要，画面当然排不出层级。
这时候正确的动作不是继续调排版，是停下来，回去搞清楚：这个东西给谁看？他看完之后要做什么？哪一条信息最可能促成那个”做什么”？
这就是”需求翻译”（第 28 章会专门讲）——把一句话的业务需求，翻译成一个可以被视觉化的优先级序列。设计的苦劳在排版上，功劳在排序上。
我再给你一个更深的角度。
动线不只是效率问题，它还是一种礼貌。
你想想你遇到过的那些让你疲惫的界面：一打开，满屏都在闪，你不知道该看哪，于是你硬着头皮扫一遍，扫完之后很累，什么也没记住。那种疲惫感是什么？是你被迫做了一次本该由设计师做的工作——你自己去搜索了重点。
好的动线是”看不见”的。观众不会意识到自己被引导了，他只觉得”哦，这个很清楚”。这个”很清楚”的感受，本质上是：有人替你把认知成本付掉了。
所以动线的好坏，最终不是美学判断，是伦理判断：你是在替观众省力气，还是在把你的犹豫转嫁给他？
最后，把这一章接回第 01 章。
第 01 章我们说，“怪怪的”是感受，要素才是答案。现在你手上有了一组新的要素：我的眼睛第一个落在哪？第二个呢？中间有没有断？有没有人在抢？有没有一个不该那么强的东西在当第一落点？
下次你觉得一张图”说不出哪里怪”的时候，先别急着调颜色调字号。先闭上眼睛，找到你自己的第一落点，然后往后再走三步。 大部分时候，你会走到一半就走不下去——那个走不下去的地方，就是”怪”的来源。
不是你的审美不行。是那条路没修通。
小结
这一章讲的是”控制”。
前四章拆的是硬件：眼睛怎么采样、大脑怎么补全、怎么分组、怎么分图底。这一章是第一次把硬件知识变成操作——既然注意力是稀缺的、跳跃的、懒惰的、并且随时可能离场的，那我就得给它修一条路。
核心结论有四条。
第一，观众看什么是概率，不是命令。 你能做的是调整每个位置被选中的概率，而最强的概率杠杆是局部对比——不是尺寸，不是颜色，更不是位置。“黄金位置”是所有手段里最弱的一个。
第二，阅读习惯是后天配置，不是硬件固件。 从左到右从上到下只对受过横排文字训练、且面对横向展开的页面的人有效。换个文字方向、换个媒介、换个距离，默认值就变了。而只要画面里有足够强的刺激，任何习惯都会立刻让位。
第三，那些经典模式（Z、F、古腾堡、中心放射、对角线）是统计描述，不是设计公式。 它们只在”画面内没有强牵引力”时才生效，而且它们描述不了停留时间和层级。把它们当模板套，是绝大多数”照着做了还是不好看”的根源。
第四，动线的失败有三种基本型：无重点（没有入口，观众根本没开始看）、多重点打架（多个第一等于没有第一，观众看完只记得热闹）、中途断掉（走完前两步就没路了，观众带着一半信息离场）。三者的修法不同，但都指向同一个动作——做减法，然后给减法之后剩下的东西排出明确的强弱梯度。
你带走的一句话：你以为你在排元素，其实你在排时间；你以为你在控制眼睛，其实你在调整概率。
而验证的方式不需要仪器：找个人看三秒，让他告诉你他记住了什么。他说的第一个词，就是你这张图真正的第一落点。如果那不是你想要的，别辩解，回去重排。
【阶段项目】
这是模块一的收尾项目。前面四章练的是”看见”，这一章练的是”控制”，这个项目要你把两者合起来用一次。
预计时间：2-5 小时。
项目：一张图的动线诊断与三版重排
第一步：选图（15 分钟）
找一张”你觉得说不出哪里怪”的图。可以是三种来源之一：
- 你自己过去做的东西（海报、PPT、活动图、朋友圈配图）
- 你工作里真实接触到的物料（公司内部的活动通知、培训封面、产品宣传单）
- 你在街上拍到的一张你觉得”看着累”的海报或招牌
要求：必须是信息完整的成品，不是纯装饰图。它得有”想传达的东西”，否则谈不上动线。
第二步：诊断（60-90 分钟）
对这张图做一次完整的动线体检，产出一份诊断报告。必须包含：
- 动线标注图：在原图上标出你的眼睛实际走过的路径，至少四个落点，用数字标出顺序，并在每个落点旁注明”凭什么”（明暗对比？人脸？孤立？指向？）。同时标出你觉得”本该是重点、但实际上没被走到”的元素。
- 三秒回忆测试结果：至少找三个人做测试，原样记录每个人说的第一个词和第二个词。不要美化、不要筛选，说”我不知道”也要记下来。
- 模糊测试记录：眯眼、缩略图、去色三种状态各拍一张或各描述一次你看到的结构。
- 失败类型判定：这张图属于”无重点""多重点打架""中途断掉""提前离场”中的哪一种或哪几种？给出证据，不要只给结论。
- 800 字以上的分析：把上面所有的证据串成一段话，回答”这张图的动线为什么失效”以及”它想传达的东西和实际传达的东西差在哪”。
第三步：三版重排（90-180 分钟）
同一个内容，做出三个动线策略真正不同的版本：
- 版本 A：图形主导。 用一个强视觉钩子做第一落点，用隐含的指向把它连向主信息。考验的是”钩子不是终点，是入口”。
- 版本 B：文字主导。 几乎不用图形，纯靠字号、明度、间距、对齐建立层级。考验的是”尺寸之外还有多少手段”。
- 版本 C：单一焦点。 全画面只保留一条主信息，其余信息要么删除、要么压缩到最弱。考验的是”敢不敢砍”。
每一版都要附一段 200 字以上的说明：这一版的动线是怎么走的（第一落点、第二落点、第三落点、终点），每一跳靠的是什么牵引力，以及这一版牺牲了什么。
第四步：交叉验证（30-45 分钟）
把三个版本混在一起，找两个没看过原图的人，每个版本做一次三秒回忆测试。记录：哪一版的”第一落点命中率”最高？哪一版的”信息记住率”最高？这两个答案不一定是同一个版本——注意这一点，它是这个项目的核心发现。
交付物清单
- 原图 + 动线标注图（1 张）
- 诊断报告（含三秒回忆原始记录、模糊测试记录、失败类型判定、800 字以上分析）
- 三个重排版本 + 每版 200 字以上策略说明
- 交叉验证结果 + 一页总结（不超过 500 字：这次诊断推翻了你原来的哪个判断？如果只能保留一版，你留哪一版，为什么？）
评分维度（每项 20 分，共 100 分）
1. 诊断的证据强度
不是”我觉得重点不突出”，而是”我用眯眼法看到整张图是一片中灰，三秒测试中三个人里有两个说的第一个词是背景里的装饰元素”。
满分标准：至少三种自查方法都用上了，有真实记录（不是脑补），失败类型判定有具体证据支撑，且能区分”这个元素重要但没被看到”和”这个元素不重要但太抢”。
2. 三版的差异度
满分标准：三个版本是三条不同策略，不是一个版式的三个微调。判断方法：把三个版本去色、缩到名片大小，如果它们看起来几乎一样，说明你只是在换颜色和字号，没有换动线。真正的差异应该在小尺寸下依然能看出”这三个的骨架完全不同”。
3. 牵引力使用的自觉性
满分标准：每一版的说明里，能清楚说出每一跳靠的是什么（明暗对比、人脸、孤立、指向、运动、文字），并且能解释”凭什么”。出现”这样比较好看""感觉这样更舒服”这类无理由表述的，该项扣分。
4. 牺牲的诚实度
满分标准：每一版都明确写”这一版牺牲了什么”。版本 C 如果还舍不得删信息、还在角落里塞了所有原始内容，说明你没理解”单一焦点”的意思。敢砍是这一项的核心，砍完之后画面还剩什么是次要的，你砍了什么才是重点。
5. 自查证据的真实性
满分标准：三秒回忆测试的原始记录（包括”我不知道”这种失败记录）、交叉验证的真实结果（包括”我最喜欢的那一版命中率最低”这种打脸结果）。如果记录里全是”被测者准确记住了主信息”，我会怀疑你没真的去做，或者在提问时做了引导。
一个提醒：这个项目最可能出现的结果是——你最喜欢的那一版，测试成绩最差。 这不代表你做错了，这恰恰是这个项目最有价值的产出。它会逼你去想：我喜欢的到底是”有效”还是”好看”？这个问题，会一直跟着你走完剩下的二十九章。
【思考题】
-
打开你手机里任何一个 App 的首页，用三秒闭眼回忆法测自己（或者更好，测别人）。你能记住的第一样东西是什么？它是不是这个 App 最想让你做的事？然后想一想：如果它是最想让你做的事，那它靠的是什么牵引力？如果不是，那设计师为什么允许一个更弱的东西占了第一落点——是失手，还是有别的考量（比如商业上的 Banner 位）？
-
找一张有人的广告图（杂志、地铁、电商详情页都行）。用手指挡住画面里的人脸，重新看这张图。你的第一落点变到了哪里？动线还走得通吗？然后思考：如果挡住脸之后动线就断了，说明这个设计对那张脸的依赖到了什么程度？这种依赖是好事还是隐患？
-
“从左到右从上到下”是后天习惯。你能不能设计一个小实验，用你身边的人（比如一个还没识字的孩子，或者一个习惯了从右往左阅读的人）验证这一点？如果不能做真人实验，你能不能从自己的生活里找到第二条证据？（提示：想想你翻看相册、看表格、看游戏界面时的顺序，它们都一样吗？）
-
F 型扫描模式在很多文章里被当成”好设计的特征”。但我在这一章说它是”用户没找到东西的证据”。你觉得这个说法成立吗？找一个你自己经常用的、你认为”设计得很好”的网页，观察你自己的眼睛：你走的是 F 型，还是”一个点然后一条线”？如果那个好网站你也走出了 F 型，说明什么？
-
这一章我说”位置是弱牵引力，对比是强牵引力”。请你在生活里找一个反例——一个”位置压倒了对比”的例子（比如某个东西明明不显眼，但因为放在某个位置，所有人都看到了）。找到了，说明这条规则有边界；找不到，说明它比较硬。两种结果都有价值，重要的是你真的去找了。
-
假设你要做一张 A4 竖版的海报，内容是一家咖啡店开业，需要传达四条信息：店名、开业日期、买一送一、地址。老板说四条都重要。你会怎么排？请具体说出：第一落点是什么、靠什么牵引力、落在画面哪个位置；然后第二、第三、第四落点分别是什么，它们之间用什么连接（对齐？邻近？指向线？）。最后说明：你牺牲了哪一条？
【参考答案】
-
这道题的目的不是让你评判那个 App，是让你建立一个习惯：先测，再判断。
大部分人做这个测试的结果是：记住的是那张最大的图。如果你测出来的是”记住了顶部的搜索框”或者”记住了某个功能入口”，那这个 App 的首页在你的使用习惯里已经高度熟练了——熟练会改变动线，因为你是带着目的打开的，你不是在”看”，你是在”找”。这本身就是一个重要发现：动线不是图的属性，是”图 × 观看者的状态”的属性。 同一个界面，一个想买东西的人和一个随便逛的人，走的路径完全不同。
至于”设计师为什么允许一个更弱的东西占了第一落点”——答案通常是商业结构，不是设计能力。顶部的 Banner 位是一块被售卖的广告资源，它的转化率是可以量化的，而”用户找不到品类入口”这个损失是难以量化的。当一个组织只能测量 A 而不能测量 B 的时候，A 一定会赢。
这不是在替设计师开脱，这是让你看清楚：很多”设计得不好”的界面，其实是”设计在两个目标之间被撕裂”的界面。 你要学会识别这种撕裂——当你看到一个明显违反视觉纪律的安排时，先别急着说设计师水平差，先问一句：这个位置是不是被别的东西（商业、法务、老板的个人偏好）占用了？能看出这一层，你就从”评判者”变成了”理解者”，而理解者才有谈判的筹码。
-
这个练习会让你非常直观地感受到人脸的霸权。
大部分有人的广告图，挡住脸之后动线立刻崩塌：第一落点会跑到”第二亮的东西”上去，而那个东西通常不是主信息。更常见的情况是——挡住脸之后，你会突然发现这张图根本就没有第二个强点。所有的视觉重量都压在那张脸上，其他元素（产品名、卖点、价格）都是中等对比的陪衬。
这种依赖意味着什么？意味着这个设计是脆弱的。
脆弱体现在三个地方。第一，不可复用：换一张脸（代言人换了、素材换季了），整张图的动线结构就没了，得重做。第二，不可缩放：这种图缩到手机屏幕上，人脸只有指甲盖大，牵引力大幅下降，动线失效——这就是为什么很多在杂志上成立的广告，投到手机信息流里点击率暴跌。第三，不可替换：如果有一天品牌想不用代言人（比如预算砍了），设计师会发现自己什么都没留下。
好的设计应该是”结构强、元素可换”的——动线靠的是明暗结构和位置关系，而不是某一个具体的元素。检验方法就是这一题的遮挡法：遮掉任何一个元素，动线如果都还能走通（哪怕走得没那么顺），这个结构是结实的；如果遮掉某一个就全崩，那它是脆的。
顺带说一句，这也是”解构式临摹”（第 33 章）的核心动作：不是抄那张脸，是抄那个结构。
-
真人实验如果做不了，生活里的证据其实到处都是，我给你几个方向，你可以自己去验证。
看相册的顺序。 你翻开手机相册，是一张一张看，还是先扫九宫格的缩略图？你会发现你的眼睛在缩略图阵上走的是”之”字形，而不是规整的 F 型或者 Z 型——因为缩略图是一个网格，网格打破横向扫描的连续性。
看表格的顺序。 你看一张 Excel 表，是从左上角开始读吗？大部分人不是。他们先看表头，然后看自己关心的那一列，然后往下走。这是”目的驱动”的动线，它完全不遵守任何默认模式。这说明了一件事：当观众带着明确目的时，模式和习惯全部失效，只有”和目标相关的特征”在起作用（比如他要找”价格”，那所有数字都会被优先扫到）。这对设计极其重要——你要知道你的观众带着什么目的来。
看游戏界面的顺序。 游戏 HUD（heads-up display，平视显示器，即叠在游戏画面上的那些血条、小地图、技能栏）的动线是经过极端优化的。你会发现血条永远在左上或顶部，小地图永远在右上，技能栏永远在底部中央。为什么？因为玩家在战斗中需要在不移动中央视野的前提下读取这些信息——他的中央凹必须锁在屏幕中心的敌人身上。所以游戏界面的动线设计原则是：所有信息必须在余光可读的范围内，并且用位置和形状做区分，而不是靠精细识别。 血条是长条、小地图是方块、技能是圆形——形状不同，余光就能区分。
这三个例子说明同一件事：“习惯”只是众多决定因素中最弱的一个，且只在观众没有目的、画面没有强刺激、媒介又恰好匹配的时候才起作用。
-
我认为这个说法成立，而且它是一个被严重误用的概念。
要理解这一点，你得先问：F 型是怎么被观察到的？研究者让用户去完成一些任务（找信息、读文章），然后记录他们的眼动。用户面对一屏从未见过的文字，他的策略是什么？是低成本地判断”这里有没有我要的东西”。所以他会扫最上面一行（标题通常在那里），扫下来一点（副标题、第一段开头），然后沿着左边缘往下找——因为每段开头是信息密度最高的地方。
这个行为的本质是搜索，而搜索的前提是没有明确的入口。如果页面做得好，用户一进来就看到了那个”一眼就知道是不是我要的”的东西，他就不需要搜索，他会直接进入阅读模式——这时候的路径是一个点加一条线。
所以：F 型明显 = 页面没有提供明确入口 = 用户在自己找。 这是失败的信号。
但这里有一个重要的补充，否则你会误伤。在很多真实的网页上，F 型是不可避免的，甚至是应该被接纳的——因为用户的需求是多样的。一个新闻站的首页，有一百条新闻，有的用户想看科技，有的想看体育。你不可能给每个人一个”一眼命中”的入口。这时候正确的设计目标是：让 F 型扫过的那条路径上，布满有效的判断依据。 也就是说，你承认用户会搜索，然后把标题写得足够清楚，让他在扫的过程中能快速判断”这条要不要”。
所以 F 型的正确用法是两条，缺一不可：
- 如果你的页面有明确的主任务（比如”注册""下单”），不要满足于 F 型，要做出明确入口。
- 如果你的页面是信息聚合（列表、门户、搜索结果），接受 F 型，然后把精力放在”让扫过的每一处都有判断价值”上。
你自己在那个”设计得很好”的网站上走出 F 型，通常说明它属于第二类——它是个聚合页，F 型是被允许的。但如果那是一个只有三屏内容的落地页，你还走出 F 型，那它就没做好。
-
这道题我期待你找到的例子，其实都指向同一个真相：位置之所以强，不是因为位置本身，是因为位置背后站着”身体的习惯”和”物理的必然”。
几个典型的反例：
手机底部的导航栏。 它通常一点都不显眼——灰色小图标、小字、无对比。但你每次都能第一时间”找到”它。凭的不是视觉牵引力，是肌肉记忆和拇指的物理位置。你的手知道它在哪，眼睛只是跟着手走。
电梯里的楼层按钮。 它不大、不亮、不对比，但你进电梯的第一眼就会看向它。凭的是”我必须按楼层”这个强烈的行为目的。这印证了第 3 题的发现：目的驱动的动线不遵守视觉规则。
网页右上角的登录入口。 它常常是很小的灰色文字，但它被所有人找到。凭的是”全世界的网站都把它放在那儿”这个跨网站的强一致性——这是一种跨界面的、被反复训练的位置习惯，它的强度远超单张图内的位置优势。
门把手。 它极小，但你的眼睛和手会同时奔向它。凭的是功能必然性。
所以这条规则的边界是：在”观众没有行为目的、没有肌肉记忆、没有跨界面一致性”的纯观看场景里（海报、照片、插画、包装），对比压倒位置；一旦牵涉到”要操作”或”要找某个已知功能”，位置和习惯立刻翻盘。
这就是为什么界面设计和平面设计是两套逻辑。界面上，一致性和位置习惯的价值极高（因为用户在操作）；海报上，视觉冲击的价值极高（因为用户在被打动）。用平面设计的思维做界面，你会做出一个”好看但找不到按钮”的东西；用界面设计的思维做海报，你会做出一个”清楚但没人想看”的东西。
-
这道题没有标准答案，但有一个标准过程。我先说过程，再给一个参考方案。
过程：四步。
第一步，确认目标。这张海报贴在哪？贴在店门口，那它是给路过的人看的，目标是”让他推门进来”；贴在街区公告栏，目标是”让他记住这家店和开业日期”。目标不同，主信息就不同。这一步必须做，否则后面全是空中楼阁。
第二步，排序。老板说四条都重要，这是他的话，不是事实。你要替他翻译成排序。判断标准是”哪一条最能促成目标”。如果目标是”推门进来”，那”买一送一”第一（它是行动理由），“店名”第二（他得记住是哪一家），“日期”第三（今天开不开业决定他现在进不进），“地址”最后（他已经站在门口了，或者他可以用手机搜，地址是给不在现场的人看的）。
第三步，分配手段。第一用”高对比 + 大”（买一送一，做成一个强色块上的大白字）；第二用”位置 + 重复”（店名放上方，而且在色块里再出现一次）；第三用”字号 + 邻近”（日期紧贴在买一送一的正下方，被带着走）；第四用”最小 + 底部”（地址，小字，放在最下面）。四个不同的维度，避免在同一个维度上竞争。
第四步，连接。让”买一送一”和”日期”上下对齐并紧邻（邻近性 + 对齐），让色块的形状形成一个向下的指向（比如一个下宽上窄的梯形，或者一个箭头状的色块边缘），把视线从主信息送到日期。地址放底部，作为动线的终点。
牺牲：地址。它就是那个要被牺牲的。它小、它灰、它在最下面。老板可能会抗议，你要给他的回答是：“站在店门口的人不需要地址，需要地址的人会拍照或者搜手机。你把地址放大，就是让路过的人先看到地址——而他已经在门口了。”
一个参考方案（假设贴店门口，A4 竖版）：
- 画面上半部分是一张咖啡的俯拍照片，压暗、去一部分饱和，作为背景氛围。
- 画面中央略偏上，一块高饱和的暖橙色块（横向贯通），上面是白色大字”买一送一”，字号占色块高度的百分之六十。这是第一落点，靠的是”明暗对比 + 唯一的高饱和 + 边缘密度突变（照片的细腻对色块的平）”。
- 色块正下方一厘米，一行深灰中等字号”9 月 12 日 - 9 月 14 日”。靠邻近和对齐被带着走。这是第二落点。
- 画面顶部，店名，白色，中等字号，位于色块上方——它会被”回溯”到（观众看完买一送一之后会往上找”这是哪家店”）。这是第三落点。
- 画面最底部，地址，小字，深灰，压在照片的暗部上。这是终点。
这个方案的动线是：色块 → 日期 → 店名（回溯）→ 地址（扫尾）。 它有一个刻意的安排——店名不在第一落点。这是允许的，因为在这个场景里（店门口），“店名”这个问题的答案是”你抬头看看门头就知道了”，海报不需要替门头干活。
如果你把它贴到三公里外的社区公告栏，这个方案就错了。 那时候店名必须成为第一落点，因为路人不知道这是谁。同一份内容，同一个设计，换个位置就得重排——这就是”场景决定层级”，是需求翻译的第一步，也是这一章最难教、但你必须自己会的东西。
【动手练习】
-
三秒测试：给五个界面做体检（30 分钟）
找五个你常用的界面（App 首页、网页、小程序都行），每个做一次三秒闭眼回忆测试（测别人更好，至少测两个）。记录你/他说的第一个词。
然后回答：这五个界面里，有几个的”第一落点”和”这个界面最想让你做的事”是重合的？
自评标准：合格的记录必须包含”我以为的第一落点”和”实际的第一落点”两栏，并且至少有一个是不重合的。如果你测了五个全部重合，有两种可能——要么你找的五个都是极其成熟的商业产品（有可能），要么你在回忆的时候不自觉地”修正”了自己的记忆（更有可能）。区分方法是：测别人的时候，让他在看到的第一瞬间就出声说，不要给他回忆的时间。
-
遮挡诊断：找出你作品里的”白占位置”元素（45 分钟）
拿一张你自己做过或正在做的图，逐个遮挡每一个元素（用色块盖住），每遮一个就重新问自己：动线变了吗？
分成三类记录下来：
- 遮掉之后动线完全变了 → 关键元素，必须保留
- 遮掉之后动线基本没变 → 白占位置，可以删
- 遮掉之后动线反而更顺了 → 干扰元素，必须删
自评标准：一个合格的诊断报告，通常会在第三类里找到至少一个元素。如果第三类是空的，说明你还没敢对自己下手，再遮一遍，这次遮完之后强迫自己”不把它放回去”看三十秒。另外注意：很多人的第一反应是”这个元素是甲方要求放的”——如果是这样，把它记下来，这就是你下次和需求方谈判时的论据（“遮掉它之后测试成绩更好”，这比”我觉得不好看”有说服力得多）。
-
同一内容三版动线：20 分钟一版的极速训练（60 分钟）
找一条简单的内容（比如一句话的通知、一个活动的四条信息），给自己二十分钟做一个版本，做三个版本，每版必须采用不同的第一落点策略：
- A 版：用孤立做第一落点（一个元素周围全空）
- B 版：用明暗对比做第一落点（一个深色块或亮色块）
- C 版：用指向做第一落点（一个图形或线条把视线送到主信息）
三版都不许改字号超过两级——强迫自己用字号以外的手段建立层级。
自评标准：把三个版本去色、缩到名片大小，如果三版看起来还是”同一个版式”，说明你只是移动了元素，没有换策略。真正的区别在于：A 版应该有一大片明显的空，B 版应该有一块明显的重色，C 版应该有一条明显的方向线。三版的特征在小尺寸下必须截然不同，否则重做。