多指类手势

上篇讲解位移类手势和点击类手势的时候，提到过不同的描述维度会让手势产生不同的变种，比如触发时机、 触屏次数、 阈值类型等。我们同样也可以把使用手指的数目看做是一个描述维度，使用的手指数目不同也会产生不同的手势变种，有着不同的应用方式。

使用多指类手势的原因主要有两个：


① 单个界面对于手势的需求量比较大。当可用的单指类手势都已经被占用后，通过引入多指的维度来扩充手势，从而满足设计需要，避免产生手势冲突；
 


② 系统级的全局手势通常使用多指类手势来尽量避免与第三方App的手势冲突。
 


全局手势如果设计得过于简单很容易引发手势冲突。例如一加手机的某个系统版本中，有一个全局手势是单指连续点击三次触发页面缩放，对于非游戏类的App来说基本没有这个手势，不必担心误操作，但是对于游戏类App而言，连续点击屏幕上的攻击键是一个很常用的操作，连续点击三次触发页面缩放的设计导致用户游戏过程中极易不小心触发了页面缩放。iOS系统的做法很巧妙，在点击的次数外增加了手指个数的维度，通过三指双击才能够触发页面缩放，从而基本解决了手势冲突问题。


1 多指点击

1.1 特点

多指点击同样有触屏次数、触发时机和时间限制这些描述维度，它们的变化会给多指点击带来不同变种。在App中多指点击常见的变种一般有多指单击、多指按下，而像多指双击、多指长按这一类更复杂的变种较为少见，一般仅用于系统级的全局手势。

1.2 案例

在iOS的短信App中，可以通过「双指按下」快速选中一个短信。 
 


在iOS的设置中开启缩放功能后，任何页面都可以通过「三指双击」触发页面缩放。 


2 多指位移

2.1 特点

多指位移同样有控制方式、稳定化效果、以及阈值类型这些描述维度，它们的变化可以实现多指轻扫、多指拖拽、多指甩动这些效果。多指位移通常用来移动受控物或触发某个功能。

2.2 案例

在iOS的短信App中，可以通过「双指拖拽」快速多选短信。 
 


在网易云音乐的播放页，向下「双指轻扫」可以触发黑胶背后的故事。 
 


在笔记应用GoodNotes中，浏览模式下可以通过「单指甩动」浏览页面，但是当进入编辑模式后，单指位移会触发绘图，为避免手势冲突，单指甩动会变为「双指甩动」。 


3 多指缩放

3.1 特点

多指缩放与多指位移比较相近，不同之处在于多指缩放的手指移动方向是以某一个点为中心进行汇聚或分散。控制方式、稳定化效果、以及阈值类型这些描述维度同样适用于多指缩放。

3.2 案例

iPad可以通过「四指缩小」快速退出应用。 
 


iOS的照片App中，可以通过「双指缩放」缩小或放大照片。 
 


网易云音乐可以通过「双指缩小」触发抱一抱彩蛋。 


4 多指旋转

4.1 特点

多指旋转可以看做是以多指的中心为圆心，通过多指的移动来模拟出围绕这个圆心做旋转的手势。它是对物理世界几乎100%的映射，因此一般用于旋转某个物体，调节旋钮等操作。

4.2 案例

iOS的照片App中，可以通过「双指旋转」转动照片。

5 多指特殊手势

有一类特殊的多指手势可以支持更复杂的交互，一般为系统级手势。例如iOS中长按桌面的App后进行拖拽时，可以同时点击其他App一起进行拖拽。 
 


组合类手势

组合类手势由两个或两个以上的手势组成，因此隐蔽性较强，如果不进行引导很难被用户发现，也是由于这种特性，它所触发的功能一般有其他更明显的入口或操作方式，使用它通常是为了增加高频功能的操作效率，服务于专家型用户。组合类手势之所以能够提高效率，是因为它把用户平时需要通过多个步骤才能完成的操作简化为了短时间即可完成的手势组合。虽然初次使用有一定学习成本，但是一旦用户形成肌肉记忆，操作过程会非常快速。
 


因为组合类手势更加多变，且系统并未直接提供这类手势给设计师调用，需要设计师自己根据需求来组合搭配，因此很考验设计师的创新能力。之后的案例展示仅为常见的用法，并不是全部。通过举一反三，我们也可以设计出不同与本文中的案例但更满足需求的组合类手势。

1 设计模型

下面这个表格里的模型是总结常见的组合类手势而设计的，能够涵盖绝大部分的设计需求，但仅适用于单指的组合类手势设计。 


模型将组合类手势的操作过程分为启动、调整和触发三个阶段。每一阶段由一个分支手势构成。比如在第一阶段中，可以选用的手势有长按、双按、轻扫B。并不是只能选用这三个，而是它们三个作为第一阶段的分支手势体验良好且最常用。



 ①启动阶段的目的是创建一个新模式，在新模式下，界面原有的手势会失效，系统只能响应②调整阶段的手势，可以选用拖拽和轻扫E。在③触发阶段可以进行抬起、停留来触发最后的功能，如果选择「无操作」，则说明手势在②调整阶段已经达到目的，不需要③触发阶段的手势。
 


仅解释这个模型可能比较难理解，下面会用一些案例进行演示。

2 常见案例

2.1 长按+轻扫E+抬起

2.1.1 特点

通过长按激活一个控件，在手指不离开屏幕的情况下将手指移动到某个功能选项的位置上，然后通过抬起触发该功能。功能选项一般出现在手指的附近，从而方便下一步操作。

2.1.2 案例

花瓣App中长按某个图片后可以快速进行收藏等操作。 


2.2 轻扫B+轻扫E+抬起

2.2.1 特点

通过轻扫B激活一个控件，在不松手的情况下将手指往某个方向移动来选中某个功能选项，然后通过抬起触发该功能。

2.2.2 案例

Chrome浏览器中，下拉页面后将手指左右移动并抬起可以触发其他功能。 


2.3 长按+拖拽+停留

2.3.1 特点

通过长按激活一个控件，在不松手的情况下将手指拖动到控件的某个功能选项的位置上，然后停留特定时间触发该功能。

2.3.2 案例

在京东读书App的阅读页中，需要跨页选择文本时，需要长按后拖动手指至页面左下角后，停留一段时间进行翻页。 
 


在iOS桌面长按图标将其拖动到边界，停留一段时间后可以将图标移动到下一页。 
 


为什么上面两个案例在触发阶段使用停留而不是抬起？ 


因为完成了触发阶段的操作后手指仍然需要对受控物保持控制状态，此时不能松开手指，因此这种情况下操作的触发手势使用停留更合适。

2.4 双按+拖拽

2.4.1 定义

当一个界面中，上下左右四个方向都已经存在位移类手势了，但是仍然有功能需要新增额外的位移类手势。此时可以将双按看做是一个模式启动，双按后可以立即使用拖拽来触发相应功能。

2.4.2 案例

地图类App中，可以通过双按后手指不离开屏幕往上拖拽来放大地图，往下拖拽来缩小地图，从而解决了单手操作时难以放大缩小地图的问题。不足之处在于，这个手势 的教育成本较高，只有少部分用户能够发现并持续使用。 


3 根据使用场景进行分类

上文依据操作方式将案例进行了分类。实际上在设计过程中，使用场景分类更能便于我们去选择适合的手势。我将组合类手势通过使用场景的区别分为了四类，它们分别是 ①单个属性的调整、②多个功能选其一、③默认选择主要功能、④同时进行两项操作。由于下面案例的手势在上文已经进行了介绍，所以不做赘述仅罗列更多案例帮助理解。

3.1 单个属性的调整

单个属性可以是亮度、大小、位置等，通过双按或长按启动模式后，再使用拖拽来进行调整。

3.1.1 双按+拖拽

每个地图App基本都支持这个手势，双按后通过拖拽来对地图大小进行调整。 （上文有动图示例，这里不再重复展示）

3.1.2 长按+拖拽

在快手App的拍摄界面中，长按拍摄键后上下拖拽可以调整取景框的大小。 


3.2 多个功能选其一

通过长按唤起功能菜单，在手指不离开屏幕的情况下移动到某个功能后抬起触发该功能。

3.2.1 长按+轻扫E+抬起

在iOS的桌面长按App的图标可以唤起更多功能菜单，移动手指到某个功能后抬起可触发该功能。


3.3 默认选择主要功能

使用长按或轻扫B后可以直接松手默认触发主要功能，但如果保持手指不离开屏幕使用轻扫E，则可以选择其他次要的功能，然后抬起触发。

3.3.1 长按+轻扫E+抬起

微信录制完语音后，抬起默认会触发发送语音，也可以通过移动手指到「取消」或「转文字」上来触发另外两个较为低频的功能。

3.3.2 轻扫B+轻扫E+抬起

下面是一个概念案例，来自于一本交互设计相关图书《交互设计语言》，非常推荐阅读。在下图案例中，手势的目的是解决微信的多层级导致的返回步骤过多问题。右滑页面后如果直接松手会返回上一页，但是如果上下移动则可选择其他层级的页面，抬起后进行跳转。

3.4 同时进行两项操作

部分场景中，长按后手指需要保持接触屏幕的情况下同时操作两个功能，由拖拽和停留分别操作。

3.4.1 长按+拖拽+停留

暂无更多案例展示，可以看上文的京东读书App阅读页中选中更多文字的同时进行翻页、在iOS桌面拖动图标的同时进行翻页的案例，在这里就不重复展示了。

其他描述维度

在上篇文章提到过描述维度是影响一个交互手势呈现效果的变量。提及过的描述维度包括稳定化效果、控制方式、阈值类型、时间限制、触屏次数、触发时机，但它们的都是一些较为显性的描述维度，确定了某个手势的基本框架。还有一些未提到的较为隐性的描述维度，它们同样影响着用户的操作体验，包括角度与方向、反馈比率、热区。

1 角度与方向

位移类手势的方向一般为上下方向或左右方向，或者二者兼有之，但是想要触发操作，手指移动方向并不需要完全垂直或水平，默认会有一个容错角度。 


当某个界面或模块仅支持上下方向或左右方向的位移类手势时，如下图所示，360度会1：1均分，每个方向有180度的容错角度，只要在角度范围内滑动，都可以触发相应操作，但需要注意的是在仅支持上下方向滑动时，如果完全水平方向去滑动，则不会触发任何操作，反之亦然。 
 


虽然说角度的容错范围很大，但是滑动时离预期方向的角度偏离越大，单位长度产生的有效位移距离就会变少。例如下图中，在一个只能上下滑动的页面，垂直上滑和偏移上滑相同距离产生的有效位移是不同的，垂直上滑的效率明显更高。 
 


当上下滑动和左右滑动同时存在于一个页面或模块时，会出现两种情况。第一种情况是被滑动的内容除上下左右外可以往更多方向移动，例如滑动照片或地图查看更多细节（如下图所示），是允许用户自由地朝任意方向滑动的。 
 


第二种情况是，在单次操作中，只有上下或左右方向的滑动需求。360度会1：1：1：1均分，每个方向有90度的容错角度。在这种情况，上滑时手指滑动方向只要左右偏移不超过 45° 都会被判定为上滑，如下图所示。 


对于这第二种情况，系统需要处理以下两个问题。 


问题A：如果在上下滑过程中进行左右滑动的操作，系统如何判定？ 


一般我们是不希望用户在一次操作中同时进行上下滑动和左右滑动的。系统如果判定某次滑动为上下滑动，为了避免误操作，在本次滑动结束前（滑动结束的定义：手指离开屏幕并且受控物停止移动或停止其他属性变化），左右滑动会被完全禁用，而且左右滑动的容错角度会临时分配给上下滑动，如下图所示。 
 


例如，在iOS信息列表中，左右滑动可以唤起更多操作，上下滑动可以滚动页面，但是一旦进入上下滑动的过程，不松手的情况下左右滑动唤起更多操作就被完全禁用了，且左右滑动的容错角度会临时分配给上下滑动。

问题B：系统是如何在某一次滑动时判定我们是想要上下滑动还是左右滑动呢？ 


系统给予我们自然的使用体验背后是复杂的判定过程。判定的难点有两个，第一个难点：手指在操控屏幕时并不是一个稳定的状态，接触屏幕的一瞬间很容易抖动。抖动的方向也是不确定的，这个抖动需要判定为滑动吗？如果用户并不想滑动只是想进行点击操作的话怎么办? 


第二个难点：手指在接触屏幕后，接触屏幕的手指面积是逐渐增加的，但向下的增加要比其他方向的多，如果直接识别的话会被判定为下滑，应该怎么处理？ 


下图的动画是慢速模拟手指接触屏幕的过程。 


为了解决上述的两个难点，系统会设定一个容错距离，用户的滑动位移如果在这个距离内，系统就会把手势判定为「点击」，只有当用户往某个方向的滑动位移达到或超过这个距离，系统才会判定为“滑动”。但是由于这个容错距离很小，作为用户的我们去操作时，是很难感受到这个容错距离的存在的。 
 


基础规则讲完了，接下来针对第二种情况介绍一些负面案例，下图左是滑动前正常的角度分配，但是有时由于开发同学的失误，导致容错角度没有均分，出现下图右中触发上滑和下滑的角度极小的情况，进而导致用户在上下滑动时非常容易误操作为左滑和右滑。 
 


网易云音乐也曾有过类似的遗留问题，iOS 端的播放页上滑调出评论页极易误操作为左右滑动黑胶切歌（下图 A ，现已修复），安卓端的账号侧边栏上滑浏览极易误操作为左滑收起侧边栏（下图 B ）。 


因此，在验收阶段，角度的容错性检查也是重要的一环。因此在验收时间充裕的情况下，可以切换不同的手持方式分别体验一次，因为有些问题只有在特定的手持方式下才容易被发现。 


2 反馈比率

上篇提到过施控物（施加控制的一方）和受控物（被施加控制的一方）的概念。比率是受控物的某个属性变化与的施控物某个属性变化的比值。为了更好地理解这个概念，在这里举个例子。如下图，在网易云音乐的播放页和微信小程序页面边缘右滑一个固定距离时，页面下降的距离是不同的，网易云音乐播放页的下降距离大约只有微信小程序页面的一半，我们可以认为对于这个操作，网易云音乐的反馈比率是微信小程序的一半。 
 


比率的大小并没有绝对的优劣之分。比率越小，反馈越迟钝，但方便精准操作。比率越大，反馈越灵敏，效率高，但不方便精准操作。由于比率的这些特性，在不同的场景中会根据需求来选用合适的比率。 


在现实生活中，不同车型的转向比就是一个较为典型的案例。汽车方向盘旋转1圈半只能让轮胎旋转30度左右，而赛车、卡丁车的方向盘旋转角度和轮胎的旋转角度通常是一致的。普通人使用汽车的主要目的是代步，主要诉求是舒适安全，因此选用反馈比率小的转向比能够提高容错率。而对于赛车、卡丁车这一类为竞技而设计的车型，驾驶员要随时对复杂的赛道环境做出快速的操作，因此需要使用反馈比率高的转向比提高灵敏度。 
 


反馈比率在很多设备的交互设计中都有应用，例如我们可以设置鼠标的跟踪速度的快慢，跟踪速度越快，反馈比率越大，鼠标移动相同的距离可以控制光标移动更长的距离。 
 


在观看视频时，对进度进行细微调整和跨度较大的调整都是用户的常见需求，因此一般做法是采用两种比率不同的操作方式来满足需求。通过拖动视频区域的热区来进行反馈比率较小的细微调整，通过拖动进度条的热区来进行反馈比率较大的大跨度调整。

3 热区

热区为手势提供了可操作的区域，需要接触屏幕的手势都需要热区才能触发。合理的热区布置能够有效提高用户体验。

3.1 热区大小

更大的热区可以减少用户瞄准所花费的时间，减少触发失败的概率。热区的大小不一定等于按钮的大小，当某个按钮在视觉上设计得比较小时，为了方便用户操作，我们可以将热区合理地设计大一些。例如下图的App Store应用详情页中，视觉上按钮虽然很小，但是点击热区却设置得很大。 
 


按钮与热区如果联系感弱，就会导致用户的疑惑。例如下面的案例，换一换的按钮热区过大，扩大到了标题区域，用户如果无意间点击标题却更换了一批内容，就可能感到奇怪。 
 


下面的词典案例中，虽然播放按钮只是右侧的一个小图标，但是顶部由单词构成的整个区域都是可以点击的。因为点击单词与发音存在强联系，所以这样的热区扩大是合理的、联系感强的。 
 


按钮的层级和样式如果相同，热区面积一般需要保持一致，并撑满可用空间。例如常见的tab栏上的图标。 
 


对于高频操作，很多App会另外设计一个额外手势供用户使用，因为额外手势所能提供的热区远远大于单击按钮的热区，更加便于用户操作。例如网易云音乐的播放页会将高频功能都另外配备一个手势以此来提高操作效率。下图蓝色为按钮热区，红色为手势的热区。 
 


如果一个操作不可撤销且存在危险性质，我们尽量不要提供热区过大的手势操作。此时我们需要用户更加专注，如果加入热区过大的手势操作可能会增加误操作的概率。 


3.2 热区层级

界面会存在点击类手势与位移类手势的热区重叠的情况，此时两者是平级的，因为手势差异大所以互不干扰。

当界面中存在两种点击类手势的热区重叠情况或两种位移类手势的热区重叠情况时，就会出现层级排序的问题。


在支付宝的一个猜涨跌的模块中，热区的大概分布如下图所示。整个模块整体有一个热区，点击可以进入二级页面。看涨和看跌分别有一个热区，点击可以直接选择操作，层级布置是在整体热区的上一层。 
 


对于位移类手势，热区的层级布置更为复杂。比如以豆瓣的我的页面为例，在iOS全面屏上的横滑热区分布如下图所示。

①边缘右滑唤起侧边栏；②横滑泳道可以看更多书影音档案；③横滑底部的iOS安全区可以切换应用；④其他位置右滑可以切换tab页。 
 


通过热区层级的观察，我们能够发现一些明显的体验问题。 


在QQ音乐的首页，页面可以通过横滑切换tab，同时歌单可以通过横滑查看更多。歌单的滑动热区位于横滑tab热区的上一层。 


通过观察热区的层级我们可以看出，歌单的横滑热区几乎覆盖了拇指的易操作区域，导致tab的横滑手势难以触发。 
 


有书的播放页中，左边界的全局右滑返回热区在进度控件的上一层，但是进度滑块由于距离页面左边界太近，导致滑动进度滑块时很容易误操作为返回上一页。这种情况下我们可以标注一个右滑手势禁用区域给开发工程师说明情况，将此情况避免掉即可。 


3.3 热区的启动热区与调整热区

对于某些位移类手势，在操作时热区并不是一直保持不变的，而是分为了启动热区与调整热区。当位移类手势的起始点位于启动热区时，系统才会响应，后续操作过程中，手指不离开屏幕继续进行位移操作时系统响应的区域被称为调整热区。通常调整热区会扩大到全屏，同时禁用了界面的其他全部功能，目的主要是为了保证在后续操作过程中能够为用户提供足够大的热区增加操作舒适度，其次是为了避免用户手指一直挡住触发区域的重要信息。 


例如，iOS的控制中心中，在音量控件区域上下拖动可以调节音量大小，拖动过程中将手指移出音量控件区域继续上下拖动仍然可以继续调节。这样的设计可以避免手指挡住控件造成无法直观看清音量大小的问题。 
 


在iOS端，QQ音乐和网易云音乐的播放条都支持左右滑动切歌，但是整体体验上有一些差距。在面积大小层面，QQ音乐的启动热区与网易云音乐的启动热区是基本相同的，但是QQ音乐的调整热区是全屏，而网易云音乐的调整热区仍然和启动热区一致。这样导致的问题是，用户在使用网易云音乐时，如果左右滑动播放条的过程中手指无意间超出了启动热区就会导致本次操作无效，影响使用体验，而QQ音乐没有这个问题。 


手势的感知与记忆

用户与一个手势的交互过程是从感知到使用，最后产生记忆。上文的知识基本是关于使用层面的，对于感知和记忆层面，我们需要了解以下内容。

1 自然

针对某个功能选择最自然的手势，在使用中能够代入到相应的情境，并且能够帮助用户感知和记忆，最终习得。这里提到的“自然”指的是符合文化习俗、日常习惯和现实映射。 


近些年任天堂的体感游戏成功破圈，主要原因我认为是它的操作方式贴近现实映射，基本模拟了我们日常的动作习惯，让游戏非常容易上手，让之前被传统电子游戏的操作门槛拦在外面的人有了享受游戏的机会。 
 


拥抱是我们基于文化来表达善意的方式。在云音乐中，抱一抱彩蛋是使用双指捏合某个评论进行触发，它是基于现实生活中我们常用来表达关爱的拥抱动作衍生而来。正因如此，使用时才会感觉氛围感与仪式感满满。 


水果忍者这个名字你应该不会陌生，这款手游在2015年就达到了10亿次的下载量，足以看出它的受欢迎程度。在游戏中，设计师将“切”这个现实的动作通过滑动手势进行了自然的映射，进而让上到80岁的老奶奶，下到刚学会说话的孩子都能无障碍地玩儿这款游戏。 


2 经验

用户习得某个手势后，经过反复使用形成经验。当用户面对类似的界面时，就能快速感知到可以使用哪些手势。考虑到这种经验，在同一个场景，如果某个功能与某个手势的绑定已经成为行业通用做法，尽量沿用而不要换另一个手势。比如下拉刷新、双击点赞等。

3 容错

手势的容错包括认知的容错还有记忆的容错。比如当感知一个功能应该用什么手势操作时，不同的人会有不同的认知方式，支持多种手势就能包容这些认知差异。比如QQ 阅读的下拉拟物绳灯可以切换夜间模式，考虑到了有些用户在现实生活中并未见过拟物绳灯，并不知道是要进行下拉才能触发操作。因此，QQ 阅读贴心地搭配了一个简单的点击操作，用户通过点击绳灯也可以切换夜间模式。 
 


类似地，探探、Tinder的左滑无感右滑喜欢的手势当用户经过较长时间不使用后是容易遗忘的，为了包容用户记忆上的差异，无感和喜欢仍然会设计出固定的按钮供用户使用。 


4 逻辑

如果用户通过某个手势进行某个操作后，界面仍然存在上一个界面的可操作性元素，按照逻辑用户也可以通过反向的手势或对应的手势进行逆向操作。比如在微信首页下拉调出小程序页面，之后可以通过上拉返回首页。 


如果违背了逻辑，就容易与用户的心理模型不相符，用户就会感觉到混乱和不适。 


举一个反例， Uki 的个人主页可以通过点击或下拉底部的浮层收起更多信息，但是收起后即使浮层仍保留在界面的情况下只能通过点击展开更多个人信息而不能上拉。 
 


有时，为了提高容错，可以牺牲一部分逻辑。如知乎评论弹出框，逻辑上它是从底部弹出的，但是不但能够下拉关闭还可以右滑关闭。虽然右滑关闭在逻辑上有点奇怪，但是确实让用户操作更加方便。 
 


5 引导

用户在感知某个功能使用哪个手势的过程中，首先会使用经验来判断。但是当选用的手势无法让用户通过经验感知到时，我们需要使用合理的引导来教育用户。

5.1 引导的强弱

有引导就会有强弱，是强是弱要取决于功能的重要级。 


强引导一般是模态的浮层，会打断用户当前的操作，虽然保证了用户一定会注意到，但是也会让用户厌烦地跳过而忽略内容。 
 


弱引导没有固定的样式，不会打断用户当前的操作。如豆瓣的关注Tab下的帖子流被浏览完后，继续上滑会出现手势引导。 
 


iPhone 一代经典的滑动解锁，按钮上的向右箭头和暗文“滑动以解锁”的引导文案都再提示用户如何使用。 
 


还有一类弱引导，以隐喻来帮助用户感知到应该使用的手势。例如常见的泳道设计，会在最后露出截断的内容暗示用户左滑可以看更多内容。（如下图红框区域） 
 


当某个点击操作触发了内容的平移动画，那么这个平移动画会暗示用户可以通过左右滑动来操作。比如切换Tab、左右滑动翻牌等。 
 


5.2 引导的时机

5.2.1 操作前

当产品中设计了不容易感知的新手势，在用户操作前，通过引导让用户了解和学习新的手势。大部分的手势引导都在这个时机。 


5.2.2 操作中

当某个手势可以分阶段触发不同功能时，在用户正在操作第一阶段时给予第二阶段的引导非常适时且容易被注意到。 


下拉进入二楼是淘宝最先使用的创新手势，根据下拉的两种距离来触发刷新和二楼。二楼不是一个常用功能很难被发现，但是由于存在下拉刷新这个第一阶段的手势，可以在用户进行刷新时进行提示引导，告知用户二楼的存在。 
 


微信的浮窗也是一个操作中引导的优秀案例。用户在微信阅读文章时，可以通过右滑并将手指移入控件从而将文章最小化，稍后再阅读。移入控件这个第二阶段的手势在用户在操作高频的右滑返回时进行引导，非常容易被发现（下图左）。如果没有这个手势设计，仅仅保留到更多浮层里的这个入口，相信很多用户根本发现不了这个功能。（下图右） 
 


5.2.3 操作后

对于一些与用户的心理模型和习惯不一致的手势，提前预测用户可能输入的错误手势，在用户错误操作后进行提示，规范用户的操作方式。如下图，由于知乎旧版本是通过左右滑动切换回答的，新版本调整为上下滑动后，需要纠正用户使用习惯。因此，当用户仍然使用左右滑动时，会出现浮层提示用户正确的手势。 


手势与传感器

前文讲解的手势只能算作智能设备输入方式的其中一种。还有很多其他依赖于不同传感器的输入方式，接下来介绍一些与手势比较相关的传感器作为拓展知识和案例进行了解。当针对某个功能找不到适合的手势时，可以尝试从传感器的角度思考。

1 陀螺仪

陀螺仪可以测量沿一个轴或几个轴动作的角速度，跟踪并捕捉3D空间的完整动作，应用非常广泛，特别是在体感游戏的设计中发挥了很大作用。很多产品设计利用陀螺仪可以进行一些拟真的设计。例如FIMO相机里的胶卷会跟随手机的倾斜而产生旋转。 
 


锤子科技在坚果Pro2的发布会上提出的“无限屏”功能也是基于陀螺仪等传感器的一次勇敢的创新，但是在体验层面用户褒贬不一。 


2 加速度传感器

加速度传感器可以在加速过程中，通过对质量块所受惯性力的测量，利用牛顿第二定律获得加速度值。微信摇一摇、摇动切换内容的实现就是利用了这个传感器。 


3 姿态感应器

姿态感应器是基于MEMS技术的高性能三维运动姿态测量系统。华为隔空手势就是利用这个技术实现了不接触手机进行操作。 


手势的创新

“它太强大了，像魔术一样！” 2007年9月1日，伴随着阵阵惊呼，乔布斯向观众展示了初代iPhone的多点触控技术并发出这样的赞叹。 
 


去掉臃肿复杂的实体键，以简单自然的手势作为替代。在苹果手机一代发布会当晚，滑动解锁、上下滑动滚动列表、倾斜手机进入横屏模式、双指缩放等等创新手势让我们印象深刻，其中的大部分一直被我们沿用至今。 


如何定义创新手势呢？我认为有两个层面，从0到1的创新和从1到1.1的创新。苹果手机一代发布时展示的交互手势属于从0到1，让交互手势从无到有。如今我们做得比较多的是从1到1.1的创新，主要体现为使用已存在的手势与某个功能结合后，体验出色且与过往的解决方案有足够差异。比如，下拉和上下滑动都是已经存在的手势，但是Tweetie将下拉与刷新结合、Musical.ly（国际版抖音前身）将上下滑动与切换视频结合，都为用户带来了更好的体验，因此属于1到1.1的创新手势。 


在前文中提到的案例，如微信拍一拍、网易云音乐抱一抱、Tinder左滑无感右滑喜欢等都属于1到1.1的创新且获得了成功。当然，也有一些创新并没有获得认可，比如旧版微信的下拉拍摄视频和锤子系统的无限屏。不管创新是否获得成功，敢于进取和突破的精神仍然是值得敬佩的。因为有了这些敢于创新的设计师，体验设计才可以迎来一次次突破，为用户带来了更优质的体验，为其他设计师提供了更合适的可选方案。

总结与感想

断断续续一年多终于把手势系列更新完了，希望以上我对于交互手势的全部思考能够帮助你建立基础的认知，为你在实际工作中提供参考。手势的设计或选用没有标准答案，需要我们根据实际情况进行思考和取舍后做出判断，然后在一次次的实践中不断强化自己的判断力。 


参考书籍：

《交互设计：原理与方法》作者：顾振宇

《交互设计语言：与万物对话的艺术》 作者: 罗涛

《交互设计精髓 4》作者：[美] 艾伦·库伯 / [美] 罗伯特·莱曼 / [美] 戴维·克罗宁 / [美] 克里斯托弗·诺埃塞尔