xinyin025/CategoryResourceRepost
1
0
Fork 0
mirror of https://github.com/cheetahlou/CategoryResourceRepost.git synced 2025-10-19 08:23:45 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

mod

Browse Source
This commit is contained in:
louzefeng
2024-07-11 05:50:32 +00:00
parent bf99793fd0
commit d3828a7aee
6071 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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="">
## 作业
最后，我给你留了一个小作业，分析一个你的产品中层级切换的动效，如果按照立体视觉的方式，你可以如何去改进？
你有最喜欢的动效吗，为什么喜欢它？

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

@@ -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阶贝塞尔曲线的圆角矩形，就是通过刻意增加复杂度来提升视觉愉悦度的很好例子。
黄金比例自然是非常好的表达设计的手段，但不要泛化和过度解读艺术品对黄金比例的遵循。自然界中的数据规律很多，分形和混沌同样会带来美学体验。
非自然或者动态分形设计会激发魔幻、神秘、未来、哲学的反思层的体验。而某种条件约束下的混沌，则恰巧反映了有张力的自然之美，后者在很多壁纸的设计中被广泛采用。大数据也可以通过混沌美学来直观生动地表达。
## 作业
最后，给你留了一个小作业，从今天我讲的内容，谈谈你如何运用心理美学的知识在你的设计中？当然，我们开篇提到的一系列有关于美学的问题，也欢迎你在留言区发表你的想法，我们共同探讨。

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

@@ -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>
情感计算交互是智能交互系统的一种特殊方式，人类真实的情绪非常复杂，不要僵化在某一种或者两种模型的单一情绪运用。表情仅仅是情绪感知的一种手段，体征的变化，肢体语言、语音和文字的表达等都会体现情绪变化。在技术不成熟的时候不要去过度拟人化，采用卡通方式处理情绪反应会减少恐怖谷效果。
即便情绪检测准确，也要在准确地检测情绪和避免拆穿人刻意掩饰的情绪之间做出平衡。
## 作业
最后我给你留了一个小作业，从今天我讲的内容，谈谈你对你熟悉的某款手机智能助手的理解，哪些设计做的好，哪些设计做的不够理想？

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

@@ -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秒钟之内，同时减少用户多次交互的机会。
即便是智能驾驶，也要提醒用户双手不能离开方向盘。而且要通过加大触屏元素尺寸和间隔，合理排版交互元素位置（偏左、偏下），简化触屏手势来减少用户触屏难度和误触概率。
在疲劳驾驶方面，不仅仅是多项技术发现疲劳并唤醒用户，还要能有自救方案，比如将车自动驾驶到安全区域停车或者导航到休息站。
除了以上手段来提升事实安全，也要兼顾驾驶者的感知安全以提升人对车的信任感。人和车之间驾驶安全信任的建立不仅仅局限在驾驶者，也包括路人。车外屏幕显示是一种非常好的尝试。
## 作业
最后，我给你留了一个小作业，从今天我讲的人的安全维度，谈谈你对当前驾驶车辆的用户体验设计有什么改进点。

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

@@ -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. 折叠动作的运用。要有动态主题来适配内折屏的开屏主题动效。
不管是什么形态的折叠屏和柔性屏，本质都是分析屏幕对握持触屏交互体验的变化，进而引发布局排版变化和业务场景组合变化，这需要根据具体情况具体分析。但针对柔性屏未来手机的创新体验，确实是令人振奋的机遇。
## 作业
最后我给你留了一个小作业，请你思考一下如果你的应用运行在折叠屏手机上，可以怎么去善用折叠屏的特点，给出创新的体验？

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

@@ -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)。
## 总结
好了，讲到这里，今天的内容也就基本结束了。最后我来给你总结一下今天讲的要点。
今天重点谈了语言学在设计中的运用，精确来说是用户体验设计界面用语中的运用。体验设计中的话术设计和市场营销的话术设计区别很大，前者强调产品驱动，使用简洁明了的文字解释状况，目的是高效和用户进行互动。
那我们具体要如何在设计中更好地使用界面用语呢？你可以参考以下几个关键点：
- 界面用语要讲人话，避免生硬术语；
- 指示明确，避免歧义；
- 简洁明了，减少不必要描述；
- 重点鲜明突出，让用户一眼看见；
- 指代称呼一致，慎用第二人称；
- 话术的一致性有助于提升交互可用性；
- 提升转化率需要善用人的认知偏见。
## 作业
最后，我给你留了一个小作业，结合今天我讲的内容，分享下你最近在生活中或工作中遇到的界面话术设计，有没有什么让你特别印象深刻的点？

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

@@ -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）会引起眼部的疲劳。
- 对于阴影部分，不要再依赖阴影，要通过黑色的灰度来体现层级关系。对于半透明的层级体现，要把半透明的基底色从白色调整为黑色。
- 色彩的处理上不能反色，而是将饱和度高的颜色在深色模式上变浅以提升对比度，同时要兼顾正常模式和深色模式下色彩心理感知的一致性。
- 某些插画中的浅色背景和浅色物体，在深色模式的处理上要调整为深色。
- 深色模式下要使用实心填充图标而非空心轮框图标，以提升可读性。
- 从排版上来看，深色模式要适当减少字体的字重和增加行间距，以抵消光晕效应的影响。
- 考虑到用户的自主决策、兼容性和场景变化，要允许用户快速切换正常模式和深色模式。
## 作业
最后我给你留了一个小作业，从今天我讲的内容，试试思考一下你当前的应用能够如何进行深色模式的改造，或者如果已经做了，还有哪些可以改进的地方吗？

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

@@ -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的外观建模技术，需要重点考虑遮挡发生，以及采用简单的不容易误判别的静态手势进行交互。
- 骨骼绑定是非常好的一种手势识别技术，需要设计师去根据关键关节点去设计合适的动作。
- 肌电信号穿戴设备更适合实现无障碍的设计，但存在需要用户穿戴的缺点。
- 毫米波雷达是比较理想的小幅度交互的精准交互技术，但它的商用效果和技术潜能之间还是有一定距离。
从严格意义上来讲，非接触式交互并不能称为多模态交互。你要注意的是多模态交互要具备同时从多个通道获取信息的能力。例如在驾驶场景中由于传感器更为丰富，多模态能够得到更多地运用。多模态交互方式是触屏交互的升维交互，必然会成为其未来的发展方向，但是具体表现形态可能会非常丰富多彩。
## 作业
最后我给你留了一个小作业，结合今天我讲的内容，试着思考一个你最喜欢的应用，它的哪些交互特性适合通过隔空手势的方式改造？如果适合的话，什么样的手势设计会让它更加自然流畅呢？

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

@@ -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交互的未来。
## 作业
最后我给你留了一个小作业，结合今天我讲的内容，试试思考一下除了我今天提到的空间和光线感知之外，还有哪些维度的设计可以提升虚拟元素的真实感？

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

@@ -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）。
- 上下文的环境感知，在多设备交互中也非常重要。比如人物状态、周围环境状况、隐私状况等。
- 平静技术原则，主要是指通过强化设备间的信息流动和自动化处理，最大程度减少人的注意力负荷。在这个原则的使用过程中，你需要尽量减少设备所需的注意力、用低带宽的信息编码呈现、让多通道负荷均衡以及主次目标清晰。
## 作业
最后我给你留了一个小作业，从今天我讲的内容，试着思考一下，如何根据今天学习的平静技术原则，来优化你的产品设计？