第16章分心状态的设计：噪声与信息污染中的按钮和LED

首屏不能为全神贯注的人而设计。我们无法选择用户会在哪里打开它，而且打开它的人中，有相当一部分已经分出一半心思去做别的事。上一章费尽心力做得清楚明确的世界回答，如果接收的人只看了一半，也只能传到一半。

我们制作画面时，总是假设看到画面的人也像我们一样，只看这一个画面。

想象策划者审视首屏的时刻。他坐在安静的办公室里，面对大显示器，两只手都空着，脑中只有这个画面。他花上几个小时反复观看，调整按钮位置，挑选字号。问题在于，真正会遇见这个画面的人并不在那间办公室。他在颠簸的公交车里，一只手抓着扶手，另一只手的拇指操作画面；在邻座的通话声与车站播报之间，他还要留意自己该在哪一站下车。制作方在专注的尽头看画面，使用者却在分心的正中央看画面。

本章从这种错位开始。设计初次体验时，最常被铺在底下的错误前提是“用户正在专注于画面”，于是几乎所有画面都为坐在安静房间里的人而画。可我们想吸引的普通人，是在一站地铁的时间、等待电梯的短暂空隙里偶然进来的人。对他来说，我们的游戏与YouTube、短视频排在同一列竞争，而且竞争发生在他只看一半的时候。为专注的人制作画面，就会错过真正遇见这个画面的分心者。

当然，并非每一次首次启动都发生在公交车上。也确实有人会在睡前的床上等相当专注的场合第一次打开它。但我们无法选择用户会在哪里打开，因此设计只能适应最糟糕的条件。至少对于首屏与第一次会话而言，这样做不会让任何一方受损。能让分心者通过的画面，也能让专注者通过；只能让专注者通过的画面，却会把分心者淘汰。这种只向一侧倾斜的不对称性，使“把分心当作默认状态”成为推论，而不是武断。削低人行道台阶形成的坡道，本来是为轮椅设计的，却也帮助了推婴儿车和拖行李箱的人。同样，为最困难条件设计的东西，也会让其他所有人感到便利。

这种不对称性成立的范围，是在首屏让核心行动显现出来。它不意味着连熟练者需要的详细信息也必须删除。先展示核心，需要时再展开细节，就能同时承接分心者与熟练者的需求。

同一个画面，在安静房间与喧闹公交车里

让我们进入一款虚构的角色游戏。它是一款收集角色、与角色交谈、观看短视频的手机游戏。首屏上，用户先从动物中选择一只作为第一个角色，再调整它的颜色和花纹。在安静的房间里看，这个画面毫无问题。六只候选动物排成一列，上方用小圆点显示进度，一角安静地放着帮助问号与设置齿轮。只要平静地看，全部都能读懂。

把同一个画面搬到颠簸的公交车上。现在只能用一个拇指触碰，眼睛极短地看一眼画面，又转向窗外，再回到画面。六只候选动物不再能一眼看全，也分不清目前选中的是哪只；进度圆点小得几乎看不见。“下一步”按钮位于画面上方一角，抓着扶手的那只手无法让拇指够到。选错了颜色，却不知道按哪里才能退回。他勉强坚持片刻，随后关闭应用。不是因为画面不好，而是因为喧闹公交车里的人遇见了为安静房间里的人画出的画面。

在MEJE IDONG WORLD里，这种分心更加严重。照顾小狗IDONG的粉丝也不总是安静从容，不是会坐着只看画面的存在。通知会来，他会在不同应用间切换，手指还会随意点来点去。即使如此，“现在按这里”也必须清清楚楚地发亮。粉丝走神后回来，画面不能让他再次问“刚才在做什么来着？”如果画面对分心的粉丝沉着地只指向一件事，他就会按下那一件事，继续下一步。因此，IDONG WORLD的首次会话画面会锁住右上角的菜单与所有通知徽标，只让位于下方中央、拇指可及的抚摸IDONG按钮发光。粉丝从其他应用回来时，画面会从最后触碰的位置重新打开；IDONG先抬起头，用动作指向刚才正在做的事情。

为分心者准备的三件事：现在按什么、现在是什么状态、现在有什么问题

把分心状态作为默认值后，首屏必须负责的事情便缩小为三项：现在按什么，现在是什么状态，现在有什么问题。这三项一眼可见，分心者也能通过；只要其中一项需要翻找画面才能知道，人就会在那里流失。换成第11章的语言就是：同一个画面，会向分心者收取双倍费用。停下来选择该按什么、判断进行到哪里、反复琢磨错误信息，全部都是费用；分心状态，正是支付这些费用的余额最薄的状态。

第一，现在要按的东西必须发光。画面上即使有十个可以按的东西，此时真正该按的通常只有一个。若这一个与其余九个拥有同样的视觉重量，分心者会为了选择该按什么而停下。选择越多，决定越慢，这是早已为人所知的事实；在分心状态下，这种迟缓会直接变成离开。让现在该按的那一个最大、最亮，并放在拇指能够触及的位置。人能更快、更准确地按下大而近的目标，也是早已为人所知的事实。对于在颠簸公交车上单手使用的人，画面上方角落里的小按钮，实际上就是不存在的按钮。

第二，现在的状态必须一眼可见。用户走神后回来时，画面应该不等人询问就主动说：“你现在在这里，已经做到了这里，下一步是这个。”如果进度只以三个很小的点表示，回来的人就必须重新判断自己进行到哪里，而这种判断就是费用。不要用微小的声音低语状态，要把状态大大地展示出来。现在选中了什么、是否已经保存、下一步是什么，都必须能用余光读懂。

机器很早以前就用LED完成这项工作。路由器或洗衣机正面的小灯，不用一个字，就能用一种颜色传达它是否已开启、是否正在运行、是否出现问题；人从旁边经过，只需用余光看一眼便能读懂。即使在能够用文字填满整个画面的时代，机器仍坚持使用一盏灯，理由很清楚：看这盏灯的人并不会停在机器前。首屏的状态显示应该学习的榜样，正是这盏LED。与其先把三个进度点稍微放大，不如先让整个画面像指示灯一样，一眼释放出一种状态。

第三，现在的问题必须可见。某件事出错时，用户不会停下来仔细阅读，因此问题必须用用户的语言一眼显现。想想汽车仪表盘。据说，仪表盘的警告灯通常分两级说话。提示检查发动机的琥珀色灯意味着“近期请检查”，油压或冷却液等红灯亮起，则意味着“现在就停车”。无论哪一种，驾驶者都不会去读“氧传感器电压偏离基准”这样的说明。他既没有时间，也没有必要；一种颜色就能立即传达问题存在以及紧急程度。首屏的错误提示也应如此。对分心者来说，比起用灰色长文解释什么出了错、为什么出错、如何出错，一个清晰信号直接指出问题在哪里更有效。像仪表盘的两级提示一样，以颜色和视觉重量区分必须立即停止的问题与可以稍后再看的问题，则更好。说明写给已经停下的人，信号写给正在经过的人。

这句话不该只作为格言读过便算，而可以直接当作工具。强制把首屏上的所有文字分成两类之一：它是路过的人用余光接收的信号，还是停下来的人必须阅读的说明？被归为说明的句子，应当移到愿意为了阅读而停下来的人会到达的位置；首屏则以说明为零为目标。这听起来或许过于激进，可只要数一数自己画面上的文字，就会首先看见有多少说明被误以为是信号而放了进去。

贯穿这三项的原则，是使用用户的词汇说话。画面上的所有文字，都应当属于阅读者，而不是制作方。“同步失败”是制作方的话，“没能保存。要再试一次吗？”是使用者的话。在分心状态下，需要再想一遍才能明白的话不会被读到；只有余光一扫便让意义落下的话能够存活。

玩家的信息，普通人的噪声：小地图与塞满的HUD

既然本章讨论分心状态，就把一种游戏惯例带到检查站：把画面边缘填得不留空隙的习惯。小地图、任务标记、密密麻麻的HUD，还有四处贴着的红色通知徽标。先说明，本书对“一次太多”的盘问会出现三次。本章关注的是阅读噪声；一次承担太多任务的过载，留到第19章；一次预先收取冗长说明的费用，则由第21章另行讨论。

先看看这种惯例把什么视为理所当然。游戏画面的四个角通常塞满信息：左上角是生命值与资源，右上角是小地图，画面四处有任务标记与指向下个目标的箭头，每个菜单图标上还有表示新消息的红点。这种密度建立在一个前提上：玩家能够、也愿意在同一个画面上同时读取大量信息。这个前提从动作与策略游戏的漫长传统中成长起来。对于信息越多越能驾驭的人，空白画面反而是信息不足的画面。

普通人并不共享这个前提。小地图对玩家是辨认道路的地图，对初来者却是画面角落里闪烁的不明图案。任务标记对玩家是“往那里走”的友善指引，对普通人却是散落在画面各处、身份不明的感叹号。红色通知徽标对玩家是“有新消息要确认”的信号，但对长期被其他应用的红点折磨的人，却像又一封催债通知。同一个元素，对一方是信息，对另一方是噪声；在分心状态下，所有不会阅读的信息都会堆积成噪声。

这种密度已经过头的抱怨，在玩家之间也流传已久。据说，一个大型开放世界系列因打开地图后数十个图标覆盖画面而出名；再加上不断闪烁的小地图与罗盘，人们甚至说真正的世界反而被放到了次要位置。一度还有粉丝合成图流传，故意用图标铺满原本空白的画面，讽刺这种习惯。这意味着，填满画面的惯性即使在游戏界内部也已经成了笑料。如果连玩家都觉得太密，那么对一个连阅读方法都不知道、在颠簸公交车里遇见它的普通人，就更不必多说。

这种惯例向普通人收取的费用，是信息过载。分心者本来就只把一半注意力放在画面上，而十来个既不会读、此刻也不需要的元素，又分走这半份注意力，于是真正现在该按的那一个被埋进噪声。画面塞满并不意味着内容丰富，而意味着人已经找不到此刻最重要的一项。玩家习惯穿过这种密度，挑出自己需要的信息；对普通人来说，挑选这个动作本身就是费用。

保留本质，再改变形式。首屏先清空边缘。小地图、标记和徽标，只在能够把它们读成信息的人已经到来，并开始寻找它们的那个时刻，才逐个开启。初来者的首屏只有现在该按的一项、现在的一个状态，以及出现问题时的一个问题。除此之外全部关闭。需要指路时，不用小地图，而在画面正中央的世界中直接展示目的地；有新消息时，不贴红点，而在用户喘过一口气后，再说一次。留白不是夺走信息，而是把分心者只有一半的注意力集中到此刻最重要的一件事上。那些因为担心画面显得空闲而填进去的东西，其实一直在把人赶走。

▶ 套用到我的画面的三个问题

这个画面在单手操作、晃动与噪声中仍然读得懂吗？

最重要的一件事，在分心时仍然看得见吗？

关闭声音后，信息仍能传达吗？只要三项中有一项受阻，这个画面就只能让坐在安静房间里的人通过。

所以，画画面之前，先画出那个人站立的位置

把分心状态作为默认值后，绘制首屏的顺序会改变。不要先画完画面再问“这里还能加什么”，而要先画出遇见这个画面的人站在哪里。他在哪里？有几只手是空的？听得见声音吗？视线会停留几秒？一旦确定这个位置，画面必须负责的三件事——现在按什么、现在是什么状态、现在有什么问题——自然会缩小范围，其余内容全部推迟或关闭。

这个决定是否正确，要回到仪表盘确认。起点是观察打开首屏的人中有多少能到达第一个按钮，那些犹豫后离开的人在哪里停下。不过，只看这一个比例，它仍只是一般的流失指标，并不能测量“分心”这个假设本身。要测量假设，就要按时间段与会话情境拆开同一个画面。比较通勤时间的首次启动与睡前的首次启动，是卡在同一位置，还是卡在不同位置；观察离开应用后回来的人，是立即继续原来的事情，还是从头重新迷路。如果只有分心时段特别容易流失，回来的人也会迷路，就是画面没有让现在该按的东西足够发亮，或没有把状态显示得足够大的信号。一个在安静房间里由我们自己观看时毫无问题的画面，会在晃动的手中在哪里受阻，数字会照亮答案。因此，首屏测试不该在大显示器前进行，而应当一只手拿着手机，边走边试。

参考内容

其他媒介中能够显现本章概念的案例。

电子游戏

《刺客信条》与《孤岛惊魂》的登塔与填问号：爬上高塔，周围地图随即打开，几十个相同活动图标一次铺开。玩家不再观看世界，只忙着从地图上消除问号。密度过高的批评积累已久，据说《刺客信条：影》取消了密集的活动图标，改为让玩家亲自探索有什么。
《艾尔登法环》的金色指引：它不用小地图填满画面角落，而是让金色光束从赐福点向下一步该去的方向延伸，在画面中央的世界里直接指出下一步。它经常被视为清空边缘的反面案例。
《死亡空间》刻在背上的生命条：不在画面上单独显示生命数字或进度条，而以主人公护甲脊柱上发光的一条灯显示状态。余量充足时为蓝色，低于一半时为黄色，接近死亡时红灯闪烁，即使用余光也能读懂当前状态。 机械装置 / 家电UX
汽车仪表盘的警告灯：不解释氧传感器电压如何，只用颜色说话。据称，琥珀色检查灯表示“近期请检查”，油压或冷却液的红灯表示“现在就停车”。连紧急程度也用一种颜色区分，是两级信号。
家电状态指示灯（电源、运行、错误）：用一种灯光颜色，让人用余光就能读懂它现在是否开启、是否正在运行、是否出了问题。

其余参考内容汇集在本文末尾的“第16章附录”中（单行本中编为附录D）。

设计笔记 ▶ 亲自实践

在手机上打开我们游戏的首屏。然后从座位上站起来，只用一只手拿着手机，边在房间里走动边使用这个画面。如果可以，在旁边播放音乐或视频。

边走边大声确认三件事。我现在该按什么，是否一眼可见？我进行到了哪里，是否用余光就能知道？如果按错了什么，是否一眼能看见哪里错了，而且使用的是用户的语言？

只要有一项需要停下来翻找画面，就把那个位置记下。分心者会在那里流失。逐一给画面边缘的东西打叉：初来者此刻不会读的，或此刻并不需要的。首屏关闭被打叉的内容，推迟到能把它当作信息阅读的人到来。精密检查将在附录B的体验费用表和附录A的惯例拆解检查表中继续展开。

在大显示器前看起来毫无问题的画面，要放到晃动的手中重新测试。只有单手拿着、边走边也能通过的画面，才能让分心者通过。

一句话总结：用户不是安静地专注着，而是身处分心与噪声的正中央。首屏必须为这个分心者一眼展示三件事，并使用用户的语言：现在按什么、现在是什么状态、现在有什么问题。对玩家是信息的小地图、标记、塞满的HUD、通知徽标，对初来者却是噪声。清空首屏边缘，把注意力集中到此刻最重要的一项。 下一章：分心者一定会按错某个东西。画面在那一刻如何回答，既可能留住他，也可能把他赶走。下一章观察犯错的瞬间。失败是必须阻止的敌人，还是乐趣的一部分？又该如何不从犯错者手中夺走控制感？

第16章附录：参考内容汇编

这里收集的参考案例，展示了本章“用户会在分心的正中央遇见画面”这一前提，如何在多种媒介与机器中得到处理。案例按媒介分为电子游戏、广播、印刷品、现实指引系统等小标题，每项末尾都附有“观察要点”。把正文建立的两项区分放在心中：路过的人用余光接收的信号，与停下来的人阅读的说明之间的区分；以及为最糟糕条件设计的东西会帮助其余所有人的不对称性。这样就能看见，每个案例留下了什么作为信号，又把什么推迟为说明。如果同时判断每种装置承担了“现在按什么、现在是什么状态、现在有什么问题”三项责任中的哪一项，阅读效果会更好。

电子游戏

拓麻歌子的呼叫声与注意图标：这种20世纪90年代中期推出的便携养成设备，在角色饥饿或需要照顾时，会响起短促呼叫声，画面一角只亮起一个注意图标。它不长篇解释需要什么、为什么需要，只用一个信号传达“现在看看我”。正在分心做其他事的人，也会因这一个信号回来。观察要点：信号一路追到口袋中，只负责呼唤；说明则等人取出设备、仔细查看后才出现。观察信号与说明的分工如何完整地实现在一台设备上。
MMORPG塞满的HUD与红色通知徽标：对玩家是信息，对初来者却是不会阅读的噪声一次堆积起来的画面。观察要点：观察同一个画面如何对知道阅读方法的人是信息，对不知道的人是噪声。它可以训练我们用尚未学会阅读的眼睛重新观看自己的画面。
Candy Crush简单的首屏：现在该按的一项大大地发光，即使走神后回来，也能马上看出该做什么。观察要点：把它视为“现在按什么”发亮的典型画面。回来的人能否毫不犹豫地走向下一个动作，就是这项设计的成绩单。
《风之旅人》（2012）没有HUD的画面：没有生命数字、地图、分数，只用角色围巾的长度与闪光表示还能飞行多久。观察要点：把它视为将状态显示从画面边缘的仪表移到世界内物体的案例。它与正文的LED故事属于同一种思路：让整个画面像指示灯一样释放一种状态。

真人电影

动作电影令人眼花缭乱的快速剪辑：同时展示太多东西，观众反而会错过真正重要的一个镜头。观察要点：观察信息量增加，传达量却减少的悖论。优秀的动作片反而会在最重要的动作之前清理画面，把视线集中到一点。

真人电视 / 电视剧

新闻画面密集的字幕条与突发新闻栏：信息填得越满，用余光看的人越难发现此刻最重要的一行。观察要点：陷阱在于，从频道角度看每条都是重要信息。发送方的重要程度与接收方的注意力，以不同单位运作。
购物频道铺满价格、字幕与电话号码的画面：也有节目会为了分心观看的观众，只把一个购买理由大大展示出来。观察要点：把它视为面对同一个分心观众，铺满与留白两种策略分道扬镳的现场。可以比较哪一种更准确地预设了观众状态。
体育直播的常驻比分栏：画面角落始终显示比分、时间或局数，使中途开始观看的人也能用余光一瞥便跟上状况。据称，这种常驻画面的比分显示在20世纪90年代的转播中确立。观察要点：把它视为无需询问就主动说明“现在是什么状态”的装置原型。无论何时加入都能跟上，与接纳走神后返回用户的画面做着同一件事。

漫画

漫画的集中线：在一个格子中把线条汇聚向一点，把读者的视线拉到现在该看的地方。它不把整格画得同样重要，而只把视线集中到最重要的一点，是纸上的聚光灯。观察要点：观察“要让一个东西发亮，就必须压低其他东西”这一原则在纸上也相同。所有元素重量相同的格子里，没有集中线的位置。

音乐

商店与机场的背景音乐和广播：这是人只听一半的环境，因此真正重要的提示只用一个短促信号音和一句话分开传达。观察要点：观察以只听一半的人为前提，把结构缩减为一个信号音和一句话。关键在于，提示越重要，不是越长，而是越短。

戏剧 / 剧场

舞台灯光的聚光灯：它不照亮整个舞台，只把光集中在此刻应该观看的一名演员身上，引导观众视线。观察要点：观察照亮与保持黑暗是一组动作。首屏决定关闭什么，就是这个画面的灯光设计。

实体街机

游戏厅的大按钮与闪烁的“INSERT COIN”：即使在喧闹、眼花缭乱的地方，也让现在要做的一件事大大地发光。观察要点：观察在噪声与竞争最恶劣的环境中锻炼出来的信号尺寸、闪烁和位置。想象把安静办公室里画的画面放到游戏厅正中央，是一种很好的检查。

现实工作流程

飞机客舱的紧急出口指示灯与象形图：它为慌乱的人不用文字，只以一个图形信号指出现在该去哪里。观察要点：观察为“慌乱”这一最严重分心状态设计的东西，如何在平时也能被所有人读懂。坡道原则在安全设计中早已是常识。
医院与机场的彩色动线指引：它不解释完整的复杂路线，只让人沿着地面一条彩色线走，从而不再迷路。观察要点：观察不让人记住整张地图，而是接连给出下一步的方法。它不是减少说明，而是彻底删除说明，只留下信号。
地铁线路图从点到点：它抛弃真实地形，只保留直线与彩色线，让人从当前位置的点到目的地点，只需沿一种颜色前进。据称，这种方式始于20世纪30年代伦敦地铁的图解式线路图。观察要点：观察舍弃精确地形信息的决定，并不是夺走信息，而是集中注意力。只有决定舍弃什么，信号才能相应变得清楚。

一般应用

汽车导航的下一步提示：它不显示完整路线，只大大展示“下一处右转”，使人驾车时也能读懂。观察要点：观察“系统知道什么”与“现在该展示什么”不同的克制。掌握完整路线的系统，只对驾驶者说下一步。
提供单手模式与底部大按钮的应用：在晃动的地方，把现在要按的东西放在拇指可及的位置，不让上方角落的按钮变成不存在的按钮。观察要点：用双手确认正文那句“够不到的按钮事实上不存在”。单手拿着手机，逐一按下自己画面中的按钮即可。
Google搜索空白的首屏：白色背景中央只放一个搜索框，即使初来者也能一眼知道现在该做什么。周围的留白不是空着，而是把视线集中到这一项的装置。观察要点：观察留白本身就是功能。它可以作为范例，测试我们能多大程度克制“怕画面显得空，所以想填东西”的冲动。
改写成人话的错误画面：越来越多地方不再使用“Error 404”之类代码，而会写成“找不到你要的页面。要回到首页吗？”制作方的话需要再想一次，使用者的话却能用余光一下理解。观察要点：用正文区分信号与说明的标准重新阅读句子。余光一扫就明白的是信号，需要反复琢磨的是说明。
外卖与打车应用的一行状态显示：只大大展示当前阶段，例如“正在制作”“司机正在赶来”，详细内容折叠起来，点击后才显示。观察要点：把它视为直接预设用户“用余光确认后继续做别的事”这一模式的状态显示。用户不会一直守在画面前的假设，已经落实到句子层面。
视频应用的继续观看：之前观看的作品出现在第一行，从停止的场景继续播放。观察要点：把它视为不让走神后回来的人再问“刚才在做什么”的装置。回来的人是立即继续，还是从头重新迷路，就是正文建议的指标。

机械装置 / 家电UX

飞机驾驶舱的主警戒灯与主警告灯：无论哪个系统出问题，位于飞行员视线内的大灯都会先传达“现在要看”。据称，这种双灯结构通常由红色主警告灯负责必须立即应对的事情，琥珀色主警戒灯负责需要检查的事情。具体哪个部件为什么出现什么问题，要到下一块面板查看；第一信号只有颜色与闪烁。观察要点：观察先吸引注意力、再把内容交给下一阶段的两级分工。反过来也能推测，如果第一信号试图连说明也一并承担，会有什么东西崩溃。
iPhone的静音开关：它长期以来一直是侧面的实体开关，因此无需点亮画面，只用指尖触摸开关上下位置，就能知道是否静音；稍微一看，也能通过露出的橙色一眼确认。最近的机型改成了按压按钮。观察要点：观察让人通过触觉与余光两个渠道读取同一种状态的设计。“连点亮画面也是费用”的感觉，已经刻在硬件里。
智能手表导航中左右不同的振动：据称，腕上设备的导航会为左转与右转发出不同振动模式，使人不看画面也能知道该转向哪边。观察要点：把它视为在眼睛被道路占据的最糟条件下，把信号渠道转移到触觉的设计。信号可以更换感官，避开最忙碌感官传达的信号才能存活。
电饭煲与洗衣机的完成旋律：煮饭或洗衣完成后，旋律响起，使在另一个房间做别的事的人也能收到“已经结束”的事实。观察要点：把它视为完全接受“用户不在设备前”这一前提的设计。这是正文所说“人并不只看那个画面”的家电版本。

第16章 分心状态的设计：噪声与信息污染中的按钮和LED