UI设计与认知心理学（全彩）

新兴的设计类别都是以科学技术的发展为前提的，比如，印刷设计以化学印刷术的进步为基础，工业设计以工业流水线的批量制造生产为基础，现代服装设计以化学纤维技术和现代纺织技术为基础。UI 设计是以现代计算机技术为基础的新兴设计学科，那么什么样的设计理论可以支撑新兴的UI 设计呢？与所有传统的设计不同，UI 设计是非物质性的虚拟的设计方式，只与人的直接认识与感知相关，而不涉及实体的存在，所以，设计研究的方向，从研究客观世界的物彻底转向了主观世界的人。人觉知世界的方式，就是认知领域相关知识可以产生作用的方式，也就是可以合理地支撑UI 设计的理论基础。

本书以认知心理学、认知神经学的相关知识为基础，尝试从全新的视角解决新兴的UI 设计所面临的重要问题，促使UI 设计变得更为合理。

通过学习本书，读者可以从全新的视角理解UI 设计的本质，进而理解设计的本质。

郑昊

2012年硕士毕业于北京理工大学设计与艺术学院，现为北京搜狗科技发展有限公司资深交互设计师。在从事用户体验行业的八年中，参与设计人人网网页版、人人网手机客户端、百度手机输入法客户端，搜狗搜索客户端，搜狗百科、搜狗问问、搜狗律师等众多项目。

本书从认知心理学角度，分析UI设计的本质，对从事UI设计的读者有理可依，有据可循。

本书从开始筹划到出版，前后经历了近5 年的时间，促使我开始思考编写本书是５年前在实际工作中出现的困境。作为一个交互设计师，要完成产品设计，就需要事先做出规划，

比如，产品的信息结构、控件按钮的位置与形态等。这些规划的根据是什么呢？比如，为什么要将导航条放在左上角而不是右上角？为什么信息层级的设定在WAP 端是三级，而

在Web 端是两级？交互设计师作为承上启下的环节，还需要向上对产品经理证明这样的设计比产品经理的构想更为合理，向下对视觉设计师说明设计的内在逻辑，以及视觉层面

需要注意的关键点。这些都指向了第一个问题：

1. UI 设计的理论基础是什么？

每个用户体验设计师在每天的工作中都会遇到这样的问题：设计的基准和原理是什么？如何说明？如果仅从个人经验或者成功案例的角度去回答，有时或许是有效的，比如某某类

似的产品具有某某类似的功能，那么类似的设计就是合理的。但是，如果面对一个全新的产品，或者面对一个不能进行有效类比的场景（不同性质或者不同平台的产品），那么经

验就不产生作用，类比逻辑也失去了有效性，设计该如何进行？

我们需要一种全新的语言范式（相关理论的概念和原理），来与上下游的合作伙伴进行沟通，说明设计的道理，并且互相探讨设计的好坏。这种讨论可以不是完全依赖经验的，可

以面对不曾出现的产品和场景，是演绎逻辑与一般规律的。对于这个问题，我们可以从认知方面的相关理论开始，通过对实践案例的讨论展开。

除此之外，还有第二个棘手的问题：

2. 如何证明设计师在需求转变为产品过程中的价值？

显然第二个问题是依赖于第一个问题的。首先，我们必须通过认知原理来证明设计的合理性。其次，我们要证明具有这种合理性的判断能力的高效性和稀缺性，以及这种能力所带

来的价值。构成这种合理性的判断能力需要两部分内容，一部分是合理的知识，可以通过本书和读者的自学获得；第二部分是实践，需要在真实的项目中反复锤炼（本书对训练的

方法也进行了适当的说明）。

证明稀缺性是指获得合理的判断力是需要付出艰辛的努力的，需要思考、学习、反复实践，并不是一蹴而就的。由此可知，获得认知不是一件“容易的事情”，因为这涉及到格式塔

心理学、认知心理学、认知神经学，甚至数学等相关知识。实践则是一件更困难的事情，它的困难在于任何真实项目都需要真实的资源，一个APP 或者一个网页项目都需要大量

的技术人员，以及相应的服务器带宽支持，这种实践的机会是稀缺的，尤其对于没有任何实践经验的新手或学生而言。

证明判断能力所带来的价值就是证明认知领域的理论切实地提高了设计的速度和质量，相应的语言范式切实地提高了沟通的效率和质量，如果读者读过此书并且将书中的设计

思想运用在设计之中，并且将这种语言范式推广到合作的上下游，则一定会证明这一点。

本书的写作目的是解决设计师面临的职业困境，方法是通过实际的场景和事例来探讨UI设计的认知理论基础。本书并不是也不可能集合所有完备的知识，认知领域的知识涉及领

域众多，如神经学、心理学、生物学、医学、计算机科学等，同时也是现代研究领域的热点，不是作者个人能力可以穷尽的。编写本书更多的是希望将读者引入认知的领域，进行更深

入的思考和挖掘，共同夯实UI 设计的基础，共同提高设计的效率和价值。

01 认知是UI 设计的本源问题
1．1 为什么英文版面看上去更简洁 /002
1．2 设计的本质 /004
1．3 互联网产品的本质与UI 设计的本质 /006
1．4 UI 设计与传统设计的区别 /008
1．5 UI 设计在“示能性”上的偏重 /011
1．6 UI 设计需要认知心理学与神经科学 /013
1．7 解决问题的过程――本书的结构 /014
02 黄金分割与曝光效应
2．1 黄金分割与斐波那契数列 /018
2．2 生长的效率 /019
2．3 曝光效应 /020
2．4 模度 /021
2．5 黄金分割比的效应范围 /022
2．6 小结 /024
03 整齐、简化与栅格系统
3．1 整齐为什么会使人舒服 /027
3．2 基础的栅格系统 /032
3．3 简化―视觉信息记忆与识别的规律 /035
3．4 几何化的信息块 /040
3．5 几何信息块―构图与黄金分割 /043
3．6 图形简化与黄金分割 /045
3．7 小结 /046

04 邻近原则与赫布定律
4．1 空间邻近 /048
4．2 时间邻近 /049
4．3 格式塔的场 /051
4．4 我们看到的和感觉到的是什么 /055
4．5 赫布定律 /057
4．6 邻近原则与再现 /059
4．7 激活的认知意义 /062
4．8 设计与邻近原则 /063
4．9 小结 /068
05 如何合理地使用色彩
5．1 谨慎使用暖色调 /070
5．2 为色盲设计 /077
5．3 构建合理的色彩环境 /079
5．4 设计中的色彩恒常性 /084
5．5 小结 /086
06 图形的意义与物体识别
6．1 图形为什么很重要 /088
6．2 图形形成视觉刺激的过程 /091
6．3 物体识别的深度思考 /096
6．4 图形识别所涉及的设计问题 /097
6．5 小结 /098
07 虚拟实体设计、虚拟空间设计与UI 动效设计
7．1 虚拟实体设计―形状恒常性 /100
7．2 虚拟空间设计― 深度线索 /103

7．3 UI 动效设计 /109
7．4 小结 /112
08 如何在UI 中引导注意力――自下而上
8．1 信息的自下而上与自上而下 /115
8．2 感光细胞与神经节细胞对视觉信息的
处理机制 /116
8．3 处理运动信息的注意机制 /121
8．4 视觉元素差异与注意的关系 /123
8．5 声音相对图像的差异 /128
8．6 小结 /128
09 如何在UI 中引导注意力 ――自上而下
9．1 引导阅读的神秘力量 /132
9．2 无意识设计 /137
9．3 记忆与注意的关系 /138
9．4 记忆的类型和分类 /140
9．5 神秘力量之内隐记忆 /142
9．6 内隐记忆与设计 /144
9．7 外显记忆与注意 /151
9．8 目标识别的两种类型 /158
9．9 小结 /160
10 创造是模因的正迁移
10．1 创造的两个前提 /164
10．2 用知识表征描述思维 /164
10．3 两种理论的缺陷与表征假说的实质 /167
10．4 模因假说 /170

10．5 表象的模因迁移 /176
10．6 命题的模因迁移 /177
10．7 小结 /179
11 设计的训练
11．1 分解练习的故事 /182
11．2 训练在神经层面引起的变化 /183
11．3 训练的意义与原因 /184
11．4 分解的标准与维度 /186
11．5 UI 设计的分解练习 /188
11．6 小结 /189
12 从拟物到扁平――信息认知的平衡定律
12．1 信息技术发展与UI 界面的演变 /192
12．2 信息认知的平衡定律 /195
12．3 UI 扁平化的过程 /197
12．4 扁平化设计的要点 /200
12．5 小结 /204
13 人工智能与UI 设计 ――智能的本质
13．1 人工智能带来的危机感 /206
13．2 智能的必要性 /210
13．3 智能的基础―神经系统的可塑性 /213
13．4 从数据中学习 /219
13．5 人工智能如何模拟人的智能 /222
13．6 智能的作用是高效地处理信息 /235
13．7 小结 /240

14 人工智能与UI 设计―― 应用
14．1 人工智能在设计中的应用 /242
14．2 设计师的关键能力 /248
14．3 语音与眼动参与交互 /251
14．4 小结 /252
15 从VR 到5G ―― UI 设计的未来形态
15．1 从VR 到MR /254
15．2 如何实现三维效果 /258
15．3 5G 是低延迟带来的算力 /262
15．4 未来的UI 设计依旧遵循的认知规律 /264
15．5 小结 /268
16 认知世界与自我
16．1 “中国元素”不代表中国设计 /270
16．2 从建筑与园林反观我们对世界的认知 /271
16．3 如何认知世界就会如何设计世界 /279
16．4 中国APP 的功能特点 /282
16．5 小结 /287