作者：郑昊
出版社：电子工业出版社有限公司
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
UI设计与认知心理学(全彩)试读：
内容简介新兴的设计类别都是以科学技术的发展为前提的，比如，印刷设计以化学印刷术的进步为基础，工业设计以工业流水线的批量制造生产为基础，现代服装设计以化学纤维技术和现代纺织技术为基础。
UI设计是以现代计算机技术为基础的新兴设计学科，那么什么样的设计理论可以支撑新兴的UI设计呢？与所有传统的设计不同，UI设计是非物质性的虚拟的设计方式，只与人的直接认识与感知相关，而不涉及实体的存在，所以，设计研究的方向，第一次从研究客观世界的物彻底转向了主观世界的人。
人觉知世界的方式，就是认知领域相关知识可以产生作用的方式，也就是可以合理地支撑UI设计的理论基础。本书以认知心理学、认知神经学的相关知识为基础，尝试从全新的视角解决新兴的UI设计所面临的重要问题，促使UI设计变得更为合理。
本书的适用人群主要为UI设计师、交互设计师、用户研究员，以及用户体验领域相关的从业人员与设计爱好者。通过本书的学习，读者可以从全新的视角理解UI设计的本质，进而理解设计的本质。
未经许可，不得以任何方式复制或抄袭本书之部分或全部内容。
版权所有，侵权必究。
图书在版编目（CIP）数据
UI设计与认知心理学/郑昊编著.--北京：电子工业出版社，2019.9
ISBN 978-7-121-29519-5
I.①U… Ⅱ.①郑… Ⅲ.①人机界面-程序设计-应用-认知心理学 Ⅳ.①B842.1
中国版本图书馆CIP数据核字（2019）第051583号
责任编辑：田 蕾 特约编辑：刘红涛
印 刷：北京利丰雅高长城印刷有限公司
装 订：北京利丰雅高长城印刷有限公司
出版发行：电子工业出版社
北京市海淀区万寿路173信箱 邮编：100036
开 本：720×1000 1/16 印张：18.75 字数：484千字
版 次：2019年9月第1版
印 次：2019年9月第1次印刷
定 价：89.90元
凡所购买电子工业出版社图书有缺损问题，请向购买书店调换。若书店售缺，请与本社发行部联系，联系及邮购电话：（010）88254888，88258888。
质量投诉请发邮件至 zlts@phei.com.cn，盗版侵权举报请发邮件至dbqq@phei.com.cn。
本书咨询联系方式：（010）88254161～88254167转1897。
从操作层面学习UI设计，只能是知其然而不知其所以然。设计的过程是逻辑思考的过程，那么UI设计背后的逻辑是什么？逻辑的起点是什么？作者结合自己在互联网企业多年工作中遇到的问题，以及自己的思考与实践，基于认知心理学，探索用户认知的特性和UI设计背后的逻辑链条。——孙远波 北京理工大学设计与艺术学院教授 博士生导师
本书是一本UI/UX设计的理论指南，无论未来人机设备的交互形态如何进化，本书都可作为理论依据让设计师有据可循。——汤成信 人人网前设计总监、站酷前高级设计总监
本书以认知心理学为背景，从UI设计的本质谈到UI设计的过程，细致地讲解了认知心理学和UI设计之间的关系，以及认知心理学是如何影响UI设计的方方面面的。——李晴 搜狗高级设计总监
设计师想解决需求问题，一定要从本源出发，把认知领域的理论运用在设计上，不断地验证、积累，形成思维模式，以一种更科学的方式来做设计，钻研设计。作者用5年的时间沉淀了一本好书，力荐所有热爱设计的人拿来阅读。——李丽 搜狗高级设计经理
搜狗搜索用户体验部力荐图书前 言
本书从开始筹划到出版，前后经历了近5年的时间，促使我开始思考编写本书是5年前在实际工作中出现的困境。作为一个交互设计师，要完成产品设计，就需要事先做出规划，比如，产品的信息结构、控件按钮的位置与形态等。这些规划的根据是什么呢？比如，为什么要将导航条放在左上角而不是右上角？为什么信息层级的设定在WAP端是三级，而在Web端是两级？交互设计师作为承上启下的环节，还需要向上对产品经理证明这样的设计比产品经理的构想更为合理，向下对视觉设计师说明设计的内在逻辑，以及视觉层面需要注意的关键点。这些都指向了第一个问题：
1.UI设计的理论基础是什么？
每个用户体验设计师在每天的工作中都会遇到这样的问题：设计的基准和原理是什么？如何说明？如果仅从个人经验或者成功案例的角度去回答，有时或许是有效的，比如某某类似的产品具有某某类似的功能，那么类似的设计就是合理的。但是，如果面对一个全新的产品，或者面对一个不能进行有效类比的场景（不同性质或者不同平台的产品），那么经验就不产生作用，类比逻辑也失去了有效性，设计该如何进行？
我们需要一种全新的语言范式（相关理论的概念和原理），来与上下游的合作伙伴进行沟通，说明设计的道理，并且互相探讨设计的好坏。这种讨论可以不是完全依赖经验的，可以面对不曾出现的产品和场景，是演绎逻辑与一般规律的。对于这个问题，我们可以从认知方面的相关理论开始，通过对实践案例的讨论展开。
除此之外，还有第二个棘手的问题：
2.如何证明设计师在需求转变为产品过程中的价值？
显然第二个问题是依赖于第一个问题的。首先，我们必须通过认知原理来证明设计的合理性。其次，我们要证明具有这种合理性的判断能力的高效性和稀缺性，以及这种能力所带来的价值。构成这种合理性的判断能力需要两部分内容，一部分是合理的知识，可以通过本书和读者的自学获得；第二部分是实践，需要在真实的项目中反复锤炼（本书对训练的方法也进行了适当的说明）。
证明稀缺性是指获得合理的判断力是需要付出艰辛的努力的，需要思考、学习、反复实践，并不是一蹴而就的。由此可知，获得认知不是一件“容易的事情”，因为这涉及到格式塔心理学、认知心理学、认知神经学，甚至数学等相关知识。实践则是一件更困难的事情，它的困难在于任何真实项目都需要真实的资源，一个APP或者一个网页项目都需要大量的技术人员，以及相应的服务器带宽支持，这种实践的机会是稀缺的，尤其对于没有任何实践经验的新手或学生而言。
证明判断能力所带来的价值就是证明认知领域的理论切实地提高了设计的速度和质量，相应的语言范式切实地提高了沟通的效率和质量，如果读者读过此书并且将书中的设计思想运用在设计之中，并且将这种语言范式推广到合作的上下游，则一定会证明这一点。
本书的写作目的是解决设计师面临的职业困境，方法是通过实际的场景和事例来探讨UI设计的认知理论基础。本书并不是也不可能集合所有完备的知识，认知领域的知识涉及领域众多，如神经学、心理学、生物学、医学、计算机科学等，同时也是现代研究领域的热点，不是作者个人能力可以穷尽的。编写本书更多的是希望将读者引入认知的领域，进行更深入的思考和挖掘，共同夯实UI设计的基础，共同提高设计的效率和价值。01 认知是UI设计的本源问题1.1 为什么英文版面看上去更简洁
大多数设计师都会有这样的困惑：一个网页，用英文排版的版面看上去比用汉字排版的版面更简洁，如下图所示为苹果公司介绍iPhone X参数对比的网页截图。英文版面汉字版面
要弄清楚这一点，先看一下汉字的书写过程，比如，练习书法时写的“永”字，就蕴含8种书法技巧，被称为“永字八法”。永字八法
与汉字相对比，英文字母中非衬线体的E、F、H、I、L、T，仅仅是由不同数量或长度的垂线段构成的。
汉字与英文字母分别是两种语言最小的书写单位，当它们组成各自语言的视觉内容的时候，就是人们看见的文字版面。下面来看两种文字排出的版面，如下图所示。文字内容节选自《悲惨世界》
在行间距差不多的情况下，汉字的大段文字占用的空间确实比英语少。
一个汉字的视觉信息是一个英文字母的几倍，那么相同版面中的汉字信息同样会是英文信息的几倍，英文版面的视觉信息密度比汉字版面的少得多，这就是英文版面看上去比汉字版面更简洁的原因。
通过从信息疏密的角度发现的这一排版的规律，可以发现，如果从更广的角度来思考设计，就会发现，设计的本质就是在解决信息的认知问题。1.2 设计的本质
一方面，设计处在“人—人造物—自然”认知过程的中间位置，因此设计的第一个基本作用就是要使“人—人造物”之间的信息传递变得更为有效，这种作用可以称为“示能性”，也就是说，形态要指示功能的使用方式和过程。门把手的设计焦点就是通过手柄的形态来交待使用方式
在UI设计中，“示能性”以虚拟的方式指示产品的使用方式和功能。iPhone早期滑动解锁界面从实体播放器上抽象出的icon
另一方面，人是社会化动物，人不仅要与自然沟通，而且要与自己的同类沟通，设计也处在“人—人造物—他人”认知过程的中间位置，因此设计的第二个基本作用就是要在“人造物—他人”之间传递标签化的身份信息，完成“自我定位”。法国巴洛克皇宫和中国明清皇宫的设计焦点都是表现主人尊贵的身份
在UI设计中，自我定位的需求同样通过视觉上的个性化设计来满足。搜狗输入法的各种根据用户喜好设计的皮肤
所以，从这两方面来看，设计的本质就是解决信息的认知问题。1.3 互联网产品的本质与UI设计的本质
1 对信息获取过程的优化
从信息的角度看，互联网产品本质的第一个方面是：对信息获取过程的优化。它主要有以下两种方式：
① 降低获取信息的成本。降低获取信息的成本有两种方式，一是消除信息不对称，二是直接降低信息的流通成本。对于消除信息不对称，如基于地理位置的服务（Location Based Services，LBS），原来只有在视野范围内才能打车，并且只有通过司机对路程的掌握才能知道自己没去过的餐馆的位置，而现在拿着带有LBS功能的手机就可以找到视野范围内，如拐角的汽车或者餐馆。除了LBS服务，消除信息不对称还可以表现为解决信用机制问题，当你去原来没去过的传统商店买东西，并不知道店铺卖的是真货还是假货，而电子商务通过反复交易的评价系统构建的信用体系解决了部分信用问题。直接降低信息的流通成本是互联网产品的基本属性，是由技术进步直接影响的，比如IM软件（即时通信软件）、视频网站、直播软件等。
② 优化信息的质量。优化信息质量也有两种途径，第一是优化信息排序，比如，针对搜索结果的排序和针对feed 流（持续更新并呈现给用户内容的信息流）的排序，这两种基本服务遍及电子商务网站、社交软件等产品之中。第二是通过社交关系过滤信息，这是社交网站不同于其他互联网产品的本质特点之一，社交产品通过关系链中的人来过滤信息，也就是说无论是朋友圈还是Facebook，朋友关心和感兴趣的话题一般也是自己关心和感兴趣的，朋友在生成或者转发信息的时候过滤了信息本身，提高或者保证了曝光出来的信息的质量。社交产品的本质就是利用人们自身就是信息的产生源和过滤源，来优化信息的质量及产生用户原创内容（User Generated Content，UGC）。
2 对生成信息过程的易化
互联网产品本质的第二个方面是对生成信息过程的易化。
传统的信息流通方向是自上而下，媒体精英控制传媒渠道，把信息向下分发，信息的载体是报纸、期刊、杂志、文学作品或者专业著作等。互联网的出现，使信息自下而上、自下而下地流通成为可能。UGC就是对人人皆可输出信息的表达，从早期的BBS、社交网络的网红、微博的大V、视频的弹幕，到直播平台的主播，信息的消费者也可以参与信息的生成和传播。
总之，一个互联网产品往往是几种机制产生的复合体，如下表所示。
3 UI设计的本质
设计的目标是方便信息在人与事物或人与人之间的流通，是针对已有事物的优化；互联网产品的本质是优化和易化信息的获取，将二者结合就产生了基于虚拟世界的UI设计。
UI设计的本质就是解决虚拟世界的信息传递问题，以此优化互联网产品的本质——对信息获取过程的优化与对信息生成过程的易化。1.4 UI设计与传统设计的区别
1 信息的单次传递与传统设计对形态的关注
传统设计是对现实世界提供的材料进行加工，所以设计的最终形态是以实物的形式确定下来的，如印刷品、衣物、工业产品和建筑。
以实物的形式确定的产品形态只能以相对固定的方式向用户传递视觉或者触觉信息，除了实物的磨损对设计产品的改变，这种信息是相对固定的、单次的。这就意味着如果设计出现瑕疵，那么在反复使用的过程中，瑕疵就会反反复复对用户产生干扰。反过来，如果设计完美，那么在多次的体验过程中，用户也会反反复复赞叹设计的优秀。
传统设计传递给用户的视觉信息是首要的、非接触的，要表达产品的使用方式、产品的优良质地，还要具有其专属的美感，所以传统设计的核心焦点之一就是设计物的形态。
2 心理张力
对于UI设计而言，信息的传递过程和关注点与传统设计不同，下面先从两则有趣的故事开始。
第一则：未完成的钢琴曲
有一个音乐家，他非常喜欢赖床。他的妻子想了一个办法，在丈夫赖床的时候在钢琴上弹奏一首曲子，在弹到最为精彩的部分时突然停下。于是，为了听完曲子，音乐家无可奈何地爬起来弹奏剩下的部分，而这时他也睡不着了，妻子则达到了她的目的。
第二则：健忘的服务员
一天，格式塔心理学家勒温和弟子在咖啡馆聊天。聊了一段时间之后，他们买单结账。勒温觉得这里的餐点比较美味并且想记下来， 于是，他们找到服务员，询问他们点了什么，然而服务员却完全忘记了他们所点的餐点。
人们在没有完成一个任务的时候会一直想着这个任务，而如果完成了这个任务，那么对这个任务的记忆很快就会烟消云散。这样的情景引起了勒温的思考，因此他提出了基于场论心理张力概念的“需求—紧张”假设。
需求引起活动，以便使需求获得满足。当一个人有一定的动机或者需求时，在人的身体内部就会出现一个紧张系统，这个系统随着需求的满足或目标的实现就会趋于松弛，或解除紧张状态；反之，如果需求得不到满足或受到阻碍，这个紧张系统就会继续保持下去，并促使人努力满足需求。当任务需求得到满足后，紧张的状态得到放松，服务员的记忆内容就消退了；而若任务未完成，张力会强化人们对目标的感受，于是音乐家会爬起来弹琴。
人们的每个行为实际上都处在一个巨大张力下——如何生存。在生存的需求下，人们面临的是细分的小任务，如学习、工作、休闲等。每一个小的任务会分解出更小的任务，比如，在网上买一本书、打车到公司、订购餐饮等，这些小任务中的每个节点最终通过设计的UI界面出现在人们面前。
如果可以快速地完成这些节点，就可以快速地完成细分的任务，缓解用户的心理张力，而其中的关键就是引导与掌控流动的信息。
3 信息的流动、处理、回馈与聚合
回到UI界面，当人们需要完成一个任务时，比如在网上买一本书，并非通过一步完成，而是经历了一系列过程。
信息的流动
信息的流动，开始是在屏幕之外的现实世界，需要找到实体的手机或者PC。这时，大脑通过图形轮廓识别出手机或者PC，然后进入虚拟界面，例如打开一个电商APP或者网页。页面的层次、icon的设计、控件的轮廓、高斯模糊与阴影、色彩对比、动画效果、声音与振动等，不同的视觉信息和操控信息引导和影响人们的注意，引起人们下一步的行为。
处理与回馈
这一步输入书的名称，进行筛选和对比，再确认订单收货地址，最后付款。除此之外，还要时不时追踪物流信息。每一个步骤都会经历目标搜索和确认，经历不同的操作界面，根据操作产生的回馈——或者是肯定，如“确认”“成功”，或者是否定，如“密码输入错误，遗忘输入地址”，或者只是告知后台状态的进度条，然后开始下一步操作，直到完成购买一本书的任务。
聚合
信息随着人机交互的过程变化、流动，并在人的意识中聚合。意识从人自身的外部通过知觉器官获得屏幕上关于书的视觉信息，获得设备的听觉（声音回馈）、触觉（键盘或者触屏）信息，从自身内部获得书的记忆信息，如书的名称、售价、种类，两部分信息聚合并在意识的处理下最终推动购买任务的进行和完成。
4 UI设计面对的是信息变化往复的交互过程
从解除心理张力的过程看，UI设计与传统设计在信息传递方式上的根本不同，在于UI设计传递信息并非单次的，而是变化的、往复的，设计的结果是一系列信息页面，而且针对用户的操作可能产生不同的状态。
UI设计的焦点不是视觉信息的单次传递，而在于设计一个与用户进行信息互动的流程，引导用户在流程中解决自己的问题。独立UI页面的视觉信息并不能完全决定流程整体的质量，而是只形成整体的一部分。
除了信息传递方式的改变，UI设计更偏重于“示能性”。1.5 UI设计在“示能性”上的偏重
1 UI的呈现形式与实现手段的剥离
在传统设计中，人与世界通过具体的“物”来实现沟通，实现设计的手段与设计最终呈现的形式直接相关，因此设计的实现方式成为区分设计分类的原因，比如，工业设计与工程材料、环境艺术设计与环境科学、建筑设计与土木工程。
而对UI设计而言，人的认知与世界沟通的“物”被虚拟化了，计算机呈现语言与最终的UI界面展示之间的关联变为间接的，不懂得程序的UI设计师也可以完成工作，这就形成了UI的呈现形式与实现手段的剥离。
2 UI设计的重点在“示能性”
因为贫富和身份的差异，人们使用的餐具、随身的衣着、出行的工具、居住的房屋千差万别，但是人们使用的通信工具、输入法、浏览器等常用的软件却是完全一致的，这是为什么呢？
第一点，虚拟产品无法通过产品实现的成本来区分用户。实体产品的制造需要不同的模具和材料，视觉传达设计依赖印刷材质，服装设计依赖纺织面料，工业设计依赖加工材料，这些实体设计的成本有高有低，加工难度千差万别，所以实体设计可以天然地区分使用者的生活场景和身份。而虚拟产品的软件代码则完全一致，针对用户的设计没有任何不同。
第二点，人们无法获得他人使用虚拟产品的视觉感官信息，而且即使获得了他人使用产品的感官信息，也会因为第一点而失去意义。所以，UI设计无法完全地完成“人—设计物—他人”中的“设计物—他人”的信息传递过程。
UI设计仅能通过视觉层面的选择（比如软件的皮肤）完成“自我评价”的自我认可和对他人的展示，UI设计对“自我定位”的价值变得非常有限。
尽管UI设计依旧保有设计原有的二重功能，但因为“自我定位”的价值被削弱，导致人与虚拟界面互动中需要的“示能性”规律成为设计需要掌握的重点。
3 UI设计的“示能性”规律就是认知规律
庄子说“吾生也有涯，而知也无涯 ”，这10个字说明了世界的信息是庞杂的、无穷无尽的，而人的精力是有限的，于是“以有涯随无涯，殆已！”用蛮力强行去知晓所有信息是不切实际的，我们面对的信息无限，脑力却有限，庄子点出了认知层面的基本矛盾。
因此，人类处理信息的基本规律必然是抽取概要信息，形成思维的认识和肢体的行动。“不错的晚餐”是人们对奔跑在平原上的动物的概念认知，于是动物变成眼中的猎物，人们会想办法去猎杀它们。当人的认知对猎物的信息给予改变和回馈的时候，在行动上就是制造狩猎的工具。尖锐的器具可以更好地捕获猎物，于是刀斧与箭簇越来越锐利。
从信息的角度看，人造物是人对来自世界的信息给予反向调节的手段和方式，饥则农耕渔牧，寒则织衣筑垒，种地的锄头和打桩的锤子都是人们接收信息并且给予回馈的结果。人与世界的互动通过设计实体来实现
人类从茹毛饮血过渡到互联网时代，扑面而来的信息越来越接近庄子所描述的“无涯”，那么，应该如何处理这些信息呢？这就使得人们开始慢慢思考人类认知的规律。1.6 UI设计需要认知心理学与神经科学
1 从格式塔心理学到认知心理学
虚拟界面设计的“示能性”指向的就是与认知规律相关的科学，与这一领域直接相关的就是认知心理学，研究人如何觉知、学习、记忆和思考问题，所有这些都指向人是如何处理其身处环境的信息的。
那么，格式塔心理学与认知心理学有什么关系呢？格式塔心理学是20世纪上半叶的一个心理学流派，它的主要研究领域之一就是人的视觉认知原理，而这部分研究成果被后来的认知心理学吸收，成为认知心理学在知觉领域研究的重要基础。
格式塔理论常应用于设计上，如邻近、相似、连续、闭合、对称，以及视觉的大小、形状、色彩的恒常性，后面的章节也会从认知的角度解释这些设计原理，如下表所示。
对设计而言，认知心理学中涉及视觉的以格式塔理论为基础的研究是UI设计直接需要的。然而，除了觉知中的视觉理论，学习、记忆和思考问题的原理对UI设计也都具有极高的价值。
2 从认知心理学到认知神经学
认知心理学对解释认知规律具有非常大的帮助，但是心理学的研究方式更多的是“黑盒”式的，这是心理学研究本身的特点。它只能通过实验或者推理来倒推大脑运行的规律，而不能直接从大脑微观地去解释宏观的某个心理规律。因此，如果想要彻底地诠释认知原理，就要从生理角度说明人是如何处理信息的，比如，可见光从视网膜进入眼睛到形成视觉刺激的过程，以及这个过程的意义，本书将对相关的问题进行详细阐述。
如果把人的大脑当成一台计算机，那么认知心理学研究的就是这台计算机的软件，认知神经科学研究的就是这台计算机的硬件，如果参透了这台计算机的软硬件运行规律，也就知道了如何通过设计使人的大脑获得最高的效率，这也是将认知科学的观点引入UI设计领域的目的。所以，只有了解和掌握了认知的一般规律，才能更好地设计“示能性”的UI界面。1.7 解决问题的过程——本书的结构
1 从设计实现的角度
一个UI界面的完成，从考虑基本的比例到动画制作大体可以分为6个步骤，也是本书02章到07章讨论的内容。
第一步，要知道用哪种比例构图是最为恰当的——02 黄金分割与曝光效应。矩形长宽比从1：1到2：5的渐变
第二步，开始构建界面的具体结构，这就要使用栅格系统——03 整齐、简化与栅格系统。
第三步，界面中有不同类型的元素，那么元素与元素之间的关系如何通过格式塔理论进行组织呢——04邻近原则与赫布定律。
第四步，确定需要用哪种合理的色调进行设计——05 如何合理地使用色彩。
第五步，确定设计的icon代表的图形轮廓的意义是什么——06 图形的意义与物体识别。
第六步，确定虚拟空间如何设计，以及动画的作用是什么——07 虚拟实体、虚拟空间与UI动效设计。
完成以上6步就可以完成基本的设计，但是还要掌握更为深刻的规律来理解认知与UI设计的关系。
2 从认知智能的角度“08 如何在UI设计中引导注意力——自下而上”与“09 如何在UI设计中引导注意力——自上而下”的内容是相关联的，主要讨论的是人类记忆的信息与外部环境信息整体互动的过程，以此来说明人们优先处理获得注意的信息的原因。“10 创造是模因的正迁移”：从模因论的角度思考设计的创新。“11 设计的训练”：主要阐述的是内隐记忆对设计师训练的意义，强调分步练习与精深练习的意义。“12 从拟物到扁平化——信息认知的平衡定律”：大脑对于信息的处理本身是简化和抽象的过程，对于过度简化的初始信息又会产生枯燥和平淡的感觉（空载），对于过于复杂的初始信息会产生烦躁和焦虑的感觉（过载），因此大脑对于信息的处理和偏好处在一个动态的平衡之中，这种平衡对设计产生的影响就是我们讨论的主体。“13 UI设计与人工智能——智能的本质”：以之前的内容，如韦伯定律、反射性注意、神经节的感受野机制等，作为讨论智能的基础。“14 UI设计与人工智能——应用”：通过讨论人的智能与人工智能的关系，理解最新的技术将在未来如何影响UI设计。“15 从VR到5G——UI设计的未来形态”：探讨新技术（如VR、AI、5G等）可能对未来设计的影响。“16 认知世界与自我”：跳出设计的界限，从自我与对世界的认知角度来看待UI设计乃至设计。
那么，现在就开始这个探索的过程吧！02 黄金分割与曝光效应2.1 黄金分割与斐波那契数列
作为UI设计师经常会在网上看到关于黄金分割的争论。有人认为黄金分割是神秘且美丽的，还有一些人则认为黄金分割完全是捏造出来的数学游戏。这里先搁置争论，通过一些事实来说明这个特殊比例的真实意义。
黄金分割比的源头是斐波那契数列，下面分析黄金分割比 。
观察以下数字：1，1，2，3，5，8，13，21，34，55，89，144，233…，可以发现，第三个数字是前两个数字之和，比如，1+1=2，1+2=3，2+3=5，3+5=8…另一方面，如果把前后两个数字相除，那么获得的数值就会越来越趋近一个数字，1/2=0.5，2/3≈0.67，3/5=0.6，5/8=0.625，8/13≈0.615，…，144/233≈0.618，…，28675/46368≈0.618。当这个数列的最后两项趋近于无穷大的时候，前后两个数字的比值就可以用公式（√5-1）/2来计算，这个数值就是黄金分割比。在人们生活的环境中，人体、动物、植物甚至晶体都存在黄金分割比这一规律。
在植物中，常见的向日葵的花朵就遵循斐波那契数列的数字规律。比如下图中逆时针的螺旋线是13条，顺时针是21条，正是斐波那契数列中的两个值，而较大的向日葵螺旋线可以分别达到89与144，或者144与233。向日葵的两条螺旋线符合斐波那契数列的数字规律
在有关人体比例的画作中，流传最多的就是达·芬奇的素描画，肚脐到脚底的长度与身高之比就是黄金分割比。广为流传的达·芬奇手稿
黄金分割比确实是真实存在的，那么，为什么是0.618？2.2 生长的效率
对于黄金分割比的研究，数学家伏格（ Helmut Vogel ）模拟了原基（又称始基，植物中会发展成一个专一组织、器官或躯体一部分的细胞基团）的生长公式，在A better way to construct the sunflower head（花冠形成的更优途径）一文中他将向日葵的秘密揭示了出来。θ是原基发散的角度，它是相继生长的原基按照螺旋线规律排布时的夹角，只有当θ为137.5°的时候，向日葵的花盘最为紧密，吸收的能量最多。按照137.5°旋转的螺旋线密度最高
http：//jacquerie.github.io/sunflower/网址中，可以自动调整θ 的角度观察图形的变换。按照斐波那契数列的形态排列葵花籽，无疑是最为节省空间的高效的自然组织形态，按照斐波那契数列的规律生长的向日葵结出的果实最多，不按斐波那契数列的规律生长的向日葵种类都被淘汰了。所以斐波那契数列带来的黄金分割比不仅客观存在，而且对于生物的生存还具有重要的意义，这个比例带来了最高的生长率。2.3 曝光效应
符合黄金分割比生长的植物是最优的，那么，黄金分割比是如何对人的视觉偏好起作用的呢？大家可以尝试用曝光效应进行解释。心理学家扎荣茨（Zajonc）做过一个实验：他让一群被试者观看一个学校的毕业纪念册，并确保被试者并不认识其中任何一个人，看完纪念册之后请被试者评价他们对其中一些人的喜爱程度。测试结果是人们更喜欢看过二十几次的人脸，而不是只出现过几次的人脸。也就是说，没事“刷存在感”的人更容易让大家喜欢，人们会偏好自己熟悉的人或事物，这就是曝光效应，也称多看效应。
那么，什么事物在生活中引起了曝光效应呢？
一方面，自然界以137.5°螺旋线生长的植物和动物（贝壳类）随处可见，所以可以引起曝光效应；另一方面，在人们生活的世界中，大家接触最多的就是人本身，那么，以人体比例为基准的事物也应该最容易引起曝光效应。
以人体比例为设计基准进行的理论与实践，就是现代主义建筑大师柯布西埃所著的《模度》，以及以此为指导的一系列建筑设计。该书的核心观点是相信以人的身体尺寸作为建筑的长度单位可以使建筑变得美观和易用，如下图所示的马赛公寓。以模度作为设计参照的建筑马赛公寓
从《模度》的角度看，柯布西埃与达·芬奇所发现的一致，那就是人体中也存在着繁多的黄金分割比。2.4 模度
在《模度》中，柯布西埃选定脐、头顶、上伸手臂作为控制点，与地面距离分别为113cm、183cm、226cm。观察这些数据的规律：113/183≈0.617，即肚脐到地面的距离与头顶到地面的距离比；（226-183） / ［226/2-（226-183）］≈0.614，即手臂高出头顶的距离与头顶到肚脐的距离比。人体分成可3段，从上到下相邻两段的比就是黄金分割比，同时肚脐到地面的距离是上伸手臂到地面距离的一半。以人体为基准的模度2.5 黄金分割比的效应范围
对于黄金分割比的争论之一，是它究竟有没有让人感觉美丽，是不是真的有效果。尽管通过生物的生长规律形成的形态，以及人体的内在比例可以推测黄金分割比产生了作用，但是这并不能十分确定。针对这个问题，德国著名的物理学家、心理物理学的创始人费希纳（Fechner）对特定比例的方块进行了偏好统计， 拉洛（ Lalo）以更科学的方式重复了实验，获得的结果是一致的，人们确实对黄金分割比或具有相近比例的矩形具有偏好，如下页两张图所示。
这两个统计图表明了黄金分割比确实在产生作用，并不是虚无的，更重要的是还表明了黄金分割比不是绝对化的除了严格的0.618就不起作用，黄金分割比的效应具有一个有效的范围，从2：3到13：23的比例范围内都会收到有益的设计效果。2.6 小结
自然界中生物体内存在黄金分割比，甚至可以通过数学理性地推导出植物因此获得的演化优势，因此经常“刷存在感”的黄金分割比，让人们“备感亲切”。
当然以曝光效应判断黄金分割比一定会产生作用并不是百分之百严谨的，因为人的审美是主观的、变化的，因此需要通过相对客观的统计来确定这种比例产生的实际效果。费希纳与拉洛的研究证明人的偏好是确实存在的，设计师可以大胆地在其有效范围内使用这个比例，以优化设计。
关于黄金分割的内容将在“03 整齐、简化与栅格系统”一章中继续深入讨论。03 整齐、简化与栅格系统
当一个设计作品出现在眼前时，无论是针对虚拟世界的设计，如一个网站，还是针对真实世界的设计，如工业设计的一个产品，或者建筑设计面对的一栋楼房，我们都可以直观地评判设计是否富于美感。当接触和使用之后，人们会判断出是否易于使用。设计可以自然地被人感知和认识，这是因为人都具有与生俱来的审美能力。那么，感知到的好的设计，让人感觉“好”的原因是什么呢？如果可以认识和说明这些，就可以合理地指导设计，比如本章分析的栅格系统。
栅格系统源于平面设计行业，定义为“以规则的网格阵列来指导和规范网页中的版面布局及信息分布”，这种平面排版的设计方式非常自然地迁移到了UI设计中。雅虎网站早期的栅格
当人们看到栅格系统后，直觉的反应就是“看上去整齐”。“整齐”是对事物具有良好排列顺序状态的正向描述，“看上去整齐”也意味着“看上去舒服”。当然，这种“舒服”的“整齐”肯定不同于“漂亮”和“绚丽”，“整齐”是一种特殊的状态。那么，整齐为什么使人舒服呢？3.1 整齐为什么会使人舒服
如下面两张图所示都是整齐的示例。整齐的书架整齐的木堆
整齐的形态并非凭空而来的。一个孤立系统的总混乱度（即“熵”）不会降低，只会增强或者不变，这是物理学中的熵增定律。
这就是说，如果想让混乱程度降低，必须付出额外的能量。耗散体力，动手整理孩子混乱的房间就是付出能量的过程，只有付出能量之后，才得获得整齐的感觉，达到“熵减”。
如果把这个整理的过程从外部世界类比到人脑中，会是什么样的呢？
首先，把“动手”与“动脑”联系起来。下面先看一下阿恩海姆的图形回忆实验。
1 阿恩海姆的图形回忆实验
格式塔心理学美学代表人物鲁道夫·阿恩海姆曾经做过一个回忆图形的实验。第一步，设计一个略微复杂的，但是似乎又具有一定规律的图形。
图形似乎以中间的竖线为基准对称，但是左下角又有缺口，而且上部的横线左右长短不一，显然这个图形是为了验证某种目的而特意设计的。测试使用的图形顶部蓝线不等长、底部蓝线并不封闭
第二步，将设计出的图形在一组被试者面前以较短的时间展示，然后让被试者在预先准备好的纸上不假思索地尽量准确地画出自己看到的图形。
最后一步，从被试者画出的大量图形中，总结出7类具有差异但具有规律的结果。每种回忆方式都对原始图形进行了简化
造成差异的原因包括被试者的个性差异、被试者与测试图形的距离，以及测试图形在被试者面前呈现的时间长短。
但更重要的是，阿恩海姆总结出所有图形都有共同特征，“都能再现原始刺激图形的简化性”。也就是说，不管哪个类型以哪种方式回忆，原始图形都并非原封不动地被人们回忆，而是被某种程度地简化了。
沿着阿恩海姆实验的线索，在更长的时间纬度，我们可以更清晰地发现其中的规律。
2 不同时间尺度的图形演化
阿恩海姆实验的时间是短暂的，现在把这个时间延长，先来看一下谷歌的LOGO。
以十年为刻度Google LOGO的演化过程
从20世纪90年代到2015年的近20年中，LOGO有了明显的简化，字体从衬线体变化为非衬线体，同时字体从三维效果变成扁平效果。谷歌LOGO的演化大致以10年为刻度，下面再来看我国出土的陶器的鱼纹演化。
以百年为刻度鱼纹的演化过程
早期的陶器鱼纹是以较为写实的方式绘画的，与真实的鱼相比，鱼的曲线弧度变低，变得更平直，鱼鳍上下并不是对称的；在中期，曲线变得更趋于直线，但尚可保留鱼的细节结构，例如，鱼的眼睛、鱼鳍与鱼的身体、鱼鳍出现对称性；在晚期，鱼眼的结构消失了，鱼纹出现整体的对称性（鱼头与鱼尾差异变小）。鱼纹的演化是以百年为刻度的，下面再来看看字母A的由来。
以千年为刻度
印欧语系的字母A可以追溯到埃及人的牛头形象，然后是闪米特人的牛头被简化的形象，之后传到腓尼基变成了aleph，传到希腊变成alpha，最后在罗马成为现在字母表中的A。下面的图例展示的就是从图形演化为字母的过程。字母A的演化过程
牛头演化到字母A的过程，事实上就是一个将近两千年的阿恩海姆的图形回忆实验。在千万次往复的记忆、回想、书写的过程中，冗余的视觉信息被去掉了，牛头变成了Aleph，再变成Alpha，最后简化成无法被解析的具有方向性的轮廓线条——A。
阿恩海姆的实验阐释了人们本能地对视觉信息进行的简化处理。
3 整齐的认知意义
大脑在每次记忆中进行简化。相对于消耗体力收拾屋子的“体力过程”，大脑存在一个处理信息的“脑力过程”，这个过程是在没有任何意识干预的前提下把视觉信息变得整齐或者几何化。
一个被别人收拾过的屋子、整理的货架可以省去自己的体力，那么，如果一个UI界面被设计过，变得整齐是不是也会省去自己的“脑力”呢？
很显然这是肯定的。字母A的记忆难度要比牛头的图形容易得多，整齐使人舒服的原因就是更加便于记忆和识别，整齐的基本意义就是
试读结束[说明：试读内容隐藏了图片]