　　Jeff Johnson，拥有耶鲁大学及斯坦福大学心理学学位。UI Wizards公司董事长兼首席顾问。他是GUI设计的先驱，著有畅销书《GUI设计禁忌》。
译者简介：

　　张一宁，自称“一个认为写代码就是做与人打交道的设计的工程师”。拥有二十多年编程经验，从事过系统集成、金融行业应用的中间件和服务产品的研发，以及电信与互联网服务的开发和管理。人们通常认为这些活动是纯粹与机器打交道的，但我觉得不论是编程、测试，还是系统运维，与前端设计一样，要做好它们，心理学都扮演着重要的角色，这也是我翻译本书的原动力和出发点。个人主页：http://yining.org。Twitter：@yining。

　　王军锋，工业设计专业教师，热衷于用户研究、交互设计、体验设计。发表了数篇与之相关的研究论文，与国内工业设计及交互设计领域的同仁有广泛接触。近年来翻译出版了《亲爱的界面：让用户乐于使用，爱不释手》、《创?设计：Abduzeedo灵感指南》、《移动应用UI设计模式》等书。

内页插图

精彩书评

　　“我写在书中的很多文字都是受Jeff Johnson启发，我在产品中做的很多判断也是受Jeff Johnson启发，现在他厚积薄发把交互设计讲得这么透，让我这个非专业人士能站在一个更伟岸的肩膀上，我想给这本书十星。”
　　——王坚，糗事百科创始人，《结网》作者

　　“看完本书，觉得的确不错，推荐给大家。对于做测试的朋友来说，从这本书中能得到几点益处：了解一些基本的设计规则以及原理，为自己的产品发现更多的易用性方面的问题，提出改进软件交互设计的建议。”
　　——蔡为东，CA公司中国技术中心测试架构师，《赢在测试》等书作者

　　“本书通过一系列实例向读者展示了人类的认知系统是如何运作的，以及在日常生活中发生的认知偏差，将心理学的基本原理与设计的基本原则有机地结合在了一起。如果对人的思维好奇，那么你会在本书中收获很多乐趣；如果你是位设计师，那么这本书必读。我强烈建议设计师们每天都看看这本书。警告：这本书会让你沉醉其中而不能自拔。”
　　——Donald Norman，知名认知心理学家、计算机工程师、工业设计家，认知科学学会的发起人之一，著有畅销书《设计心理学》

　　“作者用精心挑选的主题和案例说明了用户界面设计师以及软件设计师所需要必备的知识，十分适合相关从业人员，也适合作为新手和相关专业学生的入门指导。”
　　——HCI International News

第1 章　我们的感知存在偏差　　
经验影响感知　　
环境影响感知　　
目标影响感知　　
设计时将感知的影响因素考虑在内　　
第2 章　我们的视觉经过优化更容易看到结构　　
格式塔原理：接近性　　
格式塔原理：相似性　　
格式塔原理：连续性　　
格式塔原理：封闭性　　
格式塔原理：对称性　　
格式塔原理：主体/ 背景　　
格式塔原理：共同命运　　
将格式塔原理综合起来　　
第3 章　我们探索和利用视觉结构　　
结构提高了用户浏览长数字的能力　　
数据专用控件提供了更多的结构　　
视觉层次让人专注于相关的信息　　
第4 章　色觉是有限的　　
色觉的原理　　
视觉是为边缘反差而不是为亮度优化的　　
区别颜色的能力取决于颜色是如何呈现的　　
色盲　　
影响色彩区分能力的外部因素　　
使用色彩的准则　　
第5 章　我们的边界视觉很糟糕　　
中央凹的分辨率与边界视野的分辨率比较　　
边界视觉有什么用　　
电脑用户界面中的例子　　
让信息可见的常用方法　　
让用户注意到信息的重武器：请小心使用　　
视觉搜索是线性的，除非目标“跳入”边界视野内　　
第6 章　阅读不是自然的　　
我们的大脑是为语言而不是为阅读设计的　　
阅读是特征驱动还是语境驱动　　
熟练阅读和不熟练阅读使用大脑的不同部位　　
糟糕的信息设计会影响阅读　　
软件里要求的很多阅读都是不必要的　　
对真实用户的测试　　
第7 章　我们的注意力有限，记忆力也不完美　　
短期记忆与长期记忆　　
关于记忆的一种现代观点　　
注意力和工作记忆的特点　　
工作记忆的特点对用户界面设计的影响　　
长期记忆的特点　　
长期记忆的特点对用户界面设计的影响　　
第8 章　注意力对思考以及行动的限制　　
模式一：我们专注于目标而很少注意使用的工具　　
模式二：我们能注意到更多与目标相关的东西　　
模式三：我们使用外部帮助来记录正在做的事情　　
模式四：我们跟着信息“气味”靠近目标　　
模式五：我们偏好熟悉的路径　　
模式六：我们的思考周期：目标，执行，评估　　
模式七：完成任务的主要目标之后，我们经常忘记做收尾工作　　
第9 章　识别容易，回忆很难　　
识别容易　　
回忆很难　　
识别与回忆对用户界面设计的影响　　
第10 章　从经验中学习与学后付诸实践容易，解决问题和计算很难　　
我们有三个“脑”　　
我们有两种思维　　
从经验中学习（通常）是容易的　　
执行已经学会的动作是容易的　　
执行新动作很难　　
解决问题和计算是困难的　　
在用户界面设计上的影响　　
前文中问题的答案　　
第11 章　许多因素影响学习　　
当实践经常、有规律和精确时，我们学得更快　　
当操作专注于任务、简单和一致时，我们学得更快　　
当词汇专注于任务、熟悉和一致时，我们学得更快　　
风险低的时候我们学得快　　
第12 章　人类很少做理性的决策　　
人们经常不理性　　
相比收益，我们更在乎损失　　
措辞也能影响我们的选择　　
生动的想象和记忆也影响着我们　　
利用人类认知的优缺点　　
第13 章　我们的手眼协调遵循规律　　
菲茨定律：指向目标　　
引导定律：沿着受限路径移动指针　　
第14 章　我们有时间要求　　
响应度的定义　　
人类大脑的许多时间常量　　
时间常数的工程近似法：数量级　　
满足实时交互的设计　　
达到高响应度交互系统的其他指导原则　　
实现高响应度是重要的　　
后记　　
附录　著名的用户界面设计准则　　
参考文献

精彩书摘

　　【第1章我们的感知存在偏差】
　　我们对周围世界的感知并不是对其真实的描述。我们的感知至少受到以下三个因素的影响，与现实存在严重的偏差。
　　过去我们的经验。
　　现在当前的环境。
　　将来我们的目标。
　　经验影响感知
　　经验，即你过去的感知，会以几种不同的方式影响你现在的感知。
　　感知的启动
　　想象一下，你拥有一家大型保险公司，并将与一位房地产经理开会讨论公司新园区的建设方案园区有五座建筑排成一排，后两座有给自助餐厅和健身中心采光的T字形庭院。如果这位房地产经理向你展示如图1-1所示的地图，你就会看到代表这些建筑物的五个图块。
　　图1-1
　　这是建筑地图还是单词？你看到的取决于别人告诉你看什么
　　现在想象一下与你见面的不是房地产经理，而是一位广告经理，讨论的是一个将在全国某些市场悬挂的广告牌。广告经理给你看的是同样的图像，但这次是广告牌的略图，由一个单词构成。这次，你清晰无误地看到了一个单词“LIFE”。
　　当感知系统预先准备看的是建筑物的形状时，你就看到了建筑物的形状，几乎察觉不到建筑物之间的白色区域。当感知系统预先准备去看文字时，你就看到了文字，也几乎注意不到字母间的黑色区域。
　　先入为主能够影响感知，有个著名的例子是一张素描。这张素描据传由R。C。James所绘①，大部分人对它的第一印象就是随手泼出的墨点。在继续阅读之前，先看看这张素描（见图1-2）。
　　①见LindsayandNorman（1972）中图3-17，146页。
　　图1-2
　　先入为主在视觉上的效果。你看到了什么
　　只有在告诉你这是一只在树附近嗅着地面的斑点狗之后，你的视觉系统才会把影像组织成一幅完整的画面。不仅如此，一旦你“看到了”这只狗，就很难再回头把这张素描看成随机无序的点。
　　以上是视觉的例子。经验也会影响其他类型的感知，如对语句的理解。例如，在不久前听说过疫苗污染事故的人与最近听说过利用疫苗成功对抗疾病的人，他们对“新疫苗含有狂犬病毒”这个标题或许就有不同的理解。
　　熟悉的感知模式或者框架
　　我们生活中大部分时间都在熟悉的环境里度过：家中的房间、花园、上学放学上班下班经过的路线、我们的办公室、小区附近的公园、商店、餐馆等。不断置身的各种环境在我们心智中建立起模式，让我们对不同地方的东西有不同期待。研究者们把这些感知模式称为框架，包括在各个环境下通常遇到的对象和事件。
　　举个例子，你不需要时常详细检查每一个细节，因为对家里的房间足够熟悉。你知道它们的布局，也知道大多数东西放在什么地方。你或许都能够在全黑的情况下在家中行走。但你对家的经验要比自己的住宅更广泛。除了对自己住宅的了解，你的大脑对家也有一个广泛的模式认知。这个模式影响了你对所有家的认知，不论熟悉的还是陌生的。在厨房，你期待看到灶具和水槽。在浴室，你期待看到马桶、洗手池、淋浴器或者浴缸。
　　不同场合的心智框架影响人们在各个场合下对期待见到的事物的感知。因为不必不断地详细检视身边环境的每一个细节，这是心智的捷径，能帮助人们应付所处的世界。然而，心智框架也让人们看到其实并不存在的东西。
　　比如，如果你拜访一个厨房里没有灶具的房子，你事后可能会回忆看到过一个灶具，因为在你对厨房的心智框架里，灶具是厨房的一个重要部分。类似地，去餐馆吃饭的心智框架中一部分是付账单，所以你可能记得自己已经付过钱了而心不在焉直接就走出餐馆。你的大脑对后院、学校、城市街道、办公室、超市、牙医诊所、的士、空中交通等熟悉场合都有各自的心智框架。
　　任何使用电脑、网站或者智能手机的人对桌面和文件、网页浏览器、网站和各种类型的软件应用和在线服务都有对应的心智框架。比如，当他们访问一个新网站时，有经验的网络用户期待看到网站名字和标志、导航条、一些链接，也许还有一个搜索框。当在线订购机票时，他们期待能够指定行程详细信息，查看搜索结果，选择决定的航班，并且购买机票。
　　由于软件用户和网站用户感知模式的存在，他们经常不仔细看就点击按钮或链接。他们对控件位置的期望更多来自在当前情况下，他们自己的框架期望他们在屏幕上看见什么。这点有时会让软件设计者觉得挫败，因为设计者期望用户看见屏幕上确实有的东西，但人类的视觉系统却不是这样工作的。
　　例如，在一个多页对话框①的最后一页，Next（下一步）和Back（返回）按钮交换了位置，很多人就不会立刻注意到（见图1-3）。前几页上布置一致的按钮麻痹了他们的视觉系统。甚至在无心地返回了几次之后，他们可能仍然觉察不到按钮不在标准位置上。这就是为什么“控件的摆放要一致”是一个常见的用户界面设计准则。
　　①多步对话框在用户界面设计的术语叫“向导”。
　　图1-3
　　Next按钮感觉是在一致的位置上，即使并非如此
　　类似地，在寻找某件东西时，如果它不在老地方或者看起来与往常不同，即使就在眼皮底下我们也可能视而不见。这是因为经验调整我们到期望的地方依据期望的特征去寻找。例如，如果一个网站某个表单上“提交”按钮的形状或者颜色与其他表单上的按钮不同，用户就可能找不到它。本章在关于目标如何影响感知的一节中，会深入讨论这种由预期导致的盲目性。
　　习惯性
　　经验影响感知的第三种方式被称为习惯性。重复置身于同样（或者非常类似）的感觉会让感觉系统的敏感度降低。习惯性是人们神经系统在非常低层的一个现象，它发生在神经级别。即使是非常原始的、只具有非常简单神经系统的动物，比如扁形虫和阿米巴虫，也会对重复的刺激（比如轻微的电击或者闪光）产生习惯性。具有复杂神经系统的人类，对一系列事件也会产生习惯性，从低层次（如连续的蜂鸣声）、到中间层次（如网站上闪烁的广告条）、再到高层次（比如某人在每次派对上重复说同一个笑话或者某政客的冗长单调的演讲），都是如此。
　　在使用电脑时，当“你是否确定”的确认框一次又一次出现，人们也能体验到习惯性。人们最开始会注意到并且或许会做出反应，但最终则会反射般直接忽视并关闭确认框。
　　在最近被标以“社交媒体倦怠”（Nichols，2013）、“社交媒体疲劳”或者“Facebook假期”（Rainie等，2013）的现象中，习惯性也是一个因素。社交网站的新用户一开始对用微博来分享体验的创新感到兴奋，但迟早会感到疲惫不堪，不愿再耗费时间阅读“朋友们”分享的各种琐事，比如，“看！我午饭吃的这份三文鱼沙拉太赞了！”
　　注意瞬脱
　　过往经验对低层感知的另一个影响，发生在人们刚刚发现或者听到某件重要的事情之后。在识别之后短暂的0。15秒到0。45秒之间，即使耳朵和眼睛正常工作，人们也接近于失聪而且无视其他视觉刺激。研究者们把这个现象称为注意瞬脱（Raymond等，1992，Stafford和Webb，2005）①，认为这是由于大脑的感觉与注意力机制在短时间内完全用于处理第一个识别而产生的。
　　①第14章会在其他感知间隔的语境下，讨论注意瞬脱的间隔。
　　举一个经典的例子：你在一节正在进站的地铁车厢内，计划与两位朋友在地铁站见面。当地铁到达时，你的车厢经过了一位朋友，你透过车窗短暂地看到了他。在下一秒钟，又经过了另一位朋友，但你却没注意到她。这是因为，当她的影像抵达你的视网膜时，你正好因为认出了第一位朋友而处于注意瞬脱中。
　　当人们使用基于电脑的系统和在线服务时，如果事情连续发生得太快，他们会因为注意瞬脱而错过一些信息或者事件。当下制作纪录影片有一个流行的手段，就是连续快速展示一系列静态照片。这个方式是非常容易产生注意瞬脱的：如果一个图片真的吸引了你的注意力（比如对你有特别的意义），你可能就会错过紧接其后的一两张图片。相比之下，自动播放的幻灯片（比如在网站或者信息资讯机上）中的一张引人注目的图片是不大可能造成注意瞬脱的（即错过下一张图），因为每张图片都一般有几秒钟显示时间。
　　环境影响感知
　　当我们试图去理解视觉如何工作时，很容易认为它是一个自下而上的过程，将边、线条、角度、弧线和纹路等基本要素组成图案并最后形成有意义的事物。以阅读为例，你可能假设我们的视觉系统首先识别字母，把它们组合成单词，再将单词组合成句子，如此继续。
　　但视觉感知，尤其是阅读，不完全是一个自下而上的过程，其中也有自上而下的作用。例如，包含某个字母的单词能够影响我们对这个字母的判断（见图1-4）。
　　图1-4
　　同样的字符受其附近的字母影响而被感觉成H或A
　　类似地，对一句话或者一段话完整的理解甚至能够影响我们所看到的单词。例如，同样的字母序列可以因前后段落含义的不同而被理解成不同的单词（见图1-5）。
　　图1-5
　　同样的短语因其所在的短语组不同而有不同的解读
　　视觉受环境因素影响的偏差在不仅仅在阅读中出现。Müller–Lyer错觉就是一个著名的例子（见图1-6）：两条水平线，一条有朝外指向的“翅”，另一条有着朝内指向的“翅”，尽管它们相同长度，但不同的“翅”使得我们的视觉系统觉得上方的线比下方的线更长。这类视错觉（见图1-7）欺骗了我们，因为我们的视觉系统并不使用精确的、最佳的处理方式来感知世界。视觉系统在进化中发展，这是一个半随机的过程，不断叠加各种应急的，通常非完备且不精确的方案。它在大部分时间里运转正常，但包含许多粗略估计、拼凑、修补和一些在某些情况下彻底导致问题的bug。
　　图1-6
　　Müller-Lyer错觉：同样长度的水平线看起来不一样长
　　图1-7
　　（A）棋盘中间并未凸起；（B）三角形的边没有弯曲；（C）红色的竖线是平行的
　　图1-6和图1-7中的例子显示，视觉被视觉环境所影响。然而，在当前环境下不同感官之间也会有感知的偏差。五官的感觉会同时相互影响。我们的触觉感受可能会被听到的、看到的或者闻到的所影响，视觉会被听觉影响，听觉也会被视觉影响。以下是我们的视觉影响听觉的两个例子。
　　McGurk效应如果你观看一个视频，其中有人说着“吧、吧、吧”，接着“嗒、嗒、嗒”，然后“哇、哇、哇”，但音频一直是“吧、吧、吧”。你将会通过观看说话者的嘴唇运动而不是实际听到的来辨认他说的音节。只有当闭上眼睛或者转移目光，你才能真正听到实际语音发出的音节。我打赌你们不知道自己可以读唇，但事实上人们一天里这么做的次数相当多。
　　腹语腹语表演者并不转移自己的声音，他们仅仅是学会了不动嘴说话。观众的大脑感觉是与声音最近的那个动着的嘴在说话，就是腹语者表演用的玩偶的嘴（Eagleman，2012）。
　　反过来，听觉影响视觉的一个例子是幻觉闪光效果。当屏幕上的某一点短暂地闪了一下，但伴随着两个快速的蜂鸣声，就会看起来像闪了两下。类似地，感觉到的闪光频率也可以随点击鼠标的频率变化（Eagleman，2012）。
　　后续章节将解释人脑中的视觉感知、阅读和认知功能。现在就简单地表述为：识别一个字母、一个单词、一张脸或者其他任何物体的神经活动，都包含了环境刺激产生的神经信号的输入。这个环境包括感知到的其他邻近对象和事件，甚至由环境激活的、对以往感知到的对象和事件的记忆。
　　环境不仅影响人的感知，也影响低级动物的感知。一位朋友经常带着她的狗开车出门办事。一天当她开进自家车道时，有一只猫在前院。她的狗看见了就开始叫。我的朋友一打开车门，狗就蹿出去追那只猫，猫立刻转身跳进灌木丛中逃跑了。狗也扎进灌木丛，但没逮到猫。那之后的一段时间里，这条狗就一直很烦躁不安。
　　之后，在我的朋友住在那里的那段时间，每次她开车带着狗回到家，它就兴奋地叫起来，并在车门打开那一刻跳出去，冲过院子，跃入灌木丛。没有猫在那里，但那并不重要。乘着车回到家对这狗来说已经足够让它看见甚至可能闻到一只猫。然而，如果是走回家，比如每天遛完它后，“猫幻影”就不会发生。
　　目标影响感知
　　除了经验和当前环境会影响感知，我们的目标和对将来的计划也会影响我们的感知。具体地说，我们的目标可以做到如下的事。
　　引导我们的感觉器官，让我们从四周的环境根据需要采集样本。
　　对我们感知到的进行过滤：与目标无关的事物在被意识到之前就被过滤掉，也就不会被我们的主观意识注意到。
　　例如，当人们在软件里或者网站上寻找信息或者某个功能时，他们并不会认真阅读，只是快速而粗略地扫描屏幕上与目标相关的东西。他们不是仅仅忽略掉与目标无关的东西，而是经常根本注意不到它们。
　　现在就来体会一下。请在图1-8中的工具箱里找到剪刀，然后立刻回到这里。
　　图1-8
　　工具箱：这里有剪刀吗
　　你发现剪刀了吗？现在不去看工具箱，你能说出来那里面有没有螺丝刀吗？
　　除了视觉，我们的目标还过滤其他感官的感知。一个熟悉的例子是“鸡尾酒会”效应。如果你在一个拥挤的酒会上与某人谈话，你能把大部分注意力放在他说的话上，即使身边还有许多人在对话。你对谈话的兴趣越大就越能过认知与设计：理解UI设计准则第2版下载 mobi epub pdf txt 电子书格式