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.).
