del

极客时间专栏/geek/基于人因的用户体验设计课/基础篇/03 | 重新认识感觉：眼见不一定为实.md

@@ -0,0 +1,217 @@
+<audio id="audio" title="03 | 重新认识感觉：眼见不一定为实" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/5a/8d/5a0b6a264d31215e1bd01a66b53f368d.mp3"></audio>
+
+你好，我是Rocky。今天和你来聊聊人的感觉对设计的影响。
+
+很多设计师在设计时容易靠感觉来设计，但我这节课不是教你怎么去找感觉，而是要教你如何在设计中正确理解人的感觉。
+
+## **感觉的定义**
+
+你可以把人想象成一个机器人。人身体上有很多的传感器，也就是我们说的感觉器官。传统的五感的眼、耳、鼻、舌、皮肤分别是视觉传感器、听觉传感器、嗅觉传感器、味觉传感器和触觉传感器。
+
+人也有肌体神经和半规管之类的器官去承担重力传感器、平衡传感器的角色，这些传感器能让我们能感觉到重力感、平衡感等不一样的感觉。这些传感器事先会对外部的真实世界的各种刺激做一个采样，然后传到大脑皮层进行加工处理，产生初步的认知。
+
+不同的感觉器官会识别不同的外界特征，具体情况你可以参考下面这张表。
+
+<img src="https://static001.geekbang.org/resource/image/a0/d1/a0f974aa32c973240f5a4595cf4cb3d1.jpg" alt="">
+
+## **感知觉基本特性及在设计中的运用**
+
+我们大都说感知世界，不会简单地说感觉世界。这是因为光有数据采集是不够的，最核心的还是要有一个超级厉害的大脑能处理得了这些信息。人会把这些信息会根据人的知识、经验，逻辑思维、情感等等一切复杂的心理进行信息整合处理，产生对世界的认知，再延展出对世界的理解。别看皮皮虾能看到那么多色彩（它有16种视锥细胞），但是它可理解不了这么多色彩带来复杂的情绪情感。
+
+所以，咱们一般不把认知和感觉两个词分开。这里就统称为感知觉。今天这节课我们先谈谈感知觉的基本特征及在设计中的运用。后续几节课我们再展开来分别讲讲视觉、听觉、触觉以及几种感觉的联动协同。
+
+### **整体性**
+
+请你想象一下这样一个场景：你走在一个陌生城市里，人群中迎面走来好多年不见的老同学，你一眼就认出了他。于是你赶紧挥手：“嗨，你不是那个谁谁嘛。”
+
+能快速认清一张脸，除了感谢人的记忆能力之外，有一项感知觉特征至关重要，那就是整体性。可能你会觉得，这不就是类似计算机一样的人脸识别能力嘛？没那么简单。
+
+你可以看看下面这个图片。这张图片仿佛白纸上弄脏了，搞得都是随机的墨汁黑色污渍。但真是这样吗？你稍微仔细看一下就会发现，这是一只斑点狗在树荫下的地面上嗅着什么。
+
+<img src="https://static001.geekbang.org/resource/image/58/aa/58c7cb57030a7a3009311f4a7ccee9aa.jpg" alt="">
+
+如果是由计算机图像识别算法来识别这张图，而计算机之前完全没有保存过这个图片，那么目前的计算机的技术是死活也算不出来，这会是一条斑点狗。
+
+但是人可以识别出来。因为人不是以一个拼积木方式认知这张图（先确定它的各个部分，这是脚、耳朵、鼻子、还有尾巴，所以这是一条狗）。而是看着看着，立刻就看出来，这是一条狗！你看，狗的尾巴在这儿，还有这应该是它的鼻子，这是它的后腿吧，嗯，这个应该是它的耳朵。
+
+这就是人对世界认知的整体性的魅力。我们不是简单做各个部分的叠加堆砌，然后形成的整体认知。我们是“**整体的认知大于部分之和，或者说先于部分认知**”。
+
+你看到一位美女，也绝对不是看到这个美女的眼睛美、嘴巴美、鼻子美、耳朵美，然后拼起来就一定美。美女的美是各种五官的布局和整个脸型、发型、肤色等等综合认知的一个整体评价：美女。
+
+关于整体性你还可以看看下面这幅封面，它的名字叫做皮特和狼。你第一眼看到的是一个蜷着身子的灰狼和它面前的鸭子，皮特并未直接被画在画面里。但你仔细看看可以发现，人脸的侧影巧妙地用狼的尾巴给勾勒了出来。
+
+<img src="https://static001.geekbang.org/resource/image/a7/99/a74ca1f27a79f1ba130957e4f2c55d99.jpg" alt="">
+
+体验设计中，整体性意味着你在设计时对整体框架设计思考要先于对细节的打磨，对整体页面的布局、构图、色彩的整个感知要有清晰的规划。
+
+### **选择性**
+
+不知道你有没有遇到过这种情况：你和你的朋友在酒店的大堂沙发上聊天，突然，你觉察到朋友的眼神聚焦点从你身上移到了你的后侧方，你也条件反射式地回头看过去，于是你看到了一个红衣美女从大堂走过。
+
+你的朋友是如何在和你聊天的时候，迅速觉察到红衣美女走过的呢？你又如何通过他的眼神一个漂移的瞬间也感知到了情况的存在？这就是人对世界感知的选择性在起作用。
+
+计算机比较傻，它用摄像头获取图像信息，以同等重要程度的优先级对摄入的图像所有信息进行存储和后期加工。
+
+但人和计算机不一样。我们人脑就这么大，存储、计算能力都有限，无法以同等重要程度的优先级对进入视觉系统的所有信息进行加工。所以**我们必须通过一些选择性的规则，对信息进行筛选加工过滤，才会进入后期意识处理**。
+
+这些选择性的规则可能是一种明显的对象背景之间的差别、一种对象的运动、距离远近。当然，这种选择性还会依赖于人的动机目的性、兴趣点。对象背景差别越大、运动越显著、距离越近，人的动机目的性越强烈，兴趣点越大，那么我们就更能够快速地感知到这个信息。
+
+我遇到很多设计师，他们在一个构图中，把某些重要的文字写得很小很密，用的字体很细，和背景的色彩对比也不够强烈。
+
+我问设计师为什么这么设计，他说好看。可是如果在我们做的海报设计里，用户都不容易被选择性注意力识别，基本体验都没有达到，是不是忽略了主要矛盾？
+
+以前我们人因研究小组经常做眼动仪实验（人的视觉焦点选择真的很好玩）。比如对于泳装帅哥和泳装美女来说，男生和女生的视觉焦点分别看过去，焦点选择差别还挺大的。如果动态来跟踪人的视觉焦点动线，你就知道人的视线都在什么事物上反复停留。
+
+<img src="https://static001.geekbang.org/resource/image/81/08/81509688b60ea6d3f9832fabf668ec08.png" alt="">
+
+回到刚才我们说的红衣美女的例子。你和你的朋友正在盯着美女走出酒店旋转门的时候，你的另外一个朋友从旋转门进来，但是很容易就会被你们直接忽视了。这就是选择性的干扰性视盲。当你的注意力在某些移动人物上时，容易把其他人物当成空气一般忽视掉。
+
+这个干扰性视盲的偏见，要求我们在设计交互的时候不要把关键的内容隐藏在不必要的干扰环境里。比如不当的动态广告banner设计，花里胡哨，动效动静太大，或者色彩过于绚丽的弹窗小广告。
+
+在一个安全性要求很高的持续作业环境中，更不要让用户脱离主任务而进行其他的交互任务，这样会影响安全性。很多电动车用的大屏幕触屏交互，其实会造成用户的分神。在驾驶过程中，这不是一种基于安全性考虑的做法。
+
+### **对比性**
+
+我们继续刚才红衣美女的例子，为什么她能很快被你的注意力选择到？
+
+假设那个美女穿得很普通，比如灰色上衣、黑色裤子，和周边人群其他人相比，色彩并不突出，还会那么容易被你关注到吗？显然不会。这就是**对比性**在选择中起了作用。
+
+在皑皑白雪中，你可以很快看到那只黑熊；在漫漫黄沙中，你会很快锁定那片绿洲。中秋节大大的月亮周围，你总觉得好像星星很少；而漆黑的夜空，又仿佛群星闪烁。
+
+**因为人对环境的认知，也会不停地通过对比，来寻找视觉焦点。**
+
+怎么把对比性运用在设计中？你可以用来强调事物之间的差异性，避免页面元素太相似。如果元素（字体、颜色、大小、风格、材质、形状、空间等）不相同，那就让它们截然不同：
+
+- 在色彩中，对比会突出重点，恰当的对比可以很好地制造出焦点（画面主体）；
+- 在版式编排中，鲜明对比可以形成强有力的反差效果，第一时间让用户捕捉到主体和重点；
+- ......
+
+比如下面这个例子，就主要采用了色彩对比，主体人物和文字在版面中都异常显眼。因为它和周围的视觉元素相比，产生了很强的差异性。
+
+<img src="https://static001.geekbang.org/resource/image/34/ff/3409c50d0ea6be3f30be325b0d5yydff.jpg" alt="">
+
+字体或者文字编排上的对比也是用得非常多的。前几年流行的大标题，就是典型地运用对比方式来增加层次感。
+
+<img src="https://static001.geekbang.org/resource/image/aa/a7/aa88ed5ac0f5ce86843aff9abc10daa7.jpg" alt="">
+
+如果一个画面没有对比，会让人觉得单调乏味。**画面要突出重点。**对比可以帮助我们增加画面的层次感，清晰展示逻辑和内容要点。有了对比，画面才会更加生动活泼，主次分明。
+
+### **理解性**
+
+我在欧洲最喜欢做的事情就是去艺术博物馆。看各种艺术作品。我一开始看画的时候，很多作品都看不懂，后来慢慢看得多了才找到那种看画的感觉。
+
+在博物馆里有只顾着拍照打卡的人，也有细细品味欣赏画作的人。这就是人理解性不同的体现。理解性和人的过去的知识经验、文化背景有非常强的关系。**知识经验越丰富、文化内蕴越深，理解就越深刻。**
+
+我们设计创作，要基于对当前你的受众的理解性来理解。这句话说的有些绕，简单来说就是如果你的设计物对应的受众是下里巴人，你非要设计得阳春白雪，那就是你过于曲高和寡，不理解你的用户了。
+
+但你也不要被我带偏了，理解性可不仅仅是高雅和低俗。因为很多事物，人们有着共性的理解性，但即便如此，依然被一些设计师所忽略。
+
+我举个例子。下面两个海报，左边和右边哪个女孩子可爱清纯，哪个女孩子喜欢搞怪和恶作剧？我相信即便你不熟悉这两个人，你也能很快回答出来。左边的女孩可爱清纯，右边的女孩搞怪和喜欢恶作剧。这种感觉是被设计师设计出来的。这叫做自上而下的光源偏见。
+
+<img src="https://static001.geekbang.org/resource/image/04/6a/040a7ee6dd2c5ac206509534f39b8a6a.jpg" alt="">
+
+几万年的演化下来，我们都有着自上而下的光源偏见。从上而下的光，比如来自大自然的太阳光、月光，会带给人平和、温暖、生机、安全感、正能量的感觉。
+
+但是什么光会从地底下往上照呢？地狱之火还是火山岩浆？反正不是好事。还记得你小时候晚上拿着手电筒，从下往上照扮鬼吓唬其他小伙伴吗？那就是你在不经意中利用了光源偏见。
+
+我以前团队的设计师画了一系列的手机桌面图标，其中有一个图标是描绘晴天的，但我们怎么看都有些别扭。最后我们发现原来是他画的云上面颜色略深，下面颜色浅，这明显是光线从下往上打过去的效果。于是他调整了光源照射角度，一下子感觉就对了。
+
+### **恒常性**
+
+我们刚刚了解到人的感知觉的整体性、选择性、对比性和理解性。但这些还远远不够。世界一定是复杂并且在持续不断地变化的。**在变化的世界中，人会一直尝试理解哪些事物是以不变应万变的。**
+
+天黑后，白色桌面、白色的纸都变暗、变黑了，但人还是认为这桌子、这纸是白的。煤球在中午大太阳的照射下是亮灰色的。如果把这时的煤球和黑暗中的白纸相比，一定后者更暗。但在我们的认知上，煤球还是黑色。这就是色彩明度的恒常性。
+
+前面说的那个红衣美女，她出了酒店的门，侧身左拐走上人行道，然后越走越远，在我们视线里越来越小，最后消失了。我们也不会觉得美女变成了小人国的小人，变成了蚂蚁，我们还认为美女体型没有变化，这就是大小形状的恒常性。
+
+不仅如此，现在人出门大家都端着手机。你端着手机出门，端着手机进出电梯、上下楼梯、过人行道、穿过车流，你不会去恐慌地四处张望。因为你已经对周边的环境产生了恒常性的认知。你已经对这个熟悉的路径习惯成自然，你不会再去过度关注细节。
+
+甚至你走到陌生的街道，只要环境还有参考性，你还会拿出与熟悉的情况做参考或暗示，这就是环境认知的恒常性。
+
+恒常性的形成需要时间。不过人一旦适应了一种恒常性，挑战、颠覆、改变这种恒常性的做法会产生非常强烈的不适感。我以前在欧洲生活过8年，经常在各个国家飞。跨越时差的飞行会产生Jetlag时差综合征。另外，英国和欧洲大陆的左行和右行有差别，突然到换行驶方向的国家，开车会的头几天也会很不适应，这都是对恒常性变化导致的不适感。
+
+了解到人感知的恒常性特征，面对设计，我们要去利用它、顺应它，或者巧妙地打破它达到新的效果。
+
+对应到用户体验设计中，**我们经常谈到的一致性设计，就是对恒常性的顺应**。特别是界面布局上入口、导航以及控制按钮的位置设计。它们的色彩、字体、阴影的感觉，我们要尤为注意。只有保持一致性才能让用户快速上手。
+
+**如果控件的功能不同，不要模仿已有的控件位置进行摆放，不然可能会导致错误的认知。**
+
+比如在移动端对话框的设计中，绝大多数情况下右侧为确定，左侧为取消。但是在下面这个快捷开关的确认界面里，右侧为确定，左侧却变成了重置。如果用户不仔细看，会简单以为按左侧按钮也是取消编辑。取消和重置完全不是一个维度的操作，重置是恢复默认值。那么这个设计就很有可能被用户集中吐槽。
+
+<img src="https://static001.geekbang.org/resource/image/9e/29/9e3ceba25ee3e71c4ea63fyy97df0129.jpg" alt="">
+
+### **联觉性**
+
+接下来我们来看看联觉性。什么是联觉性呢？几年前我听过深泽直人的演讲，他提到了两个很有代表性的设计，我通过这两个设计来和你解释一下。
+
+一是无印良品壁挂CD机。外形上它看起来像一台小小的换风扇，CD机的开关也改成换风扇的拉绳体验。当拉绳拉下，CD转动起来，恰如转动的扇叶。而缓缓飘出的轻柔音乐，恰如柔和的微风。用户会感觉音乐像风扇中的微风一样扑面而来，缓解夏日的燥热。
+
+<img src="https://static001.geekbang.org/resource/image/12/43/12af449e7631717ea67c1ccd93911d43.jpg" alt="">
+
+二是深泽直人设计的果汁盒。这种果汁盒在维持铝箔包装的方形外貌的基础上，添加了水果的特征，增加人的味觉联觉感受。猕猴桃样子的外包装除了色彩像猕猴桃之外，材质感也是毛茸茸的，让人胃口大开。
+
+<img src="https://static001.geekbang.org/resource/image/de/08/de44cfd0e8540c2d3fd128f80a8f0308.jpg" alt="">
+
+通过以上的两个案例，联觉得概念也就呼之欲出了：**一种感觉引起另一种感觉的现象就是联觉。**你发现没有，这两个设计里一个是音乐如微风般吹过脸颊，一个是秀色可餐，都巧妙运用了人的感知觉的联觉性。你在设计中，也可以多去思考思考，赋予我们的设计联觉性。
+
+### **错觉**
+
+俗话说，眼见为实。其实眼见还真的不见得为实。
+
+不信你看下面这幅图。棋盘中的A和B格子，颜色谁深谁浅。如果你是第一次看过这个图，你一定会说，这还用问，那肯定是A深B浅咯。
+
+<img src="https://static001.geekbang.org/resource/image/fb/cc/fbb2019e7f10580a432b3c389b843ecc.png" alt="">
+
+但其实A和B本来是一个颜色，不信的话，你可以把这个图导入到Photoshop中，用色彩吸管吸一下看看。
+
+如下的A中有左右两个图形，两个图形正中心都有一个白色的圆。哪个白色的圆大一些？B中也有左右两个图形，两个图形的正中心都有一个黑色的圆。哪个黑色的圆更大一些？大部分人都会觉得，不管是A还是B，右边中心的圆总是比左边中心的圆要大一点点。
+
+<img src="https://static001.geekbang.org/resource/image/3a/fd/3a94fc183957de9af464c8f11cacb5fd.png" alt="">
+
+正确的答案是一样大。
+
+这其实就是错觉。**人的感知觉会犯错，而且会经常犯错。**
+
+错觉有很多种，视觉、听觉、味觉、嗅觉等方面的知觉经验，都会出现错觉。被心理学家研究最多的是视错觉。
+
+产生错觉的原因也非常复杂。一般是两个：一个是生理角度，错觉受到眼睛和视网膜内神经交互作用的影响；一个是认知角度，认为错觉受到更高水平的注意、过去经验、决策等认知因素的影响。
+
+有些情况下错觉是有危害的。而更多时候，合理地运用错觉会使生活增色不少。在我们的日常生活中会遇到的错觉的例子有很多。
+
+比如你希望减肥，那么尽量选择用小盘吃。因为同样的食物，放在小盘子里的饱腹感会比放在大盘子里更强。这就是形状上的错觉导致的。
+
+又比如在日本的三叶咖啡店，老板偶然发现不同颜色会使人产生不同的感觉。为了验证他的这个想法，他邀请了30多人，每人各喝四杯浓度相同但是杯子颜色不同的咖啡（四个咖啡杯颜色分别是红色、咖啡色、黄色和青色）。
+
+最后得出结论：几乎所有的人认为使用红色杯子的咖啡调地太浓了；使用咖啡色杯子认为太浓的人数约有三分之二；使用黄色杯子的感觉是浓度正好；而使用青色的杯子的都觉得太淡。
+
+从此以后，三叶咖啡店一律改用红色杯子盛咖啡，既节约了成本，又使顾客对咖啡质量和口味感到满意。这个咖啡店的老板通过这个小实验，巧妙地运用了颜色上的错觉。
+
+## 总结
+
+好了，讲到这里，今天的内容也就基本结束了。最后我来给你总结一下今天讲的要点。
+
+如果把人类比为机器人，那么感觉器官就是人类的传感器。但人类和机器不同，人类认识世界不是简单地对信息照单全收。我们必须通过一些选择性的规则，对信息进行筛选加工过滤，才会进入后期意识处理。所以我们不能只认识感觉，还要认识感知觉的特性。
+
+感知觉的特征包括整体性、选择性、对比性、理解性、恒常性、联觉性和错觉。
+
+整体性是指我们对事物整体的认识。你在设计中要善用整体性原则（比如两面图形），在巧妙简化构图情况下体现有趣的完整性表达。
+
+选择性是在复杂事物中找到重点的特性。选择性依赖于环境、动机和情绪等。我们在设计中要顺应这种选择性，突出焦点，减少干扰。
+
+对比性在设计中使用非常广泛。巧用色彩、形状、大小的对比性会突出重点，显得主次分明。
+
+对理解性来说，如果我们设计需要明确告知用户意图，那么就需要消除歧义，不要给模棱两可的设计。同时你也可以巧用人的理解性构建不同的设计氛围，比如光源方向的运用。
+
+恒常性是指尽管作用于我们感官的刺激在不断地变化，我们所知觉到的物体却保持着相当程度的稳定性。我们在设计中要遵循物理规律的动效设计，达到自然的交互体验设计。
+
+联觉性是指一种感觉引起另一种感觉的现象。能调动联觉性将是一种高级的体验设计。如何做到秀色可餐、余音绕梁，需要你的创意。
+
+错觉是对外界事物不正确的知觉。我们产生错觉有生理的局限，也有认知的原因。巧用大小、距离、色彩等视错觉，会达到非常有趣的体验效果。
+
+其实很多好的设计不仅仅考虑到了一种感知觉特性。你在日常的设计中要根据业务需求灵活运用，不必僵化。最后我还给你总结了一个脑图，可以长按保存下来，它对在设计中如何重新认识感觉会很有帮助。
+
+<img src="https://static001.geekbang.org/resource/image/86/a0/86aa66050f083587a0a308a4472941a0.png" alt="">
+
+## 作业
+
+最后，我给你留了一个小作业，请你分享一下你设计的，或者你在生活中发现的运用感知觉基本特征的设计。

极客时间专栏/geek/基于人因的用户体验设计课/基础篇/04 | 重新认识视觉（上）：色彩有重量吗？.md

@@ -0,0 +1,180 @@
+<audio id="audio" title="04 | 重新认识视觉（上）：色彩有重量吗？" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/10/5a/107996ed84cac8a17088712cd0529b5a.mp3"></audio>
+
+你好，我是Rocky。
+
+在上节课里，我给你讲了如何在设计中正确理解人的感觉，我们学习了感知觉的几大特性：整体性、选择性、对比性、理解性、恒常性、联觉性和错觉，以及这些特性在具体设计中如何运用。
+
+在感知觉中，最重要的是视觉。因为人类获取世界80%信息都是来自于视觉。你以前理解的视觉大部分是从美学角度去理解，但这远远不够。我这门课就是深挖设计背后的理性逻辑。**所以我们至少要从物理学、生理学和心理学这三个角度来理解视觉。**接下来我会用三节课详细和你谈谈视觉对设计的影响。
+
+视觉是怎么产生的？套用圣经创世纪的第一句话：上帝说，要有光，于是便有了光。但是有了光就足够了吗？当然不是。
+
+光作为一种电磁波，从光源开始在空间内传播。光要穿过媒介照到被照物，或反射、或折射，然后光波被视网膜底的感光细胞感觉到，最后再由感光细胞传到大脑形成视觉。在这个过程中少了任何一个环节都不行。
+
+<img src="https://static001.geekbang.org/resource/image/8e/48/8ee8337ecdfa240c378ecb440eec1448.png" alt="">
+
+## 光源和被照物
+
+咱们先从光源谈起。在用户体验的设计领域，光源非常重要。一般如果要在画面空间中营造某种氛围的话，至少要有一种稳定的主光源。画面的明暗关系、投影方向都要和主光源对应。再复杂一点儿可以有多个光源，包括主光源和辅助光源。辅助光源可以是单独的一个实体光源，也可以是一个反光板。
+
+正确地使用辅助光源能减少阴影，让画面更柔和、人物更加有亲和力，达成多角度的光线平衡。但即便是辅助光源，咱也不能打破主光源的地位。
+
+比如本来就是背光，你非要把人物正面搞得特别亮，这就是典型的违背光源的常识了。这种错误，很多插画师都会犯。下面这个图体现出了光从不同方向打到一个人物的的脸上，会呈现出的不同阴影关系。
+
+<img src="https://static001.geekbang.org/resource/image/ec/4a/ecc0a755b35e0cb203035277796dcc4a.jpg" alt="">
+
+## 人的眼睛
+
+接下来我们谈谈人的眼睛。人眼是个很有精致的感光仪器：晶状体就是可调节透镜，视网膜下的感光细胞就是感光元件。我们眼睛可以分辨约一千万种颜色（360到830纳米可见光波长范围内）。
+
+### 最大视野
+
+人眼从眼球视网膜的生理结构来看，动态视野范围最大也就是左右220度，上下135度。人的立体感知是左右眼的双眼视野决定的，大约120度。
+
+以上是人眼生理的极限，实际上头不动舒适的范围是左右各30度，再加上上20度，下12度。我们颈部不会下意识地运动，如果你通过头部运动，那么你的人眼舒适区域可以到154度到204度。
+
+<img src="https://static001.geekbang.org/resource/image/d0/d8/d0016f0e75d4a0605c989cc6dfddd7d8.png" alt="">
+
+我们在设计定义VR的虚拟空间主页面大小的时候，这个视野是极具参考价值的。我们在屏幕中的主页面，让用户聚焦的操作区域，不能超出左右60度，上下32度的舒适区范围。但是我们设计空间交互的主页面的整个范围，可以达到左右154度的广阔的空间。
+
+### 感光细胞和中央凹
+
+带你从宏观层面了解了我们的视野范围后，我们接下来进入微观层面来看看我们的眼睛。
+
+人眼有 700 万视锥细胞和 1亿2000万视杆细胞。视锥细胞帮助我们看到颜色，视杆细胞帮助我们分辨明暗。视杆细胞主要分布在视网膜的外边缘，越靠近中心越少。绝大部分的视锥细胞，都分布在视网膜中心仅仅直径1.5mm的圆形面积，这小块面积叫中央凹。
+
+可别小瞧中央凹这么小一个面积，它直接决定了我们人眼看世界的方式。虽然中央凹仅占视网膜面积的1%，但是人接受的视觉信息有50%都是来自中央凹的视觉输入。当你用眼睛聚焦看某个东西的时候，是不是感觉除了聚焦点以外的周边都是模糊的？这就是中央凹在起作用。
+
+<img src="https://static001.geekbang.org/resource/image/99/c2/99bab1565c620984c10d1ca8e4a131c2.jpg" alt="">
+
+中央凹外围就是边界视觉，在边界视觉里人眼看不清图像，但可以分辨明暗。用图像压缩技术的话来说，在中央凹面积内你看到的是一个高分辨率的TIFF图像，而在其它的边界视觉面积里你只能看到低分辨率的JEPG图像。
+
+你可能会说，怎么可能，我看周边都很清楚啊。
+
+那是因为我们的眼球老是在不停运动（大约以每秒三次的速度快速跳动），有选择性地对周围环境进行注视。大脑再根据这些视觉输入，以及我们已看过部分的记忆，去填充视野周边的其他部分，最后脑补出一个对周围环境相对清晰的感知。
+
+这个中央凹的面积，对应我们瞬间看清的视野有多大呢？
+
+这个和光学透镜原理有关。我们看得越远，对应的外部世界的面积越大，越近，你能看清周边的面积越小。举个例子，其实我们在看电脑屏幕的时候，对应中央凹在电脑上能看清的面积也就是大约直径2厘米。
+
+所以说为什么我们在一个颠簸的汽车上看书会头晕，就是因为我们眼球运动受到车颠簸的干扰，加重了人眼的聚焦负担，产生了额外的疲惫。
+
+你可以自己做个不太精准的实验，尝试眼球不动，看准屏幕上一段文章的某个字，然后告诉我距离这个字周围有3个字符远的另外一个字是什么？
+
+不要欺骗自己，眼球不要动，看看你能不能说出来。如果3个字间隔远的能看得见，4个字间隔远的其他字呢？这样可以测试一下你的这个焦点视野到底有多大。
+
+<img src="https://static001.geekbang.org/resource/image/de/fd/dedbb2yy87b0fc2d197cbf37ac6b44fd.jpg" alt="">
+
+人因学研究表明，人对文字或数字的记忆一般在7±2。而一个直径2厘米范围内的字，如果超过了9个，人一般就会感觉排版过密了。你看，通过人因学，我们可以从一个科学的角度来看待一个看似美学的问题。
+
+再回到视杆细胞。视杆细胞能分辨明暗，对色彩不敏感，但是对物体的外轮廓以及物体的运动变化非常敏感。
+
+还记得我们之前说的红衣美女的例子吗？为什么我们看到红衣美女走过，会快速地捕捉到？这就是因为边界视觉的视杆细胞在起作用。
+
+一旦捕捉到信息，我们就会迅速把焦点移到那个物体上，然后由中央凹的视锥细胞来分辨细节。我们之所以会有这种能力要感谢人类数百万年里的进化。世界危险重重，我们要不停地去感知周边的危险，才能避免自己被猛兽吃掉。
+
+你或许又会问了，我现在知道了视杆细胞和边界视觉，对体验设计有什么用处啊？
+
+如果你了解到我们中央凹对应到电子设备上视野面积很小，又明白通过视杆细胞来捕获动态信息。那么，你就懂得如何在一个交互设计中，去设计引导用户的交互步骤了。
+
+我们可以通过动效牵引人边界视觉中某些关键交互项的感知，然后迅速把焦点从一个操作引导到下一个操作上。
+
+举个例子，输入密码这个动作对我们而言都不算陌生。当你密码输入错误后，需要提醒你输错了。如果这个提醒是用Toast或者Notification提醒你，你会很容易忽略掉。因为这两个提醒很可能不在你的焦点视觉上。
+
+正确的处理手法是把这个错误提醒直接设计在输入区域，比如颜色变红，有一个输入错误的抖动提醒动效，这样就相对合理多了。
+
+再比如在电子商城的购物体验中，在用户找到合适的商品进行购物后，物品会直接进入购物篮。由于需要不影响正常购物的体验，一般购物篮在右下边缘以某些小圆按钮来表示。可能这个按钮上还会多一个小红点数据角标来提醒你的购物量。
+
+但这其实是不够的。因为你购物的点击按钮与右下角购物篮之间的距离，很可能超出了焦点视觉。你一般看不到那个小红点的数字角标变化。
+
+好的设计要通过一个连贯动效，让你的采购物品通过一个弧线自动落入购物篮，告知你已经加入购物篮成功了。
+
+<img src="https://static001.geekbang.org/resource/image/51/25/51ec69a4de6cdf6fbbb0095c66907025.png" alt="">
+
+我这里举一个反例：二维码扫描授权数据登录确认。这是一个咱们平时都会用到的设计，在你扫描二维码登录时，你会立即看到下面的这个页面。
+
+<img src="https://static001.geekbang.org/resource/image/9a/e4/9a0d129abab9392636a640412cea91e4.png" alt="">
+
+如果用户是第一次见到这个页面，那么在阅读完授权数据后，必须跳脱中央凹去寻找那个确认按钮。但由于绿色按钮不可点击，用户就得去搞明白为什么不可点击，经过一个迟疑的过程，然后去遍历整个屏幕，尝试找到突破口。
+
+突破口就是这个字小并且色彩不鲜明的复选框。由于复选框不在正常焦点视觉范围内，所以找这个复选框就尤其费劲。相当多的用户在第一次使用扫描二维码的授权时，都会抱怨复选框的位置。这实在是一个糟糕的设计。
+
+## 色彩心理学
+
+我们生活在一个多彩的世界里。色彩是眼、脑对光的颜色类别描述出的视觉感知。不同生物之间的视觉色彩感知能力差异巨大。
+
+狗没有能辨别红色的视锥细胞，所以狗看不到红色。蝴蝶有四种色彩的视锥细胞，可以看到紫外线，相信蝴蝶的世界会更加绚紫一些。而皮皮虾有16种视锥细胞，除了紫外线还能看到红外线，那一定是能把红玫瑰都给看出个五彩缤纷出来。
+
+我们只有红、蓝、绿三种视锥细胞，我们对不同频率的光波敏感度不同。我们对于低频的红色最为敏感，对于中频的黄色、橙色敏感度一般，而对蓝色、紫色的高频光波最不敏感。这就是为什么很多要紧的事物（比如消防车、消防栓、安全警示牌等），色彩都会选择红色。
+
+### 色彩的重量
+
+还记得之前提到的感知觉的对比性吗？大脑对理解颜色理解很多都是对比出来的，甚至受到对比性的影响还会产生颜色的错觉。
+
+颜色有心理重量的差异性。颜色在心理由轻到重依次为：白色、黄色、绿色、蓝色、紫色、红色、黑色。某个产品要给人结实的心理感觉，大多选用黑色（比如保险柜）。心理学家们做过测试，黑色甚至比白色在心理重量上相差接近一倍。
+
+你在设计用色时候一定要注意色彩的重量感。凡是希望营造轻盈、漂浮、上升、敏捷、灵活、流畅、明快、简洁、平和感受的，一定要记得选择重量感轻的色彩。反之，如果你希望营造沉重、下坠、稳重、沉静、大气、贵重、庄严和沉甸甸的重量感受，一定要选择重量感重的色彩。
+
+越浅的两种颜色就越难分别出来。也许从美学上看过浅的配色没有错误，但是从人因学来看，**整体过浅的配色会让用户无法很好地分辨色彩，更无法通过对比性来快速聚焦选择。**
+
+过浅的色彩会导致整体界面看起来缺乏重心和焦点，不能称为一个好的界面设计。比如下面这个界面。
+
+<img src="https://static001.geekbang.org/resource/image/3f/ff/3f9b2fdafc900d4d79afcbdf428f7cff.jpg" alt="">
+
+### 色彩的心理属性
+
+经过人类的长期发展，我们对很多颜色的认知都产生了某种形式的心理共识。这些共识，让我们在选择品牌宣传、海报设计、界面的主色副色搭配上都有非常大的参考价值。接下来我和你讲讲几种颜色的心理属性。
+
+红色光波长最长，最容易引起人的注意、兴奋、激动以及紧张，同时给视觉以迫近感和扩张感，称为前进色。红色还给人留下艳丽、芬芳、青春、富有生命力、饱满、成熟、富有营养、喜庆的印象。更为明亮的粉红色会带有女性化和浪漫的特征，而偏暗的栗色则显得柔和、高级而传统。
+
+橙色的波长居红与黄之间。橙色是非常暖的颜色，也是一种非常能引起食欲的颜色，会给人香甜略带酸味的感觉。橙色是一种充满生气和活力的颜色，一般用来表现变化和运动的感觉。
+
+黄色的波长适中，它是最明亮的色。能够给人留下明亮、辉煌、灿烂、愉快、亲切、柔和的印象，同时又容易引起味蕾的条件反射，给人一种甜美、香酥的感觉。黄色由于鲜明的特征容易辨识，也用在比红色次一级的警告色中。
+
+绿色的波长恰恰居中。人的视觉对绿色反应最平静，眼睛最适应绿色光的刺激。绿色是植物王国的色彩，它的表现价值是丰饶、充实、平静与希望。
+
+蓝色波长短于绿色，它在视网膜上成像的位置最浅，属于冷色。蓝色一般给人崇高、深远、纯洁、透明、智慧、清凉、科技、理性的感觉。
+
+紫色波长最短。我们眼睛对紫色光的细微变化分辨力弱，容易感到疲劳。紫色给人高贵、优越、奢华、幽雅、流动、不安的感觉。灰暗的紫色则是伤痛、疾病，容易造成心理上的忧郁、痛苦和不安的感觉。在设计中，紫色要慎用。
+
+白色，作为全部可见光的均匀混合，经常是代表明亮、干净、卫生、畅快、朴素、雅洁。在人们的感情上，白色比任何颜色都清静、纯洁。但用之不当也会给人以虚无、凄凉之感。
+
+黑色本质上是吸收了大多数的光。黑色对人们的心理影响可分为两类。
+
+- 消极类。例如在漆黑之夜或漆黑的地方，人们会有失去方向、阴森、恐怖、烦恼、忧伤、消极、沉睡、悲痛、绝望甚至死亡的印象。
+- 积极类。黑色使人得到休息、安静、沉思、坚持、准备、考验，严肃、庄重、刚正、坚毅。黑色一般用作衬托色会比较有质感。
+
+灰色是一种中等明度的无色。灰色的运用可谓是千变万化，不同明度的灰会给人完全不一样的感受。高明度的灰会给人以高雅、含蓄、耐人寻味的感觉，低明度的灰则给人以沉稳、厚度、高端的感受。
+
+除了上面说的这些不同颜色通常会给我们带来的不同感受，在不同的文化背景下，很多颜色也有专属的偏好和憎恶。
+
+黑色在中国文化里有沉重神秘之感，它象征严肃、正义。比如传统京剧中的张飞、李逵均用黑色脸谱。而黑色在西方文化中基本为禁忌色，它象征了死亡、凶兆、灾难。
+
+红色在中国象征着喜庆、财富和爱情，而红色在西方国家被赋予了流血、牺牲、暴力和激进的文化意义，贬义的味道更重一些。
+
+白色与红色相反，白色在中国代表了死亡、反动和投降，以白色为主的设计常常会被视之为过于「素」，认为不够吉利。西方国家却认为白色高雅、纯洁和幸运。
+
+由于世界文化的融合，以上的认知也在随着时代不停动态变化，因此你要根据不同的文化背景，根据当地文化情况去使用不同的色彩，才能更好地降低被误解的风险。
+
+下图列出了不同地区文化色彩运用的差异性，你可以简单参考一下。这个圆环分为84个小的扇型（数字标号从1到84），分别代表84种常用的文化相关的关键词。10个环（字母标号从A到J），分别代表10个地区：西欧/美国、日本、印度、美洲原住民、中国、亚洲其他国家、东欧、阿拉伯、非洲、南美洲。
+
+举个例子，比如死亡在西欧、日本和北美洲习惯用黑色表达，在中国和印度却是白色，而阿拉伯是银色，南美洲却是绿色。
+
+<img src="https://static001.geekbang.org/resource/image/da/yy/daf3a039d6fb1bd805b1f9e7d6891eyy.png" alt="">
+
+## **总结**
+
+好了，讲到这里，今天的内容也就基本结束了。最后我来给你总结一下今天讲的要点。
+
+由于从今天开始3节课都是谈重新认识视觉，所以内容会比较多。今天我主要是从视觉是如何生成、如何被感知到进行讲解。
+
+你需要正确认识光源，理解光源方向的不同，实现符合自然逻辑的被照物明暗关系、投影方向。同时理解某些环境光对被照物产生的柔光影响，对我们刻画出更符合自然的人物至关重要。
+
+要做到正确认识人的眼睛，就要先从认识人的眼球结构和人的视野开始。左右60度，上下32度的舒适区视野请你着重记一下。在设计中，我们要保证关键交互物大小不要超出我们在空间（包括虚拟空间）中的舒适区。
+
+一旦你理解了中央凹和对应的聚焦视野，就会触类旁通，懂得尽量让连贯性的交互不要超出焦点视野。如果一定要超出，需要对超出焦点视野的交互有合适的动效引导。
+
+人对色彩会产生重量感的错觉。从白色、黄色、绿色、蓝色、紫色、红色到黑色，依次是越来越重。再加上不同文化差异性的影响，人对色彩会产生不同的心理层面认知。因此我们在色彩选择上需要综合考虑，因地制宜，灵活运用。
+
+## 作业
+
+最后，我给你留了一个小作业。从今天我讲的内容，你能找到一个你身边的没有遵循视觉产生原理的错误案例吗？再想想看，如何改进它？

极客时间专栏/geek/基于人因的用户体验设计课/基础篇/05 | 重新认识视觉（中）：构图的力量.md

@@ -0,0 +1,155 @@
+<audio id="audio" title="05 | 重新认识视觉（中）：构图的力量" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/cc/9b/cc339af14d2982c08bfd80f47abac59b.mp3"></audio>
+
+你好，我是Rocky。
+
+上节课主要是给你讲解了视觉是如何生成、如何被感知到的。同时我在色彩的层面给你介绍了色彩心理学，今天我们接着来谈谈视觉中的构图部分。
+
+## 构图
+
+还记得咱们重新认识感觉里面提到的几个特性吗？整体性、选择性、对比性、理解性、恒常性、联觉性和错觉。其实这几个特性，就是**人在自然世界中寻找意义**。
+
+意义来源于对规律的探寻。即便无规律，大脑也会尝试创造出规律。人会从图形的组合中，从整体中寻求规律，也会从单个的图形中寻求意义。前者就是格式塔原理，后者就是形状心理学。
+
+### 格式塔原理
+
+我们先谈谈格式塔原理。在20世纪早期，一个德国心理学家总结了人在整体性、选择性和对比性的一些规律，统称为格式塔原理（Gelstalt）。其实格式塔就是德语图形的意思，本来如果叫图形原理听起来概念就挺清晰的，但是阴差阳错非被叫成了格式塔原理。
+
+先不吐槽，我们来看看这个德国人到底发现了哪些人类寻找图形组合规律的原理呢？这些原理都非常简单，我们先看看下面的例子。
+
+同样的16个小圆球，在A图里就成了4行，在B图就变成了4列。你会发现，我们看行与列的观感，其实和球之间的间距有关。
+
+A图横向上小球的间距更小些，就会被人理解为是属于一起的。B图纵向上小球间的距离更近些，看起来就是属于一组的。**距离近的关联亲密，距离远的各自独立分组，这就是格式塔理论中的接近性原则。**
+
+<img src="https://static001.geekbang.org/resource/image/32/8b/323309e291d3442199bffef155779a8b.png" alt="">
+
+其实距离也并不是绝对有效。我在C图里把第二列和第四列的色彩调整为不同色，你很可能就改变了是四行的认知。而且你会容易认为第一、三列是一类，第二、四列是另外一类。这说明色彩对归类的优先级大于距离。
+
+在D图里，保证距离不变的前提下，我把A图的第一列换成了方形，你也肯定会理解为左边的第一列是一类。
+
+在E图里，在保证左右距离不发生变化的前提下，我把第一列的球放大，你也很容易做出判断左边第一列是一类。
+
+以上三种情况，就是格式塔理论中的相似性原则。它们分别是**色彩相似**，**形状相似**和**大小相似**。
+
+<img src="https://static001.geekbang.org/resource/image/8e/0b/8e3a5ca69b3d066fbb5c55da19f92a0b.png" alt="">
+
+在下面的F图中，这些小球没有连在一起，但是我们还是会清晰地看出一个大写的M字母。人眼的视觉会偏向连续的形式，在观察事物的过程中，我们会情不自禁地形成一种视觉延续的感受，这就是格式塔的连续性原则。
+
+<img src="https://static001.geekbang.org/resource/image/d5/33/d58d1648b49b6cd4df7d4dcbca99d033.png" alt="">
+
+再看看G图，G图是我在B图的基础上做了一些处理得到的（我把某些球去掉了四分之一）。在这个场景下，你已经几乎看不到球了，你看到的是4个类似花瓣的图形。而且尽管没有正方形的存在，但我们还是能在视觉上脑补出矩形。这种**视觉上人自动把空白填满形成封闭的空间的能力，就是格式塔的闭合性原则。**
+
+<img src="https://static001.geekbang.org/resource/image/2a/50/2a28f9140b570d21d7e2b696f0588b50.png" alt="">
+
+在H图中，从最上面的图形里你能看出什么？最直观的感受是两个圆相交。进一步分析，也许你会觉得是两个月牙形对称，或者对称的月牙形中间多了一个纺锤形。
+
+但你很难去接受这个是一个圆形加上一个月牙形（尽管外轮廓是一样的）。**在观察事物过程中，我们第一印象更倾向于简单而且对称的图形，这就是格式塔的对称性原则。**
+
+<img src="https://static001.geekbang.org/resource/image/c2/54/c27c6c351f2a1c9efde5a741cf2e7054.png" alt="">
+
+我们继续回到图B。我在B图上面两行的背后，增加了一个大大的暖色的矩形。你会立即感觉出这个矩形是背景，前面的8个小球是前景。而且这8个小球属于一类，其他没有在矩形框住的其他小球属于另外一类。
+
+**当小图形重叠于大图形之上，我们的视觉会倾向于将小图形归为主体，大色块为背景，同时把小图形归为一组，就是格式塔中的主体与背景原则。**
+
+<img src="https://static001.geekbang.org/resource/image/88/d4/8849cd919yy27bfa863045a88c8de9d4.png" alt="">
+
+以上这些格式塔原则，在我们做版式设计时经常会被混搭利用。把图文信息以不同距离、形状、大小、颜色、背景分组排列，就可以在视觉上营造视觉层次，便于用户阅读，让主要信息、次要信息、辅助信息等内容各司其职。
+
+栅格系统布局设计就是格式塔原则运用的典型体现。我在这里给你分享一些运用格式塔原则的小技巧。
+
+首先，一定要让用户理清视觉层级，建立关系。相似性是基础。如果某些界面上的元素是属于同一组的，那就要尝试拉近他们之间的距离。
+
+其次，如果因为界面空间的局限，导致距离达不到要求，那就要通过一些区域分割的方式（不同的背景，不同的框图，或者简单的分割线）来制造元素的分组。或者通过色彩、形状、大小、材质感来分组。
+
+最后，在B图的基础上，我让其中随机3个小球左右抖动起来变成了J图。你会立即发现，这3个球属于一类，其他没动的属于另一类。看来，运动的优先级也是大于距离的。**一起运动的物体会被感知为属于同一组或是彼此相关，这就是格式塔中的共同命运原则。**
+
+<img src="https://static001.geekbang.org/resource/image/d0/74/d0d3ca60b0a40ba96e00eea27628b174.gif" alt="">
+
+共同命运原则在动效设计中被大量运用。比如苹果手机删除多个应用时候的图标抖动，又比如拖拽移动多个文件夹时的移动动效。当你设计多个物体需要一起运动的时候，共同命运应该是第一个跳入你脑海中的基本原则。
+
+在我们在做好了一个界面设计后，你可以通过格式塔原理来校验一下你的设计是否符合人类寻找图形组合规律的心理学认知。
+
+## 识别物体
+
+人对图形的整体组合规律有一个大概理解后，是如何识别具体物体形状的呢？我接下来会从形状心理学开始，给你分析一下不同的形状究竟会给我们带来哪些不同的感觉。我还会和你聊聊在设计中，如何去考虑我们看物体的视角与别人注视的方向。
+
+### 形状心理学
+
+人类从出生之后，在我们的记忆中就会存储非常多的形状，以及对应的物体心理学认知。人类至少能快速识出24种基本形体，它们构成了我们能看见和辨认的所有物体。不同的形状会带来不同的心理感受。我下面会给你举几个常见的形状例子。
+
+矩形因为和建筑联系在一起，它会带给人可靠、安全、信任和权威的感觉。矩形也代表着规矩、纪律。如果你希望增加活泼和亲和力，请避免用直角矩形，以圆角矩形取代。圆角矩形边缘的弧度会让你的设计更加年轻和具有活力。
+
+<img src="https://static001.geekbang.org/resource/image/45/75/456b7ecc3c079e5ce51b0a4efa92b575.jpg" alt="">
+
+圆形代表了整体和和谐的概念。圆形也因为和宇宙中星体形状一致，因此会给人带来永恒、圆满和神秘的感觉。
+
+<img src="https://static001.geekbang.org/resource/image/c7/b0/c707745e662b38f50f26f48702d19bb0.jpg" alt="">
+
+三角形，给人坚固、权力、科学、宗教、法律、男性化、动感的心理感受。 正三角会让人感觉稳定和平衡，但是倒三角会让人感觉到危险和紧张。
+
+<img src="https://static001.geekbang.org/resource/image/f7/76/f77d5bf4a5fd4c1d90a442a4c4b84776.jpg" alt="">
+
+黄金分割，这是隐藏在大自然的一个神奇的比例1：1.618。在自然界当中太多黄金分割比例存在（比如螺纹、向日葵、蕨类植物、人体比例等等）。黄金分割给人的联想是成长、发展、生命、创造力和循环。
+
+我以前在华为设计部，给图标设计师提过这样一个要求：把黄金分割用在所有的桌面手机图标设计里面。结果还真设计出一套严格按照黄金比例的系统图标，图标所有的圆弧都以黄金比例的圆来进行切割。那套图标毫无争议地被选为华为的其中一套默认系统图标。
+
+<img src="https://static001.geekbang.org/resource/image/a1/e6/a119e50b6bb310b8bba29b7c7270abe6.jpg" alt="">
+
+平行线会给人带来冷静、发展、有稳中求进的心理感受。但如果把平行线旋转90度，变成垂直平行线，就会给人力量、侵略、霸道的感觉。
+
+<img src="https://static001.geekbang.org/resource/image/a4/d2/a4eaf9d56726f0f06a239ac08a8549d2.jpg" alt="">
+
+其他自然界存在的形状，它们大多数都会给人心理上有机、自然、活力、平衡、清新的感受。很多动植物也可以有自己的特征和符号。例如玫瑰代表了爱与激情，狮子代表骄傲与勇敢等等。
+
+<img src="https://static001.geekbang.org/resource/image/5f/73/5f3bfa9601a2b9bcc8d096fyy8449573.jpg" alt="">
+
+莫比乌斯环，无穷大的符号图形表达，在人的心理认知上是无穷大、亘古永恒、生命循环、无限可能。
+
+<img src="https://static001.geekbang.org/resource/image/cc/b7/cc472e352a46285e0499458b4cc79cb7.jpeg" alt="">
+
+形状是几乎所有设计中都无法忽略的关键性因素。我们不管设计什么样的元素，都要选择恰当的形状，去传达相对准确的情绪。在体验设计中，经常是多种形状进行搭配使用。
+
+### 视角
+
+讲完形状，我们来看看我们看形状时的视角。曾有人做过一个实验，让世界各地的人画一下咖啡杯，结果大部分图片都是类似下图这样。
+
+<img src="https://static001.geekbang.org/resource/image/2e/yf/2e8c59dc1533b8db52ea6125100dbyyf.png" alt="">
+
+你发现什么特点没有？这些咖啡杯个别是正面的，但是多数都是略微俯视的角度，而且杯把大多数都是右边。这是因为人们对事物的认知，基本上都是标准视角的认知。
+
+如果有人画了一个咖啡杯是正上方俯视，或者正下方仰视，估计很多人一开始很难辨别出来这是个咖啡杯。
+
+这个实验告诉我们，**人从标准视角识别物体速度最快**。因为人类大部分的思考、记忆、想象和识别都是通过标准视角进行的。所以如果你要设计一个希望别人很快认出来的图形（比如图标），别忘了用标准视角构图。
+
+### 别人的注视方向
+
+我们人类对眼睛的注视方向特别敏感。前面我在04里讲选择性的时候，举了一个你跟随你的朋友的眼神，看到一个红衣美女的例子。这种**观察者追随他人注视线索，迅速转移注意的现象称为注视追随。**
+
+在构图设计时候，巧妙运用图像中人物的视觉注视线索，会给用户带来不一样的体验感受。你可以看看下面两张电影《阿丽塔》的海报。
+
+<img src="https://static001.geekbang.org/resource/image/d1/17/d1783747b1059048499d5ab9de0e2717.jpg" alt="">
+
+左边的Alita盯着你，你能从她的眼神中看到坚定、无畏，有一种和这个人物直接进行灵魂沟通的错觉。右边的Alita盯着天空，你的视线也被引导到天空，于是你开始观察天空上的空中都市。你的思绪也被她的视线引导，也和她一样，希望探寻身份之谜。
+
+我们在banner设计上，可以用借用这种方法。如果你希望画面与用户产生灵魂沟通，提升感染力的话，图中的人物一定要与读者有眼神交流。如果你希望让人物视线引导用户的注意力在某些事物上（比如商品），或者想要有助于物体的识别，那么图中的人物的目光就要朝向目标物体。
+
+## **总结**
+
+好了，讲到这里，今天的内容也就基本结束了。最后我来给你总结一下今天讲的要点。
+
+在今天的课程里，我们重点谈了构图中的心理学。
+
+人总是从图形中寻求意义。首先是整体性和图形组合的意义。通过格式塔原理，其实我们可以发现，人对构图的理解无非以下几种类型的组合：接近性、相似性（形状相似、大小相似、色彩相似）、连续性、封闭性、对称性、主体/背景以及共同命运。
+
+体验设计中要通过对格式塔的理解，理清视觉层次，建立关系。通过距离、背景、框图或者分割线分割区域，你也可以通过色彩、形状、大小、材质感、运动特征等来分组。
+
+人类在理解整体后，就会开始寻求具体形状的意义，识别物体。和上一节课理解色彩一样，我们也先从形状心理学开始。不同的形状有不同的心理感受，我们需要在设计中组合运用这些特点，选择恰当的形状，去传达相对准确的情绪。
+
+人类倾向于通过标准视角来理解认知物体，所以如果我们要设计一个别人很快就能认出来的图形，就需要用标准视角构图。
+
+根据人注视追随的特点，要善于用图像中的人物视觉焦点线索，去牵引用户注意力和体验感受。直视会更容易和用户产生灵魂沟通，而其他的视线引导，可以牵引用户注意力。以上就是本节课的要点了。下节课，我们一起来学习视觉中的排版部分。
+
+## 作业
+
+最后，我给你留了一个小作业，从今天我讲的内容，希望你重新审视你最近的构图设计，然后逐条对照一下，看看有无改进的可能？
+
+同时，你最近有遇见过什么有意思的电影海报或者图标吗？欢迎在评论区分享一下。

极客时间专栏/geek/基于人因的用户体验设计课/基础篇/06 | 重新认识视觉（下）：为何橱窗越空价格越贵？.md

@@ -0,0 +1,184 @@
+<audio id="audio" title="06 | 重新认识视觉（下）：为何橱窗越空价格越贵？" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/b9/y8/b9a0fbf14eab5d392a48f90cd8a7dyy8.mp3"></audio>
+
+你好，我是Rocky。
+
+在上节课里，我们重点谈了格式塔原理和形状心理学。今天我们再来谈谈视觉中的排版部分。
+
+其实排版的情况无非是两种，一种是单纯的文字排版，另一种是图文混排。
+
+要做好文字排版，我们就需要先理解人阅读的人因理论。同样，要做好图文混排，图文排版背后的人因理论也是必不可少（比如说留白到底会有什么样的作用，人眼又是怎么去浏览图文）。这节课我们先从文字排版开始。
+
+## 理解文字阅读
+
+当今世界成人识字率已经超过了80%。对很多人来说，阅读是主要的沟通手段。但我们是如何阅读的？对此，设计师应该了解什么呢？别急，我们接着往下看。
+
+人经过数百万年进化出来语言，所以人类对语言的理解和学习能力是最强的。但是文字才出现几千年，远远低于人脑跟随语言进化的速度。所以**每个人的阅读能力都是通过后天培养，系统教育获得。**
+
+在不同的文化背景下，阅读习惯的培养也会不一样。世界上普遍的阅读习惯是从左向右，从上到下，但是也不尽然。我在台湾书店看到至少一半的书籍，都是自上而下、从右往左的印刷排版。很多中东地区的文字阅读方式也是从右往左。我们这节课主要讨论最普遍的阅读顺序。
+
+<img src="https://static001.geekbang.org/resource/image/f0/37/f09ddefe3c0e7b846ba123f069dba137.jpeg" alt="">
+
+还记得我们在重新认识视觉的第一课里提过的中央凹吗？只有中央凹能够真正认清字符。所有我们阅读的文字，都要经过中央凹的扫描后才能进入视觉系统，这就意味着阅读需要大量的眼球急促跳动（眼球跳动的频率大约是每秒10次）。
+
+我们根据自己的阅读习惯，很容易就错误地认为阅读应该是以一个从左往右，从上往下顺序进行。
+
+其实情况没有那么简单。即便是一段文字，我们的视觉扫视过程也是跳跃式的。我们会通过扫视、凝视的方式去阅读，甚至还有10%~15%的情况是在回读。人一次扫视的跨度一般是7~9个字符。
+
+<img src="https://static001.geekbang.org/resource/image/75/7b/75e22468773e37b9bec83d2cdc6d847b.png" alt="">
+
+我必须说，这个过程其实是挺累的，因此绝大多数人潜意识里都不喜欢阅读。所以我们在设计时，一定要避免在界面中使用大段的文字。
+
+很多开发者喜欢为冗长的指令文字辩解：“我们得描述清楚一点，免得用户不知道怎么使用”。其实好的界面，恰恰就是短小精悍而且清晰明确的用语。
+
+可是有的时候一定要有大段文字，我们该怎么办？那就考虑结构化分割、分组、拆解、分栏。
+
+下图左边交通银行卡号的分割和招商银行卡号的分割，你更喜欢哪一种？相信你会更喜欢招商银行卡号的分割。下图右边的航班信息，如果我用一大段文字描述出来。你还能有清晰的感知吗？
+
+你在设计中一定要结构化地去表达信息。越是结构化、精炼，人们就越能更快、更容易地浏览。视觉层次让人专注于相关的信息，同时也会减少人犯错的可能。
+
+<img src="https://static001.geekbang.org/resource/image/e1/53/e1ec89c4d5d1dac6e27c2809b5212553.jpg" alt="">
+
+阅读和理解还是两回事。你读过了不见得你就理解了。所以我们小时候都把阅读和理解放在一块说，意思是我们看过后还需要正确理解文字。增加文字的可读性是我们的职责。
+
+那么有哪些因素会影响文字可读性呢？
+
+首先你**对于字体的选择会影响文字的可读性。**无衬线的干净字体永远最优。切记慎用装饰性强的艺术字体。这种字体在降低阅读效率的同时，会让人觉得文字描述的内容难以理解或难以实现。
+
+曾经有人做过这样一项实验：对某健身操的书面说明如果使用易读的字体，大家就认为这项健身操比较容易，对健身操的耗时估计为8分钟，并愿意把它列入日常锻炼计划中。但如果用了过度花哨的字体，大家就会认为健身操很难，并估计这个健身操差不多得花15分钟，而且不太愿意将其列入日常锻炼计划中。
+
+**字符的大小、间距、行间距同样会影响可读性。**
+
+- 对桌面系统而言，好的可读性一般在每行55到75个字符（包括空格）；最理想状态是每行65个字符，行间距是字号的0.5倍。
+- 对移动设备而言，每行35到50个字符，行间距为字号的0.75~1倍，这样阅读效率是最高。
+
+对于英文排版，你可以点击[这里](https://grtcalculator.com/)进入这个网站去计算一下，什么样的字符大小、间距和行间距是合理的。
+
+**选用什么样的话术，文案以及界面用语也非常重要。**不常用的词汇或者阅读者不熟悉的专业词汇，一定要少用。以前在华为有专门一个国际翻译团队，负责全球各个国家语言翻译的准确性，以及如何选择最合适的界面用语来阐释正确的意义。
+
+在你设计排版时，**英文要避免全部用大写字母**。因为纯大写的字母文本，本身就不太适合大篇幅阅读，会加大阅读障碍。如果因为需要标题突出，一定要用大写的话，最好额外拉开字母之间的字间距，提升可读性。
+
+最后你还得注意**信噪比的问题**。减少噪声的引入也是提升可读性的关键。比如避免不合理的文字和背景的对比度，避免背景像下图一样有强烈噪声干扰。
+
+<img src="https://static001.geekbang.org/resource/image/14/6f/140836d6debcc936cfa3e82ec5d0a86f.png" alt="">
+
+## 图文混排
+
+讲完单纯的文字排版，我们接下来看看图文混排。图文混排设计无非就是四种：左图右文、左文右图、上图下文以及上文下图。
+
+选择哪种混排设计最好呢？没有绝对的标准答案。四种排版各有各的优缺点，你需要根据不同的场景来灵活选用。
+
+### 左图右文
+
+在左图右文中视觉重心是图片。因为根据从左向右的阅读习惯，用户会优先对图作出反馈，然后才会看到标题文字。
+
+这种混排方式对图片的要求稍微高点，如果你的图片第一时间没能吸引到用户，对转化可能会产一定的影响。最适合左图右文的莫过于具有商品属性的文章，用户的视觉重心会先看到商品图片。再就是使用频率较高的社交类软件，头像作为一种高识别度的载体，一般都会放在左边。
+
+<img src="https://static001.geekbang.org/resource/image/d3/b4/d3a11e9188abaa8a2b2ce08d999467b4.jpg" alt="">
+
+### 左文右图
+
+在左文右图里，用户会先看标题文字，标题就算不吸引人，但如果用户看到图片吸引人，还会产生二次转化。当然，真正能产生转化的前提还得是用户感兴趣才行。这种设计方式特别适合资讯推荐类软件。
+
+<img src="https://static001.geekbang.org/resource/image/f0/f8/f0df455a580f18846caaa1f5d5b0dff8.jpg" alt="">
+
+### 上图下文
+
+上图下文的混排模式在多图、大图、视频的封面设计中最多。这种模式使得聚焦到图片的视觉层级变得更高，图片的质量对引导用户是否产生阅读兴趣的影响非常大。
+
+在上图下文的模式中，图片被赋予了更重要的意义，好多核心标题都被表达在了封面里。这种模式比较适合用在艺术鉴赏、时尚媒体、视频等类型的软件设计中。
+
+<img src="https://static001.geekbang.org/resource/image/ef/ec/efe50415823f112f1f155dd237bed3ec.jpg" alt="">
+
+### 上文下图
+
+在上文下图的模式里，用户的阅读顺序是自上而下的。相比上图下文的设计，上文下图的标题被用户优先阅读的层级更高。但标题不是唯一的决定因素，也会受到图片的影响，因为在这种模式下大图的呈现往往是通屏，占据的比例很大，对用户的视觉冲击比较大。
+
+这种模式的好处就是标题内容吸引到用户，会占据用户的心智模型，进而产生先入为主的优势。这么设计很适合资讯文章中的多图、短视频、大图呈现类形式。
+
+<img src="https://static001.geekbang.org/resource/image/50/4a/50426049b99a2dd3f34e9e050591884a.jpg" alt="">
+
+还有一点请注意，在真实案例中图文混排是交错进行的，这样可以有效避免单一混排引起的视觉疲劳和失去新鲜感。
+
+## 留白
+
+不管是纯文字排版还是图文混排，留白都是至关重要的。我们通过留白和元素之间形成的负空间来相互影响，最终形成协调的画面。**留白可以让作品更有价值感。**
+
+在心理学上有个称呼叫恐惧留白。举个例子，很多人都喜欢往冰箱里塞满东西，这样会产生一种成就感。而看见冰箱空着，就莫名的不适。对应到设计上，普通人一般都会固执地认为设计页面应该将空白填满，减少留白。
+
+但恐惧留白和价值感受之间，其实是一个反比例的关系。你在设计时恐惧留白越高，那么设计物的价值感就越低。凡是品牌店，特别是奢侈品旗舰店，都是偌大的店面但展示的衣物很少，一个包就占了一个橱窗。但是有些商店，橱窗里堆满了衣物包包。可以想象对于这两种商店而言，你的价格期待差别会有多大。
+
+正是这种反比关系，在页面排版设计里面，也要考虑恐惧留白法则的运用。多用极简主义，通过大量的留白去增加核心元素的价值感。反之，如果在布局上填充尽可能多的信息元素，减少留白会给人经济实惠的感受。
+
+你可以看看苹果官网，就能明显感受到留白产生的价值感。
+
+<img src="https://static001.geekbang.org/resource/image/64/bd/64569914ed3d1fd8f8436385c6cc75bd.jpg" alt="">
+
+## 眼动浏览模式
+
+我们通常不会老老实实地浏览一个页面。相反，人是追求效率的，所以**我们会用扫视取代浏览**。因为扫视会用更少的时间和精力来摄取更多的信息量。
+
+一个好的页面布局组织方式，应该顺应人扫视的习惯，这样可以节省用户的大量精力，让用户快速看到你想让他看到的。而如果做得不够好，人就会错过关键信息，甚至会离开这个页面。
+
+我以前在华为的时候，人因团队经常用眼动仪来研究人对电子产品的浏览模式。我们通过眼动轨迹追踪、热力图和凝视图，印证了人典型的眼动浏览模式主要是F型模式和Z型模式。
+
+### F型模式
+
+当人们面对大段的文字时，F型是最常见的浏览模式。对很多中东地区从右往左阅读习惯的人，他们的读大段文字是反F型。
+
+F型阅读用户的视线首先是水平移动，通常浏览内容区域的顶部，这构成了F上面那一横。接下来，用户的视线会沿着屏幕左侧的垂直线从上到下移动，从而找到段落里他们感兴趣的点。如果他们发现了感兴趣的句子，视线就会形成第二条水平线。但是通常这条线会比之前的水平线短些，这构成了F下面那条短一点的横线。
+
+最后，用户的视线继续沿着屏幕左侧的垂直线向下移动。随着向下路径越来越长，向右阅读区域一次比一次短，这就形成了F下面的部分。
+
+<img src="https://static001.geekbang.org/resource/image/fd/ff/fdc6175829375501692b15ec7dbe26ff.png" alt="">
+
+你可千万不要僵化理解F型模式的浏览。举个例子，大多数网站顶部的信息是什么呢？logo和导航栏。几乎所有用户都会第一眼就忽略这一行的信息，直接被真正的正文内容或者图片吸引。
+
+那应该如何利用好用户在阅读大段文字时F型阅读的特点呢？在资讯类的网页布局设置的时候，你一定要把最希望用户看到的内容，放在F模式的右上角、热点位置上。
+
+最前面的两段内容是最重要的。将最重要的内容放置在页面的顶部，尽可能快速地表达整个站点的主旨。**用最抓眼球的关键词，同时把关键词大字体、粗体或高亮。**
+
+<img src="https://static001.geekbang.org/resource/image/a0/49/a06c2907cfeyyec326d03a7fcf91c649.jpg" alt="">
+
+另外，在F型阅读中人越往下阅读兴趣就越弱。也就是说一定要避免单一布局，你需要通过一些布局的变化来促使用户继续阅读下去。否则用户在滚过第一屏就时，很容易因为觉得无聊和空洞，从而放弃阅读。这样就降低了瀑布流应用后续页面的转化率。
+
+同时F型阅读意味着在右下的视觉区域容易成为视觉盲区。这个经常被忽视的区域一般仅放一些不重要的信息咨询、广告、文章目录等来填充位置，以避免整体布局的不协调，也可以缓解人的视觉疲劳。
+
+### Z型模式
+
+Z模式浏览发生在不以文字为核心的网站中。读者不论是出于因为菜单栏，还是出于在顶部从左至右浏览一遍的习惯，首先会浏览页面顶部的一条横线。视线到达尽头后会飞速向左下移动，在页面下方部分重复水平方向上的搜寻。
+
+请注意，当页面上的内容有很多的时候，这个Z型的浏览会一直持续下去，所以是一系列的Z，而不是一个Z型轨迹。
+
+<img src="https://static001.geekbang.org/resource/image/c1/49/c1baba987ec85d931072d81f39841149.png" alt="">
+
+Z型模式对于简洁的布局特别管用。为了顺应Z型模式，我们要将重要的信息放在视线能够自然落到的地方，同时要考虑设计一些引导用户持续Z视觉动线的元素（比如有冲击力的图片或者文字），引导用户持续浏览下去。
+
+下面这个苹果介绍Apple Watch的网页，对Z型模式的运用就非常到位。
+
+<img src="https://static001.geekbang.org/resource/image/ec/c2/ece47d0aba80a08d96a791221e74b0c2.png" alt="">
+
+最新的一些眼动研究发现，人的注视点轨迹并不总是遵守F型模式或者Z型模式浏览，而是更加多变复杂。
+
+用户的注视点有时会来回往复跳跃，就像弹珠那样跳来跳去，然后才把焦点往下移动。所以回归到本质，我们还是要去理解用户行为背后的心智逻辑，通过针对性的眼动实验，再进行界面布局的设计优化和调整。千万不可八股文一样去理解、僵化运用以上两个眼动浏览模式。
+
+## **总结**
+
+好了，讲到这里，我们的重新认识视觉的内容基本也就结束了。今天我们重点谈了排版设计中的人因学。
+
+首先你要理解文字阅读。人天生不喜欢阅读，所以你在排版中要避免大段文字。在无法避免大段文字的情况下，那就通过分组、拆解、分栏等手法提升用户的阅读效率。
+
+使用无衬线干净字体、大字体标题、合适的行间距、正确的话术、避免全部大写以及减少背景噪音等手法，也都会有效提升阅读效率。
+
+对于图文混排的情况，你要善于利用四种排版的优点，对不同的场景加以灵活运用。左图右文适合商品类和社交类，左文右图适合咨询推荐类，上图下文适合时尚、艺术、媒体类，而上文下图适合多图资讯类排版。
+
+在排版留白上，增加留白会提升品质感，减少留白会给人经济实惠的感受。你要懂得因地制宜，灵活变通。
+
+眼动轨迹也是指导布局重要的手段。F型模式和Z型模式布局是两种常用的方式。在布局设计中，你要善于顺应人的视线扫描习惯，在关键位置设置保持用户注意力的元素，提升用户阅读兴趣。同时，你也要善用视觉盲区来放一些重要性不高的内容，去缓解人的视觉疲劳。
+
+重新认识视觉部分的内容偏多，我足足用了三节课，才系统地给你呈现出一个相对完整的人因学知识点。我总结了一个脑图，你可以长按保存下来，帮助你在这个知识点上有清晰系统的认知。
+
+<img src="https://static001.geekbang.org/resource/image/17/86/17455901918fc5300f732yy0b2d85e86.png" alt="">
+
+## 作业
+
+最后，我给你留了一个小作业，对于居中排版和左对齐排版，哪个更符合用户的阅读习惯，你能通过今天学的人因学来分析一下吗？

极客时间专栏/geek/基于人因的用户体验设计课/基础篇/07 | 重新认识听觉：你的自然音效是否足够自然？.md

@@ -0,0 +1,164 @@
+<audio id="audio" title="07 | 重新认识听觉：你的自然音效是否足够自然？" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/55/dd/55a9373e15844f27b18c6bc81ee5dbdd.mp3"></audio>
+
+你好，我是Rocky。
+
+今天我们来谈谈声音设计背后的人因道理。人类大约11%的信息通过听觉系统获得。声音由声源的振动引发传播介质的振动，通过人耳传音系统到达内耳，经过听觉毛细胞把声波转换为生物电信号，再传到大脑的听觉中枢，然后我们才真正听到外界的各种声音。
+
+<img src="https://static001.geekbang.org/resource/image/52/58/52795b5f9c03b24bffaa2997a463a558.png" alt="">
+
+声音的传播和光的传播不同。光在宇宙中传播不需要依赖介质，但声音必须依赖介质。比如在太空中没有空气（也就是没有声音传播的介质），两个宇航员如果不依赖特殊的通信设备，即便再近，扯着嗓子喊也听不到对方的声音。
+
+## 可感知声音的频率范围
+
+我们对声音的频率很敏感，正常的年轻人能够在20赫兹~20千赫的频率范围内听到声音。我们对400~1000赫兹的声音频率最敏锐，因为这正是婴儿啼哭的频率范围。和视觉类似，我们的听觉在动物界也是普普通通。狗能听到40赫兹～50千赫，鲸鱼可以听到20赫兹～100千赫。
+
+人类耳朵听觉范围的频率上限会随年龄的上升而下降，一旦超过45岁后就变得非常明显。也就是说年轻人可以听到的高频率声音，年龄较大的人不一定听得到（高于2千赫兹的高频音尤为明显）。所以年龄大的人会对鸟叫声等高频音不敏感。
+
+有一种专门的产品叫蚊音器，把某种高频音调到一定分贝以下，这样只有年轻人才会听得到。下图就是不同年龄段的人在听不同频率的声音时，对应的音量阈值的变化。很明显频率越高，年龄大的人音量强度阈值越高，高于2k的声音尤为明显。
+
+<img src="https://static001.geekbang.org/resource/image/11/9f/115f18841byy6a3yyc03529221399f9f.png" alt="">
+
+我以前在华为设计手机Jingle铃音时候尤其关注这个点。如果手机铃音要覆盖最大程度的用户，特别是如果你想让老人也能听得到的话，在选用音乐频率的时候，就要避免过度使用音域集中在高频段的乐器，比如木琴和笛子。
+
+我需要尽量选择音域覆盖广泛的乐器，或者采取更安全一些手法直接选用中低音频段的乐器，通过提高音量来引起听者的注意。
+
+下图就是乐器的频率表。每种色彩代表一种类型的乐器，深色是基音，浅色是对应的泛音。你可以重点看看基音的频率范围部分。
+
+<img src="https://static001.geekbang.org/resource/image/yy/9e/yyf566379716d134d99e66b675095e9e.png" alt="">
+
+### 白噪声
+
+谈到音域的广覆盖，那就不得不提白噪声了。如果一段声音的响度在整个人的可听范围内均匀分布，这段声音就可以称为白噪声。如果把白噪声类比于视觉，那白噪声就会像下图里电视没信号的噪点一般。
+
+<img src="https://static001.geekbang.org/resource/image/fd/c2/fd6d7c99d2e25a517ec8e1a6c5c3b8c2.jpg" alt="">
+
+大自然是最美妙的乐手。很多自然界的白噪声都能实现音域的广覆盖。比如雨声、海浪声、田野微风虫鸣。人工产品也存在白噪音，比如收音机FM广播在没信号时发出的沙沙声，或者夏日风扇的转动嗡嗡声。
+
+因为稳定的白噪声能有效掩盖生活中那些尖锐、突然变化的声音（比如鼾声或者狗叫声），所以舒适自然的白噪声能使人快速入睡以及拥有更高质量的睡眠。特别是中低频段的白噪声，又称为“非常悦耳的噪声”，更加有助于让我们进入深度睡眠。下面我插入一段自然界海浪的白噪声，有兴趣你可以点击感受一下。
+
+<video poster="https://media001.geekbang.org/ca851aaa25a24818a123b3526e8f1eb6/snapshots/65d77f1faf344fefb561ddc7c99d676d-00005.jpg" preload="none" controls=""><source src="https://media001.geekbang.org/customerTrans/7e27d07d27d407ebcc195a0e78395f55/12eddb9f-1780bb53e5d-0000-0000-01d-dbacd.mp4" type="video/mp4"><source src=" https://media001.geekbang.org/f1c1f65c18fb43afa995c2b60946fe9d/ad713f4e3a444e27ba14d4a20b64eaf8-ad3dabe4a0374539595a716e7b276c77-sd.m3u8" type="application/x-mpegURL"></video>
+
+白噪声还有一个很管用的用途，那就是能让哭泣的婴儿快速安静下来。婴儿在子宫里听到的持续不断的呼呼声，是羊水、血液流动和心跳声混杂在一起的自然白噪音。在出生后，婴儿一旦听到类似的白噪声，会迅速找回在母亲子宫里面的那种安全感。我们家老大在刚出生的时候，一哭闹，我就会立即打开嗡嗡的吹风机，宝宝会瞬间停止哭泣。
+
+你可以考虑在环境空间设计中，有针对性地使用白噪声。比如针对相对安静的空间（咖啡厅、高档西餐厅、奢侈品店、酒店大堂）播放白噪声的背景音，那就有助于营造舒适宁静的氛围。
+
+考虑到白噪声的这种特点，如果你要设计一种起床闹铃的铃音，一定得避免用白噪声。如果你用潺潺流水、林中虫鸣或者小鸟的欢歌当闹铃的话，这种起床闹铃不仅叫不醒人，反而会让人更好地睡个回笼觉。
+
+## 声音强度
+
+除了频率外，能够衡量声音的另一个维度就是强度。人能感觉到的声音强度范围在0～130分贝，超过130分贝人耳就会产生痛觉。
+
+其实根本不需要达到这个强度。一般情况下60分贝以上就属于吵闹范围，声音到了70分贝我们就可以认为它开始干扰正常的谈话，使人感到心烦意乱而且开始损害听力神经。
+
+人体所能承受的音量在80分贝以下。如果人长期在80分贝以上的环境中生活，就会出现头痛、记忆力减弱甚至失眠等症状。当人耳听到的音量达到100分贝时，时间较长的情况下会造成不可恢复性的听力损伤。长时间受120分贝以上音量的刺激，听觉细胞就会受到永久性的破坏，严重者还会造成听力丧失。
+
+耳机最高音量不能超过120分贝。我们国家环境噪声污染防治法定义，55分贝是昼间住宅区噪音最高阈值，70分贝是昼间工业噪声最高阈值。
+
+<img src="https://static001.geekbang.org/resource/image/61/88/61792050ba50b101c9c61cb939e17888.png" alt="">
+
+婴儿的哭泣声可以很轻松达到80分贝以上，所以大多数父母一听到婴儿哭泣就会心神不宁。
+
+你知道交响乐团在音乐厅的演奏分贝是多少吗？最高可以达到110至120分贝。很多乐器不仅仅音量高，而且频率也高。不难想象，音乐家们在这种环境中长期的排练和演出，听力都会受到不同程度的损伤。
+
+对再好的白噪声而言，如果把它的音量强度提升到高分贝，一样会让你心神不宁。所以当你在使用白噪声的时候，记得把白噪声的强度控制在30～40dB，这样才能真正起到安静舒适的效果。
+
+我以前在华为人因团队设计手机铃音的时候，还考虑过手机声音强度和环境音之间的关系。
+
+当在安静的环境音背景下，来电铃音音量可以渐响并自动适当调低手机最高音量，避免突然响起铃音让人吓一跳。因为人在安静环境下，对音量的敏感度提升。而在背景相对喧杂的情况下，手机要自动提高来电铃音音量并调起振动模式，让人能尽快感知到打来的电话。
+
+## 声音的方向感
+
+人的耳朵不仅仅可以听到声音，还可以辨别方向。这主要是因为我们的耳朵可以听出时间差和声级差。时间差是指声音抵达两只耳朵时间的前后差别，声级差则是两只耳朵听到声音强度的大小差别。
+
+对于小于1500赫兹的声音，人一般通过时间差来感知方位。一旦声音频率超过1500赫兹（意味着声波波长小于人的头骨尺寸一半），左右耳就比较难辨别哪个是先到达的了。在这种情况下，我们大多依赖于声级差来辨别方位。也就是说当左右耳音量接近的时候，我们也感觉距离声源也在接近。
+
+<img src="https://static001.geekbang.org/resource/image/0f/4d/0fe551340c2cdf5510d5b11286c3a84d.png" alt="">
+
+来自不同方向的声音会通过耳廓反射，或着通过绕过耳廓来进入耳道，从而让我们辨别出声音是来源于前后还是来源于上下。你可以参考一下下面这幅示意图，这就是我们通过耳廓进一步辨别声音的方位的大概原理。利用人体进一步感知声音的能力又被称为人体滤波效应。
+
+<img src="https://static001.geekbang.org/resource/image/11/45/11b609efbf5cc512034fb2af25bc1345.jpg" alt="">
+
+在空间音响的环绕立体声设计上，四周的音响会给我们带来非常棒的沉浸式体验。但是对于头戴设备而言，营造环绕立体声就会成为非常大的挑战。
+
+我们的耳机只有左右两个扬声器，如何实现环绕立体声的效果呢？那就要模拟左右耳间时间差、声级差和人体滤波效应，再通过耳机进行重放来实现3D环绕沉浸式效果。我下面给一段3D音的Demo，你可以戴上耳机感受一下。
+
+<video poster="https://media001.geekbang.org/c778b067c4744f48a5d096b27b537ca3/snapshots/34cdf862ffa14e0abfd0f7171ca6b194-00005.jpg" preload="none" controls=""><source src="https://media001.geekbang.org/customerTrans/7e27d07d27d407ebcc195a0e78395f55/5c3c9703-1780bb52c97-0000-0000-01d-dbacd.mp4" type="video/mp4"><source src=" https://media001.geekbang.org/322369df3bfc417eabbe3c21878fd895/a4e53a264cfb43df9b1ee63e16091afc-1ce60baa38de3d9fc6af20e21b264ba5-sd.m3u8" type="application/x-mpegURL"></video>
+
+好的耳机其实最好还要有跟踪头部运动的能力。当用户头部转动的时候，能够利用头戴耳机中的加速传感器或者陀螺仪，去重新计算双耳与模拟声源的相对位置变化，从而调整左右耳朵的声音。
+
+比如当模拟的声音在距离人脸前面几十厘米的位置时，那么我们向左转头，右耳的音量就会大于左耳的音量，而且左耳的声音能比右耳的声音有一个时间差。
+
+我对这种技术的未来看好。但是当前这种技术严重依赖于系统处理性能。这种双耳音频渲染是密集计算型的，不仅仅要实时跟踪头部运动角度和速度的数据，还要根据这些预测去迅速重新渲染音频流，让人几乎感觉不到这种处理的延迟才行。
+
+如果是AR/VR虚拟图像，再考虑到声音与动态视频图像的渲染引擎配合，更是难上加难。所以我们在当前的技术局限上要做好用户体验，就要走一些取巧的方法。
+
+比如我们在很多华为手机里，就利用多枚立体收音麦克风和AI算法，实现了指向性麦克风收音。再配合上摄像头的焦距，当拉近远处的景物的时候，远处的声音也会逐渐被放大，同时还会消除掉不必要的噪音。把焦距拉远，随着画面景物越来越小，对应景物的声音也会随之变小。
+
+通过以上的手法就实现了音频变焦。这种玩法就是在基于听觉的人因分析基础上，开发出的一种视觉和听觉的联觉体验。
+
+<img src="https://static001.geekbang.org/resource/image/5c/06/5c9f11dc3e828d91bda125bee7615206.png" alt="">
+
+## 自然的音效设计
+
+在用户体验设计领域音效是非常重要的部分。自然的音效设计并不是说这个音效的声音是大自然的声音，我认为自然的音效要满足以下三点。
+
+- 一定是符合用户预期的声音反馈；
+- 能与现实世界建立联系的隐喻；
+- 音效也需要简约，需要留白。
+
+### 符合用户预期的声音反馈
+
+**一个音效必须符合用户体验的目的，也就是说它必须有实用性。**比如为什么iOS的键盘输入需要有打字音效？因为合理的打字音效会提升用户输入的效率。毕竟触摸屏没有机械键盘的触感反馈，而振动马达又无法精准代表每个字符是否输入成功。
+
+符合预期还有一个重要的指标是最小的时延。你要遵守UI优先原则，任何界面的交互如果需要声音反馈，就要第一时间给出响应。声音和画面的不一致时间如果超出100ms，我们会很容易感觉到延迟。
+
+考虑到很多场景的约束，我们还必须给所有的音效提供关闭的选项。因为很多人愿意选择长期的静音，以减少对外界和自己的打扰。
+
+<img src="https://static001.geekbang.org/resource/image/56/b4/56be1dacc86255c0594845186d841bb4.jpg" alt="">
+
+### 与现实世界建立联系的隐喻
+
+**所有的音效的设计不能天马星空，必须与现实世界产生某种联系。**
+
+- 在苹果Mac电脑上删除文件时，你会听到废纸揉成团的音效；
+- 你用手机相机拍照时，按下拍照键你会听到按下快门的声音；
+- 在手机里拨动相机参数选择的时候，你会听到传统相机旋转镜头的咔哒声；
+- 手机秒表计时会模拟真实秒表的滴答声；
+- 打电话拨号，你听到的是传统电话拨号的声音；
+- ……
+
+安全的音效设计是直接参照物理世界里类似对象操作的声音，但这样做可能会给人一种复古拟物化设计的印象。
+
+你的音效设计也可以是一种能产生类似联想的抽象隐喻，但这种隐喻要避免让用户去过多思考或者产生困惑。拿刚才苹果Mac电脑删除文件的音效为例，如果音效改成一种“咻”的飞船快速飞过声音也可以理解，但如果改成清脆的铃音，你一定会觉得非常突兀。
+
+自然界的声音还有一个特点，那就是“相似而不相同”。我记得MIUI 10有一个通知音水滴音效。尽管是水滴声，但是能通过大量的采样素材和动态算法的加持，使得通知音效的水滴声产生上万种变化，能避免用户很快听腻的情况发生。
+
+一个好的过渡或微交互声音应该比它的相关动画长0.3秒。音效时长比动效长一点儿，这是在模拟声音机械波的泛音特性，余音绕梁不绝于耳。如果动效没了声音就戛然而止，那就和现实世界不匹配了。
+
+### 简约的音效与留白
+
+**音效设计不能被滥用。**很多反馈也可以通过视觉反馈的方式来传达，声音传达只是可选项。
+
+特别是有些听觉反馈可能会造成负面的效果。当负面反馈音效声音发出，会公开告诉周围的人，这个家伙做了一些蠢事。比如有一次我带着孩子去紫竹院公园散步，进园扫健康码后提示无效码，随后系统发出了刺耳的告警音效。本来是公园二维码失效，却搞得好像游客犯了错误。人们对负向的或者错误的反馈的心理预期更希望是无音效的，仅有视觉反馈即可。
+
+好的设计是尽可能简约。对应到音效设计上也是一样，**音效要简明扼要，不要有过度复杂的音调、音色和音频变化。**
+
+音效设计中另一个你需要思考的关键点就是留白。因为人的大脑是被动接收声音信号，过多杂乱无序的声音会打乱大脑的注意力，形成声音污染。
+
+就和视觉一样，人在同一时间内只能接受有限的内容。声音的使用是一把双刃剑，在什么场景下发声是需要你特别去思考设计的。举个例子，对调整音量的按钮来说，就没有必要设计任何音效了。因为音量的增加减少，本身就是非常明显的声音反馈，何必再叠加额外的音效呢？
+
+## **总结**
+
+好了，讲到这里，我们重新认识听觉的内容也就基本结束了。今天我带你从人因学的维度来理解了一下声音设计。
+
+我们人类可以感知到声音的频率、强度，方向感。20赫兹至20千赫是正常年轻人能够听到的频率，但我们能听到的频率上限会随年龄的上升而下降。考虑到手机铃音的人群覆盖，我们就要避免用音域集中在高频段乐器（比如木琴和笛子）的音乐，尽量选择音域覆盖广泛或者偏中低频的乐器演奏的音乐。
+
+白噪声是频率覆盖很广的声音，会给人带来轻松的感觉，有助于睡眠。你要避免在起床闹钟中使用白噪音。人能感觉到的声音强度范围在0～130分贝。你的铃音设计最好要能智能调整音量，才会更符合人的预期。
+
+人可以通过左右耳间时间差、声级差和人体滤波效应来感受声音的方向。头戴设备就是通过模拟这些效应来实现3D环绕立体声。我还带你了解了一下音频变焦，它是结合视觉和听觉的一种联觉设计体验。
+
+我们还谈到了自然的音效设计。自然的音效设计包括：1. 一定是符合用户预期的声音反馈；2. 能与现实世界建立联系的隐喻；3. 音效需要简约、留白。希望你在设计中能够注意这些要点，更科学地去考虑声音进行设计。
+
+## **作业**
+
+如果你来设计一个产品中某个交互的音效，你会怎么设计？在生活里有没有什么让你很讨厌的音效设计？期待你的分享。

极客时间专栏/geek/基于人因的用户体验设计课/基础篇/08 | 重新认识触觉：为什么苹果放弃了3D Touch？.md

@@ -0,0 +1,187 @@
+<audio id="audio" title="08 | 重新认识触觉：为什么苹果放弃了3D Touch？" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/58/19/58a00eafyy4925e496caaeacd0973819.mp3"></audio>
+
+你好，我是Rocky。
+
+今天我们来谈谈五感中的触觉。触觉是由人体上覆盖全身最为广泛的器官——皮肤来获取。今天我会从触觉的生理学特征谈起，到触觉的心理学隐喻，最后结合当下触觉反馈的技术现状聊一聊我对于触觉的思考，希望能够给你一些启发。
+
+## 触觉的生理学知识
+
+触觉神经不仅可以感受到冷热、痛痒、压力、振动、形状大小，还能感知到材质机理的差别。
+
+和视觉、听觉一样，触觉也会给人深层次的愉悦和爱的感受。还记得我在[02](https://time.geekbang.org/column/article/345067)里给你留了一个作业，让你去了解一下哈洛的恒河猴实验嘛？咱们现在从触觉的角度再来看看这个实验。
+
+在实验中，哪怕给铁丝妈妈身上绑奶瓶，小猴子也仅仅会在饿的时候去找铁丝妈妈，其他时间就在绒布妈妈的怀里撒娇。可见，即便来自触觉的信息仅仅有1.5%，但是这1.5%却会大大影响到愉悦性的体验。
+
+我们的皮肤对0.4赫兹到1000赫兹的振动都能感受到，对200到300赫兹的振动感受最为明显。人可以感受到的最小振动脉冲时间间隔是10ms。
+
+一个物体只有发出的声音与对应触觉反馈之间时延小于12ms，人的感知觉才会认为它们是协同一致的。我们不同部位的皮肤触觉的敏感度不同，尽管手的皮肤只占整个身体皮肤的1.5%，但是感受器有40%都集中在手上，指尖尤甚。
+
+所以指尖是皮肤中最敏感的区域。一般3~8毫米是指尖触觉感受的阈值，而这个阈值对不敏感的后背来说会扩大到36~75毫米。从功效比的维度看，商业化手指触觉反馈体验的成本是最低的。下图介绍了人体皮肤各个部分的敏感度阈值，你可以简单了解一下。
+
+<img src="https://static001.geekbang.org/resource/image/65/46/653784dd30f8ae1fa12d2e1c0ffb7f46.png" alt="">
+
+## 触觉反馈的种类
+
+触觉反馈的设计在工业设计界应用非常广泛。比如下图四个设计分别是纸质触感的表盘、硅胶触感的插座、凝胶触感的遥控器以及草莓触感的饮料盒。
+
+<img src="https://static001.geekbang.org/resource/image/65/54/65894802c6e061c12fc77a97778ecd54.jpg" alt="">
+
+但是在UI设计领域，很少有人会去思考屏幕触觉反馈的设计。在过去40年里，自1980年引入GUI （Graphic UI）以来，用户体验设计一直是以视觉交互为主的一门学科。
+
+即使在触摸屏改变了UI的同时，这种体验感觉的重点始终是“屏幕”的反馈加上可选的“声音”反馈，而很少提及触感反馈。更何况，苹果推出了3D Touch一段时间后，又放弃了压感器件，让更多人对UI设计领域的触觉反馈有了质疑声。
+
+究其原因，应该主要是目前的技术瓶颈所致。现在的触觉反馈技术几乎还停留在最原始的振动阶段，距离《头号玩家》里面的全身体感衣服，还有相当遥远的距离。而在体验设计上，当前主流的应用几乎就局限在振动感知。
+
+<img src="https://static001.geekbang.org/resource/image/35/0b/35796d99e83d3fb83f4ec8b7b78c8d0b.jpeg" alt="">
+
+## 触觉反馈技术瓶颈
+
+在研究触控反馈之前，让我们先理解一下这个技术。
+
+触控反馈这个技术在我们日常用的手机中，是通过嵌入的马达来实现。由于成本约束，大部分便宜的智能手机嵌入的都是转子马达。转子马达启动反应慢、刹车慢、有明显的滞后延迟（延迟在20到50ms），而且转子马达的振动感觉没有定位感和方向感，振动噪音大。
+
+转子马达的这些缺陷会让用户在手机振动时明显感受到“拖泥带水”，你只会感受到很强烈的嗡嗡振动。这种有些类似噪声的振动不仅仅是鸡肋，有些时候甚至会影响你正常的交互。所以很多人都直接在手机里关掉了这种马达的振动反馈。
+
+一些高端手机使用的是线性马达。线性马达的虽然成本高，但响应速度快，振动频率和振幅可控，会产生相对复杂的振动体验。
+
+线性马达一般分为两种，一种是横向线性马达，可以沿着屏幕平面上下左右振动，而另外一种是圆形线性马达，我们又称为Z轴马达，这是在屏幕表面垂直的方向上下振动。
+
+横向线性马达的振动行程可以做的很长，圆形线性马达会严重受屏幕厚度约束。所以圆形马达的振动力量弱，持续时间也会更短。下图是苹果手机的横向振动马达简单示意图。目前在马达上舍得投入的基本上就是苹果了。
+
+<img src="https://static001.geekbang.org/resource/image/98/f7/98cacd0833a20e23b1d78740218b91f7.gif" alt="">
+
+线性马达的振动能给我们提供三种参数的调整，它们分别是粒度、清晰度和强度。
+
+- 粒度也可以称为节奏，是振动脉冲的频率或者说是振动脉冲之间的间隔。粒度越大，频率越大，间隔越短，用户感知越快。
+- 清晰度又叫音色，是脉冲的刚度和硬度。振动脉冲清晰度越高，脉冲间的差别感知越明显，清晰度越低，振动脉冲会产生微妙的连续性反馈。
+- 强度是脉冲的振幅或大小。强度越强，用户的触感越强，强度越弱，用户触感越不明显。
+
+<img src="https://static001.geekbang.org/resource/image/cb/36/cbdc8e9b9316c2932cbc974068583a36.png" alt="">
+
+在我简短介绍完技术现状之后，你可以回头再想一想，从人的体验维度出发，这种振动反馈我们应该怎么用？
+
+## 触觉的隐喻
+
+在回答这个问题之前，我们先大概想想，触觉反馈在现实世界里有没有较为合适的隐喻？直接找对应关系不太容易，但是你可以把振动和声音联系起来，看看物理世界的隐喻是哪些。
+
+首先是节奏越快，越能制造紧张感。而高振幅的清晰度高的声音，会迅速抓住人的注意。如果你觉得理解有困难，回想一下电影里面不同场景的配乐。那么除了这些，还有哪些隐喻呢？
+
+- 振动振幅上升并短促结束，表示事件成功完成，比如电子支付成功。
+- 振动振幅下降并短促结束，表示事件一发生就失败了。
+- 一个事件发生并未结束的话，振动需要保持平稳。比如在一个移动赛车游戏中，踩下油门并持续踩着加速，加速中振动反馈要平稳。
+- 当事件或者任务中途失败，需要有一个跳变的振动。比如类似上载一个图片，结果中途失败的场景。
+
+<img src="https://static001.geekbang.org/resource/image/ae/b1/aeb193c3755d603794e73097d753a9b1.png" alt="">
+
+设计师不管如何调整粒度、振幅和音色，最终都要遵守以上的物理隐喻。但千万不要滥用触觉反馈。就像为UI设计声音一样，触觉是一种亲密的互动，可以吸引你的注意，但也会分散你的注意力。
+
+如果由于技术限制，导致体验达不到应该有的精度和隐喻，那些嗡嗡的振动就是一种干扰（特别对于拍照需要控制相机抖动，或者麦克风录音的应用需要减少噪声干扰时候）。
+
+那讲了这么多原理，当然不能少了好的触觉反馈的案例。接下来我会举一些在触控反馈做得比较好的例子（有些是以前华为我们团队设计的，有些是苹果的）。我要讲的这些例子并不是把触控体验用在“nice to have”的加分体验上，而是对应场景的核心体验点。
+
+## 好的触摸屏触觉反馈设计案例
+
+苹果手表开车导航的振动反馈让我印象非常深刻。在导航过程中，触觉反馈会给出前面要拐弯的清晰指示。这样用户就不必盯着手表，仅根据振动和语音，就可以安全驾驶。
+
+现在很多汽车都有超大触摸屏，从安全体验角度上来说，这种将用户注意力转移到屏幕上的设计，其实是干扰了用户对路况的观察，并非好的体验设计。
+
+<img src="https://static001.geekbang.org/resource/image/fb/d7/fbe1bc6eda36c139291032a8d86fecd7.gif" alt="">
+
+苹果输入法光标滚动的隐藏功能触发，也是一个很好的触觉反馈的例子。你只要长按苹果手机虚拟键盘任一字母，就可以启动苹果的隐藏功能——虚拟触控板，手指继续在键盘区域移动即可控制字符光标的位置。这个长按的时机掌握很重要，在这种情况下振动触觉反馈是非常好的提示。
+
+<img src="https://static001.geekbang.org/resource/image/b4/36/b4cc82bc29ee18c3e04b708d11b62b36.gif" alt="">
+
+华为的全局导航有两个需要依赖于滑动距离的功能。
+
+下图左边是EMUI的侧边栏功能。这个功能是一个隐蔽功能，需要你在侧边缘内手指不离开屏幕滑到一定距离后才会触发。下图右边是上滑到多任务状态，也是上滑到一定距离才会被触发。
+
+这两个功能为了让用户知道滑到什么程度才会触发，都增加了振动反馈。在滑动距离达到要求后，会立即通过振动给出触觉反馈告诉你现在手指可以离开屏幕了。这也是个触觉反馈设计里非常实用的案例。
+
+<img src="https://static001.geekbang.org/resource/image/f4/2a/f4b3abf2cb34967dac1af86907cda52a.jpg" alt="">
+
+华为的Mate 30 Pro为了实现超曲面环形屏幕包裹侧边的效果，干脆取消了物理音量键。我们在调整音量时，就用的大拇指上下滑动边框的方式来调整音量。那这就需要一种类似按压机械物理按键的触觉反馈，去模拟用户按压真实音量键的感受。
+
+华为在超曲面屏边缘调节音量里，采用了触摸屏技术加上线性马达振动的反馈的方式。这样一来无论用户是左撇子还是右撇子，都可以在屏幕的边缘使用音量键。这也是一个触觉反馈的很好的例子。
+
+<img src="https://static001.geekbang.org/resource/image/34/94/345eb2b35ece879c56580595283a3b94.png" alt="">
+
+从以上案例你可以看出，这些触觉反馈的设计都在它们特定的场景下不可或缺，是优秀体验的一个重要组成部分。如果关掉这些触觉反馈设计，那么对于其对应的功能或者场景，用户会感受到明显的易用性体验降低。我认为这种设计才是好的触觉反馈设计的方向。
+
+## 为什么苹果放弃了3D Touch
+
+苹果的3D Touch曾是苹果独有的触觉交互特性，也是很多人喜欢谈论的比安卓手机长按要高级的体验。去年苹果对外宣传由3D Touch改为Haptic Touch（长按）后，有非常多的媒体吐槽苹果行倒车。
+
+<img src="https://static001.geekbang.org/resource/image/bf/19/bf384c5c8d2c407d53001ed5e9c2aa19.jpg" alt="">
+
+为什么苹果要放弃3D Touch呢？我尝试从人因学谈一下我的理解。
+
+首先从人的生理学分析。3D Touch是通过压力传感器感知用户触摸屏幕的压力，来给予触觉反馈。前面我们说过苹果采用的是XY轴的线性马达，振动沿着屏幕平面上下左右，并不是Z轴的振动反馈。
+
+而3D Touch的技术本质是根据人手指按压屏幕压力的不同，检测到轻轻的压、中等程度的压以及用力压的三个级别，从而提供不同层次的交互体验。
+
+也就是说用户在Z轴层面施加压力，却会得到XY轴的振动反馈。而且玻璃是个相对刚性的材质，特别是大猩猩玻璃对压力并不敏感。用户用力压除了得到某种平行振动反馈，并不会得到真正符合物理规律的Z轴变形触感体验。所以用户在体验上是困惑的，并不是最优秀的体验。
+
+再从心理学上来分析。在移动终端上有很多应用为了兼顾安卓和苹果，在某些触觉控件的选择上都采用了长按代替了压感。在很多系统交互体验中，安卓手机也都是长按调出，而不是苹果的通过压力触控产生。
+
+压力触控需要付出更大的力气，出错的心理负荷也会更大。所以很多从安卓手机转到iPhone的用户，一开始都会对压感非常不适应，无法很好地找到那种压力的平衡点，在易学性上存在困难。这样在增加用户学习成本的同时，也降低了品牌粘性。
+
+不排除苹果的3D Touch 在某些体验点是非常好的，当一个用户适应了这种交互后，会对此产生某种程度的粘性依赖。但总的来说，苹果应该是综合评价后，认为这不是一个让体验设计团队觉得满意的特性。这也是苹果公司追求极致体验的一种特殊表达。
+
+## 摸出不同材质感觉的触觉反馈
+
+还记得4年前，我就在华为终端内部的新器件、新技术展会上见过那种手指在玻璃上滑动过程中，就能感受到纹理“触感”的原型。
+
+我记得当时可以在玻璃上摸出石头的触感，摸出凹凸不平鱼鳞的纹路，摸出一个虚拟按钮的边缘。这是一种超音波频率的技术，在手指和屏幕之间产生压缩的空气薄膜，从而改变摩擦力，进而模拟不同的材质的纹理。
+
+这种技术已经出现了一段时间，从人因体验上讲是一种不错的感受。目前主要的瓶颈是在成本、功耗等因素上。我还没有看到任何一个手机制造商将这种技术商用，但我相信未来在合适的时机能看到这种技术上市。
+
+<img src="https://static001.geekbang.org/resource/image/cc/39/cc0dfdc9c176620b780b1a86969d6639.png" alt="">
+
+## 防误触设计
+
+以上我们谈的都是如何利用触觉做出好的体验。对于移动设备来说触觉还有另外一个维度，就是如何避免错误地识别触控意图。不知道你有没有遇到过以下这些情况：
+
+- 在Pad上用笔画画的时候，你的手掌也接触到了屏幕，导致了错误的触碰响应；
+- 手机放在口袋里，发生了错误的触碰响应，甚至误拨电话；
+- 打电话时把手机贴到脸上，结果误触了静音键或者其他按键，导致影响自己的通话体验；
+- 在使用曲面屏、瀑布屏的手机时候有握持恐惧，担心会误触侧边的交互区域。
+
+以上这些都是防误触需要也必须考虑的设计。
+
+一般防误触设计是个以工程为主来考虑的体验，但是仍有一些点需要设计师注意。我给你举两个例子。
+
+1. 接近光传感器：这种传感器通过脉冲红外光反射检测手机屏幕前物体。当确定前方有物体接近，为避免误触，手机会关闭屏幕触控和显示。但这种技术也有明显的体验短板。比如我每天早上被闹铃叫醒，伸手摸手机想关闭闹铃时，经常先握住手机的顶部，然而这样容易挡住接近光传感器，导致手机冒出一个“请勿遮挡屏幕顶端”的提示。最后的结果是闹铃依旧响个不停，影响其他家人的休息。作为设计师，我们要多思考如何提升这部分的体验。
+
+<img src="https://static001.geekbang.org/resource/image/88/84/88f1yyc2b8af427ceae905424184a784.jpeg" alt="">
+
+1. 握姿传感器：检测手掌的握持状态。这种传感器可能在手机四周侧边，也可能在屏幕正下方。目的是能检测到用户握持手机的方式（用户是单手握持还是双手握持，是竖屏握持还是横屏握持），然后去自动调整触控热区以规避误触。我发现最近的小米11用到了这个技术。在识别到用户不同的握持姿态后，可以自动屏蔽对应握持区域侧边的交互。
+
+<img src="https://static001.geekbang.org/resource/image/56/21/5676c543c7d970d8001571d1cyyf3b21.jpg" alt="">
+
+这两种技术手段都是比较刚性地去解决防误触的问题，但也经常误判，无法做到真正好的体验。所以对于这种技术，一定要有设置的开关项对应，给用户关掉它的选择。
+
+在华为就曾经因为去掉了防误触的开关，让系统默认打开，结果影响了某些特殊人群的体验。
+
+外卖小哥他们在下雨天户外送货的时候，喜欢把固定在电瓶车上的手机套上一个防水套。一旦手机的防误触打开，再加上防水套干扰了接近光传感器，手机触感就会明显减弱。所以外卖小哥一般都会把防误触的开关关掉。
+
+而在某一个版本，我们把这个开关去掉，改成了全部默认打开防误触。这一举动引起了外卖小哥们的不满。当然，后续我们赶快用软件补丁恢复了这个功能的开关项。这个故事告诉我们，对于任何功能的裁剪，都要极为谨慎，需要判断是否会影响某些特定人群的特定需求。
+
+## 总结
+
+接下来我来给你总结一下今天讲的要点。今天我们谈的是很多人平时都不是特别关注的触觉反馈设计。要理解触觉体验，先要理解皮肤对触觉的感知。指尖是我们皮肤中最敏感的区域。
+
+好的体验依赖于技术。目前触觉反馈的技术发展滞后于体验，触觉反馈主要使用的技术是转子马达和线性马达。后者在时延、方向感、频率和振幅的灵活控制方面都好于前者。粒度、振幅和音色也是线性马达可以控制的参数。
+
+好的触觉反馈要在现实世界里找到合适的隐喻对应，符合人的心理认知。节奏越快，越会制造紧张感。而清晰度高的声音，会迅速抓住人的注意。振动振幅上升并短促结束，表示事件成功完成。如果振动振幅下降并短促结束，会表示事件失败。一个事件发生，并未结束，振动需要保持平稳。当事件或者任务中途失败，需要有一个跳变的振动。
+
+苹果手表的开车导航的振动设计，苹果输入法的光标滚动的隐藏功能触发，华为的全局导航手势，以及超曲面无物理按键的侧边音量调节，这四个是比较好的触觉反馈的案例。
+
+苹果的3D Touch从生理学和心理学上分析，都不是一个优秀的用户体验设计，所以苹果放弃了它。未来触觉反馈会考虑材质感的变化。
+
+除了正确的反馈外，我们也要注意防误触的设计。接近光传感器和握持传感器是当下被用到的两个技术。这两种技术都并不完美。对于不完美的技术功能来说，一定要有开关约束。
+
+## 作业
+
+在你做的产品中，有无触觉反馈设计的考虑？考虑到人因，你准备如何平衡技术和体验？
+
+另外你在日常使用手机的过程中，有没有因为误触导致的烦心事？

极客时间专栏/geek/基于人因的用户体验设计课/基础篇/09 | 视听触的协同性：从人感知世界的时间延迟去理解协同.md

@@ -0,0 +1,121 @@
+<audio id="audio" title="09 | 视听触的协同性：从人感知世界的时间延迟去理解协同" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/d6/d1/d6fe7f698e86880ef8369681a6e664d1.mp3"></audio>
+
+你好，我是Rocky。
+
+在前面几节课里我们分别谈了视觉、听觉和触觉。今天我们来聊聊视听触的协同。
+
+视听触协同相当于是一种进阶的体验设计，它在生活中无处不在。毕竟人是有着复杂感官通道的动物，对自然的认知本来就是多通道、多感官的。我下面描述一个场景，你可以尝试从多感官协同体验维度理解一下。
+
+你赤着脚走在热带小岛软软的金色沙滩上，海滩的细沙按摩着脚底。余晖洒满天空，也让海面泛起闪闪金光。带有一丝咸涩的海风吹来，吹散了你的头发，也带来丝丝的清凉。海浪拍打着海岸，哗哗的海浪声伴随着海鸟的欢歌。你随手捡起一个贝壳，抚摸它多彩的纹路……
+
+<img src="https://static001.geekbang.org/resource/image/aa/86/aa161fb806757e3565d789a63f923b86.jpg" alt="">
+
+上面的描述有视觉、听觉、触觉甚至嗅觉。这就是人与自然的多感交互。那现在我们要设计一个人造物、一个电子产品、一个App，一样需要考虑，如何在设计中能带给人自然的交互体验。那么自然的视听触协同体验有哪些考虑点呢？我们可以大致拆解为几种协同：视听协同、视触协同和声触协同。
+
+## 视听协同
+
+我们首先来看视听协同。我们都知道声音的传播速度远小于光速，但对于大脑而言，只要声音和图像信号之间的延迟小到一定的范围，人就根本感觉不到它们的不同步，甚至就直接把看到的和听到的自然结合到一起。
+
+国际标准组织已经做过实验，并将声画不同步的定义做成了标准。在视频领域：
+
+- 如果声音比图像延迟不到100ms，或者说声音比图像提前不超过25ms，人是感知不到的；
+- 如果说声音比图像延迟超过125ms，或者声音比图像提前超过45ms，人就会比较明显地察觉到了；
+- 如果声音比图像延迟超过185ms，或者声音比图像提前超过90ms，人就已经不可接受了。
+
+<img src="https://static001.geekbang.org/resource/image/55/f7/5500d0c0acf58d0726aa6e1df605b5f7.png" alt="">
+
+这就意味着，如果我们设计一个好的动效，再配上音效，那么**动效与音效之间的时延要控制在-100ms~25ms之间，用户才会获得良好的视听协同体验。**
+
+iMassage发送烟花的全屏特效是一个非常棒的视听协同案例。这些烟花是随机播放出来的，背后是图形计算的算法。当烟花在屏幕上播放的时候，你能完美感受到烟花炸开和对应声音的协同匹配。短促的烟花、大个的烟花，不同烟花对应的音效都有差别。整个烟花绽放的过程接近自然，彷佛是自己身临其境在现场看烟花一样。
+
+<img src="https://static001.geekbang.org/resource/image/2c/71/2c44e5b3984fb6022a844eca858dd871.gif" alt="">
+
+声画同步仅仅是视听协同的第一步。好的音效设计，还要符合物理世界的隐喻。这个我在07中讲过一部分。
+
+声音也有一部分视觉属性。这也属于感官的联觉部分。从色相上的理解来看，不同的人对不同频率的声音，或者不同的乐器会有不同的色彩联想，可以讲是仁者见仁智者见智。
+
+但是音调和色彩的明度是有很明显的联觉的。以下是不同的音调对应的色彩明度：
+
+- 高音区：明朗、响亮，对应的色彩明度高；
+- 中音区：梦幻、辉煌，对应色彩明度适中；
+- 低音区：苍老、深沉、悲哀，对应色彩的明度低，色彩偏暗。
+
+另外声音的大小和视觉物体的大小（或者重量感）也是有很明显的联觉的。我们在考虑视听协同的设计时，需要考虑声音的视觉属性。
+
+举个例子，比如对于音乐播放界面来说，你需要考虑如何通过视觉动效的运动变化，去适配音乐的律动。现在很多音乐App播放界面上用模拟黑胶的旋转，或者单纯在音乐播放背景用静态的音乐专辑封面图片。应该说这样做在简约设计的同时，也放弃了视觉声音的联觉设计，有些可惜。
+
+<img src="https://static001.geekbang.org/resource/image/07/8e/074d645115e657e554bb7b52bd4eb98e.gif" alt="">
+
+## 视触协同
+
+以人的视角来看，视触协同分为两种。一种是主动的视触协同，也就是人主动触控设备，然后设备产生动效变化来给用户清晰的视觉反馈。一种是被动的视触协同，也就是设备主动出现视觉的变化（比如通知），然后会产生振动反馈以提醒人的注意。我们主要来看看主动的视触协同。
+
+什么样的动效反馈我们不会感觉到卡顿？可见并能对我们产生影响的视觉刺激最短时长是5ms，对应的帧率是200帧。
+
+很多人说是不是60帧的游戏画面就不卡顿了？我要说这还远远没有达到人的流畅视觉体验极限。之所以很多人都会说60帧，是因为提这个概念的时候，屏幕刷新频率就是60hz。所以60帧就是这种屏幕动效处理的极限了。
+
+那究竟什么样的动效才是真的流畅体验？在我们屏幕刷新率技术没有达到5ms这个极限的时候，屏幕刷新率越高动效就越流畅。
+
+而达到了200hz的刷新率后，屏幕刷新率再往上做就已经没有太大意义了。因为这个时候人的肉眼已经根本分辨不出来区别了。
+
+现在很多手机屏幕的刷新率已经达到了120hz。这对应的每两帧之间的间隔是8.33ms，还没有接近人能感知的极限。现在有的屏幕厂家已经提出要做240hz的刷新率，那真的超过人的流畅性认知极限了。
+
+当我们的手指在屏幕上产生交互动作，比如滑动、点击、捏合时，屏幕上的交互动效以一个什么样的延时，我们是可以接受的？答案是越快越好。
+
+在屏幕刷新频率没有达到200hz之前，最优秀的动效产生的时延，就是在手指触到屏幕的下一帧间隔内。当然这个是最优的处理。从人因角度上来看，有没有一个忍受的极限呢？答案也是有的。
+
+**人的大脑能感知到的因果关系的最长时延是140ms。**这就意味着如果你的手指点击屏幕上的一个按钮，结果交互反馈动效在140ms后才体现出来，你就会觉得这个动效和刚才那个点击没有直接的因果关系。或者说这个动效的延迟过于明显，以至于你不可接受。
+
+合理的时延，仅仅是视触协同的第一步。好的触控视觉反馈绝不仅仅是唯快不破这么简单。为了让触控视觉反馈更符合物理世界的规律，触控的很多参数都可以作为变量来使视觉反馈看起来更加自然。
+
+对于滑动的手势来说，这个手势滑动的方向、距离、速度，手指离开屏幕的时机，都可以作为动效曲线生成的参数。
+
+比如下面这个华为的返回动效，如果你是左手握持向上滑动，那么应用界面缩小，最后返回到对应桌面图标的动效就是向左上的一个抛物曲线。如果你是右手做类似的滑动，就会是一个向右上的抛物曲线。后来，我们把这一系列拟合物理规律的动效曲线做成了动效引擎，集成在华为的EMUI里。所以你会在华为的各种交互动效场景里感受到这种自然。
+
+<img src="https://static001.geekbang.org/resource/image/82/d8/82b0a78db533f0yy5128f8b4e19d88d8.gif" alt="">
+
+## 声触协同
+
+接下来我们谈谈声触协同。和视听、视触协同不同，在声触协同体验中，触控反馈的表现力远远低于听觉，所以如果你想通过触觉模拟声音的频率、音色的话，在很多时候是困难且没有必要的。
+
+对于什么样的音效应该适配什么样的振动反馈，这就不仅仅是保持同步那么简单了。
+
+振动反馈由于表现力弱，非常容易被声音掩盖住，所以它在使用过程中应该适量使用，不必完美去复制声波的频率和振幅。比如下图，触控反馈仅仅是选择了声音振幅的几个高点做了脉冲映射。
+
+<img src="https://static001.geekbang.org/resource/image/77/42/7797c372dd0bd69f0d11672839a55742.png" alt="">
+
+甚至我们可以考虑让触控反馈与声音去按照某些因果关系错开播放，这样人的体验会更加明显。比如在声音真正开始前就启动振动，让声音成为振动的一个果。这在体验上也是自然的交互。苹果支付（Apple Pay）的音效和触控就是先有的振动，才开始有声音。
+
+<img src="https://static001.geekbang.org/resource/image/1f/e4/1fb7158bbbf93a4fb7yy2db36a3376e4.png" alt="">
+
+## 视听触综合协同
+
+最后，我们来看看视听触的综合协同。在某些交互场景下，视听触协同要是同时发生，那么用户体验会更加自然。比如弹性模拟、机械齿轮模拟、阻尼模拟、气泡模拟等。
+
+我拿机械齿轮模拟为例，给你简要分析一下。对于拨盘界面而言，比如手机时间应用里面调整时间的拨盘界面，又或者手机相机里面调整参数的拨盘界面，但凡涉及到拨盘，就应该有一定的动效和音效去完美配合。
+
+早些年华为的拨盘音效是不管你如何拨动拨盘，对应的音效和触控反馈都是均匀的。这样的交互反馈对用户而言非常不自然。后面我们更改了算法，跟踪用户滑动拨盘的速度，然后在视觉反馈上通过阻尼的方式模拟拨盘慢下来的过程。随着拨盘减速，音效的哒哒声和对应的振动反馈也同步减速，这样在视听触上完美拟合了整个过程。
+
+<img src="https://static001.geekbang.org/resource/image/9c/50/9ce7ab5a1ed270046d87cc080yy10250.gif" alt="">
+
+好的视听触协同的体验，会将生活中的“自然流畅”体现为：**人眼看到的视觉感知流畅、大脑认知理解的流畅以及手触控操作的流畅。**这样才能为用户提供极致流畅的综合体验。
+
+## **总结**
+
+好了，讲到这里，今天的内容也就基本结束了。最后我来给你总结一下今天讲的要点。
+
+今天我们聊的是相对高阶的视听触协同设计背后人因。我们可以把视听触协同拆解为三种协同：视听协同、视触协同和声触协同。
+
+如果你将动效与音效之间的时延控制在-100ms~25ms之间，人会获得良好的视听协同体验。除了和物理世界接近之外，你还要注意声音的视觉属性。比如音调和色彩明度之间的对应，音量大小和视觉物体的大小（或者重量感）的对应。这些都是联觉体验的重要部分。
+
+在视触协同体验上，5ms是人能感觉到视觉刺激的最短时长，对应的是200hz的屏幕刷新率。触控屏幕与动效响应的时间最迟不要超过140ms，否则会脱离因果关系的认知。好的触控设计不仅仅体现在时延控制上，同时还应该考虑物理世界规律的遵循，比如针对滑动方向、距离、速度，用算法去生成不同的动效曲线。
+
+声触协同的处理要兼顾振动反馈的硬件技术瓶颈，选用声音振幅的高点做脉冲映射，又或者是调整振动和声音的因果关系，让振动成为声音的因。这些做法都会让两者协同更加自然。
+
+对视听触协同同时发生的交互场景来说，用户的体验会更加自然。比如弹性模拟、机械齿轮模拟、阻尼模拟、气泡模拟等。
+
+## 作业
+
+最后，我给你留了一个小作业，从今天我讲的内容，你能找到你的产品中哪个交互体验会用到视听触协同吗？如果能，根据今天的学习，你准备如何优化它？
+
+以及有没有什么你觉得视听触协同做得非常好的App？欢迎分享。

极客时间专栏/geek/基于人因的用户体验设计课/基础篇/10 | 重新认识记忆和注意力：你的记性比你想象中的还要糟糕.md

@@ -0,0 +1,195 @@
+<audio id="audio" title="10 | 重新认识记忆和注意力：你的记性比你想象中的还要糟糕" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/71/a0/710dd1f22ce803055ayyd51bc84a86a0.mp3"></audio>
+
+你好，我是Rocky。
+
+今天我们来谈谈人的记忆和注意力对设计的影响。
+
+人的记忆分为两类：短期记忆和长期记忆。短期记忆让少量信息在短时间内保持激活状态，而长期记忆会记住相对较长的时间。
+
+从生物学上来说，短期记忆就是神经连接的暂时性强化，这种暂时性强化通过巩固后，可演变为长期记忆。然而不管是我们的短期记忆还是长期记忆，其实都非常糟糕。
+
+## 短期记忆
+
+我们先来看看短期记忆。想必你应该听说过“金鱼只有3秒的记忆”这句话。但其实我们的短期记忆比上金鱼也好不了多少。
+
+我们的短期记忆也就是几秒到一分钟的时间。举个例子：我们几乎每天都会看各种各样的手机短信验证码。当你输入完验证码后，再过10秒，你自己是否还记得刚才输的是哪几个数字？很明显我们多半是想不起来的。短期记忆非常不稳定，它是一种暂时聚焦、易被抹去的记忆。
+
+成人有860亿个神经元，对应大脑每秒接收大约400亿个感官输入。但是我们大脑每秒只能处理大约40比特，这40个比特能真正被短期记忆记住的就是个位数了。
+
+在米勒定律中提到一个概念叫神奇的7±2，也就是说人在短期记忆中，平均最多能记住的事物数量是7个左右。其实心理学实测数据表明米勒定律高估了人的短期记忆。人短期记忆能真正记住的其实只是**4±1**。
+
+你要不信可以回想一下，一般你告诉人家你11位手机号的时候，你会怎么报手机号？你是会先说7位然后再说4位？还是会先说3位，再说4位，然后再4位？
+
+所以当短信验证码是4位的时候，你输入没啥压力。但如果验证码是6位的时候，你会提升注意力，反复默念以强化记忆，这样你才会在切换界面的时候，输入正确的值。如果中间有任何人打断你，你会沮丧地重新再看一遍验证码。
+
+这就是专注力在短期记忆中的重要性。被打断或者交互焦点中途被改变，短期记忆会受到致命的打击。你去另外一个房间拿东西，如果中途你和孩子说了两句话，到另一个房间后你很可能就忘记了你要去干嘛。你和同事正在聊一个事情，突然一个电话过来打断了你们的谈话，你们很可能也会忘记刚才聊到哪里了。
+
+那考虑到短期记忆的这些特点，对应到体验设计中，我们应该注意哪些方面呢？别着急，我们接着往下看。
+
+### 分组分块
+
+第一个需要注意的点就是要**避免出现过多的选项**。
+
+如果存在较多的选项内容，请分组分块。如果你将每组选项控制在4个左右，这样可以帮助我们更轻松地进行短期记忆。比如下面左边的列表和右边的分组相比，显然右边的更容易被理解。
+
+<img src="https://static001.geekbang.org/resource/image/14/be/14a80f1d543591369da33113d5bb9cbe.png" alt="">
+
+### 面包屑线索
+
+第二个要注意的点是**在导航深度相对复杂的应用中，你要给用户清晰的导航线索**。
+
+提供“面包屑”导航线索是一种常见的手法。什么叫面包屑导航线索？在童话里，小朋友一去陌生的地方，就会沿途丢下面包屑形成一条小径，以帮助自己回到家里。在体验设计中也是如此，所谓面包屑导航线索就是给用户层级的暗示，告诉当前到哪个层级了。
+
+我给出了苹果手机的设置和三星手机的设置对比，你可以参考一下下图。苹果手机在每进入一个层级之后，都会看到上一级的名字，并用蓝色标识出来。而三星的设置则是每点入下一个层级，都没有这种导航线索。所以用户在复杂的导航跳转过程中，很快就会迷失掉。
+
+<img src="https://static001.geekbang.org/resource/image/3f/7c/3f7dc8b5a23d86ef6f4223822370d07c.png" alt="">
+
+### 步骤线索
+
+第三个需要注意的点是**步骤线索**。
+
+如果一个任务需要多个步骤，而且这多个步骤不允许被打断，那么你在交互设计中最好给出进度执行线索，表明当前执行到哪一步以及还剩下多少步，让用户清楚知道自己当前的状况。比如下图一个电商购物应用中的渐进结账流程，你就能够从拆分出来的步骤中，清楚自己的每一步操作以及当前情况。
+
+<img src="https://static001.geekbang.org/resource/image/b9/24/b9b4565a9606871ddd56a4e2fb456c24.jpg" alt="">
+
+### 帮人完成收尾工作
+
+第四个需要注意的点在于，有时候我们需要**帮助用户完成收尾工作**。
+
+当我们完成一个任务某个关键目标后，之前专注完成这个任务的注意力将被释放，并转移到当前更重要的信息上。与这个目标相关的后续的细枝末节，经常就会从我们的短期记忆中忽略，甚至被忘记了。
+
+我举几个例子：
+
+- 开车转向后，忘记关掉了转向灯；
+- 把车停好了，忘记关掉了车前灯或者车窗；
+- 在做完饭后，炉灶火忘关了；
+- 打开银行的App转账结束后，忘记安全退出。
+
+如果要避免上述类似的失误，你设计交互系统的时候，有的时候就要帮助用户把收尾工作给做了。比如：
+
+- 汽车在转过弯后，自动帮助用户关掉转向灯；
+- 汽车停好后，自动关掉车前灯和车窗；
+- 当用户炉灶火烧了很长时间，达到烟雾或者温度阈值时，发出预警或者自动关掉煤气；
+- 检测到银行App被切换到后台，到一定时间后，自动安全退出。
+
+一个好的交互系统，应该学会如何帮助用户做好收尾工作。
+
+通过分组分块、面包屑线索、步骤线索和帮助完成收尾工作四个点，就能够很好地弥补短期记忆的不足了。我们接下来看看长期记忆。
+
+## 长期记忆
+
+长期记忆可以从几小时、几天，到几年甚至一辈子。人的长期记忆同样是非常不靠谱的。有多不靠谱呢？英国一汽车经销商做过实验，找来100名不同年龄段的人，让他们画宝马车的logo。结果大家给出的答案五花八门，甚至很多人在基本形状上和颜色上都搞错了。
+
+<img src="https://static001.geekbang.org/resource/image/95/e7/9597c115bdfcc1a90743f5d329fe26e7.png" alt="">
+
+为什么会这样呢？如果把我们的大脑类比为计算机，人脑的记忆处理是用压缩率非常高的失真算法处理过后再存储的。我们大脑存储的是大致的轮框，而且这个轮框还会随着时间的增加而迅速衰减。你从下面的记忆衰减曲线可以很明显看出，一周之后能记住的框架也仅仅是10%了。
+
+<img src="https://static001.geekbang.org/resource/image/d9/c6/d96e8942792750f451ca7yy4b103bec6.png" alt="">
+
+而每次回忆检索的时候，解压缩无法还原，我们就会对记忆内容进行重构，并填充一些所谓的细节。人们总是在寻求逻辑，所以**这种重构会主观地、不自觉地将记忆片断组合成一个很符合逻辑关系的画面。**
+
+这种重构的细节容易被篡改、填充。特别遇到一些诱导性和暗示性的提问、评价或者建议的时候，你的记忆就会出现偏差，甚至无中生有。你也可能在重构细节的过程中卡壳或暂时性遗忘，让你明明记得，但是却突然叫不出名字。
+
+记忆会受到知识、经历、信仰、情绪、期待、压力、偏见和外部诱导等诸多因素的影响。可见记忆是有多么不靠谱。
+
+基于以上情况，我们应该如何在体验设计中应对我们糟糕的长期记忆呢？
+
+### 帮助用户记住
+
+让用户记住事情很难，但是自动帮助用户记忆，就会有效缓解这种尴尬。
+
+拿搜索为例。很多搜索功能都有历史搜索。你很难记住上一次，或者近一个月都搜索过什么。但如果软件可以在搜索的时候提供历史记录信息，就会减少用户很多记忆负担。
+
+<img src="https://static001.geekbang.org/resource/image/52/4c/520289ed0e0a9a39817c414470f8924c.jpg" alt="">
+
+### 反复训练用户记住
+
+你可以再回想一下刚刚我提到过记忆的衰减曲线。为了避免记忆快速地呈指数级衰减，比较好的方法是定期强化训练。每次强化训练后，这个衰减速度就降低一些，反复强化，衰减率就非常低了。
+
+<img src="https://static001.geekbang.org/resource/image/09/05/098bd2385f6e1de52afea50e8f28bc05.png" alt="">
+
+我们基本都离不开手机，锁屏密码对于手机来说是解锁的关键途径，也是保底的途径。
+
+尽管我们有了人脸识别、指纹识别等生物识别手法可以替代锁屏密码解锁。但是如果人脸器件或者指纹器件坏掉，我们最后还是要依赖于锁屏密码方式来鉴权。
+
+我以前在担任华为易用性改进小组的组长期间，有一个项目就是如何降低用户忘记密码导致刷机的事故，怎么样才能让用户记住锁屏密码。
+
+真的会有很多人忘记了自己的锁屏密码。因为他们还以为和银行密码忘记一样，锁屏密码也可以恢复。
+
+其实锁屏密码是无法恢复的。这也就意味着如果用户在生物识别手法解锁手机失败的情况下，还忘记了锁屏密码，那就只能强制回到出厂状态，清空所有用户数据。对于一件如此贴身的私人物品来说，这种操作就意味着要丢掉自己所有的数据，无疑是件超级糟糕的事情。
+
+那为什么不在解锁的过程中，提供普通网站忘记密码的密码找回流程（或者重置流程）呢？
+
+这是因为**手机的找回或者重置流程带来的附加成本和风险会更高。**我们需要考虑到安全性和隐私保护。特别在当下手机拥有了电子身份证、银行卡、车钥匙、门钥匙等多种功能的时候，锁屏密码无疑是第一道也是最后一道安全保护的大门。
+
+回到上面的问题。怎么让用户记住自己的锁屏密码？我们想过很多可能的方法。比如在用户第一次设置锁屏密码的时候，强制提醒这个密码的重要性。我们还考虑了要不要在设置密码的同时，再让用户去设置一个安全提示问题，并在后续连续输入错误的时候，直接提醒用户安全问题以帮助用户联想。
+
+但真正有效的，是其中一项反复训练用户的举措——在用户设置人脸或者指纹的时候，提醒用户输入锁屏密码。在用户使用手机生物信息登录后，也在各种环节保留用户输入锁屏密码的操作。
+
+在一定周期内，一定要强制用户输入锁屏密码。下面我给出了你一个生物鉴权信息登录手机的流程图，你可以参考一下。
+
+<img src="https://static001.geekbang.org/resource/image/51/cb/5196532a13386a5b59a4b3a598a6b5cb.png" alt="">
+
+你可以看出，这种定期加强训练的方式还是有点粗暴的。但也正是这种野蛮粗暴的定期加强训练的方式，降低了用户忘记锁屏密码的投诉率。
+
+不管是短期记忆还是长期记忆，其实都离不开注意力。下面我们来谈谈注意力对设计的影响。
+
+## 注意力
+
+注意力是人一定时间内知觉选择性集中的表现。注意力在心理学的概念分类有很多种，今天我们谈一下其中被讲的最多的两种概念：选择性注意力和持续性注意力。
+
+### 选择性注意力
+
+人是非常容易分心的动物，这也是大自然进化的原因。**人天生就是“选择性注意”。**即便人再专注于一个事情，潜意识里也会不断扫视周围情况，以寻找是否有自己感兴趣的信息。比如突然出现的声音、快速移动的物体、美食等信息，都会让你注意力分散。
+
+选择性注意力在不同环境下敏感度不同。在完全漆黑的环境中，你可以站在高处看到48公里外的烛光。在一个非常安静的房间，你能听到6米外的手表滴答声。
+
+对应到设计中，如果你的界面是个非常干净的界面，那么想吸引用户注意力的话，做的设计不必过于明显。但是对于一个信息密度非常高的页面，你要吸引用户的注意力，恐怕要付出高出10倍的努力。比如下图摩拜单车的例子，你可以先简单看一下。
+
+<img src="https://static001.geekbang.org/resource/image/b6/ce/b641913400288589bfe4d330b9c948ce.png" alt="">
+
+在上面这个页面中，当你点击扫码开锁时，会被弹出的开锁帮助提示干扰，你就很容易忽略掉了下方的立即登录按钮，这就是个失败的注意力吸引案例。
+
+还有一点需要注意，那就是人无法并行完成多个任务。
+
+人脑是个典型的串行任务执行系统。之所以很多人有一种错觉，仿佛可以同时干多个事情，其实和计算机CPU分时隙处理是一个道理（人脑很擅长在不同任务之间快速切换）。当然有一个例外，就是已经成为习惯的肌肉记忆的任务可以并行。比如你可以边走路边说话，因为走路是靠肌肉记忆惯性完成的。
+
+关于无法并行完成多个任务，我举一个最简单的例子。即便打电话对我们而言是件不费劲的事，但打电话依然会明显抑制人的选择性注意力。当你专注于打电话时，你甚至会看不到熟人从你眼前走过，或者直接撞上行人。
+
+很多国家禁止在开车时候打电话，其原因并不是在于手机让你的手离开了方向盘，而是因为打电话抑制了人的选择性注意力，从而使我们忽略路上的危险状况。
+
+### 持续性注意力
+
+除了选择性注意力，人还有持续性注意力。但是要达到持续注意力并不容易，我们需要有适度的刺激。下面的注意力曲线就说明了这一点。当刺激不够时，难以让人集中注意力。但是当刺激过度时，疲惫、紧张、害怕、焦虑的情绪也会让人注意力不集中。只有在适当、稳定的刺激下，我们才会感觉到注意力十分集中。
+
+<img src="https://static001.geekbang.org/resource/image/11/c2/11485db4bb128d5413258d68e737a1c2.png" alt="">
+
+持续注意力一般来说最多也就维持在7~10分钟左右。高品质的内容可以让我们的持续注意力提升到25到45分钟，一旦超过这个时间，人的注意力会被很快分散。一个内容如果在7到10分钟内，不能持续给到你有价值的刺激，你很快就会无聊而容易分心。
+
+当下异常火爆的短视频，其实也正是基于这种注意力缺陷去做的一种设计上的妥协。你会发现当下很多知识类干货视频，也都是压缩在7分钟以内讲完。甚至有些网站要求主页内容要让用户在7分钟之内消化完，否则就不是一个简洁的设计。
+
+## 总结
+
+好了，讲到这里，今天的内容也就基本结束了。最后我来带你回顾一下今天讲的要点。
+
+今天我们谈的是如何在设计中应对糟糕的记忆力以及注意力。
+
+**我们的记忆分为短期记忆和长期记忆。**
+
+对于短期记忆来说，普通人仅能记住的是4±1个事物。提升人的短期记忆的有四种方法：1. 对于较多的选项分组，每组不要超过4个；2. 对于复杂的导航层级，要采用面包屑线索；3. 对于多个步骤完成的任务，要提供步骤线索；4. 要帮助人完成不太重要的收尾工作。
+
+长期记忆随着时间的推移会有严重的衰减（7天后会衰减为10%）。记忆重构时还会被篡改和出现记忆偏差。针对长期记忆的特点，在体验设计上要帮助用户记住一些琐碎的轨迹（比如搜索记录）。对于一些极为重要的信息（比如密码），要提供反复训练的机制来帮助用户不会忘记。
+
+**我们的注意力分为选择性注意力和持续注意力。**
+
+我们在不同环境下，选择性注意力的敏感度会不同。页面信息密度和我们要引起用户注意力需要做的努力成正比。人无法进行并行任务，在交互中要尽量避免会干扰主任务的支线任务。
+
+持续性注意力需要有适度的刺激才能达到，而且这个周期仅能维持7到10分钟。高品质的内容也要控制在不超过45分钟的范围内。
+
+为了方便你的理解，我还给你总结了一个脑图，你可以长按保存下来，对你理解在设计中如何考虑人的记忆和注意力会很有帮助。
+
+<img src="https://static001.geekbang.org/resource/image/2b/66/2b8c0a5142c2fc0c29f54b070cd76f66.png" alt="">
+
+## 作业
+
+最后，希望你在学完这节课后，顺便分享一下在你最喜欢使用的产品中，你觉得哪个地方需要改进来弥补人的记忆力的不足？你最经常忘记的一件事是什么？

极客时间专栏/geek/基于人因的用户体验设计课/基础篇/11 | 重新认识情感：愉悦性设计.md

@@ -0,0 +1,171 @@
+<audio id="audio" title="11 | 重新认识情感：愉悦性设计" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/d6/1e/d60efecbf83cc530c88ca907f8b5731e.mp3"></audio>
+
+你好，我是Rocky。今天我们来谈谈情感和设计的关系。
+
+在情感和设计的关系里，其实有两个维度。一个维度是如何让设计唤醒人的情感共鸣，另一个维度是如何利用人的情感进行交互。前者称为情感设计，后者称为情感计算。今天我们先聚焦在情感设计上，关于情感计算的相关知识，我会在后续讲智能交互的时候再展开。
+
+## 情感的生理学
+
+在谈情感设计之前，我们先看一下情绪是如何影响我们的。情绪引发的生理反应由自主神经系统来实现。
+
+情绪刺激由大脑皮层处理后传到情绪中枢杏仁体，再通过自主神经系统传导到身体各处，让你产生不同的生理反应。**自主神经分为交感神经和副交感神经：**
+
+- 交感神经负责应对环境中的压力。比如会让你脊背发凉、汗毛直竖、满脸通红、心跳加速，会调动你的全身运动资源应对；
+- 副交感神经负责休息时的身体机能应对，比如让你心跳平缓。
+
+<img src="https://static001.geekbang.org/resource/image/7e/88/7e1yy2fb1e7ef3f7cff1bab883253288.png" alt="">
+
+刚刚提到的生理反应和情绪的对应关系，就表明了通过人因实验环境，可以验证我们的设计是否达成效果。比如眼动仪可以感知瞳孔的变化，面部红外感应仪可以感知面部血液的流动，心跳和血压监控可以感知你的紧张情绪等等。
+
+## 平面设计中的情感设计
+
+带你理解了情感的生理学知识后，我们接着来看平面设计和情感的关系。
+
+### 人脸表情
+
+人的情感是复杂的。在心理学研究中，最基本的情感有7种：恐惧、惊讶、厌恶、蔑视、愤怒、快乐和悲伤。这些情绪是普适性的，特别是面部表情对于情绪的表达，不管是什么文化背景的人，调用40块面部肌肉表达情感的方式都很类似。所以全世界任何地方人都能读懂这七种表情。
+
+下面我举的几个例子，从左到右，从上到下依次为：惊讶、蔑视、愤怒、厌恶、悲伤和恐惧。你在做广告和平面设计时，可以通过人脸表情运用给观者带入到不同的情感状态。
+
+<img src="https://static001.geekbang.org/resource/image/02/20/02800e1dc55ec8ab64bbae7aa183ee20.jpg" alt="">
+
+### 色彩的情感
+
+除了人脸，色彩也有强烈的情感暗示。我给你讲一个对色彩情绪化的小例子，下面是电影《头脑特工队》中的几个情绪小人：
+
+- 用明亮的黄色诠释乐观积极的乐乐；
+- 用频谱上最强烈的红色诠释总是暴躁发火的怒怒；
+- 用深蓝色来诠释忧郁的忧忧；
+- 用蔬菜和青虫的绿色诠释对什么都反感的厌厌；
+- 用蓝色和红色两种冲突色混合的紫色来诠释惧怕一切的怕怕。
+
+<img src="https://static001.geekbang.org/resource/image/8e/0c/8e0a0183a8120d20491001b907976f0c.jpg" alt="">
+
+除了单色，颜色的搭配也同样重要。相近色、互补色和拟自然的配色会带来和谐的感受。和谐分为两种：
+
+- 饱和度低的色彩和谐。比如莫兰迪色，人对这种色彩的情绪感受是平静、放松、舒缓；
+- 饱和度高的配色和谐。这样的配色给人的情绪感受是充满活力、激动和兴奋。
+
+**如果是儿童产品，就需要用饱和度高的配色。需要安静的氛围就需要饱和度低的色彩搭配。**
+
+我以前在华为给EMUI 10做色彩体系设计的时候，就采用了上面的原则。在某些大面积的色块，采用宁静的莫兰迪色，可以不喧宾夺主。而在某些小面积的系统图标，我用了饱和度较高的色彩，来吸引大家的视觉焦点，激发兴趣。
+
+<img src="https://static001.geekbang.org/resource/image/58/77/582a074d5721af9935c4e2081b501077.jpg" alt="">
+
+### 构图的情绪表达
+
+除了人脸和色彩，构图也一样会对情绪产生影响。**利用物理世界重力的隐喻，视觉设计会让人产生不同的情绪反应。**
+
+比如下面左边的图你会感觉紧张不舒服，因为你会随时担心这个顶部的圆会掉下来。但是右图你会觉得这个圆很稳地停留在底部，心境会平和。所以，当你希望牵引用户压抑和焦虑的心境时，在构图的画面上方可以设计视觉很重的元素。如果你不想要一个压抑的感觉，就要避免这种构图。
+
+<img src="https://static001.geekbang.org/resource/image/b1/f6/b1ee9aa43ecf11b655b4af550cfc91f6.png" alt="">
+
+同样，在物理世界中人惧怕被尖锐物体刺到，这种紧张感也会在视觉设计中映射到。比如下图的左边各种尖角相互交错就造成了紧张感，而右边是圆球的堆叠就不会有这种不安全感。所以，除非你希望制造焦虑感，可以用左边的形式，否则就要避免。
+
+<img src="https://static001.geekbang.org/resource/image/18/ac/18b20367a257b94eb04216fd73745aac.png" alt="">
+
+## 声音的情感设计
+
+除了视觉，声音同样也会影响人的情感。声音影响人的情感有很多方面的原因：
+
+- 某些历史声音记忆能引起反射和共鸣；
+- 声音的节奏和生理节奏的合拍程度不同，会引起舒适或者不适；
+- 声音引发文化群体共情或者情绪传染。
+
+有些情感只能由人声来诱发，有些情感可以由音乐来诱发，还有些音乐直接就表达了情感。在音乐可以表达的情感中，音乐的律动会牵动情绪的变化，从而让创作者和听者产生共鸣。下图给出了声音和情绪的关系，你可以参考一下。
+
+<img src="https://static001.geekbang.org/resource/image/07/31/07bc3306a4f5701e47e1f7fc28b2d531.png" alt="">
+
+### 节奏对情绪的影响
+
+音乐节奏会影响情绪，背后的机理是节奏共鸣。当音乐节奏和身体的节律（如心率、呼吸、脉搏）不同时，身体节律会根据音乐节奏而调整，并最终形成一个新的相对稳定的状态。
+
+**轻快的音乐节奏快于身体的节奏，这样会刺激交感神经。**交感神经是在身体需要迅速被动员时候起作用的。不知道你会不会一听到轻快的音乐，就想跟着摇摆呢？
+
+而**舒缓的音乐节奏慢于身体的节奏，会加强对副交感神经的刺激。**副交感神经系统在人感觉疲惫或者身体需要静止的状况下占据主导地位，所以会加速让人安静下来。
+
+研究还发现，节奏在每分钟50~80节拍范围内的音乐，可以帮助诱导大脑中的阿尔法α脑电波，让你注意力更加集中，并大幅度提升你的创造力。古典音乐会提升你学习新东西的效率和专注力，自然白噪声会让你更容易平静下来。
+
+对应到体验设计上，那就是在需要用户多停留、心情平静的情景里，适合使用舒缓的音乐（比如比较安静的酒吧）。当需要增加用户流量，提升用户交互速度，和刺激紧张情绪的境况中，就适合运用快节奏的音乐（比如快餐店）。
+
+有研究发现，当超市播放慢节奏音乐时，销售额会比播放快节奏的音乐高38%。在需要创新的场景中，最好背景音乐选用每分钟50~80节拍范围内。如果你希望提升用户专注力，请选用古典音乐作为背景。
+
+### 噪音与情绪
+
+除了节奏，噪声对情绪的影响也非常大。根据全国物业协会的数据显示，邻里噪音的投诉量占比超40%。高分贝的噪音会刺激中枢神经，让人产生压力，进而变得烦躁甚至愤怒。这也就很好地解释了为什么重金属音乐常常引发骚动和混乱。
+
+## 交互设计中的愉悦性设计
+
+谈完平面和声音的情感设计后，我们接着来看一下交互设计中的愉悦性设计。对于我们普通的产品而言，情感设计最应该聚焦在快乐上面，但很多人对这个词有很大的误解。
+
+当你听到愉悦性设计一词时，你会先想到什么？炫酷的动效？时尚的插画？还是简洁美观的外观设计？
+
+很多设计师容易刻板地把愉悦性理解为表层UI元素，但这并不是正确的理解。酷炫、时尚、美观这些词仁者见仁智者见智，本身就带有争议性。所以为了更好地阐述，我们先定义好愉悦性。
+
+**愉悦性是指用户与产品交互时，产生的任何积极的情感影响。**这种积极影响来自于本能层，也来自于行为层和反思层。
+
+愉悦性设计有两个层次，它们分别是浅层的愉悦性和深层的愉悦性设计。很多人第一时间想到的UI界面主要还是本能层的浅层愉悦性。
+
+而在功能性、可靠性，愉悦性的累计满足之后，产生的愉悦则是深层次的愉悦。深层次的愉悦性可以类比马斯洛的需求，在体验设计上属于高层次的情感累计。你可以参考下面这幅图，在需求金字塔中，如果没有好的功能性、可靠性、易用性，那么愉悦性也是根基不稳的。
+
+<img src="https://static001.geekbang.org/resource/image/6e/36/6ea18eb5d3f167e927b3fb6b297bda36.png" alt="">
+
+那么哪些交互愉悦性可以提升下层体验需求的呢？我下面举几个例子。
+
+### 改善功能性
+
+有些愉悦性设计是对某些功能体验很好的改善。你可以看看以下三个设计。
+
+第一个是**Google Doodle**的设计，它又叫Google涂鸦。这是为庆祝节日、纪念日、成就以及纪念杰出人物等，对Google首页商标所做的一种特殊临时变更。有些涂鸦是插画设计，有些是动画，甚至有些是可以挖彩蛋的互动小游戏。
+
+Google搜索引擎的首页设计一直以极简设计著称，但Google涂鸦绝对是给这个界面增加了非常多的亮色。下面我随便摘录了几个，你可以感受一下。
+
+<img src="https://static001.geekbang.org/resource/image/0a/48/0ac8f4eefd11a00921e304d98dfffa48.jpg" alt="">
+
+第二个是**404**的设计。在网页浏览过程中经常有异常情况发生，404就是很多人经常遇到的页面。不管404指向的原因是什么，但一个可爱的插图总比一个冰冷的404更能缓解尴尬，带来愉悦性的感受。
+
+<img src="https://static001.geekbang.org/resource/image/d8/8c/d8f1c8767093f9c039f181f28aa64c8c.jpg" alt="">
+
+第三个是**评价打分**的愉悦性设计。很多应用程序都会在用户使用过程中，要求用户根据自己的使用体验打分。很多产品设计师就是简单做了一个调查表，或者直接让用户从一星到五星打分来达到目的。这样就会使整个打分过程很枯燥，不能激励用户完成任务。
+
+而如果试着把打分和人的情绪联系起来，不同的分数去代表不同的情绪表达。通过这样的动画效果设计，会使评价打分这件小事更加引人入胜和有趣。
+
+<img src="https://static001.geekbang.org/resource/image/1f/70/1f8e5ca3939722aee579f9266b79e070.gif" alt="">
+
+### 改善可靠性和安全性
+
+很多应用在让用户输入密码的时候，就是一个简单的密码框。但有的网站在输入密码时，会出现吉祥物小猫头鹰双手捂眼的小动画。通过睁眼与遮眼的动画，巧妙地表达了用户名是明文输入，而密码为密文输入的含义。
+
+猫头鹰遮住眼睛，仿佛是在提醒用户输入密码时要注意防止他人偷窥，并且在视觉上给用户一种心理暗示，这款产品会充分尊重用户隐私并保障用户账户安全。
+
+<img src="https://static001.geekbang.org/resource/image/9e/0f/9e5c940c85a9e152cefa9cbc0dbe1b0f.gif" alt="">
+
+### 改善易用性
+
+很多产品在交互设计中，都融入了模拟人的自然情感反应的交互细节。比如当iOS用户输入不正确密码的时候，整个界面画面会抖动同时配合振动反馈。这种简单的反馈处理就是在模拟人说“不”时的摇头动作。
+
+<img src="https://static001.geekbang.org/resource/image/7f/a9/7fbe82b4647100dd639ab7abfe0799a9.gif" alt="">
+
+类似提升愉悦性的设计细节有很多。但是请你注意，这些愉悦性存在的价值并非单纯为了愉悦性，而是为了让功能性、可靠性和易用性变得更好。不要单纯追求表面的愉悦性，而要追求深层愉悦性的交互体验。
+
+## **总结**
+
+这节课讲到这也就接近尾声了，我来给你总结一下今天讲的要点。
+
+首先我们要理解情绪可以通过生理表征来进行测量和研究。自主神经系统的交感神经和副交感神经会因为情绪而引发一系列的生理变化，这些变化都可以通过仪器来进行测量。
+
+在平面设计中，人脸表情是普适性的，平面设计可以通过人脸表情运用，把观者带入到不同的情感状态。除了人脸，色彩也会有强烈的情感暗示。饱和度低的莫兰迪色会带给人平静，放松和舒缓的感觉。而饱和度高的配色会让人激动和兴奋。
+
+因为物理世界的隐喻，违背重力的构图和尖锐棱角的构图会给人带来紧张的情绪，要谨慎运用。
+
+对音乐而言，每分钟50~80节拍的音乐会提升创造力，古典音乐会提升专注力。高分贝的噪音会让人产生压力，进而产生烦躁甚至愤怒的情绪。
+
+在交互设计中的愉悦性设计，除了注意表层的愉悦性，你更应该把产品的功能性、可靠性和易用性结合起来，综合考虑去设计深层的愉悦性。
+
+为了方便你后续的学习，我总结了一个脑图，你可以长按保存下来，帮助你在这个知识点上有清晰系统的认知。
+
+<img src="https://static001.geekbang.org/resource/image/94/0e/94454e7f94ca0210a2f26146c467850e.png" alt="">
+
+## 作业
+
+最后，我给你留了一个小作业，你能运用今天学到的知识，找出在你的产品（或者你生活里喜欢的产品）中，哪些是浅层愉悦性设计，哪些是深层愉悦性设计吗？

极客时间专栏/geek/基于人因的用户体验设计课/基础篇/12 | 理解心流：如何达到专注的沉浸体验？.md

@@ -0,0 +1,142 @@
+<audio id="audio" title="12 | 理解心流：如何达到专注的沉浸体验？" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/42/93/42a5454aaedf0358463b320c46dyyc93.mp3"></audio>
+
+你好，我是Rocky。
+
+今天我们来谈谈心流，以及心流在体验设计中的运用。
+
+什么是心流呢？举个例子，当你坐在回家的地铁上，听郭德纲相声非常入神，导致坐过了站，又或者是为了追一部剧不知不觉直接通宵。**这种完全忽视了时间、空间，甚至自己的存在的体验就是心流体验。**当你从心流状态出来后，就会感觉恍如隔世一般。
+
+心流是注意力的高级阶段。指的是当人们沉浸在当下的某个任务时，全神贯注、全情投入、无法自拔并享受其中的一种精神状态。
+
+## 心流模型
+
+为了帮助你更好理解这个概念，我们一起来看一下经典的心流模型图。在心流模型中，人根据挑战程度和技能水平的差异性，可以有八种不同的体验。顺时针依次为：兴奋、心流、控制、放松、无聊、冷漠、烦恼和焦虑。其中右侧4种是正向体验，左边4种是负向体验。
+
+<img src="https://static001.geekbang.org/resource/image/bc/30/bce9ed20b2173dbc0fbd92189fafed30.png" alt="">
+
+如果要达到心流状态，需要很高的技能要求与挑战难度，并且二者还要达到某种匹配或者平衡。正因这么高的门槛，心流被誉为世界上最美妙的感受之一。
+
+- 如果技能要求高但是挑战性适中，你仅仅会感受到控制感。比如你开车过程就是这种体验。
+- 如果挑战难度够了但是你的技术水平适中，这时候你会处于一种兴奋状态中，因为你还在探索自己的技能水平上限。比如小孩子刚刚学会滑板。兴奋状态比控制状态，更容易激发心流的产生。
+- 如果挑战再次降低，远低于你的技能水平，你会感受到一种放松。比如你已经是一个滑板高手了，那么你在曾经练习滑板的空地上接着滑，你感受到的不是兴奋而是放松。
+- 如果挑战性不高，但是技能要求适中，一般人都不喜欢做，会让人觉得无聊。比如干家务、做饭。
+- 当然如果挑战适中，但技能水平很低，人会感觉烦恼。如果挑战难度再增加，人就会越发觉得焦虑。比如背单词这种枯燥体验。
+
+在这个图中，越远离中心，你的这种感觉就会越强烈（不管是哪种状态）。拿心流为例，在你的技能水平越来越高后，你会尝试更具挑战的任务，然后你的心流体验就会越发强烈。
+
+在用户体验领域，能让用户进入心流状态是非常困难的。但至少我们要注意，在上面那个图中，左边的四种体验在设计过程中我们要尽量避免，而右边的四种体验是我们可以去考虑的和努力争取的。
+
+游戏设计的情况会更复杂一些。游戏的做法有些欲擒故纵。为了提升用户对游戏的兴趣，增加粘性，一般游戏会走两条路径逼近心流体验，参见下图。
+
+- **恐怖类游戏**通常把挑战保持在远高于玩家能力可达到的水平，持续累积用户焦虑感，然后通过训练技能，跨过兴奋阶段达到心流体验。
+- **放松类游戏**会先将挑战的水平保持在用户能力水平以下，待用户轻松上手后慢慢培养控制感，逐步达到心流体验。
+
+<img src="https://static001.geekbang.org/resource/image/f9/d2/f97c34972e0463ac680de76fa91c92d2.png" alt="">
+
+那么一个优秀的设计要如何做到心流体验，或者帮助用户达到心流体验呢？客观地说，很难。毕竟心流体验需要主观和客观条件都具备才行。优秀的设计无非是去创造更容易达成心流体验的客观条件。
+
+那么达到心流状态的客观条件有哪些呢？以下几种条件非常重要：
+
+- 在一个特定时间段里，有一个清晰有效的目标。这个目标必须明确。满足SMART原则，也就是必须是明确的（Specific）、可衡量的（Measurable）、可实现的（Achievable）、现实的（Realistic）、有截止时间的（Time-bound）；
+- 在行动中，必须能够得到可测量、可感知到的及时反馈；
+- 提供探测人效率极限的机会和途径，让人有主控感；
+- 屏除干扰，有可以让人完全沉浸的环境营造。
+
+在希望用户能沉浸在心流体验的用户体验设计中，任何不利于以上4个客观条件的设计，都是要避免的。那么具体一些，如何让设计满足上述客观条件，从而辅助用户更容易达成心流体验呢？下面我给你提了五个设计建议，你可以参考一下。
+
+## 进度跟踪器
+
+首先，在交互上我们要告诉用户当下任务进展到哪里了。如果我们要用户在整个任务的体验中是沉浸连续的，那么就需要有进度显示。这里的进度跟踪并不是指需要花费非常多时间的间断性查询任务（如快递寄送查询之类），而是沉浸式任务的进度跟踪。
+
+进度跟踪应该告知用户：
+
+<li>
+他们当下完成了什么子任务？
+</li>
+<li>
+目前的进展，用户在整个大的任务中的当前进展？
+</li>
+<li>
+还需要哪些步骤？还需要多久？
+</li>
+
+不仅仅是游戏，有很多交互体验任务需要进度跟踪的。比如在线订购、复杂表单填写、复杂系统安装、应用和硬件设备开机首次使用的导引等等。下图是一个复杂表单填写的进度跟踪设计。
+
+<img src="https://static001.geekbang.org/resource/image/7d/b7/7d5792d8bcdf19f6e74574a3ee9f00b7.png" alt="">
+
+在进度跟踪设计中，不要欺骗用户。你要尤其注意以下两点：
+
+- 不要出现嵌套进度，这样会让用户感到进度跟踪的混乱；
+- 剩余时间要符合真实的执行周期。不要出现一个任务很快完成99%，但剩下的1%却要占用超长时间的情况，这样用户会有被欺骗的挫败感。
+
+## 让用户选择，但不对用户提出问题
+
+第二，在沉浸式交互过程中，要减少提问对话式的交互。减少用户被迫做决策的机会。
+
+我举一个非常沉浸式的体验场景：三国里的三英战吕布。四方都沉浸在对战的心流体验中，刀光剑影，在马上打的近百回合，难解难分，这场战斗才会传为佳话。
+
+我们来设想一下，如果三英战吕布像回合制游戏设计的那样，英雄们在每一回合战斗时都有个弹窗提醒，让英雄选择是是攻击还是躲避，如果是攻击的话还需要选择攻击目标以及招数等等。这样的话还会有沉浸式的精彩打斗吗？
+
+所以说不要在心流体验过程中出现对话框。提供的选择很重要，但是实现方式并不是对话框，而是如让用户主动来选择。**让必要的选择近在咫尺，同时提供快捷键供专家用户使用。**不要让用户在多个选择中简单去寻找，不然用户的专注力一定会被破坏。
+
+设计师的艺术创作是一种典型的心流体验。很多设计工具都提供工具栏，让用户自己随手就可以用各种小工具来操作。Photoshop不仅仅让常用的快捷工具方便获得，而且还隐藏掉一部分不常用的小工具以提升画布的尺寸，让设计师更容易沉浸在设计创作中。
+
+<img src="https://static001.geekbang.org/resource/image/1a/0c/1ac3308b18d1d13facb616a5356c980c.jpg" alt="">
+
+## 提供不打扰式的反馈
+
+第三，提供不打扰式的反馈。当用户交互时候，清晰地显示操作的状态和效果非常重要。这些交互信息必须容易看到且容易理解，但不能干扰或者阻止当前的动作，不打断正常的活动流和交互。
+
+很多工具软件都有状态、导航栏。画板类工具比如Photoshop，还有标尺、缩略图、图层信息，在你放大画布图片的时候，会立即出现滚动条来暗示当前的屏幕聚焦画布的位置。这些都是很好的不打扰式的状态反馈指示。当用户想起看，自然会看一眼，如果不想看，就会忽略它。下图我用红框圈起来的部分就是一些不干扰式状态反馈。
+
+<img src="https://static001.geekbang.org/resource/image/61/3b/61c32ec92081yybed4b1dc9268e1073b.jpg" alt="">
+
+很多游戏中都有类似游戏角色血量的设计。比较普通的设计就是有一个血量的状态条来显示当前还剩下多少血量，类似水笔的笔芯。有没有更好的沉浸式血量设计呢？
+
+游戏《死亡空间》将关键战斗状态反馈融于游戏角色画面中（而不是浮现在屏幕上）。角色血量就显示在背后的生命系统数据槽中，而基于武器的数据则依附于武器本身。这种更为沉浸式的体验，已经把非打扰式状态反馈做到了极致。
+
+<img src="https://static001.geekbang.org/resource/image/d9/f9/d94d25a295736ddc092e69277a6465f9.jpg" alt="">
+
+## 异常出现的快速修复
+
+第四，要考虑到异常出现的快速修复，毕竟再好的软件也很难做到没有Bug。心流体验的任务都有着较高挑战性和技能要求。对设计师、作家而言，任何一个创作过程都是宝贵的心流体验。如果不提供自动保存，一旦出现异常情况（比如断电、电脑死机等）导致整个创作过程丢失，损失是惨痛的。这也是用户最为抓狂的糟糕体验。
+
+我憎恨word之类的软件，因为它们的自动保存做得很差。每次关掉word，都要蹦出一个对话框问我是否需要保存，如果不保留将临时提供文件最新副本云云。而真正到了自动恢复的时候，竟然还要提醒我要不要恢复到自动保存。
+
+因为word有几次恢复后反而让我丢掉关键信息的糟糕体验，我在恢复还是放弃恢复之间经常会纠结很久。微软这种弹窗交互明显就是甩锅的设计，完全没有照顾到心流体验。
+
+<img src="https://static001.geekbang.org/resource/image/c2/cf/c22d536e424e5606913c572cf53f99cf.jpg" alt="">
+
+这里，我要感谢石墨在线文档编辑软件的自动保存。石墨完全是后台默默做着自动保存，即便电脑异常退出，重新打开后也不会出现询问是否恢复到自动保存的弹窗。我在使用石墨的过程中，也确实没有再被打断过创作灵感。
+
+## 自动屏蔽不重要的打扰
+
+最后，在沉浸式应用中，交互要帮助用户自动屏蔽不重要的干扰。用户沉浸在心流体验时，任何外部的干扰都要做到最小化影响。
+
+最令沉浸在游戏中的用户崩溃的事情莫过于在通关关键时刻，猝不及防给你来一个电话，或者是一不小心误触到了某个通知消息，眼睁睁看着游戏界面被切出去导致游戏中断。
+
+所以手机厂商纷纷推出了游戏模式/游戏助手，通过通知勿扰、最小打扰式来电胶囊显示、小窗口回复微信等手段，带给用户更好的沉浸式游戏体验。你可以参考下图里的华为游戏助手，通过这样的设计，如果你在吃鸡游戏中收到微信，就能快速回复并回到游戏中。
+
+<img src="https://static001.geekbang.org/resource/image/0f/ed/0f2ca48fae0e8a39f9f32327453512ed.gif" alt="">
+
+## 总结
+
+好了，讲到这里，今天的内容也就基本结束了。最后我来给你总结一下今天讲的要点。
+
+心流是注意力的高级阶段。心流是指当人们沉浸在当下的某个任务时，全神贯注、全情投入并享受其中而体验到的一种精神状态。在心流模型中，人根据挑战程度和技能水平的差异性，可以有兴奋、心流、控制、放松、无聊、冷漠、烦恼和焦虑八种不同的体验。
+
+如果要达到心流状态，需要很高的技能要求与挑战难度，并且二者还要达到某种匹配或者平衡。在设计中我们要尽量避免用户感到无聊、冷漠、烦恼、焦虑。控制、放松、兴奋和心流的状态是我们可以去考虑的和努力争取的。
+
+游戏的体验会分为两种路径让人达到心流状态，一个始于焦虑，一个始于放松。
+
+满足心流的客观条件是：目标清晰，及时反馈和屏蔽干扰。要达到这样的条件，在体验设计中要考虑以下几点：
+
+- 提供清晰的进度跟踪器；
+- 通过工具栏或快捷栏方式提供选择，而非对话框；
+- 提供不打扰式的状态栏、导航栏类似的反馈；
+- 自动保存，异常出现快速修复，不要给用户弹窗决策；
+- 在沉浸体验过程中，自动屏蔽不重要的打扰。
+
+## 作业
+
+最后，我给你留了一个小作业，从今天我讲的内容，结合你当下从事的设计，哪些点考虑到了减少对人心流的干扰呢？你最近一次进入心流状态是因为什么？

极客时间专栏/geek/基于人因的用户体验设计课/基础篇/13 | 认识人的思维缺陷：不理性的我们.md

@@ -0,0 +1,242 @@
+<audio id="audio" title="13 | 认识人的思维缺陷：不理性的我们" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/7c/16/7cc39f59de06ab84b49e57e3f7df1116.mp3"></audio>
+
+你好，我是Rocky。
+
+今天我们来谈谈人类的思维缺陷，以及在体验设计中我们如何去应对思维缺陷。
+
+大脑是人体最聪明的器官，它可以进行复杂的思考，也可以进行理性的计算。然而它并不是完美无缺的，也存在无法克服的缺陷。
+
+心理学家认为，大脑存在着两个系统，第一个系统负责直觉和本能，第二个系统负责理性思考。你可以参考下图的卡尼曼双系统思维模型。
+
+<img src="https://static001.geekbang.org/resource/image/f3/46/f34020c2021ca9cb9e90ce197dd7ea46.png" alt="">
+
+不幸的是，由于系统二会消耗过多能量，不利于人类生存，我们大部分思考和决策都由系统一完成。而系统一易受情感、经验和习惯支配，它是非理性、本能的，并且容易冲动。所以我们的第一个系统存在着非常多的思维缺陷。
+
+**系统一的思维缺陷有两个主要表现，一是人经常做出不理智的决策，二是人会经常出错。**我们先来谈谈前者。
+
+## 不理性的决策
+
+人做决策之所以不理智，有一部分是进化的原因。理智的决策会耗费很多时间和精力。而原始人必须要持续审视他们周围的环境，快速做出决策，判断什么是安全的，什么是危险的。如果决策慢，可能就会被野兽吃掉了。
+
+即便是到了现代社会，快速的生活节奏也不允许我们审慎比较、各种逻辑推理。时间成本和财力都不允许我们把什么问题都分析得一清二楚之后才做决策。我们大部分决策都是在信息不完整情况下快速完成的。毕竟决策慢了，机会可能稍纵即逝。
+
+### 认知偏见
+
+这种快速高效地决策，必然意味着我们会选择性忽略一些信息，或是自发地对信息进行脑补，甚至对某些逻辑进行假设。这样的认知模式导致我们表现为各种非理性的认知偏见（cognitive bias）。
+
+<img src="https://static001.geekbang.org/resource/image/bd/45/bdfa5518ef958efb2ec374a93664e945.png" alt="">
+
+上图是迄今为止被心理学家们总结提炼出来的认知偏见列表。
+
+不要觉得这个图密密麻麻地看着头疼，虽然说这个图里列了188个认知偏见，但这些偏见基本都是由四种原因造成的。它们分别为：
+
+- **糟糕的记忆力**（what should we remenber?）；
+- **信息过载**（Too much information）；
+- **意义不明确**（Not enough meaning）；
+- **需要快速反应**（Need to act fast）。
+
+所以下面我重点给你介绍几种在生活中，你经常会遇到的决策中的认知偏见，以及在体验设计中如何注意。
+
+#### 锚定效应
+
+先谈一下锚定效应。锚定效应也叫聚焦效应，指人们在对某人某事做出判断时，容易受第一印象或参考信息支配，思维就像沉入海底的锚一样被固定在某个点。
+
+商家经常利用这点来引导消费者消费。比如先提高价格然后再打折，或者在某件商品附近放上更昂贵的商品。这样一来，原先的商品就会显得比较便宜。
+
+在合同谈判中不管是哪一方，第一次报价很重要。后续的价格基本围绕第一次报价进行波动，这就是价格之锚。
+
+在体验设计中，当你希望影响用户决策的时候，往往需要做一些技巧上的考虑。《经济学家周刊》杂志曾经登了一个广告：
+
+- 如果订纸质版，一年190美金；
+- 如果订电子版加纸质版，一年也是190美金；
+- 如果只订电子版一年152美金。
+
+结果有84%的人选择了第二个选项。
+
+那个看似没人选的190美金纸质版就是一个锚定值，在决策心理上会引导你倾向于选择纸质版加电子版一起预定。
+
+<img src="https://static001.geekbang.org/resource/image/18/35/18de5d492eab36393e36d8d667c3ae35.png" alt="">
+
+#### 默认效应
+
+我们接下来看看默认效应。**当在多个选项中选择一个时，人总是倾向于使用默认选项，或者推荐选项。**特别是相对复杂的决策，人会更加依赖于默认选项。
+
+所以对于复杂的设置或选择，一定要提供默认值或者默认配置，这样会大幅度减轻认知负担。提供默认值有几个注意事项：
+
+- 不要重复询问系统已经知道的信息。比如已经让用户输入了身份证信息，就不要再让用户输入生日，应该直接用系统自动填写生日表单；
+- 不要因为私利而利用默认选项来推销一些订阅、套餐，或者侵权用户隐私数据。否则这种行为一旦被用户知晓，会迅速失去用户信赖；
+- 对敏感信息而言（比如性别、国籍、党派、民族等信息），不要使用默认值。如果预填充这些字段，很容易使用户感到不舒服甚至愤怒；
+- 和地理有关的应用默认值要善用位置信息，比如区号、手机国家码等等；
+- 默认值可以和前面的锚定效应结合，给用户推荐默认选项。
+
+#### 框架效应
+
+第三个认知偏见是框架效应（Framing effect）：一个问题两种在逻辑意义上相似的说法，却会导致不同的决策判断。
+
+比如对下图里同样一个事实来说，左边罐子写的是20%的脂肪含量，右边的罐子写的是80%不含脂肪。尽管描述的是同一件事，但是显然右边的罐子会更吸引人。
+
+<img src="https://static001.geekbang.org/resource/image/ed/19/ed3f7381c9ce973d216360470d444719.png" alt="">
+
+想象一下，医生告诉绝症患者目前有一种生存率能达到90%的治疗方案，感觉还很乐观对吧？但如果医生说这种治疗方案的死亡率是10%，是不是听起来就很令人糟心了？
+
+正是因为人的不理性，所以医生一定会选择前一种措辞。
+
+在现代语言学里有很多类似框架效应的描述。比如把衰退或者经济下行说成负增长，缓慢下行说成是软着陆，把失业说成待业或者再就业。不同表述对人的心理影响完全不同。
+
+#### 宜家效应
+
+我要给你介绍的最后一个认知偏见是宜家效应。宜家效应是指消费者会不合理地高估由自己组装产品的价值。消费者付出的劳动越多，就越容易高估其价值。
+
+**利用宜家效应提高用户粘性的核心是创造低投入、高回报、高贡献价值的任务，保证用户能够在完成任务的基础上贡献自己的价值。**
+
+下面的开言英语软件就很好地运用了宜家效应。它的做法是让用户制定学习计划并通过学习打卡的方式遵守，并在达标后给予奖学金计划激励，以此来提升用户对该软件的使用粘性。
+
+<img src="https://static001.geekbang.org/resource/image/da/cd/dab1e85c764bd2321c854ba205cd71cd.jpg" alt="">
+
+最后，我还是想强调一句：尽管产品或者设计团队可以通过洞察人的决策偏见、人性，从而得到很大的发挥空间，但基本原则我们必须把持，那就是不能用来做对用户或者消费者有害的事情，这个是底线。
+
+谈完非理性的决策后，我们再看看在设计中，我们如何应对人经常犯错误的事实。
+
+## 人经常犯错
+
+在之前的课程里，我们提到过错觉，错觉是感官层面的错误。我们也谈过糟糕的记忆、经常走神的注意力也会让我们犯错。刚刚讲的不理性决策方面，人类也是经常出错的。除此之外，压力、情绪也会让我们更容易犯错。
+
+### 耶基斯-多德森定律
+
+不过压力和犯错之间的关系并不是简单的线性关系。压力研究显示，少许压力可以帮助人们完成任务，因为它可以使人集中注意力，产生积极效应。
+
+然而过多的压力会令人表现糟糕，出现消极效应。消极效应包括注意力不集中、记忆困难、解决问题能力下降等等，这在心理学上叫做“隧道效应”。
+
+当我们处于隧道效应时，会不停地做同一件事（即使并不奏效，也会不断尝试），并且越来越烦躁。我们的情绪会进入到一种冲动、判断力差、波动的状态，而且频频犯错会促进这种恶性循环。
+
+耶基斯-多德森定律很好地描述了这种压力水平和表现关系，你可以参考一下下面这张图。
+
+<img src="https://static001.geekbang.org/resource/image/9a/08/9aca416e67aff60ff5fcf5d3b703aa08.png" alt="">
+
+对不同的任务难度来说，人达到最佳表现所需要的压力水平不同。困难的任务只需要较小的压力就能达到最高任务完成效率，但是简单的任务就需要较高的压力水平（或者叫唤醒刺激）。
+
+对应到体验设计上，如果在一个复杂的交互任务中，你要尽可能地简化色彩、拟物化设计、音效，或者炫酷的动效，以此来降低用户的认知负担和压力水平，换句话说就是提升信噪比。而对于一个简单的交互任务来说，你可以适当增加一些酷炫的视觉设计来提升唤醒刺激水平。
+
+谈完压力和表现的关系，我们再来看看人犯错的种类有哪些。
+
+### 错误的种类
+
+我们先来看看第一种错误。如果一个人拨打电话给自己的情人，结果却误拨给了自己的老婆，这个错误叫**疏忽**。有时也被称为“行为错误”或者“执行错误”。疏忽常常因为人习惯思维的改变或行为被打断而发生，是自动、无意识下产生的。
+
+当一个医生看错了病，进而对病人开错了药，这样的行为就叫**过失**。有时被称为“意图错误”或“计划错误”。过失在有意识的心智活动过程下产生，造成过失的原因通常是因为压力环境或者决策偏见。
+
+第三种错误是**明知故犯**。用户故意违反规范进行操作，又叫违反性错误。
+
+第四种错误和用户完全无关，是**产品系统错误**。
+
+我们做用户体验设计，无非是减少上述错误的发生，或者在上述错误发生后，降低错误造成的影响。
+
+## 容错性设计
+
+表面上来看，大部分意外都是由所谓的人为疏忽引起，但其实大多数错误都可以通过设计避免或者缓解。所以一个好的设计，一定要在容错性方面做足工作。
+
+好的容错性设计应该至少考虑这7个方面：功能可见性设计、界面约束、清晰的反馈、反悔机制设计、减少负担、错误恢复以及提供帮助和引导。
+
+### 功能可见性
+
+功能可见性指的是**交互与人们在自然感官的预期相符合**，那么这种设计就是自然的设计，会被认为容易操作。如果我们发现交互和我们的预期不符或者相抵触，那么我们就会认为这个东西很难操作。
+
+比如为什么按钮在拟物化时代会设计成有立体感，在后来的扁平化时代依然保留阴影、材质，又或者保留按钮的形状。这都是为了提醒用户这些按钮是可以点击的。如下图，左边的按钮最不符合功能可见性。
+
+<img src="https://static001.geekbang.org/resource/image/11/e9/11fc338c0b00690c80d7dea128d74de9.png" alt="">
+
+功能可见性不仅仅局限在平面设计，在动效设计中也经常用到。符合物理规律的动效会具备更好的功能可见性。
+
+### 界面约束
+
+第二个容错性设计应该考虑的方面是界面约束。约束限制了一个系统中可能使用的动作，或者动作可能交互的范围。好的约束设计会大幅度降低疏忽的发生。
+
+有些界面约束是实体物理约束，比如交互的方向路径约束、交互尺寸约束。只允许上滑操作就属于方向路径约束。如果你只允许屏幕底部边缘上滑，而且要上滑到一定距离后才会触发返回的话，这就属于交互尺寸约束。
+
+<img src="https://static001.geekbang.org/resource/image/92/72/9237518f55389f77133032f5fb359072.gif" alt="">
+
+也有些约束用的是象征、惯性和映射的手法，属于心理层面的界面约束。比如用警告标代表禁止操作。在进度条里，进度标越靠近右侧，标示着任务越接近完成。而缩略图就属于大图的一种映射。
+
+一般在设计上我们用实体约束去降低操作灵敏度，使不符合要求的输入减到最少，减少或者避免危险动作。利用心理约束，有效增进设计的清晰度和人们的使用直觉，以减少错误的发生。
+
+### 清晰的反馈
+
+第三个是清晰的反馈。反馈就是用户做了某项操作之后应用系统给用户的一个响应。在人机交互的过程中，用户希望每一步都看到清晰、及时的显示操作反馈。这样用户才会知道自己所处的状态，否则用户就会觉得系统反应很迟钝。
+
+反馈分为四种，分别是结果反馈、状态反馈、操作反馈以及交互过渡反馈。上面那个系统导航返回手势的动效，就属于交互过渡反馈。
+
+信息反馈固然重要，但我们也要避免过度的信息反馈，过多的反馈只会画蛇添足。同时，尤其注意不要有很重的错误信息反馈，这样会增加用户的挫败感。
+
+### 反悔机制
+
+第四个是反悔机制设计。为了避免用户的误用和误击，复杂或者多步骤的系统应该提供撤销和重做功能，让用户有反悔的机会。毕竟生活中能反悔的时候可不多，让用户在交互系统中能体验时间倒流、体验重新来过，这会给用户一种当上帝般的满足感。
+
+Office、Adobe的工具类软件都有反悔机制，这个很赞。Photoshop在Windows版本反悔步骤有局限，但在Mac版本里面就没有局限。所以从反悔机制的设计上来说，在Mac上用Photoshop的体验要比Windows的体验好。下图编辑菜单最顶部的操作就是反悔操作。
+
+<img src="https://static001.geekbang.org/resource/image/15/de/15de594d2312328f7af9d726ee61f9de.jpg" alt="">
+
+### 减少负担
+
+在做容错性设计的时候，我们还需要考虑减少负担。减小负担就是通过降低环境带来的各种干扰，从而减轻人的压力和认知负担，这样可以把过失降到最低。要做到减少负担，你可以从以下几点入手：
+
+- 尽可能增加让人一眼就能看到的重要指示和控制装置；
+- 通过合理的界面信息密度，简洁清晰的图形、文案，默认和推荐选项等，尽可能减少用户的记忆负担，降低决策复杂度；
+- 让用户单次只需执行唯一操作，减少不必要的操作步骤；
+- 控制用户输入的信息量，在帮助用户输入的同时也帮助用户记忆输入的内容。
+
+### 错误恢复
+
+接下来是错误恢复。错误恢复就是系统内部有一个实时同步和备份的机制，能让系统异常出现后，提供除了前面提到的反悔机制外，还能进一步进行系统错误恢复。这部分机制属于容灾的设计，比较偏技术，你现在简单了解一下即可。
+
+### 帮助和引导
+
+最后一个是帮助和引导。帮助和引导一般用于新手上路，比如用户首次使用产品，首次用到某个功能或者进入某个场景，或者用户主动点击寻求帮助。
+
+首次使用的关键引导可以用引导页方式，引导页基本上由3~5个页面组成。
+
+引导页可以在用户使用产品前，先给用户营造好产品的基调和氛围，宣传产品功能和亮点或告知用户最核心的操作方式。引导页的内容你一定要仔细挑选，保证能带给用户新鲜感和吸引他们的注意力。否则引导页对用户来说反而是种干扰，他们只会直接选择快速划过。
+
+你也可以使用蒙层引导，让用户以最短路径完整体验一遍操作流程。因为这种约束和限制比较大，对于已经熟悉操作的用户会产生厌烦情绪。下图上半部分是引导页的示例，下半部分是蒙层引导的示例，你可以参考一下。
+
+<img src="https://static001.geekbang.org/resource/image/d8/ee/d88ccc3fa1605a35c4d17184153a46ee.jpg" alt="">
+
+对于某些熟悉使用软件的用户，当他们遇到偶尔触发的新功能，或者系统自动判断用户可以用更合适的交互来达到相同的结果的时候，你可以设计气泡提示引导。这种引导对用户的干扰最小，但指向性非常强。下图就是气泡提示的几个案例。
+
+<img src="https://static001.geekbang.org/resource/image/67/d7/67022yy677ef435d965a5729ccc101d7.png" alt="">
+
+对于用户主动寻找的帮助，视频动画或者图形的引导方式要好过文字的说明。但这种帮助信息最好控制在10秒以内，不然传递的信息量太大，会导致用户失去耐心或干脆什么也没记住。
+
+## **总结**
+
+最后，我来给你总结一下这节课的要点。
+
+人脑分为直觉决策系统和理性计算系统。前者经常处于主导，是导致思维缺陷的主要原因。
+
+思维缺陷主要表现为不理性决策和经常犯错。
+
+不理性决策通过认知偏见来体现。迄今为止总结出来的认知偏见有188个，我这节课主要和你介绍了下面几个常见的体验设计相关认知偏见：
+
+- **锚定效应。**人们在对某人某事做出判断时，容易受第一印象或参考信息支配。影响用户决策的关键是锚定一个参考值；
+- **默认效应。**相对复杂的决策，人会更加依赖于默认选项；
+- **框架效应****。**同一个问题在两种逻辑意义上相似的说法，可能导致不同的决策判断。我们应该采用更容易被用户接受的描述；
+- **宜家效应。**可以通过创造低投入、高回报、高贡献价值的任务，来提高用户粘性。
+
+感官、记忆力、注意力和不理性决策都会引发错误。反U形的耶基斯-多德森定律直观地表达了压力对错误的影响。适当的压力可以让人保持较高的绩效表现。任务越复杂，达到最佳表现需要的压力刺激越低。也就是说复杂交互要保持简洁和高信噪比的设计。
+
+错误分为疏忽、过失、明知故犯和系统错误。体验设计要从多个层面考虑容错性设计，最大程度减少错误发生。你可以通过以下方面去思考容错性设计：
+
+- 功能可见性提供符合预期、更加自然的交互元素；
+- 在界面上增加实体约束和心理约束，限定用户出错的范围；
+- 通过清晰的结果、状态、操作和过渡反馈来指引用户；
+- 通过反悔机制来提供用户对复杂任务的掌控感；
+- 减少记忆负担和精简操作步骤；
+- 提供错误恢复机制；
+- 对用户首次使用、使用过程中和主动寻求帮助时，分别提供引导页（蒙层引导）、气泡提示和视频帮助提醒的方式。
+
+今天的内容比较多，我总结了一个脑图，你可以长按保存下来，帮助你在这个知识点上有清晰系统的认知。
+
+<img src="https://static001.geekbang.org/resource/image/12/07/123c56c85d0522ab637897133ae84107.png" alt="">
+
+## 作业
+
+最后，我给你留了一个小作业。对于认知偏见，除了今天提到的认知偏见，你还知道哪些认知偏见呢？对照下今天这节课，想想你最常在生活里犯的认知偏见是什么，以及你在设计中会去怎么应对这些认知偏见？

极客时间专栏/geek/基于人因的用户体验设计课/基础篇/14 | 理解触屏交互：方寸触屏大乾坤.md

@@ -0,0 +1,178 @@
+<audio id="audio" title="14 | 理解触屏交互：方寸触屏大乾坤" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/3a/y5/3aae9aa17f7d4a857caa403385ea9yy5.mp3"></audio>
+
+你好，我是Rocky。今天我们来谈谈触屏交互的人因学。
+
+从乔帮主第一次发布苹果手机到现在已经14年了，但触屏交互并未发生什么革命性的变革。目前的主流依然是电容技术触摸屏CTP（Capacity Touch Panel）。
+
+这种交互为什么生命力顽强？从人因学的角度来说，滑动意味着抚摸，触屏意味着机器和人的亲密接触响应式交互。
+
+这门课讲到现在，我已经提了很多次自然交互。在当代社会，没有任何一种交互比触屏交互更加自然，并且被如此广泛地应用了。甚至你可能都会提出质疑，现在我还需要学习触屏交互的人因基础吗？
+
+## 理想的按钮尺寸
+
+我先问你一个问题：你知道在移动触摸屏设备上，一个应用按钮的大小多少是合理的？
+
+如果你查找苹果的交互规范，你会找到最小要44**44dp，折算为7mm。而安卓定义的最小尺寸是48**48dp，折算为7.4mm。如果你查询ISO标准的话，你会看到最小尺寸是6.4mm。看到这么多标准，你是不是会有些懵？
+
+如果你不了解人因，就只能盲目跟随这些标准。在理解这个问题之前，我们先看一下人手指的尺寸。人的拇指宽度是11~22mm，食指宽度是9~22mm。你会发现不管是苹果、安卓还是ISO国际标准，定义的最小按钮都比手指宽度要小很多，是标准定义错了吗？
+
+从下面这个图你能看得比较清楚。由于人的指腹不是平面的，所以我们手指按压在屏幕上的大小远小于手指宽度（差不多只有手指宽度的一半）。这也就解释了为什么按钮的最小尺寸远小于手指的宽度。
+
+<img src="https://static001.geekbang.org/resource/image/67/95/67a46eb3b311a20713ace945ab781395.png" alt="">
+
+以上的信息其实也给按钮和其他控件之间的间距提出了要求。因为有的时候用户会用力按压屏幕，按压的面积会变大（但肯定还是小于手指的宽度），所以安全的间距要用手指的宽度减去按钮的宽度。
+
+如果按钮是7mm，以最大手指22mm来计算，这个数值就是7.5mm，这是一个非常安全的距离。而如果我们以9mm的小手指来计算，这个数值就是1mm，这就是最小的间距要求（约等于安卓定义的最小间距8dp）。如果你觉得这段描述理解起来有些费劲，你可以参考下面这个图。
+
+<img src="https://static001.geekbang.org/resource/image/b5/24/b5b5a1ab3c5f0c2f4b3679f45f1cfd24.png" alt="">
+
+所以说按钮和其他交互控件的间距并不是和按钮大小成正比，而是和手指宽度相关。
+
+好了，学到这儿，如果你之前没有从以上角度仔细思考过这个问题，那么我觉得你很有必要认真学学这节课的余下内容了。
+
+## 握持对移动设备交互的影响
+
+在系统理解触屏交互之前，让我们先看一下人是如何握持移动设备的。
+
+如果是手机竖屏状况握持，基本上会是以下的统计情况：
+
+- 单手握持占59%，其中靠拇指交互的占49%，靠另一只手食指交互的占10%；
+- 双手握持占41%，其中仅依靠单拇指交互占26%，而双手拇指都参与交互的占了15%。
+
+从这个统计中我们可以轻易总结出规律，那就是有90%的交互式依赖于拇指完成，其中75%的情况是单拇指操作。
+
+<img src="https://static001.geekbang.org/resource/image/22/c7/22449966ec94a8bd7d35758627b1b2c7.png" alt="">
+
+### 易操作区域
+
+不同的交互手势意味着有不同的交互适宜区域，而且这个差别还是蛮大的。你可以参考下图。绿色区域是容易自然交互的区域，橘红色是努力可达到的费力交互区域，而红色是很难达到的交互盲区。不同人去握持同一款手机，适宜交互的区域也会有些许不同。
+
+<img src="https://static001.geekbang.org/resource/image/b2/a9/b2528775e730b5f6f4c8df5bc01f71a9.png" alt="">
+
+单手握持的情况更为复杂。以前手机屏幕较小的时候，我们握持的时候手指还能够到屏幕上半部分。但是随着手机屏幕越来越大，人的拇指基本上只能在屏幕下半部分操作了。如果我们要操作手机上半部分的屏幕，一般要借助于另外一只手。
+
+单手握持的情况也分为左手握持和右手握持。有趣的现象是左撇子更偏重于右手握持，而右撇子更偏重于左手握持。下图是某调研机构做的研究。
+
+<img src="https://static001.geekbang.org/resource/image/b9/56/b9262f9e2ebb70bd10df35b606444a56.png" alt="">
+
+人们之所以有这种倾向主要是两个原因造成。
+
+首先因为握持手机的动作并不复杂，大多数人会一边右手进行一些相对复杂的动作（比如用筷子吃饭），另外一边腾出左手来握持手机。考虑单手握持易交互区域的局限，复杂交互还是要依赖于右手的食指。
+
+其次人有主视眼。大脑会优先采用主视眼信息，另一个眼睛主要用来扫视。多数人以左眼为主视眼，而左手握持更容易方便看左眼手机。
+
+### 单手模式
+
+提到单手握持，那么必然要提到单手模式。手机厂家考虑到很多人依然有单手操作屏幕上方的需求，于是有了单手模式的诞生。不同厂家有不同的处理方式，下图左边是华为的单手模式，右边是苹果的单手模式，你可以对比一下（华为单手模式的调出方式是底边缘横滑调出，苹果是底部导航条向下滑动调出）。
+
+<img src="https://static001.geekbang.org/resource/image/6d/16/6d8ca9924e0d80438ed0365a45982f16.jpg" alt="">
+
+从人因方面来看，其实华为的交互更为理想。华为这种让整体交互区域下移的做法，考虑到了在屏幕宽的情况下拇指短的用户会操作不便的情况。而且从单手模式的调出方式上来说，底部横滑也比向下滑要容易操作，因为向下滑动的距离实在太短。
+
+### 内容在上，操作在下
+
+不管是哪只手握持，我们在界面布局设计的时候，都要兼顾考虑两种情况。所以对自然交互区域考虑的真实界面设计，会更倾向于下图的第三种。你可以从图中很清晰地看到一个信息，那就是上半部分内容，下半部分操作。
+
+<img src="https://static001.geekbang.org/resource/image/6f/91/6f1378a155ca623aa2a087486a665191.png" alt="">
+
+三星的OneUI最早清晰定义了“内容在上，操作在下”的规范并严格遵循。你可以参考下图：
+
+<img src="https://static001.geekbang.org/resource/image/68/37/6831f219906b05d36dcf4d3c4cb23f37.jpg" alt="">
+
+上半部分1/3的区域定义为浏览区，是不需要交互的区域（比如大标题会放在这个区域）。而下半部分2/3的区域是需要密集交互的区域（功能按钮、滑动列表、对话框和导航等会放在这个区域）。
+
+如果你负责一个App的设计，而且主要的应用模式是竖屏握持，那你就要注意了，**常用的交互控件要放在靠下并且用户拇指可以方便够到的位置。**
+
+### 侧边交互
+
+在全面屏普及之前，我们几个华为设计团队的核心成员曾讨论过基于人的屏幕握持，全面屏的导航到底应该怎样做才能更符合用户的体验。是否一定要从底部开始滑动操作？
+
+从上面左右手兼顾的易操作区域图中，你也许已经注意到了，其实底边缘操作是需要拇指费力的。在单手握持的方式下，拇指在屏幕上操作主要需要三个关节的参与。
+
+你可以参考一下下面这张图。
+
+- 第一拇指关节最大弯曲可达90度，在操作靠近握持侧屏幕使用；
+- 第二拇指关节最大弯曲也可以达到90度，可以操作更远的范围；
+- 腕掌关节能够进行较大程度的屈伸和收展，能够完成对掌的运动，操作范围更广泛。
+
+<img src="https://static001.geekbang.org/resource/image/8e/39/8e205a06abf12bdf12360ayycb611839.png" alt="">
+
+如果交互区域设计不合理导致我们过度使用腕掌关节，会造成这个关节处的腱鞘炎，进而引发不适、肿胀甚至疼痛。
+
+如何能缓解拇指移动的距离呢？有无侧边交互的可能？
+
+在华为的全面屏导航里，为了避免人的大拇指关节和肌肉过度疲劳进而导致腱鞘炎发生，特意设计了从侧边缘内滑返回，以及继续内滑停顿会调出侧边栏。
+
+<img src="https://static001.geekbang.org/resource/image/6c/30/6ce6f2f73340bec5307f8993cc52c130.jpg" alt="">
+
+### 更大屏幕的易操作区域
+
+当然如果你考虑的是更大的屏幕交互（比如平板），那么握持的方式以及易操作区域将完全不同。你可以参考下图，从操作区中你可以看出，平板的关键交互要靠近屏幕边缘而不是在屏幕中间，这个和智能手机的设计理念差别很大。
+
+<img src="https://static001.geekbang.org/resource/image/47/ac/4789ec8a58734ebe81c6ebd6e9f0c5ac.jpg" alt="">
+
+很多应用在设计Pad布局时，简单等比放大在手机上的界面布局，完全没有考虑到人在Pad上的易操作区的变化，于是设计就变成了不在乎用户交互体验的偷懒设计。
+
+比如应用导航栏的设计。在手机上导航栏需要考虑易于拇指交互，所以得放在底部。但是在Pad的应用上，导航栏应该放在更适合交互的侧边。你可以参考下图印象笔记的应用设计。
+
+<img src="https://static001.geekbang.org/resource/image/16/5e/169b2e6d5027e1660e8ca3eb0e290e5e.jpg" alt="">
+
+## 触屏交互的手势
+
+前面我们聊了握持对移动设备交互的影响，但真正的交互还是要靠手指对屏幕的操作。屏幕的交互手势有很多种，自从触摸屏诞生之后，有很多人尝试去定义这些操作规范。下图是其中一种定义方式，你可以简单参考一下。
+
+<img src="https://static001.geekbang.org/resource/image/57/4b/57ed52601fbcde64ac2348b93aea7a4b.png" alt="">
+
+别看上面的触屏手势种类这么多，其实我们熟知的手势就是经典的几种。最常用的点击、滑动、长按都是单指。不管屏幕有多大，除非涉及捏合延展旋转的复杂操作，我们才会尝试用双指，但也很少会超过双指。背后的原因是什么呢？
+
+### 触屏手势易用性原则
+
+从人因的角度来分析，当我们手指在屏幕上滑动时，约束越小就意味着越省力越易用。把这个触屏易用性原则展开来说的话：
+
+- 交互判别面积越大越易用，你可以回想下刚刚讲的拇指大小对最小按钮的约束；
+- 滑动距离越短越易用，对滑动距离的约束越少越易用；
+- 因为人的手指在屏幕上滑动的轨迹很难做到直线，所以对操作方向约束越宽泛，越易用。当然，这里面还要平衡上下左右交互误判的情况。如果角度约束过小而恰巧有上下左右的滑动区别，会容易出现误触；
+- 在屏幕上操作的时间越短越易用，点击的易用性远好于长按，双击也没有单击易用；
+- 在屏幕上接触点越少越易用，也就是说参与交互的手指数量越少越易用。
+
+<img src="https://static001.geekbang.org/resource/image/7d/c5/7d35d0794c21b5b861f94841843c4bc5.png" alt="">
+
+当然，除了以上的易用性判定标准之外，还有一些易用性需要结合感官的配合来看。比如有无视觉的提示，反馈是否及时，是否映射真实世界的物理规律，是否符合人的认知等等。
+
+### 指关节交互
+
+在华为的移动设备里有一个非常独特的触屏交互，那就是指关节截屏交互。具体交互方式如下图所示。为什么华为引入指关节作为截屏操作呢？
+
+<img src="https://static001.geekbang.org/resource/image/1c/3e/1c0f22bb123944f8a35aaca484c8563e.png" alt="">
+
+我们按照上面的触屏易用性原则来分析一下：
+
+1. 指关节截屏在屏幕上任意位置敲击都可以。所以操作面积的约束几乎没有，非常易用。
+1. 指关节仅检测指关节敲击的次数，不存在滑动距离，从距离维度来看易用性最高。
+1. 由于不存在滑动距离，所以也没有操作方向的约束，指关节是在Z轴维度的操作。
+1. 指关节的截屏判断周期非常短，连续双击的周期远小于长按，易用性适中。
+1. 屏幕接触点仅是指关节一点，不存在多点触控，易用性高。
+
+由此可见指关节截屏在触屏交互中，其实是一种非常好的交互方式。
+
+## 总结
+
+好了，讲到这里，今天的内容也就基本结束了。最后我来给你总结一下今天讲的要点。
+
+今天我们主要讲了从人因的角度来理解触屏手势交互。我先从手指的尺寸谈起，带你学习了最小按钮尺寸，以及按钮和其他控件间距设计的原因。
+
+然后，我们谈到了握持对移动设备交互的影响。在我们使用手机时，有59%的人会选择单手握持，在交互中75%的操作是通过单拇指来进行，左右手握持比例差不多是2:1。这些数据让我们在设计界面布局的时候，要特别注意哪些区域是易交互区域，哪些是努力可达到的区域，哪些是不适于交互设计的盲区。
+
+单手模式是考虑到了易交互区的一种设计。华为的单手模式比苹果的单手模式更为易用。三星的OneUI（内容在上1/3区域，操作在下2/3区域）是一个践行易操作区的优秀设计。
+
+华为的侧边导航返回和侧边栏交互很好地考虑到了减少腕掌关节的运动，以避免腱鞘炎的发生。
+
+对于不同尺寸的屏幕来说，人的握持方式完全不同。所以你不能简单放大手机的交互布局在Pad上，要结合新的易用性区域重新考虑布局。比如在Pad上导航栏更适合在侧边而不是底部。
+
+最后，我带你学习了触屏手势的易用性原则。触屏手势的易用性原则简单来说，就是交互判别面积越大、滑动距离越短、滑动方向约束越宽泛、操作时间越短、接触点越少，那么我们的触屏交互就越易用。华为的指关节交互很好地做到了易用性原则。
+
+## 作业
+
+最后，我给你留了一个小作业，从今天我讲的内容，结合你当下从事的设计，哪些触屏手势的优化设计可以改进呢？
+
+同时也希望你分享一下，有没有什么App的触屏交互设计让你特别不顺手？

极客时间专栏/geek/基于人因的用户体验设计课/基础篇/15 | 理解语音交互：手机和你聊天的正确姿势.md

@@ -0,0 +1,220 @@
+<audio id="audio" title="15 | 理解语音交互：手机和你聊天的正确姿势" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/c8/49/c81fb107780963c0bc9cdd70991eb449.mp3"></audio>
+
+你好，我是Rocky。今天我们来聊聊语音交互。
+
+在当下AI时代，语音交互（后面我会简称“VUI”）成为热点。随着技术的发展，VUI已经加速在智能家居、手机、车载、智能穿戴、机器人等行业领域渗透和落地。今年内置语音助手的设备数预计会超过全球人口总数。
+
+## VUI和GUI的区别
+
+在无屏、小屏或者双手被占用的情况下，VUI是首选，甚至将是唯一交互手段。和触屏的线性交互不同，VUI是非线性发散的，允许跳跃性交互。
+
+我们现在来简单看下语音交互的长短板。
+
+语音交互的最大优势是没有技术门槛，老少皆宜。识不识字不是关键，看不看得清也不是关键。语音交互的缺点是缺乏私密性，存在声音干扰，隐私可能会泄露。再加上人的短期记忆力也极为糟糕，语音交互不适合承载过于复杂的信息。你可以参考下表的VUI和图形界面交互对比。
+
+<img src="https://static001.geekbang.org/resource/image/e0/ca/e0f75f433509d6697588fa7434e04dca.png" alt="">
+
+这个图上的信息都比较好理解，我拿同理心表达这一点展开说一下。有天早上老婆给我做早餐饼，然后问我好不好吃。因为我要赶着上班，于是就应着说：“好吃好吃。”老婆有些不开心了，跟我说：“你这太敷衍了啊。”
+
+其实正确的回复方式应该是说“嗯，好吃，真好吃！“在你“嗯”一声之后还得有停顿和回味，“好吃”和“真好吃”之间的语气要饱满。你看，这就是语言交流的优势，图形界面很难做到这么细腻的表达。
+
+从上面这张表可以看出，VUI和图形界面交互之间（以下简称“GUI”）各有伯仲。如果你理解到语音交互并不是万能的，就自然不会在“VUI是GUI的下一跳”之类的错误结论上急于跟风。
+
+还有一点我们必须要有清晰的认识，那就是语言学入门很容易但是做好很难。正如我们都会讲话，但是当作家、编剧的很少。理解语言是相当复杂的一件事情，它充满了微妙的区别，即使是人类也需要多年才能掌握。
+
+不同的语境、语气、语速、肢体语言，对不同的文化背景、年龄性别的人来说，都会产生完全不一样的语义和意图。人与人之间语音沟通失败的案例比比皆是，何况人与机器。
+
+加上语音识别（ASR）、语义理解（NLU）、对话管理（DM）、语言生成（NLG）以及文字转语音（TTS）的技术限制，再加上设计师的能力不同，导致了大量的VUI产品表现水准参差不齐。
+
+抛开技术的局限性，我们先站在人因的角度来看一个正常的VUI过程。
+
+首先是唤醒。机器被唤醒后会给予用户一个反馈，并等待人的输入。当人给出有效输入后，反馈结束倾听并理解人的意图，通过话术设计转换为文字或者语音，给出人适当的表达输出。
+
+如果这是个多轮对话，会循环进入输入、思考和输出的状态。当然有效多轮对话的前提是机器有短期和长期记忆，并且能理解人会话的指代关系。
+
+<img src="https://static001.geekbang.org/resource/image/c0/16/c0b3b9bbcb0f012836c44e93d8291b16.png" alt="">
+
+如果你还是有点不理解上面的描述，我可以用办公室小王与小张对话的过程对应一下：
+
+小王：“小张。”（这就是触发/唤醒）
+
+小张：（停下敲键盘，抬起头）“啥事儿？”（开始倾听提示，并主动倾听）
+
+小王：“记得昨天来面试的小姑娘吧？”
+
+小张：“嗯。”（实时反馈）
+
+小王：“我觉得不错，你再帮我把把关呗？”
+
+小张：“让我想想。”（结束倾听的提示，并开始意图理解和话术设计）
+
+小张：“这样吧，这两天我在准备一个年报材料，安排在下周行不？”（语音输出）
+
+……
+
+现在是不是更清晰理解了呢？下面，我们就按照这个过程来分析一下每个阶段的体验。先来谈谈唤醒。
+
+## 唤醒体验
+
+一个机器被唤醒的方式有很多种：
+
+- 通过触控（类似有人拍了一下你的肩膀）唤醒；
+- 通过唤醒词（类似有人喊你名字）唤醒；
+- 通过人脸识别/近场识别（类似有人大老远向你挥手）唤醒。
+
+当前对于智能音箱，用的最多的就是唤醒词。从产品品牌维度来看，固定的唤醒词是好的设计，不管是你叫“Hey Google”、“Alexa”、“小艺小艺”还是“小爱同学”都是这个目的。对于好的唤醒词来说，注意别掉入方言绕口的陷阱，朗朗上口是最基本的标准。
+
+很多方言里面：b（波）/p（坡）不分、n（呢）/l（了）不分、f（夫）/h（喝）不分、j(街)/q（其）/x（西）与z（兹）c（呲）s（司）、r（日）/l（了）不分，z/c/s和zh/ch/sh不分。所以以上情况都应该规避。详细参见下图：
+
+<img src="https://static001.geekbang.org/resource/image/ee/9b/ee46069277ea86740b2437e2e9b25b9b.png" alt="">
+
+当然，未来如果机器的智能识别技术提升，能够根据音色声纹、面部、用户说话朝向以及用户说话距离远近去识别用户的交互意图，直接自动切换到交互状态并打招呼，确实就是更为高级的体验了。当然这样甩掉唤醒词的方式，也意味着误唤醒率要高一些。
+
+对于更为复杂的场景来说，就是需要机器在人群中也能够被用户唤醒。这对机器的抗噪音干扰能力、多人声分离技术都有超高的要求。
+
+## 响应体验
+
+唤醒后，机器一定要给与响应。有效的响应要满足以下几个要求：（1）及时性；（2）状态反馈必须短暂；（3）清晰性；（4）不同状态要显著不同；（5）同一状态反馈要有一致性。
+
+### 状态反馈
+
+状态反馈按照阶段来划分，前面提到的“开始倾听提示”、“实时反馈”、“结束倾听提示”也都需要响应。
+
+这些不同阶段响应的变化必须要有明显的区分，以便让用户清楚知道当前机器处于什么状态。比如下面Google Assistant的视觉反馈变化：思考的话就是几个点在转圈；主动倾听的时候，你能看到音柱的起伏变化；甚至给你确定或不确定答复的时候，也分别用了点头和摇头的隐喻。
+
+<img src="https://static001.geekbang.org/resource/image/69/48/699b2bc6dc9a5023ff04a0c5c881b048.gif" alt="">
+
+### 等待时长
+
+在等待时长里，有两个时段的反馈你要特别注意：一个是倾听的默认等待时长，一个是结束倾听到最后给出语音输出这段时间。
+
+一个人如果要对着机器说一个命令，其实这在人的内心需要一个决策过程。人对一个事情的快速决策周期需要10秒左右，因此机器这个默认等待时长一般也设计在10s。
+
+如果过了10秒仍然未收到用户的进一步的决策回应的话，机器一定要及时给用户一个进一步的追问。比如“对不起，我没有听到。您可以给我一个回应吗？您可以说同意或者不同意。您也可以说让我再想想。”
+
+机器思考反馈的时间也需要参照人与人交流的体验。一个过快的回答会给用户带来轻浮感和抢话感，而一个过慢的回答会给用户带来迟缓感和愚钝感。
+
+人与人对话过程中避免尴尬的最长等待时间是1s。智能音响实际测试表明，用户请求后等待反馈的舒适响应区间为650ms到1050ms，恰恰和人与人沟通的等待时间匹配。你可以具体参考下图。
+
+<img src="https://static001.geekbang.org/resource/image/0e/b2/0e64a04f57ca171851780dced848a8b2.jpg" alt="">
+
+如果机器判别需要几秒的时间处理，请先及时给用户一个“请稍等”的语音反馈，让用户有一个等待预期。否则用户很快就会不耐烦，进而转移注意力。
+
+### VUI的人设和形象设计
+
+谈到响应体验，不得不提人设和形象设计。不管这个智能助手是拟人的，还是虚拟抽象的。
+
+之所以很多厂家并没有用非常具体的可视化虚拟形象来代表自己的产品，是因为声音本身就代表了一种视觉映射和联觉。比如你打电话听到一个陌生人声音，你会自动无意识地给对方塑造个形象。甚至等真正见到真人后，你可能还会说：“你和我想象的完全不一样。”
+
+所以以语音交互为主的产品不适宜设计非常具体的形象，因为要给人留有充分的想象空间。虚拟人物个性越鲜明、形象越具体，这样在缩窄想象力的同时，也会让用户反应变得更为两极化。
+
+虚拟人物应该更有权威性？还是更有同理心？是更为专业化？还是博学？我们产品期望的定位对人设和形象设计非常重要。
+
+百度在这方面做了一些研究。百度针对不同性别、不同年龄的男女分别作了音色特征的提取。并且还用关键词进行对应，你可以参考下图。
+
+<img src="https://static001.geekbang.org/resource/image/f8/d6/f89be7e2e4145230b158a4394369ccd6.png" alt="">
+
+经过研究发现，音色与人设之间存在一种大体的对应关系：**音色的年龄会直接反应了人设的年龄，音色的特质则进一步揭示人设的性格。**
+
+比如“浑厚”的声音容易被用户认为其“年长”，性格更为“冷静沉着”，用户会把这种声音视为“专家/助手”。“响亮”、“清亮”、“轻快”的音色，给用户的感觉更年轻，性格更“外向健谈、聪明开放”，也更容易将其当成朋友。
+
+注意，很多产品会支持选择不同的角色和人设，其实这是有些风险的。好的产品人设应该是稳定的，并且和产品的涉及领域及产品的知识水平相匹配。如果用户切换为与产品不协调的虚拟人设，会让用户不信任甚至反感你的产品。
+
+## VUI的话术设计原则
+
+在响应体验之后，接下来就是机器在思考后应该如何表达。这里最重要的部分就是话术设计。
+
+机器与人的VUI话术原则，是参照社会心理学中人与人有效沟通原则来设计的。参见下图：
+
+<img src="https://static001.geekbang.org/resource/image/dd/5e/ddbb6d85314acd6b31de52d9166ccc5e.png" alt="">
+
+### 理性原则
+
+最基本的是理性原则。这是一种不考量情感的互动，就是冲着完成任务来设计的：
+
+- 强目的性，聚焦对话的意图，不岔开话题；
+- 准确无歧义，不说谎，不夸海口；
+- 不啰嗦，没废话。
+
+你看，这基本上是个妥妥的理工男沟通攻略。
+
+那究竟怎样才叫不啰嗦呢？比如你问Alexa：“你多大了？”它要是回答你：“我是2014年11月6日发布的。”这就叫啰嗦。直接算好年龄报出来，不要让用户在心里再心算一遍，这叫做精准。
+
+针对歧义，对于大部分歧义而言，VUI都可以通过重读或者停顿区分出来。就怕某些同音歧义。比如下面这种：
+
+- “我全部（不）喜欢”。这个既可以理解为“都喜欢”，也可以理解为“都不喜欢”。
+- “他走了半个多小时了”。这个既可以理解为“他离开半个多小时了”，也可以理解为“他步行半个多小时了”。
+- “这道菜切忌（切记）放糖”既可以理解为“这道菜一定要放糖”，也可能是“这道菜绝对不能放糖”。
+
+还有些指代歧义。比如“小美看见妈妈正在和她的同学聊天”。这个“她”到底是指的“小美”，还是“小美妈妈”？
+
+不管是人对机器说这些话，还是机器输出这些话，都有可能造成双方的沟通错误，所以在设计中就要尽量避免这些同音歧义。
+
+### 感性原则
+
+在理性原则的基础上是感性原则。感性原则更强调机器与用户的情感互动：
+
+- 口语化表达，规避晦涩词汇，自然的反馈，不生硬；
+- 客客气气地交流，不推诿不指责；
+- 共情的互动，机器会对不同人有不同的语气、语调、语速。这种沟通技巧属于加分项，即便在人与人的互动过程中，也会非常难于被考虑到。在机器里也更难以实现。
+
+最容易实现的是在交流过程中口语化。在交流中用语气词（如么、吧、呢）、感叹词（如嗯！哦！）、象声词等。
+
+对于类似的回答，设计的反馈不要重复。比如下面这个图所示的情况，左边反馈就不自然，右边就是自然反馈。这种对多轮对话的技术要求又会上升到一个新的层次。
+
+<img src="https://static001.geekbang.org/resource/image/61/d4/61175305964c7b955edc1808e48890d4.png" alt="">
+
+很多VUI设计师在话术的选择上，容易拿GUI的话术直接对应，这其实是不对的。对于图形界面出现的错误提醒和智能音响说出来你错了，用户感受到的羞愧程度是完全不同的。比如下面这两段对话。
+
+<img src="https://static001.geekbang.org/resource/image/c4/d8/c48e76628f44425e7586c7bc00e2f6d8.png" alt="">
+
+在感性原则里，最为高级的阶段是具有同理心。如果你家里有小孩子，你还记得你是如何和小孩在说话的吗？如果家里有老人，你还记得你如何和老人沟通的吗？
+
+能识别用户的性别、年龄，而且能够根据用户的不同，给予不同的语调、语气、语速、话术来沟通，更能体现同理心。但这个对技术的要求就更上一个台阶了。
+
+### 社会原则
+
+最后一点是社会原则：
+
+- 平等性，机器也不能在话术上奴化自己，需要不卑不亢；
+- 机器也应该尊重用户的隐私，更懂得尊重用户的社交距离。这一点尽管重要，但几乎被很多做人工智能的公司选择性地忽视了。这也造成了某些产品设计上出现了偏差。
+
+可能你会说，人和机器就是不平等的啊。机器是一个为人服务的角色。人可以唤醒它，命令让它做一些事情，24小时不让它休息。当然，人也可以随时让机器闭嘴，关掉它。这样的机器需要在体验设计上让它更像独立人格吗？貌似它的定位更像是一个奴隶，或者说得好听一点是忠实的仆人，远远达不到与人平等的关系。
+
+为什么要考虑机器人的社会原则？
+
+我们要看得更长远一些。尽管目前还没有把机器人人权摆到台面上来说，但在未来相当多的工作会以一个超高的比例被机器人取代（特别是那些重复性强、繁重的体力或脑力劳动工作，比如清洁工、外卖、快递员、司机、保安、客服、接线员、会计、保险业务员、银行职员等等）。下图分别是BBC和经济人杂志的数据。
+
+<img src="https://static001.geekbang.org/resource/image/f7/ab/f79be68f8c98016d8feb31a8a81440ab.png" alt="">
+
+如果我们VUI把机器和人设计成不对等的交互语境，比如动不动就说“明白了，主人。对不起，主人。”那里面就会有一种暗示，那些大概率会被机器人替换的职业人群是下等人，是可以被歧视的。而这是平权的现代社会之大忌。
+
+所以，这不是一个技术问题，而是一个社会问题。不管人工智能技术有多么糟糕，任何要和人进行语音交互的机器，都必须采取平等地位的语言沟通来设计，这是极为重要的原则。
+
+<img src="https://static001.geekbang.org/resource/image/91/d3/9171d61a2c33359ac16452a1e6c5d0d3.jpg" alt="">
+
+机器要不要生气？机器被侮辱了应该如何应对？如果我们想明白了社会原则就会明白，机器也是不能被侮辱的。对于某些识别出来的明确骚扰，机器要表明清楚的人格化立场，哪怕不表现为愤怒或者反抗，也应该义正言辞态度坚定地拒绝。
+
+## 总结
+
+好了，讲到这里，今天的内容也就基本结束了。最后我来给你总结一下今天讲的要点。
+
+这节课我们先比较了一下VUI和GUI的区别，两者各有伯仲。其中VUI门槛低、更容易一步直达，但也存在隐私难以保障的问题，对认知负荷和注意力要求都很高。
+
+VUI的体验流程需要经过唤醒触发、倾听提示、主动倾听、实时反馈、结束倾听提示、意图理解和话术设计，最后再转换为语音或图形界面反馈给用户。
+
+唤醒词是非常重要的唤醒方式。唤醒词的设计要规避方言绕口的陷阱，确保朗朗上口。未来声纹、面试识别、近场识别等技术都会提供更灵活的唤醒体验。
+
+响应体验必须满足：（1）及时性；（2）状态反馈必须短暂；（3）清晰性；（4）不同状态要显著不同；（5）同一状态反馈要有一致性。
+
+倾听的等待时长要参照人决策时间，默认设为10s比较合适。而机器给人的反馈是按照避免沟通尴尬，在1s内比较合理。
+
+VUI人设和形象设计要和产品定位匹配，视觉的形象设计要避免过于具体。声音的人设可以通过音色来反应。VUI在话术设计上要遵守理性原则、感性原则和社会原则。
+
+其中理性原则包括：目标性、确切性和简洁性。感性原则包括：自然性、友好性和个性化。社会原则重点是人与人的平等关系要映射到人与机器的关系中，不奴化机器，并且机器要保护人的隐私。
+
+## 作业
+
+最后，我给你留了一个小作业，从今天我讲的内容，结合你当下从事的设计，如果你的产品要做语音交互的改造，如何设计唤醒词和状态反馈体验？
+
+以及你用过最好用的智能音箱是哪一款？为什么你喜欢这款智能音箱？

极客时间专栏/geek/基于人因的用户体验设计课/基础篇/16 | 隐私与个性化：不要骗我.md

@@ -0,0 +1,173 @@
+<audio id="audio" title="16 | 隐私与个性化：不要骗我" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/e6/cd/e681e736bfa2cecafa43275c26f4fccd.mp3"></audio>
+
+你好，我是Rocky。
+
+今天我们来聊聊如何在设计中考虑人的隐私与个性化。
+
+<img src="https://static001.geekbang.org/resource/image/14/bd/14aa1dabaeed58943a1886f5380862bd.png" alt="">
+
+让我先来解释一下为什么把这两个概念放在一起。你可以先看看上面这个隐私和个性化之间的关系图。
+
+个性化有两种，一种是用户主动的个性化，一种是用户被动的个性化。
+
+对于主动的个性化来说，比如自己设计一个社交app的形象、选择自己喜欢的主题风格的手机皮肤、搭建个人的主页或者博客、选择自己喜欢的铃音等等，主动的个性化都是用户主动希望别人了解到自己。
+
+被动的个性化是指在数字产品中通过数据挖掘进行用户画像，从而针对性地进行推荐、广告营销、他人窥探等服务。但被动的个性化不可避免地会侵犯用户的隐私，如何平衡个性化和隐私就变得非常关键。
+
+**个性化对隐私的侵犯敏感程度和用户对品牌信赖程度成反比。**
+
+如果信任度不够，用户对获取数据的行为就会非常敏感。即便这些数据最终是用于个性化，也会被用户解读为对隐私的窥探，并担心产品会拿自己的隐私数据干一些坏事，进而引发用户的负面情绪，甚至导致用户流失。
+
+而对于信任度足够的产品，用户就是这种反应：“我其实一点儿都不担心，毕竟不是犯罪分子，也没做过什么坏事。不做亏心事不拍鬼敲门，何况我还用隐私换来好多的便利呢！”
+
+在许多情况下，如果一项业务建立在误导用户、利用数据的基础上，那它就会被用户鄙视（即便这项业务曾经有很高的信任度，也会消失）。脸书Facebook曾被曝泄露了5.33亿用户的信息，扎克伯格还被叫到国会问询，用户对脸书的信任降至冰点。截止今日，仍有大量的用户退出脸书，而转向其他的社交平台。
+
+虽说窥探他人隐私是人的天性，但早在1948年联合国的《世界人权宣言》中，隐私权就被认定为一项基本人权了。隐私权源于人安全感的营造，源于自我保护的心理，源于人与人的社交距离。
+
+如果说早在1948年隐私就需要保护了，那现在当然更加需要。毕竟，我们正处于一个可以被如此精确窥视的时代，我们可能一生都会活在数字监视之中。几乎数字世界所有的交流、互动行为和个人数据都会以这样或那样的方式被人看到。
+
+甚至我们自己也一直随身携带着小型的跟踪设备——只是我们不称其为跟踪设备，而叫它智能手机。
+
+从社会学上来分析，信任和信用是一切良性社会构建的基础之一。我国的法律要求上网实名制，作为拥有用户数据的产品侧人员，我们就是站在强势的一方。相应地，尊重和保护隐私的担子就会很重。
+
+那么如何在设计中做到保护用户的隐私呢？
+
+## 安全认证的正确动作
+
+保护隐私数据的前提是要有安全的机制。在用户界面上，能验证用户身份的有三种要素：用户知道的、用户持有的以及用户固有的。密码是用户设置，肯定是用户知道的；手机是用户的私人随身设备，属于用户持有的；用户的生物信息比如指纹、人脸，这都是用户固有的。安全级别越高，需要的要素组合越多。
+
+### 用户知道的
+
+任何隐私的泄露，总是从脆弱的密码开始的。所以如果你要让用户以正确的姿势输入密码，这里面就有4点注意事项：
+
+1. 如果应用安全级别足够重要，则必须有密码强度的提醒。
+
+<img src="https://static001.geekbang.org/resource/image/8c/74/8c3c85899da12002e0fff8daea46a574.jpg" alt="">
+
+1. 如果你希望用户输入密码的复杂度提升，请给予进一步清晰的输入建议。比如下面的密码输入，清晰给出了必须同时有大写和小写字母、必须包含特殊字符、必须含数字等等。而且只有用户输入达到要求后，对应的条件才会挑勾变色，来引导用户输入符合要求的密码。
+
+<img src="https://static001.geekbang.org/resource/image/54/44/5401867fc169b6yy9e9e23f5284c1744.jpg" alt="">
+
+1. 要给用户在注册时看到密码输入的机会。当用户输入复杂密码时，特别是用户以移动终端软键盘方式触屏输入时，误触输错的概率会提升，所以必须要让用户知道自己输入的密码是什么。下图的小眼睛就是让用户在输入密码时，可以选择是否同时看到输入内容的提示。
+
+<img src="https://static001.geekbang.org/resource/image/a0/fd/a0bb24908df3a3ce1de3a1424dda13fd.png" alt="">
+
+1. 不要向用户索取不必要的隐私信息，避免引发用户的警觉。在前面的输入密码部分，某些应用还会要求用户进一步输入一些安全问题。通常这些问题有3个，用于你遗忘密码后在找回密码时作为安全问题回答（比如用户的出生地、初恋的名字、宠物的名字等等）。但请记住，你要的越多，就要承担替用户保存这些隐私数据更大的安全责任。
+
+### 用户持有的
+
+用户持有认证是用户随身带的一个认证途径，这种认证一般有两种方式。
+
+一种方式是用户倾向于信任手机中已经认证过的某些常用App。比如微信、支付宝。用户会直接关联某些日常使用的权威社交账号的登陆和注册。
+
+另一种方式就是手机短信验证。用户会信任运营商的短信通道，认为这个更安全。出于安全原因考虑，短信验证都在几十秒内完成输入。由于验证码通知短信在手机上弹窗呈现的时候，只会展示第一行的内容，如果要提升用户验证码的输入效率，需要在短信通知的最开始就把验证码体现出来，你可以参见下图。
+
+<img src="https://static001.geekbang.org/resource/image/ee/cb/ee4ebf62dc46295524c10974f89f5dcb.png" alt="">
+
+这两种持有认证方式其实都是把将有效性、安全性的问题交给权威第三方，免去了很多麻烦。同时这样做还能减少用户的记忆负荷，不必在不同的App里设置并记忆各种复杂的密码。
+
+### 用户固有的
+
+用户固有的生物信息鉴权是最不需要记忆负担的。但是在体验上，还是需要注意在生物信息鉴权采集数据的依赖过程中，不要忘记对锁屏密码鉴权的强化记忆（具体的内容你可以再回顾一下[13讲](https://time.geekbang.org/column/article/353442)），要充分认识到人的思维缺陷。
+
+帮助用户进行安全认证仅仅是重视用户隐私安全的第一步，接下来就是去对待用户的隐私数据了。
+
+## 不要索取不必要的隐私数据
+
+用户在交互过程中会产生很多行为轨迹数据，这些数据严格说都是用户的隐私数据。所有对用户隐私数据的采集都需要经过用户的允许才行。其中包括硬件数据采集权限的申请、用户业务数据的收集申请以及获取隐私数据之后的处理。
+
+### 权限申请
+
+我们移动设备中的隐私数据很多，应用需要获取对设备数据的采集权限才能触碰到。这些权限包括存储、通讯录、麦克风、地理位置、健身运动、通话记录、相机图库等等。很多app必须获取某些权限才能正常提供服务，但绝对不是全部权限。
+
+尽管很多用户在面对权限要求的时候，一般直接点击“总是允许”。不过一旦用户发现某个应用申请了其并未对外展示的某些权限，用户一定会猜测这个应用是不是在偷偷获取隐私数据，进而产生认知偏见。
+
+在减少这种认知偏见的做法里，iOS要比Android更胜一筹。
+
+在Android中所有的系统授权弹窗都是不能添加说明的，而iOS在请求授权弹窗内可以添加简单的说明。这些说明提供了动机，增加了用户的知情权，在解除用户顾虑的同时强调了价值交换。你可以具体参考下图。
+
+<img src="https://static001.geekbang.org/resource/image/3f/dc/3f2486yy7f7b98e19d688de4eb4f0bdc.png" alt="">
+
+用户对一个陌生应用的信任感其实是很低的。如果这个陌生应用一次要很多权限并且缺乏关联场景，用户的信任感还会进一步下降。
+
+正确的要权限姿势，一定是用户使用到了相关的功能，强烈感知到这个功能和这个权限的关联性。比如用户不知道一个应用为什么要用到相机，但是当用户使用扫一扫触发授权弹窗的那一刻，用户的信任度是最高的。你可以对比一下下图的左右两半部分，明显右半边会更好。
+
+<img src="https://static001.geekbang.org/resource/image/d1/96/d1ff1db8c55f48aa20d83fd0137c0096.jpg" alt="">
+
+当然在用户的心中，对于哪些应用应该有哪些权限是有预判的。比如地图应用一定会需要位置权限、拍照类App一定会用到拍照权限、社交或在线多媒体应用一定要用到网络权限等等。这些应用如果一开始就用预授权，用户也完全可以接受。
+
+但即便是如此，如何最小化使用权限仍然有很多改进空间。比如是否需要精准定位，是不是可以模糊定位替代？允许使用相机和保存相册，但是否允许读取相册其他照片？在允许使用麦克风时，是否应该在应用调用麦克风权限时给予清晰的视觉提醒，让用户知道后台麦克风在录制中？是否可以根据场景来对权限进行约束？
+
+<img src="https://static001.geekbang.org/resource/image/0e/5c/0ef2386c7289c354ae409d8e4d07d05c.jpg" alt="">
+
+### 最小化用户数据收集
+
+即便获取了权限，有些对业务并没有直接贡献的信息，或者并不适合于当前业务使用场景的信息，就不应该过多收集。下图是两个应用的隐私数据获取声明，左半部分是脸书旗下的WhatsApp，右半部分是Signal。
+
+<img src="https://static001.geekbang.org/resource/image/c7/14/c7ee6ea2627130cb2b143a77849a4214.jpg" alt="">
+
+尽管两家公司都提供加密信息，都是将你的信息编码打乱只有收件人才能破译，都依赖于你的电话号码来创建账户和接收信息。但从上面的隐私声明我们很明显能够看出，两家对隐私的策略完全不同。左边是强调要获取哪些个人数据，能拿多少就拿多少。而右边获取的隐私数据极为有限，拿到了还会做匿名化或脱敏处理。
+
+Google Map的街景模糊处理技术也是一个非常棒的设计。不仅在StreetView 3D街景展示中能自动模糊人脸和车牌，而且还设计了一个隐私申报的接口，如果用户申报，甚至可以对整个房屋、车体、甚至身体做模糊处理。
+
+<img src="https://static001.geekbang.org/resource/image/14/51/14e90350737551288906yy30df404a51.jpg" alt="">
+
+### 当用户退出，不要保留其隐私数据
+
+用户始终拥有自己信息的绝对归属权利。如果用户选择不继续使用一个产品，那么也有权删除所有这个产品曾经收集到的自己个人隐私数据。
+
+Line这款聊天软件提供了彻底的账号删除功能，并详细阐述了删除后的后果。参见下图：
+
+<img src="https://static001.geekbang.org/resource/image/02/8c/02052b83ff5447a29cff72261a80538c.png" alt="">
+
+## 不要暴露用户的隐私
+
+前面讲了在获取用户隐私数据时需要注意的细节。接下来我们来看看在个性化运用中，如何使用这些隐私数据在做到不暴露用户隐私的基础上，更好地为用户服务。
+
+比如应用已经获取了用户的手机号，那么这个号码要不要保护呢？某些快递公司直接把用户的名字和手机号印刷在快递物品的外包装上，任何人都可以看得到。这就是粗暴的泄露用户隐私的做法。
+
+Uber作为海外常见的一个打车软件，在避免用户隐私暴露方面做得很好。Uber司机接到你之前，不知道你的姓名、头像、性别，甚至你的目的地都是未知的。Uber仅会显示乘客的评分和当前的位置，司机和用户之间的沟通通过临时号码相互匿名联系。
+
+<img src="https://static001.geekbang.org/resource/image/52/5e/5283c4e91cb8347d314fb70bbfbecd5e.gif" alt="">
+
+我们在给用户个性化推荐的时候，有时应用会关联用户的朋友信息并给予推荐。但是应用是如何界定朋友的呢？凡是加过微信好友的就是朋友吗？很多人的微信通讯录中有数千名“好友”，你希望自己的隐私信息被所有好友看到吗？
+
+微信的隐私管理里“不让他（她）看”或者“不看他（她）”，如果我们是在一个有上千好友的通讯录上去手工管理，这个功能就是一个鸡肋设计了。
+
+<img src="https://static001.geekbang.org/resource/image/85/78/853190b907b3ayy6f08e715930e8d578.jpg" alt="">
+
+在微信读书里，一个用户是否愿意自己的阅读信息或者点赞信息被所有的朋友圈好友看到？下图我用框图框起来的信息，左边的“朋友看过”还稍好些，没有暴露具体的朋友细节。但是右边的点赞，就是非常具体的朋友信息露出了。不加审慎处理，这里面就会产生很大的隐私泄露隐患。
+
+<img src="https://static001.geekbang.org/resource/image/01/25/01677441c3aa8df680238e388d672025.jpg" alt="">
+
+微信阅读给以上个性化推荐都加入了隐私保护开关，但仍然是默认用户同意打开的状况。
+
+## 让用户有权去控制隐私的披露程度
+
+除了正确对待用户的隐私数据外，对隐私的控制权也是用户安全感的重要保障。有的用户会觉得去除某一应用的某个权限，不会影响部分功能的使用。
+
+比如用户已经下载了离线地图，他会觉得没有网路连接应该也可以使用。如果一个用户用相机仅仅是拍照不录像，他会觉得麦克风权限可以取消掉。那我们就要允许用户反悔，去设计反悔机制。
+
+如果我们以允许反悔的标准来看，下面这个例子并不是一个好的设计。在相机里面，麦克风被强制定义为一个基本权限，如果被取消，相机应用完全打不开。
+
+<img src="https://static001.geekbang.org/resource/image/32/4a/325f5dacb5c9c1c20987ec8b453e764a.jpg" alt="">
+
+回想一下我们之前谈过语音交互的唤醒词。唤醒词很重要的功能之一就是告知用户在你未唤醒我之前，所有你说的话，我都不会录音存储，更不会上传云。这其实也是一种用户主动控制隐私的设计。
+
+## 总结
+
+讲到这里今天的内容也就基本结束了。最后我来给你总结一下今天讲的要点。
+
+个性化有主动和被动之分。其中被动的个性化业务存在隐私泄露的风险。
+
+用户对个性化隐私泄露的侵犯敏感程度和用户对品牌的信赖程度成反比。隐私权作为一项基本人权，如果你在做数字产品侧，一定要有主动保护隐私的责任意识。
+
+验证用户身份有三种要素：用户知道的，用户持有的，以及用户固有的。安全级别越高，需要的要素组合越多。
+
+某些不必要的数据或者敏感数据，要在收集到的第一时间进行脱敏和匿名化处理。同时要实现全生命周期的隐私保护，如果用户退出账号，要给用户删除所有个人数据的选择。
+
+在个性化业务推荐过程中，在保证业务可以正常进行的前提下，要最大程度保护用户的手机号、姓名、性别、头像等等隐私信息，不要把用户隐私保护的责任甩给用户自己去解决。要允许用户去控制隐私的披露程度和权限的授予程度，允许用户反悔。
+
+## 作业
+
+最后，我给你留了一个小作业。你觉得在个性化推荐中还有哪些点可以优化，从而更好地保护用户隐私呢？你在生活中有没有遇到过隐私被泄露的事？

极客时间专栏/geek/基于人因的用户体验设计课/基础篇/17｜人的社会属性：购物节背后的玄机.md

@@ -0,0 +1,210 @@
+<audio id="audio" title="17｜人的社会属性：购物节背后的玄机" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/19/b4/19b33762e9de59462dbb4529f8397ab4.mp3"></audio>
+
+你好，我是Rocky。
+
+今天我们来聊聊人的社会属性这件事。人类是社群动物，从生活中的各种层面来说，我们每天都离不开社会。那我们应该如何在设计中去考虑到人的社会属性呢？
+
+经典的马斯洛需求金字塔模型认为人有六个层次的需求：生理需求、安全需求、社交需求、尊重需求、自我实现需求以及超我需求。这六个层次需求，是一个由低到高逐级形成并逐级得以满足的。
+
+<img src="https://static001.geekbang.org/resource/image/ce/25/ce32dbb54959b3519fa24060a2190225.png" alt="">
+
+人的社会属性主要在第三和第四层体现。第三层的社交需求说的是依靠。具体展开就是规范、爱和归属感。第四层的尊严需求包括自我尊重、被他人尊重以及被社会群体认同。要在设计中理解人的社会属性，其实就是要去影响人的这些需求。
+
+著名心理学家罗伯特·西奥迪尼在2006年出了一本书叫《影响力》。这本书很有名，如果你还没有读过，我强烈推荐你去看看。书中提到了6个影响力原则，在用户体验设计中如果遵守了这几个原则，就会很好地提升对用户的社会影响力，达到对产品有利的目的。
+
+这6个影响力分别为：承诺和一致性原则、喜好原则、社会证明原则、稀缺性原则、互惠原则以及权威性原则。
+
+这六个原则其实和马斯洛社会需求以及尊严需求可以一一对应起来。我在下面给你画了一张对应关系图，你可以参考一下。
+
+<img src="https://static001.geekbang.org/resource/image/46/c0/4600f952de8753d02eb33705ca838dc0.png" alt="">
+
+这些原则性东西听起来挺理论的，为了方便你的理解，接下来我就给你解释一下这些原则具体是怎么一回事，以及在用户体验设计中是如何灵活运用这些原则的。
+
+## 承诺和一致性原则
+
+第一个是承诺和一致性原则，对应人社会需求的规范部分。
+
+先说承诺。每个人内心都是守信的。**一旦我们做出选择或立场，我们就会承受个人和人际关系的压力，要求我们始终如一地履行承诺。**如果不遵守承诺，我们会内疚、懊悔。人们将努力确保自己的行为与过去的决定相匹配，以避免过度的压力。当然这种承诺的对于在成人奏效，对应到孩子身上就未必了。我们来看一个健康使用手机模式的例子。
+
+现在很多手机厂家都有健康使用手机的功能设置。你可以在健康使用手机模式里对使用时长、应用限额、应用种类等做一个自我约束计划。在达到限额后不可用的应用图标会变灰。你也可以通过延时使用做临时的妥协，但提供的延时时长较短，延时到期后的提醒会进一步增加你不遵守承诺的压力。这样一来，我们在大部分时间里会去遵守我们做出的健康使用手机的承诺。
+
+在你设计健康使用手机时要注意使用者的身份。
+
+大人和孩子在界面设计、话术、色彩搭配、动效效果、提醒频次，提醒强度和交互控件的选择都应该有所区别。因为承诺仅对大人奏效，所以大人的自律式交互和孩子的家长干预式交互的设计理念也有非常大的差别。
+
+因为大人的自律性很强，所以在使用手机限额达到后的提醒可以用确认弹窗的形式。一个成年人一旦点了延长使用按钮后，内心会浮起一阵愧疚感。
+
+而如果对自律性不强的孩子也使用确认弹窗的形式，他大概率眼睛都不眨就直接点确认延长按钮。那么我们在交互设计上就应该通过一些强制手段，让承诺和一致性原则在遵守上更为严苛。比如采取必须输入登录密码确认的形式，或者必须家长指纹或人脸识别延长等。甚至家长确认后，还要强制增加一个眼保健操的10分钟倒计时。
+
+<img src="https://static001.geekbang.org/resource/image/4c/05/4c20f61608bfcc31b122a4241f0e9b05.png" alt="">
+
+我们再看承诺与一致性中的一致性。一致性是指人们倾向于和过去的决定或行为相匹配。换句话说就是我们容易循规蹈矩。
+
+所以在体验设计中，你一定要特别注意普遍使用的交互一致性的设计。特别是产品版本迭代过程中，某些交互形态一定要继承，不要轻易去掉。
+
+比如随着全面屏的引入，很多手机厂家引入了全面屏新的手势导航。即便厂家觉得新的导航设计更加自然直观，也需要在默认导航交互改变前有一个引导式的教学设计。
+
+而且即便是通过了教学部分，导航交互如果频繁出错，要给用户Tips来提醒使用。甚至在用户对于这种交互明显不适应后，还应该给用户退回到传统导航交互的选择提醒。
+
+<img src="https://static001.geekbang.org/resource/image/0f/b7/0f7c3bb410dd4559f72f9034c248b2b7.jpg" alt="">
+
+## 喜好原则
+
+第二个是喜好原则，对应人社会需求爱的部分。
+
+喜好原则在咱中国有一个成语，叫爱屋及乌。**喜好原则对产品和服务的影响是持续性的，它能促进客户的留存和后续转化。**
+
+喜好原则有两种运用手法，第一种是迎合用户的喜好，第二种是牵引用户的喜好。
+
+### 迎合用户的喜好
+
+第一个手法比较取巧，但也容易分化用户。你的受众都会同时喜欢任何一个人或者事物。过分使用喜好原则讨好粉丝的同时也会让反对者更加坚定。接下来我给你介绍三种迎合喜好的方式。
+
+1. 通过明星代言从而让粉丝们爱屋及乌的方式。这种方式叫光晕效应或者名人效应。名人效应在广告、海报等创意设计中大量使用。但用好也不容易。整体的风格、话术、场景、音乐的设计，都要和名人的特点、气质保持一致才能有共振效果。比如下面海报的整体氛围营造上，通过皮肤的吹弹可破去强化燕窝的冻龄作用。
+
+<img src="https://static001.geekbang.org/resource/image/45/a0/45bac2343496a0e5c229cb479867dea0.png" alt="">
+
+1. 拟人化是将动物、物体以及抽象概念赋予了人类的特征、情感和意图。这是一种非常好的喜好原则的运用。三星去年为其AI虚拟化身“人造人”推出了一个虚拟形象叫Neon，可以给人们提供“沉浸式服务”。Neon具备了可用于AR体验、网络、电影与移动应用中的高保真拟人化身。Neon能够自主地创建表情、动作，延迟时间不到几毫秒，还可以根据你的喜好更换角色形象外貌特征。
+
+<img src="https://static001.geekbang.org/resource/image/78/84/7874d281328e094215f3d2978dd82d84.jpg" alt="">
+
+这里面特别要注意，你的产品拟人化或人格化设计需要考虑你的产品技术水平基础。Neon体验之所以好，是因为逼真程度已跨过了“恐怖谷”，背后有强大渲染引擎和AI智能技术的支撑。
+
+如果引擎的渲染性能、产品的计算能力和智能算法能力达不到要求，在这种情况下过度追求像人，会引发卡顿、响应延迟、反馈笨拙等等问题。所以很多产品在初期都是用卡通化、儿童化的智能助手，这是为了让自己的产品人设和产品的处理能力匹配。
+
+3.千人千面也是迎合用户喜欢的一种逻辑。今日头条新闻，给你看的都是大概率你喜欢看的。淘宝推荐给你的，大概率都是你希望购买的。千人千面的设计同样依赖于背后的大数据分析处理能力。
+
+但你千万不要过度依赖千人千面的后台计算能力，在交互上一定要有容错的考虑。比如对推荐给用户的内容来说，根据算法设计出来占70%，另外30%由随机产生。毕竟谁都不想买了一个电饭煲后，系统还要一直不停地推荐其他品牌的电饭煲。
+
+而且千万别忘了，即便技术完美迎合喜好，人也总会有看腻的时候。给用户感兴趣推荐的同时，也要给用户新鲜感。
+
+<img src="https://static001.geekbang.org/resource/image/1c/07/1cf10466bbf64cc4d49144c23dd0b207.png" alt="">
+
+### 牵引用户的喜好
+
+牵引用户的喜好也有两种方式。一种野蛮粗暴，一种绵绵留长。
+
+你一定记得住“今年过节不收礼，收礼只收脑白金”的广告。这个广告就是典型单纯曝光效应的运用。这种广告设计长时间坚持一种广告语和画面，属于野蛮粗暴的洗脑。
+
+不要过度使用这种类型的喜好牵引，因为这对于理性用户可能会起到反作用。这种手法之所以还能引发人的喜好，是对人社会心理的深挖掘。针对人际交往吸引力的研究发现，我们见到某个人或事的次数越多、越熟，就会越觉得这个人或者这件事招人喜爱、令人愉快。
+
+早在30年前，乔帮主就确定的产品设计理念和品牌营销透露的价值观：Think Different。苹果的Mac的1984广告、1997年的致离经叛道者都是典型的这种价值观的展示。他的每个产品的设计也会突出这种价值观。
+
+就拿iPhone来说，iPhone在交互设计上就“Think Different”，让使用者更容易上手。那个时代其他手机都迷恋于键盘输入，顶多有个手写笔就觉得很高级了。但是iPhone开创性地用了手指触屏交互技术，特别是滑动、捏合放大这种让小孩子都能自然上手的交互，完全颠覆了大家的认知。
+
+另外，在iPhone刚出来的时候，在视觉设计上坚持图标拟物化、动效曲线逼近物理定律等等，也都是增加用户在现实世界交互的隐喻和亲切感。iPhone在设计和广告设计上都非常一致地让用户产生共情，也一下子就引领了时代。这种高级的喜好原则的运用，是我们设计师要追求的高点。
+
+<img src="https://static001.geekbang.org/resource/image/83/08/833984ef804047f8712f0ff2e0bfyy08.jpg" alt="">
+
+## 社会证明原则
+
+接下来，我来和你聊聊社会证明原则。社会证明原则对应人社会需求的归属感部分。
+
+举个非常现实的例子，你早上下楼买早餐，楼下有两家挨着的包子铺。一个排长队，一个没有人光顾。你是会继续排长队，还是直接跑到没有人光顾包子铺去买？如果不是急于赶时间，我想大概率是去排队。这就是社会证明原则。
+
+**社会证明原则是一种人们参考他人行为来指导自己行为的心理现象**，说白了就是从众心理。
+
+<img src="https://static001.geekbang.org/resource/image/f0/7d/f0d1f5a8d71312550740c7c008a3067d.png" alt="">
+
+现在很多应用在推荐你东西的时候，经常会显示这个商品已经被多少人购买？已经被多少人好评？身边好友有多少人也喜欢这首歌、这本书？这都是社会证明原则的运用。微信阅读就用了经典的社会证明原则：你朋友正在看什么？你朋友都赞过什么？
+
+<img src="https://static001.geekbang.org/resource/image/84/d8/844ec6b4bb65d92f5c38bd97cfae9cd8.png" alt="">
+
+追求社会证明原则必须和尊重个人隐私结合在一起来平衡。在数据上，你可以设计出让用户知道身边的朋友们最近喜欢过什么、做过什么？有多少比例？但是给出的这些参考信息一定不能让用户在界面上就知道具体朋友是谁、都看了什么赞了什么，否则就侵犯个人隐私。
+
+烘托围观氛围也是运用社会证明原则的一种。弹幕在线评论滚动是一种典型的案例，能够很好地烘托你在看视频时候的氛围。
+
+情景电视剧中的罐装笑声（Canned Laughter）效果也和弹幕类似。在喜剧中抖包袱预测观众会发笑的痒点，插入背景笑声，可以使观众笑得更长久和更频繁，并认同内容更有趣。我喜爱的老友记就是很好地使用了罐装笑声的案例。
+
+<img src="https://static001.geekbang.org/resource/image/62/a3/625c32b14d3c7f47f3cf5850df2e13a3.png" alt="">
+
+## 稀缺性原则
+
+第四个是稀缺性原则。它是一个典型的社会心理学现象：人们会为自己认为稀缺的事物赋予更高价值。也就是说如果你刻意增加获得某个东西的难度，就会显得它很珍贵。
+
+稀缺性在很大程度上源于一种叫损失厌恶的认知偏差。**人们对价值损失的主观感受要大于价值收益的主观感受，因此人们强烈希望规避损失而不是获得收益。**
+
+通俗地讲，损失100元的痛苦比获得100元的欣喜要大。人们如果不对稀缺的产品或信息采取行动，就会认为将要失去它们。稀缺性也是刺激人不理性消费的常用手段。但这种刺激仅为短期行为，使用稀缺性的最大风险是信任和信誉的降低，对品牌粘性构建无益。
+
+稀缺包括有限的时间（比如某个特殊时间窗、经常有醒目的倒计时运用）和有限的数量（比如必须要预订，制造供货不足的氛围）。
+
+<img src="https://static001.geekbang.org/resource/image/42/3b/423dc0a8c8c5aaf9f76e3121e8d5863b.jpg" alt="">
+
+在稀缺性产品体验设计上要突出、特别强调，加深人对其记忆。比如特别的色彩与字体（更大、更粗的字体，更醒目的色彩），特别的图形文字、形象、声音、动效手法，倒计时要用到秒计时，数量倒数。要实时更新，给用户机会窗失去的压迫感。一人最多购买一个，仅限某地、某身份，必须提前交纳定金，也是增加门槛的关键界面稀缺性要素。
+
+不过也要注意，稀缺性产品在设计上不能有太多的稀缺性要素，否则消费者很难抓住视觉焦点，反而失去了我们稀缺性设计的初衷。
+
+<img src="https://static001.geekbang.org/resource/image/a9/50/a9d2704d3095f7f2505c5e69e2b6c050.jpg" alt="">
+
+## 互惠原则
+
+第五个是互惠原则。互惠原则貌似是利用用户占小便宜的心理，但其实是要去建立一种互信机制。换句话说就是放长线钓大鱼。
+
+在很多在线教育、视频广播、读书等等应用的设计，会在用户首次使用时给出一定时限的高品质内容优惠。比如连续剧的前两集、电影的前5分钟、一本书的前20页、在线教育的前两堂课等等。
+
+这种设计策略尊重了用户的时间和精力，因为用户事先已经得到了一些有趣的东西，当他们觉得这个内容非常有价值时，他们一定会愿意付费获得更多，甚至通过年费方式获得无限量的VIP权限。
+
+下面这个QQ阅读的例子里，从第一次登录奖励金币，到免费试读5分钟后引导注册会员，就是一个典型的App设计时对互惠原则的运用。当然，消费者容易分辨什么是恩惠，什么是诡计。套路太多，用户也在吃亏中成长。**只有真诚才能换得真心，触发用户的人情债或愧疚感，才能真正钓到大鱼。**
+
+<img src="https://static001.geekbang.org/resource/image/01/2a/01cdfb2696179c781469210432a5022a.png" alt="">
+
+<img src="https://static001.geekbang.org/resource/image/c1/5e/c1af68868fa61428b835ace1c927c05e.png" alt="">
+
+真诚的实惠，就是需要结合后台运营数据识别出用户真正的诉求。千万不要随便给个小恩小惠，就急着让用户注册会员。你可以用A/B测试多种不同的阅读时长，对引导用户注册成功率的数据进行分析，从而找到最佳的时长。
+
+再给你举一个互惠原则的负面案例：在移动端应用首次安装的时候，很多应用喜欢把需要的权限一下子都要全，甚至不给某些权限就不提供服务。这种霸王硬上弓的应用权限索取策略，让很多用户装到一半就卸载了。如果你没有照顾到用户在尊重隐私上的需求，非常容易失去用户。
+
+## 权威性原则
+
+最后一个是权威性原则，对应尊严需求中的群体社会认同。权威性原则是指人们倾向于遵从权威人物，例如政府领导人、执法代表、医生、律师、教授以及其他领域的专家、大V、正规的大媒体。
+
+权威性原则的假设前提是处于权威地位的人会发挥更大的智慧和力量，遵守这个原则将导致良好的结果。用户倾向于做出更轻松的决定，而不是努力去做出一个更准确的决定。
+
+作为设计人员的你，可以利用权威性原则来提高设计的信誉度。一些可以增加信任的元素包括：
+
+- 担任权威职务的人的照片；
+- 权威的象征；
+- 信誉良好的组织的logo；
+- 来自专家名人或其他权威人士的认可；
+- 专业机构的认证或盛誉；
+- ……
+
+比如下面开放原子开源基金会网站在捐助人和名人堂的介绍上，就运用了权威性原则。对于一个公益机构而言，在官网和公众号的媒体平台上及时曝光合作伙伴，是一种非常好的双赢设计点。
+
+<img src="https://static001.geekbang.org/resource/image/3a/68/3a1a4cbb2e6b09f420c10413075bd868.png" alt=""><br>
+<img src="https://static001.geekbang.org/resource/image/c3/77/c31bce38296dd866883001b71e79ef77.png" alt="">
+
+在使用权威性原则时，要特别注意这四点：
+
+- 权威的光环并不永恒，很多大V，权威，专业机构因为负向事件，名声变差，影响力也会变差，甚至逆转变成负向影响力。
+- 绑架权威做非道德事件，会引起双输的局面。用户体验设计中的黄金道德准则：“问问你的设计是否能说服用户去做你不想被说服的事。”如果你都不信，就不要指望权威帮你粉饰。
+- 虚幻真实效应 (Illusory truth effect)：也被称为“戈培尔效应”（重复效应、真理效应）。古语云“众口铄金，积毁销骨”，重复是一种力量，谎言重复一百次就会成为真理。何况是权威性的重复。
+- 不必迷恋权威。在产品设计中也要凸显自我的价值观，战略愿景，优势特征。避免过度使用权威，反而给人不够自信的表现。
+
+## 总结
+
+好了，讲到这里，今天的内容也就基本结束了。最后我来给你总结一下今天讲的要点。
+
+在设计中要理解人的社会属性，我们首先从理解马斯洛需求金字塔中的社会需求开始。六个影响力原则是针对第三层的社会需求（规范、爱和归属感）以及第四层尊严需求（自我尊重、被他人尊重和社会群体认同），分别给出不同的设计原则来满足人的社会属性，从而达到更好的用户体验。具体来说6个原则如下：
+
+满足社会需求规范的**承诺和一致性原则**。这是一种保底的设计原则，在社会创新之初，不要去轻易打破规范，除非能挖掘出人的更深层次的需求。注意成人和孩子在承诺和一致性原则运用上干预强度的差别，也要考虑人在适应新交互习惯之前对旧的交互方式的继承。
+
+满足社会需求爱部分的**喜好原则**。迎合用户的喜好的设计方法可以是通过光晕效应、拟人化或者千人千面来增强亲和力，体现你对用户的理解。牵引用户喜好的设计方法包括简单的单纯曝光重复（不推荐），以及高级的价值观影响（推荐）。后者在产品的设计和理念上会让用户产生深度的共情和品牌粘性。
+
+运用社会需求归属感的**社会证明原则**。理解人的从众心理，在界面上明示或暗示告诉用户他们周边有谁在看什么、在买什么、在做什么。同时你需要在尊重隐私方面做好平衡。氛围烘托也是一种好的社会证明原则的运用。
+
+**稀缺性原则**已经开始满足人的自我尊重的需求。从突出、醒目的稀缺性氛围营造上，暗示用户要善待自己，创造一种得赶紧买的冲动。
+
+**互惠原则**是对人被他人尊重需求的满足。一个产品其实也是用户理解的“他人”。那我们就需要做到尊重消费者，先尝后买，放长线钓大鱼。还需要考虑到尊重用户的隐私，不要多余的权限。
+
+最后一个**权威性原则**是理解用户群体社会认同的尊严需求。在产品和用户交互的界面上，用一些权威性的信息展示来让用户觉得这是一个可信赖的产品。权威固然重要，但不要迷恋权威，否则会给用户一种不自信的感觉。
+
+这六个影响力原则在你的实际设计运用时，要结合你的产品特点、设计目的、用户群特征、场景适配来因地制宜，灵活运用。人的社会属性很复杂，今天的六个原则也只是一个抛砖引玉，你要在设计实践中去深入理解。
+
+我还给你总结了一个脑图，你可以长按保存下来，对在设计中如何理解人的社会属性会很有帮助。
+
+<img src="https://static001.geekbang.org/resource/image/4a/38/4a9db9ff3d9fa00464d26ef9499c5138.png" alt="">
+
+## 作业
+
+最后，我给你留了一个小作业。从今天我讲的内容中你可以思考一下，你平时使用的设计里哪个最考虑到人的社会属性？为什么？

极客时间专栏/geek/基于人因的用户体验设计课/基础篇/18 | 本地和全球化：你的偏好恰恰是他的禁忌.md

@@ -0,0 +1,215 @@
+<audio id="audio" title="18 | 本地和全球化：你的偏好恰恰是他的禁忌" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/29/f3/29ab52d278265e8c9bb2b367e006faf3.mp3"></audio>
+
+你好，我是Rocky。
+
+在圣经旧约中有这样一个故事：大洪水后人类建造通天的巴别塔导致上帝不悦，于是上帝搞乱了人类的语言，并把人类分散到世界各地。
+
+这样一来，人类就开始有了宗教、文化、生活习惯、法律法规等诸多方面的差异性，给国际化的产品推广带来了非常大的挑战。其实就连我刚刚说的这句话在某种程度上由于文化差异，已经违反了宗教禁忌。
+
+看来在全球化和本地化推广过程中，处处都是雷。那么在体验设计上，我们应该注意哪些呢？我们先从皮克斯和迪士尼动画的全球化和本地化案例说起。你可以先看看下面的动画电影适配示例。
+
+<img src="https://static001.geekbang.org/resource/image/46/25/4645377fd8be5393ffba975bb0ee3e25.png" alt="">
+
+- 左数第一个是《疯狂动物城》中的新闻播报员，在不同的播放国家，使用了不同的动物。
+- 第二个是在《飞机总动员》里，不同国家用了不同的飞机外观设计。
+- 第三个是《头脑特工队》，莱莉在美国不喜欢吃西兰花，在日本不喜欢吃青椒。
+- 最后一个是《怪兽大学》中的成绩单，分别在不同国家做了不同语言处理。
+
+皮克斯和迪士尼的动画电影可以说是本地化的标杆案例。那如果我们也要做全球化本地化推广，应该注意哪些方面呢？
+
+## 语言和文字
+
+我们先从语言和文字说起。曾有这样一个调研：在全球随机抽样3000人，结果有60％的人表示他们很少或永远不会从仅有英文的网站或应用购买商品。而75％的参与者表示他们希望以母语提供服务。
+
+那全世界到底有多少种语言呢？
+
+答案是大约6500种。目前没有任何一款互联网产品能够支持所有这些语言。支持语言最多的网络应用是维基百科（Wikipedia），但也仅支持317种语言。其次是Google，仅109种。全球排名前25位的最佳网站平均支持80多种语言。
+
+全球化面临的第一个挑战就是你需要把你产品里的母语，去翻译为更多的其他语言。而且绝非翻译这么简单，你可能要踩很多坑。
+
+### 控件中长字符的处理
+
+首先你需要注意的就是你的控件是否留出了足够的翻译长度。比如中文的“重新输入密码”占6个字符长度。对应到英语上“Repeat Password”是15个字符长度，希腊语是27个字符（επανάληψη κωδικού πρόσβασης），而印度南部的泰米尔语是夸张的31个字符（ரகசிய குறியீட்டை திரும்பச்சொல்）。参见下图：
+
+<img src="https://static001.geekbang.org/resource/image/e5/c1/e5e28f8a7248f7yyd658619ec7ce6ec1.png" alt="">
+
+那么一般预留多少合适呢？IBM经过统计测试，按照如下表格方式来预留最佳：
+
+<img src="https://static001.geekbang.org/resource/image/9e/bd/9e5ac13e685aefc98c3d00faa66458bd.png" alt="">
+
+比如中文是7个汉字，那么控件字符长度要能输入14个。当然即便这样规定，依然还会有很多不满足上面预留空间的特例。再加上很多控件长度本身就有局限（比如受到屏幕宽度的约束、Tab子项控件相互的制衡），那就要采取其他的方案了。
+
+应对不满足预留空间有以下4种可选的方式：
+
+- 如果控件延展空间足够，可以通过调整控件尺寸适配长度的变化。
+- 如果控件尺寸固定，可以缩放字体大小适配翻译后字符长度变化。如果是有多个控件存在，为了保持界面一致性和美观，同级控件内字体大小可能要同步缩放。这样做的缺点是字体会缩小，影响易读性。
+- 直接野蛮粗暴地截断处理，牺牲可用性。
+- 如果控件高度允许，可以自动换行处理。不过换行的时候，要注意具体断词的位置。
+
+<img src="https://static001.geekbang.org/resource/image/9b/06/9bab96d42163697eda45c8e8ceca8e06.png" alt="">
+
+这几种方式都各有优劣，需要你在具体界面时结合当时场景灵活运用。
+
+### 图形中不能出现文字
+
+其次你要注意文字必须允许编辑，也就是说不能在图形中嵌入任何文字。因为嵌入图形中的文字根本没有办法翻译。你可以参考下图的右半部分，这就是一个比较合适的做法。
+
+<img src="https://static001.geekbang.org/resource/image/13/60/1320833656b2362c4f70544ff9c6ce60.png" alt="">
+
+### 应对从右向左书的语言
+
+我们再来看看如何应对不同书写习惯的语言排版。如果你把从右向左书写的语言的排版变化简单理解为镜像，那就太武断了。我下面给你列出了不同书写语言在某些方面的差异与共识。
+
+在文本阅读顺序、时间线、前后方向的意象以及对齐方式都是相反的。但是在电话号码、顺时针和媒体播放上，大家的理解都是一致的，这几项不必刻意做镜像处理。
+
+<img src="https://static001.geekbang.org/resource/image/74/84/74aaf4d2aee86c6e111da30ac142f984.png" alt="">
+
+有很多系统图标也需要根据情况仔细斟酌。下面的几个例子说明了这些图标在不同书写方向的语言文化下的变化，它们并没有全部都做了镜像处理。当图标有斜杠、圆形时间意符、暗示右手习惯的时候，就不用做镜像处理。
+
+<img src="https://static001.geekbang.org/resource/image/13/1c/131f32484c2fa77b046d6791329cfb1c.png" alt="">
+
+下图是根据我们刚刚讲的规则进行的通讯录界面排版变化示例。在主要元素的排版上几乎都是镜像排版。因为都是遵守右手习惯，搜索和电话的图标并未镜像处理。电话号码的书写方式也并未发生变化，仅仅是输入框从左边移到了右边。
+
+<img src="https://static001.geekbang.org/resource/image/3a/63/3a2f281b1bafa09604c0717fdf340263.jpg" alt="">
+
+### 名字
+
+谈完布局之后，我们再聊聊名字。
+
+一种文化背景下的名字翻译到另外一个语言文化背景下，不能去简单地音译或者意译（特别是品牌相关的名字）。以下几个问题是需要去考量的：
+
+- 如果直译，在对方文化首先想到的一般性解释是什么？
+- 有无歧义或者多种含义？如果有，都分别是什么？
+- 有无负面的含义？
+- 在当地发音上有无近似的其他词汇？语音相似性的词汇是什么？
+- 是否存在知识产权和商标问题？
+
+比如：Coca Cola在不同的语言文化背景下叫法都有不同，汉语叫可口可乐，日语叫“コカコーラ”（koka-´gòla），瑞典语是“Cola”（kò-là），而在泰语里就直接为“โค้ก”（kó）。
+
+最早可乐打入中国市场用的名字是“蝌蝌啃蜡”，蝌蚪就是青蛙幼虫的蝌蚪，啃咬的啃，蜡烛的蜡。这个名字可想而知市场销路好不到哪儿去。后来这个名字被学者蒋彝改为“可口可乐”，立刻大卖。
+
+再比如Diet Coke到了中国就直接意译为健怡可乐。而在欧洲“Diet”并不意味着更低卡路里，所以直接改为“Coca-Cola Light”。
+
+<img src="https://static001.geekbang.org/resource/image/80/3a/80df114d16e47d8bb95b6f9767576f3a.png" alt="">
+
+多语言背景下的人名也需要注意。欧洲标准的名字一定要区分Last Name和First Name，分别用两个表单填写。或许这种填写方式对应到我们的姓氏和名问题不大，但是在印度尼西亚，大多数爪哇人都只有一个名字。而在马来西亚，通常会有三个名字构成一个人的身份。所以正确的做法是在这些国家里，仅用一个允许长字符输入的表单即可。
+
+<img src="https://static001.geekbang.org/resource/image/24/64/245dc77a79f4f9e3d2b078bcea71ff64.png" alt="">
+
+## 标准规范
+
+除了上述语言和文字的差别，很多时候不同国家的标准规范差异性（比如日期、英制和公制、货币数字等等）也会产生很大的误解。
+
+### 日期的处理
+
+先来说说日期。比如对“4/5/2020”来说，在美国就是4月5日，但英国就是5月4日。
+
+又比如在以英语为母语的国家里，喜欢说现在是全年的第几周的星期几，但是这种说法在美国和欧洲依旧是有差别。美国人是从每年的1月1日开始的那周算是第一周，而欧洲人是每年第一个星期四的那周才算第一周。所以很可能英国人说的今年的第23周，就和美国人说的第23周差了整整一周。
+
+尽管都是一周七天，犹太人认为周日是一个星期的第一天。而在一些穆斯林国家，工作日是从星期六开始的。你可以参考一下下面这个表格。
+
+<img src="https://static001.geekbang.org/resource/image/37/0b/37a8726a5a8b57a2bab8cde237403d0b.jpg" alt="">
+
+在欧洲大部分地区认为13日的星期五不吉利。但也不尽然，意大利是17日的星期五不吉利，而西班牙和希腊人则认为13日的星期二不吉利。
+
+### 数字格式
+
+聊完日期，我们来看看数字格式的差别。你如果去欧洲购物，那就会看到如下图的价格标签。你能正确读出这个价格吗？点号「.」作为千分位间隔，而逗号「,」作为小数点，负号「-」表明小数点后零头抹去。所以下面这个图中间的商品价格是2299欧元。
+
+<img src="https://static001.geekbang.org/resource/image/3d/d0/3d20dc75b225b5626cde3f25bd5619d0.jpg" alt="">
+
+全球关于小数点和计数分位各种变化的情况非常多，瑞士的千分位是用空格或者是单引号（既不是逗号也不是点）。而印度第一个逗号标在千分位，接下来第二个逗号却标在十万分位。下图是全球对小数点的不同标识国家的区别。
+
+<img src="https://static001.geekbang.org/resource/image/d4/98/d4d0d8dffc4acafac5415a61620f6398.png" alt="">
+
+如果再把货币符号考虑进去，那么情况会更复杂。有的国家把这个标识放在数字的前面，比如英国（£5.52），有的把标识放在数字的后面，比如法国（5,52 €）。
+
+和不同国家做线上生意一定要注意产品价格的标识处理，如果弄错可就闹出大笑话了。
+
+### 隐私法律法规的遵从
+
+各个国家地区对隐私相关的法律法规也各不相同。如果你为欧洲的互联网用户服务，结果导航到位于中国的服务器网站，那可能会遇到下图这样的通知。如果你不深入研究清楚当地的产品或者服务在本地化过程中，具体涉及的数据和隐私方面的法律法规，服务将无法正常开展。
+
+<img src="https://static001.geekbang.org/resource/image/3e/f3/3eyy55ed161d036bed49cc8a550ac9f3.jpeg" alt="">
+
+## 文化宗教差异性
+
+前面说的这些其实还好，因为你能找到明确的标准规范文档来参照。你在本地化的过程中经常需要面临更加严峻的挑战，那就是如何真正理解当地文化和宗教的差异性。
+
+永远不要想当然地认为你在本地成功的互联网服务到了另外一个国家地区，也会同样奏效。
+
+### 文化差异性的维度
+
+有很多维度可以去理解文化差异性，那我们具体从哪里入手呢？组织学专家川普涅尔（Trompenaars）把文化差异性分为七个维度，参见下图分别为：
+
+<img src="https://static001.geekbang.org/resource/image/70/e4/70a5e9d7f0cfb6dca64b4236fc88a1e4.png" alt="">
+
+1. 普遍性和具体性差异。前者认为法律法规更重要，后者则认为关系和信任更重要。
+1. 个人主义和集体主义。前者文化核心是“自我取向，自我实现”，后者文化核心是“群体取向，集体成就”。
+1. 具体型文化和扩散型文化。前者把个人生活和工作严格分开，后者则有重合和交叠。
+1. 中性文化和情感型文化。前者对情感是控制和抑制的。而后者是感情奔放善于表达的。
+1. 成就型文化和因袭性文化。前者认为地位与影响力取决于其所达成的成就（即教育水平、经验与工作绩效）。后者则认为出身、年龄、性别及社会联系等因素才决定地位与影响力。
+1. 顺序时间观念和同步时间观念。前者一次只办一件事儿，后者则喜欢同时做多个任务。
+1. 内因控制和外因控制。前者强调我们控制环境，后者强调环境控制我们。
+
+很多文化都可以通过上述七个维度来诠释和理解，这里面没有好坏之分。我在这里给你举一个简单的例子。比如拿购物这件事来说，下图左半部分是集体主义文化背景的购物平台，它就会选择凸显某个商品已经被多少人购买。右半部分为个人主义文化的购物平台，把商品的色彩选择放在商品缩略里面，反而把多少人给予评级放在了次级位置。
+
+<img src="https://static001.geekbang.org/resource/image/03/e0/03d6175252b5c7cdf519686d34fb3ee0.jpg" alt="">
+
+### 禁忌
+
+在理解文化的普遍差异性后，我们也要去理解一些不同地域文化的禁忌。因为这些雷如果踩到，影响可能是致命的。
+
+#### 色彩禁忌
+
+首先是色彩的禁忌。我在[04](https://time.geekbang.org/column/article/346347%E3%80%81)里提过这个话题。你可以对照下图再简单回顾下不同文化背景在各种场景下对色彩的偏好。比如红色在欧美代表停止和错误，所以股票跌用红色表示。但红色在中国代表热烈、吉祥和喜乐，所以股票涨会用红色表示。
+
+<img src="https://static001.geekbang.org/resource/image/ac/1d/ac5abd5dff42027f72885655daafe21d.png" alt="">
+
+#### 肢体语言禁忌
+
+对同一种肢体语言来说，可能这个肢体语言在一种文化中是正向表达，但是在另外一种文化里却是负向表达。我下面列了一个表，表里列出了一些一般人认为安全的正向表达的手势，但这些手势可能在某些文化里忌讳被使用。
+
+<img src="https://static001.geekbang.org/resource/image/b4/fc/b4e037eaaf6569b80619aab8df5235fc.png" alt="">
+
+也正是出于这个原因，我在为开放原子开源基金会设计吉祥物原子蜂的时候，选择的手势就是最为安全的比六手势。因为在不同文化中，这个手势还没有负向含义。
+
+<img src="https://static001.geekbang.org/resource/image/91/42/91a5023dc9fe124182087a5c113c4042.jpg" alt="">
+
+#### 宗教禁忌
+
+宗教禁忌是非常复杂的。除了不要在设计中带有明显宗教倾向的文字和图片之外，宗教禁忌也带来了复杂的饮食、着装、行为等等方面的禁忌。
+
+比如说印度教徒不吃牛肉，穆斯林不吃猪肉，还有相当多的佛教徒是素质主义者。所以类似麦当劳一样的快餐店在印度开展业务时候，必须做好本地化处理，由羊肉和鸡肉替代猪肉和牛肉，而且还必须增加素食菜品。
+
+我以前在华为有一个杂志锁屏的业务，这个杂志锁屏上的图片会不停更新，所以就必须去审核这些图片是否违反宗教禁忌。
+
+#### 人种和性别禁忌
+
+人种和性别是个敏感话题，我们在设计的时候务必要注意。如果在产品界面上会有很多人物的图片，那么在任何本地化的时候，记得要用本地化人物相关的图片，也要注意当地是否有性别歧视或者约束，必要时采用中性或者保守的图片。
+
+在一个多元化国家，不要都是白人图片，需要把其他人种也照顾到。下图中左半部分是正确例子，右边是错误的示例（右边进行了韩国的本地化，却没有见到韩国人面孔）。
+
+<img src="https://static001.geekbang.org/resource/image/d9/5d/d9e96262166a6aa2d1d2de017e383d5d.png" alt="">
+
+## 总结
+
+最后我来给你总结一下今天讲的要点。
+
+今天我们从语言文字、标准规范和文化宗教差异性诸多方面，来聊了聊本地化和全球化在体验设计上的注意事项。皮克斯和迪士尼动画的本地化处理是我们参照的标杆。
+
+在界面带文字标识的控件尺寸预留时候，要注意预留合理的长度，并通过自动适配伸缩控件长度、缩小字体大小和自动换行等方式来处理。不要牺牲可读性和易读性。所有的文字都要允许编辑和翻译，不要嵌入在图形中。
+
+在阅读习惯不同的文化中（从左向右和从右向左），基本原则是镜像布局调整。但电话号码、顺时针、媒体播放、右手习惯等不要进行镜像处理。在名字的处理上，品牌相关的名字翻译要考虑一般性解释、歧义、负面含义、同音字及知识产权情况。
+
+标准规范适配时要注意日期的转换。数字标点同样有差异性，不仅仅体现到千分位和小数点的用法，还有货币符号的先后顺序。隐私的法律的遵从同样也至关重要。
+
+文化宗教差异性上要从七个维度去理解文化的不同，并在体验设计中适配文化的变化。在禁忌上，要注意色彩、肢体语言、宗教以及人种和性别的禁忌。
+
+我还给你总结了一个脑图，你可以长按保存下来，对在设计中如何做好本地化和全球化会很有帮助。
+
+<img src="https://static001.geekbang.org/resource/image/8b/46/8b38764c859a080033f41e01d0dfec46.png" alt="">
+
+## 作业
+
+最后，我给你留了一个小作业，从今天我讲的内容，结合你当下从事的设计，如果在印度市场上做本地化改造，要如何适配呢？在你生活里比较常见的禁忌有哪些？

极客时间专栏/geek/基于人因的用户体验设计课/基础篇/19｜无障碍设计：人性之光.md

@@ -0,0 +1,188 @@
+<audio id="audio" title="19｜无障碍设计：人性之光" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/f9/90/f91defdba6b28f50b00ebc9268435990.mp3"></audio>
+
+你好，我是Rocky。
+
+今天我们来聊聊无障碍设计。很多设计师对无障碍设计犯怵，担心这个概念太大，无从下手。今天我们先从人群入手，我们来看看无障碍设计应该重点考虑哪些类型的人群。
+
+## 无障碍设计适用的人群范围
+
+从下图残障人士的大致分类中，你会发现这里面不仅仅有我们经常说的残疾人、聋哑人、盲人，还有其他各种需要我们照顾到的用户群体。
+
+<img src="https://static001.geekbang.org/resource/image/07/bb/07a05bab46ac24b22c151f565404f0bb.png" alt="">
+
+全球有大约有15%的人有不同程度的残障缺陷（接近10亿），而这其中有差不多1.1亿到1.9亿人有严重的残疾。2020年的新冠病毒给很多残障人士带来了更多的挑战，他们本来可以依仗的一些上门服务也受到影响。
+
+那么无障碍设计仅仅是为残障人士服务的吗？
+
+不能狭隘地这么理解，因为很多时候障碍可能是临时性的，又或者是由于特殊条件、特殊场景触发。这也就意味着，无障碍设计覆盖的人群和场景远比我们当初想的要多。下图就很好地说明了这一点。
+
+<img src="https://static001.geekbang.org/resource/image/1a/fa/1afc6b7fa48f0cf69875b4d5acd348fa.png" alt="">
+
+当你考虑完全单手握持的设计时，你要知道这个设计也会同样适用于单手受伤，或者单手负重而触发的单手操作场景。其实也适用于你站在晃动的地铁和公交车里的场景（因为这个时候我们得一只手拉着拉手吊环，或者是得用一只手扶住扶手）。
+
+当你改进了视觉障碍设计，这个设计同样适用于需要专注开车的司机，也适用于在艳阳高照的户外看手机的人。甚至适用于你忘带眼镜者手机碎屏的情况。
+
+听觉障碍设计不仅适用于听力障碍人士，在嘈杂环境中的普通人同样适用。
+
+说话障碍设计同样适用于感冒触发的喉咙沙哑或者社交恐惧症的朋友，以及出国旅游完全不懂外语的情况。
+
+而且几乎绝大多数的无障碍设计都适用于老人。很多老人都存在不同程度的视觉、听觉、肢体、学习和病理性障碍。
+
+说到这，是不是觉得无障碍设计距离我们当下的设计非常近。一个简单无障碍设计的受益人群和受益场景，肯定超出绝大部分人的预设。比如常见的电视电影节目的字幕，谁能想到当初它是出于无障碍的原因被设计出来的呢？
+
+下图的能力模型就形象地说明了这一点。存在障碍的是少数人，但是**对能力困难的用户都能适用的设计，必然也会包容能力不那么困难的设计**。所以无障碍设计很多时候也被称之为包容性设计。
+
+<img src="https://static001.geekbang.org/resource/image/7f/f4/7f638a8a5089791d8f39ced203b54bf4.png" alt="">
+
+好了，在带你理解了无障碍的使用范围后，接下来我会针对一些典型的障碍类型展开，和你谈谈如何做好用户体验设计。
+
+## 视觉障碍
+
+作为大屏的智能手机而言，最需要优先解决的就是视觉障碍的设计。全球约有4.5％的人（约3.15亿）患有色盲，有4％的人（约2.46亿）视力低下，还有0.6％的人（约3900万人）是完全失明的。
+
+而且别忘了，所有的视觉障碍设计的受益群体还可以扩散到更多的人群，更多的场景你可以参考下面这个表格。
+
+<img src="https://static001.geekbang.org/resource/image/7b/d8/7befcb8a755cdde900ed6febf2e557d8.png" alt="">
+
+### 屏幕阅读器
+
+彻底解决视觉障碍的设计就是完全采用替代交互，比如语音交互、物理按钮交互。苹果的VoiceOver和安卓的Talkback功能都是典型的完全替代视觉的设计（也就是屏幕阅读器）。
+
+如果你仔细对比VoiceOver和TalkBack的差别你就会发现，苹果更胜一筹。不仅仅是功能支持的完备性上，而且苹果在运用手势的独特性上更加符合人的认知。详细你可以参见下表了解一下两者手势的区别。
+
+<img src="https://static001.geekbang.org/resource/image/6f/22/6f5b3c480b838a6c092da7f6034d6722.png" alt="">
+
+安卓的返回桌面、关闭应用、打开本地菜单和打开全局菜单的一系列操作，用了毫无隐喻机械的上左、上右、下左、下右的L型滑动。这些滑动极为类似，增加了盲人的记忆负担。
+
+而苹果的返回桌面、多任务和关闭应用操作的基本逻辑和正常人操作手机的逻辑类似，仅仅是在触控和声音反馈上更为细腻。
+
+而且在全局菜单的调出上，VoiceOver用了一个特殊的方式（双指拧转），这个方式类似旋转一个圆形的物理按钮，而且屏幕上真的会出现一个旋钮。对于一个盲人来说，不必关心这个旋钮都有哪些选项，只要不停旋转下去，就会听到不同菜单项的名称，完全符合物理隐喻，参见下图。
+
+<img src="https://static001.geekbang.org/resource/image/cc/0b/cc1173e737b5089b73db8dd25da0960b.jpg" alt="">
+
+再说一个有趣的点，苹果提供了一个盲人屏幕隐私保护的功能。这一点是非常契合盲人的心理，因为他们不知道周边有谁盯着他的屏幕。但是白屏还是黑屏，对盲人的操作没有任何的影响。
+
+当然还有很多人并不是完全失去视觉，那么下一步要解决的障碍就是看不清。
+
+### 放大屏幕元素
+
+能放大屏幕信息的做法有两种：
+
+<li>
+仅放大字体；
+</li>
+<li>
+放大整个屏幕或者一部分（比如苹果的zoom，类似于屏幕放大镜的功能）。
+</li>
+
+前者是最基本的用户体验，后者是更灵活易用的无障碍体验。
+
+那么字体变成多大对于无障碍是合适的呢？
+
+一般要能放大到原来字体的一倍。对于正常人而言，手机上的最小字号不建议小于9号，而如果是进行字体放大，那么9号字体要至少放大到18号。因为字体的调整，你还要同步考虑所有字体都要保证同比例放大一倍（行距要保证仍是字体大小的1.5倍，段落间距仍是行间距的1.5倍）。比如下面的例子：
+
+<img src="https://static001.geekbang.org/resource/image/00/ec/00a209218f604259e3192302a37621ec.jpg" alt="">
+
+同时你还要注意，字体的放大是否影响到了布局的重新变化和调整。比如下图小图标本来在左侧，但是如果单纯原位放大小图标，会产生大量的留白，所以得重新调整布局，把图标放在右边。
+
+<img src="https://static001.geekbang.org/resource/image/83/54/8399c24374d031ebf272b93dcf2f5154.jpg" alt="">
+
+放大屏幕元素还包括线粗细的放大。避免使用细/极细的字形，除非字号足够大，否则不要使用极细描边的按钮和图标。
+
+### 足够的色彩对比度
+
+除了放大屏幕元素，我们还要确保色彩是清晰可见的。在大部分情况下，对比度越大越好。《网页无障碍内容指南》（简称：WCAG）规定，使用色彩对比度在4.5:1或以上的的配色设计，代表轻微视力下降者（也就是80岁老人的典型视力）可看清。除非字号足够大（大于18号或粗体大于14号）时，对比度标准可以降低到3:1。
+
+在网络上，你可以找到一些在设计过程中检测你的设计色彩对比度的小工具，比如下面这个[WebAIM色彩对比度检查器](https://webaim.org/resources/contrastchecker/?fcolor=0000FF&amp;bcolor=FFFFFF)。
+
+关于对比度的运用也不能过于僵化。比如在下图的蓝色和橙色按钮中，分别有白色字体和黑色字体的版本。如果严格遵守标准，白色字体其实是不符合标准，属于不易阅读的情况。但是事实上是白色字体更易读，而且色盲用户看起来尤为明显。
+
+<img src="https://static001.geekbang.org/resource/image/04/7d/04b2f3d8a22f3eyy47cd3751ee314c7d.png" alt="">
+
+### 照顾色盲用户
+
+我们继续来看如何照顾色盲用户。色盲有红绿色盲也有蓝绿色盲，还有完全看不到颜色仅凭灰度认识世界的全色盲。
+
+正是因为情况复杂，所以就要避免单纯靠颜色来区分控件的设计。下图在一个表单填写里，上半部分就是单纯用了颜色提醒的方式，结果红绿色盲用户会看不到错误的线索。而下半部分就既用到了色彩提醒也用到了符号提醒，同时还有文本提醒，这样就有效避免了单纯依赖颜色可能会产生的困惑。
+
+<img src="https://static001.geekbang.org/resource/image/37/87/373c2ffb7f5f00037bf747ff83c69e87.jpg" alt="">
+
+再比如下图里上下两个购物网站对服装颜色的选择。左边都是正常的界面，右边是红绿色盲看到的界面效果。显然下面网站的做法更好，因为下面的网站提供了文字辅助说明衣服的颜色是什么，能避免色盲人群衣服买错的尴尬。
+
+<img src="https://static001.geekbang.org/resource/image/61/bc/61d381593bd1d9a3d6247f4a6e4b6cbc.jpg" alt="">
+
+为了更好地做好界面设计，建议你使用类似[色盲模拟工具](https://colororacle.org/)，来具体模拟色盲人看到的效果。
+
+## 沟通障碍
+
+谈完视觉障碍后，我们再来聊聊沟通障碍。因为先天听觉有障碍的人在语言表达上同样会存在困难，因此我统一称为沟通障碍。现在世界上5％的人（约4.66亿）有听力障碍。预计到2050年，这个听力障碍的人数将会达到9亿人。沟通障碍的情况也比较复杂，我下表列了其中一些：
+
+<img src="https://static001.geekbang.org/resource/image/34/b6/34c34a967869206462b1c39953cea5b6.png" alt="">
+
+解决沟通障碍最好的方式是寻找替换方案。视觉沟通是很好的替换方式，对于存在声音的媒体播放同时给予字幕说明或者手语解释，这样能够很好地解决沟通障碍。
+
+打电话是非常常见的仅通过语音交互的方式。如果要解决打电话中的沟通障碍，那么可以采取在电话过程里加入语音自动文本翻译功能，以及通过文本自动翻译回语音并播放给对方听。小米闻声在这个方面有所尝试，但可惜它还仅仅是单独的一个转换工具，并不是一个嵌入手机电话应用中的功能。
+
+<img src="https://static001.geekbang.org/resource/image/3a/d4/3af2eff7fe7582bf99597a24212c22d4.png" alt="">
+
+相对而言，Uber在听觉障碍的设计就很好。你可以参考下图，司机可以明确告知系统自己为听障人士。这样后续抢单的提醒会额外通过闪烁辅助告知司机新的情况。
+
+同时这名司机的呼叫功能会被自动禁止，乘车人在选择他的服务后，必须要先输入目的地，并且后续也仅通过纯文本与司机交流，整个服务的全程都不需要语音互动。
+
+<img src="https://static001.geekbang.org/resource/image/ac/94/ac37510263321d8b4a3a9d700ec89994.png" alt="">
+
+## 肢体障碍
+
+我们接下来聊聊肢体障碍的体验改进。世界上大约有1%的人有肢体残疾，有大约1000万人患有帕金森症。当然，肢体障碍的情况也很复杂，我下面列了一个表，你可以参考一下：
+
+<img src="https://static001.geekbang.org/resource/image/e6/59/e6e230c9a32e1b621a1de08cf541ed59.png" alt="">
+
+我曾经在欧洲有过一次因脚骨骨折做轮椅的情况，体验了一把残疾人的生活。令我印象最深的是残疾人专用出租车，这种出租车有足够大的空间可以放下未折叠的轮椅，还配备了可以方便推残疾人上下车的斜坡。
+
+<img src="https://static001.geekbang.org/resource/image/c1/48/c1e31e0f2e7385b599d288d8fb44f748.jpg" alt="">
+
+言归正传，当我们上肢不方便但还得使用手机的时候，设计应该需要考虑哪些方面呢？
+
+首先要考虑的就是屏幕上触摸控件的尺寸以及控件之间的距离，都要足够大（至少44*44dp）。即便不够大，也要确保不同控件之间至少有12dp的空隙。
+
+因为对上肢不便的人来说，这就意味着手指灵敏度受限，要去精准地点击一个按钮会十分困难，距离过近的按钮非常容易被误触。下图左半部分对上肢不便的人群而言是正确的排版，右半部分是错误的做法。
+
+<img src="https://static001.geekbang.org/resource/image/b4/bd/b442be14cc0b28b1ea85eaae4fc315bd.jpg" alt="">
+
+同时要减少使用容易产生误解的手势。比如不要去设计“晃动手机取消”之类的操作，也不要在功能特性上去区分滑动（slide）和快速滑动（swipe）。Talkback有相当多的手势区分了滑动和快速滑动，这对于老年盲人用户的使用是非常不便的。
+
+## 认知障碍
+
+最后我们再看一下和神经系统有关的认知障碍。认知障碍有先天性原因也有病理性原因，当然也有一些是特殊条件触发或者临时性的状况，你可以具体参见下图。但不管是哪一种，最终都会影响人的记忆、注意力、感知、决策、语言、推理等等认知能力。
+
+<img src="https://static001.geekbang.org/resource/image/38/0f/3819b03900138444e0ee456de8c2120f.png" alt="">
+
+图形化的表达会对一些阅读文字存在障碍的人起到辅助作用，最典型的应用是系统图标。
+
+简洁的界面排版、避免过度复杂的色彩运用都能有效缓解认知障碍。同时你要注意，在文字中不要出现术语、缩略语、复杂词汇或古文字，要用一个可以容易理解的方式去描述。要给表单填写留够时间，不要急着要用户完成某些事情。
+
+其实所有的一致性设计都有助于缓解认知障碍人群的困扰。
+
+## 总结
+
+好了，讲到这里，我们今天无障碍设计的内容也就基本结束了。最后我来给你总结一下今天讲的要点。
+
+我们先谈到了无障碍设计适用的人群范围。无障碍设计不仅仅包括传统意义上的残障人士、盲人和聋哑人，更包括临时性和特殊条件、特殊场景触发的人群。所以很多无障碍的设计的体验改进都可以同步提升普通人的体验。
+
+在视觉障碍体验改进里最重要的就是屏幕阅读器。苹果的VoiceOver在手势设计上更加符合人的认知习惯和隐喻，而且也更加注重盲人的隐私。对于弱视人群来说，放大屏幕或者放大字体都可以改善体验。字体要能放大一倍，并且要考虑行间距、段间距、字体粗细以及因字体变化导致的页面布局的调整。
+
+色彩对比度要大约4.5:1，但是也并不绝对。不要单纯依赖色彩维度的信息提醒，也要用文字、符号辅助说明，减少色盲人群的交互障碍。
+
+字幕和手势是解决沟通障碍的好的方式。对于传统通话的体验来说，能将通话转化为文字沟通，是减少沟通障碍的关键体验点。
+
+考虑到肢体障碍人群，屏幕上的元素尺寸和间距要有保障，避免误触。同时要避免存在肢体障碍人群难以操作的手势。
+
+认知障碍的改进点，全部都适用于普通人的体验改进。因为解决认知障碍就是让交互更加自然、简单。
+
+好了，这就是今天全部的内容了。我还给你总结了一个脑图，你可以长按保存下来复习一下。
+
+<img src="https://static001.geekbang.org/resource/image/7c/8a/7c171ee5d89f3bc0c8d030e8b57db88a.png" alt="">
+
+## 作业
+
+最后，我给你留了一个小作业，你身边有亲朋好友存在无障碍设计的需求吗？你觉得在你生活里，哪一种无障碍设计对你受益最大？