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="">
+
+## 作业
+
+最后，我给你留了一个小作业，你身边有亲朋好友存在无障碍设计的需求吗？你觉得在你生活里，哪一种无障碍设计对你受益最大？

极客时间专栏/geek/基于人因的用户体验设计课/开篇词/开篇词 | 你为什么要学人因学？.md

@@ -0,0 +1,137 @@
+<audio id="audio" title="开篇词 | 你为什么要学人因学？" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/d9/06/d92c65a7c6a9db6f9578859e9b839006.mp3"></audio>
+
+你好，我是刘石，你可以叫我Rocky。
+
+我目前是开放原子开源基金会的品牌设计负责人。曾任华为用户体验设计系统部部长，负责用户体验设计的创新、规划，人因研究，品牌营销，设计工具开发，设计技术研究等等。去年初，我有幸被评为中国建国70周年用户体验设计70人之一。
+
+这次给你带来了一门课程叫《基于人因的用户体验设计》。这门课也是我在华为带人因团队几年来的一个总结和感悟。
+
+我从零开始筹建这个团队，在我离开这个团队时候，整个团队已经发展到40人的规模。这个团队由生理学、心理学、计算机工程学、体验设计等交叉学科专业的硕士和博士组成。
+
+在我成立团队之前，设计团队几乎没有人提人因研究这个词，也很少有人认为设计和科学会有什么关系。当时很多开发团队、管理层对设计师的定位就是美工。在这个团队成立后，整个组织逐渐加深了对人因学的认知。到了2020年，几乎所有的用户体验设计的卖点，在对外营销上都会提到科学、基于人因的设计。
+
+美，不止初见。所有的设计背后一定有科学的思考和逻辑。这个思想也深深地扎根在华为的体验设计中，我很欣慰，这应该是我留给华为的一个宝贵的非物质文化资产。
+
+那究竟什么是人因学呢？简单来说，**以人为本，根据人的习惯设计和改进产品，让技术的原点归于人的需求，这就是人因学。**人因学是一门十分重要的工程技术学科。人因学研究人和机器、环境的相互作用，让设计的机器和环境系统适合人的生理及心理等特点。人因学可以让我们生活工作更有效率、更安全、更健康和舒适。
+
+讲到这里，你可能有个疑问：人因学你说这么热闹，它真的可以解决设计问题吗？真的能让设计变得更好吗？
+
+好问题，不过别着急，咱慢慢来聊。
+
+## 为什么会有这门课？
+
+做设计你肯定遇到过这样的情况，你精心准备了一份提案，却被灵魂追问：“为什么要这么设计？”如果这个问题不能有让对方满意的答复，你的设计提案就会很轻易地被盖上“乱设计，瞎设计”的帽子。
+
+尽管我们内心的深处，会经常暗暗鄙视对方缺乏审美，缺乏设计修养，但我们却着实很难拿出来信服的理由来回应对方。这会导致设计提案流产或者最后被改得面目全非。
+
+那如何能说服这些理科背景的决策层同意我们的想法呢？那就得从共同语言讲起了。
+
+在体验设计中，共同语言非常重要。我们有人是左脑思维，有人是右脑思维（大多数设计师是右脑思维，倾向于相信自己的直觉情感，在逻辑思维、归纳推理上相对较弱）。
+
+如果要这两种思维的人对一个事物产生认知上的共鸣，就需要用某些双方都听得懂的语言。那么这种语言到底是一种什么样的语言呢？我先给你讲一个小故事。
+
+以前我作为一个理科背景的人，对艺术史上某些先锋艺术看不太懂，比如：立体主义，未来主义和超现实主义。但后来有一位艺术鉴赏大师给我点拨了一些这几个艺术形式和现代物理学的关系，顿时让我茅塞顿开。以后再欣赏这些艺术，仿佛开天眼一般，再无困惑和茫然。
+
+大师是怎么点拨我的呢？我来和你分享一下，你看看是不是很有意思。
+
+先说立体主义。我们来看看这幅毕加索的《带曼陀林的女孩》。这幅画本质上改变了我们正常的三维视觉，把更多维度在一个平面上集中呈现。
+
+这恰恰是在物理学热烈讨论多维空间的时候产生的艺术形式，也是以毕加索为代表的立体主义艺术家对多维空间物理学理论的致敬。
+
+<img src="https://static001.geekbang.org/resource/image/43/f2/430e9720ae8d575465f665d528aeccf2.jpg" alt="">
+
+而未来主义的画作，是把多个连续时间的图案叠加到一块画布上呈现。改变了一种艺术在一个空间上仅展示一个瞬间的表现手法。
+
+那个时候，基于时间和空间关系的相对论讨论风风火火。能从一个时间点延展到连续时间段在一个作品上的表达，这正是未来主义画家对相对论物理学的致敬。比如这幅《城市的崛起》。
+
+<img src="https://static001.geekbang.org/resource/image/c6/9a/c62bf9e7bd9655e308af9f6e638b259a.png" alt="">
+
+超现实主义比如说达利的作品《软钟》，这幅作品改变了一个物体的空间形态，仿佛空间发生了扭曲。而这正是当时爱因斯坦广义相对论提到的引力场引发的空间坍塌和弯曲。《软钟》下面马格利特的作品《戈尔礼达》，又何尝不是致敬测不准的量子力学？
+
+<img src="https://static001.geekbang.org/resource/image/c6/cb/c67bcc14c92yy82bdd6e99e0b7b693cb.png" alt="">
+
+<img src="https://static001.geekbang.org/resource/image/21/c7/214ed3f81ba0e5ffae0160717fdb77c7.png" alt="">
+
+当时听完这些解读之后，我佩服不已，觉得一个懂科学的艺术家是如此有魅力。后来，我经常把这个故事讲给很多身边的朋友，他们也同样对这些艺术作品产品留下难以忘却的深刻记忆。
+
+你看，如果做艺术的单纯讲美、讲设计理念，是不够的。要打动人，就必须对科学、工程有深入的洞见和理解。说白了，之前说的共同语言就是科学和艺术的结合。
+
+设计、艺术、科学、工程，这几者之间的关系并不是割裂的，实际上是两两相关。下面这张图，我觉得很有意思，简单说明了艺术、科学、设计和工程之间的关系：
+
+<img src="https://static001.geekbang.org/resource/image/49/97/4927f8f35bdf69994024453cfb02d897.png" alt="">
+
+艺术和科学都属于认知的抽象信息，一个是文化认知，一个是自然规律的认知。
+
+设计与工程都是具象的效用体现。设计倾向于文化表达，工程更倾向于对知识的经济运用。现代的工业设计，特别是电子产品相关的设计，更和科学工程密不可分。设计的背后一定是艺术、科学和工程的综合表达。
+
+艺术从来不是孤立的，背后一定伴随着技术、工程的发展和演进。没有建筑、数学、几何学、解剖学、生理学、动物学、植物学、天文学、气象学、地质学、地理学、物理学、光学、力学、土木工程等领域知识的累计沉淀和碰撞，如何得来辉煌绚丽的文艺复兴艺术？
+
+所有的精妙的文艺复兴绘画本身就是通过对人体解剖学、人体立体视觉的研究，从而把直线透视法大量运用在绘画作品中。设计何尝不是如此？
+
+而我的这门课，就是希望通过洞悉一部分设计背后的与人有关的科学与工程的真谛，从更上帝的视角来审视我们的设计，**让我们的设计更能在理科背景人群中得到共情共鸣，真正做到“以人为本的设计”。**
+
+**我坚信融入人因考量的产品设计才会更人性化，更具生命力。**
+
+换句话说，一个好的设计，必须科学地理解这个被设计物的使用者。理解使用者的特点，洞见他的痛点、痒点需求，结合人的生理局限、心理特征，理解场景的特殊性。这样的设计才是让人愉悦、轻松、令人感到可靠的。
+
+## 为什么你要学人因学？
+
+说到这里，我要对想听这门课的你再多说两句。
+
+这个系列课面向的对象是有一定设计基础的用户体验设计师，同时也面向希望更加理解用户的产品经理和开发经理。
+
+很多设计师在听体验设计课的时候，特别喜欢听一些具体的设计技巧、准则、方法。但我认为**作为一位负责任的设计师，真正懂得人，才能做好设计**。
+
+因为不同设计大师会总结归纳不同的术，不同的术甚至会有冲突，术也会随着时代的变化有改变。但是所有术背后的科学是不会变的，知其然更要知其所以然。
+
+如果你是一位设计师，我希望你在听完我的课后，能开天眼，抓住问题的本质，也能在如此繁多的设计技巧、设计准则和方法中提炼，去伪存真。
+
+很多产品经理特别崇尚用户调研、大数据挖掘来理解用户。也特别擅长通过这些来牵引设计师的设计，觉得自己比设计师更懂用户、更懂产品。
+
+如果你是一位产品经理，那么我希望给你带来一个全新的视角。这个视角能让你系统地了解经过大量针对人的生理学、心理学、生物力学和人机交互科学的研究积累而总结出来的科学规律，让你不会盲目地崇拜详细调研报告、崇拜大数据。
+
+我尝试让你洞见到这些数据报告背后的用户体验本质。更进一步，我希望你还能纠偏这些数据报告，也更容易在针对人的理解方面和设计师更好地沟通。
+
+很多开发经理或者开发人员觉得设计师是美工，不懂技术，很多体验都是空中楼阁。那么你更应该看看这门课，去了解一下你的设计师们到底有没有科学地进行了设计。
+
+而且我们这个课讲的科学不是你之前熟悉的计算机科学，是关于人的科学。别忘了，我们所有的产品都是为人服务的。只有大家达成对人的统一认知，才能有共同语言，不至于不同角色之间鸡同鸭讲。
+
+## 人因学应该怎么学？
+
+那么这个系列课，我们要讲哪些内容呢？人因学是一个庞杂的知识体系。作为一个交叉学科，它涵盖人类工效学（ergonomics），认知工程学（cognitive engineering）和人机交互（human-computer interaction）。
+
+<img src="https://static001.geekbang.org/resource/image/be/4e/bea87d46d4be29aab0d145eb7yy2de4e.png" alt="">
+
+这门课里，我不可能把这些知识都系统讲一遍，那是人因工程研究生的课程了。但我们要有一个基本概念，知道这个知识体系的范围有哪些。然后在设计实践中，如果遇到了具体问题，再进行针对性的知识点补课，也是一种在实践中渐进式学习的方法。
+
+我把我们的课程内容分为了预习篇、基础篇和高级篇。
+
+**预习篇**
+
+在预习篇我会先带你看一下，我们在设计中那些看似优美但是完全不符合人因学的设计。以及我们想象中的人和现实中的使用者有哪些不同。我会给你分析一下产生这些体验差的设计，是在哪些人因学的考虑上有所欠缺。
+
+我希望你能从预习篇中开始以空杯心态，尝试切换视角，从新的维度去理解设计。也希望在听完预习篇后，你能养成一个习惯，在做任何设计或者准备对任何设计发表意见之前，先多问自己一些为什么：我在为谁做设计？这个设计符合人的生理、心理的认知吗？
+
+**基础篇**
+
+在基础篇部分，我会从人的感知觉入手，从视觉、听觉、触觉出发，再到人的大脑对信息的处理，再到人的交互反馈：手势、语音交互等。我们也会从人的个体谈到人的社会性，谈到无障碍的人因学知识。
+
+通过基础篇的课程，你会构建人因学做设计的基础知识体系。如果你能主动结合自己的当下设计和产品的复盘去理解这些知识点，会更加深入地理解人因学的实操运用。
+
+**高级篇**
+
+在高级篇的部分，我会给你更多、更具体深入剖析的如何运用人因学的设计案例。包括偏视觉的：动效设计、美学设计、深色模式；以及偏交互的：智能交互、汽车交互、触屏交互、多模态交互、空间交互和普世计算交互。
+
+高级篇会让你更加深入理解这些知识点是如何在实战中灵活运用的。学会高级篇，我希望你能做到针对你自己精专的领域总结出自己的人因学设计宝典。成为手中无剑、心中有剑的大师。
+
+下面我为你整理了一个关于我们课程的总体知识地图，方便你理解。
+
+<img src="https://static001.geekbang.org/resource/image/0b/26/0b5e03fde1866608cf402875fbab1e26.png" alt="">
+
+在每一节课里，我都会通过一些例子来引出背后的人因学的理论，以及如何运用这些理论的设计建议和原则。
+
+同时我会在每节课后根据这节课讲的内容，留下一些作业，希望能带动你结合自己当前的工作，实操运用一下这些知识。
+
+这门人因学课程，是我在华为带领用户体验设计系统部这些年工作的一些感悟。也许这些感悟不是具体教会你如何画好插画，如何具体设计一个页面、设计几个交互流程，如何做好用户调研或者实验分析。
+
+但请你相信，**它一定会打开你的视野，把你从局部视角带到整体、多维度视角来审视你的产品设计，以一个更富逻辑和科学内涵的姿态回归到对人的理解，回归到设计的本质。**

极客时间专栏/geek/基于人因的用户体验设计课/特别放送/用户故事｜CC：了解自己，了解用户.md

@@ -0,0 +1,85 @@
+<audio id="audio" title="用户故事｜CC：了解自己，了解用户" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/6d/87/6d5c51d7a3yy3c462592eac99d435f87.mp3"></audio>
+
+你好，我是CC，坐标北京，目前在一家互联网公司从事技术工作。
+
+很幸运能够遇到这个专栏，这个专栏除了带给我有关产品设计方面的知识外，还让我重新了解了我自己。接下来我想跟你分享下我与这个专栏的故事。
+
+## 相识相遇
+
+我一直对“美术”、“设计”非常着迷。我觉得“设计”是一件很有意思的事情，并且设计涉及各个领域的知识，可以大大拓宽我自己的知识领域。
+
+<img src="https://static001.geekbang.org/resource/image/4e/53/4e15573d50fceb7f1d1ca5ab86c9e653.png" alt="" title="我画的大苹果">
+
+一试听完刘老师的开篇词，我立马就爱上了这门课。“基于人因的设计”正是我一直在寻找的多维度、多领域的设计知识结合课程。随着学习的深入，我不禁感慨，原来一款优秀产品的诞生是这么神奇！
+
+我虽然只算一个“门外汉”吧，但我觉得即使不是专业人士，我们在生活中也是非常需要人因思维的。在生活中使用产品时，我现在总是会下意识去测评一款产品有没有基于人因维度来进行设计、产品设计是否合理，这样也能帮助自己避坑。
+
+> 
+“一个好的设计，必须科学地理解这个被设计物的使用者。理解使用者的特点，洞见他的痛点、痒点需求，结合人的生理局限、心理特征，理解场景的特殊性。这样的设计才是让人愉悦、轻松，令人感到可靠的。”
+
+
+看了老师的这句话，我简直再赞同不过了。之前很多时候我在使用一些产品出错的时候，总会归结于是不是自己的笨手笨脚，但我现在会思考一个更深层次的东西：“这个设计到底是不是一个好的设计？如果不是，哪里可以进行改进？”
+
+## 感受世界的“繁”与“简”
+
+我印象最为深刻的是老师讲的“[重新认识感觉](https://time.geekbang.org/column/article/345556)”和“[重新认识视觉](https://time.geekbang.org/column/article/346347)”的部分。
+
+其中老师的一段话，给我提供了一个全新的角度去审视自己感觉和视觉：
+
+> 
+我们周边的一切事物，也是由设计来呈现出来的。人有肌体神经和半规管之类的器官去承担重力传感器、平衡传感器的角色，这些传感器能让我们能感觉到重力感、平衡感等不一样的感觉。这些传感器事先会对外部的真实世界的各种刺激做一个采样，然后传到大脑皮层进行加工处理，产生初步的认知。
+
+
+我之前从未如此去感知周围的一切。
+
+回想下，我之前在吃东西的时候，就只是很本能地把食物放进嘴里然后咀嚼。还有很多人，甚至不怎么嚼就直接咽下去了。但其实吃饭，就是一个需要我们去仔细感受的过程。我们不仅仅是用嘴去感受食物的味道，我们还会用眼去看食物的形状与颜色，用手去感受筷子夹起食物的感觉，用鼻子去感受食物的香味……
+
+当我们不再觉得吃饭只是一个很普通的日常，而是多去思考一层在吃饭背后我们的感官协作，或许这就是所谓的“用心吃饭”吧。
+
+刘老师对“留白”的讲解也让我印象尤其深刻。从我自己的感受而言，**留白在增加核心元素价值感的同时也会带给我一种力量感，同时还能衬托核心元素的重要性**。
+
+和你分享一个画家李禹焕的作品。我第一眼看到右侧这个大石头，它就给了我一种很重的感觉。石头看起来重不仅仅因为石头的颜色、形状，导致石头看起来很重。关键因素在于石头周边留白很大。
+
+在这个作品里，我们很容易第一眼就直接看向这块石头。我发现留白越大，越会衬托出这个东西的价值感以及重要性，有一种抽象的力量感。倘若周边放上其他的东西且距离很紧凑，就不知道要表达的重点是什么了。
+
+<img src="https://static001.geekbang.org/resource/image/01/7b/018ff92473a81a22378f563442b2347b.png" alt="">
+
+下图是19年我自己去悉尼玩的时候从远处拍的悉尼歌剧院。通过比较大的留白，是不是就很直接地捕捉到你的注意力了呢?
+
+<img src="https://static001.geekbang.org/resource/image/c2/e3/c201ded3b64df1536437f0f593ae87e3.png" alt="">
+
+## 了解自己，专注生活
+
+**了解自己，也就是了解了用户。**就如同老师在[10](https://time.geekbang.org/column/article/350939)节课中讲到，人无法并行完成多个任务，总体而言我们还是需要利用外界工具来记忆的。
+
+回归到产品设计本身也是这样，我们需要降低用户学习、记忆的成本，让产品本身执行记忆功能。正如老师讲到的：“一个好的交互系统，应该学会如何帮助用户做好收尾工作”。回顾我年前做的两个项目，虽然我们在“分组分块”、“面包屑导航”，以及“步骤线索”上做得不错，但是有时会忽略“帮人完成收尾”这一点，这个还是需要多多思考。**收尾，就是要让整个内容有闭环。**
+
+我一直很羡慕那些可以持续进入状态、高度专注的人，现在我知道了这并不是我个人问题。人的注意力时长是有一定时间限制的，在日后的学习或工作中，我可以加强训练自己在特定时间内的专注力，然后“中场休息”，再进入下一个阶段。这样持续性地反复训练，就一定能不断提高自己专注能力。
+
+说到专注，就不得不提“心流”。在第[12](https://time.geekbang.org/column/article/352609)节课里，老师讲到了“心流”这个概念。进入心流状态真的是很美妙的一件事情，但也确实是一个挑战（尤其是面对自己喜欢又不擅长的任务时）。
+
+和你分享下我最近经历的一次心流体验。当时我刚上完美术课，回家的路上发现经常逛的书店在打折处理一些书，于是我就边听歌边翻书，希望能够淘到自己喜欢的。忽然感觉有人离我很近，我抬起头看了一下这个人，又继续淘书了。过了一阵子我才反应过来，那人是我的美术老师。但我当时因为太过于沉浸看书，忘记和老师打招呼了。
+
+以及我自己在练琴的时候，就真的是完全停不下来，一点都不会觉得累，这种沉浸其中的感觉真是太棒了，唯一的缺点可能是总会觉得时间不够用。
+
+所以现在回过头再想想我对专注人群的羡慕，其实我自己也是经常沉浸在某件事中的呢！
+
+## 我的小小学习心得
+
+作为一门用户体验设计课，其实整个课程都是很容易把自己代入其中的，毕竟人人皆用户。所以在整体的课程学习上，我会结合日常生活中使用的任意产品作为参照来进行测评和思考，又或者完全借用老师举的例子来代入就可以了。
+
+细分到具体的学习过程里，我会分成两个步骤去学习。首先在第一个步骤里，我会只听音频，特别是在做一些不需要大脑思考的事情时听音频，然后边听边想。当然那么多的知识点，还要与生活中的案例相结合去理解，光听音频是不够的。
+
+所以在第二个步骤里，我会对照文稿进行学习。看文稿学习我会停下来重点看文稿里的图片内容，并且用一个更深度思考的状态去学习文字稿。英语有句谚语我非常喜欢：“Repetition is the mother of all skills”。我不是设计出身，在有些内容理解起来出现困难时，我就会多咀嚼反思。我觉得这个专栏真的需要反反复复地学，每次回顾思考我都会有新的收获。
+
+## 生活就是修行
+
+在学习这个专栏的过程中，我开始学会带着问题去使用产品。无论是自己还是他人的产品，都不应该单纯停留在使用层面，拿到手就无脑用。而是应该去感受、体验这个产品是否真的好，如果好它究竟好在哪里。
+
+我将我实际的体验思路分享给你参考一下。
+
+首先我的第一反应会是记录下这个产品的优缺点，思考我是如何被它吸引、又是排斥它哪一点。其次，我会感受我在使用过程中的流畅度、沉浸感、愉悦感等。最后，我会再反思一下这款产品设计的目的是什么、是否以用户为中心、设计是否科学合理、它给用户带来了什么、它有没有使用户变得更好等等这些问题。
+
+专栏的学习还没有结束，我感觉周围的一切变得比以往更有吸引力了。我学会了如何去“欣赏”周围的事物、如何发现它们的美。学习这个专栏的收获比我预想的要多很多，老师不只讲了理论，还结合案例让我从局部到整体，科学而深入地理解了产品设计。
+
+我越发觉得生活就是一场修行。学习人因的课程让我大大增加了对生活的感受度，这是“借事修心”。虽然在工作中每个人对产品设计都有不同的理解，在交流中难免出现分歧，但人因让我更懂得我们的初衷是使产品为人服务，这是“回归本源”。

极客时间专栏/geek/基于人因的用户体验设计课/特别放送/用户故事｜JT：设计为生活赋能.md

@@ -0,0 +1,131 @@
+<audio id="audio" title="用户故事｜JT：设计为生活赋能" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/9e/a8/9e3540a9c7656bf55fd9e6f101f2efa8.mp3"></audio>
+
+你好，我是JT，目前在杭州一高校工业设计工程专业就读研究生，所涉及的研究领域有智能交互和游戏交互相关的设计内容。
+
+## 初识设计
+
+先和你分享两本算是带我入门设计的书吧。一本叫《设计方法与策略：代尔夫特设计指南》，这是我读的第一本设计相关的书籍。我看了目录介绍后特别感兴趣，就立马下单入手了。读完后给我带来最重要的认知更新在于，原来设计的流程和开发竟然是如此相似，设计并不如我之前想就是艺术、是天马行空的玄学，它也和开发一样可以通过科学的方式得出合适的结果。
+
+<img src="https://static001.geekbang.org/resource/image/30/e1/3034c6634ce591927906f92586c908e1.jpg" alt="">
+
+由于当时我还不懂设计，无法深入理解也没有结合实际运用这本书，只有个大致的印象。等到后面我踏入设计领域再回头看这本书时，其中的很多设计方法总是能再次刷新我自己的认知，这是一本我准备一直反复刷的书。
+
+另一本书叫《用户体验要素》，这本书更浅显易懂地讲明了一个产品从想法到落地的路径是怎样的，我通过这本书第一次了解了以用户为中心的设计概念，这本书也就此打开了我踏入交互设计行业的大门。
+
+<img src="https://static001.geekbang.org/resource/image/cb/4f/cb5752af01330fef9855030dfe1b6b4f.jpg" alt="">
+
+再和你分享一个我非常喜欢的设计。
+
+在2019年我看了一场华为发布会，当时发布的Mate30系列有一个新增的功能——“AI隔空操控”。用户可以在不接触手机屏幕的情况下，实现滑动、截图等操作。我当时打心底认为，这真是一个解放双手的神器。从用户体验角度来看，这是非常棒的交互设计创新。
+
+<img src="https://static001.geekbang.org/resource/image/41/10/419c7b62cfca61dd8937e6179621e010.jpg" alt="">
+
+我是从计算机专业跨到设计专业的，相比拥有专业设计背景的同学，对设计方法论的把握会有一些欠缺。在了解完刘石老师个人介绍后，我感觉我和刘石老师有一定的共同点，我们都有交叉学科的经历，有一种遇知音的欣喜。
+
+再后来，我在IXDC的文章中看到刚刚说的“AI隔空操控”功能是刘石老师团队的设计，这更让我有一种这门专栏一直在静静等我的感觉——在遇到这个专栏之前，我就已经喜欢上专栏作者的设计了。
+
+## 我的学习四步法
+
+前面的算是一段我和设计的“不解之缘”吧。接下来我和你分享一下我学习这个专栏的小小心得。我把学习专栏分为了四步：
+
+**第一步，学习。**
+
+我会先在碎片时间听一遍音频，刘老师的讲述感非常棒。听的过程中我会先大概记住能触动到我的点，然后在电脑上打开课程和笔记软件，记录下知识点和自己的想法。由于这样的学习方式还是比较碎片化的，很难保持高专注度，所以在学习这一步里，我会在电脑上再浏览一遍文字稿进行细致地学习，有疑惑的内容也会查阅其他资料。
+
+**第二步，思考。**
+
+专栏内容干货满满，其实对思考的要求是比较高的。所以我会根据老师讲述的知识，去生活中或工作学习中去寻找对应的案例，深化理解，这样会对知识点有一个更深的印象。
+
+**第三步，讲解。**
+
+除了学习和思考还是不够的，为了进一步理解并为运用打下基础，我会把自己学习到的内容向身边的人讲解。当然，这个前提是要找到愿意听的人。所以我想分享知识点时，会拉上身边学设计的同学或者是对设计感兴趣的朋友，一起探讨某个有意思的人因知识点。
+
+**第四步，实践。**
+
+最后一步就是实践了。这也是我目前努力的方向，我接下来除了学术研究外还会参加设计方面的比赛，希望人因课程能够成为我最佳的比赛助力。当然不参加比赛也会有很多的实践渠道，比如我在用一些App时，会更多地去思考它们有没有人因方面的考量，自己填各种用户反馈问卷时候，也没那么排斥了。甚至是吃饭的时候，我也会去思考怎样摆盘才是最方便舒服的，以及为什么这么摆最方便。
+
+## 学习后所带来的启发
+
+刘石老师在[预习篇](https://time.geekbang.org/column/article/345053)借由《设计心理学》的本能层、行为层、反思层来衡量什么是用户体验设计，我想和你具体分享一下这节课给我带来的一些启发。
+
+**本能层**的设计能让人体会到产品的吸引力，让人感觉良好。如果一个产品在视觉、听觉、嗅觉、味觉和触觉五个方面都能提供给用户一种舒服的自然反馈，那么这个产品在本能层的设计就是成功的。我们通过用户与产品之间的接触互动来增强感知、优化感知、利用感知，从而有效达到本能层设计的目的。
+
+例如在支付平台中绑定银行卡输入卡号时，如果是得一口气输入10多位数字，可能你需要检查很多遍才能确定是否输入正确。
+
+但是如果你看到的界面是一张空的银行卡，然后输入时数字会依次显示在卡片上，而且数字还分隔开，这样一来你识别输入是否正确的效率就会高很多。
+
+因为你已经习惯了银行卡或信用卡的卡号记录方式，以及它的外观一张一张放在钱包里的样子。当把银行卡还原到手机当中去，它还是以日常的形式出现在你面前，所以你本能上就能感觉到这是在输入自己的卡号。
+
+<img src="https://static001.geekbang.org/resource/image/bc/64/bc3e2dac0cc9ee6892aa66e38cf2c264.png" alt="">
+
+**行为层**设计关注点在于一个产品能否提供给人们合适的交互方式，是否易于理解和被使用。尤其是对功能性产品而言，产品的性能是不可忽视的。
+
+我们还是接着说那个输入银行卡号的例子。一般的输入卡号的方式就是键盘输入，但是现在有了图像识别技术，我们只要通过摄像头扫描就能获取到相关的信息，再检查核对下是否一致即可。不用手动键盘输入就结束了记录卡号的步骤，这就是一个很不错的行为层设计。
+
+<img src="https://static001.geekbang.org/resource/image/8e/84/8eb7a3f05c5af1a3acccd5232a50e584.png" alt="">
+
+与本能层和行为层相比，**反思层**的设计有很大区别，反思层设计涉及了更多的领域，它与文化、时尚、信息以及产品的定义和功能都密切相关。
+
+一个物品能激起某些人的情感，而另外的人则不会有对它情感上的波动；一个物品在某些文化里也许会引起很多人的共鸣，而在其他的文化中则不会引起一丝涟漪。
+
+最近很火的各类故宫联名（美妆、电竞设备甚至热水袋），其实都做出了很不错的反思层设计。
+
+<img src="https://static001.geekbang.org/resource/image/c6/ec/c6529dfc3cf1e1c1db3ecc3e4008ebec.jpg" alt="">
+
+## 人因之我见
+
+我研究生阶段主要接触的是智能交互，所以平时会有刻意去关注一些关于智能穿戴、AR/VR的内容。接下来我想结合专栏的知识，再和你分享一下我对智能穿戴的想法。
+
+从市场层面来说，智能穿戴涵盖了医疗、保健、游戏、娱乐、音乐、时尚、交通、教育等多个领域。从健身的可穿戴设备来看，当前市场上有的产品可以记录每天行走的步数、运动消耗的卡路里、减肥的运动量，还有的还具有姿态识别、加速度计算、力的反馈等等功能。
+
+<img src="https://static001.geekbang.org/resource/image/cc/80/cc5c8f480228c9e71dab307f4d309b80.jpg" alt="" title="Athos智能运动服">
+
+在智慧医疗的背景下，有的设备能通过记录心率、睡眠情况来改善睡眠质量。智能穿戴把人体静态、动态的生命体态特征进行数据化，给医疗帮助提供科学依据。
+
+<img src="https://static001.geekbang.org/resource/image/c4/a3/c4a0b2d71cc6227348730064dc60aca3.jpg" alt="" title="Omron血糖测量手表">
+
+除了不同的场景以外，不同的人群使用到的智能穿戴设备也会不一样，例如有专门给婴儿、老人这些特殊人群设计的智能穿戴设备。
+
+<img src="https://static001.geekbang.org/resource/image/86/87/8682d43c686a011435e77c5534c8c887.jpg" alt="" title="Sproutling婴儿监测器">
+
+<img src="https://static001.geekbang.org/resource/image/98/01/9862c98455a32543b9696a39129c9101.jpg" alt="" title="Active Protective 医用可穿戴智能腰带">
+
+**智能穿戴的用户体验设计要关注人、机、环境三者之间的因素。**例如智能穿戴设备给谁用、在什么场景下用、怎么用，以及人与智能穿戴、智能穿戴与终端控制和内部各个传感器之间的关系是怎样的等等。
+
+外界信息80%是通过我们的眼睛来接收的。所以就获取信息而言，眼睛是最高效的，与眼睛相关的智能穿戴就是眼镜形式。
+
+我很看好类似Hololens 2这样不受线缆束缚的混合现实设备。试想这样一个场景，在工厂装配车间内有非常多的机械零件需要人工进行组装，传统的方式就是车间工人根据平面装配示意图去组装，或者根据经验去排查机械中的故障。是不是感觉很费劲？
+
+<img src="https://static001.geekbang.org/resource/image/6e/34/6e2b95607c37556f94c74903d3476534.png" alt="">
+
+但是现在如果有一款眼镜，你戴上后看机械零件时能自动显示三维装配步骤、零件式样、最终效果，或者能够扫描出三维显示出机械中的故障点。在观察的过程中你不需要动手去翻图纸或者切换屏幕，可以直接双手对机械进行操作，如果自己不能解决还能连线视频专家快速解决问题。
+
+我每次想到这样一个场景就激动不已。
+
+<img src="https://static001.geekbang.org/resource/image/b1/85/b1f0c25b46f9a1a1ef93a80421b71c85.png" alt="">
+
+而这个眼镜的设计就非常需要人因工程学的指导。
+
+如果我们光从戴上去是否方便、舒适来看，如果戴上去过程繁琐，戴着感觉夹头或者感觉很重，因为还没正式开始使用就已经使人不舒服了，那么人们使用它的频率自然不会高。
+
+这个反馈看似很浅显，其实就已经涉及了很深的人因问题了。在做产品硬件时，它的造型结构是否符合人体工程学、材质是否轻量化、结构是否易于使用等等一系列问题，能回答的只有人。针对人做的智能穿戴设备在设计初，就得从人因角度出发去考虑各种问题，以科学的方式来进行设计。
+
+虽然有的智能穿戴产品已经非常高科技，能够做非常多的事情了，但是体验、效果俱佳才是人们购买的决定性因素。
+
+## 对体验设计思考的变化轨迹
+
+在学习过程中，我常常会思考实际生活中我们能在哪些方面发现设计的价值，随着不断地学习我的思维也在不停地变化。
+
+本科期间做网站项目时，会感觉网站设计做得好丑，所以我会从主观意识上认为，设计其实就是为了好看、美观。
+
+到后来接触了《代尔夫特设计指南》这本书，发现做设计和做开发流程相似，都是有根有据的。从发现问题、提出问题、分析问题再到解决问题乃至于更新迭代，走完生命周期，不是凭空想象出来单纯为了好看的。
+
+《用户体验要素》这本书时让我更加系统了解设计是分层级的，从公司提出战略目标到最终投入市场交付产品给用户进行使用，这是一层一层进行的，好看只是用户最初接触的最浅显的一层，更多深层次的东西自己还没真正了解过。
+
+开始学习交互设计深层次内容时我曾一度认为，交互设计其实就是人机交互。后面逐渐发现，人机交互只是交互设计的微观层面。从宏观层面来看交互设计还包括人与物、人与环境、人与人之间的设计。
+
+学习完人因设计的课程后，又多了很多新的思考。比如我现在去星巴克，就会下意识在门口感受一下咖啡香，心想：“这是用嗅觉的体验来吸引顾客”。咖啡店里慢节奏的音乐，服务员专业、友善的服务态度，这使快节奏的生活突然慢了下来，让顾客在等咖啡的那段时间也不会在店里无所适从。我现在更加能够理解星巴克为啥能够这么火了，星巴克的设计者真的有从人的角度出发，去以人为中心来做设计。
+
+随着我自己对体验设计的不断学习，我感觉自己对于生活的认知也在不断更新，对生活的感受度也越来越高了。我觉得人就像一个器皿，我们总得不停地往里面注入点其他东西。不是“器皿”本身赋予了我们生活意义，生活的重点在于我们选择为自己注入什么。
+
+希望你也能够时刻保持对新事物的热情，我们一起学习，不断更新我们的生活，持续为生活赋能。

极客时间专栏/geek/基于人因的用户体验设计课/结束语/结束语｜重新认识你自己.md

@@ -0,0 +1,72 @@
+<audio id="audio" title="结束语｜重新认识你自己" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/0f/b1/0fb1934e5e6ab9f576c478aacyy587b1.mp3"></audio>
+
+你好，我是Rocky。
+
+《基于人因的用户体验设计课》已经到了最后的结束语了。从开始筹备这门课到现在，差不多已有半年的时间。回想这几个月的点点滴滴，感触良多。
+
+## 沉淀，让我审视自己
+
+如此系统地准备人因系列课程，还是第一次。这门课是我这么多年来关于人因的经验和感悟的总结。
+
+首先我想和你分享一下我在做专栏期间，有关于录音的一个小插曲。我录制音频的环境其实不是特别理想，我家里有两个很淘气的儿子，还养了两只调皮的泰迪犬。为了录制出自己满意的音频，我选择去办公室录音。可是办公室空调系统每隔十几分钟就会出现压缩机的巨响，周末的时候还会遇到上下楼层的办公环境改造装修，叮叮咚咚地不停，貌似办公室录音也行不太通。
+
+最后我记录下了空调响一次的时间间隔，看表提前对空调的响声进行预判。至于装修，我就等装修工人下班了我再录。就这样，这个在办公司录音遇到的小问题就解决了。
+
+孩子们经常和我说，爸爸好像比在华为工作的时候还要忙得多。确实，做这门课牺牲了很多陪伴家人的时光，我经常停笔后发现已经凌晨一两点钟，也有在办公室的沙发上通宵的时光。甚至是过年期间我也抽出了不少时间写稿录音。
+
+<img src="https://static001.geekbang.org/resource/image/86/cf/86fdf8f07052f7da7a9a496e725505cf.jpg" alt="">
+
+但是我觉得这些时间都用在了刀刃上，现在回头看看这门课，满满的成就感。我非常看重这个审视自我，进一步梳理自己知识体系的机会。创作专栏的过程，也是查缺补漏、自我完善、提升思考的维度，实现自我升华的过程。
+
+能完成这门课，其实很感谢你的学习。
+
+每当深夜略感疲惫的时候，每当思绪短路迟迟不能落笔的时候，我总是会想起有那么一群小伙伴在等待更新，心里总是暖暖的，也瞬间充满了力量。通过这次课程的准备，我突破了自己的舒适圈，也让我重新认识了自己。甚至经过这次课程的梳理，现在再细致揣摩自己曾经的一些项目，发现仍有很多改进的空间。
+
+## 人因，助你拥抱新我
+
+学习这门课程你会发现，你既可以系统性地按着课程顺序学习，也可以针对自己感兴趣的课程，跳跃式地学习（这门课的每一节课几乎都可以独立成章）。如果把人因设计比作一本武林秘籍的话，那么每一节课就相当于武林秘籍的一招一式，都可以单独拿出来实战运用。
+
+但是我还是希望你不要仅仅拘泥于一招一式，如果你是全部系统性学完，应该会发现课程的设计是遵循严格的逻辑来梳理的：
+
+- 从人的视、听、触的感官输入到人脑的思维、情绪的处理，再到人的触屏、语音模态的输出；
+- 从个体到社会性，从普通人到残障人士；
+- 从普通的触屏设备到新形态、多屏互动；
+- 从单模态到多模态、从单设备到多设备。
+
+整体而言，我希望这门课能够带你由浅入深，带你走进一个顺应人的生理、心理规律，理解人所处的环境，尊重技术边界的人因设计思维体系。
+
+我在整门课里提到最多的一个词就是自然交互。这个逻辑类似于文艺复兴艺术的自然主义，自然主义要求用心观察感官体验到的事物，从中洞见到规律，并把这些规律运用到创作上。自然交互也是如此，只不过更加借用科学的研究手段，把这种自然主义发扬光大了。
+
+如果你能融会贯通整个体系，你就会在基于一招一式的基础上厚积薄发，达到物我两忘，任意遨游的境界。
+
+如果你是一位年轻的设计师，希望这门课能升级你的设计思考维度，为你的设计提供扎实的理论支撑和帮助。
+
+如果你是一位有丰富设计经验的设计师，希望这门课给你的设计思维打开一个新的天窗，让你的设计理论体系更加完整和扎实。
+
+如果你并不是一位设计师，其实也没有关系。从宏观层面上来讲，人人都是设计师，我们每时每刻都在做设计，都在经营我们的生活。你可能设计的不是软件，而是你的家、一款产品、一些代码，又或者是一个公司或者组织的流程。
+
+不管你设计的是什么，只要你需要有意义、有次序、有意识和富于直觉的努力，那么这门课应该就会给你启发。它会告诉你，**理性系统的设计思考为什么会好过糊里糊涂的应对**。
+
+我真心希望这门课能让你忘掉那个对自己身边体验麻木的旧我，拥抱关怀人性、让世界变得更加美好的新我。
+
+希望这门课能帮你重新认识你自己。
+
+## 开源，让我们共同成长
+
+而且，学完这门课不应该是你的终结。
+
+知识是会迭代的。任何课程的内容，都会有对应的生命周期，有老化的时候。但是正如生命繁衍演化的逻辑一样，知识也要持续不断迭代更新，才会生生不息。
+
+我希望你在学过这门课之后，开始以不一样的视角和思维惯性，去审视以前本没有疑问的设计。你并不需要简单遵循我总结出来的规矩，更要从前人的总结里汲取营养后，结合自己的实践做进一步的思考和研究，相信你最终会得到很多让你惊喜的想法与作品。
+
+当然了，如果你能够把这些感悟梳理成一个知识体系，在留言区一起分享就更好了。让我们一块迭代更新这门课程，让人因这棵大树更加枝繁叶茂。
+
+我现在从事的是开源工作，开源强调的是：“**共建，共治和共享**”。知识开源也是其中重要的一个维度。
+
+<img src="https://static001.geekbang.org/resource/image/25/77/2502a31f5e223a19b788143cc2462377.jpg" alt="">
+
+最后，我也希望你能够借鉴知识开源的理念对待这门课，广泛传播给还没有学过这门课的小伙伴，让更多的人受益，共享这些知识，共创这个知识体系。如果国内的设计团队都能够理解这一点，就会更容易成长，就能更快把国内的设计师都拉到一个新的创作思维高度，从闭源设计到开源设计，那将是我最大的荣幸和期待。
+
+感谢你的一路相伴，不说再见，我们加餐和留言区见！
+
+[<img src="https://static001.geekbang.org/resource/image/38/92/38c8f6d62247ebb175d4477d406bbd92.jpg" alt="">](https://jinshuju.net/f/Hnqk0c)

极客时间专栏/geek/基于人因的用户体验设计课/预习篇/01 | 什么是用户体验设计？.md

@@ -0,0 +1,199 @@
+<audio id="audio" title="01 | 什么是用户体验设计？" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/d0/42/d0c5c16287b57e5da0faf0cb190a5242.mp3"></audio>
+
+你好，我是Rocky。
+
+这节课是我们预习篇的第一课。在课程开始之前，我想先问你一个非常基本的问题：我们到底在为什么而设计？
+
+这个看似简单的问题，却不那么容易回答。你可以说我们在为用户体验而设计。但是我如果接着问你，到底什么是用户体验，你能立刻回答出来吗？
+
+## 什么是用户体验？
+
+其实在不同角色看来，用户体验代表不一样的涵义。你可以看看下面这幅图，不同人都基于自身的角色，对用户体验都会有自己的理解。
+
+如果把大家都拉到一个会上，结果往往是七嘴八舌，每个角色都会说自己的领域在用户体验上更为重要。而这常常会引起各方冲突，最终导致不欢而散。
+
+<img src="https://static001.geekbang.org/resource/image/33/a9/337b78ea09b94ef592085c39e6c22ca9.png" alt="">
+
+在大家都尝试给用户体验增加不同维度来阐述的同时，我更希望能回归本源。这个词到底是怎么来的？
+
+其实最早提出用户体验的是唐·诺曼，就是那个被很多人奉为世纪最有影响力的设计师，那个写《设计心理学》的大胡子。他提出用户体验的时候，最希望表达的是用户体验要以用户为中心，去思考人和物交互的方方面面。
+
+更进一步讲，**以用户为中心，就是要从心理学、生理学等维度去理解人，探讨人和世界的关系。**如何界定这种关系呢？
+
+## 体验设计的三个层次
+
+如果围绕人来看，人对世界的体验认知大体可分为三个层次：
+
+- 最基本的层次是**本能层**，属于第一印象，潜意识的产品吸引力；
+- 接下来是**行为层**，是开始使用产品后的易用性和交互体验；
+- 再深入是**反思层**，即产品的意义和使用者产生的情感升华。
+
+<img src="https://static001.geekbang.org/resource/image/b4/4d/b40219534ecdc2074c1c1d909b7cbd4d.png" alt="">
+
+### 本能层
+
+本能层体验，有时也被称为蜥蜴脑体验。人有最直觉的潜意识反应，那就是好或者不好，安全或者危险。
+
+本能反应是最直接的用户体验，是你第一次遇见美丽爱人的一见钟情，是精致摆盘的秀色可餐，是流线型曲线跑车的优雅迷人。这种体验和种族和文化无关，来源于人天生的本性，来自于感官层面。
+
+**如果你的产品，在第一印象、本能反应上都抓不住用户，那你的起点就落后了。**
+
+我记得有一次罗永浩专访刘作虎。老罗问刘作虎，说：“我们都差不多一起出道的，为啥最后一加成功了，锤子没有成功？”我相信老罗在问对方的同时，也在追问自己。
+
+造成这种情况的原因肯定是复杂的，我这里仅谈一个采访过程中的小细节。刘作虎提到了BabySkin这个材质的机身材料，这种材料摸起来就像婴儿的皮肤一样舒适，手感特别好。
+
+手机作为你每天都拿在手里的东西，这种触感是多么地重要啊？相比而言，老罗的锤子手机就跟这个名字一样，有棱有角，握持手感不舒适。其他的因素暂且不论，光从触觉的直觉感受来说，锤子在本能体验上就输给了一加。
+
+<img src="https://static001.geekbang.org/resource/image/cb/f0/cb09ea96035f6f181487400bd06367f0.jpg" alt="">
+
+再给你举一个极端的例子：Alessi 是一个超有个性的家庭用品设计制造商，这家公司最有名的一个设计就是菲利普·斯塔克设计的外星人榨汁机。
+
+<img src="https://static001.geekbang.org/resource/image/22/49/223772d5dff82e538d27387bef0b2149.jpg" alt="">
+
+如果你在厨房用品店看到这么一个怪物，肯定会被它所吸引。这个榨汁机看起来就像一个外星生物，它有三只类似蜘蛛的尖锐长脚，长脚上面是一个大大的头。
+
+如果售货员跟你说这是一个橙子榨汁机，你一定很好奇这东西是如何工作的？
+
+外星人榨汁机的大概使用方法是你先用刀切好一半橙子，倒扣着压在这个东西的顶部，然后拧转，橙汁就会顺着螺旋凹槽流到下面的玻璃杯里面。在你使用的时候，其实橙汁会顺着手腕流进袖子里，也会顺着三个支架流到桌子上，你有时甚至会被溅到满脸的橙汁。
+
+但你并不会因为以上的情况而感到烦恼。你已经买了它，而且这一切的体验变成了和其他朋友的谈资。可以说这个东西在真正的使用体验上非常糟糕，但是人们买它，就是因为它满足了人们的本能层的体验。**它足够酷，这就够了。**
+
+### 行为层
+
+在本能层的基础上是行为层。人总是尝试和未知世界接触并产生交互。小孩子是用嘴巴舌头去探知世界，成人多是用手触摸。
+
+行为层还是属于潜意识的层面。如果在潜意识的尝试得到了成功的反馈，那么用户会产生信心和满足。如果反馈失败了，用户会产生挫败和沮丧（多次失败甚至会产生愤怒）。如果没有反馈，用户会产生困惑。
+
+那些注重使用体验的实践主义者，会把行为层体验看得非常重要。但在我们的日常生活中，有大量在行为层体验失败的案例，而且好多我们都容忍了下来，甚至视而不见。
+
+就拿我生活里十分常见的开酱油瓶这件小事来说。我之前每次开一瓶超市买的新酱油瓶盖时，会很紧张。
+
+因为根据我的历史经验，大约有1/3的概率会出现拉环扯断但封口没有被打开的情况。然后面对事故现场，我会去找一把剪刀（或者用厨房的水果刀），去二次暴力打开酱油瓶封口。并且后续我每次做菜倒酱油的时候，总是有时候多，有时候少，非常难控制倒酱油的量。
+
+我后来偶然在欧洲的超市，遇到了一种日本的万字酱油瓶。你第一次开启这种酱油瓶时，需要正常旋开瓶盖，简单拿开内部的密封胶圈，然后把瓶盖再拧回去。
+
+你之后再用这个酱油瓶的时候，就再也不用去拧瓶盖了。在瓶盖上有两个对称的小开口，如果你希望少倒点酱油，在倾倒时就按住上面的小口，气压就会减缓酱油滴下的速度。如果你希望多倒些酱油，就让上面的小孔通畅。不管是打开酱油瓶盖，还是后续酱油瓶的使用，整个过程都是很优雅地完成。这种万字酱油瓶就是易用性的典范之作。
+
+<img src="https://static001.geekbang.org/resource/image/42/0f/42fdb6402aaf97b42d3b24d4b566f10f.jpg" alt="">
+
+现在我们坐飞机，其实也有非常多的设计在行为层的体验理解上糟糕透顶。我随便说几个：
+
+- 你在飞机上，有没有遇到过耳机插孔非常难找的情况？即便你找到了，是否会纠结在左侧和右侧的扶手上都有插孔，到底应该用哪个？
+- 如果你坐在最前排的座位或者在某些商务舱，你会不会在找餐盘或者影音娱乐系统的时候很费劲？
+- 你在第一次坐飞机的时候，会不会想打开上面行李架的门，但很犹豫到底该如何打开？
+- 你是否记得第一次用飞机上的洗手间，对于打开洗手间的门到底是拉还是推而纠结？
+
+以上所有的案例都是对人行为层的理解不到位的设计。这种案例在生活中太多了，如果你足够细心，你会发现一大把。
+
+你会遇到装反电池，你会在锁完车才发现车窗没关，你会反复试几次才能在离开办公室前关掉所有的灯。我们大多数人会把对这些行为层的不好体验归罪于自己的笨手笨脚，然后产生自责。我们很少会认为这种糟糕的体验是产品设计问题。
+
+在交互设计中，产品设计者经常会觉得自己已经充分考虑了行为层，但其实还差得远。因为理解人的行为，需要对人的行为心理学有着非常深刻的认知，还要在具体场景、产品设计中，做很多的洞察、调研、试验研究，来洞见人的行为交互的规律。
+
+#### 如何评估行为层
+
+行为层一般可以用**易用性**（Usability）来评估，这个词也经常被称为可用性。用户体验难以量化衡量，但是在某一种具体的易用性体验中，肯定是可以去量化的。
+
+现在非常多的公司都开始认真对待易用性。以前在华为，我是易用性体验小组的组长。华为会去提炼总结很多核心产品体验的关键体验点，然后针对这些点定义明确的体验指标。
+
+因为华为并未将这个信息公开，所以我这里就不详细展开了。阿里也做了类似的工作，而且对外公开了，所以我可以引用一下细节。阿里的易用性度量量表（Product ease of use metric, PEM）是如下的样子：
+
+<img src="https://static001.geekbang.org/resource/image/e9/08/e96b35617cd2b24efe20ebd178f0fe08.jpg" alt="">
+
+在体验设计行业里，我们一般可以从易学性、效率、易记性、错误、操控性这几个维度去衡量易用性。
+
+**易学性**
+
+易学性就是指当你第一次使用某个东西时，有多容易让你学会使用？这个使用是一个自然的交互过程，还是需要看说明书，又或者需要别人指导才能完成？
+
+理想的易学性是不需要说明书的。因为说明书越厚，代表易学性越差。这就是为什么很少人真正愿意使用单反拍照，因为单反参数与调节项太多、太复杂、太专业。
+
+什么样的东西可以很容易学习呢？那就是要有似曾相识的感觉。也就是说用户在使用这个产品时，能够自然联想到其他类似可交互的东西，这就是自然的映射。
+
+<img src="https://static001.geekbang.org/resource/image/f9/b3/f93c28f991a649b6d90967a304bac9b3.png" alt="">
+
+易学性意味着要有清晰的线索和反馈。比如用户在第一次接触iPhone时，会先尝试去抚摸这块触摸屏，然后会发现屏幕上有个指向右边的箭头，在slide to unlock上还有一个从左向右的光的流动。
+
+当你手指接触到这个滑块后，一旦你向右划动，那个滑块就会跟随你的手指向右边动。然后你划到头，就会有一个咔哒的音效，紧接着屏幕过渡到桌面。这些都是清晰的反馈，告诉你操作成功了。哪怕是个不识字的小孩子，第一次也能很轻松地解锁iPhone屏幕。
+
+**触摸屏成功的本质是在虚拟软件世界的交互中，映射了在真实物理世界的交互体验，让人找到了那种似曾相识。**这就是自然的交互。
+
+**效率**
+
+效率是指在学会使用后，你可以多快完成任务？我记得以前曾有同事提出过三步直达的想法，也就是任何一个界面的操作都在三步之内实现。
+
+这个想法的初衷是好的。但是我要强调两点：
+
+- 人对效率的衡量不是多少步骤，而是最终完成这个任务的时间长度，包括头脑思考的时间；
+- 有两种效率的体现，一种是真实的效率，一种是人感知的效率。
+
+有时候我们主观的感受和客观的数据并不会一致。比如在某一天里北京温度远低于上海，但在上海的人可能会觉得更冷。
+
+又比如对于一大段文字的排版来说，有一种排版是分栏的排版模式，另一种是没有分栏。如果你问人们喜欢哪种排版，他们会说分栏的更好。有趣的是，如果你问他们哪种读起来快，他们还是会坚持说是分栏的（虽然调查数据结果表明不分栏读起来更快）。
+
+感知的效率关注的是人整个交互下来是否顺畅？是否都是潜意识的一步一步交互，并不需要太多的思考？整个过程有没有被打断？
+
+所以真正看中人因的产品设计，是不会纠结在几步直达的。它们会更多地去关注人感知的效率。我记得老罗在锤子发布会上提OneStep的时候说过：“人生苦短，珍惜生命，不要浪费时间。能够用两步走完的人生道路，不要用九步。”这是个很美的广告词，但并不完全符合人的效率体验。
+
+**易记性**
+
+在你一段时间不使用之后某项技能时，再重新使用它时，是否很容易恢复之前的熟练使用？通过人的遗忘曲线能看出来，其实我们的记忆力是非常糟糕的。一周之后，我们会忘记90%上周的东西。
+
+**在交互中，人能记住的就是关键的线索和反馈。**关于如何根据人记忆的特点来进行设计，我后面会详细展开来讲，你现在知道易记性可以用来衡量易用性就够了。
+
+<img src="https://static001.geekbang.org/resource/image/ba/cc/baf78867321633a5959532dd30b884cc.png" alt="">
+
+**错误**
+
+你还可以通过错误的以下几个维度去评估易用性：
+
+- 失败率。失败率很容易理解，就是失败的概率。
+- 容错率。系统某些部分出现错误，也能让交互进行下去不会受到影响。比如人脸识别失败，还可以输入解锁密码，解锁密码输入错误，还可以重新输入。可以重新输入的次数越多，容错率越高。
+- 降低错误发生后的影响。这个理科生会认为是减少错误修复成本。但别忘了，这里面还有另外一层涵义，就是错误发生后对人心理的影响要最小。比如浏览器打开网页失败后一个丑陋的404，和一个精心设计的插画404，二者带给用户的心理感受完全不同。
+
+**操控性/灵活度**
+
+最后一个衡量易用性的维度就是操控性。操控性也叫灵活度，指的是这个交互可控制的维度有多少，程度有多大？
+
+灵活度和简约设计是一对矛盾体。**越简约的设计越要减少灵活度，灵活度越高的设计往往交互越复杂。**
+
+但即便要有灵活度，我们也要学会把复杂操作隐藏起来，给用户留下界面干净简洁的第一印象。华为余承东经常提到一句话：“把简单易用性做到极致，把功能强大隐藏起来，在消费者情感体验上超越对手。”就非常好地说明了这个道理。
+
+### 反思层
+
+人体验认知更为高级的层次是反思层体验。这些体验是人经过推理、思考后，有意识地去决策的体验。这种体验带着非常强的文化烙印。
+
+同一个物品，可能对某些人会唤起非常强的反思，对其他人则不会。如果一群人都会对某个事物有强烈的反思体验，这就是文化共鸣体验。**征服人的反思层，在品牌的塑造上就会更扎实。**
+
+当然你也可以通过反思层去牵引用户行为层和本能层的体验，达到所谓一美遮百丑的情况。比如华为被美国制裁后，很多国人内心自然会涌现出爱国情怀。如果在品牌营销设计上很好地利用这一点，将会让用户更容易忽略某些华为手机在本能层和行为层设计上的瑕疵，放大本能层和行为层设计的一些优点。
+
+反思层的设计往往要引发人的思考。我曾经给国际开源谷设计了两幅海报来阐述开源的理念，这两幅海报都用了激发用户思考的方式来表达。鸟巢不应该是麻绳做的，生态也不应该在封闭的龟壳上。这种需要思考才领会的海报，就是典型的反思层面的设计。
+
+<img src="https://static001.geekbang.org/resource/image/fb/27/fbfe924753c22aa5943148abc98f9627.jpg" alt="">
+
+## 总结
+
+好了，讲到这里，今天的内容也就基本结束了。最后我来给你总结一下今天讲的要点。
+
+我们要做注重用户体验的设计。用户体验可衡量的维度很多，但我希望你归回本源。**用户体验设计必须以用户为中心，去思考人和物的交互。**基于此，我带你重温了唐·诺曼情感化设计的三个体验层次：本能层、行为层和反思层。
+
+首先是**本能层**。本能层是最基本的体验，它属于纯感官层面。我通过两个简单的例子（手机和榨汁机）和你聊了聊一个好的本能层体验是什么样子。
+
+接下来是**行为层**体验。行为层体验是使用体验的实践主义者关注的重点。人们常说的易用性，也都是在谈行为层的体验。
+
+因为行为层的体验容易被量化，也容易被拆解，所以很多公司都有对应的易用性评价和衡量体系（比如华为和阿里）。常见的易用性评价维度有易学性、效率、易记性、错误和操控性：
+
+- 好的易学性意味着自然的交互，清晰的交互线索和反馈；
+- 在你评价效率时，不要被交互步数局限。除了评价整个任务的交互时间外，心理对效率的感受也同样重要；
+- 要学会根据人的记忆特点来进行设计；
+- 在评价错误影响的时候，别忽略了对人心理感受的影响；
+- 如果你希望平衡好操控性和极简设计，就要把复杂操作隐藏起来。
+
+**反思层**体验带有很强的文化烙印。一个好的反思层设计可以引起人们的深度思考，也可以去牵引人们行为层和本能层的体验。
+
+希望你能够通过这节课，站在人与物交互的角度，把本能层、行为层和反思层三个层次结合起来思考，对用户体验设计有一个更全面的认知。为了方便你的理解，我还做了一个这节课的脑图，你可以对照着再复习一下。
+
+<img src="https://static001.geekbang.org/resource/image/8d/3e/8d9bfa14102a6bc9d71225a382f5a13e.png" alt="">
+
+## 作业
+
+最后，我给你留了一个小作业。你能否举出一个你生活中典型的行为层体验糟糕的例子？然后你再去思考一下，什么样的设计可以改进这种体验？

极客时间专栏/geek/基于人因的用户体验设计课/预习篇/02 | 怎样做到为用户而设计？.md

@@ -0,0 +1,139 @@
+<audio id="audio" title="02 | 怎样做到为用户而设计？" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/0c/16/0cd3cec9e74f8d1ef851367d8bf18816.mp3"></audio>
+
+你好，我是Rocky。
+
+在上节课里，我抛给你一个非常基本的问题：我们为什么而设计，从而引出体验设计的三个层次。今天，我又抛出第二个简单的问题：我们到底为谁而设计？标准答案一定是为用户而设计。
+
+但你真的能够做到为用户而设计吗？又或者说，我们怎样才能做到为用户而设计？别着急，我先给你讲四个故事。
+
+## 默认选项的力量
+
+第一个故事是关于默认选项的。欧洲驾照的后面都会有一个器官捐赠意愿的信息。也就是说如果你出现交通事故伤势过重，医生觉得你已经救不回来了，就会根据你的驾照的信息来决定要不要立即移植你的器官，去救其他需要的人。
+
+欧洲各个国家关于是否愿意捐赠器官做过一个统计，参见下图。统计结果呈现出一个两极分化的状态。有的国家绝大部分人都不愿意捐赠，有的国家几乎都愿意捐赠。
+
+<img src="https://static001.geekbang.org/resource/image/e1/ef/e1eedbeac7f06a9ca78d0e1290876aef.png" alt="">
+
+到底是什么原因造成这个差异的呢？一开始人们认为可能是文化差异性、宗教背景或者政府推进力度不同等原因。但其实在这些国家中，不少国家的文化和宗教背景是极为相似的。比如德国和奥利地，丹麦和瑞典，荷兰和比利时，这些国家都挨着，不应该出现这种天翻地覆的差别。
+
+后来研究发现，其实问题就发生在这个捐赠器官同意书的版式设计上。在捐赠率比较低的国家中，这个同意书的默认选项是“不同意捐赠”，如果你同意捐赠器官，请修改意愿。在捐赠率比较高的国家，这个同意书的默认选项是“同意捐赠”，如果你不同意捐赠器官，请修改意愿。你可以参考一下下图。
+
+<img src="https://uploader.shimo.im/f/ICu8P2bmGAuU66Fn.png!thumbnail" alt="">
+
+这就是默认选项的力量。人每天都会面临很多次的选择。但人对复杂的、纠结的选择往往是很排斥的，会倾向于依赖于默认选项来回避这种选择，这样操作的心理负担会更低。
+
+**个体在自主决策后产生的后悔感受，比不作为引起的后悔感受更为强烈。**所以个体在决策时，会不自觉地采取行动，以避免未来可能存在的更强烈的后悔，而倾向于消极不作为。这个在心理学称为默认效应，或者安于现状偏差。
+
+关于默认选项我再给你举一个迪士尼乐园的例子。迪士尼将它的儿童餐默认选择从汽水改为果汁，将炸薯条改为水果和蔬菜沙拉后，猜猜发生了什么事？孩子们消耗的卡路里减少了21％，脂肪和钠减少了40％。
+
+<img src="https://static001.geekbang.org/resource/image/0b/4e/0b0a227881fbd97b4abb423812b8894e.png" alt="">
+
+这种默认选项的设计，在互联网时代应用非常广泛。甚至有被滥用的趋势。默认选项如果最终的结果会造成用户的利益损失（比如对用户隐私的伤害），那就会产生体验不良的滞后反应。所以你一定要谨慎使用，不可多度依赖这个默认选项。
+
+第一个故事的用意是你如果想要理解用户、为用户而设计，你要对行为心理学、社会心理学的知识有一定的储备。某些看似简单的设计，产生的影响却是巨大的，如果你只知其然，不知其所以然，就很难做到触类旁通，无法在日常工作中灵活运用。更糟的是，如果你不了解这些知识，可能会在无意中对用户造成非常负面的影响。
+
+## 玩偶的屁股
+
+接下来是第二个小故事。请看下面这个图：
+
+<img src="https://static001.geekbang.org/resource/image/1e/01/1e47ee0970c96757bbf0054e59b51f01.jpg" alt="">
+
+设计师设计了一款用来哄宝宝睡觉的音乐旋转玩偶挂件。大人们都觉得，哇，这些挂起来的小动物都好可爱，宝宝一定会非常喜欢。
+
+但是你真的站在宝宝的视角思考过吗？他（她）到底看到的是什么吗？**其实宝宝看到的是这些玩偶的屁股。**盯着旋转的屁股会有什么好的体验吗？
+
+更何况这个年龄段的婴儿，对动物完全没有认知，他（她）甚至对色彩形状的认知都在发展阶段。如果对婴儿的眼球形成不良的过度刺激（比如灯光刺激），甚至会导致婴儿的视网膜、视神经的发育受损。
+
+最好的方法不是将婴儿长时间仰头放在摇篮内，因为宝宝会不经意盯着房间的顶灯，而是过一段时间就将婴儿抱起来，让孩子能看到周围的事物。
+
+**如果想要设计出好的婴儿的产品，你真的需要了解婴儿心理学。**曾经西方很多父母错误地认为让婴儿独处是培养孩子独立自主的关键。但1958年哈洛做的一系列恒河猴实验表明，婴儿最需要的不是坚硬冰冷的东西，而是松软让他（她）有安全感的物品。
+
+婴儿最需要的是爱（拥抱、抚摸和亲吻）和温暖。而且婴儿刚出生时，会对新世界缺乏安全感。“被大人贴身抱着来回走动”的感觉，恰恰和婴儿在子宫里的感受很像，能够给宝宝更多的安全感。
+
+所以才有了这样一款增进婴儿和母亲关系的产品：婴儿背巾。这款背巾充分增加了宝宝和亲人身体的接触面积，提升宝宝的安全感。
+
+<img src="https://static001.geekbang.org/resource/image/dc/cc/dca878cf1c452831fefca442e421bbcc.jpg" alt="">
+
+这个故事提到了婴儿，但其实给其他的特殊人群做设计也是一样的逻辑。我想要说的是，**一个真正考虑用户的设计，一定要有精准的共情以及对指定用户群体人因方面的特殊性思考。**
+
+我们到底是给谁设计的？站在他（她）的视角，我的设计应该是什么样子？我有考虑过他（她）的心理感受吗？我有考虑他（她）的认知局限吗？我有考虑他（她）的社会属性吗？
+
+**共情不仅仅是简单的换位思考，甚至要亲身体验**。如果你要理解下半身不方便的残疾人，我们就要在共情体验实验的时候，自己进行拐杖、轮椅的体验。如果我们要理解盲人，我们就需要把自己的眼睛蒙住，如果我们要理解聋哑人，我们就需要带上隔音耳机屏蔽掉外部的环境音，去分别模拟盲人和聋哑人视觉和听觉无法感知外部世界的情况。这样，我们才能够做到想人所想，急人所急。
+
+## 挤出拥挤的地铁
+
+第三个小故事是关于我上班挤地铁的。我生活在深圳，经常乘坐地铁。由于深圳地铁建设的周期很长，我能够在不同的线路中看到两种类型的地铁站点提示系统。
+
+下图的上面的是改版前的系统，下面是改版后的系统。显然，下面提供了更多有效的信息，比如地铁每节车厢对应站台电梯的位置，地铁换乘信息。但是后者的界面，让我有一次错过了一站。
+
+<img src="https://static001.geekbang.org/resource/image/13/46/1305f78656096508eba070539021bc46.png" alt="">
+
+这事发生在有一次我高峰期乘坐地铁的时候。当时人挤人挪动相当困难。我的目的地是一个之前从未去过的陌生站，所以我不知道是应该在左侧还是右侧下车。
+
+“本侧开门”这四个字是已经到了站台才会显示出来，而且整个版面的信息量很大，这几个字是如此的不显眼，而我恰恰没有在开门的那个门口。
+
+当我意识到对面的门已经开了，准备挤过人群移步到门口时，却被挤进来的更多的上车的人流堵住，根本挪动不了，于是我被迫错过了这一站。
+
+老的交互系统懂得提前2分钟就会将“此侧开门”的绿灯点亮闪烁，而一个升级后的地铁站点显示系统，增加了信息复杂度，却在最基本的一个体验上失分，确实太不应该。
+
+人因学不是一个理论科学，而是一个实践科学。**人因学不会简单拘泥于个体的心理、生理学，同样也会考虑场景的特殊性，考虑在特殊场景下的行为特征。**
+
+在地铁这个场景下，设计师在设计站台提醒时，就必须给人留出挤到正确门口的时间余量（特别是车厢非常拥挤的情况）。在其他的场景下（比如家庭场景、驾驶场景、办公场景、购物场景、运动健康场景等），你都要到具体场景下去体验、观察、调研，才能更深刻地理解用户的痛点，这样做出来的设计才会有更好的用户体验。
+
+## 哪是前哪是后？
+
+第四个故事可能严格意义上讲不算故事，更像是一种我观察到的现象。那就是我们关于使用遥控器的困惑。
+
+不知道你有没有发现，很多人用PPT做宣讲时，手里拿着遥控器的第一件事，就是眼睛盯着投影仪的投射幕布，然后尝试按向前、向后的两个按钮，来确认到底哪个是演示下一页，哪个是演示上一页。
+
+<img src="https://static001.geekbang.org/resource/image/1c/d5/1c001e45f46044500554664f256eb2d5.png" alt="">
+
+有的投影仪的遥控器上有非常多的按钮，有的会少一些。即便这个按钮退化为两个，一个向左一个向右，或者一个向上一个向下。我们还是会去尝试分别按一下。为什么呢？
+
+这里面其实暗藏了两个问题。一个是上节课提到的在易用性中，简约设计和操控灵活度之间的平衡。功能按键多当然意味着可调节的参数就越多。但这么多按钮，同时也意味着效率的降低、学习成本的增加，以及误触按键导致的不良体验。
+
+同样的道理，瑞士军刀和普通的水果刀相比，前者可能看起来很酷，但是绝大多数的功能平时是用不到的，真正的切割体验也会降低。
+
+另外，PPT翻页功能的试错其实还暗藏了一个文化背景的差异性问题。
+
+对于阅读习惯从左向右的人而讲，如果这个按键是左右排布，一般我们会认为左边的按键是上一页，右边的按键是下一页。
+
+但是对于阿拉伯人，阅读习惯是从右向左，这个左右排布的按钮，就会认为，左边的按键是下一页，右边的按键是上一页。
+
+对于翻页按键是上下布局的情况，其实同样会有误解。如果要你在一张纸上用箭头画一个上下的时间轴，一般人会把时间轴画成了向上的箭头类型，并且越向上越接近未来。但中文的上下本身会带有暗示，也有不少人会认为向下箭头应该是下一页。由于人们认知的差异性，就会出现歧义。如下图所示：
+
+<img src="https://static001.geekbang.org/resource/image/7a/45/7aff65e09yy246aef5f06de4b09df945.png" alt="">
+
+你看，一个简单的箭头设计，都存在人因学的道理，都会让设计师这么纠结。你要真的搞明白你产品覆盖的用户群体，他们文化习惯是什么？群体特征是否有差异性？是否有多种文化覆盖的情况？如果存在，你应该如何去应对？
+
+回到这个遥控器故事上，那么有好的解决方案吗？当然有，比如我们可以直接在按钮上写明上一页和下一页。你也可以思考一下，是否有更好的方案？
+
+## 总结
+
+讲完了这四个小故事，再回到本节课一开始我提的问题：你真的能够做到为用户而设计吗？
+
+为用户而设计说起来简单，但要真正做到理解我们的用户，是非常难的。如果你没有对用户心理学、生理学、社会学、人因学方面的洞察和研究，恐怕你设计的东西并不见得会抓住用户的心。
+
+我今天讲的这4个故事，分别阐述了：
+
+**1. 你是否对人的行为心理学有深刻的洞见？**（我们在设计时要对人的行为心理学、人体生理学等基础学科要有深刻的洞见，这是通过人因学做好设计的根本。）
+
+**2. 你是否真的站在你产品特定用户群体的共情视角去审视设计？**（我们要针对我们设计的特殊用户群体做好共情，必要时我们需要去沉浸式体验他们的感受。）
+
+**3. 你是否考虑了产品使用<strong><strong>中**</strong>现实场景的变化？</strong>（人因学不仅仅是理解人，同样要深刻理解人所处的具体场景，要进行场景化的设计。）
+
+**4. 你是否理解用户的文化差异性？**（我们在产品中需要兼顾不同的群体，包容不同的文化习惯，而不能简单一刀切。）
+
+4个故事都是谈的为用户而设计，虽说各有侧重，但主心骨都是理解用户。
+
+如果主心骨没有立住，我们最后设计服务对象就会跑偏，很可能成为以下错误的变种：
+
+- 为研发而设计。研发说能做到什么程度，或者工程师说设计成什么样子，就设计成什么样子；
+- 为领导而设计。当设计稿被多次打回、被蹂躏后，那就算了，领导说设计成什么样就设计成什么样；
+- 为数据而设计。心想：只要考核数据结果好，真正用户的体验也差不了太多。
+
+经过了预习篇这两节课的讲解，我给你回答了What（什么是用户体验设计）和Who（我们到底为谁而设计）的疑问，加上开篇词里的Why（为什么要学人因学）和How（如何学习人因学），我已经做足了铺垫。希望这些案例能让你提起足够的兴趣，真正步入我们的基础篇课程。下节课，我们将开始讲重新认识感觉。
+
+## 作业
+
+最后，我给你留个小作业。建议你课后去看一下威斯康辛大学的心理学教授哈洛做过的恒河猴实验，并分享一下你的感受。这个实验不仅仅对设计有启发，也会对带宝宝有启迪哦。

极客时间专栏/geek/基于人因的用户体验设计课/高级篇/20｜基于人因的动效设计：动效背后的物理认知.md

@@ -0,0 +1,232 @@
+<audio id="audio" title="20｜基于人因的动效设计：动效背后的物理认知" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/b7/3e/b7a7bc9cee56fe6yy26d7eb31a2d533e.mp3"></audio>
+
+你好，我是Rocky。
+
+从今天开始，我们开始进入高级篇的课程了。这节课我们先来谈谈动效设计。
+
+首先我们来看下迪士尼动画制作的12个基本原则。下图里的这12原则让卡通形象用夸张手法遵循物理学基本定律，并在此基础上去呈现角色的情感表达和魅力。这12个基本原则特别经典，几乎被所有卡通动画制作借鉴，被称为动画圣经。至今仍然有非常多的原则，可以直接沿用到动效设计中。
+
+<img src="https://static001.geekbang.org/resource/image/cb/4e/cbc0dc657b84f23fba7c910ae3d89a4e.gif" alt="">
+
+当然我们今天重点聊的不是动画制作，而是动效。动效是用来表达界面元素在交互事件下的行为关系的运动手法。
+
+和交互有关的动效分为两类，第一类是实时性动效（也就是跟手动效），第二类是非实时动效（也就是交互完成才开始播放的动效）。动效有三点好处：
+
+- 更清晰地体现内容元素之间的逻辑和层级关系；
+- 提供当前的状态反馈，加强用户对操作行为的感知，给用户以可控的感觉；
+- 通过动效设计可以辅助视觉元素更好地传达产品品牌理念。
+
+我接下来分别从人的维度和自然物理世界的维度，分别和你聊聊动效设计。
+
+## 人的维度
+
+动效的表象是用视觉表现手法填充时间。那么首先需要回答的问题就是：多长时间的动效设计是合理的呢？
+
+### 人对动效时间的感知
+
+动效分为实时动效和非实时动效。这两种动效对时间的要求不同。
+
+我们在[09](https://time.geekbang.org/column/article/350185)中聊过可见并能对我们产生影响的视觉刺激最短时长是5ms，对应的帧率是200帧。所以跟手的实时动效只有快到低于5ms，人才感觉不到延迟。如果要谈实时动效，那么时延比时长更有意义。下图是不同时延的视觉感受，如果你仔细观察，其实10ms的时延你还是可以感知出来的。
+
+<img src="https://static001.geekbang.org/resource/image/1f/c0/1ff094c50e3550b766a62e9495ce23c0.gif" alt="">
+
+相对而言，非实时动效就不是越快越好了。
+
+过快的非实时动效以人的感知觉根本理解不到。一个视觉事件与我们对它完整感知之间的时间差是100ms，100ms也是科学界公认的人类反应速度的最快极限（不经大脑的条件反射）。
+
+而人看到一个事物然后经过大脑意识处理并有动作反应的时间，最快也要在200~300ms左右。我们识别了一个事物之后，注意力可能会发生变化的最小周期是500ms。
+
+综合以上数据，一般非实时动效的最佳周期要限定在100~400ms之间。根据人对事物的理解，不同时间长度的运用也要与现实世界相符。
+
+<img src="https://static001.geekbang.org/resource/image/88/d6/88ff4190c3369e781d1c53635721fbd6.gif" alt="">
+
+比如对虚拟键盘某些按键的悬浮放大来说，要把处理周期缩短在100ms。而对于某些复杂的或者移动距离长的非实时动效就需要耗时长一些，也符合用户的心理预期。
+
+在谷歌Material Design的规范中，智能手机触屏交互非实时动画的持续时间限制为200~300毫秒。对于平板电脑，持续时间应延长30％，大约为400~450毫秒。在可穿戴设备上，持续时间应缩短30％，大约为150~200 ms。原因很简单：屏幕尺寸更大，因此对象在改变位置时需要克服更长的路径。而在较小的屏幕上，行进距离更短。
+
+<img src="https://static001.geekbang.org/resource/image/07/73/07d69296fb8a484cd3870bfe0192e073.gif" alt="">
+
+控件的尺寸也会对动效的时长产生影响。控件尺寸越大，我们需要越慢的速度（即便是同样的移动距离、同样类型的动作）。这是因为要有重量感的隐喻。
+
+<img src="https://static001.geekbang.org/resource/image/cf/1b/cf14df4yye78753fcd8bedbeb93a861b.gif" alt="">
+
+下图是苹果在左右滑动的动效设计中对重量感的运用：更轻的卡片滑动速度更快。
+
+多任务的滑动加载本身需要更多CPU资源占用，任务调起时间会更长。这种重量感的隐喻也恰巧掩盖了技术上所需的加载时间。
+
+<img src="https://static001.geekbang.org/resource/image/47/c0/473b140721be989dc144a93118c0d6c0.gif" alt="">
+
+在瀑布流的连续滑动中或者加载一个新闻页面时，会出现界面元素因为网络延迟逐渐刷新出来的情况，这个时候的动效就不能遵守最小100ms延迟的规律了。
+
+因为所有的刷新清单元素依次出现的情况，本质是因为网络传输、数据加载的技术约束，而不是真实物理世界的认知。所以这种元素依次出现的延迟要做到越短越好，并且要考虑到实时动效。比如下图中左半部分就是一个比较好的处理方式。
+
+<img src="https://static001.geekbang.org/resource/image/bb/55/bbd846a76a430dc53e4524c8ca8bde55.gif" alt="">
+
+### 人的视觉深度感
+
+我们的智能手机触摸屏是一块平面玻璃，那要如何欺骗用户的眼睛，让他能感觉到立体视觉呢？
+
+首先我们可以考虑使用模拟焦点视觉的方法。当视野聚焦近处时远景产生模糊，就会给人感觉某些元素距离我们近，而另外一些距离我们远。比如下图中苹果的应用和桌面图标的关系。
+
+<img src="https://static001.geekbang.org/resource/image/6f/9d/6fae2f808d047bdc416d8b504318f89d.gif" alt="">
+
+也可以根据近大远小的原理，通过缩放一个物体的大小来体现这个物体距离用户的远近。比如下图某一个元素突然从背景拉到近前，这其实是摄影手法中的滑动变焦（Dolly &amp; Zoom）。
+
+<img src="https://static001.geekbang.org/resource/image/eb/d8/ebed293764a1bc5b59d33154b4d05bd8.gif" alt="">
+
+苹果在滑动变焦的隐喻中还通过距离去映射时间。天的颗粒度更近，月、年的颗粒度更远。在缩放日历、照片月视图的时候，用户能明显感觉到这种滑动变焦的镜头运用。
+
+<img src="https://static001.geekbang.org/resource/image/14/f8/14a331573f4b6b1f2be12ef97f3da0f8.gif" alt="">
+
+对运动的元素进行编组组合也能骗过用户立体视觉。当这些元素在隐喻中处于不同层级的时候，如果远处的元素运动慢而近处的元素运动快，那么就会产生视差效果。
+
+<img src="https://static001.geekbang.org/resource/image/e4/4b/e418fd2cbb8548d8371fac2f982d944b.gif" alt="">
+
+最后一种就是直接模拟翻板或者折纸等现实世界的元素，来展示某些切换。这种立体切换的元素一般都处于同一层级，采用立体化表达仅仅是单纯的效果运用。
+
+<img src="https://static001.geekbang.org/resource/image/35/15/351569bf899b9ef009ca3a85cef45c15.gif" alt="">
+
+也可以是表明一种隐藏的元素，通过翻牌的方式来呈现出来。
+
+<img src="https://static001.geekbang.org/resource/image/23/yy/234b65a77c94aa22f9fdf129212e6ayy.gif" alt="">
+
+### 动效对注意力的吸引
+
+谈完时间和深度的感知，我们接着来看动效如何吸引人的注意力跟随。
+
+如果一个动效不是由交互触发，而是需要通过视觉线索去吸引人注意，那么什么样的方式能够更好地给用户提供线索呢？特别是需要引导用户的交互元素在边界视觉范围的时候？
+
+强调动效可以达到这种目的。比如下图的上半部分的动效，就比下半部分单纯用色彩来的醒目。
+
+<img src="https://static001.geekbang.org/resource/image/fd/bb/fd3b03d5ee56d6968909a1dde6bc7ebb.gif" alt="">
+
+如果你要在跟手操作的实时动效中，去明显地暗示手指滑动方向和事件顺序、前后的关系，那么你可以选择通过某些坐标移动的动效或者数字的变化，来引起人的注意力聚焦。
+
+<img src="https://static001.geekbang.org/resource/image/8a/f5/8af1bae9e830399d81e6a5a280750df5.gif" alt="">
+
+## 动效设计语言与物理隐喻
+
+从人的维度聊完动效设计后，我们再从物理世界隐喻的维度来看一下动效设计。既然动效是对自然世界物理规律的模拟，那么动效究竟是在模拟哪些自然规律呢？
+
+在物理世界里存在经典力学的约束（重力、摩擦力、浮力、磁力和弹力）。在数字世界如果去模拟这些经典力学的效果，会让用户产生更强烈的“这个设计符合现实世界”的感觉，从而降低认知负荷。
+
+<img src="https://static001.geekbang.org/resource/image/9c/23/9cd973203f59d1469fd33a8c93c78023.png" alt="">
+
+除了对力学的认知，我们还要对材质有更深入的理解。这个东西到底是硬的还是软的？是液态还是固态？是厚的还是薄的？是透明、半透明、还是彻底不透明？材质的感觉是一个有机体还是一个无机物？
+
+<img src="https://static001.geekbang.org/resource/image/80/7c/80c07f188eb64caefb11d9ea1d45237c.png" alt="">
+
+上面的这些问题其实就隐藏着对一致性的要求。我们不能拿同一个设计语言去选择各种不同的种类的材质，也不能一个控件在一个交互场景里体现的是磁力而在另外一场景里就表现为弹力，这样用户会困惑。
+
+很多动效设计师在开始动效设计之前，并没有仔细思考过这个问题。**这些所有的考虑因素，是构建一个动效设计语言的关键输入。**
+
+因为在物理世界里不同材质的东西，它们的运动效果、对各种力的反应会不同，尺寸的不同也会产生不同的物理反馈。
+
+### 缓动（Easing）
+
+我们先来看加速和减速。因为有摩擦力的存在，在物理世界我们很少看到匀速的物体运动。在你臂长可以操控到的距离内物体的运动模式，基本都是加速从静止到运动，然后再减速从运动到静止。
+
+<img src="https://static001.geekbang.org/resource/image/36/33/3605c2252c380eyy1414230b8cd59033.gif" alt="">
+
+在同样时间的情况下，缓进缓出比匀速不仅仅看起来自然，而且还感觉更加快速。当然缓动有非常多的变种，你选择的材质、力的类型，都会对最终的缓动动效产生影响。下面是一些缓动的动效示例，你可以参考一下。
+
+<img src="https://static001.geekbang.org/resource/image/6a/b1/6aa1fc6681bbbb4caf5cbecaae8b38b1.gif" alt="">
+
+在现实设计中，你要结合具体的场景去判断选择什么样的缓动是最合适的。
+
+某种物体从界面中离开，用的是加速的缓动（Ease-Out）。
+
+<img src="https://static001.geekbang.org/resource/image/71/4a/71e70aef0388a398a40443227a80b04a.gif" alt="">
+
+而当一个物体从屏幕外进入到屏幕中，用的是减速的缓动（Ease-In）。
+
+<img src="https://static001.geekbang.org/resource/image/cb/48/cbc80cdd77d694ea57f7700272bd7548.gif" alt="">
+
+而一个物体从屏幕的A点移位到B点，一般用的就是加速并减速的缓动（Ease-In &amp; Ease-Out）了。
+
+<img src="https://static001.geekbang.org/resource/image/12/f7/124d8958fc4efd9f2bfd39c7b45424f7.gif" alt="">
+
+### 惯性运动
+
+在列表的滚动过程中，缓动已经不足以去映射物理世界。因为在交互过程中滑动速度越快，那就意味着滚动越快，停下来需要的时间越长，这就是惯性作用。那么对应惯性动效的时长，就不能拘泥于前面500ms的局限，可能得滑动1~2秒钟。
+
+<img src="https://static001.geekbang.org/resource/image/1a/db/1a63a8f720b937954d9e80682f0b29db.gif" alt="">
+
+在物体运动过程中如果突然遇到障碍物（特别是坚硬的障碍物），如果这个物体有弹性，那还会出现回弹效果。
+
+<img src="https://static001.geekbang.org/resource/image/47/d5/4709ab514e612d834da4741fa89090d5.gif" alt="">
+
+不同材质的物体弹跳能力不同。我在下图中给你列出了不同种类的球体掉落到地面上，能产生弹跳的最短距离。在你的动效语言中不同材质的选择，会决定你选择回弹的程度多大是合适的。
+
+<img src="https://static001.geekbang.org/resource/image/62/d3/62231ae5d27f0f203ccfff590ab612d3.png" alt="">
+
+当然，刚刚我们讲的是重力回弹。但很多时候也可能是下拉回弹、横向滑动回弹，这就是要去模拟弹簧的回弹效果了。
+
+惯性除了回弹还有其他表现。比如我们坐在车里突然急刹车，人身体因为惯性原因不经意前倾。在缓动中，如果这个元素和另外一个元素之间并非刚性耦合，那么就会因为运动惯性而继续晃动，比如下图的设计。
+
+<img src="https://static001.geekbang.org/resource/image/0d/eb/0d93b27cc26dbce82720f9a0ab4dbdeb.gif" alt="">
+
+当你想帮助用户区分到底是滑动卡顿还是滑动到了边缘，采用一个回弹的响应设计会让用户分得很清楚，你可以参考下图的回弹响应设计。
+
+<img src="https://static001.geekbang.org/resource/image/7a/d8/7a4e08a2e3f4acd6e196578340971dd8.gif" alt="">
+
+不过回弹或者晃动都不能过多使用。因为这种动效其实是对屏幕元素不稳定的隐喻，过度使用会造成视觉干扰和用户的不安。
+
+### 挤压和变形
+
+回弹的过程也会受到材质的影响。如果是一个有弹性的有机体，那么它在加速中会出现拉伸变形，减速中会出现挤压变形。
+
+<img src="https://static001.geekbang.org/resource/image/e0/83/e0fbc9a9f0835371c349375fc71f9083.gif" alt="">
+
+在触屏交互中，触屏点击本身就是一种挤压的隐喻，所以很多按钮把点击的时候设计为挤压效果。
+
+<img src="https://static001.geekbang.org/resource/image/ab/50/ab30c845d0105ee69582286c350e3b50.gif" alt="">
+
+### 抛物线
+
+抛物线运动在我们生活里非常常见，我们来简单看一个在动效设计里使用抛物线的例子。
+
+苹果手机把全面屏返回的手势动效设计成了一个抛物线运动。但这个运动还有一定的特殊性，因为返回后对应的界面要缩小为一个图标，回到屏幕上固定位置，因此苹果在这个抛物线运动的最后落定环节，增加了磁力吸引。
+
+<img src="https://static001.geekbang.org/resource/image/03/69/03c04dc649aecb25e63799aa9c6e4b69.gif" alt="">
+
+我还是要和你再强调一下，动效要结合产品品牌语言来有选择地运用。不同的品牌需要给用户不同的感觉。如果你的品牌是年轻化、生动活泼的，那就需要选择快速的动效，并且在材质上最好选用半透明、Q弹的材质。如果你的品牌偏向于稳重平和，那么动效就需要适当减少透明度，聚焦在实时动效上，避免过度使用非实时动效。
+
+## **总结**
+
+讲到这里，今天的内容也就基本结束了。最后我来给你总结一下今天讲的要点。
+
+在理解所有的动效之前，我们先要感谢卡通动画制作中的12原则，它如动画圣经般存在，至今仍有很大借鉴意义。
+
+但动效和动画不同，动效一定和交互有关。动效通过模拟真实世界的运动，能够建立屏幕内虚拟世界与现实世界的联系。动效分为实时性和非实时性动效。
+
+如果要基于人因去理解动效设计的话，我们可以从人以及物理世界隐喻两个维度来剖析。
+
+人的维度包含时间、距离和注意力的感知。
+
+交互动效要越短越好，人能感知到5ms以上的延迟。非实时动效一般在100~400ms之间。对不同屏幕尺寸来说，动效的时长要适当缩小和延长。元素的尺寸可以映射为重量感，但列表刷新不受上述时间的约束。
+
+构建人的视觉深度感有4种手段，你要根据不同情况来适当选用：
+
+- 模拟焦点视觉的模糊；
+- 模拟透视视觉的滑动变焦；
+- 编组运动的视差效果；
+- 立体翻板的隐喻。
+
+强调动效会吸引用户边界视觉范围内的注意力聚焦。数字的变化、时间轴线的隐喻都是好的手段。
+
+从物理隐喻上分析动效，那就先要理解物理世界的材质和力的种类。缓动比匀速更为符合自然规律，要根据实际情况选择加速、减速和加减速并存的动效。
+
+如果是长列表，缓动会伴随着惯性运动。如果缓动遇到障碍物，会出现回弹。如果戛然而止，会出现惯性前倾或者晃动。这种交互不要过多运用，每次的运动都要有具体的易用性意义。挤压和变形，可以在按钮点击中运用。抛物线则是在快速滑动动效中运用，比如返回桌面的动效。
+
+**所有的动效最终都要回归到统一的动效语言**，不建议你混搭和滥用。
+
+今天的内容比较多，我给你总结了一个脑图，你可以长按保存下来，帮助你在这个知识点上有清晰系统的认知。
+
+<img src="https://static001.geekbang.org/resource/image/31/f1/3198e123fff9ebd98b999468ae41f6f1.png" alt="">
+
+## 作业
+
+最后，我给你留了一个小作业，分析一个你的产品中层级切换的动效，如果按照立体视觉的方式，你可以如何去改进？
+
+你有最喜欢的动效吗，为什么喜欢它？

极客时间专栏/geek/基于人因的用户体验设计课/高级篇/21｜基于人因的美学设计：数学与心理学之美.md

@@ -0,0 +1,150 @@
+<audio id="audio" title="21｜基于人因的美学设计：数学与心理学之美" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/54/e8/54274a5c1f85547bf9d304yy4963d6e8.mp3"></audio>
+
+你好，我是Rocky。
+
+今天我们来谈谈美学设计。美学是一个极富争议性的话题，甚至被很多人称为玄学。很多大师都尝试去阐明这个概念，阐述的维度也各有不同。但迄今为止，仍很难达成一致的共识。美学大师蒋勋在大学教了美学几十年，最后离开了大学。他有一句非常经典的话是这么说的：“少谈些美学，多谈些美”。因为相当多的美学问题都难以形成一致的答案，比如：
+
+- 美学和艺术的关系是什么？
+- 如何看待美和时尚？
+- 美是一种事物的客观存在，还是一种主观的认知？
+- 美和欲望、愉悦的关系是什么？
+- 什么叫更有品味？如何界定低俗的美和高雅的美学品味？
+- 怎么评价一个设计是美还是不美？
+- 如果受众是不确定的，如何兼顾不同人的美学标准？
+
+既然我们这是人因系列课，那么我们谈的美学设计，一定也是基于人因来思考：美是怎么来的？
+
+下图是一个理解美学的基础研究框架，这里面会有人的因素、思维逻辑因素、时间因素、跨文化因素、心理学和生理学因素，以及表达美学的载体：内容的因素。
+
+<img src="https://static001.geekbang.org/resource/image/5d/0a/5de2e41a3acea67ab5fecfec5f15980a.png" alt="">
+
+介于这个话题的复杂性，今天这节课我不会明确告诉你什么样的设计才是美的。因为即便告诉你，你我之间其实也很难达成共识。如果你对于“什么设计是美的”或者“美是怎么来的”这一系列问题有自己的想法，欢迎在留言区留言，我们共同进一步探讨。
+
+今天我们会从两个维度来谈美学：
+
+第一，从心理学认知上，有没有对美学的共识？如果有，在设计中如何体现这种共识？
+
+第二，大自然美学的东西有没有特殊的规律？如果有，我们如何掌握这种规律，在设计中体现这种美？
+
+## 认知心理学意义上的美
+
+我们首先来看看心理学上的美学认知。人对美的感知分为两个层面：
+
+- 本能层的直观美的感受；
+- 对内容或者上下文有深入理解的反思层美的感受。
+
+比如看到樱花落下，这种视觉冲击的感受就是属于本能层对美的感受。但是当理解到樱花短暂的开放期以及日本的武士道壮烈赴死的一种精神内核，再接着对樱花产生深层次的美感，这就属于反思层美的感受了。
+
+这两个层次都会受到不同的情绪和心境的影响，具体关系你可以参考下面这张图。
+
+<img src="https://static001.geekbang.org/resource/image/ab/0f/ab3928f6b83a7336ef0644b0c7debf0f.png" alt="">
+
+从心理学上来看，任何美的感受都是两个层次的综合体现。一个设计或者创作，如果只单纯追求感官刺激的表现，会容易被理解为低俗。而如果过于强调内容深层次的激发但缺乏感官刺激，就容易被认为是曲高和寡。
+
+### 具象和抽象
+
+不管是否有艺术修养和艺术品位，大多数人都会觉得文艺复兴时期的艺术是美的。一直到新古典主义，甚至在印象主义之前（比如大部分的浪漫主义、现实主义作品）的艺术里，大部分人还是可以感受到美。
+
+<img src="https://static001.geekbang.org/resource/image/fc/0b/fcd9f304ea288d8349f0878e9638fa0b.png" alt="">
+
+但之后到了莫奈的《睡莲》、《日出·印象》，大众就有很多看不懂了。更不用说保罗塞尚那明显不符合透视学的《有苹果的静物》、亨利·马蒂斯寥寥数笔点彩的《奢华、平静和愉悦》，再到后来画《线》的巴尼特·纽曼、割画布的卢齐欧·封塔纳，甚至杜尚把小便池直接搬上了艺术展览会。
+
+如果你对我抛出来的一系列作品没有直观感受，你可以参考下面的这个示例图片。
+
+<img src="https://static001.geekbang.org/resource/image/97/c3/97f26d2d8c0bf7c89456e897817c60c3.png" alt="">
+
+现在大部分人即便看不懂，也不太敢说这不算艺术，因为担心被嘲笑缺乏品味。巴尼特·纽曼的《线》，是世界上最贵的一条直线，拍卖价格是7.484亿美元。
+
+不管怎么惊叹唏嘘，人们还是要不免小声问一个问题：这些作品真的美吗？为什么我们对文艺复兴作品有那么大的美的共识，而面对这些现代艺术形态的时候却彷徨了呢？
+
+因为文艺复兴时期的作品严格遵循了自然的规律，风格上都是符合透视学、人体比例和自然色彩的映射，这使得整体作品更偏向于严谨的理性主义表达，符合常识和自然的规律。
+
+这个在心理学上就属于具象模仿、现实映射的艺术表达手法。即便不思考、不了解画的任何背景，也能激活用户本能层美的体验，也更容易激活后续的反思层体验。
+
+但到了现代艺术阶段，大部分艺术家不追求模仿，他们追求的是主观的表达，并不介意自己的画作是否被他人理解。这就导致了能欣赏这些艺术的，都是有特定美学教育的人群。在绝大多数情况下，激发的是反思层的认知美。如果你不了解艺术家创作背景，那就很难产生情感共鸣了。
+
+对应到体验设计上，我们在开始创作海报、手机默认壁纸之前， 就会先面对一个方向性的选择：到底是具象还是抽象？
+
+答案取决于你希望给用户一种直观的视觉冲击、拉近情感距离，还是希望营造一种有距离感的品味？如果是前者，请选用具象视觉表达方式。如果是后者，可以采用抽象表达。
+
+<img src="https://static001.geekbang.org/resource/image/5f/63/5ff04b1f63280d3182ccc7487300ce63.jpg" alt="">
+
+比如上面这两幅杀死比尔的海报，左边和右边的海报设计手法完全不一样。
+
+左边是具象化表达，女主角持武士刀，昂着头，下巴前倾，轻蔑挑衅的眼神与观者灵魂对视。采用了巨大的杀死比尔的无衬线字体标题，并在背后用一个黑色长条分割画面，做视觉的平衡。
+
+右边的海报是抽象化表达，完美遵循了少就是多的表达手法，用硬朗粗狂的笔触，在一个黑色竖线的上面斜划过一道红线来映射快速挥刀的暴力美学。不同的人对这两款海报各有偏爱，前者更为直观，后者更为含蓄。
+
+### 图形复杂度如何对第一印象的美产生影响
+
+我们的大脑一直在寻找事物的规律和模式。如果事物很简单，那么我们的大脑很容易就会找到模式，接着很快失去兴趣觉得无聊。但是如果事物的复杂度太高或者杂乱无章，大脑就会不知所措，使我们沮丧和恼火。**美丽在于混乱与结构之间的最佳结合。**
+
+大量心理学和人机交互的实验表明，人们对视觉复杂度的愉悦性认知是一个反U形曲线。人们不喜欢过于简单或者太过复杂的图案，复杂度适中的图案愉悦性最高。
+
+<img src="https://static001.geekbang.org/resource/image/4d/64/4d2e91ba0deff72e459b464309f0ac64.png" alt="">
+
+我下面列了两种类型的图形，左半边的16个和右半边的16个图形，哪个部分给你的美学感受更强烈一些？
+
+<img src="https://static001.geekbang.org/resource/image/5c/51/5c6148a53d269a7c1b4134ba967b9551.png" alt="">
+
+你可以再回想一下刚刚提过的杀死比尔抽象版海报的构图，其实没有那么简约。从那一竖一撇中，我们还是看出那粗狂的笔触里笔刷划过油布产生的细节。以此类推，为什么毛笔字写出来能比中规中矩的印刷体（比如黑体）更具美感？因为毛笔书法带有更多的运笔细节。
+
+我再举一个例子。在进行圆角矩形控件设计的时候，很多应用都是直接一个圆拼上一个矩形的边，以此来画圆角矩形，或者用曲率半径一致的一些曲线来拼接。但这种圆角矩形就会看起来比较简单。
+
+苹果的圆角采用的是不同曲率的10段曲线相连，这些曲线全部为 3 阶贝塞尔曲线，导致前后相连肉眼可辨别的曲率连续，这样也就产生了非常流畅的直线到曲线的过度。这种刻意复杂度的增加就是在提升视觉的愉悦度，所以苹果的圆角看起来会更美。
+
+<img src="https://static001.geekbang.org/resource/image/1a/73/1a23bff5a4b44c76cc2817b269799973.png" alt="">
+
+## 数学之美
+
+刚才最后一个复杂度的这例子，恰巧也可以引出来另外一个我们要聊话题：美和数学有什么关系？
+
+说到美和数学，很多人第一时间想到的可能就是黄金分割。黄金比例又叫斐波那契数列，确实有诸多美的自然界的案例能够印证这个比例规律，从螺纹、松果到向日葵和野雏菊的花朵……
+
+但自然界呈现的数据之美不止于黄金比例，不要将黄金比例过度解读或者玄学化（比如用黄金比例来分析揣度所有的优秀摄影作品、名画作品和黄金分割之间的关系）。
+
+数学公式本身就是从自然界发现的极致规律，如果将这些数据手段运用在设计中，会带来非常奇妙的美学感受。我在[05](https://time.geekbang.org/column/article/347116)里提到过，华为曾经做了一套符合黄金比例的桌面图标。不过对数学美学的运用远远不局限于此。我在这里再和你聊聊两种手法：分形和混沌。
+
+### 分形
+
+斐波那契数列本身就是一种分形。分形的魅力在于不管在多小的尺度上，都能表现出相似的无限演变、无穷嵌套的结构。它可能是完全自相似的无限分形，也可以是某些随机变量的模式的重复。正因为即便无限放大也无法找到整齐缩放和重复的片段，这也恰恰巧妙验证了一种极为复杂的表现手法与规律性的平衡。
+
+<img src="https://static001.geekbang.org/resource/image/yy/20/yy7861969f6bd1d2b0c2d01a7bea8020.gif" alt="">
+
+我们在自然界能观测到的分形多为静态生成，比如树枝的生长、北方窗户上的冰晶、葵花籽的螺旋排序。任何动态或者夸张展示分形的艺术和设计，都会在人的认知层面给人非常强烈的魔幻、神秘、未来、哲学的反思层的体验激发。因此你也会在很多表达类似主题的场景中看到这种设计，例如漫威电影中的《奇幻博士》和《银河护卫队》。
+
+<img src="https://static001.geekbang.org/resource/image/6a/40/6a4f58c182939c353e503c1211624c40.jpg" alt="">
+
+### 混沌
+
+混沌是自然界更为常见的一种规律。混沌貌似无序，但是还没有达到完全无序的状况（特别是在某种条件约束下的混沌）。某些贝壳表面貌似无序的花纹和烧制后带有碎纹的瓷器有异曲同工之妙。
+
+<img src="https://static001.geekbang.org/resource/image/25/2f/256a759e4cecf8bb184d89b0095bd12f.jpg" alt="">
+
+这种混沌也是当代经常被使用的一种视觉表达手段。你会在非常多的手机壁纸里看到类似的作品。有边界、有约束的混沌，恰巧反映了有张力的自然之美。下图是华为的一系列壁纸，你可以感受一下。
+
+<img src="https://static001.geekbang.org/resource/image/3f/e0/3f4yy7a5a0160ced8b5e1ba2f78344e0.jpg" alt="">
+
+我曾拜访过一家巴黎的摄影艺术家工作室，令我印象极其深刻。他的工作室在一个郊区别墅的地下，别墅里有各种五颜六色化学物质的瓶瓶罐罐，仿佛中欧神秘巫师的实验室。他在一架巨大可以垂直水平平稳移动的装备上放置了一台超微摄像装置，他通过这样的装置放大微距层面的混沌反应（或物理的、或化学的），这些照片影像都像极了星云运转和恒星爆炸的震撼。
+
+除了自然和实验模拟的混沌，在大数据时代，海量的元数据本身就是一种混沌。这些元数据的视觉表达往往会传达意想不到的美学体验。比如下图就是创作者把气象图的原始数据进行叠加视觉处理，最终形成了绚丽的艺术作品。
+
+<img src="https://static001.geekbang.org/resource/image/65/1e/65eb8f0c2d9af00d50944a42a1d7901e.jpg" alt="">
+
+## 总结
+
+好了，讲到这里，今天的内容也就基本结束了。最后我来给你总结一下今天讲的要点。
+
+今天我们先谈了美学研究的基础框架，以及影响美感的一系列复杂因素的整合。我们重点从认知心理学维度和数学之美两个维度来聊了一下美学的理解。
+
+具象模仿表达美遵循自然规律，理性客观，更容易被多数人理解，能快速激发本能层美的体验。抽象含蓄表达美追求创新，观念突破，主观表达，比较难以被大众理解。前者容易拉近和用户的情感距离，后者会更能够塑造距离感和品味感。
+
+人脑对复杂度有一个反U曲线的认知规律。我们不喜欢过于简单，也无法接受难以找到规律的复杂。适中的复杂度愉悦性最高，那么如何寻找适中的复杂性就变成了设计的关键。苹果的连续3阶贝塞尔曲线的圆角矩形，就是通过刻意增加复杂度来提升视觉愉悦度的很好例子。
+
+黄金比例自然是非常好的表达设计的手段，但不要泛化和过度解读艺术品对黄金比例的遵循。自然界中的数据规律很多，分形和混沌同样会带来美学体验。
+
+非自然或者动态分形设计会激发魔幻、神秘、未来、哲学的反思层的体验。而某种条件约束下的混沌，则恰巧反映了有张力的自然之美，后者在很多壁纸的设计中被广泛采用。大数据也可以通过混沌美学来直观生动地表达。
+
+## 作业
+
+最后，给你留了一个小作业，从今天我讲的内容，谈谈你如何运用心理美学的知识在你的设计中？当然，我们开篇提到的一系列有关于美学的问题，也欢迎你在留言区发表你的想法，我们共同探讨。

极客时间专栏/geek/基于人因的用户体验设计课/高级篇/22｜正确运用智能交互：谁才是主人？.md

@@ -0,0 +1,195 @@
+<audio id="audio" title="22｜正确运用智能交互：谁才是主人？" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/ef/24/ef9f5bd855d00e4f8c2c3b36737a8424.mp3"></audio>
+
+你好，我是Rocky。
+
+今天我们继续来谈一谈智能交互。在[15](https://time.geekbang.org/column/article/355099)课的时候我们谈了语音交互，今天我们来谈谈更广义的智能交互。
+
+以前提到智慧交互的时候，人们第一时间会想到的是语音交互、智能音箱。现如今随着计算机视觉兴起，智能系统可以更加准确地去理解人的体态、表情、情绪。
+
+而未来可以预见的是脑机接口，让智能系统更加精准地去理解人的意图。在这种背景下，智能可能无处不在，比如智能家居、安防、金融、零售、交通、教育、医疗、健康、制造、交通等等。但从交互上来看，不管是什么场景，交互无非还是那么几种。所以这节课我尝试从人因的角度，透过现象看本质，带你探寻一个智能系统和人交互的基本特点。
+
+## AI系统设计的挑战
+
+首先我们来看看我们在AI系统设计中，究竟会面对哪些挑战。
+
+作为一个智能交互系统，有三个特点我们是必须要面对的：
+
+- 智能系统会根据获取的信息自行作出一些判断和回应，而且这些回应很多时候是不完美的；
+- 智能系统是一个进化系统，它在不停学习，进步或者退步完全取决于训练的数据（和教育一个孩子类似）；
+- 由于它会学习并能主动回应，因此未来演进的状况是未知的，并不能简单预测（和一个孩子的成长类似）。
+
+人对智能体的态度是新奇并且警戒的，信任关系的建立取决于接触的深度。最终信任的建立取决于：
+
+- 人判断智能系统已经成长到有能力承担某个具体任务；
+- 人发现智能系统对人的意图理解准确，不会曲解，更不会有恶意；
+- 没有干扰智能系统正常运行的元素。
+
+为什么目前大多数人难以建立对智能系统长期稳定的信赖关系？多半是自己深度使用后，发现真实体验和预期的差距太大，或者智能系统的能力成长太慢，显得太笨。
+
+正是因为AI系统的这些特质，导致很多设计师在设计的时候无从下手。我以前接触很多设计师在给AI相关的技术做界面设计的时候，概念稿都非常漂亮。但真正做出来用户体验后，用户的感知就是买家秀、不理想。我下面列了一些设计师在给AI系统做设计时，一般会遇到的困难和挑战。
+
+<img src="https://static001.geekbang.org/resource/image/da/ee/dab11a7edea7ecdb0f4400f58f6e98ee.png" alt="">
+
+## 应对不完美的AI
+
+之所以存在这些挑战，究其根源，就是大部分设计师并非技术出身，对AI和人之间的关系理解不深，存在诸多误解。
+
+有的设计师对AI技术充满理想主义，把人工智能的技术想象得非常完美。很多设计师基于智能技术最佳表现情况去设计交互体验。但实际上AI技术和传统自动化技术的最大区别在于，它会犯错，而且犯错的概率还蛮高。比如对于下面这些图，当前很多AI技术的确很难准确区出狗狗和美食。
+
+<img src="https://static001.geekbang.org/resource/image/ed/f7/ed59314b54f88fef5e835597yy465af7.png" alt="">
+
+谷歌因为在2015年误把黑人识别为大猩猩，干脆在图像识别里面把大猩猩或者猿这一类的关键词给删除了。也就是说哪怕是6年后的现在，你如果在Google以图搜图，即便是个大猩猩的脸，搜出来也没有大猩猩的词。
+
+我得承认，这是一个糟糕的、偷懒的设计。但是在当下“Black Lives Matter”的平权政治正确的大背景下，至少算是一个安全的处理手法。
+
+<img src="https://static001.geekbang.org/resource/image/43/35/43a87c33bc5cb81683a93b1ece5ce435.jpg" alt="">
+
+面对AI技术经常犯错的事实，我们确实需要严肃地思考，在设计中如何应对这种错误？针对不同的技术成熟度水准，我们有没有给用户足够的提示，让用户意识到AI技术的局限，从而降低用户的期待？这本质是一个设计问题，而不是一个技术问题。
+
+### 坦诚展示系统的可信度
+
+当下很多AI产品在广告宣传里，展示了谜一般的自信（广告里会展示该AI产品的响应速度十分迅速）。其实好的体验绝对不是响应的速度有多快，也不是回答有多细致，而是**答案是否精准正确**。
+
+如果系统在判断时纠结，那就应该体现这种不确定。甚至直接说“不清楚、不知道”，都会比回答一个错误的答案要显得更为真挚和坦诚。
+
+在AI技术识别一个物体的时候，置信度累计是经常采用的方式。置信度的高低依赖于优秀样本的数量以及累积机器学习的时间。当AI不太自信，存在置信度判断阈值不够，就会出现纠结。这个时候，是不是应该把这种不确信的情况展露在明处而不是隐藏起来？
+
+比如下面是一个图像识别应用的例子，左半部分是真实的情况，右半部分是改进的建议。显然改进后增加了置信度的信息，让这种图像识别显得更为真诚和可信。
+
+<img src="https://static001.geekbang.org/resource/image/36/ce/361b7280c2c064c5b1cfbd8ff7ebf4ce.png" alt="">
+
+### 阐明系统的预测逻辑
+
+告诉用户你的预测逻辑，其实也会让用户对你的算法产生理性的判断和评价。
+
+我在微信阅读里面看到两个数据的展示方式，一个是推荐值，一个是匹配度。在推荐值方面给的信息很清楚，其实就是根据历史阅读这本书的用户对其评价说好看的比例，严格来说这也不算是AI算法。
+
+但是对于匹配度，就有些讳莫如深了。尽管点进去提示为你推荐的理由是“根据你的阅读记录推荐与你匹配度超过80%的书”。但用户会产生一连串的疑问：到底分析了我的什么阅读记录？是我看过的书的品类还是我读过的文字，还是根据书名关键词？这其中有没有侵犯隐私的情况？80%是如何计算出来的，怎样才算80%？
+
+<img src="https://static001.geekbang.org/resource/image/6a/eb/6aff134d942fdf6bcb26de4694c604eb.jpg" alt="">
+
+**在AI时代，如果给用户展示的是黑盒子，信任就会很难建立。**淘宝和拼多多在每个商品下面的推荐更多用的词分别是：“看了又看”和“相似商品”，在推荐逻辑上都没有讲透。用户不知道推荐商品的排序逻辑是什么样的，信任感的建立也不够。特别是如果用户买过一个商品，结果后续又推荐给用户一个他觉得更好的同类商品，那么用户会对系统的推荐产生一种排斥和警惕。
+
+我们再来看看亚马逊的例子。亚马逊在推荐商品的前面加了一句话“看过这个商品的用户也同样看过”。别小瞧这句话，这就很明显讲出了背后的计算逻辑。相对于淘宝和拼多多，其实这种推荐更容易和用户建立信任。
+
+<img src="https://static001.geekbang.org/resource/image/9e/b3/9e1589d9894734d8f69038d432e7fbb3.jpeg" alt="">
+
+### 寻求用户的帮助和裁决
+
+我们经常会用“空杯心态”去评价一个学习型人格。作为一个学习成长的系统，也应该有这样的心态。AI系统如果经常寻求用户的帮助，也是一个成长学习的过程。比如你对着智能音箱说“给Zoe打电话”。假如系统发现通讯录有多个Zoe，不确定是哪一个的时候会怎么办？系统可以按照下面的方式回应。
+
+系统：好的，请问是昨天联系过的哪个Zoe吗？
+
+你：是的。
+
+系统：好的，正在拨打Zoe的手机。
+
+注意，系统询问用户是哪个Zoe的时候，坦诚地告知了用户，它猜测应该是最近联系过的那个，背后其实也披露了系统进行判断的算法逻辑。但是系统仍认为没有达到准确判定的阈值，因此寻求用户的帮助和裁决进行了二次确认。
+
+同样在Gmail的AI识别算法中，当系统发现你的邮件正文提到“附件”这个关键词，而你点击发送按钮时并没有附件时，会和你进行二次确认是否要添加附件，这也是寻求用户裁决的一种方式。
+
+<img src="https://static001.geekbang.org/resource/image/ee/96/eeaeed77092b92487a53b92dab721f96.png" alt="">
+
+通过用户的裁决来反向训练AI系统，系统就会不断优化，体验也会提升。**一个好的智能系统一定要懂得什么时机“可以交给我”以及“我不行，你要帮我”。**人机的信任需要建立在这种坦诚的基础上。
+
+### 让用户训练正确的数据
+
+现在有些App喜欢通过后台收集用户行为数据的方式去训练智能系统，这其实是一种灰度的隐私侵犯。尽管有数据收集协议让用户在使用APP的时候点击确认签署，但是很少有用户会去仔细读协议里大段的晦涩文字，也就相当于默许了这种行为。
+
+一些高级的让用户训练数据的方法，会把收集做在明面上。前面说的用户参与决策就是其中一种。
+
+还有的高级方法会寻求用户的调研反馈。华为以前会随机地向其使用者手机发放一些电子调查问卷，用户选择答复后还会有对应的回馈和答谢。这也是一种暴露在阳光下的数据训练。
+
+再比如很多智能音箱背后的AI算法数据训练都不够，要如何去优质地持续训练这个系统呢？讯飞就提供了讯飞听见的业务，表面上是构建一个翻译业务的平台，其本质是通过人工翻译业务去更加高质量地训练数据。
+
+<img src="https://static001.geekbang.org/resource/image/4b/0e/4b46d8bf2d403771210027954634ab0e.jpg" alt="">
+
+### 成长的系统需要成长的设计
+
+人工智能的内核技术是机器学习，而机器学习的本质是一个不停通过数据训练学习来不断进步的技术。与传统的工业自动化不同（工业自动化从都到尾都是一个确定的规则，也同样意味着确定的交互界面），随着AI学习的深入，机器对人意图的判断会越来越准确（如果训练数据质量高的话），所以交互界面也应该是一个动态变化的过程。
+
+正如两个人交往，随着了解越来越深，沟通的方式也会随之发生变化。如果智能系统对人的意图了解更深了，但还是同样的交互界面，会让用户觉得无可理喻。注意，这里说的是交互界面，而不仅仅是交互内容的精准推荐。
+
+在交互方式的选择上，无非是以下几种可能性。
+
+<img src="https://static001.geekbang.org/resource/image/38/b1/3873d6cfa49c8dc372b9f5171b209eb1.png" alt="">
+
+一开始智能系统不了解用户，会谨小慎微，各种迟疑犹豫，让用户询问更多决策需要的细节。随着对用户的了解深入，就可以直接给推荐决策了。
+
+如果了解再深入，就直接帮助用户把事情做完并给个提醒。甚至如果人对智能系统的信任默契达到一定程度，智能系统就会承担管家或者助理的角色，做事就可以润物细无声了。你可以参考下面语音交互中的例子。
+
+<img src="https://static001.geekbang.org/resource/image/37/8e/374e86408e3bf5c4999ac76b4f923f8e.png" alt="">
+
+在智能系统的图形界面（比如对话机器人、智能助手）设计中，也要有类似量体裁衣的动态变化。
+
+## 情感计算交互
+
+关于如何去应对智能系统的不完美，这是从智能系统自学习的特点去考虑的。但是关于智能系统是否应该感知和表达情绪，进而是否应该具有自我认知、良知，这就是一个存在争议的话题了。
+
+从设计维度来看，如果要AI正确地表达情感会是一个非常大的挑战。因为在真实的场景中，绝对不止[11](https://time.geekbang.org/column/article/351883)里提到的这六种情绪。你可以参考下面这两个相对复杂的模型（情感轮和情感沙漏），模型里有8种情绪，并且每种情绪还都分为了三种强度。
+
+<img src="https://static001.geekbang.org/resource/image/71/44/7154yy968f6872d08972583890fea344.png" alt="">
+
+而且在现实中即便运用这些模型，人的情绪也并非简单地单一出现，而是不同强度的8个类别的组合。比如我们在微信里用得非常高频的一个捂脸表情符，它到底是表示高兴、悲伤、尴尬、自嘲还是无奈？
+
+<img src="https://static001.geekbang.org/resource/image/4b/5d/4b5a184f485a3959750ca6e052d95f5d.jpg" alt="">
+
+即便是人脸表情识别，对智能系统而言也是非常大的挑战。迄今为止，针对表情的情感计算在体验上使用最为广泛的，也仅仅是类似Animoji这种通过跟踪人脸42块肌肉的变化，进而做出表情模仿，这其实就是简化版的皮克斯动画表情捕捉和生成技术。
+
+<img src="https://static001.geekbang.org/resource/image/13/ba/139c10153c99c0911cfebc2544c37cba.gif" alt="">
+
+尽管表情是识别情绪的最关键依据，但是绝不是不唯一。人说话语气语调语速的变化、打字的文字表达方式的不同、体征的变化甚至手指滑动屏幕的力度和速度都可能会暴露情绪。
+
+智能系统是否有能力捕获到这些变化后面隐含的情绪呢？很难。其实何止机器，在人与人的沟通中，我们也很难正确捕捉到对方的情感变化并做出积极正确的回应。
+
+人和人沟通里的小误会可以宽容，但拟人机器错误的情绪判断和僵硬的情绪表达，会加深恐怖谷的感受。**对智能体主动表达情绪的视觉效果设计，请避免过于参照真人。**Cozmo的表情包是一个很好的参照。
+
+<img src="https://static001.geekbang.org/resource/image/97/ea/973f81b7b8af9dc3690e22305f2207ea.jpg" alt="">
+
+未来随着智能系统的学习成长，一定会对表情的识别、理解、表达越来越精准，到那个阶段新的问题也会随之出现：人对情绪的掩饰也是个人隐私的一部分。如何准确地检测情绪并且要避免拆穿人刻意掩饰的情绪，这是对情感计算的高阶挑战。
+
+所以回到前面那个“应对不完美的AI”的话题，现在的表情识别的应用其实很少去寻求用户帮助，比如去问用户当下这个表情具体代表什么？你是否觉得合理？
+
+一旦缺乏这种正向反馈渠道，所有的设计包括Animoji，都更像是一个玩具，而不是一种有演化前景的表情识别应用。
+
+## 总结
+
+好了，讲到这里，今天的内容也就基本结束了。最后我来给你总结一下今天讲的要点。
+
+今天我们谈到了智能交互系统的三个特点：
+
+- 主动判断并回应，容易出错；
+- 进化学习系统；
+- 未来演进存在未知性。
+
+也同样谈到了，从人的心理分析，和智能系统建立信任关系的前提：
+
+- 认为智能体能力具备；
+- 发现智能体对意图理解准确；
+- 人认为当前环境是安全的。
+
+很多设计师设计的AI系统之所以会出现很多买家秀体验，就是对以上AI不完美的状况理解不到位。改善AI系统的设计有5个方法：
+
+<li>
+坦诚展示系统的置信度情况，让用户理解自己纠结或者出错的原因。
+</li>
+<li>
+避免黑盒，阐明系统的预测逻辑，逐步建立和用户的信任。
+</li>
+<li>
+在出现决策判断纠结时，寻求用户的帮助和裁决，这同样也是一种学习优化的途径。
+</li>
+<li>
+把对智能系统的训练做在明处，不要完全做地下党。
+</li>
+<li>
+在交互设计中，要有演进思维，交互的形式会随着智能系统能力的提升而趋于“自信”。
+</li>
+
+情感计算交互是智能交互系统的一种特殊方式，人类真实的情绪非常复杂，不要僵化在某一种或者两种模型的单一情绪运用。表情仅仅是情绪感知的一种手段，体征的变化，肢体语言、语音和文字的表达等都会体现情绪变化。在技术不成熟的时候不要去过度拟人化，采用卡通方式处理情绪反应会减少恐怖谷效果。
+
+即便情绪检测准确，也要在准确地检测情绪和避免拆穿人刻意掩饰的情绪之间做出平衡。
+
+## 作业
+
+最后我给你留了一个小作业，从今天我讲的内容，谈谈你对你熟悉的某款手机智能助手的理解，哪些设计做的好，哪些设计做的不够理想？

极客时间专栏/geek/基于人因的用户体验设计课/高级篇/23｜智能汽车交互：安全为王.md

@@ -0,0 +1,141 @@
+<audio id="audio" title="23｜智能汽车交互：安全为王" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/28/9c/28fefd881481e0dbd8cb33635c8d139c.mp3"></audio>
+
+你好，我是Rocky。
+
+今天我们来谈一谈智能汽车的交互设计。一说到智能汽车，很多人第一时间想到的一定是无人驾驶。特别是近半年来特别火爆的无人驾驶出租车，现在在很多城市都有试点了。
+
+如果你喜欢尝鲜，说不定已经体验过了。如果你体验过这种无人驾驶出租车，你的心情可能会有些复杂。因为在体验过程中你会看到要么是既定路线特别短，要么就是会有安全员坐在驾驶位上，并且会反复提醒你系好安全带。
+
+## 驾驶需要你85%的专注力
+
+即便对于一个无人驾驶即将来临的时代，安全依然是最为重要的一个考虑因素。当驾驶者分神或认知负荷过重时，就会增加事故发生的风险。据世卫组织的数据显示，每年有超过125万人死于道路交通事故，而这其中94％的事故是由驾驶者失误造成的。
+
+驾驶需要专注力高度集中，一般人开车需要专注力达到85%，这是一个非常耗费精力的事情。高速的运动、复杂的路况、环境变化、天气光线的变化、驾驶者的生理和心理状况等等各种干扰元素都会增加驾驶风险。在100公里时速的情况下开车，如果走神4秒钟，那就已经移动了110米，眨眼间就会酿成悲剧。
+
+根据美国汽车协会统计，60%年轻人的车祸都由分神引起，而且其中相当多的分神都可以通过体验设计来缓解。
+
+<img src="https://static001.geekbang.org/resource/image/4e/1f/4e11a818d718789889e6c3e289952e1f.png" alt="">
+
+从上述的事故分析图里我们可以归纳总结出，能让驾驶者分神或者认知负荷增加的情况一般分为四种，分别是视觉干扰、听觉干扰、单手握持方向盘以及疲倦干扰。
+
+<img src="https://static001.geekbang.org/resource/image/f9/5d/f9d5512ec7a08fef17f0fbdcd9abef5d.jpg" alt="">
+
+在体验交互设计上，我们要尽量避免这四种干扰情况的发生。
+
+## 减少视觉干扰
+
+我们先来看如何减少视觉干扰。自从特斯拉定标了大屏显示之后，大的屏幕显示仿佛成了很多智能汽车的标配，而且屏幕有越来越大的趋势。
+
+我的理解是现在智能汽车的屏幕尺寸提升速度，已经远远快于智能汽车自动驾驶能力的提升速度，过大的屏幕已经增加了安全隐患。我们调研过很多驾驶者在开有大屏车载系统车的过程中，眼睛总是会不经意地离开路况去瞄屏幕，即使屏幕上没有什么关键信息。
+
+<img src="https://static001.geekbang.org/resource/image/46/6c/46c264a3e1b5d724eed6d140c8407c6c.png" alt="">
+
+如果我们不能通过决策去缓解大屏滥用的情况，那至少要从以下的视觉设计维度去考虑屏幕对人注意力和认知负荷的影响。
+
+### 可读性和易读性
+
+最优先保证的是可读性。关键信息字符大小不能小于32dp，次要信息字符也不要小于24dp。字符排版要符合扫视规律，结构化文本清晰阅读，关键信息比非关键信息要更大一些。避免出现粗体和专业词汇，删除任何一个多余的字，控制每句话的长度（谷歌是汉字字符串不能超过31个，但我认为这个规范还应该更为严苛）。
+
+对比度要控制在大于4.5:1，但同样也不能太大，特别是在深色模式（夜间或者过隧道）下，避免颠簸过程中的炫光和残影。
+
+<img src="https://static001.geekbang.org/resource/image/72/0d/728b9f2d79fb68a7359706e0f911390d.jpg" alt="">
+
+所有与驾驶相关的任务或者告警、通知都是最高优先级。当有与驾驶相关的告警或通知时，其他非驾驶任务必须暂停或者模糊化退到背景。任何非驾驶任务都不能喧宾夺主，需要让驾驶者第一时间了解到状况。
+
+<img src="https://static001.geekbang.org/resource/image/68/20/680bc33cf05b2889c83a3c39660e1520.png" alt="">
+
+**严格控制任何非交互动效的设计。**任何花里胡哨的动效都会增加视觉干扰，增加安全隐患。
+
+有一项技术在未来屏幕显示方面很有前景，那就是透明显示在挡风玻璃上的运用（抬头显示系统）。
+
+很多设计师容易滥用这种显示，比如增加沿街店铺的打折推荐、智能家居的电器操控。我不得不唱个反调，在当下这些是完全违背安全驾驶原则的。因为目前人一定要通过挡风玻璃看到外部路况，在挡风玻璃上的显示如果不是辅助路况的，那就都是干扰项。
+
+什么叫辅助道路显示呢？比如增强现实和道路契合的导航信息，某些危险移动或者阻碍驾驶的障碍物的预警加强，或者对于前车车速的跟踪和对应的追尾预警。除此之外，一切和驾驶无关的信息都要避免在挡风玻璃上出现。
+
+<img src="https://static001.geekbang.org/resource/image/72/92/72a4f8f931e5aede36b736ffe8218892.jpg" alt="">
+
+## 减少听觉干扰
+
+尽管听觉的干扰没有视觉的干扰严重，但是在开车过程中打电话一样会引起安全隐患。打电话的声音会掩盖路况上的汽车喇叭声以及其他关键路况的声音。
+
+除此之外，研究表明当人们进行交谈时，他们对路况的扫描频率会降低，而且不会完全专注于侧面和后视镜的扫视。当然从驾驶者的体验维度，我们很难从交互设计上禁止驾驶者在开车时打电话（尽管这也是一种选项）。
+
+不过我们至少可以在电话接听时，保证后台的驾驶导航的语音播报保持在最高优先级，并自动降低通话通道的音量。同时，对于其他的非驾驶媒体播放应用也是同样处理。
+
+而且，驾驶过程中的语音交互也经常会影响注意力（比如语音助手的唤醒复杂度）。语音交互是否覆盖了所有驾驶过程中的业务和屏幕上的所有触屏交互？如果没有，任何语音交互的不连续交互，都会增加驾驶者中途用触屏去弥补语音不足的情况，这也会增加驾驶安全隐患。
+
+根据人糟糕的短期记忆力，我们很难在大段冗长的语音播报里记住多少有用的信息。所以语音播报必须满足最小组词原则，言简意赅。有个测试短期记忆的实验发现被试者在听到声音8秒后，对声音内容的记忆就开始减弱。所以我们需要把语音播报的长度尽可能控制到8秒以内。
+
+车载或者驾驶模式的语音助手也不能简单推演手机的语音助手模式。比如当驾驶者提出如“带我到最近的加油站”之类的特定要求时，如果在非驾驶状态操作，语音助手可能会给驾驶者提供多条路径选择，让驾驶者继续点击。但是在驾驶模式下，驾驶者更希望导航立即开始，而不是看到选项列表。
+
+## 减少单手握持方向盘
+
+如果设计了触摸屏后再限制驾驶者去触摸，这基本上是非常困难的。所以减少驾驶者触屏的机会就变得非常重要。特斯拉在2018年经历了几次严重事故后，在同年6月份更新了Autopilot的驾驶者辅助系统，这个系统会通过视觉和听觉提醒驾驶者，必须把双手放回到方向盘上。
+
+<img src="https://static001.geekbang.org/resource/image/ec/35/ec32554ced4024e3aa6fab5e82c7e435.jpg" alt="">
+
+不过仅仅通过系统去提醒驾驶者是远远不够的。减少驾驶者右手（左行情况下是左手）的触屏次数以及提升触屏的准确率非常重要。所有触屏元素的目标尺寸不能太小（Android Auto定义的是76*76dp），而且任何触屏元素之间的间隔必须要保证，这样驾驶者在快速开车或者颠簸时能快速准确地点击到屏幕元素。
+
+<img src="https://static001.geekbang.org/resource/image/44/49/44d3f60756f766c94fbef1c9592ac549.jpg" alt="">
+
+驾驶者常用的操作界面元素一定得更便于驾驶者触控到，位置偏屏幕左侧或者左下侧。不要简单遵循手机界面的操作逻辑。
+
+手机触屏交互的很多复杂手势，都不适合于迁移到车载系统的触屏。比如在车载系统上更难区分滑动和清扫，请避免这两种手势共存。同时在很多场景下也很难单机长按或者双击（特别在颠簸状况下）。在这点上，苹果的CarPlay其实做得不够好。
+
+另外，方向盘上的旋钮或者按键也能有效减少驾驶者手离开方向盘，需要打通这种物理按键和屏幕元素之间的映射。
+
+## 避免疲劳驾驶
+
+各种研究表明，在所有道路事故中除了分神外，约有20％的事故与疲劳有关，在某些路段疲劳导致的事故甚至高达50％。
+
+现在能检测到驾驶者疲倦的技术很多，有通过手表监控生物电信号的（比如呼吸和心跳速度），有监控驾驶行为的（比如驾驶者驾驶状况突变或者违规异常），还有用得最多的是面部视觉分析（检测是否闭眼、是否眼神游离）。
+
+<img src="https://static001.geekbang.org/resource/image/f6/0c/f61168ef14f38aeb3a4db708b674720c.png" alt="">
+
+发现疲劳驾驶是一方面，如何解决问题更加重要。有的是通过图形和语音，甚至告警音提醒驾驶者休息，有的依赖于座椅的振动。
+
+从安全维度来看，是否有更安全的手段？我觉得自动驾驶这个时候最大的作用，不是不停去唤醒驾驶者。驾驶者不可能因为唤醒就很快脱离疲惫，那么我们是否可以直接自动将车引导至安全停靠处？甚至直接引导到最近的咖啡店或者加油站休息站？
+
+## 事实安全与感知安全
+
+对于驾驶而言，安全分为两类。一种是事实安全，一种是感知安全。前者是汽车本身通过技术和设计来保障的，当然也和交通规则以及路况天气等环境有关，后者是驾驶者的心理安全感。这两种安全有交集，如果两个交集越大就表明汽车的安全设计越符合驾驶者的预期，信任感也就越容易建立。
+
+<img src="https://static001.geekbang.org/resource/image/8b/5a/8b1b4fbd6fb6d582579eb78c5217715a.png" alt="">
+
+但要注意，感知安全并不意味着真的安全，感知安全会出现偏差。比如大部分人对交通信号灯的感知是安全的，但很多事故都发生在正常规则遵守信号灯的情况下。我在英国的时候，发现十字路口的信号灯偏少，更多的是一种环岛机制（Roundabout），很多人过环岛的时候会高度紧张，感知安全度不高，但实际上在红绿灯十字路口的事故发生率要高于环岛的事故发生率。
+
+<img src="https://static001.geekbang.org/resource/image/d5/b0/d5e70a0833d9de83b3b2c7c43d744fb0.png" alt="">
+
+感知安全带来的信任关系是个循序渐进的构建过程。随着自动驾驶水平的提升，对车的控制权也从人向车转移，直到最后不需要驾驶者。当然，信任度完全建立后，也不再需要方向盘。
+
+<img src="https://static001.geekbang.org/resource/image/c2/6a/c2280bb2341b76190cf658059afd586a.png" alt="">
+
+除了驾驶者本身，如何改变车外路人和自动驾驶车辆之间的信任关系，也是一个需要重点考虑的点。如果一个人过斑马线，同时有一辆人驾驶的车辆行驶过来，很多情况下路人是通过车辆的速度来判断是否应该等这辆车经过。
+
+如果以上场景换成一辆自动驾驶的汽车从远方驶来，行人是应该停下等车过去，还是假设自动驾驶的车辆一定会等行人，从而大步走过去？假如行人缺乏对自动驾驶车辆的信任，不敢过，自动驾驶的车辆是应该停下来，还是直接开过去？
+
+人在没有和智能系统熟练互动经验的情况下，这种互等的尴尬场景出现概率很高。百度在这方面进行了大胆的尝试：在车外屏幕也增加了一些信息显示，增加了和行人互动的沟通渠道。
+
+<img src="https://static001.geekbang.org/resource/image/fe/bd/fe4a754afe2b16d4b47482da5f01e9bd.jpg" alt="">
+
+## 总结
+
+好了，讲到这里，今天的内容也就基本结束了。最后我来给你总结一下今天讲的要点。
+
+每年有超过125万人死于道路交通事故，其中94%的事故都是驾驶者失误造成的。因此即便是智能汽车自动驾驶，要始终把安全第一作为首要设计原则。
+
+驾驶是需要高度专注力的任务，科学研究总结一般需要85%的专注力。体验设计的目标就是最大限度减少分神或者认知负荷增加的情况。会引起这种情况的一般是四种原因：视觉干扰、听觉干扰、单手握持方向盘以及疲倦干扰。
+
+智能汽车主控显示屏尺寸提升速度，已经远快于其自动驾驶能力的提升速度，这也导致了安全隐患的增加。我们在设计中要减少用户扫视屏幕的时间，大字体、结构化表达、言简意赅、高清对比度以及避免拖沓的动效都是为了达到这个目的。同时在视觉层级处理上，驾驶任务永远都要有最高优先级。在抬头显示系统上，不要人工制造干扰项。
+
+听觉一样会产生干扰，开车打电话会降低驾驶者路况扫描频率。所以即便用户打电话，也要在声音通道音量层次上，把路况播报放在最高优先级。车载语音助手要具备完备替代触摸屏的能力，而且播报要最小组词原则，长度控制在8秒钟之内，同时减少用户多次交互的机会。
+
+即便是智能驾驶，也要提醒用户双手不能离开方向盘。而且要通过加大触屏元素尺寸和间隔，合理排版交互元素位置（偏左、偏下），简化触屏手势来减少用户触屏难度和误触概率。
+
+在疲劳驾驶方面，不仅仅是多项技术发现疲劳并唤醒用户，还要能有自救方案，比如将车自动驾驶到安全区域停车或者导航到休息站。
+
+除了以上手段来提升事实安全，也要兼顾驾驶者的感知安全以提升人对车的信任感。人和车之间驾驶安全信任的建立不仅仅局限在驾驶者，也包括路人。车外屏幕显示是一种非常好的尝试。
+
+## 作业
+
+最后，我给你留了一个小作业，从今天我讲的人的安全维度，谈谈你对当前驾驶车辆的用户体验设计有什么改进点。

极客时间专栏/geek/基于人因的用户体验设计课/高级篇/24｜新手机形态对触屏交互影响：折叠屏的创新体验.md

@@ -0,0 +1,154 @@
+<audio id="audio" title="24｜新手机形态对触屏交互影响：折叠屏的创新体验" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/7e/2c/7e974609f4bc925dbc142d5d06f9bc2c.mp3"></audio>
+
+你好，我是Rocky。
+
+今天我们来继续聊聊触屏交互。我们在前面有几节课里，多多少少都谈到了一些触屏交互的内容，今天我继续扩展，和你接着聊聊前面的没有涉及到的话题：手机形态对触屏交互的影响。
+
+智能手机演进从一开始的仅减少物理按键、屏幕越来越大直到变成全面屏后，在二维演进方向上已经没有了太多的发挥空间。在柔性屏技术的加持下，开始从立体屏幕和多块屏幕的维度演进变化。下面我分别给出了这两波变化演进的示意图，其中第二波演变还在进行当中。
+
+<img src="https://static001.geekbang.org/resource/image/4d/a3/4dbf07b4b6cdd298yy98e38004cb10a3.png" alt="">
+
+这种升维的复杂度变化，对智能终端的交互提出了新的挑战。同一个应用的交互界面，在第一波演进中，还仅仅是简单地适配一个屏幕尺寸的大小变化，但在第二波演进里，就会变成了如何应对这些复杂的屏幕形态变化，而真正意识到这种变化的应用其实并不多。
+
+我接下来尝试从人因维度来给你分析一下这些变化会给体验带来的影响，以及设计上该如何去应对。
+
+## 酷炫但尴尬的瀑布屏
+
+手机瀑布屏从一开始一点弯曲，到弯曲角度越来越陡，再到弯曲角度超过侧边的中线、取消了侧边物理按键，甚至某些手机都直接包裹到了背面。瀑布屏的包裹也不仅仅体现在左右的侧边，也会延展包裹上下侧边。
+
+<img src="https://static001.geekbang.org/resource/image/a2/d5/a262510a20bfc443192378d6b1c5efd5.png" alt="">
+
+可以想象沿着这个趋势走下去，我们的手机就会被屏幕全部包裹，最终变成一个类似香皂的圆滑玻璃体。确实这种越来越明显的侧边曲面设计，第一眼看起来十分令人心动，能激发人的本能层体验。但就和[01](https://time.geekbang.org/column/article/345053)里的外星人榨汁机一样，这样的设计在真正的使用体验上，确实不够理想。
+
+<img src="https://static001.geekbang.org/resource/image/24/10/249661054c9dff2a027c5bd685863c10.jpg" alt="">
+
+从显示维度来看，瀑布屏从正上方看过去，侧边玻璃会因为光线折射的原因出现色彩失真以及图像畸变，或者干脆看不清楚。即便视线真正从侧边看过去，如果有弧度，依然存在类似问题。
+
+从显示上来看，侧边的屏幕确实有些鸡肋了。如果不加约束，在很多内容很强的应用里面，这种失真畸变的体验恐怕是很多用户难以接受的。
+
+<img src="https://static001.geekbang.org/resource/image/e3/a7/e3b7e76e44719fddc27e683eb8aa46a7.png" alt="">
+
+侧边屏显示哪些信息会好一些呢？小米的概念设计里针对侧边的显示做了一些视觉上的尝试，比如把信号栏直接移到侧边，让正面屏幕更为沉浸在某一个应用中。但尴尬的情况在于，以前手机一亮屏用户就知道还有多少电量或者时间，现在恐怕要把手机侧过来才能看到了。
+
+<img src="https://static001.geekbang.org/resource/image/8f/9d/8f59c0571a5898dcd2a9cc7b255f6d9d.png" alt="">
+
+从交互上来看，瀑布屏的处境也十分尴尬。很多应用的侧边存在着很多交互控件（特别是游戏应用），因为瀑布屏的原因，如果这些交互控件没有约束，那么大量的交互会直接到用户握持手机的掌心或者拇指指腹的位置，从而增加触控判断的难度和误触的风险。
+
+**为了规避侧边交互误触，可以减少侧边交互控件的数量以及定义交互热区的规范。**
+
+安卓意识到了这个问题，于是允许智能手机的开发者来定义交互热区的位置。开发者在创建程序的时候，可以指定屏幕上可交互的区域，以防止交互元素溢出到瀑布屏的边缘。
+
+但在我看来这种做法相当于把侧边交互的尴尬皮球踢给了手机制造商。比如上面小米的方案，如果你点击屏幕顶部的WiFi系统图标，可以直接设置WiFi热点。但如果你将信号栏调整到侧边后，就不允许点击图标设置热点了。这是不是变得体验下降了呢？
+
+<img src="https://static001.geekbang.org/resource/image/e8/1c/e874f5d9619c477af840d8d48479361c.png" alt="">
+
+总体而言，瀑布屏的设计是一个本能体验远大于实用性的设计。相对来说，折叠屏就不同。
+
+## 颠覆性的折叠屏体验
+
+这两年从MateX和Galaxy Fold开始，华为和三星展开了折叠屏的大战，后来其他厂家也开始陆续加入战场。相比于侧边曲面屏而言，折叠屏确实是颠覆式的创新。
+
+从屏幕完全合并、完全打开再到部分打开的中间态，折叠屏有非常多的可能使用场景。所以当你需要考虑折叠屏场景运用的时候，请注意这些变化。以下我以内折带外屏的情况，给你做一个示例。
+
+<img src="https://static001.geekbang.org/resource/image/31/9d/31b03059c3e2a16f8561b8dbdb3ff69d.png" alt="">
+
+其实折叠屏十分特殊，我们在使用时需要充分考虑它的特殊性。接下来我来和你聊聊在折叠屏体验设计中，你需要注意到的点。
+
+### 折叠和展开的屏幕布局适配
+
+折叠屏存在两种稳态：**折叠稳态**和**展开稳态**。屏幕大小变化需要与业务动态适配。
+
+基于这两种稳态，我们就需要考虑所有元素在不同屏幕上尺寸的动态变化和延展，灵活调整布局来达到完美契合屏幕的体验，同时提供布局切换的连续性动效变化（特别是外折屏，因为在折叠的整个过程中，用户看到的始终是一块屏，只不过折叠后看到的是这块屏的一半）。
+
+<img src="https://static001.geekbang.org/resource/image/4b/45/4b688908c80693434b99ea879eb4f345.gif" alt="">
+
+对于展开折叠后的布局变化，可能是简单的延展、分栏，或者是上下左右位置的换位调整，又或者是下一级层级结构的展开。不同的应用应该根据自己的实际情况进行灵活设计。
+
+### 折叠展开后反面的奇妙体验
+
+**折叠态和展开态都可以有正面和反面，那么就需要识别哪一面朝向用户。**
+
+很少有人想到能利用后置镜头的强大模组进行自拍。折叠屏改变了后置镜头无法自拍的约束，华为的MateX2折叠屏就是一个很好的例子。
+
+<img src="https://static001.geekbang.org/resource/image/c2/20/c292b66yy0f7bff53b0a879b750eac20.jpg" alt="">
+
+当然这个反面屏也可以在别人给你拍照的时候变成镜像画面，让你实时看到拍摄效果并调整面部表情与姿势。
+
+### 方型屏更适合并行多任务
+
+左右折叠手机展开后的稳态屏幕尺寸更接近方形，而非传统的16:9到21:9的屏幕长宽比。
+
+方型屏更适合多屏操作，沿着折痕会天然形成两个视觉区域，也存在分屏体验的隐喻。方型屏会对很多应用的适配提出更高的挑战。
+
+以横版视频为例，一般会有4:3、16:9、21:9等几种比例。方型屏直接沉浸式播放单一视频时，屏幕利用率并不会最大化，会出现上下两个非常明显的大黑边。
+
+**不过于追求沉浸式会是更好的解决方案。**比如下面华为视频在方型屏的运用，就可以同时播放主视频和预览视频，直接将方型屏切割为多个小屏幕带来不一样的视觉体验。
+
+<img src="https://static001.geekbang.org/resource/image/4a/f1/4ae105e26682699ff9858d7f0ec1c7f1.gif" alt="">
+
+沿着方型屏的折痕，本身就带有折叠的隐喻，可以天然把分屏体验做到最佳。所以某些分屏体验在传统手机上用起来有些拘束（比如上下分屏后调起输入法就会把某个屏幕遮挡住，体验很糟糕），但是在这种类型的屏幕上反而会得心应手（比如华为的智慧分屏）。
+
+<img src="https://static001.geekbang.org/resource/image/3b/59/3b3yy95c8923f5560d7cfd16e82ee659.jpg" alt="">
+
+侧边栏的交互体验也是如此。传统手机屏幕偏窄，侧边栏的使用并不是一个体验很好的方案（特别在单手握持的情况下）。而对于折叠屏展开态来说，从屏幕尺寸上已经不需要考虑单手握持，双手握持的操作会让侧边栏的交互变得更加轻松。
+
+### 善用折叠屏的中间态
+
+折叠屏存在中间态：**半折叠状态**。半折叠状态可以通过支架形式立在平面上，也可以某一面平放在一个平面上，从而模拟某些物体的体验（比如台历、笔记本）。
+
+拍照的时候中间态可以模拟三脚架，而且镜头的方向也能够根据需求灵活调整。比如对于自拍来说，你就可以展露双手，让你的自拍显得更为自然。三星的Galaxy Z Flip的Flex Mode就利用了这种中间态。
+
+<img src="https://static001.geekbang.org/resource/image/82/38/828660dd8186ce5bb4ae21bca8de6a38.jpg" alt="">
+
+当然，这种中间态的屏幕放置还会有其他的变种。也能把前置和后置镜头的拍摄角度带来更多的可能。
+
+### 折叠屏的多人互动场景
+
+**在某些折叠角度，屏幕可以被两个相反方向的人看到，存在双人交互的可能。**
+
+除了拍照之外，如果把中间态的外折屏倒扣着立在平面上，就会自动构成一个两个屏幕对着不同方向的效果。
+
+这种中间态也为人们不同的互动提供了新的交互可能（比如翻译、游戏互动）。两个对坐的人都可以看到折叠屏中间的那一条区域，这个区域也可以作为视觉共享空间来显示信息，你可以针对不同场景来做出相应的业务设计。
+
+<img src="https://static001.geekbang.org/resource/image/02/df/02a5da79c23641edyyea4b387e074fdf.png" alt="">
+
+### 折叠动作的动效设计
+
+内折屏打开的动效设计也是一种很有意思的隐喻暗示，这是在暗示某种物体的打开。这种打开可能是一只蝴蝶打开翅膀、一朵绚丽的鲜花的绽放或者拨开云朵。这种动态的折叠展开必须要求一种动态的主体与之相对应，而且所有主体的动作都要和折叠转轴打开的角度进行对应，这样才能更加增加趣味性。
+
+<img src="https://static001.geekbang.org/resource/image/ec/15/ecfd9c98c54b5e194d1171600716ab15.jpg" alt="">
+
+## 柔性屏的未来
+
+刚刚我们主要讲的是两折屏的体验，未来会不会出现三折屏、四折屏？又或者是更加柔性的卷轴和环形屏幕？
+
+我们无法精准地预测未来，但我相信，正如前面分析的瀑布屏和折叠屏一样，实用性强的产品一定比单纯视觉美观体验产品，有更强的生命力和更高的用户喜爱度。
+
+<img src="https://static001.geekbang.org/resource/image/57/e9/5726420b49c170f983899513a05a31e9.jpg" alt="">
+
+不管是什么屏幕形态的变化，万变不离其中，我们需要分析的就是这种屏幕带来的握持触屏交互的变化、布局排版的变化以及业务场景的最佳组合变化。相信随着穿戴设备屏幕形态和尺寸的变化，一定会给触屏体验创新设计开启一扇新的大门。这对于任何一个用户体验设计师而言，都将是令人兴奋的机遇。
+
+## 总结
+
+讲到这里，今天的内容也就基本结束了。今天我们主要讲了新的手机形态对触屏交互的影响。
+
+手机最近几年已经开始从二维方向演进到了三维。最典型的是两种：瀑布屏和折叠屏。
+
+瀑布屏未来会包裹左右和上下侧边，使手机变成浑圆的玻璃体。但从体验上来看，色彩失真图形畸变以及交互误触的增加，让这种设计的本能层体验远大于行为层体验。为了规避侧边交互误触，可以减少侧边交互控件的数量以及交互热区的规范。
+
+折叠屏和瀑布屏不同，折叠屏可以带来颠覆性的创新体验。折叠屏分为折叠态、展开态和中间态。
+
+针对折叠屏的设计需要考虑它的特殊性，包括：
+
+1. 折叠态和展开态屏幕尺寸的动态适配。布局的动态调整包括延展、分栏、换位和新层级展开。
+1. 善于运用折叠屏的正反面。比如在内折屏的展开态里，外屏和后置镜头在同一面，可以直接用后置镜头进行自拍。
+1. 方型屏的多屏操作和分屏隐喻。不必简单追求方型屏的沉浸式体验，这种屏幕更适合多屏、多窗口的互动和分屏体验。
+1. 半折叠中间态的支架运用。比如上下内折叠的手机半折叠态更加自然的自拍体验。
+1. 折叠屏的多人互动场景。两半屏幕分别对着两个方向，存在多人互动可能。
+1. 折叠动作的运用。要有动态主题来适配内折屏的开屏主题动效。
+
+不管是什么形态的折叠屏和柔性屏，本质都是分析屏幕对握持触屏交互体验的变化，进而引发布局排版变化和业务场景组合变化，这需要根据具体情况具体分析。但针对柔性屏未来手机的创新体验，确实是令人振奋的机遇。
+
+## 作业
+
+最后我给你留了一个小作业，请你思考一下如果你的应用运行在折叠屏手机上，可以怎么去善用折叠屏的特点，给出创新的体验？

极客时间专栏/geek/基于人因的用户体验设计课/高级篇/25｜语言学在设计中运用：命名也有心理学.md

@@ -0,0 +1,137 @@
+<audio id="audio" title="25｜语言学在设计中运用：命名也有心理学" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/e2/15/e2a3a5a233ea148af753bdd7aa497e15.mp3"></audio>
+
+你好，我是Rocky。
+
+今天我们来继续聊聊语言学在设计中的运用。
+
+很多设计师坚信一图胜千言，并不太重视文本，甚至在本应该出现文字的地方都用设计排版界的占位符“Lorem ipsum”应付了事。确实，很多时候人脑对图像的理解速度要远远快于对文字的理解速度。
+
+但恰恰是因为这个原因，**图像在表意上的准确性要低于文字**。因为我们的图像可能含有非常多的涵义，没有文字就会缺乏清晰精准的阐释，也就存在被误解的可能。所以文字在准确传递想法方面肯定是要优于图像的。
+
+很多时候短短几个字的变化，带来的效果是惊人的。2017年谷歌的UX作家介绍了一个订阅房间的真实案例，他把“预定房间”改为“检查空房情况”后，用户的点击率提升了17%。
+
+<img src="https://static001.geekbang.org/resource/image/5d/68/5d18ff86f2b223b237d8d13b32d2b068.jpg" alt="">
+
+为什么会出现上述的变化？因为“预定房间”意味着更高的承诺，意味着有强迫购买的嫌疑。而“检查空房情况”则仅仅是搜索房间的可用性，不需要有任何承诺。在这种情况下用户点击按钮的心理负担会更轻，操作过程会更放松。从这个例子中我们可以看到语言学在设计中的强大魅力。
+
+## 明确设计中语言学应用的要点
+
+对于大部分设计师而言，语言学还是一个既熟悉又陌生的领域。熟悉是因为我们每个人都会至少一种语言，陌生是因为语言学领域博大精深。它既涉及社会学、心理学、历史、地理、文化这些明显偏文科的知识体系，也涉及到声学、生物学、信息科学、计算机科学、符号编码、逻辑学、通讯科学、甚至数学的一些理科知识体系。
+
+今天的课程我们没法完全覆盖到这么多的内容，所以我今天将在体验设计维度里找几个关键点，重点和你聊一聊。
+
+我们先拿用户体验设计中的话术设计和传统市场营销中的话术设计来对比一下：
+
+<img src="https://static001.geekbang.org/resource/image/42/dd/426347968fb90e45d7464c1e4a2988dd.png" alt="">
+
+你看，营销团队撰写的文案一定是以营销推广产品为目的的，而UX设计撰写文案是为了帮助用户高效、愉悦地完成任务，以增加用户对产品的喜爱。营销可以故弄玄虚、夸大状况，甚至可以不说人话，但是我们用户体验设计绝对不行。
+
+## 讲人话
+
+所有界面交互的用语，最重要的一个原则就是**讲人话**。我们所有的人机互动，最终都是希望能够顺畅自然地完成交互。
+
+首先，我们要使用熟悉的、容易理解的字、词和短语。大部分人对技术望而生畏，因此需要最大程度地避免使用人们不太理解的技术首字母缩写和技术含金量很高的技术术语。只有在明显是给高级用户使用的设置或者应用中，才允许出现一些缩写和术语（比如手机里面的设置）。尤其是第一级和第二级的文字内容，都要避免使用任何缩写或技术含量高的术语。
+
+同时，我们界面与用户之间的交流应该是清爽简短、没有书卷气，更不要咬文嚼字，刻意模拟机器人那种刻板的说话方式。
+
+上面的这些说起来容易，但是图形界面用语演进到现在，仍然有很多体验设计还是像机器人一般，用生硬的界面术语来和用户交互，这就会在无形中产生一种距离感。比如下面的这种情况。
+
+<img src="https://static001.geekbang.org/resource/image/f2/12/f2980f7b2c4670c45fc503f25f784112.png" alt="">
+
+在日常生活中，你永远总是和身边的人用类似上面左半部分的表述来沟通，但是在当今应用界面上，右半部分的表达却比比皆是。这种习惯一定要改掉。
+
+## 无歧义
+
+在讲人话的基础上，所有的界面元素必须让用户一目了然地辨别出来，不能出现歧义。比如问句中不要出现双重否定句式，所有的按钮上的文字不要仅仅用简单的“是”和“否”，而要写明具体、明确的动作。我们要让用户一眼就能看懂接下来干什么，而不需要再经过一次脑回路去理解下一步的意图。
+
+<img src="https://static001.geekbang.org/resource/image/6b/d0/6bd241196083ab655504ac05e39955d0.png" alt="">
+
+在显示日期的时候，如果可能，请使用“昨天”、“今天”和“明天”来替代日期，以避免用户出现因为错误理解当天是几号而判断失误的情况。
+
+<img src="https://static001.geekbang.org/resource/image/98/1e/98c9273ae2363bc4856b011b7b6d511e.png" alt="">
+
+如果是同一个操作系统出现在不同类型的设备上，那么对应的界面用语要非常清楚当前这个系统到底跑在哪个的硬件上面（是手机还是平板）、是否有特殊的硬件和传感器能力。不要出现硬件上不具备或者不匹配的情况，这样也会引起用户的歧义。
+
+## 不啰嗦
+
+但是我们也不能因为要保证无歧义就啰嗦地描述信息，**保持界面文字的简单明了同样至关重要**。交互效率很大程度依赖于用户是否能够快速理解界面，关键的信息就必须简洁并凸显地表达出来。我们要充分利用用户的扫视和跳读，避免用户浪费时间去理解消化大段冗长、重点不清晰的文字。
+
+在下图中左半部分是正确的做法，右半部分则是增加用户认知负荷的错误示例。
+
+<img src="https://static001.geekbang.org/resource/image/54/5f/5435ecd2a379ae0252e191d60ff46d5f.png" alt="">
+
+在前面“无歧义”中提到交互按钮一定要是动词，但是对于开关项的交互控件最好用名词描述，比如智能家居管理的开灯、关灯的控件。这个开关边上的描述一定是灯，而不是开灯。当然有些词汇既可以作为动词，也可以理解为名词。
+
+我觉得最好的验证方式，就是在你的开关描述前加“打开”两个字，你看一下是否能读得通。如果可以说明描述是OK的，如果很别扭，建议你要精简修改。
+
+<img src="https://static001.geekbang.org/resource/image/b3/8c/b3193e4f63540ec2e8475f541354418c.png" alt="">
+
+## 最关键的词放前面
+
+人在阅读屏幕上的信息的时候是跳读，去寻找他们认为与他们相关的关键信息。所以我们要将最重要的关键词放在前面，让用户一眼就抓住这句话的重点。
+
+<img src="https://static001.geekbang.org/resource/image/50/f8/5037d4f189d66bdb2859f58a49yyfaf8.png" alt="">
+
+如果一段描述是有标题的，那**关键信息就要包含在标题里，并在接下来展开阐明**。如果是建议用户接下来要做什么动作，就要把这种动作在标题中明示。这种文案的目的是为了促进用户快速理解当前发生的状况，以便快速做出决策。
+
+比如下图里用户的信用卡换卡了，导致以前自动进行信用卡扣款的应用无法正常扣款，我们需要提醒用户尽快更新有效的用户信息。这时左边的表述会让用户第一时间知道当前出现了什么状况，而右边则让用户心头一紧。
+
+<img src="https://static001.geekbang.org/resource/image/94/6b/94a029ba3fe53b0fcff1edc06de8e16b.png" alt="">
+
+## 正确的指代称呼
+
+你使用的智能设备是你肢体的延伸，还是与你处于平等关系的独立个体？这是一个策略问题。如果是前者，使用的称呼是“我的”，会把手机作为私密设备。这种策略常在某些带有明显用户隐私属性、用户强归属的应用或者场景下中被广泛使用。如果是后者，使用的称呼是“您的”，这个一般使用在用户还没有确定手机的归属的时候（比如开机向导过程中，或者牵扯到设备和应用供应商描述服务责任的时候）。
+
+**使用“您/你”会增加产品和用户之间的隔阂感。**在应用中，对用户的角色称呼定位非常重要。在一个场景中（特别在同一个页面里），不要同时出现“我的”和“您的”，否则会让用户感觉到困惑。在大多数情况下，隔阂感会让用户觉得自己仿佛在银行隔着一个玻璃窗办业务一样。非常多“您”这个字的使用，很难让用户对产品建立足够的信任。
+
+<img src="https://static001.geekbang.org/resource/image/bd/d3/bd998f236d684149a6603e0a9d7877d3.png" alt="">
+
+即使你把手机视作平等关系对待而使用“您”，也要**注意不能在负面的、错误的、带有否定性的描述中使用这个第二人称代词**。因为这种负面语境下会产生微妙的心理暗示，仿佛是在指责用户犯了错误。
+
+<img src="https://static001.geekbang.org/resource/image/85/ca/850e2dc4c880ed194cf0bf09a343a5ca.png" alt="">
+
+即便不是错误，如果是需要用户做什么动作的时候，直接称呼您/你也会给人以微妙的命令和指示的暗示。语言其实就是这么微妙，在能不使用指代关系就可以直接把动作描述清楚的情况下，就不必加上称呼代词，这样既简洁又能避免不必要的冒犯。
+
+<img src="https://static001.geekbang.org/resource/image/25/8f/2552bbc6052bacb2223831b5b929yy8f.png" alt="">
+
+## 一致性的表达手法
+
+一致性设计的重要性不仅仅是体现在交互模式和视觉表现手法中，对于我们界面用语来说，语法描述的一致性也同样重要。突然更换表述方法会让用户感到别扭，这一点很多设计师并不在意，但人因实验表明，表述的一致性同样会提升交互的可用性。
+
+比如下图左半部分里四种选择控件都是一种表述手法，动词在前宾语在后。但是在右半部分四种选择控件中，最后一个突然切换到疑问句的方式，这样其实是很突兀的。也许你会认为我在吹毛求疵，但如果我们的设计哪怕能让用户少停下来思考一秒钟，都是值得去尝试的。
+
+<img src="https://static001.geekbang.org/resource/image/7d/5c/7d999a1548e019af55fe9b377561b45c.png" alt="">
+
+## 提升转化效果的话术
+
+上面我举了一些例子来说明界面用语的话术指导原则。但在互联网产品设计中，我们会经常提到转化率、活跃度等指标，需要设计师去共同承担KPI。那我们如何通过话术设计刺激用户去点击、去行动、去购买呢？其实也是有套路的。
+
+在[13](https://time.geekbang.org/column/article/353442)里我们提过框架效应的认知偏见。对于同样一个意思来说，一个是正面框架描述，一个是负面框架描述，大部分用户都会喜欢前者。
+
+<img src="https://static001.geekbang.org/resource/image/8c/bb/8c182b301e79f07c851aea36d18f49bb.png" alt="">
+
+当然，锚定效应、稀缺效应也是非常有效的转化手段，在很多销售平台广泛运用。如果不给出一个锚定参考价格，用户是无法算出来自己购买一个商品少花多少钱的。稀缺效应（限时限量的饥饿营销）的话术则会利用用户害怕错过、容易受到诱惑和冲动的心理，通过营造紧迫感，而促使其做出轻率非理性的购买决策。
+
+<img src="https://static001.geekbang.org/resource/image/a0/ac/a0e92fc6a926b30344fc40776d730aac.png" alt="">
+
+社会证明原则、权威原则、潮流效应等文案加持，也是提升转化率的手段，具体的内容你可以去复习一下[17](https://time.geekbang.org/column/article/356844)。
+
+## 总结
+
+好了，讲到这里，今天的内容也就基本结束了。最后我来给你总结一下今天讲的要点。
+
+今天重点谈了语言学在设计中的运用，精确来说是用户体验设计界面用语中的运用。体验设计中的话术设计和市场营销的话术设计区别很大，前者强调产品驱动，使用简洁明了的文字解释状况，目的是高效和用户进行互动。
+
+那我们具体要如何在设计中更好地使用界面用语呢？你可以参考以下几个关键点：
+
+- 界面用语要讲人话，避免生硬术语；
+- 指示明确，避免歧义；
+- 简洁明了，减少不必要描述；
+- 重点鲜明突出，让用户一眼看见；
+- 指代称呼一致，慎用第二人称；
+- 话术的一致性有助于提升交互可用性；
+- 提升转化率需要善用人的认知偏见。
+
+## 作业
+
+最后，我给你留了一个小作业，结合今天我讲的内容，分享下你最近在生活中或工作中遇到的界面话术设计，有没有什么让你特别印象深刻的点？

极客时间专栏/geek/基于人因的用户体验设计课/高级篇/26｜深色模式设计：深色也能有层次感.md

@@ -0,0 +1,180 @@
+<audio id="audio" title="26｜深色模式设计：深色也能有层次感" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/cd/b4/cd5371e5ded76ce677da9b7ccb192bb4.mp3"></audio>
+
+你好，我是Rocky。
+
+今天我们继续来谈一谈深色模式的人因设计。
+
+在2019年，苹果、华为、谷歌差不多前后脚发布了深色模式，并引发了众多品牌和应用追捧的热潮。其实深色模式并不是一个新概念，它与之前的去蓝光的睡眠模式相比，并没有太多创新。甚至早在数位产品刚刚起步、以CRT显像管为主要显示设备的显示器时代，很多单色屏幕就有了绿色、白色、黄色等天然的“深色模式”。
+
+<img src="https://static001.geekbang.org/resource/image/98/37/9882210ee45106367106a25c4bed9937.jpg" alt="">
+
+## 深色模式的场景适用性
+
+虽然在手机界深色模式才提出不到两年的时间，但在其他场景里它绝对是我们的老朋友了。
+
+例如TV的影院模式。在电影院里，黑暗的观影环境能够很好地提升观影体验。因此，高清电视也很早就启用深色模式的界面设计，力图给我们带来最接近影院级的视觉享受和高度沉浸感。
+
+<img src="https://static001.geekbang.org/resource/image/68/a5/6839e31a2ee3b0b088249d3fa1e742a5.jpg" alt="">
+
+很多网站及游戏界面也会运用深色模式来体现尊贵、时尚、优雅、奢华、威望和神秘的感觉。
+
+<img src="https://static001.geekbang.org/resource/image/88/fb/8814ec50f74386a0d2def8a83b1d3efb.jpg" alt="">
+
+而且深色模式拥有一个天然的优势，那就是**焦点突出**。一些亮色在深色的背景下会更加醒目，宛如黑暗中的火光。我们完全可以以一个远小于正常模式下的动效、色彩变化吸引到更多的用户注意。
+
+<img src="https://static001.geekbang.org/resource/image/f1/d1/f10c38003c97edf725eb4cb8bfacabd1.gif" alt="">
+
+深色模式在汽车驾驶领域也运用已久。当然，这个场景下我们一般叫它夜间模式。尤其当我们在夜间使用导航软件的时候，过于明亮的导航界面可能会导致眼部的散光，看不清路况，很容易引发严重的交通事故。
+
+## 深色模式产生的背景
+
+为什么这两年深色模式会在智能手机领域成为热点话题呢？除了省电、看起来酷炫之外，最重要的原因就是它天生就带着人因工程的光环，能对人眼健康起到一定的保护作用。
+
+现代人手机不离手，每天看手机的时间越来越长。《中国移动互联网发展报告（2020）》显示，中国人平均每天使用手机的时长已经上升到了6.1个小时，而95后更是超过8.3个小时。也就是说，每人超过1/4甚至1/3的人生，都是在移动互联网上度过的。如果再加上电脑电视等数字产品，可能人生一半的时光都得盯着液晶屏幕了。
+
+<img src="https://static001.geekbang.org/resource/image/2f/45/2f859ca76d65f52eef5201c45a5ded45.png" alt="">
+
+那我们为什么要那么关注电子屏幕上的眼睛保护呢？因为电子屏幕上的内容显示原理，和纸张上存在很大差异。
+
+纸张通过反射自然光让我们看到上面的信息，而屏幕上的彩色信息则必须是屏幕亮度比周围的自然光源亮非常多才行。这也就解释了为什么我们在晴天的室外很难看清手机屏幕，那是因为屏幕自发光源的亮度较低，无法超过周围自然光的亮度。
+
+如果放大液晶屏幕，你会看到很多小像素点，这些像素点有三种颜色。这些小像素点其实是偏光滤镜，液晶屏幕的背光源通过这些小偏光滤镜把光线发出来，像极了聚成一堆的三色小灯（下图左右分别是两种屏幕放大后的效果）。
+
+<img src="https://static001.geekbang.org/resource/image/6b/e5/6b3e1d5bbe33d8087cf4b4acb79219e5.jpg" alt="">
+
+液晶屏的这种光源特性导致了我们在黑暗中看手机会非常刺眼。因为人眼在黑暗中瞳孔会自动扩大以增加光源的摄入量，而如果我们在黑暗中盯着手机这个点光源，我们睫状肌会收紧以收缩瞳孔。但环境光很暗，瞳孔自己又会自然扩大，所以这时睫状肌的压力就会特别大。这就跟我们在黑暗中盯着彩色灯泡看的原理其实是一样的。
+
+<img src="https://static001.geekbang.org/resource/image/f5/d9/f5691c05cec83318c90662055c5aa5d9.jpg" alt="">
+
+我们眼睛正常情况下每分钟大约要眨动12次，每次眨眼会持续100~400毫秒。当你专注于玩手机时，眨眼的频率会降低到每分钟3~4次，泪液分泌也会相对减少。
+
+盯着灯泡看很久再加上不怎么眨眼，那么我们的眼睛就很容易干涩、疼痛，自然更容易疲劳。长此以往，也更容易触发眼疾，如干眼症、慢性结膜炎、视力模糊、青光眼，严重的情况下甚至会造成视神经的不可逆损害。
+
+<img src="https://static001.geekbang.org/resource/image/94/60/94eb072ac440e0fa029364d5a7372360.png" alt="">
+
+深色模式，就是在这种大背景下发展起来的。**深色模式顾名思义，就是在弱光环境中保证易读性的前提下，最大程度地降低屏幕亮度，以缓解对人眼的伤害的一种模式。**
+
+## 深色模式也有危害
+
+**在白天正常光线的情况下，并不推荐你使用深色模式。**
+
+因为白天周边光线明亮，我们瞳孔是缩小的状态。此时如果屏幕是纯黑色而字是白色的，要看清就要放大瞳孔，这时周围白光散射到瞳孔里会让眼睛非常疲劳。
+
+大环境是白色的，仅仅屏幕是黑底白字，白色的字在视觉表现上会渗入黑色的背景，这个被称为**光晕效应**（参照下图的左半部分效果）。
+
+<img src="https://static001.geekbang.org/resource/image/ff/6c/ffaf5009a78ed5595a2c87b391e2306c.jpeg" alt="">
+
+对于散光的用户来说，白天用深色模式更会是一种灾难。因为散光的主要原因在于我们眼角膜弧度不是正规的半圆体而是椭圆形，这就导致光线进入瞳孔后会出现多个散射点。
+
+白天人的瞳孔缩小，这种椭圆形的问题不明显，但是白天看深色屏幕，眼角膜需要放大拉伸瞳孔，导致椭圆形弧度在白天也会放大。也就是说本来白底黑字是可以看得清的，结果用了深色模式反而看不清了。
+
+<img src="https://static001.geekbang.org/resource/image/29/fa/29a45cd326aaeb697d6a25ceff25c1fa.png" alt="">
+
+别忘了，这个世界上有50%的人眼睛有不同程度的散光。即便其中有一半的人可能因为伴有近视，已经戴上眼镜做了一定程度的矫正，但也还有剩下25%的人是需要我们去关照的。
+
+## 深色模式不是背景越黑越好
+
+了解深色模式对人眼健康的重要意义后，具体要怎么去设计呢？很多人说深色模式设计，那就是用纯黑背景加上白色的字不就好了？情况远不止这么简单。
+
+即便是深色模式在暗光环境下使用，我们也不建议用纯黑背景。以前在华为的时候，我们做过人因方面的实验，实验表明一旦超过17：1的对比度，白色的前景或者字就会非常刺眼，并且会更容易导致人眼的疲劳。**所以在深色模式下，不仅仅是要保证看得清的易读性，舒适度同样至关重要。**
+
+<img src="https://static001.geekbang.org/resource/image/0e/f1/0ec815bab425b363a762c797bc8a55f1.png" alt="">
+
+下面有两个不同对比度的比较，左半部分是纯黑纯白，右半部分是满足舒适度的深色模式。你可以比较感受一下。
+
+<img src="https://static001.geekbang.org/resource/image/6b/1a/6b9a8a786201ac6ee1223e3f7f016a1a.png" alt="">
+
+## 深色模式的层次体现
+
+在浅色模式（也就是正常模式）下，阴影可以模拟屏幕上的物体距离用户有多近，用来提升板块的层次感。但同样的手法并不能在深色模式下使用，因为我们在黑暗背景下很难看到阴影，如果把阴影色调整为浅色，视觉效果不是阴影，而是在发光。
+
+<img src="https://static001.geekbang.org/resource/image/f0/65/f0406406f3773fbebca4e6ecdbeefa65.png" alt="">
+
+在深色模式下，你可以**调节深色背景的色彩深浅来模拟距离屏幕的远近**（距离屏幕越近，颜色越浅。）。
+
+<img src="https://static001.geekbang.org/resource/image/92/15/924b2f9a7c5215a0421910531259d515.gif" alt="">
+
+这种颜色的深浅调节可以通过叠加一层白色半透明层来实现。白色叠加层的透明度越高，颜色就越深，反之越浅。从下面的Material Design的示例你可以看出来：A是偏下面的一层，B是中间的，而C是最上面的一层。
+
+<img src="https://static001.geekbang.org/resource/image/b5/05/b5dbf2fabfa6697578d6a3a0f4464705.png" alt="">
+
+以上只是单纯通过色彩深浅来体现层级。对于通过模糊和半透明调节来体现层级的表现手法而言，我们要也要注意调整半透明的基底色。如果正常模式下的半透明和模糊的基底色是在白色基础上获取的，那么在深色模式下这个基底色需要调整为黑色。
+
+<img src="https://static001.geekbang.org/resource/image/02/ff/0216001a4a89a5a482c905a3c1648fff.jpg" alt="">
+
+## 深色模式的颜色设计
+
+从上面的情况我们大体可以看出来，对于界面上文本的色彩处理，不要过于复杂，但也不能简单地黑白反色，对比度和舒适度的双重约束同样存在。如果要保证舒适度，需要在保证对比度的前提下，适当调低字体色的白，或者调浅背景色的黑，以避免对比度过高。
+
+<img src="https://static001.geekbang.org/resource/image/17/8e/176569f7bd2053474d989232eca2398e.png" alt="">
+
+但是对于彩色的处理，就不能简单遵守上述的逻辑了。
+
+首先，对于图片是肯定不能反色的，这个原则相信你比较好理解。因为反色会完全改变图的氛围和感受，变得阴森诡异，很多人物在反色后甚至难以识别。UI界面的深色模式也是一样的，自然不能如此简单粗暴地处理。
+
+<img src="https://static001.geekbang.org/resource/image/c5/66/c551ee0630d8d9ffb56a00fc2cd25d66.jpg" alt="">
+
+当然也不能完全重用一般模式下的色彩。深色模式的界面元素必须**避免饱和度过高的颜色**，在浅色背景上的一些看起来很漂亮的饱和颜色，在深色模式下与背景的对比度会降低，这会导致在影响可读性的同时也会引起眼睛的疲劳。为了避免这种情况的发生，你需要将这些颜色调浅。
+
+<img src="https://static001.geekbang.org/resource/image/8a/b1/8a290a890ab61efa1727a1c33105e8b1.png" alt="">
+
+这些色彩在深色模式下的深浅调整并非简单公式计算，我们需要仔细进行甄选，确保对比度在满足易读性的同时，还能良好地适配于深、浅两种外观模式。同时确保在这两种模式下，视觉心理感知是一致的。
+
+但是也存在特例。对有些插画中的浅色阴影和浅色物体来说，它们在从正常模式更换为深色模式后必须变成深色，用户的感知才不会突兀。比如下图的插画，从正常模式切换到深色模式后，用户几乎感觉不到色彩的变化。实际上，台灯和后面衬底的灰色都调整为了深紫色，但这样用户也不会感到违和。
+
+<img src="https://static001.geekbang.org/resource/image/e7/60/e73c017d933991f9998db3e123d25860.jpg" alt="">
+
+## 深色模式的图标变化
+
+谈完深色模式的色彩处理，我们再看一下图标图形。正常模式下的空心轮框的图标在深色模式下的易读性会变差，需要考虑做实心填充式图标的转换。
+
+<img src="https://static001.geekbang.org/resource/image/fa/00/fafyyc1c1277d45fe94d332d17826300.gif" alt="">
+
+当系统切换为深色模式，很多应用自动跟随变换的时候，我们发现相当多的应用在图标设计上并未使用svg格式的矢量文件，而采用的是白底的jpg格式文件。这样的文件在做深色模式转换的时候，即便是压暗处理也是相当违和的，只能求助于手工替换。
+
+**作为设计师，要有这种习惯意识：在界面图形元素的文件格式选择上，要考虑到深色和浅色模式系统自动切换的情况。**
+
+## 深色模式下的排版变化
+
+聊完色彩和图形，我们再来看看排版的变化。前面我们提到过光晕效应，也就是说，**同样的字号、粗细的字体在深色模式下，看起来都会比正常模式下要粗一些**。所以在深色模式下，字重（粗细）可以适当减小一些。
+
+比如在下面的例子里，当字重都是400时，深色模式下看起来会有字体明显粗一些的错觉。而当我们把深色模式字体的字重调到350，此时再和正常模式400字重的字体相比，反而觉得粗细相同了。
+
+<img src="https://static001.geekbang.org/resource/image/b1/9f/b1f5db4f1375657c636425fc4b747e9f.png" alt="" title="两种模式下的字重均为400，视觉上深色模式的字更粗">
+
+<img src="https://static001.geekbang.org/resource/image/a7/03/a71b0e981947ae29d8913b0e51a05103.png" alt="" title="深色模式字重调小后，视觉上反而粗细一致了">
+
+同样的，由于光晕效应的存在，我们也可以适当地增加文字的段落间距、行高等，也能增强深色界面上的文字可读性。
+
+## 深色模式便于用户开关
+
+现在很多手机应用都不能做到跟随系统自动地切换深色模式。当然，完全依赖于系统的深色模式转换，或多或少也会有一些瑕疵和弊端，比如对应用VI品牌色的不正确改变，某些应用图片无法直接处理，系统简单地变浅或者压暗都可能会失去它最优的原色效果。此外，从人眼健康保护维度来看，在白天也不建议长时间开启深色模式。
+
+因此我们要给到用户方便在深色模式和正常模式快速切换的开关渠道，例如华为就是在下拉快捷操作中心里增加了深色模式的开关按钮。
+
+<img src="https://static001.geekbang.org/resource/image/86/54/86f8ef5a3987a1919bba0e5a7a9b0954.jpg" alt="">
+
+## 总结
+
+好了，讲到这里，今天的内容也就基本结束了。最后我来给你总结一下今天讲的要点。
+
+今天，我们深入谈了深色模式产生的背景和设计原则。
+
+首先，深色模式不是一个新概念，它在大屏TV界面设计、网站、游戏的设计以及在汽车的夜间模式中都运用过。
+
+之所以深色模式在手机领域成为热点话题，是因为用户使用手机的时间越来越长，特别是夜间看手机，会引发视觉疲劳、干眼症、结膜炎、视力模糊、青光眼和其他不可逆的视神经损伤。深色模式可以在一定程度上减少我们的用眼压力。
+
+在深色模式的设计上，你需要注意以下这些点：
+
+- 深色模式在弱光环境下有效，在白天使用会更加引起人眼的疲劳。
+- 不要追求单纯的易读性，也要兼顾视觉的舒适度。过强的对比度（超过17:1）会引起眼部的疲劳。
+- 对于阴影部分，不要再依赖阴影，要通过黑色的灰度来体现层级关系。对于半透明的层级体现，要把半透明的基底色从白色调整为黑色。
+- 色彩的处理上不能反色，而是将饱和度高的颜色在深色模式上变浅以提升对比度，同时要兼顾正常模式和深色模式下色彩心理感知的一致性。
+- 某些插画中的浅色背景和浅色物体，在深色模式的处理上要调整为深色。
+- 深色模式下要使用实心填充图标而非空心轮框图标，以提升可读性。
+- 从排版上来看，深色模式要适当减少字体的字重和增加行间距，以抵消光晕效应的影响。
+- 考虑到用户的自主决策、兼容性和场景变化，要允许用户快速切换正常模式和深色模式。
+
+## 作业
+
+最后我给你留了一个小作业，从今天我讲的内容，试试思考一下你当前的应用能够如何进行深色模式的改造，或者如果已经做了，还有哪些可以改进的地方吗？

极客时间专栏/geek/基于人因的用户体验设计课/高级篇/27｜多模态交互：替代触屏的交互新可能？.md

@@ -0,0 +1,145 @@
+<audio id="audio" title="27｜多模态交互：替代触屏的交互新可能？" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/53/57/53e0151136b215d123b73e54446cc957.mp3"></audio>
+
+你好，我是Rocky。
+
+今天我们来聊聊多模态交互。到底什么是多模态交互呢？人和一个智能系统交互的时候，存在双方相互理解的过程，也就是双方都通过各种通道去表达，然后也都通过各种通道去分析对方的意图。**多模态是站在智能系统一方来表达，它更多强调的是智能系统通过多个通道去捕获人和环境的信息，或者通过多个通道去呈现信息。**
+
+<img src="https://static001.geekbang.org/resource/image/0c/2c/0c760930d6e897d7ba285deb7a039e2c.png" alt="">
+
+从多个通道呈现信息并非是个新鲜概念，比如我们的电影就是同时有画面和声音的多通道呈现的。我在前面的[第9课](https://time.geekbang.org/column/article/350185)讲到视听触的协同性时也提到，手机反馈要让用户通过视觉、听觉和触觉三个反馈通道去感知，这些也是多通道呈现信息的交互。而我们今天这节课要聊的重点是多模态交互的另一个方面：**智能系统如何从更多个通道获取用户的意图**。
+
+## 多模态交互通道
+
+我们先来简单看看智能系统的交互通道。智能系统应该从哪些通道来去理解人呢？我在[第3课](https://time.geekbang.org/column/article/345556)讲重新认识感觉时提到，要从人的角度来看我们有哪些感知觉在感知世界。相应地，我们理解智能系统也可以站在人的角度。
+
+我们来做一下类比，列如计算机视觉就是通过摄像头模拟人的视觉，从而帮助智能系统来感知世界。但这不是简单的模拟，机器视觉有其独特的、并且还在不断高速演进中的技术优势。比如在分辨率、景深、可见光和非可见光光谱范围、多自由度视觉捕获能力等方面，以及AI和大数据加持的图像识别、海量摄像头数据分析及挖掘能力上，都会让计算机视觉表现出惊人的力量和生命力。
+
+我下面列出了几种类似的感知觉技术优势和演进方向的表格，你可以对照着感受一下。
+
+<img src="https://static001.geekbang.org/resource/image/f8/87/f8ff3c6169abcd6b53a6a18189671587.png" alt="">
+
+因为智能系统的演进速度非常快，技术的能力边界也在不断提升，很多已经远远超过人类。所以对于UX设计师而言，深入理解技术的当下能力和演进路径，对如何去设计一个多模态创新的交互界面会变得至关重要。我下面用一些案例来带着你来理解一下多模态交互创新设计。
+
+## 非接触式交互
+
+首先是非接触式交互。非接触式交互（Touchless UI，简称TUI）顾名思义就是指人不需要去触碰键盘、鼠标或者屏幕，直接通过身体运动、隔空手势、眼动凝视等手段完成与设备的交互。
+
+<img src="https://static001.geekbang.org/resource/image/fc/21/fc25d288ab742dc64a582527079aef21.png" alt="">
+
+非接触式交互的技术有很多种，有的需要普通的可见光摄像头，有的是需要感知深度的摄像头，有的是3D立体摄像头，有的是利用了毫米波雷达技术的摄像头，还有些是穿戴在人身上的设备，比如手套、手表、护腕等等。技术肯定是不断在演进的，但作用都是殊途同归。
+
+和触屏交互不同，非接触式交互最近几年才在不同场合被热点关注（包括手机、VR/AR、智能驾驶等）。对任何交互而言，它的适用场景都非常重要。作为一个以大触摸屏为主的智能设备，手机是很难被人想到要进行非接触式交互的。
+
+在当初设计华为的隔空手势时，我和同事们也曾激烈讨论过这一点。当时我们想到的一些非接触式交互的典型场景，就只有吃小龙虾、厨房做菜、油画创作等手脏需要操作手机的情况。
+
+**不过在2020年新冠病毒疫情爆发后，非接触式交互已经变成一个非常重要的交互手段。**特别在公共场合，人们非常担心触摸公共屏幕，而喜欢通过扫码在本机上处理，但这也是一种治标不治本的方式。相信未来，真正的TUI会越来越变成一个被广泛运用的、重要的交互手段。
+
+<img src="https://static001.geekbang.org/resource/image/54/17/54bd721d429b794fca073cb26f8ccd17.jpg" alt="">
+
+### 避免手势导致劳累
+
+你在很多科幻电影比如《少数派报告》和《钢铁侠》中，都会看到隔空手势的设计。
+
+<img src="https://static001.geekbang.org/resource/image/34/2e/34eb20b7881ec955641d15ef4319812e.jpg" alt="">
+
+隔空手势在非接触式交互里是一种很炫酷的设计。但其实隔空手势有一点被经常忽视掉，就是大猩猩臂效应（大猩猩臂是指人们根本无法在手臂往外展开的姿势下长时间操作，这是灵长类动物身体结构的限制）。
+
+如果你的隔空手势需要长时间抬起整个手臂进行，那这就是一种不符合人体工学、效率低并且极容易疲惫的交互手势，并不是一种理想的设计。**理想的手势设计应该如操作鼠标一般，不需要大幅度的动作就可以轻松完成任务。**
+
+比如下图左半部分的动作整个手臂放在椅子扶手上，手的动作稳定，而且运动过程放松，不至于劳累。但是右半部分就不同了，相信人操作一会儿胳膊就会酸了。
+
+<img src="https://static001.geekbang.org/resource/image/0e/6c/0eb1606db6b600806fd86a061e2b216c.png" alt="">
+
+你在设计手势的时候，手势的疲劳检测必须是一个重要的决定性指标，除非我们要做的设计是一个需要刻意耗费体力的竞技类游戏。
+
+### 手势识别设计受技术的约束
+
+再酷炫的设计，没有一个稳定先进的技术支撑也是不行的。如果我们手势的识别准确率过低，隔空手势功能也就会沦为用户一时冲动的尝鲜，无法成为有生命力、能够持续使用的特性。
+
+手势识别也分为静态手势识别和动态手势识别，前者技术需求较为简单，但是要求手势交互要有停顿，不能够流畅、自然地识别，后者对摄像头和智能系统图像实时动态捕获精度和分析准确度的要求更高，需要能够识别运动的方向、速度以及加速度。
+
+第一种**静态手势识别**，就是通过2D外观建模，对摄像头捕获的图像进行手势分析，不需要深度信息。这种技术对应的手势设计，要特别注意减少遮挡的发生，或者至少要考虑遮挡情况，在设计上考虑如何在发生遮挡时也能保证正常识别。
+
+比如某些手势中手的侧边对着摄像头，摄像头可能就无法分辨是哪个手指的变化。这种普通摄像头的手势识别，一般多用于某些典型的标准静态动作、静态表情的识别，不要尝试去做变化很多、带着加速度的手势和表情，比如下图的几种手势就是合适的。
+
+<img src="https://static001.geekbang.org/resource/image/22/6d/22d478f05b63c6551b4206fc50ec1e6d.png" alt="">
+
+第二种**动态手势识别**，是最高效简单的做法。它其实就是利用骨骼绑定和分析技术，把人体的身体根据骨关节进行简单的分段并做好对应的分段建模，进而检测、识别这些关节的变化来推导出来人具体的手势和体态变化。这种技术下的手势设计，必须要有清晰的骨骼关节变化。比如下面谷歌的MediaPipe的手势识别就是在一只手中定义了21个3D的关键关节点，从而提供了精准、高保真的手部动作跟踪。
+
+<img src="https://static001.geekbang.org/resource/image/a0/84/a06ab604bb4a4edfcefae0bae4ed4984.gif" alt="">
+
+第三种是**肌电（EMG）信号来实现手势识别**。这个需要一些非侵入式的穿戴设备来配合（比如手臂或腿部上戴上带着传感器的绑带或者特殊的手套），这些设备再通过蓝牙方式连接智能系统。肌电信号有其特殊的优点，它不依赖于摄像头，有着最大的移动自由度，也不必在乎遮挡问题。对于设计师而言，手势发挥的空间更大，不过缺点就是需要穿戴在用户身上。
+
+Myo臂环就是一款典型的穿戴在手臂上的手势识别设备。这种设备有一种特别的好处就是可以帮助失去前臂和手的残障人士。因为人即便失去了前臂，人脑还是会尝试控制胳膊的肌肉。把这种设备穿戴在胳膊上，即使是残障人士也是可以控制假肢实现张开手、握手、握拳、拾起物体、旋转手臂等复杂动作。
+
+<img src="https://static001.geekbang.org/resource/image/49/f5/495ac23af4b1ae8f92dcc0c70a008ff5.jpg" alt="">
+
+最后一种我认为是精度最高的一种方式，就是**毫米波雷达技术**。这种技术完美规避大猩猩手臂的那种大幅度动作交互设计，能够对人体和手势的轻微的动作作出精准的跟踪，已经不仅仅是骨骼绑定的那种粗狂的颗粒度了。设计师可以进行更加细腻的手势设计，比如下图，我们通过搓捏拇指和食指的指腹就能够灵活调整手表的时间了。
+
+<img src="https://static001.geekbang.org/resource/image/82/79/82737a49044f582a8d66387941c3c379.gif" alt="">
+
+不过从目前这个技术量产化的情况来看，它的商用效果和技术潜能之间还是有一定的距离的。对于设计师而言，最大的挑战在于以下三点：
+
+- 用户无法精准地判断到底距离屏幕多远做手势是合理的；
+- 什么时间可以启动手势操作；
+- 不同人对同一动作的理解有偏差，如何去兼容这些理解差异性。
+
+<img src="https://static001.geekbang.org/resource/image/8e/8a/8e792ebe30f47dc0fcd1dcda7fd7ac8a.gif" alt="">
+
+针对以上问题，在设计上要注意到以下三点：
+
+- 要帮助用户找到合适距离并给予清晰的动态反馈指引，而且这种指引不能被误触发。
+- 在明显判定用户准备做隔空手势时，需要在屏幕上有明显的启动状态提醒，比如一个手的形状，或者其他和业务相关的特殊界面。
+- 要能在感知用户动作不合适时候，在后台做最大的算法兼容，而不是去纠正用户的手势。手势操作失败，还被指出错误，用户会产生很强的挫败感，也就无法建立其使用业务的粘性。
+
+从刚刚说的这些点你会发现，**不同的技术对手势交互设计也有完全不同的要求**，这也叫量体裁衣的设计。
+
+## 多模态多通道并行输入
+
+如果我们要在一个严格的意义上来说，非接触式交互其实也只是单类型的模态交互，并不是真正的多模态交互。
+
+**多通道获取信息不仅仅是指切换不同的通道来获取数据，也指同时从多个通道获取信息，并且能够针对上述信息进行进一步的整合，更加精准地获取用户的意图。**
+
+比如智能系统通过计算机视觉技术感知到了用户正在盯着屏幕上的某个App，然后嘴巴说出“打开”就直接打开了这个应用。这个过程其实就是两个通道同时在配合理解用户的意图的过程，这就是多模态交互。
+
+<img src="https://static001.geekbang.org/resource/image/30/5f/30b9f329b96473b96fb6390e8ba6e45f.png" alt="">
+
+再举一个例子，假设一个电视节目增加字幕，仅仅是把通过录音设备采集到的语音数据通过语音识别算法转换为文字，那这只是一种单模态的场景。
+
+但是如果也同时通过图像中的唇语读取技术来修正语音中的干扰及背景噪音，即视频通道的输入加上语音通道的输入进行双重的信息采集，两个一起做校对性的文字转换，这就是多模态交互了。
+
+<img src="https://static001.geekbang.org/resource/image/8e/f3/8e4yyc91243ecf6e1f42eabb67c554f3.gif" alt="">
+
+因为汽车拥有更多的传感器，所以在驾驶场景中多模态交互的运用更为常见。如果驾驶者通过说“请把温度调高5度”的语音交互指令来触发车内空调的温度调节功能，那这只是单模态的交互。
+
+但如果汽车通过用户穿戴设备检测用户的体温，同时也通过摄像头来观察用户是否打寒颤、通过麦克风检测用户是否打喷嚏，这样将多个通道的数据进行整合分析，判断要赶紧调整温度，直到判断用户体感舒适为止，那这就是多模态交互。
+
+<img src="https://static001.geekbang.org/resource/image/89/09/89a823fbyy1fyy3b216fe6d7358f5b09.jpg" alt="">
+
+监测用户是否疲劳驾驶也是一样的。我们通过同时检测用户的生物电信号（比如呼吸和心跳速度）、驾驶行为（比如是否出现驾驶者驾驶状况突变、违规异常，或者突然紧握方向盘等情况），还有用户面部状况的疲劳特征（比如是否闭眼、是否眼神游离、是否眼睑下垂、是否伴随不停瞌睡或者打哈欠的情况），综合判断疲劳状况后再给予针对性的交互输出和应对，这就是多模态交互。
+
+<img src="https://static001.geekbang.org/resource/image/8f/0d/8f2363416cef680f3f7f627ed54b4f0d.jpg" alt="">
+
+在开始设计多模态交互之前，我们要先对这个场景设计有充分的认知和理解，然后再考虑可能调动的通道数量和技术准备度等情况，综合判断以提供不一样的创新体验。
+
+你可能会问，多模态交互是不是可替代触屏交互的新可能？这其实是对多模态交互最大的误解。触屏交互本身就是模态之一，而我们的**多模态交互更像是触屏交互的升级版。我们会从更多维度来深度理解用户意图和对环境的认知，更加精准地为用户提供服务，从这个维度上来看，多模态必然是单模态的下一跳和未来。**只是这种未来的交互体验的具体形态未必唯一，也许会出现更加丰富多彩的可能。
+
+## 总结
+
+好了，讲到这里，今天的内容也就基本结束了。最后我来给你总结一下今天讲的要点。
+
+今天我们重点谈了多模态交互。多模态交互包括多通道信息呈现和多通道信息收集，我们这一课主要聚焦的是后者。我们的智能系统有着丰富的传感器，是可以从非常多的维度来获取信息的。
+
+从场景上来看，疫情导致我们对非接触交互的需求量激增，非接触交互会成为未来重点的交互手段。非接触式交互可以通过包括隔空手势、眼动凝视跟踪、身体姿态等手段来实现。关于非接触式交互你可以注意以下几个点。
+
+- 从体验上来说，不要设计幅度过大的隔空手势动作，因为会产生大猩猩手臂效应，引起疲劳。
+- 对于2D的外观建模技术，需要重点考虑遮挡发生，以及采用简单的不容易误判别的静态手势进行交互。
+- 骨骼绑定是非常好的一种手势识别技术，需要设计师去根据关键关节点去设计合适的动作。
+- 肌电信号穿戴设备更适合实现无障碍的设计，但存在需要用户穿戴的缺点。
+- 毫米波雷达是比较理想的小幅度交互的精准交互技术，但它的商用效果和技术潜能之间还是有一定距离。
+
+从严格意义上来讲，非接触式交互并不能称为多模态交互。你要注意的是多模态交互要具备同时从多个通道获取信息的能力。例如在驾驶场景中由于传感器更为丰富，多模态能够得到更多地运用。多模态交互方式是触屏交互的升维交互，必然会成为其未来的发展方向，但是具体表现形态可能会非常丰富多彩。
+
+## 作业
+
+最后我给你留了一个小作业，结合今天我讲的内容，试着思考一个你最喜欢的应用，它的哪些交互特性适合通过隔空手势的方式改造？如果适合的话，什么样的手势设计会让它更加自然流畅呢？

极客时间专栏/geek/基于人因的用户体验设计课/高级篇/28｜空间交互：虚幻与现实.md

@@ -0,0 +1,201 @@
+<audio id="audio" title="28｜空间交互：虚幻与现实" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/3e/99/3e53ace2446cb25c98b6758f53e6f999.mp3"></audio>
+
+你好，我是Rocky。
+
+今天我们来聊聊空间交互。在空间交互领域，有两种模式，分别是**虚拟现实VR**和**增强现实AR**。
+
+这两者的区别在于VR的周围环境是完全虚拟的，而AR的周围环境有一部分是真实的，AR在真实环境中叠加了虚拟对象层。这个差异性也导致了两者设计上会有很大的不同，你可以先通过下图了解一下。
+
+<img src="https://static001.geekbang.org/resource/image/c1/33/c1824d735f1475a96c6f7b53c221f233.png" alt="">
+
+## VR交互设计
+
+我们先来看VR的交互，VR一般需要沉浸式的头戴设备。为了保持视觉体验的自然性，需要时时刻刻地跟踪头部运动，所有虚拟环境的渲染和声音效果都要跟随头部运动，才能保证其沉浸感。这样的头部跟踪体现在3D空间中，无非就是围绕X轴、Y轴和Z轴的旋转以及它们的组合。
+
+<img src="https://static001.geekbang.org/resource/image/4b/d7/4b09f2afbab021486f7843a5355yy4d7.png" alt="">
+
+### 构建自然舒适的虚拟环境
+
+因为VR技术天生的缺陷，视觉和前庭系统的运动感知存在不一致的现象，容易让用户感到眩晕、头痛、疲劳甚至全身不适。所以在设计上，**要注意需要构建虚拟环境时的自然和舒适性**，减少虚拟环境中的旋转以及高速运动场景。
+
+<img src="https://static001.geekbang.org/resource/image/4f/9d/4f1b8f16b5aa8066bd5485c0dd660d9d.png" alt="">
+
+那要怎么样减少这种不适感和眩晕感呢？
+
+首先要在用户环境中营造一个固定参考点（比如一条地平线）。一定要让用户站在一个结实的表面上，在视觉上不断给用户营造安全感，没有什么比悬在空中更让人难受了。
+
+另外在虚拟世界必须要有边界，要有天空、背景或者墙壁。如果全是宇宙虚空或者茫茫大海，会让用户感到恐慌、无助和孤独。
+
+<img src="https://static001.geekbang.org/resource/image/29/71/2927f2f1ca1c18d5e7b6557aaa427b71.png" alt="">
+
+除了要在减少不适感上发力之外，我们也要在交互界面以及虚拟空间里的元素方面去思考VR交互的舒适性。
+
+首先**交互界面要和用户保持舒适的距离**。在真实世界中，收敛距离和焦距是一致的，但在VR世界中则不然。因为VR眼镜中的屏幕距离眼球很近，焦距很短，这时如果虚拟元素放得太近，收敛距离和焦距差别就会很大，会产生聚散效应从而导致眼睛疲劳。当然个体之间存在差异，但是一般而言，建议将界面保持在2米~10米之间，人眼看着会舒服一些。
+
+<img src="https://static001.geekbang.org/resource/image/e3/79/e3b9f6396617de61e5bf0aaa5ed05979.png" alt="">
+
+其次，**关键交互元素不要严格在水平线上下对称**。我们知道，一般情况下人的视觉焦点会在水平线下6度左右的位置，这个关于上下左右交互角度的考虑，我们在前面的[04](https://time.geekbang.org/column/article/346347)课中有提及，你可以回去再复习一下。虽然我们设计空间交互的主页面，是一个横向154度的广阔空间，但是让用户聚焦的操作区域，要注意不能超出横向60度，纵向32度的舒适区范围。
+
+<img src="https://static001.geekbang.org/resource/image/f8/7e/f87629254cc5531e6ae13dabacc2c67e.jpg" alt="">
+
+再者，虚拟空间中的元素同样要**符合透视原理**（近大远小）。比如我们要在一个VR眼镜中去显示一个固定面积大小的平面，随着我们虚拟的距离不同，那么这个平面代表的大小也需要相应发生改变。
+
+<img src="https://static001.geekbang.org/resource/image/68/f4/6863059ea3a34e9cedebac66f6ae76f4.png" alt="">
+
+同理，一个物体从用户的近处移动到远处，要缩小到合适的尺寸。这样做的目的是为了**符合用户对自然界物体运动的心理认知，减少困惑，**除非是某些游戏刻意为之的情况。
+
+<img src="https://static001.geekbang.org/resource/image/04/a0/04b6110689b76284d71016784149a0a0.gif" alt="">
+
+### 营造安全的交互空间
+
+除了要注意虚拟环境的自然舒适之外，我们也要注意：在一个全然虚拟的环境里，安全操作空间是最重要的事情。
+
+因为用户在虚拟环境中完全和真实世界隔离，如同是现实世界的盲人一般。我们肯定不希望用户在VR游戏里面挥动激光剑的时候，毫无预兆地重重撞在真实世界的电视上或者门把手上。
+
+<img src="https://static001.geekbang.org/resource/image/00/b1/00e18252ca6c1989fd5f1fc845589bb1.jpg" alt="">
+
+安全交互空间的营造设置一个安全围栏。安全围栏的设置可以让系统自动识别设置，也可以由用户自行画圈，类似孙悟空的金箍棒画圈防妖怪的画法。
+
+不过系统不能简单地遵循用户的划线，如果系统意识到用户画的安全围栏距离墙体或者固定障碍物的距离小于安全距离（比如75cm），应该要自动进行修订，无论如何我们都要确保安全围栏的绝对安全。
+
+<img src="https://static001.geekbang.org/resource/image/66/b3/66943d7aab58dd189f8b125e4159d7b3.png" alt="">
+
+设置完安全围栏后，当用户没有靠近安全区域的边缘时，要隐掉这些屏障线以保证用户的沉浸感。
+
+但是用户接近安全区域的边缘时，必须要在安全屏障上加上警戒标识，并在用户肢体伸出安全围栏后自动显示真实世界的周遭情况。同时还要给用户回看安全围栏区域的机会，让用户在安全区域内自由、放松地活动。
+
+### VR交互的注意事项
+
+在这里，我还需要和你补充说明一些VR交互的注意事项。**第一，我们需要一个焦点落定的设计**，表明当前的VR虚拟环境中，用户希望交互哪个物体、当前聚焦在哪个操作上。如果焦点是一个点的话，为了方便找到那个点，需要一个光线从手柄位置发出来进行引导。当然被焦点选中的元素需要有一个选中态的变化，可能是色彩、形状、角度或者层级的变化，提醒用户当下可以进行交互操作了。
+
+<img src="https://static001.geekbang.org/resource/image/cb/63/cb0e027a5b0d4b6c5d562493fc036a63.gif" alt="">
+
+**第二，因为VR缺少触觉反馈，所以声音的反馈就变得异常重要。**你要注意在自然世界中，声音是有定位作用的，也就是说我们能通过声音明显感觉到方向。所以在VR虚拟场景设计中，声音/音效的设计一样要考虑头部的转动角度和朝向，声源不应该简单地跟随头部运动，而要始终保持在某个位置，才会给人沉浸感和真实感，声源飘忽不定会让人困惑。
+
+<img src="https://static001.geekbang.org/resource/image/75/47/75580e5d696a607c3b3bc85693cc3347.jpg" alt="">
+
+## AR交互设计
+
+谈完VR的设计，我们再聊聊AR设计中人因方面的注意事项。现在在行业里有一种故弄玄虚的情况，将可以和虚拟元素互动的AR叫成MR，然后又用一个XR（扩展现实）的概念把VR、AR、MR（混合现实）都囊括在一起。我个人是不赞同这种说法的，MR不过是一种可以和虚拟元素交互的高级AR体验罢了。
+
+### AR交互的分类
+
+在谈AR的交互体验注意事项之前，我们先要理解这种增强现实到底有什么样的应用类别，大体上分为两类：基于标记的AR（Marker-based AR）和无标记的AR（Markerless AR）。
+
+基于标记的AR是一种识别某种物体后触发的AR体验，这个物体可以是一个二维码，也可以是一幅图，比如一幅恐龙的图，AR能在对应的平面上呈现一只立体的、运动的恐龙。
+
+<img src="https://static001.geekbang.org/resource/image/64/6b/642c42458923b558e17ed63f0e94386b.jpeg" alt="">
+
+无标记AR虚拟元素的呈现形式一般是在某些平面上，有的甚至会漂浮在空中。如果要增加这种元素的真实感，还应该适配现实环境的光影，并与周边物体尺寸比例相吻合。如果再细分，无标记的AR有以下三种情况：
+
+- **基于位置的AR。**比如驾驶过程中挡风玻璃中显示的导航信息及附近加油站、虚拟路边广告牌等的信息呈现。当然，几年前风靡一时的游戏Pokemon Go也是一个基于位置的AR体验。
+- **数字增强的AR。**比如识别一个古迹废墟后，AR能够自动补齐古建筑残缺部分，呈现当初的辉煌；我们也可以识别一个室内墙面，用AR推测出其刷完漆的情况。当然，这种AR应用最多的还是在修脸美容等特效相机这一方面。
+- **基于投影技术的AR。**我在巴黎去过一个由140个投影仪构成的立体空间动态艺术馆，它利用了所有的空间平面来动态展示日本浮世绘和梵高的绘画艺术。
+
+<img src="https://static001.geekbang.org/resource/image/0a/7a/0a8d4223d3c1111823c0195bbc0b517a.jpg" alt="">
+
+### AR交互中的空间感知
+
+我们接下来看看AR交互中的空间感知。
+
+距离对于人们的感知至为重要，因此我们的虚拟元素应避免放在亲密距离之内。如果你希望让用户能清楚看到对象，并易于与之进行互动，放置在个人距离会比较合适。如果是多人互动中的虚拟元素，要默认放在社交距离内，这会让所有人都觉得舒服。同时，在公共空间内放置的虚拟元素必须要简单、清晰且易于识别。
+
+<img src="https://static001.geekbang.org/resource/image/56/5d/56637bd2d822b8a3d23e9f0626cbb25d.png" alt="">
+
+同样，虚拟元素放置的大小也要结合具体放置空间的面积。如果是放置在桌面上，虚拟元素的尺寸不能超出桌面的范围，如果空间足够，我们要尽量去模拟真实物体的尺寸比例。
+
+<img src="https://static001.geekbang.org/resource/image/80/9e/8026b7ab734dec5856646c4fea03219e.jpg" alt="">
+
+另外，用户放置的物体必须稳固在一个水平面中，或者悬挂在一个垂直平面上（除非物体是飞行物）。如果是有墙壁这样的垂直障碍物，虚拟物体绝对不能违背物理规律穿墙。比如下图左半部分就是不正确的空间关系理解。如果书放在桌子上，书被人的身体遮挡一部分才是符合空间认知的。
+
+<img src="https://static001.geekbang.org/resource/image/96/82/967yy64a0138eea6d0d4201c74e00782.jpg" alt="">
+
+### AR交互中的光线感知
+
+如果要在AR体验中追求真实感，对真实环境的光线感知也是非常重要的考虑因素。首先是阴影的处理，没有阴影的物体，哪怕是放置在一个平面上，也会给人以悬空的错觉。当然，影子的处理，也要综合真实环境的光源方向、是否存在多个光源等情况计算，才会让虚拟元素变得更为逼真。
+
+<img src="https://static001.geekbang.org/resource/image/d7/bf/d7190d1751fd7ebdbafb287545c5f0bf.jpg" alt="">
+
+除了阴影，一个物体表面的纹理、材质感也要和环境光相匹配，营造虚拟元素的自然感受。
+
+<img src="https://static001.geekbang.org/resource/image/74/a9/74f4d82a371c428ec63d4ee56284cea9.gif" alt="">
+
+同时要能感知环境的光线变化，能动态调整虚拟元素的表面纹理渲染，以提升其真实感。
+
+<img src="https://static001.geekbang.org/resource/image/91/bf/9119371418913e09e8f88a64d9aa8abf.gif" alt="">
+
+### AR交互易用性考虑
+
+我们接下来看看在AR交互中，要去如何考虑易用性。
+
+总体上来说，AR的沉浸式设计要求**避免出现太多的遮挡性交互控件，**直接用手势（移动、旋转、放大缩小）控制在屏幕上的虚拟元素是相对自然的体验。
+
+<img src="https://static001.geekbang.org/resource/image/f3/99/f34d4f97a3cc4b4c1cb83d76fa1f0b99.gif" alt="">
+
+但由于AR设备形态的差异，也会引入一些特殊情况。如果用户是举着一个屏幕较大的设备，通过它的摄像头来体验AR的话，直接交互的方式是很累的。所以要考虑到**握持对交互易用性的影响**，不要为了沉浸式体验，而僵化固守直接交互的设计原则，这个时候间接交互是更易用的选择。
+
+<img src="https://static001.geekbang.org/resource/image/35/15/357e39e04b2b92659c761ceefbe1cf15.png" alt="">
+
+通过小窗体验AR的时候，如何引导用户知道屏幕外有其他的虚拟元素呢？**屏幕边缘提醒**是一种较好的策略，我们可以通过这种提醒来指示屏幕外有重要的虚拟元素存在，来带动用户去寻找。
+
+<img src="https://static001.geekbang.org/resource/image/8e/3c/8ea0ed9db9a3e0bc7640f33173be823c.gif" alt="">
+
+在AR交互体验中，如果现实空间较大或者虚拟物体过于逼真，用户很难找到虚拟元素的位置的时候，要通过某种方式提醒用户虚拟物体的存在。比如下面的这个AR侦探游戏，就使用了一种动效波纹区域作为视觉线索来高亮显示虚拟元素的定位。
+
+<img src="https://static001.geekbang.org/resource/image/f6/4b/f6e025c6abf6519040b35b89ce0f444b.png" alt="">
+
+如果虚拟元素距离用户较远，也要把交互热区放大以便于用户的选择，比如下面右边绿色的交互热区的设置是合理的。
+
+<img src="https://static001.geekbang.org/resource/image/a7/94/a77fee3b4b48c01edcac9b6233eyye94.png" alt="">
+
+### AR交互的安全考虑
+
+**在和AR虚拟元素交互的过程中，安全性仍然是需要重要考虑的点。**Pokemon Go游戏推出的头5个月，就导致了15万起交通事故、256人死亡，经济损失高达数十亿美元。
+
+所以，设计师必须要时刻考虑用户在AR沉浸体验的过程中可能会撞到真实物体，或者忽视周边危险的情况。注意不要让用户在AR体验中快速奔跑、突然进行大幅度的剧烈动作，更重要的是，不能诱导用户横向或者向后移动（特别是向后移动）。
+
+<img src="https://static001.geekbang.org/resource/image/7b/5e/7baf89b18181c7308f62f38e66ceb25e.gif" alt="">
+
+如果要减少用户运动，设计师就可以给用户一种不移动就可以观察和操作较大AR虚拟元素的可选方式，比如旋转。
+
+<img src="https://static001.geekbang.org/resource/image/36/13/36d69ef701c01840f295df3yyf798813.gif" alt="">
+
+此外，为了避免巨大的AR虚拟元素遮挡真实世界中的危险因素，要保持一定的透明度。同时也要感知周围真实环境中正在发生的危险性因素（比如快速移动的物体），注意及时提醒用户。当然，AR体验还是很累人的，也不要忘记适时提醒用户休息。
+
+### 未来AI趋势：眼动跟踪
+
+现在AR体验的发展势头很猛，有传言说苹果公司很快就要推出AR眼镜了。那么未来还会有哪种更为合适的AR交互方式呢？我觉得当下AR交互的最大局限在于很多AR交互设备都要依赖手部的操作，并不够理想。毕竟我们得不到有效的触觉反馈，而且被周围其他人看到可能也会有一些尴尬。
+
+其实，**眼动跟踪**就能很好地弥补这种缺陷，这种技术能够仅仅通过视觉焦点、眼球运动、眨眼等的跟踪实现交互，彻底解放了我们的双手，也避免了手舞足蹈的社交尴尬。
+
+尽管听起来还有些科幻，但是Mojo Vision公司已经开始设计这种眼镜了，相信未来一定会有广泛的运用。
+
+<img src="https://static001.geekbang.org/resource/image/ac/ba/ac02f5e64f6e6e5d047cc5e8b5a76fba.jpg" alt="">
+
+## 总结
+
+好了，讲到这里，今天的内容也就基本结束了，最后我来给你总结一下今天讲的要点。
+
+今天我们主要谈了两类空间交互：VR和AR。前者为全虚拟，后者为虚拟元素叠加在真实世界之上。
+
+在VR的交互设计中，你要注意：
+
+- VR视觉和前庭系统运动感知的矛盾性决定了这种产品天生会产生不适感，通过设计结实的平面、减少高速运动、明确的地平线参考会减少用户的不适。
+- 在自然环境营造方面，要考虑到视觉舒适度，景深的处理要符合现实物理世界的认知。
+- VR中要注意安全的交互空间设置，安全围栏要考虑垂直障碍物的75cm安全距离，并在必要的时候给出清晰的警戒线提示。
+- VR的交互上，要通过一些焦点设计帮助用户的注意力聚集在操作物上，VR的声音也要保持定位状态以提升沉浸感。
+
+AR的使用场景比VR复杂，在分类上分为基于标记的AR和无标记的AR，后者又分为基于位置的AR、数字增强的AR以及基于投影的AR。
+
+AR的交互设计要注意以下几个方面：
+
+- 空间设计上，要考虑到私密空间、个人空间、社交空间和公共空间对交互的影响，也要考虑AR虚拟元素放置时对真实环境放置面积的智能感知，以及前后遮挡的逻辑。
+- 在光线设计上，阴影要考虑真实环境的光线角度、材质特征，以及对周围环境光变化的适配。
+- AR的交互大部分依赖于自然的手势直接控制，但也要考虑用户握持困难可能需要间接交互设计的情况。
+- 在小窗AR体验时，可以通过屏幕边缘提醒来告知用户屏幕外虚拟元素的存在，也可以通过某些强化提醒来区分虚拟元素和真实环境，并保证交互热区的设置是易于操作的。
+- 在AR安全性的考虑上，要避免剧烈动作、横向运动和向后运动，对较大的物体可以进行半透明设计。
+- 眼动跟踪有可能成为AR交互的未来。
+
+## 作业
+
+最后我给你留了一个小作业，结合今天我讲的内容，试试思考一下除了我今天提到的空间和光线感知之外，还有哪些维度的设计可以提升虚拟元素的真实感？

极客时间专栏/geek/基于人因的用户体验设计课/高级篇/29｜普适计算交互：如何和海量的设备进行交互？.md

@@ -0,0 +1,201 @@
+<audio id="audio" title="29｜普适计算交互：如何和海量的设备进行交互？" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/8c/8e/8ce3ef0155d216c4443ffa96b13a348e.mp3"></audio>
+
+你好，我是Rocky。
+
+今天我们来聊聊普适计算（Ubiquitous Computing）交互。之前我们课上讲的所有交互，都是和某一个设备之间的交互。但是你不难发现，现在随着我们身边的智能设备越来越多，这些设备之间还可以相互配合着给我们提供服务，人类的生活已经逐渐进入到多设备体验的时代。
+
+据估算，到2021年底，全球约有348亿台智能设备连接到互联网（其中物联网设备116亿台，非物联网设备232亿台），平均每个人就有5台设备。
+
+<img src="https://static001.geekbang.org/resource/image/ed/f5/ed51857038c19b92b004db993c0b4df5.jpg" alt="">
+
+那如何进行多设备的交互设计呢？这里面的复杂度远远超过单设备的情况。你至少要从四个维度去思考，分别是**用户、设备类型、使用场景变化以及3C的设计及业务种类**。
+
+<img src="https://static001.geekbang.org/resource/image/82/05/826d41da2cd2d859bf566b995e695605.png" alt="">
+
+## 用户特点
+
+在剖析这种复杂度之前，最先应该切入的点就是**对人的理解**。不同的人对多设备使用的习惯千差万别。在你急于设计之前，先要搞清楚你是在为谁，或者是在为哪些人做多设备交互设计。
+
+<img src="https://static001.geekbang.org/resource/image/32/d8/32ecc373f249f0c0yy1fe029417a9cd8.png" alt="">
+
+我之所以说是“哪些人”，而不是“哪个人”，是因为以前是一个人对应一个或者多个设备的情况，而现在有些设备并非清晰地带着私人属性，所以会存在更加复杂的多人对应多个设备的情况，再加上社交距离的考量，这种关系会是复杂并且动态变化的。**用户或者用户群画像，是我们在进行多设备交互设计时要做的首要动作。**
+
+<img src="https://static001.geekbang.org/resource/image/e6/94/e64bf505898336177f968783a4c03b94.png" alt="">
+
+## 3C框架模型
+
+人已经分析好了，那我们怎么知道哪些最佳业务和最佳实践适合于我们分析的用户呢？在下面这个图中，我给你归纳了一些多设备一起配合给用户提供服务的种类，有些是多个设备同时提供服务，有些是做某些业务的连续性迁移。
+
+<img src="https://static001.geekbang.org/resource/image/b5/66/b5b2ee8191yybcfe861c8f3cae2a2b66.png" alt="">
+
+如果再次提炼上述业务的特点，可以用3个C来概括。也就是**一致性**（Consistent）、**连续性**（Continuous）和**互补性**（Complementary）。
+
+<img src="https://static001.geekbang.org/resource/image/31/59/3199f929d4eaa3784b9ce6f6eea96b59.png" alt="">
+
+### 一致性
+
+**一致性说的是业务需要根据设备的自身属性（主要是屏幕尺寸、形状、以及交互模式差别）进行相应的调整和映射，确保整体体验的一致性。**响应式布局就是典型的一致性运用。
+
+<img src="https://static001.geekbang.org/resource/image/f4/0e/f45fd117f4149fe3db96265fcff6820e.jpg" alt="">
+
+一致性绝对不是根据不同设备屏幕大小和比例做适应性的缩放或拉伸。因为分辨率的差异、人眼的视力局限以及千变万化的屏幕形状，如果我们只是简单地缩放内容，实际上就等于放弃了易读性和舒适性。好的一致性设计要保证不管是在什么尺寸的屏幕上，人眼看起来都应该是舒适自然的。
+
+<img src="https://static001.geekbang.org/resource/image/31/9c/3108465f5f52c6185dda830eb959d39c.jpg" alt="">
+
+以响应式界面的布局调整为例，你要确保显示的一致性是有套路和规律的。下面我列出了比较常用的一些示例：
+
+- 可伸缩的内容区块；
+- 能够适应比例变化、甚至可以智能裁切的图片；
+- 适应屏幕尺寸的边距进行布局重排；
+- 能够自动隐藏部分显示的内容，在小屏上简化信息呈现；
+- 可自动排布的内容区块，比如设计一些栅格档位做一些自动排布的模板套换；
+- 能自动适配的控件，比如导航和菜单隐藏、位置的调整，或者干脆可以改变形态。
+
+<img src="https://static001.geekbang.org/resource/image/80/6a/80a0f6cfd481cec7c1a6d69b5baab66a.png" alt="">
+
+除了显示的一致性，**操作体验一致性也很重要**。比如我们要把鼠标的点击和触屏操作体验做好对应，避免用户在切换不同设备后，操作体验不够顺畅和自然。比如在下面微软的操作规范里，你可以看到微软把触屏的手势和电脑鼠标的操作做了符合用户习惯认知的映射。
+
+<img src="https://static001.geekbang.org/resource/image/07/51/0730337f12b0d586c839b924bbd70151.png" alt="">
+
+不过，一致性还只是多设备交互的基石。如果每个设备之间没有做到相互配合，缺乏多设备在任务上的协同性，那么用户仅仅是感觉起来一致而已，这并不是一个合格的多设备交互。协同性主要通过连续性和互补性体现。
+
+### 连续性
+
+连续性说的是一个业务在一个设备延续到另外一个设备上，类似设备间的“接力赛”一样，比如换了个设备后我们的文档继续编辑、电影可以继续观看等等。
+
+对于一个App应用来说，如果业务数据都在云端，那么实现连续性并不难。但如果是未接入云端的设备投屏、文件共享，如何快速达成自然的连续性交互，就成了一种用户体验上的关键考量。下图的**轻扫**就是一种快速达成目标的交互手段，但前提是双方设备都已经明确了当前的交互意图，并且已经连接就绪。
+
+<img src="https://static001.geekbang.org/resource/image/a9/38/a9ee7e341d52cc21d34d75314f1bd838.jpg" alt="">
+
+华为的“一碰传”也是一个不错的连续性设计，它给信息在不同设备的流转提供了一个简单的触点：**碰一碰**。通过NFC技术支撑下的触碰来实现多屏协同、音视频电话的接续、文件照片的传输等连续性业务。
+
+<img src="https://static001.geekbang.org/resource/image/e9/e5/e9c452c5f3c877df5838db63d5204fe5.png" alt="">
+
+当然，碰一碰也并非一种适用于各个场合的连续性交互触发手段。如果对方设备比较远，近场通信技术NFC（碰一碰背后的技术）就爱莫能助了。这个时候，超宽带通信（UWB）技术就提供了另外一种远距离指向性交互的可能。
+
+<img src="https://static001.geekbang.org/resource/image/94/3a/94eae1b087937f826f75b19166685f3a.jpg" alt="">
+
+**指向性交互**一般适用于家里支持连续性或互补性的设备数量较多、位置不同，需要快速选择意向设备的应用场景。但这个技术严重依赖于对目标设备的距离测算和角度测算的精准度，如果用户抬手多次试图连接A设备，结果连接到的是B设备，就会非常地沮丧。
+
+<img src="https://static001.geekbang.org/resource/image/5c/fc/5c2fd969beb87bb34d79e8yya4d1dcfc.gif" alt="">
+
+其实，关于内容共享的自然交互设计，你不必拘泥于以上情况，我下面再给你两个例子，你体会一下。实现连续性的技术有很多种，关键看你是否在体验设计上有足够的脑洞，能够利用技术找到自然的交互手段。
+
+<img src="https://static001.geekbang.org/resource/image/eb/24/eba230d71e2fcb636267927102484d24.png" alt="">
+
+### 互补性
+
+互补性这是一种相对高级的玩法，要求**知道每个设备各自的强项，然后强强联合**，提供更加酷炫的体验。比如智能手机可以做智能家居里所有电器的遥控器，还有苹果的随航（Sidecar）功能等等。
+
+互补性交互中，多个设备的关系一般分为两种：一种是**合作关系**，同一时刻两者有不同内容和不同侧重，互为补充；一种是两个设备之间有明显的**主控关系**，例如设备1给设备2提供输入，或者设备1控制设备2。
+
+<img src="https://static001.geekbang.org/resource/image/18/0d/18e4524e63d5bca67401fea9efc7530d.png" alt="">
+
+给你举个例子，比如在手机上，运行多任务其实要依靠后台的任务切换器。因为手机屏幕相对较小，最佳体验是单任务运行。
+
+但如果把手机屏幕投到电脑等大屏幕设备上，电脑优秀的处理性能和巨大的屏幕空间，已经没有必要约束着自己只显示一个前台单任务了。因此手机的很多藏在后台的任务，在电脑上可以并行放在一起，实现手机上无法实现的多窗口业务特性，如下就是华为在MateBook上运行手机的多任务示例。
+
+<img src="https://static001.geekbang.org/resource/image/cd/6b/cd011bf191cd1a0b61ebbae4226a1a6b.jpg" alt="">
+
+再比如电视屏幕适合沉浸式内容欣赏，而手持移动设备更适合交互式体验。在下图中电视上一个普通的做菜视频，在平板上播放的时候就会直接给出对应材料的附属说明信息和购买链接，用户可以直接触屏采购这道菜的所有原材料。
+
+<img src="https://static001.geekbang.org/resource/image/79/a7/79487398048cb94a071801ff4ea304a7.jpg" alt="">
+
+## 上下文的环境考虑
+
+考虑到了人，也考虑到了交互业务的设计，我们还应该在**环境（Contextual）理解**上下功夫。让设备理解环境，这背后就要有很多场景识别、用户意图识别的人工智能技术作支撑了。
+
+人机之间的互动，不一定需要非常强烈的视觉和声音的提醒，更重要的是要让机器识别当下的环境状况，针对性地选择和人的交互方式，比如当下光线如何、是否嘈杂、人和什么设备离得最近、是否有其他人在场等等。
+
+就比如我在前面[第27课](https://time.geekbang.org/column/article/364932)谈多模态交互的时候提到的谷歌的Soli技术，它运用了毫米波雷达技术能够很好地感知上下文环境。它可以检测到：
+
+- 是否有人靠近？
+
+<img src="https://static001.geekbang.org/resource/image/cf/a4/cf06faf369cef287d67e8f8f41ee04a4.gif" alt="">
+
+- 是一个人还是多个人？
+
+<img src="https://static001.geekbang.org/resource/image/4c/5c/4cfbaa2185235b597ef7d94267307a5c.gif" alt="">
+
+- 靠近后是站着，还是坐下？
+
+<img src="https://static001.geekbang.org/resource/image/00/c0/00526fa1ae7de410c6e1dc8f8d61a0c0.gif" alt="">
+
+- 靠近后，是背对着、还是面对着设备？
+
+<img src="https://static001.geekbang.org/resource/image/cd/df/cd45e3840759ebb3584e20688db395df.gif" alt="">
+
+- 是否面对着，还侧身仔细看这个设备？
+
+<img src="https://static001.geekbang.org/resource/image/b2/78/b2aab0406f47987f061250227e66f078.gif" alt="">
+
+- 又或者是否尝试伸手去和这个设备进行手势交互？
+
+<img src="https://static001.geekbang.org/resource/image/e4/2b/e4680262930332ee96be03c38d66182b.gif" alt="">
+
+那落实到我们具体的多设备设计中，如何去利用这种环境感知能力呢？
+
+举个非常简单的例子：苹果为什么用Apple Watch来解锁Mac而不用iPhone来解锁呢？因为前者是私密设备或者是个人设备，后者不是。从体验上来说，Apple Watch除了洗澡几乎都带在手上，iPhone就未必了。
+
+如果iPhone也能自动解锁Mac，可能会出现到你家拜访的朋友，用你的iPhone解锁你的Mac看到隐私邮件的情况。
+
+<img src="https://static001.geekbang.org/resource/image/24/25/244406c5bf33baab0ddyybeb2ca87c25.jpg" alt="">
+
+再比如，如果你喊了一声：“Hi，Siri”，你是希望哪个设备响应你呢？是距离你最近的设备？还是与你问话中提及的业务最相关那个（比如：调低电视音量）？还是一个连着你蓝牙耳机的设备？不管是哪种，你都不希望所有的智能设备都同时响应你：“我在！我在！”，因为这会让你崩溃的。
+
+<img src="https://static001.geekbang.org/resource/image/94/02/94fe40346f3aa36a9702f0a195642702.jpg" alt="">
+
+## 平静技术原则
+
+让你崩溃掉的原因是，**我们的注意力通道无法承载过多的信息输入**。
+
+在这个万物互联的时代，如果我们还固守着传统一对一的交互设计原则，你很快就会发现，用户会被淹没在各种弹窗、对话框、通知和提醒中应接不暇、无所适从。
+
+<img src="https://static001.geekbang.org/resource/image/6d/67/6d41c58a60fc86268ed4130e159e5567.png" alt="">
+
+这里面的本质变化是设备的数量在翻倍地高速增长，但是人类注意力的带宽是极为有限的，而且生物进化的缓慢速度相比于设备的增长、处理能力的提升几乎可以被定性为停滞不前。
+
+因为注意力被各种设备透支占用，我们早已从之前的从容处理任务，逐渐过渡到被高负荷信息压得喘不过气的时代。
+
+在这种背景下我们不仅得注意单人和设备的互动，还要增加大量的设备与设备的互动，以避免人在中间成为信息转换的瓶颈。
+
+<img src="https://static001.geekbang.org/resource/image/e1/y7/e195881c202eea49d5bb6b9daf7feyy7.png" alt="">
+
+我们需要一种让人们花费更少精力去实现目标的人机交互模式。平静技术就是基于这个目的而诞生的设计指导原则，主要包括以下四个方面。
+
+首先，我们应**尽可能减少设备对人的骚扰和流连忘返式的吸引**，即用即走，不要过多耗费用户的注意力，快速处理完事情后用户应立即撤回注意力做别的事情。
+
+我举个例子，就如以前的传统水壶烧热水，会有鸣笛声响起，让你从客厅急速地跑到厨房关火提起水壶。但是现在的电水壶只要开始烧水，你就完全不用管它了，甚至再往后它可以做到自动帮你沏茶，帮你把茶端到你面前。
+
+<img src="https://static001.geekbang.org/resource/image/2c/0c/2cb6fd3e2yydbde8949d190956d78a0c.png" alt="">
+
+其次，**低带宽的信息编码呈现可以用提示灯，或者是简单、短促而不刺耳的声音，**不要用复杂的图形界面和音乐铃音来提醒用户，特别是根本不重要的信息。
+
+比如设备后台录音启动后，屏幕的一角要有一个小图标提醒录音进行中；带有前置镜头的设备，在后台开启摄像头时需要有轻微的小灯闪烁提醒用户摄像头正在工作。你可以参考下面这个坐姿提醒设备，它通过振动来提醒用户。
+
+<img src="https://static001.geekbang.org/resource/image/8c/c8/8c2e02570e771f5bbdbdfa28990d02c8.png" alt="">
+
+再者，**要善于判断用户的注意力通道的空闲状态，选择更通畅的通道来传达信息。**比如当听觉通道相对通畅时使用听觉，当用户的触觉通道通畅时选择振动反馈来提醒，如果手被占用选择其他可能的交互点。
+
+举个例子，用户洗手的时候就不要非得用触觉通道让用户感知到烫，才赶紧旋转水龙头把水调冷，我们可以用下面的这种通过灯光色彩暗示水温状况的设计来提示用户，这就是通过视觉通道来传达本应该由触觉通道来感知的信息。
+
+<img src="https://static001.geekbang.org/resource/image/8d/84/8ddfea7bedc9bc8ec868886ddb74a784.jpeg" alt="">
+
+最后，**要明确什么是用户的主要目标，什么是次要目标**，什么是优先级高的任务，什么不是。所有的事情都要聚焦在用户的核心任务上，其他的辅助性任务也应该为核心任务服务。
+
+## 总结
+
+好了，讲到这里，今天的内容也就基本结束了。最后我来给你总结一下今天讲的要点。
+
+今天我们谈的话题是多设备交互，也可以称为普适计算交互。
+
+多设备交互，需要考虑以下几个方面：
+
+- 用户特点上，我们要考虑不同用户有不同的多设备使用习惯，可能存在多人对应多设备的情况。
+- 设备多样性方面的考虑，概括为3C框架，也就是一致性（Consistent）、连续性（Continuous）和互补性（Complementary）。
+- 上下文的环境感知，在多设备交互中也非常重要。比如人物状态、周围环境状况、隐私状况等。
+- 平静技术原则，主要是指通过强化设备间的信息流动和自动化处理，最大程度减少人的注意力负荷。在这个原则的使用过程中，你需要尽量减少设备所需的注意力、用低带宽的信息编码呈现、让多通道负荷均衡以及主次目标清晰。
+
+## 作业
+
+最后我给你留了一个小作业，从今天我讲的内容，试着思考一下，如何根据今天学习的平静技术原则，来优化你的产品设计？