还记得在微信群里准备抢红包时的情形吗？

你紧握手机，瞪大眼睛，死盯屏幕，屏住呼吸，手指悬停在对话输入框靠上的位置，随时准备点击屏幕。

这时候，群里有人恶作剧，发出了一张假冒红包的图片。你飞速运转的视觉感知系统早已经上报了这一激动人心的发现，几乎在图片发出的同时就点击了屏幕，然后发现：上当了。就在你感到意外、恼怒、沮丧的时候，屏幕下方又滑出来一个🧧——这回是真的红包。当你回过神来，再猛然敲击屏幕，却看到红包已经抢完的提示。这时候你紧绷的神经才放松下来，悻悻地离开了群聊。

我们越是理解「视而不见」的现象有多普遍，就越会惊讶于抢红包这个场景有多么异乎寻常：人们全神贯注地「看」，然后电光火石般地「行动」。看见的背后，是复杂的视觉系统在高速运作；那么行动的背后，也不只是轻触屏幕这么简单。

在接下来的几篇文章，我们把焦点放在行动的微观/瞬时层面，主要关注人与系统互动时的反应和动作（response & action），而不是长期的行为（behavior）。

人脑如电脑？

如果你亲自购买过台式机或者笔记本电脑，可能会对电脑硬件有所了解。在选购新电脑时，我们最关心的参数无非是 CPU、内存、硬盘、屏幕尺寸，所有厂家或电商平台都会优先展示这几个参数。

你可能跟我一样，每隔一段时间，就会觉得自己的电脑运行速度好像变慢了。然后看到这些电脑又推出了新的型号，不是升级了 CPU，就是换了更好的屏幕，而内存和存储设备的容量也水涨船高。这时候不免会闪过一个念头：要不要换新电脑呢？

电脑硬件每年都推陈出新，我们也许对各种参数都了如指掌，却没有意识到，自己身上也有一个类似电脑的系统——大脑。可是它无法更换硬件，绝大部分的出厂设置几乎都无法改变。这台「电脑」的内存一直都只有这么大，你要用上几十年甚至上百年。有时候你可能觉察到，它在运行时会卡顿甚至崩溃。但是大部分时候你都感觉良好，也就一直这么用下去了。就让我们把它叫做「Human 牌」电脑好了。

人脑如电脑，这不仅仅是一个比喻。在认知心理学中，有几种主要的研究范式，其中历史最悠久的就是将人脑类比电脑的「信息加工的方法」（information-processing approach）。

信息处理模型

人如何处理信息？这是认知心理学早期重要的研究课题。

20 世纪 60~70 年代，信息加工方法在认知心理学领域独领风骚。这种方法把人的大脑看做一个信息处理系统，研究者提出了人类处理器模型（Model Human Processor）这一经典模型（Card，Moran & Newell，1983）。这一台 Human 牌电脑，有三个相互作用的子系统：

• 知觉系统：由传感器（如视觉、听觉、触觉等）和缓冲存储器（工作记忆）组成。缓冲存储器最重要，它存储视觉和听觉图像，保存并编码感官系统的输出。
• 认知系统：从工作记忆的感觉图像存储库中，接收符号化编码信息，并利用长时记忆中的信息做出反应决策。
• 运动系统：驱动身体部位例如手臂、头部运动来执行反应。

人类处理器模型如同电脑一般运作：感官信息从知觉处理器流入工作记忆。接着，认知处理器完成认知-行为循环。运动处理器则由工作记忆中激活的组块，来设定让哪些身体部位来执行动作。这台「电脑」让人拥有了处理信息甚至多任务并行的能力。例如，我们可以在阅读的同时一边翻译和打字，这有赖于三个子系统像三条流水线一样，不间断地处理接收到的信息。

这一信息加工模型历史久远，深受「人脑即电脑」隐喻的影响。现在看来它有很多局限，例如它把认知过程描述为一系列处理步骤，仅关注单人执行单个任务的过程，忽视了复杂操作中的互动。但它仍然是一个较全面的框架，能够帮助我们理解认知过程对行为效果的影响。后来，研究者提出了许多信息处理模型的升级版本，例如信息加工模型（Human Information Processing Model）：

信息加工模型包含三个阶段：感知环境信息，转换信息，对信息作出反应。

• 感知：由视觉、听觉、触觉等感知到的外界环境信息，先经由感觉加工，暂存在短期感觉存储（short term sensory store）中。例如，你经过一家水果店，闻到了最喜欢（讨厌）的榴莲的味道。
• 转换：众多感觉信息中，只有一小部分获得知觉处理。知觉根据经验，对感觉到的信号或事件做出意义判断。闻到榴莲味道，你的注意力从刚才脑子里的想法转移出来，意识到眼前是一家水果店，你可以买点水果回去。
• 反应：知觉处理之后，可能触发反应选择，也可能使用工作记忆暂时存储信息，或将其转移到长期记忆中。回想起去年在泰国吃到的令人回味无穷榴莲，你兴奋起来，停下脚步，走进店里开始寻找气味的来源——你想吃榴莲了，打算买一个。

在感知和转换阶段，大量信息有如千军万马过独木桥，只有极少信息获得加工处理，在前面的文章中已经介绍过视觉系统为何容易视而不见。接下来我们将继续了解加工模型中的其他部分：工作记忆、长时记忆、反应选择、反应执行等阶段。它们都与「行动」有关，我们需要先了解人在反应和行动之前，会上演哪些自己都没注意到的内心戏，而人的认知瓶颈又是多么显著，它会如何影响人与数字产品的互动。

内存是瓶颈

「人脑即电脑」的隐喻将人机交互（Human Computer Interaction）视为一种信息处理任务。如何让人使用计算机更高效地完成任务？这就需要找出效率瓶颈所在——交互界面的设计需要考虑用户的信息处理和记忆能力。

人的记忆过程会经历几个阶段：感知记忆 → 工作记忆 → 长时记忆。感知记忆是人类视觉、听觉、触觉等感官系统接收到信息后的神经活动。在非常短暂的感觉消失之前，如果大脑的注意机制处理了这些感觉，我们就能意识到它。比如我们在水果店门口问到了榴莲的气味。接着，感觉信息再由神经系统传输到「内存」（工作记忆）并处理之后，才会转到「硬盘」（长时记忆）中去。

你可能会疑惑工作记忆和长时记忆是什么，为什么会分成不同处理阶段呢？没关系，下一节我们会来仔细讲解。现在只需要想象一下，在你第一次吃榴莲的时候，榴莲那浑身是刺、剥开以后白色绵密的肉质这一视觉刺激，进入了工作记忆中的视觉图像存储。当你真正咬下第一口，那种独特的味道和口感是你从未体验过的，这些感觉从此留下了难忘的记忆。

在人类处理器模型中，知觉、认知、运动处理器都跟工作记忆发生交互，工作记忆的重要性可见一斑。它往往也是信息处理的瓶颈所在——是信息千军万马争渡的那一座独木桥。让我们来看看人类处理器模型中各子系统的数据存储量（Card，Moran，& Newell，1983）：

这些处理器只能容纳 10 个左右的字母、7 个左右的组块，而且保留信息的时间很短，甚至只有几十毫秒。这些数字更直观地告诉我们：Human 牌电脑的内存容量是多么小！这座独木桥真是窄得吓人！而人的大部分思维、反应，就产生于这样的硬件条件。想象一下，如果你是一家公司的老板，手下只有几个员工，而且不能再招更多的人，但是每天都有做不完的事情在排队，你会怎么做呢？你大概会严格控制员工的工作时间，不允许他们浪费一分一秒吧。大脑就是这么一个捉襟见肘的老板呀！

接下来，我们还会反复接触到人的认知资源有限这个观点，这是数字产品的设计师们要时刻提醒自己的基本现实。接下来两篇文章，我们将更深入理解工作记忆和长时记忆。

Ref

• 凯瑟琳·加洛蒂. (2016). 认知心理学：认知科学与你的生活(原书第5版) (吴国宏 & 等, Trans.). 机械工业出版社.
• Card, S. K. (1983). The Psychology of Human-Computer Interaction. CRC Press.

数字界面的视觉语言

• 数字产品设计与心理学12 - 视觉通道
• 数字产品设计与心理学13 - 颜色和深色模式
• 数字产品设计与心理学14 - 界面的词汇和语法
• 数字产品设计与心理学15 - 提供视觉结构
• 数字产品设计与心理学16 - 视觉隐喻

美感也是一种视觉语法吗？如果说语法是一种规则的话，那么美感确实是处理视觉要素的重要准则，它强调精炼、统一、和谐、平衡。

苹果的人机交互设计准则有六条设计原则：

• 统一的美感 Aesthetic Integrity
• 一致性 Consistency
• 直接操作 Direct Manipulation
• 反馈 Feedback
• 隐喻 Metaphors
• 用户控制 User Control

第一条便强调了美感：

统一的美感代表了应用的外观和行为，与其功能的整合程度。

美感是一种整体的体验和感受，不仅来自视觉的平衡和愉悦，而且来自人与数字产品互动的整个过程。诺曼在《情感化设计》一书中提出的观点是：有吸引力的东西更好用。有美感的事物更容易吸引人，使人感觉愉悦，人们在愉悦状态下也更容易克服所碰到的问题（诺曼，2015）。

美感体验的模型

感受到美，究竟是一个怎样的过程？研究美学心理过程的学者，曾经提出过一个美感体验模型（Model of Aesthetic Experience）。

该模型包含五个维度：

• 视觉感知（Perceptual）
• 内隐记忆整合（Implicit Memory Intergration）
• 外显记忆分类（Explicit Classification）
• 认知领会（Cognitive Mastering）
• 评估（Evaluation）

在审美体验中，视觉感知和内隐记忆最先启动。视觉感知对复杂度、清晰度对比、颜色对比、对称以及组合关系非常敏感。内隐记忆又称为程序记忆，是关于的行动和操作的记忆，很难用语言表达。内隐记忆会迅速调动观察者基于个人的审美经验。与内隐记忆对应的是外显记忆，它容易用语言表达处理。接下来，进入到外显分类和认知领会两个阶段，它受个人专业知识、品味及兴趣的影响。评估则体现在认知和情感两个层面，综合了前四个阶段，得出审美上的评价和个体感受。

审美体验不仅仅是视觉上的美好感受，它是受文化、个人经验、知识、情境影响的复杂认知过程。后面的章节会涉及更多这方面的讨论。

沉浸感

视觉的美感并不是视觉设计的终点，美的感受经常指向一个更大的目标：沉浸感。当人们沉浸在某个情境、某项任务时，会出现几种感受：

• 专注：只做一件事，没有打扰和中断
• 流畅：符合预期，不停顿
• 愉悦：不费力，感官享受

提高沉浸感的第一步，不是精致、不是美化、不是视觉平衡，而是找准焦点。注意力稀缺的时代，人们总是专注于目标，而很少注意正在使用的工具。随着内容的爆炸式增长，承载内容的「容器」也就需要更简洁、高效，更好地为展示内容而服务。营造沉浸感不可或缺的一个步骤，是去掉可有可无的元素：

流畅是沉浸状态的另一个特征，它描述一种行为和情绪的流动状态。想要保持流动，就需要减少各种让人「出戏」的可能，不要频繁提醒用户「有情况，请马上处理」。在设计中，应该避免出现这些容易打断沉浸状态的元素：

• 冗长的文字
• 模糊的图像
• 过小的字体
• 容易干扰阅读的背景
• 不必要的提示、对话框等提醒
• 不必要的闪烁或者运动

从视觉自下而上的加工模式考虑，除了避免出现干扰的元素，还应细致地设计元素的细节，提供令人愉悦的刺激形式，包括尽可能提供高分辨率图像。

例如，以黄金比例来确定每个文本层次结构的最佳大小。假设正文文本为 10px，乘以 1.618 得到 16.18，越是可以设置标题文字大小为 16px。依据这一比例设计出来的文字排版，会让人感觉更加精致，阅读起来也更为舒适。

Ref

• 唐纳德·A·诺曼. (2015). 设计心理学3-情感化设计 (何笑梅 & 欧秋杏, Trans.). 中信出版社.
• Leder, H., Belke, B., Oeberst, A., & Augustin, D. (2004). A model of aesthetic appreciation and aesthetic judgments. British Journal of Psychology, 95(4), 489–508.

隐喻是借助过去已经熟悉的事物，来认识和理解新事物的方法。

人类的概念系统是通过隐喻性来构成和界定的。隐喻允许我们依据一个经验领域去理解另一个经验领域。（莱考夫 & 约翰逊，2015）

我们的概念系统建立于真实世界中的各种经验。在计算机问世的早期，人并没有与计算机对话的经验。为了跨越机器与人的沟通鸿沟，数字产品一直都有使用隐喻的传统。

桌面就是最经典的人机交互界面隐喻。早在 1970 年，施乐帕洛阿尔托研究中心的 Alan Kay 就在计算机系统中引入桌面隐喻。苹果公司在 1984 年推出图形用户界面 Macintosh 系统，这是计算机系统首次提供了一整套桌面办公的隐喻，包含现实生活中的物品图标（例如垃圾箱）。这让那些熟悉日常办公室环境的用户，能够直观地理解如何操作电脑。

50 年过去了，桌面隐喻已经进化到 VR 的版本：

借助现成的比喻，可以快速传达复杂的含义。善用隐喻是 UI 界面设计的重要能力。具体来说，隐喻可以帮助设计师：

• 引起注意
• 解释抽象或复杂的概念
• 触发情绪
• 营造熟悉和信任感
• 激励用户采取行动

概念隐喻

大规模的概念迁移和隐喻产生，往往出现在技术发展的早期，因为有太多模式的概念等待人们去了解和学习。以下是人机交互领域早期的隐喻集合的整理：

把生活中人们所熟知的概念，迁移到难以简单描述的数字产品和服务，是很多革命性产品早期成功的关键。

Facebook 最早使用学生档案的类比，开始在常青藤学校内推广。这对学生们来说既熟悉又自然。很快，这个概念就在学生群体中扩散开来。

图片分享网站 Pinterest 的快速崛起，则得益于「把图片钉在画板上」这个大家熟悉的、来源于日常生活的隐喻。

隐喻之所以有用而且高效，是因为它在经验之间构建起了桥梁——过去的、其他领域的经验，与未来的、另外一个领域的经验部分相通。而经验来自于人与真实世界的互动。如果想要构建出好的隐喻，就需要先深入观察人在特定情境中的需要、想法、行为、反应，知道他们有哪些熟知的概念和经验。在理解经验的基础之上，再去抽象出旧经验可以用于新经验的部分，并且以生动形象的方式表达出来。

作出好类比的秘诀就是作出更抽象的类比，就是那些在编码方式或是概念框架之间的类比。

（侯世达，2018）

形式隐喻：拟物化

数字产品中的所有内容都是数字——没有体量，无法触摸，怎么能让人一看就懂、知道该怎么操作呢？互联网早期的界面设计，大量借用了物理世界中的物品来表示虚拟世界中的对象：文件夹、垃圾桶、书架、指南针……在移动互联网爆发早期，更是兴起了拟物化设计风潮，目的是帮助人们在陌生的交互平台上，快速建立起熟悉的认知。

设计是否需要拟物，并不由审美偏好决定，而是由用户对数字产品的经验和期望决定。如果用户在物理世界中有丰富的经验，但是没有使用过对应的复杂的数字产品，拟物化就是降低人们理解成本的必然选择。从物理世界迁移过来的复杂数字产品，总是倚重于还原物理对象的外表，来帮助人们理解和使用。比如，很早就开始了数字化浪潮的音乐产业。

著名的数字音乐工作站软件 Logic Pro 中，有大量模拟物理硬件的界面设计，例如各种合成器、音效器、乐器等，目的是让已经熟悉了物理硬件的音乐创作者们，能与硬件一一对应起来，快速学会使用软件的功能。

符号图标

符号是包含了一定意义共识的图形化表达。数字产品使用大量符号来表示抽象的概念，例如各式各样的图标。图标往往是对真实世界中物体或概念的抽象表达，例如用四五根线条就可以组合成一个垃圾桶的形状：

真实的垃圾桶很复杂，为什么人们依然能够轻松识别垃圾桶图标呢？在前面的章节中，我们知道视觉搜索时，眼睛会识别物体的边缘，再组合成熟悉的模式，也会以大小、颜色、方向等特征来加速搜索过程。图标的设计就是利用了人的注意和视觉加工机制，来强化人们对特定图形的识别。如果说文字和概念隐喻是整体经验的迁移，那么图标的隐喻，则更多利用了人类经验中相对固定的图形记忆。

用图标代表物体、概念或功能，依赖于我们基于过往经验学习图标意义的能力。比如说，一个从来没有了解和使用过 Snapchat 的人，看见 Snapchat 的 Logo 可能会完全摸不着头脑：

具体来说，影响图标识别的因素包括（Isherwood et al.，2007）：

• 具体性：描绘现实生活中物体或人的具体程度
• 视觉复杂性：图标细节程度和复杂程度
• 语义距离：图标本身和它所代表意义之间的关系是否接近
• 熟悉度：用户对图标本身或对图标指代的对象有多熟悉

随着人们使用数字产品的经验越来越丰富，图标越来越简单、抽象。现在主流的 UI 设计，基本以简洁的线型或基本几何图形组合而成的图标为主。

虽然图标可以用精简的形式表达较复杂的含义，但还是要留意用户对图标所传递概念是否熟，尽量缩小图标和意义之间的语义距离。如果语义距离太大，或者同时出现的多个不易区分的图标，就应该考虑增加辅助的识别方式，例如图标文字、帮助提示等。下面是 Snapseed 和 iOS 分享照片的两个功能弹窗，请比较一下它们如何处理多个图标同时展示时的识别问题，以及为什么要这么处理，可以如何优化？

Ref

• 乔治·莱考夫, & 马克· 约翰逊. (2015). 我们赖以生存的隐喻 (何文忠, Trans.). 浙江大学出版社.
• Dennis C. Neale, & John M. Carroll. (1997). The Role of Metaphors in User Interface Design. In Marting G. Helander, Thomas K. Landauer, & Prasad V. Prabhu (Eds.), Handbook of Human-Computer Interaction (Second Edition) (pp. 441–462). North-Holland.
• 侯世达, & 桑德尔. (2018). 表象与本质 (刘健, 胡海, & 陈祺, Trans.). 浙江人民出版社.
• Isherwood, S. J., McDougall, S. J. P., & Curry, M. B. (2007). Icon Identification in Context: The Changing Role of Icon Characteristics With User Experience. Human Factors, 49(3), 465–476.

视觉依赖结构来简化信息。格式塔原理告诉我们，视觉甚至会主动「创造」结构以减轻信息加工的负担。如果想高效地传递信息，就必需为视觉提供一个清晰、符合直觉的视觉结构。

结构是不同对象之间的关系。比如说，一篇文章采用总-分结构，意味着段落之间形成了总体-组成部分的关系，作者先给出总的结论，然后用多个段落说明分论点。

让我们来复习一下 DP10 讲过的视觉搜索。我们知道，视网膜的分辨率从中心向边缘递减。视觉边缘只能识别较大的目标，无法看清细微的物体。如果一个细小的目标不在视网膜中央的探测域内，那要怎样才能把它找出来呢？秘诀在于快速眼动。眼球多次移动，如果一次聚焦没有找到目标，就在探测域附近继续搜索，直到确定目标。

如上图所示，眼球在查找目标的过程中，一共移动并聚焦了 5 次。在第 4 次注视时，发现目标在探测域边缘，下一次眼动就可以把目标对准到视网膜中心。这种方法也可以应用在数字产品的界面布局上面。

层级

设计良好的页面层级结构，不只是因为「好看」，这些结构其实在为视觉搜索提供线索，暗示眼睛可以先看哪里、再看哪里，而不必茫然扫视。如果信息较多，则需要提供不同的层级结构，引导用户先搜索大的结构，找到感兴趣的模块，再进一步寻找位于细节层次中的信息。如果用户对结构之间的关联理解正确，就能提高视觉搜索的效率。

这个过程使用电子地图类似。首先，定位到一个大的兴趣范围，然后放大这个区域；水平移动让这个区域位于屏幕中央；继续寻找兴趣范围，放大，平移。在数字设备中的视觉搜索，就是「框定范围-聚焦-搜索」的层层嵌套的过程。

位置

当视觉层级中有多个对象时，它们分别处在什么位置？A 在 B 的上面还是下面？关系紧密的对象之间的距离远吗？它们有内在的顺序吗？我们一般习惯先看到哪个再看到哪个？提供元素之间有意义的位置结构，也是引导视线的关键。

焦点

这些对象之间，以哪个为主？哪个处于靠近中心的位置？还有什么特征表示出它的重要性？如果想提供信息传递的效率，必需仔细思考哪些元素是重点，如何确保它们获得足够的、优先的关注。数字产品设计与心理学06 - 扫视，而不是阅读总结了一些常见的扫视模式，比如 Z 型模式是用图片和文字作为焦点，当它们交替摆放时，用户的焦点就会来回摆动，形成 Z 字型。而蛋糕模式，则以标题和小标题为焦点，用户只要快速扫视标题，就可以判断这个部分是否需要进一步阅读。

时间

呈现元素的时间关系，表示一系列事件或者变化，也是提供视觉结构的方法。

顺序关系。

因果关系。

变化/动画。

变量关系。

无论是空间结构还是时间结构，结构表达了元素之间的关系。重复与交错、节奏与韵律、对称与均衡、对比与调和、比例与适度、变异与秩序、虚实与留白、变化与统一等形式，都是规划版面的关系法则。

下面是两个网站的首页设计，我们一起来看看设计师如何处理结构，而结构又是如何影响感知和视觉搜索的。

第一个页面设计很大方，但是整体结构不是太合理。虽然只有四个主要的内容区域（不包含顶部导航和页脚），但是每一个区域都没有闭合成一个视觉层级。整体扫视下来，有多达数十个相对独立的视觉元素。层级关系不明确，会干扰视线快速浏览和集中，也就容易产生认知上的负荷。它处理得比较好的部分，是每一个部分都有焦点，在区域内搜索时，容易聚焦到重点内容上。

下面是第二个网站首页：

一眼扫视下来，整个页面只有两个大的组块：处于背景的标题、页脚内容，和处于前景的主要内容。在主要内容这个大的组块中，又非常明确地区分出了四部分内容，只要简单扫视，就可以定位到感兴趣的组块。在各组块内，基本都遵循了「先从左至右，再从上到下」的顺序和优先级，方便用户以相同的模式搜索组块内的内容，进一步确定视觉焦点。组块内的焦点也很明确、突出，以图片和数字为主。

所有的视觉结构，都是为了呈现元素之间的关系。下一次使用数字产品时，不妨留意一下，它如何提供视觉层级，是否容易发现自己感兴趣的内容。

Ref

蒂莫西·萨马拉. (2016). 好设计的造型元素 (齐际, 何清新, & 温迪, Trans.). 广西美术出版社.

已经很久没有写过读书笔记了，我想这大概与自己的读书状态有关。长久以来，阅读对我来说都是一种压力，甚至一种负担，但相比面对现实世界的复杂所产生的惶惑和疲倦，我还是时不时会遁逃到书本中寻求安慰。

对读书笔记的态度就更矛盾了。要写点正儿八经的东西绝对是焦虑的来源：期待自己写出一些其实在阅读当下并没有理解到、体会到的东西——读后的二次思考，或者说让那些阅读时闪现的火星、漂荡在空气中的只言片语都落下脚、现出形，变成一段又一段蔚为可观的文字，在我想象中，这是一件无从下手的事情。可是每当经历过从无到有的历程，不相信的事情就会成为脚踏实地的经验。现在回看好些笔记，我不确定自己真的能写出来： GEB —— 一次关于有序与无序的探寻之旅，讲述设计本身就是另外一种设计。就算有这些经验，每一次「要写点什么」的想法依然让我害怕。

大概有三年时间，我又回到了贪图阅读快感的状态：只管看，囫囵吞枣地看，不负责任地看，雁过无痕地看。直到最近，好像才感觉到自己和阅读的关系有所改善，既不必贪婪地逼迫自己榨取，也不沉湎于消费式的猎奇、已读数字的增加。允许自己不必读完一本书，也可以一读再读；可以毫无收获，也可以只对一句话有片刻共鸣；愿意面对书写时自曝其短的不安，也可以继续写一些漂亮但似懂非懂的抽象总结。

更重要的是，我找回了记录和书写的理由：纪念那些确实在阅读的时刻。为了让这种体验更新奇一些，我突发奇想，为什么不同时写我刚刚读完的两本书呢？如果只写一本书，容易进入之前严肃而自我压榨的状态；如果写主题式阅读的笔记，又会因为狮子开大口的工作量落荒而逃。如果写的是两本也许本身并无关联的书，会不会让我开始留意自己的阅读状态？如果能跳出一个作者所限定的框架，在交叉叙述中，说不定还会有意外的收获。

那就试一试吧。

最近读的两本书，一本叫《收藏沙子的旅人》，是意大利作家卡尔维诺看展、读书、旅行的随笔集。另一本是心理治疗师欧文·亚隆的自传《成为我自己》。

亚隆是团体心理治疗的权威，存在主义治疗代表人物之一，大概是仍然在世的心理治疗师中威望最高的一位。亚隆在国内的影响力，离不开他的另外一个身份——作家，一位充满想象力和人文关怀的心理治疗小说家。我想，从他的最后一本书（也是自传）看起，应该是不错的选择。

如果想了解存在主义治疗，去回顾一位以此为导向的治疗师的人生经历、他与来访者的故事，也许比研究什么是存在主义更直接有效。之前曾经了解到，在亚隆的治疗中，有很多自我暴露，他甚至会去来访者的家中拜访——这在有些流派看来可能匪夷所思。

治疗效果取决于治疗关系的强度、温暖、真实和共情。

存在主义强调「此时此地」，引导患者勇敢地面对真实的自我，承担自由选择的结果。阅读亚隆的自传，能看到他是如何形成、理解这种治疗理念的。更重要的是，看到他如何将这一理念活在他的生命当中。

在书中，他坦诚了对母亲的遗恨、对死亡常常感到焦虑，承认「在我内心深处有一泓我永远都处理不了的泪水」。亚隆相信，在治疗中真正重要的是个人的坦诚和透明，而不是专业权威，并在他职业生涯和写作中身体力行。

治疗中的变革力量不是理性的洞察，不是解释，不是宣泄，相反，而是两个人之间深刻的真诚相遇。

不走进治疗室，可能真的很难理解这句话。回顾我自己接受心理咨询的经验，洞察、解释、宣泄，也是剥离防御，抵达真诚的必由之路吧。现在我更能理解它的珍贵，接纳过去我因为不敢真诚而不得不接受的沉重丧失，也更有勇气向真诚透明更近一步。

这突然让我意识到，自己在阅读中也有很多不真诚：不去留意自己阅读时的感受，对自己「想不想继续看」、「觉得这本书对我而言到底好不好」、「对这一点我自己真正的想法是什么」并不诚实。

在翻开《收藏沙子的旅人》前，我没有意识到自己带着一些想象，期待当年读卡尔维诺《看不见的城市》时，因文字激发的想象在头脑里如同烟花般绽放的体验会再度重现。我没有意识到这是一本「阅后」随笔集，于是失望出现了。

书的第一部分是关于看展的文章，从古怪收藏展到怪物蜡像，从结绳到画作，卡尔维诺简直是个看展狂魔。前三篇过后，我发现自己开始走神，突然觉得这些文字有点厌烦——这是卡尔维诺诶，我提醒自己。可是这种感觉一直延续到第三篇章「奇幻故事」才有了 120° 大转弯。里面的五篇文章都非常精彩，尤其涉及到我感兴趣的地理和邮票的话题。第四篇「时间的形状」，日本的系列文章也看得津津有味，到了墨西哥又开始艰涩起来，虽然我去过这个国家（我竟然去过），但书中的很多描述无法形成画面感。后面到了伊朗的几篇，我又再度看不下去。

发生了什么？在回顾这一趟卡尔维诺带领我游览的旅程，我有了意外的收获：阅读本就是一件此时此刻的事情，情感的起伏，由作者塑造的阅读景观以及读者当下的游览方式共同决定。没有人规定一本书从头到尾都得是类似的感受，更不可能每一篇都有共鸣或收获。

日本、京都、地理、地图，这些话题我本来就感兴趣，而且还有不少实际的体验，自然能不太费力就构筑出一些想象。但是对书中其他展览的描写，我时常希望出现一段视频，好让我马上理解这一大段到底都在说什么。不耐烦的同时，又出现了另外一种奇怪的感觉：嫉妒。嫉妒卡尔维诺可以「无所事事」地看那么多展览，嫉妒他生活在文化气息浓厚的地方，嫉妒他可以花精力去研究历史、研究文学、研究一些稀奇古怪的话题。而我呢，只有在睡前的困顿中翻开书，匆匆扫过几页，合上书闭上眼，等到睁开眼又是打工的一天。

可是当我真的仔细去看书中的文字，又会发现自己真正缺少的不是时间，而是作家看待和感受世界的「高分辨率」，他们能看到很多同样摆在眼前但无人注意的细微之处，然后用天马行空的方式跃然纸上。于是另一种情绪又掺杂了进来：羞愧。在看写墨西哥的几篇时，我想起当时站在墨西哥国家人类学博物馆里，面对浩如烟海的展品和几乎完全不了解的印加文明历史，那种文化赤贫感，让我有一种第二天就回家好好读书重新做人的冲动。

意识到这些情绪，我发现自己真正是在阅读了：眼前的文字与我的经历有了碰撞，我有了真正属于自己的想法，不聪明但真实的想法。

于是我接纳了自己的嫉妒，接纳了自己的羞愧，也接受了自己做不到的局限，同时承认我只能欣赏这本书的部分篇章——如同亚隆在书中的坦诚。

没想到这两本书以这样的方式产生了联系，源自于自我观察的奇怪联系。

认识你自己

借由亚隆之口、卡尔维诺之眼，我对坦诚有了更多的理解，包括在阅读时的坦诚，也开始能辨认出那些在阅读时想回避的感受：我不懂、不满、不想看、不赞同……一直回避这些感受的代价是，到头来，我跟这本书真的相遇过、交谈过吗？大概并没有。

曾经急切地想借由阅读去理解世界，现在发现，阅读首先是帮助我们反观自己、认识自己，从而确立认识世界的基点，然后才好分辨哪些是别人的看法，我要不要全盘接受。

要珍惜那些在阅读时的共鸣，它提示我们去回顾那些被激活的经历，以及当中对我们而言重要但是没有得到准确表达的部分。这时候要感谢作者们帮助我们命名了这些经验，并延续了思考。

真正在阅读的时刻，也是重返生命重要片段的时刻啊。

语言是思想的载体，是沟通的主要工具，在人类社会交往过程中逐渐发展起来。我们使用与他人共享的词汇、语法来表达含义，以语音、文字或符号向他人传递信息。

视觉也可以类比为一门语言。作为传递信息的重要方式，视觉也有独特的内在属性和工作机制，并且可以拆分为一系列可识别、可处理的元素——也就是视觉的「词汇」。跟语言不同，视觉思维的基础是图案感知，而不是具有共识的表征符号。图案感知能力部分是天生的，部分靠后天习得。构成视觉系统的逻辑，主要是空间结构和关系，这跟语言的逻辑差异很大（维尔，2009）。

计算机至今还没有学会人类的自然语言，于是需要预先设定一组双方都能理解的语言来辅助沟通。数字产品中几乎所有的图形设计，都包含视觉表达和语言表达的部分。如果要表达的内容语义清晰，可以用特定的词汇或语句准确描述，那么文字表达就比较合适，例如用户的兴趣标签。如果内容涉及到复杂的关系，尤其是空间的、情境相关的、整体的、结构的，则用图像或图表更加适合，例如地图，又比如描述金融系统资金流关系的图表。

视觉词汇和语法

在自然语言中，词汇是承载含义的基本单位。那么在数字产品中，视觉语言中的词汇又代表什么呢？

第一类是属性词汇：描述对象的属性——这是什么。包括形式（文字/图形/图片/表格/视频），形状、大小、颜色、材质、位置、运动等。感知这些属性的能力大部分都是天生的。

第二类是行为词汇：描述行为属性——我要让它干什么。理解、记忆和使用这些属性，往往要经过学习。下表抽象地总结了人在使用数字产品时的主要行为，机器如何响应这些行为，以及可以使用哪些形式（表现为界面上的控件）来表达这些行为：

有了词汇，还需要用语法来组织。语法即语言的组织规则和逻辑。视觉表达也包含一定的逻辑，主要用来定义物体、空间、图像之间的关系。换句话说，视觉语法要处理的是 「A 与 B 的关联」、「A 在 B 里面」、「A 属于 B 同时又属于 C」这类型的视觉元素之间的关系。

下面将简单介绍业内最成熟的两套设计规范，从中我们可以学习到，可以用哪些「词汇」和「语法」构建出视觉界面。这两套规范，设计师一定不会陌生，其中一套是移动端最成熟的人机界面准则，由苹果公司开发；另一套是桌面应用最成熟的 Fluent 设计系统，由微软公司开发。

iOS 设计规范

苹果公司的人机界面准则（Human Interface Guidelines）是移动端最经典的设计准则，也是 UI 设计师必需熟知的文档。从设计准则的目录，可以一窥 iOS 平台包含哪些视觉语言：

其中跟视觉最为相关的有两部分：视觉设计（Visual Design/Icons and Images）和界面组件（Bars/Views/Controls）。下面整理了每个类别里涉及的项目，它们其实就是 iOS 平台的设计「词汇」：

例如，滑块（Slider）控件是 iOS 视觉设计这门「语言」中属于「控件」类别的一个重要的词汇。一旦界面上出现滑块，意味着用户可以用手指按住白色圆点块装物，沿水平方向拖动，滑块位置所关联的值会相应发生变化。如果第一次使用 iOS 系统，可能需要一些时间去理解和试验这个控件。一旦熟练之后，用户就掌握了这个词汇，能够很快理解自己看到的东西，知道可以做哪些操作。

建议产品设计师们都仔细品读这些界面的「词汇」和「语法」，并且在日常使用 iOS 系统时，有意识地观察和思考这些视觉语言对自己的影响。

Fluent Design System

Fluent Design System 是微软于 2017 年开发的设计语言。它包含所有面向 Windows 设备和平台的设计和交互指导原则，例如设计理念、布局、控件、样式、移动、输入和交互、设备、可用性、设计素材等部分。这些「界面语言」的组件，决定了用户和应用程序之间如何「对话」：

下面简单介绍与视觉设计最相关的布局、控件和样式部分。

Layout 布局

桌面端应用的特点之一，是平面展示空间比较大，界面布局也就更加丰富、灵活、复杂，这部分的设计语言涵盖了详尽的内容：

• Overview 概览
• Page layout 页面布局
• Screen sizes and breakpoints 屏幕大小和断点
• Responsive design techniques 响应式设计技术
• Layouts with XAML 带 XAML 的布局
• Show multiple views 显示多个视图
• Alignment, margin, and padding 对齐、边距和填充
• Panels 面板
• Attached Layout 附件布局
• Transforms 变换
• Z-depth and shadow Z 深度和阴影

例如，Fluent 设计系统总结了页面内容的几种常见模式：

这些总结能让设计师快速掌握设计模式，并且使用用户所熟悉的界面布局形式。

Controls 控件

Windows 平台提供的基础控件多达 60 余种，它们是设计 Windows 应用最基本、最重要的「词汇」，使用这些控件，几乎可以构建出任意功能和形式的应用程序：

例如，我们熟悉的按钮、单选框、复选框等，都是最常见的 UI 控件。

Style 样式

样式部分包含：

• Overview 概览
• Color 颜色
• Typography 文字排版
• Icons 图标
• Acrylic 亚克力
• Reveal highlight 显示高光
• Reveal focus 展示焦点
• Corner radius 圆角
• Sound 声音
• Spacing 间隔
• Writing style 写作风格
• XAML brushes 画笔

例如，文字排版部分，给出了一系列字号，它们可以满足大部分情况下，展示不同层级文字的需要：

组织视觉语汇

设计数字产品界面的视觉表现，就是灵活组织各种视觉词汇，以传递系统要表达的信息，并且与用户持续交互，帮助他们完成目标。

跟学习语言一样，记忆基本的词汇是第一步，所以设计师首先要熟悉这个平台的基本组件、控件、视觉样式。接着才能运用语法，也就是那些让词汇形成有意义关系的规则，用它们去组织词汇，最终形成可以表达意义的完整句子——人机交互界面。

理解了界面语言的视觉词汇，接下来的三个小节，我们将探讨重要的视觉语法：结构、隐喻、美感。

Ref

维尔. (2009). 设计中的视觉思维 (陈媛嫄, Trans.).

颜色是最重要的视觉通道和视觉语言之一。设计师可以用颜色来强化或突出一个想法，引起情绪反应，或者吸引用户注意一些信息。

颜色感知

颜色是描述光的颜色类别的视觉感知特征，它由眼睛、大脑和生活经验共同作用产生。没有光，就没有颜色。不过，可见光是一种电磁波，本身并不带颜色，颜色只是人的一种感知。那么人是怎么「看见」颜色的呢？这首先要归功于眼睛视网膜里的视椎细胞，它们对不同频率的光很敏感。当人眼识别可见光，并在大脑中加工光源中编码的信息，便产生了颜色感知。大部分时间里，视觉完全依靠视椎细胞提供信息。

关于颜色视觉，有两个主流的理论：三原色视觉理论（trichromatic theory）与补色过程理论（opponent-process theory）（Ware，2019）。

三原色视觉理论认为，人眼的三种视椎细胞（L-长波视椎细胞、M-中波视椎细胞和 S-短波视椎细胞）分别优先捕获相应波长区域光信号的刺激，最终合成产生颜色感知。从下图可以看到，不同视椎细胞对不同波段颜色的吸光率不同，总体而言对波长较长的颜色更为敏感，这也是暖色调更吸引人注意的原因。

补色过程理论则认为，视觉系统有两种感受器，受到某种颜色的光刺激时，它会同时释放出两种信号：刺激/兴奋信号和抑制信号。人的视觉系统用这种对比的方式获得颜色感知：红色对应绿色，蓝色对应黄色，黑色对应白色。在生活中你可能有过这样的经验：如果眼睛盯着一种颜色看一段时间，然后把目光转开，就会在别的地方看到这种颜色的补色。

人会在环境中根据一些视觉特征来快速搜索目标，颜色就是最常用的特征之一。不过 ，基于颜色的视觉搜索效率，也取决于环境中一共有多少种颜色。如果整个环境都是单一色调，一小块鲜艳的颜色就跃然而出；如果环境是五光十色的，那么针对某个颜色的视觉搜索就困难多了。

颜色理论和颜色心理学是一个庞大的话题，这一节只能作为一个小小的引子。如果大家感兴趣，推荐阅读这两本专业的论著：

• Colin Ware. (2019). Information Visualization: Perception for Design. Morgan Kaufmann.
• Elliot, A. J., Fairchild, M. D., & Franklin, A. (2015). Handbook of Color Psychology. Cambridge University Press.

色彩感觉

远-近。在日常生活中，我们时不时会有这样的体验：不同的色彩，让人感觉距离它们的远近有所不同。看起来比实际空间距离更近的颜色，我们称为前进色，反之为后退色。这是由于单色光的折射角不同，人眼产生了某种调节所致（朝仓直已，2018）。一般而言，波长较长的暖色，比波长短的颜色更有前进的感觉。两种颜色放在一起时，亮度和饱和度偏高的色彩会更突出。

轻-重。人通过肌肉的紧张程度来感知物体的重量，但是心理过程也会影响色彩感知，产生与物体实际轻重不一样的感觉。一般我们会觉得明度高的颜色比较轻，明度低的颜色比较重。

扩张-收缩。在面积相等的情况下，看起来比实际面积更大的颜色，称为扩张色，反之为收缩色。前进色大都是扩张色，后退色一般都是收缩色。同样面积的暖色比冷色看起来面积更大；饱和度高的颜色，比饱和度低的颜色看起来面积更大；处于背景的颜色明度越高，前景的颜色看起来面积就越小；在黑暗背景上，高明度的颜色看起来比实际面积更大。

清晰-模糊。决定视觉辨识度的关键因素之一，是视觉主体和背景的明度差异 。背景色是明度最高的白色时，黑色的视觉辨识度最高；背景色是明度最低的黑色时，白色的视觉辨识度最高。

冷-暖。设计中常用不同色温的暖色、冷色和中性色能唤起人们的情绪反应。暖色是指黄色和红色等；冷色包括蓝色、绿色或紫色的色调；中性色包括棕色、灰色、黑色和白色。某些颜色会让人产生某些感受，例如，鲜艳的色彩给人以活力、直接或紧迫的感感，明亮的色调让人感觉有更多的能量和积极的情绪，可以用它们来唤起用户对产品、服务或重要信息的关注。而柔和的、不那么鲜艳的颜色则让人更放松平和。但是，颜色的情感体验也会受到性别、经历、文化关联和其他个人因素的影响。

深色模式

随着人们使用数字产品的时间越来越长，深色模式界面近几年来很受欢迎，Apple、Google 等手机平台纷纷提供了这一功能。

为什么深色模式趋于流行呢？最直接的原因是电子设备的显示技术不断进步，苹果、谷歌、三星、华为等大厂商都开始使用无需背光的 OLED 屏。深色界面在 OLED 设备中能耗更少，可以提升设备的续航能力。值得注意的是，环境中的光照量不仅影响能耗，也影响我们的感知。

人的瞳孔对光照量很敏感。光线由瞳孔到达视网膜，瞳孔会根据环境中的光照量而改变大小：当光线充足时，瞳孔会收缩并变窄，而当光线较暗时，瞳孔会扩张，让更多的光线进入。瞳孔较小时，不容易产生球面像差（即图像看起来不对焦），同时也增加了景深，因此易于辨认文字，眼睛就不容易疲劳。不过，瞳孔太小也意味着进入眼睛的光线很少，会影响阅读，尤其是在光线黯淡的地方。老年人的视力下降也跟瞳孔大小有关：随着年龄的增长，瞳孔会逐渐减小。

虽然有研究表明，深色模式可能有利于一些视力不佳的使用者（Papadopoulos & Goudiras，2005)，但发布在《人因》杂志的另一项研究，则不建议普及深色模式。这一研究考察了文字大小与对比度对人们完成校对任务的影响。结果显示，对于视力正常的用户来说，浅色模式在大多数情况下阅读效果更好，即使字体很小，用户也比较容易看清楚文字（Piepenbrock et al.，2013）。为什么浅色模式对阅读更加有利呢？解释是在正反差极性的影响下（with positive contrast polarity），整体光照更多时，瞳孔收缩得更小。因此，球面像差更少，景深更大，就容易聚焦于细节而不累眼睛。

当然，深色模式的流行，是考虑综合设备、情境、活动、习惯、内容、使用体验等多种因素的结果。很多时候，为了烘托氛围，设计师会选择深色背景。

与娱乐相关的数字产品界面（智能电视、游戏机和电影应用）都喜欢采用深色主题。因为大多数娱乐活动都发生在晚上，人们在光线较暗的房间内观看，所以深色主题与环境更匹配。此外，丰富多彩的图像内容例如电影海报和宣传片等，在深色界面上会非常突出。总的来说，深色模式的优势包括：

• 实现鲜明的、强烈的、戏剧性的视觉效果
• 给人以时尚、优雅、豪华、尊贵的感觉
• 营造出一种阴险和神秘的感觉
• 有助于集中和引导用户的注意力，尽量减少分心
• 支持可视化的层次结构和信息架构

但是，深色模式在内容较多时就不是一个好的选择，比如包含各种图文/视频/数据表/下拉菜单的页面。一般来说，所有颜色在白色背景下都显示良好。而在深色背景下，颜色的可用范围会缩小，如果内容很多又要保持足够的对比度，就会影响可读性（Scharff & Ahumada，2005）。深色背景能让大图片和简约的页面显得优雅而戏剧化，但它会让小图标和内容密集的页面看起来杂乱无章和不专业。可以对比以下两个页面，哪个看起来更舒适：

深色模式并不一定优于浅色模式。但总的来说，仍然应该提供选项允许用户切换，对于需要长时间阅读的应用（如图书阅读器、杂志等）更是如此。

Ref

• Color. (2020). In Wikipedia. https://en.wikipedia.org/w/index.php?title=Color&oldid=957435307
• Ware, C. (2019). Information Visualization: Perception for Design. Morgan Kaufmann.
• Elliot, A. J., Fairchild, M. D., & Franklin, A. (2015). Handbook of Color Psychology. Cambridge University Press.
• 朝仓直巳. (2018). 艺术·设计的色彩构成（修订版） (赵郧安, Trans.). 江苏凤凰科学技术出版社.
• Papadopoulos, K. S., & Goudiras, D. B. (2005). Accessibility assistance for visually-impaired people in digital texts. British Journal of Visual Impairment, 23(2), 75–83.
• Piepenbrock, C., Mayr, S., Mund, I., & Buchner, A. (2013). Positive display polarity is advantageous for both younger and older adults. Ergonomics, 56(7), 1116–1124.
• Scharff, L. V., & Ahumada, A. J. (2005). Why is light text harder to read than dark text? Journal of Vision, 5(8), 812–812.

人的视觉感知系统，是迄今为止人类所知的处理带宽最高的生物系统（陈为，2019）。视觉接收的原始数据量，高达 10⁹ 比特/秒。

人类视觉的模式识别能力很强，从可视符号中获取信息的效率远高于文本和数字。有时候只要基于某些视觉特征，就能启动下意识的快速眼动搜索。从上一小节我们知道，想让某个物体「鹤立鸡群」，就要突出它的一些初级视觉通道特征，例如使用不一样的颜色。那么，如果要让多个物体都易于识别，该怎么办呢？初级视觉皮层中的各层，又分为许多小的区域，分别处理形状、颜色和运动等，如果想要在众多目标中快速识别，最有效的方法就是使用不同的视觉通道。

视觉通道是可视化中的重要概念。可视化编码由标记和视觉通道组成。标记通常是一些抽象的几何图形元素，如点、线、面、体。视觉通道为标记提供视觉特征，包括位置、大小、形状、颜色、运动方向、色调、亮度等。

感知系统接收视觉信号时，有两种基本的识别模式：

• 类别模式：获得关于对象本身特征和位置等信息，描述对象是什么或在哪里
• 次序模式：获得关于对象某一属性在数值上的程度信息，描述对象具体有多少

对应这两种识别模式，可以划分视觉通道为定性（类别）和定量（连续、有序）两种。例如，用不同色调表现定性的类别数据，用同一颜色的不同亮度表示定量的次序数据。合理地选择视觉通道，是信息传达的前提，对数据这种抽象信息尤为重要。

在数字产品的界面设计中，设计师就是在跟各种视觉通道要素打交道：决定文字、符号、图像等视觉元素的位置，选择合适的形状表示一定的含义，赋予元素特定的长度、大小、颜色，在元素之间形成各种关系，等等。

视觉通道的表现力和有效性可以由这几个维度来衡量（陈为，2019）：

• 准确性，是否能够准确的表达视觉数据之间的变化
• 可辨认性，同一个视觉通道能够编码的分类个数，即可辨识的分类个数上限
• 可分离性，不同视觉通道的编码对象放置到一起，是否容易分辨
• 视觉突出，重要的信息，是否用更加突出的视觉通道进行编码

对数据这类抽象信息而言，位置、长度、颜色、形状的视觉通道表现力较好，在设计时应优先选择用这些形式来映射设计对象的特征。

Ref

陈为 等. (2019). 数据可视化（第2版）. 电子工业出版社.

1. 视觉讨厌杂乱

在日本的设计教育纪录片《啊！设计》中，有一个十分吸引人目光的小栏目，叫做「拆解」。节目组以定格动画的方式，把日常物品完全拆开并且整理好，过程引起极度舒适（尤其是对设计师而言）。比如，拆解零食：

有序的环境让视觉更加放松，这种放松一部分来自于时刻知道「该往哪里去」。

视觉焦点好比是个执行侦查任务的跳伞兵，每次执行任务时，他从飞机上跳出，张开降落伞着陆。偏差不可避免，这位侦查员无法精确地落在预定目标点，他甚至有可能完全不清楚自己降落在了哪里。这跟我们第一次打开某个网站/ App 页面时的状况很相像，终极问题三联会在这个时候冒出来：我是谁，我在哪，我要去哪里？

如果侦察兵着陆后，发现周围是荒无人烟的海滩，一边是海，一边是沙滩，抬头就能通过日月星辰判断方向，那么他很快就知道该往哪里走。如果侦察兵落在了一片热带丛林中，藤蔓密布，大树参天，不见天日，四下是乱窜的奇珍异兽，眼前飞过各种叫不出名字的昆虫，他怎么知道自己下一步要朝哪里迈呢？

无论视觉焦点最初降落在哪里，要让它很快找到出路。杂乱的视觉环境就像让眼睛深处热带丛林，不利于信息识别和提取，更容易看不见就在眼前的事物。视觉不喜欢杂乱，这是人人都有的直观感受。但什么是杂乱，哪些因素造成了杂乱，如何判断杂乱的程度？

杂乱是指过多的物品（或者展示方式）导致视觉任务效率下降的状态，杂乱程度可以用以下指标来度量（Rosenholtz，2007）：

• 数量杂乱：会妨碍选择性注意。

预先分类可以提高查找的速度：

• 易混淆杂乱：在目标附近大约 1 °视角内的干扰物会妨碍集中性注意。

• 无结构杂乱：干扰物在搜索区域内位置随机、无结构。

• 异质杂乱：非目标物背景特征如颜色、大小等存在差异，会妨碍视觉搜索。

  

  图片来源：https://visicomdata.com/

杂乱首先影响的还不是美不美观，而是严重阻碍了感觉信息提取和知觉加工的过程。「整齐」可以说是界面视觉设计的基本要求，就好像一个收拾得井井有条的屋子，总是能让人更加放松和愉悦。在迎接客人之前，好好地「收拾」一下吧！

2. 视觉依赖结构

在前面的章节中，我们已经了解到视觉信息获取和加工过程之复杂。试想一下，如果不能够有效组织来自数百万个视网膜感受器输出的信息，我们将面对一个多么混乱嘈杂的世界。

对知觉组织过程早期的研究探索，可以追溯到 20 世纪初在德国兴起的格式塔学派，他们试图解释人类视觉如何工作。格式塔在德语中表示「模式、形状、形式」等，因此这些理论也叫做格式塔原理，或完形理论。格式塔的基本思想是：人们倾向于先认知一个图像的整体，然后才认知组成整体的各个部分。格式塔心理学认为，我们感知的事物大于所见到的事物；任何一种经验现象的组成部分都相互关联，整体并不取决于个别元素。人们在观察时，倾向于将视觉感知内容看成简单的、相连的、对称的或有序的结构，总是先从整体看待事物（陈为，2019）。如今，认知心理学家视格式塔原理为描述性框架，而不是解释性或预测性理论。

格式塔原则

接近性原则 Proximity

视觉元素距离相近时，容易视为一组，而距离较远的元素则被划为组外。

联合利华的 Logo 利用了接近性原则，多个距离接近的图形组合成字母 U 的形状

现在 App 界面越来越倾向于去除边框和多余视觉元素，用留白来区分模块。这也是接近性原则的运用：拉近某些对象之间的距离，增大与其他对象的距离，形成视觉上的分组。

相似性原则 Similarity

根据事物的相似性分组，例如将形状、颜色、光照等相同的事物视为一组。俗话说，物以类聚，人以群分。

连续性原则 Continuity

视觉倾向于沿着物体的边界，将非连续的物体视为连续的。

闭合原则 Closure

视觉会自动尝试闭合不完整的图形，将其感知为完整而不是破碎的形状。这一原则最著名的例子，应该要数 Paul Rand 为 IBM 设计的 Logo 了：

对称性原则 Symmetry

视觉倾向于沿点或轴识别物体为对称的形状。把物体分成偶数个对称的部分，在感觉上令人愉快。对称物体的相似性，增加了物体被组合成一个对称整体的可能性。

好图原则 Good Figure

人们喜欢按照简单、规则、有序的元素排列方式来识别事物，即倾向于用最简化的形式来消除复杂性。例如，我们会将奥运五环视为一个整体：

而不会优先解读成更复杂的版本：

这个原则，也可以叫做视觉的「奥卡姆剃刀」原则吧。

共势原则 Common Fate

如果一组物体排列模式相似，或者沿着相似路径运动，它们会被识别为同一类物体。还记得 FC 小蜜蜂游戏吗？

又比如，在 macOS 中，同时选中多个文件夹拖动时，它们会一起移动：

经验原则 Past Experience

视觉感知在某些情形下与过去的经验有关。下图中央的数字，是 13 还是 B 呢？

大多数格式塔原则可以归入一个更为一般的法则中，即完形法则（Law of Prgnanz）：在所有解释图形的可能方式中，人们倾向于选择能产生最简单和稳定图形的方式。相比复杂和不对称的图形，简单和对称的图形更容易识别。可以说，视觉一直在寻找一个的简单结构，然后据此简化信息。即便这个结构不存在，也会「脑补」出来。

看完格式塔原理，你会不会跟我有一样的感叹：视觉感知系统和大脑真是会偷懒啊。 😌

视觉组块

下面的例子，需要你运用一下想象力。

想象一下，你是一个从未失手的窃贼。这一天晚上，你潜入当地一位富豪的房间，在这个陌生的环境中，你应该如何用最快速度找出值得偷走的东西呢？你大概会先扫视整个房间一周，先大致圈定那些摆放了家具的区域，然后把目光锁定在梳妆台和靠墙的桌子，再进一步观察。接着，你注意到桌面上放着一个长得像首饰盒的物品，上面还放着一个看起来像项链的长串。嗯，就是它了！

这就是我们在寻找东西时惯用的策略，不论你是高明的窃贼，还是一边等车一边刷手机的上班族。想从复杂的视觉环境中搜寻和获取信息时，我们会采用聪明的搜索策略：先大后小。先划分几个大的搜索区块，然后判断哪个大区块包含目标物体的可能性更大，就优先在那个区块内部搜索（Ware，2010）：

划分视觉区域的搜索策略，可以与组块理论结合起来理解。在认知心理学领域，组块（chunk）是大脑记忆中的一个组织单元，这些单元被组合在一起并储存到记忆中。心理学家 Miller 提出了短时记忆只能容纳 5~9 个信息组块（7±2）的观点，也就是「神奇数字 7」的理论（Miller，1956）。一个信息组块可以是任何有意义的单位，例如数字、单词、象棋位置或者人脸。 相比独立的单元，我们更容易识别、检索和记忆成组的多个单元。组块概念和短时记忆容量有限，成为后来所有记忆理论的基础。

在数字产品界面设计中，组块通常指拆分视觉内容，分块处理不同的信息单元。一大块内容经过有意义的拆分，形成小的组块，这样浏览起来就没那么费力，并且可以提高理解和记忆内容的效果。

文本组块

拆分长而复杂的文本组块，有助于信息识别、编码和记忆。比如说，有一个包含 20 个项目的列表，怎样可以让它更加易读呢？

首先，根据原料的性质分为四组：

然后每一组统一样式，进一步合并视觉组块：

这样看起来是不是清晰多了？而且要寻找某一个原料的时候，速度会更快。

在设计中，常用的文本内容分块技巧包括：

• 拆分长段落为若干较短的段落，保证段间距足够大
• 一行不要显示太多文字
• 分门别类，提供清晰的视觉层次结构
• 长字母或数字串可内部分组，例如电话号码 188-1234-4321

除了分块，还需要提供快速识别分块的线索，帮助用户快速扫视：

• 提供清晰的标题，与其余文本样式形成明显对比
• 突出显示关键字
• 使用项目符号或编号
• 对长文本提供摘要

例如，ted.com 视频下面提供的字幕，是文本分块的范例：

• 拆分段落，保证每一段不会太长
• 行间距和段间距合理，容易区分出不同的段落
• 每行宽度合理，文字内容不会过多
• 每个段落前面有对应的时间作为扫视和定位线索

多媒体组块

多媒体内容形式多样，包括文本、图像、图形、图标、视频等。想要提供合理的视觉结构，首先应该尽量按形式或其他线索，将内容分门别类整理好。多媒体分块的关键，是让相关内容在距离和形式上保持联系。

设计师常使用背景颜色、形状和空白等方式，区分哪些元素相关、哪些不相关，从而形成清晰易辩的视觉组块。

组块的迷思

在用户体验设计领域，Miller 的神奇数字 7 经常被误解为：在任何时刻，人只能处理 7 个组块。这些迷思会错把数字 7 当做改进可读性的依据，带来一些不必要的设计限制，例如导航栏上的选项应限制为 5~6 个；PPT 中的项目符号最好是 6 个；不要将 5 个以上的单选按钮放在一起……

最常见的迷思是不能在全局导航中展示超过 7 个选项（嗯，我也曾经犯过这个错误）。 其实，导航菜单的重点在于显示所有选项以供识别，用户并不需要记住所有选项。菜单项数量少于 7 个，并不能提高可用性。相反，只要提供有意义的结构，例如分类，选项的数量可以有很多。

网易严选网站顶部导航的二级类目，虽然项目很多，但是因为提供了子分类，并且显示一张有代表性的商品图片作为线索，用户依然可以快速找到目标品类。

组块理论对设计的指导意义，并不在于神奇数字是多少，真正的关键是: 人类的短时记忆容量非常有限，如果想让用户处理并记住更多内容，应该拆分大段信息，重新打包成有意义、易消化的小块。

不必纠结于数字 7，每个人的组块容量其实并不相同。一般来说，教育程度和智商越高，组块容量越大；而年龄越大，组块容量越小。对于经常在短时记忆中保存大量信息的人（例如程序员），能够快速记住 5~9 个组块很常见。但是多数普通人的组块容量一般是 4±1 个组块，也就是 3~5 个，这意味着人们很难记住专家们可能觉得容易的事情。何况，记忆还会受到情境的影响：用户在哪里，以及他们使用产品时，周围发生了什么。

看到一个人可以毫无差错地复述高达 40 位的二进制数字，这有点戏剧化。然而，如果你认为这仅仅是一种延长记忆时长的记忆技巧，那么你就会错过几乎所有这些记忆技巧中隐含的要点。 重点是，想要增加我们所能处理的信息量，重新编码（recoding）是一个极其强大的武器。

（Milller，1956）

现在，在心理学与认知研究领域，短时记忆已经被工作记忆的研究所取代，我会后续文章中详细介绍。

3. 视觉喜欢平衡

黄金分割率是不同尺寸的元素之间的数学比例，被认为是人类眼里最美观的元素比例。

在数学中，如果两个量的比值，等于它们之和与两个量中较大数的比值，那么这两个量之比就是黄金比率。

希腊字母 φ 代表一个无理数，它就是我们熟悉的黄金分割比例：1.618

19 世纪德国心理学家古斯塔夫·费希纳（Gustav Fechner）和查尔斯·劳罗（Lalo）先后通过实验，验证了绝大多数人对于矩形的比例偏好接近于黄金分割比例。

黄金分割实际上反应的是人类的一种认知比例偏好。

Kimberly Elam 分析了很多设计作品几何构成（Kimberly ，2018）。几何分析背后的理念是，比例系统和辅助线构成了艺术作品、建筑、产品和平面设计作品中构图的整体性，它们是构图的关键，引导设计方向，有助于理解作品背后艺术家、建筑师和设计师的设计理念和原则。

黄金分割也广泛运用在 Logo 和界面设计中。例如，在网页或平面设计布局中，黄金比例可以用来定义面板的宽度、边栏或视图的高度。

许多 Logo 或 App icon 的设计模板也都运用了黄金分割的原理：

三角形、正方形、圆形和螺旋形是品牌符号中很常见的黄金形状。正确使用这些黄金形状，可以产生视觉上平衡优雅的效果。

在数字产品界面设计中，黄金比例也随处可见。

黄金比例也许是视觉设计中最出名的定律，不过它并非万能。建筑大师柯布西耶的这段话，指出了黄金分割比例法则的实质：

原则上，辅助线不是一个预先设定的规划；在一个特定形体中选择它们，依据的是形体自身的结构，这些结构已经事先阐明，是完全真实地存在。辅助线仅仅在几何平衡的意义上建立了顺序和明晰的关系，以获得一种真正的纯正关系。各种辅助线不会带来任何诗意的和抒情诗调的想法；它们不激发作品主题；它们不是创造性的；它们仅仅建立起一种平衡关系，一件灵活、单纯和简单的事情。

——Le Modulor （柯布西耶，1948）

4. 视觉寻找新异

视觉总是容易被与众不同的东西吸引。如果某个物体具有非同一般的特征，而其他物体都很相似时，我们一眼就能识别出来。所谓万绿丛中一点红，它就像从背景中「跳出来」一样，让人无法忽视。当你想突出某个特征，就让它在形状、尺寸、方向、颜色等方面跟周围环境形成鲜明对比。

在下面的例子中，有的目标容易发现，有的则比较困难。易于发现的目标能够由初级视觉皮层的神经元辨别出来，而其他目标需要由内容处理通道部分的神经元来辨别（维尔，2009）。

• A：倒转的 T 与头朝下的 T 特征集相同，所以难以辨认。而粗体却非常突出。
• B：向后的 L 与其他物体特征相同，难以辨认。而绿色三角非常突出。
• C：一个点的颜色如果与其他颜色相近，就难于发现。
• D：线段被其他方向相似的线段包围起来，就不那么引人注目了。

不过，只有低级特征差别还不够，这种差别还要足够大。例如，根据经验，30°的方向差异才足够明显。另外，背景的变化程度也很重要（维尔，2009）。

新奇事物也容易吸引人们的注意。如果某个视觉环境很和谐，但是出现了一个跟环境格格不入的对象，人们就会努力从认知上去解决这个冲突。比如，在一堆旧纸箱中，出现了一个金光灿灿镶满钻石的宝箱。

还有一种独特的视觉增强方法：运动。人类视网膜的中心视力好而边缘视力弱，对静态细节的敏感程度从中心向边缘快速下降，可是对运动物体的敏感度下降并不明显。因此会出现这种情况：即使我们看不清物体的形状，仍然能够看见物体在视线内移动。最能唤起视觉响应的并不是简单移动着的物体，而是那些突然出现在视野中的物体。

为了抢夺注意力而滥用动画和动态元素，是数字产品视觉污染的主要来源。你无法无视在页面中摇晃的图标，不过也很快会对简单的运动熟视无睹。运动本身是正常现象，在室外，漂移的云彩、摇晃的树叶、路过的行人并不会让我们心乱如麻，只有高频和快速的运动/闪烁才会带来不适。

人类视觉就像一个好奇宝宝，容易被新奇好玩、与众不同的对象吸引。由视觉结构、视觉平衡节省下来的认知资源，很多都用来处理这些新异的特性。这是一把双刃剑，设计师们需要小心处理视觉元素的差异，巧妙地引导注意力，做一个视觉环保主义者。

Ref

• Rosenholtz, R., Li, Y., & Nakano, L. (2007). Measuring visual clutter. Journal of Vision, 7(2), 17–17.
• 陈为 等. (2019). 数据可视化（第2版）. 电子工业出版社.
• Ware, C. (2010). Visual Thinking for Design. Elsevier.
• Miller, G. A. (1956). The magical number seven, plus or minus two: Some limits on our capacity for processing information. Psychological Review, 63(2), 81–97.
• 金伯利·伊拉姆. (2018). 设计几何学 (沈亦楠赵志勇, Trans.). 上海人民美术出版社.
• Corbusier, L. (1954). The modulor: a harmonious measure to the human scale universally applicable to architecture and mechanics (Vol. 1). Harvard University Press.
• 维尔. (2009). 设计中的视觉思维 (陈媛嫄, Trans.).

地图是我最喜爱的视觉工具。不仅因为我曾经学习相关的专业，而且在生活中我还是一个路痴——查看地图是日常功课（也是爱好）。这天，我跟一位朋友约在名叫小北的片区见面，我需要从琶洲地铁站出发，找到去小北站的路线。要在日益复杂的广州地铁线路网中完成这个任务，可不简单。

这是一个复杂的视觉搜索问题。然而它发生在瞬时之间，我们基本意识不到。下面我试着借助视觉搜索研究中的三层嵌套循环来展开讲讲（Ware，2010）。

在外层循环中，大脑构建一系列解决问题的步骤，然后执行。例如我们进房间找眼镜，大脑给出的搜索策略大概是确定头部的方向、获得最佳视角，开始连续的特征搜索。如果没有找到目标，就转移到新的位置继续搜索。在查找地铁线路的任务中，我的初步的策略则是：圈定区域，寻找终点车站，对比路线，确定换乘站。

中间循环是视觉搜索。这个阶段眼睛会寻找视觉查询的目标图案，以每秒 1~3 次的频率转动眼球，根据目标的形状特征（例如大小、颜色和方向）来确定它们是否成为新的候选目标。在寻找地铁线路时，我主要靠不同颜色的线段来查询，从起点车站开始，沿着线段图案进行视觉追踪。我发现有两条路线可以到达小北，其中一条是由青色和蓝色组成的线路，另一条则是青色-橙色-红色线路。

内层循环是图案检测。当视觉焦点落在可能的目标区域中，内层循环的视觉检测过程就会开始。眼睛快速判断视野中心区域的图案是不是搜索目标，判断一次即完成了一次内部循环。尽管眼睛在某个关注点上的停留时间还不足 1/5 秒，但是每次停留时可以判断 1~4 个简单的图案。在选择了线路后，我需要确定换乘车站，这属于图案检测的任务。我根据两个特征来确定换乘站：线路颜色是否改变，以及换乘站得是一个循环符号的标识。最后，我确定了出行的路线以及换乘地点。

从上面这个例子可以看到，发生在几秒之内的视觉搜索竟然如此复杂。每天我们都要完成无数次复杂的视觉搜索任务，无论是从人群中认出熟人，在炒菜时从一堆瓶瓶罐罐中抓起调味盒，还是在手机上找到点赞按钮。这些任务都与注意相关，它引导眼睛运动，调整图案发现的路径，找出对完成当前工作最有帮助的图案。这个过程可以总结为三个循环（Ware，2010）：

• 外层问题解决循环：查找视觉问题的备选解决方案
• 中层模式搜索循环：由眼球运动带来的视觉模式搜索
• 内层图案检测循环：检测图案是否为目标图案

自下而上：基于特征的视觉搜索

视觉搜索并不会随机发生。寻找比较小的东西时，我们只有去看，才能看到它。但是还没有看见之前，如何引导眼睛看向正确的位置呢？视觉有一个预处理过程来引导注意力，但首先我们要了解什么样的东西容易看得到。当我们在寻找某件物品的时候，大脑能预先启动感知觉通道，使它们对要寻找的东西变得非常敏感。例如，在下图中找红色竖线时，视觉对红色更为敏感：

视觉搜索的效率取决于干扰物的数量，以及所选取的搜索特征是否有效。如果只有一个特征（红色）并激活它时，视觉搜索效率最高。随着特征增多，视觉加工的复杂性也逐渐增加。例如，在下图中找到红色的竖线就没有那么容易了：

视觉显著性模型（Li Zhaoping，2014）可以帮助我们更好理解视觉搜索特征：

图 A：视觉输入由多个独立的特征映射合集组成，例如颜色、方向、透明度、大小、运动、深度等。视觉系统根据当前任务赋予这些映射不同的权重。 比如，想找出人群中穿黄色雨衣的人，那么映射集将突出黄色特征。

图 B： 有多个目标特征时，这些特征（红色、蓝色、垂直线段、水平线段）映射汇总成主视图。

基于特征去搜索，是视觉系统高效的秘密之一。例如，要在一辆大型停车场找到自己的车。如果这辆车特别庞大，比如是一辆集装箱货车，那我们会优先以大小为特征去搜索。如果这辆车拥有少见的亮橙色，那么颜色就会是主要搜索特征，接近橙色的车会在视觉扫描时跃然而出，而其他颜色的车几乎都会被忽略掉。

自上而下：指向目标的视觉搜索

视觉搜索目标，决定着我们往哪里看。1967 年，俄罗斯心理学家 Yarbus 做了一个早期的眼动实验：他用附在眼球上的吸盘连接着镜子，将光线反射到相纸上，从而记录下眼球的运动。他向被试展示 Ilya Repin 的画作 “Unexpected Visitors”，让被试猜测画中人物的年龄。这时候，人们的眼动轨迹是这样的：

当估计人物年龄时，被试的搜索策略是看人的脸部，画的其他部分则没有多少注视停留的轨迹。

接下来，被试要猜测画中人物的社会地位。这时，眼动轨迹则大不相同，视觉焦点大部分停留在人物的衣服上面。眼动结果直接反应了搜索策略的变化，被试认为人物的服饰能够暗示其社会地位。

这个实验再次生动地展示了视而不见的根源：我们只在需要时才看到所需要的信息。提前设定目标，会过滤掉感知收集到的无关信息，大大提高视觉搜索效率。

在设计数字产品时，可以充分利用两种视觉搜索的特点。无论用户采用哪种加工方式，都要安排好视觉的「游览路径」，让用户带着需要的信息离开。

• 自上而下：要明确用户在当前情境下的视觉任务是什么，最终想要找到什么信息。比如在看一幅图表时，是在寻找关键数据例如月活跃用户数呢，还是想了解数据变化的趋势？对此用户有什么经验，形成了哪些习惯？他会去哪里寻找到这些信息？比如，在阅读新闻时，我们一般会习惯先看一下大标题和题图。

• 自下而上：视觉搜索从哪里开始？哪些低层的视觉特征最重要、最有效？应该如何呈现这些特征？它们足够显著、易于区分和识别吗？减少非目标物的干扰，加强有效的搜索特征，能让重要信息更容易识别和理解。

预测视觉搜索路径

当人们在寻找目标的时候，有没有办法可以更准确地预测他们会看哪里、忽略哪里呢？有关监控任务中视觉注意的研究（Wickens, 2015）指出，有四个因素决定了视觉注意会集中在哪里：

• 显著性（Salience）：指兴趣区因为其大小、颜色、强度或对比，从背景中凸显出来的程度。
• 努力（Effort）：指注意从一个兴趣区转移到另一个兴趣区所需要付出的代价。
• 期望（Expectancy）：我们更倾向于关注那些有许多变化的地方，这些变化将影响后续行为。
• 价值（Value）：信息的有用程度或重要程度。

SEEV 模型就是这四个因素的叠加，它能够解释和预测人会如何进行视觉搜索。

运用到数字产品的设计中，我们可以注意这样做：梳理清楚哪些信息和元素更重要，它们的权重应该如何分配；价值更高的信息，应该突出呈现，与其他信息形成明确对比；信息较多时，合理安排顺序，减少视线转移所需付出的努力；减少不必要的元素变化，将变化集中在重要信息上。

Ref

• Ware, C. (2010). Visual Thinking for Design. Elsevier.
• Li Zhaoping. (2014). Understanding Vision: Theory, Models, and Data. OUP Oxford.
• Wickens, C. D., Hollands, J. G., Banbury, S., & Parasuraman, R. (2015). Engineering Psychology and Human Performance. Psychology Press.

前面几篇文章反复提到，看并不总等于看见，一览无遗是日常体验带来的错觉。如果忘记这一点，在设计数字产品时，可能就不会仔细考虑用户如何阅读、扫视、是否容易遗漏重要的信息。学习心理学相关原理，能让我们更精细而准确地理解信息获取/处理机制，分离「看」和「看见」这两个过程。在设计时，应该为这两个过程搭建桥梁，让信息传达更为顺畅。

「看」和「看见」都是人类知觉处理的过程。「看」是视觉从周边环境获取信息，它是感觉（sensation）的一部分。而「看见」是信息处理的环节，它是知觉（perception）的一部分。

感觉：眼睛、耳朵等器官，把物理能量转换成大脑能够识别的神经编码的过程。

知觉：一系列组织并解释外界产生的感觉信息的加工过程。

举个例子：

你肯定一眼就认出了这个标志。在那一瞬间，如果用低倍速回放，我们首先在「看」的阶段，从白色背景中识别出黄色曲线围合的形状，这是感觉的输入；然后我们判断出这两段黄色曲线是对称的，而且曾经见过这个形状，这是知觉加工的结果。现在，这个图形激活了存储在记忆中的模式——「看见」了金拱门的标识。

两种加工方式

影响视觉信息加工的因素，既包括客观外界条件的刺激，也包括主观经验的影响。当知觉去处理来自感觉的信息时，就发生自下而上的加工。当知觉受个体的经验、动机、期望和其他心智过程影响时，就发生自上而下的加工。

上一节介绍过的选择性注意，也有对应的两个策略（Yantis，1993）：

• 刺激驱动捕获：环境中的物体自动抓住了视觉注意，例如等电梯时电梯门打开了（“它成功引起了我的注意”）
• 目的指向选择：基于目标去选择将要注意的物体，例如在地图上找到当前所在位置（“我要把它识别出来”）

总的来说，两种知觉加工类型的区别如下：

具体到视觉加工，自下而上的过程源自呈现在视网膜上的图案信息，我把它称为所见即所得；自上而下的过程则出自注意力的需要，由目标来决定关注点，会受到先前经验的影响，我把它称为先入为主。下面这个例子，能帮助我们理解这两种加工过程。

请分别在两张图片中找出三角形：

找出三角形一点都不难，有意思的是你会发现，在右侧图片中找到三角形，比左侧要慢一些。因为看到右侧图片时，第一眼会注意到黄色圆形这个凸显的刺激源，让我们下意识地迅速感知并开始知觉加工，这是自下而上的过程。不过，很快我们又会进入自上而下的加工过程，毕竟目标是要找到三角形，而我们预期在图中会有一个三角形，这个预期将引导视觉快速搜索并找到目标。

自下而上的视觉加工，是一个从局部到整体的组合过程：视网膜成像→特征→图案→物体。在这个过程中，信息经过连续的选择和过滤，第一阶段是无规律的低层特征，在第二阶段组合成了图案，然后在第三阶段形成有意义的物体（Rensink，2002）。

在上图的特征处理阶段，不同类型的视觉处理器一起获取各种细节特征：有的处理尺寸和方向信息，产生边缘或轮廓；有的处理红绿色差和黄蓝色差；还有一些会处理运动和立体深度要素。

在视觉处理的中间层，视觉空间被划分为纹理区域和颜色区域。许多特征在这一层连接起来形成了连续的轮廓，并构建出复杂的图案（维尔，2007），比如哆啦 A 梦的眼睛和胡须。理解这一过程对于设计很关键，因为视觉从这一层开始变得有组织。

在视觉加工的最上层，特征形成的图案再一次经过简化和提取，最后综合得到了几个视觉目标。视觉系统大约能保持对三个目标的注意力，这叫做视觉工作记忆，它的容量非常有限，是认知的主要瓶颈。

如果说自下而上的加工，像从局部到整体的拼图，那么自上而下就像拿着榔头找钉子，它由需求驱动，比如在地图上识别出自己当前所处位置。自上而下产生的注意，会激活人们正在寻找的信号。如果要找一个红色圆点，那么视觉红色点检测器捕获的信号就会变强（维尔，2009）。当我们观察环境时，总是同时利用两种视觉加工过程。

举个芒果，哦不，举个栗子，我去超市买芒果，走在玲琅满目的货架之间，大脑会估计出一个可能出现芒果的目标区域，同时指挥眼睛开始一系列运动，关注这个空间中所有潜在目标。在计划下一次眼睛运动的一瞬间，大脑基于当前注视、以及前几次注视后残留的信息作出判断。眼睛运动快速核对目标区域中有没有出现芒果，如果没有，就转移到下一个目标区域，直到找到芒果为止。

阅读时的信息加工

这一小节涉及不少理论和概念，阅读时你走神了吗？会不会觉得需要有意识地集中注意力，才能理解文字的意思？这正是我们在阅读时常有的感受。阅读跟说话和理解语言不同，它并非人类天性，大脑也不是为阅读而设计的。相反，阅读是一种人为的、需要经过系统的指导和训练才会获得的能力。

阅读的信息加工过程，也可以分为自下而上和自上而下两种模式。当阅读由特征驱动时，视觉系统从识别简单特征开始，例如，屏幕上某个方向的线段，或者某个角度的弧线，并组合成更复杂的形状和图案。然后，大脑再识别某些形状为字符，接着处理不同字符，组合为单词、词句、句子和段落。而语境驱动的阅读，则会先理解完整的句子/段落的主旨，然后利用这些语境信息去了解或猜测具体的单词和字符，这更像我们常说的「脑补」。

在阅读过程中，自下而上的加工容易受到速度和清晰度的影响。所以在设计阅读内容的展示形式时，设计师可以在这几方面做好优化（威肯斯，2007）：

• 最大化自下而上的加工，例如提高视觉目标的清晰度。

• 使用熟悉的视觉特征，例如熟悉的字体、有意义的图标、使用单词而不是缩写。

• 在特征模糊或者背景信息不足时（例如不熟悉的符号或语言），要充分利用读者的经验和情境信息，例如：将区别性特征最大化，避免混淆；使用短小、通用、熟悉的词汇；创造具体的背景信息，例如「你的余额不足」比「余额不足」更容易感知和理解。

Ref

• 理查德·格里格, & 菲利普·津巴多. (2003). 心理学与生活 (王垒王甦 等, Trans.). 人民邮电出版社.
• Yantis, S. (1993). Stimulus-Driven Attentional Capture. Current Directions in Psychological Science, 2(5), 156–161.
• Rensink, R. A. (2002). Change Detection. Annual Review of Psychology, 53(1), 245–277.
• 维尔. (2009). 设计中的视觉思维 (陈媛嫄, Trans.).
• 威肯斯. (2007). 人因工程学导论 (张侃（等）, Trans.). 华东师范大学出版社.

下面有一张图片，我想请你找到中文词语「框架」的所在位置，然后集中视觉焦点在上面，保持 5 秒钟：

当你的视线聚焦并且保持焦点不移动的时候，眼睛里的成像更加接近这样：

在视觉焦点能看到清晰的文字，但是在焦点以外，看到的东西则模糊不清。人类视觉焦点的分辨率，要远远高于焦点以外的区域。这是一个违反直觉的现象，但它确实存在，并且能帮助我们理解为什么人们视而不见，以及在扫视网页时眼睛是如何工作的。

细节都在焦点上

视觉焦点看到的东西远比边缘要清晰，这是怎么回事呢？

在我们眼睛的视网膜表面，有两个不同的视觉信号接收区域：中央凹（fovea）和外围区域。中央凹在视网膜中心附近，仅占视网膜约 1% 的面积，覆盖约 2°~3° 的视角。

虽然只有针孔般大小，中央凹却是视觉最敏锐的区域，那里密布着视椎细胞，它们对颜色很敏感，能够十分准确地检测颜色和空间细节。人的每只眼球大约有 600~700 万个视锥细胞（Wikipedia，2020），从视网膜中央向边缘递减分布。只有位于视野的中心，才能通过中央凹看到细节。所以在视野中心，我们的视力相当好，眼睛可以在一臂远的距离处，分辨出一个大头针顶端上多达 100 个点。但是在视野的边缘，视力则一落千丈，只能分辨出人头大小的东西（维尔，2009）。中央凹是识别对象的关键，因此视觉注意力通常都在处理中央凹所接收的信息。

人的视觉好比一束聚光灯，只有在聚光灯照射下的区域才会一清二楚，而光线照射不到的地方就显得暗淡、模糊。

我们总是有选择地让视觉焦点落在目标物体上，去感知细节、识别物体，视觉焦点决定了我们将看见什么。视觉这束聚光灯能照亮的地方很有限，只要是聚光灯没有经过，或者快速经过却没有停留的话，都可能让我们视而不见。

快速眼动

如果人类视野的分辨率是中央高而边缘低，那为什么人眼看到的东西，并不像透过一个放大镜，看到的是中央放大、边缘模糊的图像呢？

眼睛运动的一瞬间，只能看清非常狭小的区域，确实无法仅凭一次注视就获得整个环境的信息。不过好消息是，勤能补拙，一次不够就再来一次，反复几次不就可以看完整了吗？就好比摄影师要拍摄一个花瓶，如果固定站在一个位置，就只拍到花瓶的一个侧面。花瓶不会动，但是摄影师可以动。只要多从几个不同角度拍摄，就能看到花瓶的各个侧面了。

我们的眼球上附着了很多强壮的眼肌，可以带动眼球快速旋转。有多快速呢？眼球转动的角速度高达 900 度/秒，一次运动可以在 1/10 秒内完成，这种活动称为扫视（维尔，2009）。扫视发生得如此之快，难怪我们根本意识不到。眼球不断快速移动，让环境中那些值得注意的对象依次对准中央凹，这样眼睛就持续获得高分辨率的成像（Welsh, Chua, et al.，2007）。

让我们回到前面聚光灯的比喻：如果聚光灯静止不动，它照射的区域就很小。现在来开个脑洞，如果聚光灯背后有一位灯光师在控制，他眼疾手快，能够在一秒钟以内快速调整聚光灯角度，让它照亮舞台的每一个角落，那么舞台看起来是不是就像开了全局灯光一样呢？眼睛这位灯光师，时刻都在调整聚光灯照射的位置，于是在我们的知觉经验中，会认为自己一下子就看到了整体。

中央凹的存在和工作原理，意味着视觉焦点几乎总是处于中央凹注视区域。既然中央凹的识别能力那么强，为什么还需要外围区域来提供边缘视觉呢？进化并不会无中生有、浪费资源，边缘视觉的存在当然也有意义。它处理了大量低分辨率的空间线索，负责感知方向，帮助大脑计划该往哪里移动眼睛，比如，视野中突然出现一个会移动的物体，它会带来危险吗，身体马上会调度资源来集中处理这个信息。中央和边缘视觉各司其职，大千世界才能尽入眼底。

选择性注意

大脑非常消耗能量，如果要在大脑中保存整个世界的视觉图像，需要很多认知资源，这完全没有必要。所以进化选择了更经济实惠的方案：按需所「见」。也就是只针对当前需要，快速地获取信息。看到的事物都与注意有关。我们会注意那些可以立即获得有用信息的区域，而不是关注整个周围环境。可以说，视觉思维的本质就是一个注意力的分配过程（维尔，2009），人们根据需要，主动选择注意什么、忽略什么。

选择性注意（selective attention），指的是把注意集中于某些对象，而不是同时关注许多。这是我们与生俱来的强大过滤器。即便身处陌生、嘈杂的环境，只需要简单扫视，我们便知道该往哪里走，接下来要做什么。这种快速感知周围世界、人、物体、模式的能力，我们并不会觉得有多了不起，毕竟已经习以为常了。但是，正在尝试创造人工智能系统的科学家却发现，这样的过程无比复杂。在我们醒着的大部分时间，身体各种感官默契配合，完成了复杂的信号收集和处理过程——就像大城市的交通系统，循环流动着忙碌而有序的车流——而我们对此却几乎没有觉察。

选择性注意不只是视觉的注意，它包含 6 种不同的任务类型（Wickens, Hollands, et al.，2015）：

• 大范围定向与场景扫描：比如查看图片或者浏览过程中打开新的网页。
• 监控：观察或扫描某些动态变化，如果超出一定范围，就执行某个行动。比如秒杀商品开卖之前，你盯着倒计时，随时准备按下购买按钮。
• 觉察：对预料之外事件的监控及应对。比如当你在会议上对着 PPT 讲解时，需要时不时留意 PPT 是否正常显示。
• 搜索：找寻预先确定的目标物。
• 阅读：处理文字、图片等符号化的信息。
• 确认：确认某些结果已经发生。比如下载已经完成。

接下来的几篇文章，我们主要关注视觉搜索过程，即如何在杂乱的视觉环境中找到特定的物体，它大致包含几个步骤：眼球运动 - 获取信息 - 解释信息并计划下一次眼球运动。

• 第一步，根据当前任务，确定搜索目标。
• 第二步，开始搜索符合要求的模式。视觉皮层会生成一组特征映射，分别检测不同的特征，例如垂直轮廓、大小或颜色。
• 接下来，依次进行眼球运动。首先搜索和注视最可能出现目标的区域，然后移动到下一个目标区域。

回见。

Ref

• Cone cell. (2020). In Wikipedia. https://en.wikipedia.org/w/index.php?title=Cone_cell&oldid=949785199
• 维尔. (2009). 设计中的视觉思维 (陈媛嫄, Trans).
• Welsh, T. N., Chua, R., Weeks, D. J., Goodman, D., Chua, R., Weeks, D. J., & Goodman, D. (2007, September 19). PERCEPTUAL-MOTOR INTERACTION: SOME IMPLICATIONS FOR HCI. The Human-Computer Interaction Handbook; CRC Press.
• Wickens, C. D., Hollands, J. G., Banbury, S., & Parasuraman, R. (2015). Engineering Psychology and Human Performance. Psychology Press.

这是摄影师 Eric J. Smith 2015 年发布在 Instagram 上的一张有趣的照片，他起名为「时代印记」。在这张作品中，你是不是一眼看见了那个熟悉的姿势——双手紧握手机，眼睛专心地盯着屏幕，感觉自己与周围环境全然隔离开来。照片中的人太过沉浸于手机上的内容，都没有发现眼前出现了一头鲨鱼。一旦穿越到数字空间中，我们经常会对近在眼前的事物视而不见。

注意力是数字时代的硬通货

在万物互联的时代，信息以数字方式流通，这种速度超越了过去所有的通信方式。一方面，需要人处理的信息越来越多；另一方面，作为信息的接收和理解者，人却始终受困于时间和认知的瓶颈：每个人一天只有二十四小时，一秒钟也不会多，而且人的注意力更是用一点少一点的有限资源。信息传播得再快，如果人理解不了，又有什么用呢？

身处这个时代，我们的确受益于几乎无穷无尽的产品选择。只要有需要，就会有满足这个需要的产品或产品组合。这些产品承载了海量的、不断更新和积累的信息，它服务于我们，同时也在吞噬着所有人的注意力——希望抢占人们更多的时间，这是很多产品或公开或暗藏的野心。

2020 年 Hootsuite 网站公布了一项统计结果，在全球各国 16~64 岁人群中，平均互联网日使用时长是 6 小时 43 分钟，也就是说，一天中人们有超过 1/4 的时间花在互联网上（We Are Social & Hootsuite，2020）。在中国，这个时长是 5 小时 50 分钟。如果你使用 iOS 系统，打开设置中的「屏幕使用时间」，就能看到 App 使用时长的排序。你可能会惊讶于自己在这些 App 上所花费的时间，也想不起来到底都用它们干了些什么。

永远在线，是数字时代的奇迹，也是很多人挥之不去的阴影。2019 年互联网趋势报告中有一个数据，26% 的成人几乎一直在线，而在 18~29 岁年龄段，这个比例高达 39%。

信息和产品如此丰富，既消耗了注意力，更导致了信任的稀缺。信任是建立关系的关键，人们一般要在长时间的互动中对另一方产生稳定的预期，信任才会出现。因此，建立关系也需要时间和投入（engage），一个人所能建立的关系数量有限，这又进一步加剧了产品对用户时间的抢夺。

注意力，逐渐成为一种价值度量。

注意力，就是数字时代的硬通货。

开启注意，应对复杂

在一个信息丰富的世界里，信息的丰富意味着其他东西的匮乏: 只要是信息所消耗的东西就会匮乏。信息消耗的东西是显而易见的: 它消耗了接收者的注意力。因此，丰富的信息造成注意力贫乏，需要有效地将注意力分配给可能消耗它的过度丰富的信息来源。

——赫伯特·西蒙

诺贝尔奖和图灵奖得主、人工智能和认知心理学领域的先驱赫伯特·西蒙，早在 1971 年就阐述了他对注意力经济的理解。他认为，许多信息系统设计者错误地将问题理解为信息稀缺，因而他们设计的系统总是向人们提供越来越多的信息。实际上，真正稀缺的是注意力，人们需要善于挑选重要信息的系统（Simon，1996）。

在任何时刻，人只能接收、解释一定数量的信息，据此采取行动。注意力是帮助我们筛选信息的过滤器。那么，注意是什么意思？我们都在注意些什么？是什么在影响注意力？这些问题，有助于思考我们如何与环境互动。对于数字产品设计师来说，熟知注意力的特征，以及注意力与思维、行动的关系，才能做到围绕人的感知、决策和行为去设计。

注意力是日常生活中的常用词，在心理学里会使用术语注意（Attention）。注意属于认知过程的一部分，它涉及到有限认知资源的分配，是知觉选择性集中的过程，会影响其他认知过程如记忆、决策等。注意有三个重要特征（Welsh, Chua, et al.，2007）：

• 注意是选择性的，仅允许特定的信息进入认知处理系统；
• 注意的焦点可以从一种信息来源，转移到另一种信息来源，比如你在玩游戏的时候，听到有人叫你的名字；
• 人们可以有选择地同时注意多个信息源，比如一边做家务一边听播客。

心理学一般用认知资源，而不是注意资源来描述认知加工过程中的投入。认知资源是一种注意的资源库或心理努力的总和。人类的认知资源有限，如果在一项任务上投入较多认知资源，其他并行的任务可能会受到干扰，所以我们很难「一心二用」，而会根据需要分配认知资源到各种任务中（威肯斯，2007）。

今天，西蒙所预言的信息过载、需要注意力频繁切换的数字世界已经成真，新技术、新平台、新应用仍然层出不穷。大脑的认知功能，也随着频繁使用新技术而发生变化，人们正在想办法适应快节奏的数字生活方式。我们无疑将面对越来越复杂的世界。产品设计师们必须试着理解，复杂对人意味着什么，背后的机制是什么；然后学会「管理」复杂，帮助人们更从容地应对生活和新的挑战。

复杂是世界的一部分，但它不该令人困惑。好的设计能够帮助我们驯服复杂，不是让事物变得简单（如果复杂是符合需求的），而是去管理复杂。

——唐纳德·诺曼

设计并不只是把不好看的东西变得好看，它的核心是要处理人与人造物的关系。认知资源稀缺和信任稀缺，才是互联网流量的瓶颈。如果不理解这一点，在设计数字产品时，就容易受困于很多细枝末节，而离设计的本质越来越远。良好的信息和界面设计，是开启人和新技术对话的途径。数字产品需要在眨眼之间吸引人的注意，并且传递信息。下一节，我们就来探讨这个过程背后的心理机制。

Ref

• We Are Social, & Hootsuite. (2020, January 30). Digital 2020: 3.8 billion people use social media. https://wearesocial.com/blog/2020/01/digital-2020-3-8-billion-people-use-social-media
• Simon, H. A. (1996). Designing organizations for an information-rich world. International Library of Critical Writings in Economics, 70, 187–202.
• Welsh, T. N., Chua, R., Weeks, D. J., Goodman, D., Chua, R., Weeks, D. J., & Goodman, D. (2007, September 19). PERCEPTUAL-MOTOR INTERACTION: SOME IMPLICATIONS FOR HCI. The Human-Computer Interaction Handbook; CRC Press.
• 威肯斯. (2007). 人因工程学导论 (张侃（等）, Trans.). 华东师范大学出版社.

我喜欢在地铁上看别人使用手机，尤其是正在浏览朋友圈或者微博的人：他们单手握着手机，拇指一下接一下地向上滑动屏幕；当屏幕内容滚动到一定位置时，拇指迅速地按下，让屏幕停留在视线刚好要看的地方；然后眼睛快速浏览，拇指随时准备下一次滑动——这种眼手配合，简直天衣无缝。

而当我在手机上看一篇很长的文章时，有时候也会意识到，自己滑动页面的速度并没有比看朋友圈慢多少。这时候我会忍不住问自己：我真的有在看吗？

我们确实都在看，只不过用的是扫视（scan），而不是阅读。

早期的网页浏览眼动研究发现，人们打开一个网页后，会非常迅速地判断是否值得花时间阅读，然后决定继续浏览还是离开。如果用户继续阅读，一般也只会扫视页面，有选择地跳读屏幕上的内容，而不会逐字逐句阅读。用户在网页上留下的浏览轨迹，大部分都近似字母 F 的形状（Nielsen Norman Group，2006）:

F 型浏览模式有以下特点：

• 在水平方向上从左向右浏览，一般会先阅读顶部的摘要区域；
• 不会阅读整个网页，但会向下移动视线，并再次沿水平方向从左向右浏览；
• 沿正文区域左侧向下垂直浏览。

距离最初的研究已经过去 15 年了，情况有变化吗？现在我们花费更多时间在手机屏幕上，F 型浏览模式还有效吗？2016~2019 年，Nielsen Norman Group 再次开展了详尽的眼动研究，结果表明，「扫视而非阅读」这一基本行为并没有改变，但是出现了 F 型以外的其他模式（Nielsen Norman Group，2020）。

今天人们在浏览网络上的资讯时，依然不会阅读页面上的所有内容，也不会仔细看大部分的文字。扫视页面的视线并不规整：视线会在页面上跳转，快速扫描一些内容，跳过部分区域，有时候又会回看之前浏览过的部分。

相比 2006 年，现在的网站和 App 的布局形式发生了很多变化，人们的扫视模式也因此变得多样：

这些令人眼花缭乱的模式，是用户适应灵活多变的排版设计的结果，而信息搜寻和阅读行为本身，并没有太大变化。和 15 年前一样，内容创作者需要接受这样一个事实：人们不可能仔细地阅读内容，而只会挑出最符合当前需求的信息。至于愿意花多少时间阅读，取决于四个因素：

• 动机：这些信息对用户来说有多重要？
• 任务类型：用户是在寻找特定的事实，还是在浏览新鲜有趣的信息，或者研究一个主题？
• 专注程度：用户在解决眼前的问题时有多专注？
• 个人特征：这个人更喜欢随意扫视，还是在阅读时通常会非常注重细节？

在考虑数字产品的信息呈现时，设计师应该思考用户此时的目标，知道他们会对什么内容感兴趣。要为「扫视」这一普遍的习惯去优化设计，而不是把用户当做时间充裕、会慢条斯理仔细查看所有内容的读者。

Ref

• Nielsen Norman Group. (2006, April 16). F-Shaped Pattern For Reading Web Content (original eyetracking research). https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content-discovered/

• Nielsen Norman Group. (2020, April 5). How People Read Online: New and Old Findings. https://www.nngroup.com/articles/how-people-read-online/

人类的视觉很神奇，能够用较少的认知资源来感知周围的环境，并安全、准确地与之互动。数字产品也应该适应并支持视觉感知的特点，提供良好的视觉体验。在接下来的10+篇文章，我们将了解人们是如何观察世界的，视觉系统为什么要以这样的方式运作，以及可以怎么改善产品的视觉体验。

现在，先来做一个热身的小游戏。

请在下面的扑克牌中，选择一张并记住。

选好了吗？请在心里默念一遍这张牌的花色。然后，往下翻。

-

在这些扑克牌里，并没有你选的那一张。我说对了吗？

我怎么就能事先知道你会选哪一张，然后把它换掉呢？那你可能要问问自己：除了你挑选的那一张，还能记起来其他几张扑克牌的花色吗？现在，你可以翻回到上一张图片看看。

🤹‍♂️

没错，这五张扑克牌全部都换掉了，不知道你之前有没有注意到。与其说这是个鳖足的小魔术，不如说它是个无伤大雅的恶作剧。但这的确揭示了一个重要的现象：我们真正留意到的信息，比想象中要少很多。

每天早上当你醒来，一睁开眼，周围的世界好像一张张全景照片，由眼睛捕捉下来。但这种印象只是错觉。我们以为自己对所处环境一目了然，只有在走神的时候才会忽略一些信息。实际上，被忽略掉的信息永远是绝大多数，只有少量信息成功引起了我们的注意。你可能会疑惑：这没有道理啊，我明明都看见了。别着急，我们会慢慢了解这个过程背后都发生了什么。在开始之前，我们再来看一些数字产品的例子。

下面这个实验很简单，只需要几秒钟。你可以请身边的人试一下。

准备好了吗？那我们开始吧。

请在下面这个商品分类页面中，找到「炒货」：

找到以后，请往下看——

🤹‍♂️

现在，你可以回想起来炒货在哪一个分类下面吗？它属于左侧罗列的哪个大类呢？你还有留意到其他品类叫什么吗？它们是怎么排列的呢？

这些问题大部分人都回答不上来。我们确实都在认真的看，但是只看到了很少的一部分。这就是选择性注意的结果。

当我们带着明确目标去搜索信息的时候，通常会过滤掉不相关的事物。一方面，我们主观地认为自己洞悉周围发生的每一件事情；另一方面，我们并没有真正「看见」多少。这真是矛盾啊！一览无遗的感觉是怎么来的呢？心理学家解释说，人在某个特定时刻能看到的东西很少，但是大脑会指挥眼睛反复快速运动，以便抽取视觉环境的任何一部分，再叠加整合到一起（O’regan，1992）。这个过程如此迅速，我们会以为自己一下子就看到了整体。关于这个问题，在后面文章还会详细介绍。

我们很少会留意自己在看什么、怎么看。比如，你正在阅读这段文字，似乎一眼就能看到一个屏幕的内容。实际上，视觉真正起到关键作用的部分，只有眼睛视网膜中央的一小块区域。至于视野的其他部分，并不能真正看清所感知到的内容。如果你把目光集中在当前这一行，稍加注意，会发现靠近屏幕顶部或底部的文字，其实是模糊的。你在「看」那些位于边缘的文字，但你没有「看见」它们。

视而不见，大多数时候并不是因为走神，也不是阅读能力不足，它是人类视觉的基本特征。

在使用数字产品的界面时，人们也常常看不见那些近在咫尺的信息，这令设计师很头疼。例如，在填写网页表单时，错误提示（例如登录密码错误）一般出现在两个位置：表单的顶部，或是输入框的行间。哪个位置的信息容易被忽视呢？

没错，在表单顶部的信息容易被忽视，在输入框附近显示错误提示会更好。这是因为填写表单时，人们的注意力高度集中，视觉焦点会停留在当前输入框，那些远离视觉焦点的位置，就容易看不见。而且屏幕越大，越容易视而不见。

你可能会想，在电脑网页上容易看不见，但是在手机上应该不至于吧？毕竟手机屏幕就只有这么大。

前几天，我妈妈拿着手机过来问我：“我怎么找不到签到了？你帮我看看。”我一看，那是一个运营商 App 的首页。我问：“你平时都去哪里签到呀？” 她点了点首页中部的「会员中心」图标，说：“就是从这里进去，然后就可以签到了。”

“这两天 App 变了。现在我怎么都找不到了。这里我看了好几遍，还是没看到签到在哪里。“ 妈妈在会员中心页面上下滑动，没有找到她熟悉的签到。这时我点返回按钮，回到 App 首页，指着首页左上角的「签到有礼」告诉她：“签到移到这里了”。

妈妈恍然大悟：“哦，原来在这里，我就是没看到。”

确实就是没看到。签到离会员中心只有几厘米的距离，依然被无视了。这就是选择性注意的力量，也是习惯的力量：用户已经习以为常地在某个地方做一件事情，一旦改变，他们可能会不知所措。

视而不见，可能是无心之失，也可能是有意而为之。也许你没有听说过广告盲区（Banner Blindness）现象，但是你一定多少习得了这种能力：在浏览网页时，能够自觉地忽视网页顶部或右侧那些长得像广告的区域，不论它们实际是不是广告。早在十多年前，眼动研究（用仪器记录使用者视线的轨迹和停留情况）就发现了这一现象。

上图是用户在浏览网页时的视觉热点图。视觉聚焦和停留最多的区域用红色表示，黄色次之，蓝色更少，灰色地带则说明没有吸引任何注意力。图上还有一些特意标记出的绿色方框，它们是网页上的广告区域，如你所见，那上面根本没有视线停留。这就是广告盲区现象：用户已经习惯性忽视那些网页中经常出现广告的区域。

经过十多年的进化，现在更受广告主青睐的是社交媒体信息流广告，也就是那些插入到信息列表中的广告，展现形式与用户所浏览的普通内容一样。这样一来，用户就不得不重新学习如何忽略广告了。

下一篇文章，我们会说说人们在屏幕上阅读的方式。

Ref

O’regan, J. K. (1992). Solving the” real” mysteries of visual perception: The world as an outside memory. Canadian Journal of Psychology/Revue Canadienne de Psychologie, 46(3), 461.

心理学有很多研究领域，每年都会产生海量的研究成果。作为设计师而不是心理学研究者，面对浩如烟海的资料，应该如何挑选出与数字产品设计相关的内容，又应该以什么线索去组织和呈现它们呢？

还是先让我们回到设计、回到自身的需求去思考。如果说设计的基本问题是要处理人和人造物之间的关系，那么设计数字产品则要处理人与数字化系统的关系。

但是整体关系这一颗粒度太大，需要继续拆分。比如，你也许想到，可以按照经典的用户体验五个层次——战略层、范围层、结构层、框架层、表现层来划分，但这个框架明显不是以「人」为中心的，不好串联心理学研究的庞杂内容。我们依然要回到人与系统关系，寻找最基本的视角，比如时间和空间。因为数字产品本身就是虚拟的，空间属性很特殊，更多是体现在不同的设备和平台差异上，所以用空间作为框架并不现实。而时间维度则很适合，人与系统的互动原本就发生在不同的时间尺度之中，我们可以根据互动所传递的信息和完成的目标，将人机互动的层次粗略划分为：

• 10 秒以内，传达瞬时的信息
• 10 秒~1 天，为达成目标，形成一系列行为流
• 1 天以上，反复与系统互动而产生持续关系

第一个层次主要涉及使用者接收信息和做出反应的过程，以视觉感知和认知加工处理为主，是视觉/UI设计师、文案作者的工作重心。第二个层次涉及“使用者行为-系统响应-使用者行为”的持续互动过程，一直到阶段性目标达成，这是交互设计师/产品设计师/UX/UI 设计师的工作内容。第三个层次持续的时间更长，当使用者在不同时间和场景下持续与系统互动，它们之间就建立了一种长期关系，如何促进关系发展，是决策者、产品经理、设计师、运营人员和整个团队都需要考虑的。

认知心理学家诺曼曾经提出，产品设计应该解决三个不同的认知和情感处理过程，也就是情感化设计中著名的三个层次：本能、行为和反思层次（诺曼，2015）。这三个层次所对应的时间周期各不相同。

本能层次先于意识和思维，在与产品深入交互之前，人们会基于视觉和感觉即时反应。本能反应让人迅速判断好坏、形成第一印象。所以本能层次的设计更多强调产品给人的初步印象，着重于外观、触感等。

行为层次与产品的使用体验相关，用户在一定时间内使用产品并完成目标。这一层次的设计需要考虑功能、性能及可用性。如果人们在使用产品的过程中感到迷惑或者沮丧，会产生负面情感。如果产品满足了需要，并且在实现预期目标的过程中轻松愉悦，人们就容易产生积极的情感。好的行为层次设计，总是以人为本，专注于了解和满足使用产品的人。以往的交互设计和可用性实践，大都是在影响这一层次的认知。

反思层次则处理意识、感觉、情绪及知觉，包含有意识的思考例如诠释、理解和推理，和对以往经历的反思，可以将过去使用产品的经历与更广泛的生活经历相融合。比如，美的概念来自有意识的反思和经验，也受到知识、学识和文化的影响。

有趣的是，认知心理学家斯坦诺维奇提出的三重心智模型，也体现了三个不同层次的划分。双系统理论曾经是心理学界的主流理论，认为人的大脑存在两个系统，系统 1 的特点是快速、直觉、自动化，通常由情绪驱动，经常被习惯、经验、刻板印象所支配，很难控制或修正；而系统 2 则缓慢、理性、有意识，它耗费资源但不容易出错，并且能够监控系统 1 的活动，纠正其偏误。

斯坦诺维奇将双系统理论改良为双过程理论，并提出了三重心智模型，将人类的认知能力分为三个层次：自主心智，算法心智，反省心智（斯坦诺维奇，2015）。人对各种输入的加工以及行为反应，可以纳入到这个模型中理解。

• 自主心智：主要受进化影响，认知过程自主发生。只要触发性刺激出现，不需要过多思考就会强制性执行，速度很快，属于自动化过程。例如，识别人脸；感知颜色；检测威胁；情绪对行为的调控；做饭、演奏乐器等内隐学习的加工过程。
• 算法心智：对事物做出思考与判断的认知加工。加工速度慢、大脑运算的负荷高，是有意识地解决问题的过程，包括信息处理速度、工作记忆、执行功能等。
• 反省心智：主要关注个人的整体目标以及与目标相关的信念，是监控、调节自主心智/算法心智的机制，以产生最优的行动。比如观察自己的情绪反应、从错误中学习等。

本系列将参考三重加工心智和设计的三个层次，从认知和设计的三个层面出发形成总体框架，对应实际工作中的三个设计领域——视觉设计、交互设计和产品运营设计，然后在认知心理学、人因学、工程心理学、可用性工程、社会心理学等学科寻找对应的理论和研究进展，介绍给大家。希望借由这种探寻与梳理，搭建起理论研究和实际工作的桥梁，以便大家在工作中遇到实际问题时，可以根据线索溯源而上，找到现象背后的原理，获得与以往不同的视角和方法，来深化和优化设计。

接下来，就让我们开启数字产品设计的心理学之旅吧！

Ref

• 唐纳德·A·诺曼. (2015). 设计心理学3-情感化设计 (何笑梅 & 欧秋杏, Trans.). 中信出版社.
• Norman, D. (2002). Emotion & design: Attractive things work better. Interactions, 9(4), 36–42.
• 斯坦诺维奇（Stanovich, K. E. ） 著, & 张斌译. (2015). 超越智商：为什么聪明人也会做蠢事 (第1版). 机械工业出版社.

不明白各种调料作用的烹饪，就像蒙着眼睛做烹饪……有时候这样也行得通，但当出问题的时候，你就不得不想着如何去改变……正是理解使我既有创造力又能成功。

——Rose Levy Berenbaum，The Cake Bible

在设计师漫长的成长道路上，有一个十分要紧的问题：什么是好的设计？

这个问题关乎设计师的价值取向、审美品位，是自我训练过程中需要反复回答的问题。大部分的设计都看得见甚至摸得着，任何人都可以张口评价。同一个设计，可能有一部分用户很喜欢，另一些用户会感到挫败，而设计同行交口称赞，工程师嗤之以鼻——所以，这到底这是不是一个好设计？

设计总是涉及多个利益相关者。是不是应该赋予使用者以最高权重？毕竟是为他们而设计的。让我们先来做几个设想：有一款游戏，制作精良，让人秒上瘾且欲罢不能，玩家为了升级，不停地熬夜和刷信用卡充值。这个是不是好设计？有一幢宏伟建筑，花费了数百年才建成，劳民伤财，但是却成为后人的「世界 x 大奇迹」。这个是不是好设计？如果只花一半时间、只死伤一半的人呢，是好设计吗？如果这幢建筑后来还是默默无闻呢，是好设计吗？又比如，有一种社会福利制度，在 A 国多年都运作良好，已经成为民众共识；而在 B 国则引发了社会动乱。这是不是好设计？

你大概已经感受到了，评价一个设计好不好，是一件几乎没有成本但却疑点重重的事情。我们既可以凭直觉去主观评价一个设计，也可以继续往下延伸：

• 这个设计的对象是谁？相关的人都包括进来了吗？这些人可以再分成不同类别吗？
• 这个设计最初目的是什么？是否达成了呢？设计者会如何衡量？
• 这个设计在空间/时间上会影响到哪些人？如何影响？影响会如何变化？
• 不同人会如何评价它，为什么？这些评价应该如何对待？
• ……

反思自己的设计，思考何为好设计，是设计师一生的课题。很多设计名家都提出过自己的设计准则，比如德国工业设计大师 Dieter Rams 的设计十诫：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

Good design is innovative 
好的设计是创新的

Good design makes a product useful 
好的设计是实用的

Good design is aesthetic 
好的设计是美观的

Good design helps us to understand a product 
好的设计使产品易懂

Good design is unobtrusive 
好的设计是克制的

Good design is honest 
好的设计是诚实的

Good design is durable 
好的设计拥有持久的生命力

Good design is consequent to the last detail 
好的设计胜在细节

Good design is concerned with the environment 
好的设计对环境友好

Good design is as little design as possible 
好的设计恰到好处，少即是多

这些准则来自设计师数十年的经验，来自深刻的洞察和信仰，无疑经过了现实和时间的检验。但是我们可能容易忽略，准则的背后包含了许多对人的理解，比如「好的设计是诚实的」，诚实意味着什么？为什么诚实对人与物品的互动很重要呢？人为什么喜欢优雅？什么感觉是优雅？如何传递出优雅的感觉？……这些洞察和理解隐匿在简练的文字背后，让人难以触及它们原本更丰富立体的形象。

每个人都可以提出设计准则，那么谁的更合理更有说服力呢？一个设计好还是不好，设计者无法决定，也无法交给机器或系统来评判，最终还是要回到人的真实体验。这指向了问题的根源：

如何理解人？

最直接的做法，就是去直接经历作为人会有的各种体验。只不过，每个人都有局限，不可能经历各种情境和事件，所以每个人对他人的同理也会有限。幸运的是，人类从来没有停止过对自己的研究，生物学、神经科学、心理学、社会学、人类学、经济学、哲学、文学、历史学等等学科，都以「理解人」为关键课题，这其中蕴含了大量的洞见，等待我们去发掘。

数字产品设计，要设计的是人与数字产品的关系。数字产品并不是一个有形的、不变的物品，承载它的硬件可能形态万千，关键是有一个与人互动的界面，例如屏幕、鼠标键盘、游戏控制器，也可能没有界面，例如智能音箱。但它们都是一个系统，有着复杂的规则、数据交换和处理过程，可以响应人的输入并提供人可以理解的输出。所以，理解人与数字产品的关系，也就需要理解人与机器、人与算法、人与关系网络、人与系统的关系。这种关系首先发生在感知、认知、行为层面，正是心理学和认知科学主要的研究范围。而心理学跟计算机、工程学等交汇之处，又产生了 HCI（Human-computer interaction)、HF（Human factor）等研究领域。这些研究领域致力于研究人如何与机器、复杂系统互动。在这些领域做设计的人，一般被称为交互设计师。

曾经，在知乎上有一个问题：做交互设计，最难的地方在哪？

当时我写下了这样的回答：

本质上讲，交互设计做的是「翻译」的事情，帮助人和系统/机器/产品流畅地对话。人和机器讲的是两种完全不同的语言，两者有迥异的属性和脾性，要充当它们之间的翻译，难在哪里？难就难在：我们既不懂人，也不懂机器。

我们不懂人：人为什么会思维，智能是怎么回事？人如何认知？人的动机、需求、情绪、行为都是如何产生的？人在什么情境下会有什么样的变化？人怎样接收和理解信息，如何形成观点？不同的情绪如何影响行为？人如何决策？人如何学习？……

我们不懂机器/系统：机器和人的关系是什么？机器的原理是什么，为什么必须这么运作？机器与人的需求有哪些鸿沟？人难以理解哪些机器的逻辑？机器哪些部分与人直接互动？机器可以如何分层，每一层如何影响互动界面？人机互动的媒介是什么，如何承载这些互动？不同情境下，机器的反应由什么要素和条件驱动？机器的灵活性怎样，有多大的自主性应对人的指令？……

在这样一种尴尬下，我们还得在一定的时间限制内，通过微调系统的一小部分，达成不一定清晰的目标。工作环境也好，职责划分也好，设计师能力也好，都加重了这个难。

我们既不懂人，也不懂机器。而这恰恰也是设计的价值所在：让机器更懂人。 数字产品设计，以及与它相关的互联网产品设计、用户体验设计、交互设计、用户界面设计等等，可以说是设计领域中最年轻的分支。它可以从成熟的设计学科例如建筑设计、工业设计、平面设计等汲取经验，但也需要处理独特的全新课题。比如，人类居住的经验可以追溯到史前，而大规模使用电子产品和软件的历史却只有几十年，人们是如何快速学习并适应不断变化的交互界面的？

在方兴未艾的领域做出经典的好设计，一点儿也不容易。而解锁好设计的其中一把秘密钥匙，我认为是从各学科研究成果中，去学习、去发现、去增进对人的理解，然后促进人与复杂系统的对话。

心理学自然是一个理想的切入点，它研究人类内在心理过程、精神功能和外在行为。不过，本书并不是一本宽泛的心理学科普读物，而会更关心界面设计、交互设计、产品设计与心理学相关的部分。实际上，我主要参考和梳理的是以下研究领域在设计中的应用，它们都与心理学密切相关：

这些研究领域涉猎广泛，有数不清的理论积累和研究成果，我只能尽我所能，查阅一部分较为经典的文献，并尝试结合相关的设计问题、实际案例，整理输出。

组织研究和管理学大师马奇曾说过，人类善于通过故事和模型来学习（马奇，2011）。人们渴望理清因果关系，并用叙事、模型或者理论阐述出来。但因果往往是复杂的，模型建造者力求让诠释既贴近现实又容易理解，而这两个目标本来就相互冲突。模型建造者必须选择是建造复杂模型、犯过度拟合错误，还是建造简单模型、犯过度简化错误。

这个系列，00 希望与你一起探索如何从模型中学习，也就是从学者们所做的关于人的研究中，汲取数字产品设计师所需要的养分，甚至找到可以直接使用的理论框架，来提升我们对人这个复杂对象和群体的理解，从而做出更好的设计。

作为长期工作在一线的产品设计师，并不太熟悉学术研究的话语体系、研究方法和论证过程，要接触并理解这些理论并不容易。如马奇所提醒，我们偏爱简洁易懂的模型，也就容易犯过度解释和过度简化的错误。但我相信，这是促进设计师深入「理解人」的重要一步，这个过程甚至能加深我们对自己思维偏误的认识。当我们开始对现象感到好奇，提出问题，搜寻相关的理论研究，查找一手的文献资料，了解到前人对此已经有很多思考和实践，这本身就是一个充满未知与收获的过程，也能品尝到如打开盲盒般的惊喜（或惊吓）。如果能引发讨论，让大家真正开始关注和思考人的因素，那就更好了。

这的确很难，但值得尝试。

Ref

• 凯瑟琳·加洛蒂. (2016). 认知心理学：认知科学与你的生活(原书第5版) (吴国宏 & 等, Trans.). 机械工业出版社.
• Human factors and ergonomics. (2020). In Wikipedia. https://en.wikipedia.org/w/index.php?title=Human_factors_and_ergonomics&oldid=965650263
• Wickens, C. D., Hollands, J. G., Banbury, S., & Parasuraman, R. (2015). Engineering Psychology and Human Performance. Psychology Press.
• Usability engineering. (2020). In Wikipedia. https://en.wikipedia.org/w/index.php?title=Usability_engineering&oldid=962384379
• Behavioral economics. (2020). In Wikipedia. https://en.wikipedia.org/w/index.php?title=Behavioral_economics&oldid=966195574
• Behavioural design. (2020). In Wikipedia. https://en.wikipedia.org/w/index.php?title=Behavioural_design&oldid=949651482
• 戴维·迈尔斯. (2016). 社会心理学（第11版） (侯玉波, 乐国安, & 张智勇, Trans.). 人民邮电出版社.
• 詹姆斯 G. 马奇. (2011). 经验的疆界 (丁丹, Trans.). 东方出版社.

十年前，互联网产品的用户体验设计还是一个陌生的名词，从业者刚刚开始摸索和实践。UX、UI、Usability、HCI、UCD、Persona、交互设计、信息架构、体验度量、眼动实验、设计准则、响应式设计、移动端设计……大量的新名词、新知识涌入，而手中要完成的设计几乎都是全新的，只能摸着石头过河。

十年过去，数字产品的种类极大丰富，每一个主流平台的应用都不计其数，而且每天还在快速增加。设计这些应用的过程，我相信包含了产品设计者的很多疑问、猜想、假设、纠结、迷惑、探索和求解的尝试。这十年间，互联网产品设计和体验设计的工作发生了很多变化。比如，曾经陌生的概念和方法已经普及；每一个垂直领域都有了十分成熟的产品形态和界面模式；iOS 和 Android 的设计语言和规范已经数十次更迭；设计工具越来越丰富、聪明、省力；设备、平台、环境都越来越强大而复杂；支持语音的设备增多，而它们可能并没有图形界面；用户的使用经验丰富，产品也积累了海量的数据；从业者人数持续增加，行业知识的积累和流通速度越来越快。

这些剧烈的变化有如潮水，后浪翻腾，始终奔涌向前。而在潮起潮落之间，又让人逐渐留意到潮水之下那些岿然不动的礁石，任凭涨落，它们依然如是——技术如潮，人如礁石。技术浪潮总是在快速更替，而人的基本需求变化却很小。真正不断变化的其实是外部环境，是新技术为适应本质需求而出现的新形式，以及由此产生的新价值。

1999 年，可用性领域的专家 Jakob Nielsen 总结了网站传达信任的 4 种方式：设计质量，信息透明，全面、最新的内容，以及与内外部网络的连接（Nielsen，1999）。在持续多年的研究中，他和研究团队观察到，这些因素在今天继续以相同的方式影响着用户。尽管互联网本身发生了巨大的变化，设计模式和趋势也随着时间而改变，但是人类的行为却没有太多出人意料的地方，用来评估用户行为和偏好的方法，与二十年前几乎一样，将来也不太会改变。可用性和用户体验研究专家 Kate Moran 感叹道：

The more things change, the more they stay the same.

事物越是变化，就越是不变。

不久之前，在史上第一次空荡荡但却是迄今为止规模最大的苹果 WWDC 大会上，苹果公司 CEO Tim Cook 宣布了大家久违的 One More thing：苹果自研电脑芯片。新的芯片与软硬件深度整合的能力让开发者们兴奋不已。而在这之前，iPhone 和 iPad 的性能就已经超过了许多电脑硬件。谁能想象，十年前，智能手机的普及才刚刚开始呢？2020 年第一季度，国内三大运营商的 5G 用户已经超过 5000 万，速度和流量已经越来越不成为产品、内容和体验的限制。而谁又能想到，十年前，比特币和区块链只是在极客圈传播的晦涩概念，AI 深度学习的各种算法还在笨拙地起步和优化，而云计算依然是一个让人云里雾里的抽象概念？

技术进步到今天，我们能利用它们做些什么？科技向善，什么是真正的善呢？当几乎所有的产品形态都已经充分探索过后，应该如何继续创新？也许正是技术的强大和工具的丰富，更加反映出思想的匮乏，以及对人的理解的匮乏。这些问题的答案，看似变化万千不可捉摸，但反而提醒我们应该转身，去向那些在变化中保持「不变」的部分发问：人如何感觉、思考、行动？人到底需要什么？

手机已经成为我们身体的延伸，每个人掌中所握的这个数字「大脑」，比十年前进化了不知道多少倍，而使用这些超级工具的人类大脑，却不可能在短短数十年升级换代。我们的身体和大脑依然是适应原始野外生活的产物——视觉、运动能力一流而理性不足，是拥有七情六欲的社会性动物。人的基本需求并没有太多变化（只是在马斯洛需求层次的底部增加了一层 Wifi 需求），人最大的期望，依然是各种期望都能得到满足。而人对工具和外部环境的需求，基本上依然能用四个字就可以概括——多，快，好，省。

2020 年儿童节，一家把玩具卖给大人的潮玩品牌泡泡玛特向港交所提交招股书，拟在港股主板上市。泡泡玛特的估值在短短的一年内翻了 14 倍，让人瞠目结舌。泡泡玛特售卖的产品非常简单：高约 4.5 厘米的搪胶人偶，它一般是某个爆红的 IP 形象，但也只能用作摆设或者收藏。而吸引无数年轻人入坑的，除了搪胶人偶的造型外，更多是拆开「盲盒」时的未知和兴奋。盲盒的概念一点都不新潮，它其实就是几十年前小浣熊水浒卡、遍布日本街头的扭蛋机的新版本，只有当你购买打开后，才知道到底获得了什么宝贝。重新换上适应今天潮流和审美偏好的概念和包装，盲盒依然能够征服这一届年轻人。今天我们虽然手握算力超强的工具，但是内心深处依然是会被玩偶盲盒的神秘和刺激感所吸引的天真孩童。世界在变，而我们自身的改变，远没有想象中那么剧烈。

作为数字产品的设计者，我们会一直处于这样的分裂中：一边是日新月异的新名词、新技术、新设备、新平台，一边是我们以为同质、稳定但又永远琢磨不透的复杂人性。如何在两者之间搭建起桥梁，让变化的技术适应不变的需求，恰恰是设计师所肩负的职责。资讯、社交、娱乐、健康、教育、办公、购物、创作……无论是为满足哪一种需求而设计，都应该一次又一次地回到人的身上，去思考和理解用户/客户/买家/玩家/学员/消费者们身处什么样的环境，受到哪些动机和需求的驱使，头脑中有着怎样的想法和预期，会如何选择、行动、反应，又会产生哪些情绪和感受，期待什么样的体验和服务。这些理解的过程，是连接技术和人的开端。

设计数字产品，离不开对人的观察和理解。在讯息万变中，能够洞察共性，找到真正不变的东西，是我们最重要的课题：

• 人在特定情境下，会产生特定的需求和目标
• 人会采取行动去达成目标
• 人的生理特点和局限决定了信息加工方式
• 人的反应和行动会随着情境变化而调整
• 人和数字产品之间是一种持续对话的关系，但鸿沟一直存在，而且日益复杂
• ……

我相信，无论数字产品如何演变，这一进程都会围绕「人」来展开。数字产品设计中真正不变的，就是：

理解人，构建人和系统的关系。

‘滴滴滴’

早上，你被手机闹铃和智能手环的震动同时唤醒，数字化生活新的一天又开始了。关闭闹铃，天气预报弹出提醒：“今日多云转阵雨，建议带伞；天气雾霾，已为您开启空气净化器。”这时候你还躺在床上，习惯性打开手机刷热搜，看到全球疫情数据更新，又是再创新高的一天。你叹了一口气，翻身起床。

准备早餐时，一股困倦袭来，你打开手机播放音乐，最新的歌单是根据收藏历史、本周上榜新歌、现在的时间和天气、好友的分享等等数据动态生成的。出门上班前，你对着手机说：“嘿 Siri，播报上班路线交通状况”，地图弹出导航结果，显示拥堵路段，打车预估需要 64 分钟。今天太堵了，还是坐地铁吧，你想。

出门后，你把手机音频切换到常听的播客，向地铁站走去。早高峰人流量大，在地铁入闸的地方挤满了人。你打开手机准备扫码，可是前面的人几次扫码都不成功，你有点烦躁，因为看到离上班时间不到半小时了。

半小时后，你急匆匆地走进办公室，手机已经自动打卡成功，并没有迟到，还好。电脑已经按时启动并且恢复到之前的工作状态，昨晚在家里修改的文档也已经在云端同步过来。电脑和手机同时弹出提醒，半小时后要参加一个视频会议。

结束一天工作，晚上你跟朋友约在一家新开的餐馆吃饭。在出发前你用手机排号，还领取了优惠券。来到餐馆，你在等朋友的时候突然想起这个月的电费还没有交，然后花了两分钟在手机上缴费，顺便开通了每月自动缴费的功能。

吃完饭回到家，你纠结了一会儿是去跑步还是打开 Switch 上岛看看大头菜的价格。准备睡觉前，想起家里的口罩快没有了，马上用手机下单，然后把今天一天的花费都记到记账 App 里。这时候，iPad 弹出提醒，你追的剧更新了最新的一集，已有 721764 人观看，于是你点开了视频……

以上的场景你大概并不陌生，一天中可能会经历很多类似的片段。这些片段展示着一幅图景：数字产品全面渗透并构筑着生活的方方面面。最近二十年，人类完成了从物理世界到数字世界的大规模体验迁移，以手机应用为代表的虚拟数字产品，逐渐成为日常生活必不可少的工具，也在不停地塑造着已逐渐成为主流的数字体验。

有些记忆虽然时间并不久远，但是已经面貌模糊：我们渐渐想不起曾经的纸质杂志大部分是月刊，很多报纸一周才出一份；不太久以前，人们主要用电话、邮件和短信沟通，写邮件时会斟酌文字，写好以后要再三检查才发送；在网上购物，也许需要等上一周或更长时间；以前只有一小部分餐饮店提供外卖，大家必须找时间去到店面老老实实排队……而在今天的数字洪流中，我们盼望一切即时可得。

这个系列的主题是数字产品设计与心理学。

什么是数字产品呢？这个名词让人熟悉却又感觉很模糊。大家都比较了解「互联网产品」，比如每天都会用到的微信、支付宝、抖音、Windows 操作系统、Siri 语音助手等等。那为什么不直接叫互联网产品设计呢？想想看，以后会有越来越多的实体物品都是互联网产品，比如小米手机肯定是互联网产品，但手机硬件本身却不是数字产品（MIUI 是数字产品）。又比如特斯拉汽车，它难道不是联网的吗？汽车是不是互联网产品呢？在物联网的语境下，几乎所有的实物都可以接入网络。再比如，在海底捞最新的智慧餐厅里，每个餐盘都内置了 RFID 芯片，从中央厨房生产、物流配送到后厨传输，每个环节都有消耗记录，甚至可以用 App 通过智能菜品仓库配菜、用机器人传菜。这样一来，是不是以后大部分的物品都可以称为互联网产品呢？

而我想讨论的，是为满足特定人群需求，以数字形式存在的可交互产品。数字产品包含可编码的信息，可以通过网络来传播、使用、交换、消费。百度百科这样定义数字产品：

狭义的数字产品指信息内容基于数字格式的交换物或通过因特网以比特流方式运送的产品，而广义的数字产品还包括基于数字技术的电子产品或将其转化为数字形式通过网络来传播和收发，或者依托于一定的物理载体而存在的产品。

可交互数字产品最典型的形式，是主流平台如 Windows、iOS、Android 上面的软件和应用。可交互意味着用户以某种方式使用产品，产品持续响应用户的操作，最终达成目标。所以，像数字音乐专辑这一类纯内容的产品，并不是本系列所指的数字产品，而能够播放数字音乐专辑的软件，例如 Spotify 和网易云音乐，则属于数字产品。同理，微信公众号的文章并不是本系列所指的数字产品，但是承载公众号的微信公众平台相关的功能，例如文章编辑器、后台数据管理、素材管理、专辑管理等这一套系统，则属于数字产品。

那么，数字产品其实就是软件吗？也不完全是。比如语音智能音箱，它并没有可见、可直接操作的软件，但是它提供的功能确实以数字形式存在，而且用户可以与之交互，它是带有语音交互界面（VUI）的数字产品。总之，数字产品是一套包含数据、内容、交互规则的系统，它可以运行在不同的硬件平台上——电脑、手机、手表、汽车、眼镜等等。那么，游戏是数字产品吗？游戏属于数字产品，但并不在本系列讨论的范围之内。所以，严格来说，这个系列应该叫做：可交互的非游戏类数字产品设计与心理学。

非游戏类的数字产品，通常以某种工具的形态在持续影响着我们的生活。人选择了工具，工具也塑造了人。当我们头脑有疑问、内心有触动、需求待满足、空虚感袭来时，很多时候的下意识反应都是拿起手机干点什么。我们在数字产品中投入的时间越来越多，也正在将越来越多的生活体验和决定「外包」给它们来处理。它们既是任劳任怨的助手、考虑周全的管家，也可能是内心打着小算盘的油嘴滑舌的中介，有时候甚至变身成为恨不得占有你更多时间和注意力的电子宠物。如何与这些数字产品互动，影响着我们的生活体验和品质。

如果我们自己既是数字产品的使用者，同时又是设计者，平时会如何挑选、使用这些产品，又是如何思考和设计它们的呢？在我们确定某个产品功能的方案时，背后的依据是什么？这些依据真的可靠吗？如何能设计更好的产品，让我们身处在这个变动不居的时代，能拥有更丰富而从容不迫的生活呢？

请关注 00 后续的推送吧 💬

在写完《创作是最好的理解》以后，有一个问题开始纠缠着我：

什么是理解（understanding）？

你想必也遇到过这样的状况：读一段很难理解的文字，虽然每个字都看得懂，但是完全不知道它在说些什么。好多时候满心想理解，但到头来云里雾里。更让人警惕的是，当下以为自己懂了，过了几天或者换了个情境，心中又升起好多个问号。

作为一个学习者，我自然希望能理解所学的内容；可是「理解」本身意味着什么，我至今却不甚理解。

理解之难

这两天在看陈嘉映老师的《何为良好生活》。在知行关系那一章里，陈老师提到「深知而与行合一」。我们都知道，知行合一不易。王阳明说：“未有知而不行者，知而不行只是未知。” 这可是对人提出了很高的要求。如果按照这个标准来衡量，我们所知那是少得可怜。

好多人生道理，我们听说了，也知道了，但可能没有什么体会。先前的知和后来的知，不在一个知是对的一个知是错的，而在知的深度不同。……知道为恶仍为之，那说明我们只停留在“见闻之知”上，而没有切身体会。

《何为良好生活》

知的深度不同，说得多好啊。在这个信息爆炸、知识爆炸的时代，道理也爆炸。我们好像越来越甘于，甚至乐于停留在「见闻之知」上面。而真知呢，是道理深深嵌入到我们的身心，经历过，咀嚼过，生出了万般滋味，明白现在的「知」，已经不同于过去的「知」。

有好多问题，在「见闻之知」面前是问不出来的。我知道一件事，可是我有没有理解它呢？知道和理解有什么不同？知道了多少，可以算是理解？一个人在没有理解之前，如何能够知道自己其实并没有理解呢？再说了，韩梅梅认为的理解跟李雷的不同，学生自我感觉的理解，可能离老师的标准还很遥远。「我理解我自己」已经很难了，「我理解你」肯定是天下最奢侈的事之一。

说到人与人之间的理解这个话题就太大了，今天只说说对学习内容的理解吧。

何为理解？

循着这个问题，很快我找到了 Understanding by Design（下面简称 UbD）教学理念，它由 Grant Wiggins 和 Jay McTighe 提出。Wiggins 是 Authentic Education 的主席，哈佛大学教育学博士。生前活跃在教育领域，致力于推广 UbD 教学理念和推动教育改革。

「理解」在 Wiggins 的教学理念中很重要，他意识到，从事教育的同行们各自对此有不同理解。

…有的老师希望学生“真正懂得”，有的老师希望学生“内化知识”，还有的老师希望学生“掌握核心或本质”。他们讲的是一回事吗？具体来说，学生“真正理解”以后会怎么做，而不理解的时候又不会做什么呢？ —— Harold Bloom

有趣的是，美国科学促进会的《科学素养的基准》（Benchmarks for Science Literacy ）描述了在制定科学教学和评估的基准时，他们所遇到的问题：

基准使用「知道」和「知道如何」来统领基准的每一部分。还有一种选择是使用一系列细化等级的动词，包括「识别、熟悉、领会、掌握、知道、领悟、理解」等，每一项都比前一项更为复杂和完整。该分级系列的问题在于，不同读者对于认知顺序的划分会有不同的意见。

理解被放在了一系列等级的最后，比领悟还要复杂和完整。这是多么高的要求啊！

我们并不能指望用简单的词汇来概括理解的含义，因为知道词汇本身跟理解是两回事。那么，知道和理解的区别又是什么呢？UbD 给出了下面这个列表：

跟知道相比，理解更强调知识的「上下左右」，它的背景、来龙去脉、使用情境、理论基础、变化和发展趋势，以及，一个人要如何运用它。

理解既是名词，也是动词。

##

怎么知道自己有没有理解？

没有概念生成的过程，就不能获得任何知识的迁移，更不能对新体验产生更好的理解。

——约翰·杜威

理解是关于知识迁移的。

为了知道要应用哪一个事实，就要了解更多的事实。这个过程需要理解，即需要洞察本质、目的、受众、策略和手段。如果具备真正的能力，就能够将我们所学的知识迁移到新的情境中。UbD 强调知识迁移，认为这是理解的核心目标之一，也是教学的关键。

The goal of Teaching for Understanding is to give students the tools to take what they know, and what they will eventually know, and make a mindful connection between the ideas.
Understanding by Design

更具体来说，UbD 认为理解的目标不是一个，而是多个。Wiggins 和 McTighe 详细阐述了理解的 6 个方面。学习者如果能够从以下方面证明他们理解，就说明他们真正懂了。

• 解释 Explain：通过归纳或推理，系统合理地解释现象、事实和数据；洞察事物间的联系并提供例证。
• 阐明 Interpret： 叙述有深度的故事；提供合适的转化；从历史角度或个人角度揭示观点和事件的含义；通过图片、趣闻、类比和模型等方式促成理解。
• 应用 Apply： 在各种不同的真实情境中，有效地使用和调整所学知识。
• 洞察 Have perspective：批判性地看待、聆听观点；有全局观。
• 同理 Empathize：能从他人认为古怪的、奇特的或难以置信的事物中发现价值；在先前直接经验的基础上敏锐感知。
• 自知 Have self-knowledge：有元认知意识；察觉诸如个人风格、偏见、心理投射和思维习惯等促成或阻碍理解的因素；意识到我们不理解的内容；反思学习和经验的意义。

如果用简单的话来归纳，大概就是：能翻来覆去地讲，能因地制宜地用，有助于理解自己和他人。

今后如果遇到真正想弄懂的知识，就可以提醒自己：我能讲给别人听，让别人也理解吗？我能在什么情境用上？如果没有用上，是情境不适合，是没有进入备选方案，还是我并没有真的懂？学习了这些，我更理解哪些人了？过去有哪些看法需要改变？对我自己来说，又会有什么变化？

过去有很多时候，我会隐约觉得似懂非懂。在这种懵懂中继续上路，一路上仍然会反复经过同一个地方。只有经过这些地方时，发现自己有了跟之前不一样的理解，才会真切感受到变化——那个地方看起来没有变化，但是已经面目全非。我必须一次又一次经过这些熟悉的地方，以同样的路径，但尝试不同的时间、脚步、视角，才会迎来我懂了的感觉。

切身去体验，或者咀嚼碎了吞进身体里。

真知不易。

路漫漫啊。