序
可用性测试是发现设计上问题的最直接方法，但效率低。因此设计需要沉淀和积累，形成方法论，形成准则。
引言
设计面临大量的冲突的目标，需要权衡，需要在设计准则中找到平衡点。（例如功能强大又要系统简单）。另外设计最好具备认知心理学的知识背景。
所有设计的准则都来源于人类心理学：感知、学习、推理、记忆的心理学研究。
第一章 我们感知自己的期望
经验影响感知
我们对周围世界的感知来源于我们期望，而非真实的描述。过去的经验、现在的环境、将来的目标会影响我们的感知。
两个简单的案例（字母和素描），不同的预期目标下看到的图片是不一样的。（貌似有道理）
用户经常不认真看屏幕就点击，他们根据以往经验，而不是屏幕上的实际内容。（所以不要用大量文字引导用户行为，效果不好的）
在上述心理学原则下，控件的摆放一致是最基本准则。（书中以按钮的顺序为例，确实是这样）
环境影响感知
视觉的感知不一定是自下而上的（先看单词再看句子），书中的案例显示，在不同的环境影响下，确实会把同样的字母判定成不同的含义（自上而下）。
周围环境对感知的影响也存在不同感官之间。
目标影响感知
与目标无关的东西会被过滤掉，而不会进入意识。视觉会做过滤外，听觉也会做过滤。感知过滤在网站导航中也会出现，书中的100美元中奖的案例挺有意思。
目标会影响我们注意什么，目标是我们的感知系统有预判，从而对某些特性敏感。
对设计意味着什么
上述三个影响对设计有三个启发：
1、避免歧义。对容易出现歧义的地方，依靠标准或惯例。
2、保持一致：在一致的位置摆放信息和控件。有助于用户快速识别。
3、理解目标：要理解用户使用系统的目标，知道目标导致用户对什么的感知强烈。在交互节点上确保提供用户需要的信息，并对应到可能的用户目标。
为观察结构优化视觉
视觉感知的格式塔（Gestalt)原理【描述性框架】：人类理解图像会自动构建结构，而非细节。该原理也是用户界面设计的准则。
格式塔原理：接近性
人类倾向于把接近的物体分为一类，把距离较远的物体分成两类。（书中星星行列的排布印证）
设计界面时可以把一组内的物体拉近，不同组的放远。（书中也给了一个反例，很到位）
格式塔原理：相似性
人类倾向于把相似的物体分为一类（例如书中空心星星的案例）。也给了一个反例。
格式塔原理：连续性
人类会把不连续的相似物体自动补齐连续。例如IBM标志。
格式塔原理：封闭性
视觉系统会自动尝试把敞开的图形关闭起来。（例如书中圆的案例和三角形案例）
格式塔原理：对称性
视觉系统会分解复杂场景来降低复杂度，分解的方向往往趋向于最简单的方案。（例如书中的两个菱形叠加）
一个非常赞的案例,涉及了封闭性、连续性、对称性：
格式塔原理：主体/背景
视觉系统会自动尝试区分主体和背景。例如书中案例，会把小三角当成主体。当然，主体和背景有可能随着注意目标的不同而改变。（虽然很少）
背景可以传递品牌的信息。
通过半透明化当前主体，浮现新的主体，可以让用户清晰知道自己在交互中所处的位置，是不错的方法。
格式塔原理：共同命运
在动态过程中，具有相同动作或方向的会自动被构建为一组。哪怕物体之间距离比较远。
第三章：寻找和使用视觉结构
用户在使用网站时，会快速扫描相关信息，不会仔细去看。所以当信息以简洁和结构化呈现时，会更容易浏览和理解。
越是结构化和精炼，人们越能快速扫描和理解。
显示搜索结果也是，可以用信息结构化和避免噪声。
书中地产网站的计算软件结果图也给了类似的例子。计算结果和标签之间距离一样，违背接近性原则。
结构化也能提高记忆长数字的能力。例如电话号码。也可以利用数据控件强制结构化。
通过将信息分段，把大块的信息切割成小块。显著标记每个信息段，以层次结构展示。的视觉层次的方法，可以让用户更专注相关的信息。
第四章：阅读不是自然的
人类的大脑不是为阅读而设计的，在进化的过程中人类儿童学习语言不需要训练，但阅读需要。
阅读涉及识别模式和特征（字的线条，字的组成部分，词），阅读可以是自下而上特征驱动的（先看字，再明白意思），也可以使自上而下语境驱动的（英文中理解整段话，大脑会自动纠正一些错误单次）。
特征驱动的过程需要长时间训练才能转成无意识的行为。
书中举的英文句子去掉一半，还有句中单词错乱。
好的阅读应当是无意识的特征驱动。我本身是一个语境驱动的阅读者，所以细读的时候偶尔会费劲。
大脑的扫描也证明了高级阅读者和初级阅读者在大脑通路的使用上的不同。
不常见和不熟悉的词汇会影响阅读。
难以辨认的字体会影响阅读（阻碍的自下而上的无意识阅读）
小的字体，嘈杂背景下的文字也是一样的。
重复的信息也会淹没内容。
眼动在换行的时候会自动对齐到下一段的开始，所以大段文字居中或靠右对齐会打断无意识阅读。
设计需要支持，而非干扰阅读。
为阅读提供支持的设计准则
1、文字应基于无意识的特征识别来处理
2、使用直白的语言
3、文字设计突出视觉层次，例如标题、列表、表格和视觉加强的单词。
对设计的启示是：尽量少让人阅读
第五章：色觉是有限的
人类视觉是为了检测反差（边缘）而优化的。
现实世界中，由于周围都很明亮，所以提供光感的视杆细胞几乎提供不了什么信息。
不同的视锥细胞的敏感度不同，低频的红黄细胞敏感度高，中间的绿细胞敏感度中，高频的蓝细胞敏感度低。
人类对色彩的对比敏感，而非决定颜色敏感。所以阳光下的花和阴影的花会认为一样红。
越浅的颜色，越不容易区分。越小的色块，越不容易区分。越远的颜色，越不容易区分。
例如在数据图中，如果图例的色块太小，很可能让用户区分不出颜色。
在设计中，也要考虑不要讲常见色盲的颜色设计在一起。
使用色彩的准测
1、用饱和度、亮度和色相来区分颜色。避免采用轻微的差别。可以在灰度模式下测试，需要在灰度模式下也能看出差别。
2、使用独特的颜色通道。（红绿 黄蓝 黑白）在某个通道有信号，其它通道空信号是最容易识别的。
3、避免色盲人群无法区分的颜色。
4、使用颜色之外的其它提示。例如苹果的图标，除了颜色还有符号。
5、将强烈的对抗色分开。例如红绿。
第六章：我们的边界视力很糟糕
眼睛中央凹的分辨率比周围视锥细胞高很多，大脑会填充焦点之外的内容。
书中的例子也很有意思，对屏幕上中央凹关注的点以正确的文字，周围的文字随机变化，大脑也会认为看到的是一篇正常的文字。
在色彩上，中央凹的分辨率也比其他地方更敏锐。
边界视觉对运动有很好的敏锐度。边界视觉提供模糊的线索，引导眼球转动过去。
反例：电脑界面的出错信息出现在视觉边缘，并且没有明显的颜色或动作，用户往往注意不到。
让信息可见的常用方法
- 把信息放在用户所看的位置上。
- 标记出错误。
- 使用错误符号。
- 保留红色以呈现错误。
让用户注意到信息的重武器（小心使用）
- 弹出框：网页版应用的话用户可能屏蔽弹出框。另外弹出框会打断用户当前任务。
- 使用声音（蜂）
- 闪烁或简短的晃动：不能过长，四分之一到二分之一秒，否则很烦。例如菜单操作会利用闪烁表示确认收到指令。
第7章：我们的注意力有限，记忆力也不完美。
设计需要支持和增强记忆力，而非给记忆力增加负担。
感觉是受到环境和特征共同影响的。例如坐在车里听到狗交和在小区听到狗叫的感觉是不一样的。环境和特征越一致，大脑受到刺激的区域重合度越高。和感觉相关的大脑区域察觉简单的特征。而大脑较低的区域识别对象。
长期记忆是神经元被改变，产生了长期的改变。记忆也不是发生在一处，而是与神经元的连接有关系，破坏了某处神经元，不一定损伤记忆，可能只是让回忆不清晰或变慢。但破坏了关键路径上的神经元，可能会损失记忆。
短期记忆是感觉和注意现象的组合。感觉器官的刺激残留经大脑整合后形成了意识，或称短期记忆。短期记忆不是一个长期记忆的缓冲区，而是当前注意力的焦点。
短期记忆最重要的特点是低容量和高度不稳定性。一般可以记住不相关的7个事物。
短期记忆的特点对用户界面设计的影响
应当帮助用户从一个时刻到下一个时刻记住核心的信息。不能指望用户自己记住。
模式让交互系统分配不同的意义给相同的操作，从而让用户减少需要学习的操作数量。
但要提供足够的模式反馈， 要么不要提供模式。（例如车的档位会被新手挂错）即使系统的模式切换是由用户来决定或操作的。
一个案例是搜索，在点击操作后清空了搜索框，由于短期记忆的不稳定性，在注意力转移到搜索结果后，用户往往会忘了自己搜的是什么词。
同样因为短期记忆的不稳定性，不能指望用户记住一系列指令，而应该随时可以查阅。
长期记忆的特点
长期记忆的缺点：
- 容易产生错误：长期记忆是被压缩的，只留下一些特征，而非全部特征。
- 受情绪影响
- 追忆时可改变
长期记忆特点对用户节目设计的影响：
长期记忆的特点是人们需要工具去加强它。
身份认证是许多系统附加在用户长期记忆上的负担。
用户节目的一致性有助于学习和长期保留。
不同功能的操作越一致，用户要学的就越少。
第8章：注意力对思考以及行动的限制
一些用户界面设计的准则，建立在短期记忆和有限的注意力上。
模式一：专注于目标，而很少注意使用的工具
人们的注意力放在目标和与任务相关的东西上，只是很表面的考虑所用的工具，而且只在必要时才这样做。因为注意力集中在工具上时，会忘了目标及为了达成目标已完成的及进度。所以这个时候需要有提示。否则懵逼。
网站本身应隐入背景中，让用户专注于自己的目标。（Do not make me think)
模式二：使用外部帮助来记录正在做的事情
例如 邮件系统会区别草稿邮件，区别已读未读。交互系统还应该允许用户标记或移动对象。
模式三：我们跟着信息的气味靠近目标。
因为我们只关注目标，所以会注意到任何与目标相关的文字或元素上。
例如书中举的柜员机的例子。转账的任务会引导用户注意到 transfer 和donate。所以交互节目需要先梳理目标，确定任务。
信息气味导向的原理，意味着交互系统应该设计的有强烈的信息气味，引导用户实现目标。
所以需要理解用户在每次做决定时目标可能是什么，保证为每个重要目标提供选项，清晰标识出每个目标对应的选项。
模式四：我们偏好熟悉的路径
要实现某个目标，在有时间压力的情况下，我们会采用熟悉的路径，而不是探索新路径。因为熟知的路径不需要消耗注意力和短期记忆。
用电脑时不动脑子很重要，人们更愿意为了少动脑子而多敲键盘。
在一些低频操作的软件里，不动脑子胜过按键。可以增加操作路径来减少问题。
引导用户到最佳路径，在第一屏就应把用户路径展现出来，提供清晰的信息气味
帮助有经验的用户提高效率。这也是快捷键的思路。
模式五：思考周期-目标 执行 评估
评估环节说明需要给用户结果确认的评估手段。
帮助的手段：
目标：提供达成目标的清晰路径，包括起始步骤。
执行：基于任务而非实现，在需要选择的节点上提供清晰的信息气味。
评估：提供进度反馈，让用户离开不能帮助实现目标的操作。
模式六：完成主要目标后会忘记收尾工作
短期记忆力的焦点之一是当前的目标，其它的注意力在于如何完成目标。注意力随着任务的执行而转移（所以当前任务的所有事情最好都在当前任务完成，不要放到后面指望回头再检查，短期记忆原理会忘记检查点）。
好的交互应该避免这样的失误，甚至自动完成收尾。例如转向完成后自动关闭转向灯。
第九章 识别容易，回忆很难
人脑能很快的识别物体，但没有线索的支持下回忆是不善长的。
记忆通过两种方式激活：a)、从感官来的感觉。b)、从其他大脑来的活动。识别是感觉与长期记忆的协同工作。
利用环境辅助记忆。
GUI的基础：更轻松识别，更困难回忆。
看到和选择比回忆和输入更容易。
尽可能使用图像表达功能，icon能和其它图标区分开，能与代表的意义联系起来。
使用缩略图紧凑描绘全尺寸图像，而且越熟悉越容易识别缩略图。
越多人使用的功能，应该越可见：减少用户回忆。
使用视觉提示让用户知道他们所处的位置
让认证信息容易回忆
第十章 从经验中学习与学后付诸实践容易，解决问题和计算很难
旧脑，中脑，新脑
从经验中学习通常是容易的
操作已经学会的动作是容易的：人们为了节约注意力而将熟悉的事情交由无意识处理。
解决问题和计算是困难的
段时间处理新问题，有代价，不能并行惊醒，同时需要专注的注意力和不间断的有意识监控。计算消耗注意力和短期记忆力。
当问题的要求超出短期记忆，需要从长期记忆里提取信息或受到打扰，脑负荷就增加。
用户为了避免思考，或者认为思考带来的回报不值得，而一直采用“笨办法”。
一些设计原则：
- 显著标识系统状态和用户当前进度。
- 引导用户完成他们的目标。在每一次做决定的时候提供清晰的信息气味，引导用户向目标前进。
- 不要让用户诊断系统问题。
- 尽可能减少设置的数量和复杂度。
- 让用户试用感觉而不是计算。
- 让系统另人感到熟悉。使用已知词汇，遵循业界标准，使用比喻。
- 让电脑计算。
第十一章：许多因素影响学习
大脑执行熟练掌握的活动采用的是“自动”的方式，与解决新问题和计算所用的高度受控的方式不同。无意识行为不占用注意力资源，且能并行执行。受控方式占用短期记忆资源以及无法并行。
练习和多次操作能将受控行为转为无意识行为。
交互最好能在一个时间范围内能让操作是无意识行为。
操作专注于任务、简单和一致时学的更快
以使用天文望远镜为例，用户为了观测猎户座，需要把任务（观测猎户座），转为工具的操作（调整望远镜的垂直角度，水平角度，目标与当前的角度差等）。这称为执行的鸿沟，用户把注意力从任务转移到操作，会带来损失。要减少任务和操作之间的鸿沟，需要：
- 做任务分析。
- 设计一个专注于任务的概念模型，包括对象-操作分析。
- 严格按照任务分析和概念模型设计UI
任务分析：
用户使用目的；哪些人群；任务出现频率；任务重要度；任务步骤；任务结果和输出；任务的相关信息来源；任务信息的利用；使用的工具；执行任务时会遇到什么问题，问题频率，问题重要度，问题原因，问题造成的损失大小；执行任务使用的词汇；如何沟通；不同任务的联系；
根据任务设计专注任务的概念模型。工具和任务之间所需概念的转换越直接越好。UI应尽可能达到用户自动试用这个工具。
对象-动作分析
应用展现给用户的概念对象，用户对对象能做的动作，各对象的属性，对象之间的关系。不要让用户了解他们不需要了解的东西，这样会影响可学习性。
重要的概念设计可以在UI设计之前就完成。
对于额外添加的功能，以防用户万一需要这个功能，除非有很多潜在用户需要，否则这类的需求要坚决抵制。因为每多增加一种可能性，会导致整个工程复杂性指数级别的上升。
一致性
用户从有意识的操作进步到无意识的操作受到系统一致性的严重影响。功能越可预期，一致性越高，了解越快速。不一致会导致用户注意力的损耗。
过度复杂来源于不同又太相似的概念（书中举的例子挺好）。
概念层的一致性：对象是否有相同的操作和属性。
交互层的一致性：同一类型的概念操作是否由相同的物理动作触发。
对象-操作矩阵
行是对象，列是操作，对应的单元格打勾。从该矩阵上能看出交互概念模型的复杂度。越高说明对象越多，越宽说明操作越多，同类型的对象也可看出交互的相似性。
小而紧凑的矩阵是易于学习的。
大而稀疏的矩阵是很难学习并且交互不一致的设计。
首要经验是尽可能压缩对象-操作矩阵。
或者大矩阵由小矩阵组成，小矩阵是紧密的。
根据业界标准，保持按键的一致性
仅在概念层和任务层创新，在按键上要保持一致性，降低学习成本。
词汇专注于任务，熟悉和一致
保证新引入的概念聚焦在用户要完成的任务上，而非所用的技术上。书中的反例举得很好。
所用的词汇应该是熟悉的
熟悉的词汇降低对用户注意力和理解力资源的占用。
专用词汇应保持一致
人们希望将认知资源用在自己的目标和任务上。人们对展示的东西仅作表面和字面上的理解。因此交互系统中的专用词汇应保持高度一致。
同一个名称就是同一个东西，不同的名称就是不同的东西。（腾讯云的云服务器和建站主机违反了这个原则）词条和概念要一一对应。（书中举了photoshop的例子）
有一个好的概念模型方便开发专注于任务、熟悉和一致的专用词汇
产品词典里的词条应来源于任务，而不是实现方式。对业界标准的概念不要去发明新名词。产品词典应随着产品的发展而发展。
风险低的时候学的更快
所以要降低用户的风险，并让用户意识到这一点。错误要容易修复，撤销或反转。
向用户清晰展示他们做了什么。
第十二章 我们有时间要求
感知和认知是有时长的。不能与用户的时间要求同步的交互系统会被认为不灵敏。
感知的响应度被研究证明是决定用户满意度最重要的因素。
响应度的定义：以服从用户在时间上的要求以及用户满意度来衡量。
高响应度的交互不一定是高性能。例如书中解决问题的案例，咨询问题时快速响应，给出解决时间而非立即解决。
- 立刻告知接收输入。
- 操作完成所需时间提供指示。
- 等待时允许做其他事情。
- 对常见的用户请求做出预期。
好的响应度要对用户操作做出即时的反馈。
糟糕的案例：
- 对动作反馈迟缓。
- 耗时的操作阻断其它活动，还不能被取消。
- 运行时间长的操作对时间不提供线索。
大脑的时间常量：躲闪的反射动作反应非常快。
听觉非常灵敏，可以察觉出声音到达两耳的差异，从而判断声音方向。
对我们产生影响的视觉刺激最短5ms。无意识保护的运动反应80ms。
一个事件产生另一个事件的连续事件最长时间：140ms，超过这个时间，大脑会将两个事件无意识分割。
在识别一个事物后注意力暂失的时间窗口（500ms）
视觉-运动反应时间700ms。
不受干扰的单一操作时长 6~30s，超过这一时间很容易分神。
满足实时交互的设计：
- 立刻告知收到用户动作，保持用户对因果关系的感知。
- 动画要做到平滑和清晰。
- 让用户取消不想要的长时间操作。
- 让用户知道长时间操作需要多长时间。
声音交互的间隔不要超过1ms，否则注意力会被分散。
10ms以上就会被用户察觉到延时。
对用户动作的反馈不要超过0.1s，否则因果关系会被打破。紧密的手眼协调延时不要超过0.1s。另外大脑会在这个时间范围内对信息重排。所以多个人一起说话在这个窗口期内会被大脑区分开各自的话语。
10S：多页向导对话框每一步最多消耗用户10s的时间，多了应该被分解到更多步骤。否则容易失去用户注意力。
100S：支持快速关键决策不要超过的时间。
达到高响应度交互系统的一些指导原则
- 使用忙碌标志。应为任何运行时会阻止用户下一步操作显示一个忙碌标志。即使能很快执行完。
- 使用用户进度指示：显示进度的时限是1s内。任何超过几秒的操作都应该显示一个进度标识。显示还剩多少，而非已完成多少。显示总进度而非当前进度。0%和100%处如果停留超过2s，用户会认为有问题。
- 进度应该是平缓，线性的。
- 用人们平时使用的语言和单位。
- 单位任务内的延迟比单位任务之间的延迟麻烦。单位任务是分解大型任务的方式，在执行单位任务时，用户将信息保存在知觉区内，完成后会释放。保存信息占用注意力资源，所以任务内不要分散注意力。任务间的延迟危害更小些。
- 先显示重要的信息。给一些信息让用户动脑子，让用户注意力从未处理完成的信息上移开。例如打开文档，先打开一页再去加载其它的。打开图片，先打开低分辨率版，再打开高分辨率版。
- 手眼协调的任务延迟不要超过0.1s，可以伪造反馈后续计算来处理。
- 提前处理。例如文档渲染，可以在用户操作的空闲时间预先渲染。
- 根据用户输入的优先级而非顺序处理。进来找机会按照任务重排，优先处理重要度高的任务。
- 监控时间，哪怕降低工作质量也要保障时间实时性。
- 提供及时反馈，即使网页应用也应该如此。比如用原生组件，分批加载渲染等方法。
- 实现高响应度是重要的。响应度是设计问题，不仅仅是实现问题。响应度不会随着硬件的提升而消失。
手机扫码或点击此处访问我的个站
我的个站.png
本文章欢迎转载，转载请注明出处和作者。
