开通VIP，畅享免费电子书等14项超值服
首页
好书
留言交流
下载APP
联系客服
2022.07.14广东
图形用户界面为我们呈现了丰富的视觉信息，而触摸技术则改变了我们与工具之间交互的方式。从使用起来费力的电阻触摸屏到如今轻松省力的电容触摸屏，这种技术的进步让手势的精细化设计成为可能，同时也让它在便携电子设备上得到大量应用。与实体按键相比，它有着纯粹的简洁性和无尽的创造性，手指的个数变化、不同变量的组合能够创造出无数的操控方式来满足需要。
01
点击类手势
▼
交互手势的描述维度是什么？在这里我们将其简单定义为影响一个交互手势呈现效果的变量。
常见的点击类手势只需要单击就可以触发操作，即触屏1次。但是有时为了在有限的界面空间中拓展更多的功能，会增加一个多次点击（后续简称为“多击”）才可触发的功能。例如抖音的单击触发暂停短视频播放，双击触发点赞。触屏次数超过2次的功能非常少见，因为次数越多，相应的教育用户的成本越高。
落点是一个会影响系统区分单击和多击的因素，它指的是手指触屏时按下的位置。进行第一次点击后，落点周围会生成一个范围，第二次点击的落点需要处于前一个落点周围生成的范围内，只有这样才能形成一次有效的双击，否则就会形成两次单击。多击的判断规则以此类推。生成的范围可以调用直接系统提供的默认值，一般不需要设计师提供。
点击类手势可以在两个时机触发操作，分别是手指按下时和释放时。按下时触发由于不能通过将手指移出热区进行反悔回退，从而缺乏掌控感，但是对于撤销成本低的操作可以使用它提高效率。释放时触发能够通过将手指移出热区进行反悔回退，掌控感强。
释放时触发过于常见，就不举例赘述了。绝大多数点击操作都是释放时触发，反而是按下时触发的案例非常罕见。
前文提到“按下时触发由于不能通过将手指移出热区进行反悔回退，从而缺乏掌控感”。实际上当满足一些特殊条件时，按下时触发也是能够通过将手指移出热区进行反悔回退的。这些特殊条件包括：①点击操作对页面造成的变化较小；②操作结果的撤销成本较小；③同一热区不存在滑动操作。如何理解这些条件呢？下面我们逐一分析。
①点击操作对页面造成的变化较小
如果点击操作对页面造成的变化较大，就可能会导致原热区消失或被遮挡（如下图），很难让用户建立移出热区进行返回回退的认知。
②操作结果的撤销成本较小
按下后触发会导致手指一旦按下到按钮后操作立刻生效，如果是支付类，就会面临极高的撤销成本，所以使用按下时触发时，允许通过手指移出热区进行反悔回退的功能必须是轻量的、撤销成本低的。
③同一热区不存在滑动操作
这个很好理解，如果同一热区存在滑动操作，就会导致为了撤销进行的滑动和其他滑动操作产生冲突。
iOS的锁屏页面输入密码操作虽然是按下时触发（如下图），但是能够通过将手指移出热区进行反悔回退，它同时满足上述的三个条件。按下时触发由于提升的效率过小，因此很少被选用，且绝大多数情况可以使用释放后触发替代，因此大家对这部分知识仅做了解即可，日常设计时默认仍然选择释放时触发。
根据上述三个描述维度的变化，有以下常见的手势类别。
使用单指在热区位置按下后抬起，从而触发相应的功能。整个状态变化过程为「抬起状态→按下状态→抬起状态」。
单击是在移动端使用最普遍的手势。相较于其他手势，单击是最容易让用户感知到的。
上文讲解「触发时机」时提到过，单击时可以通过在按下状态时移出热区，在热区外抬起从而取消本次操作，因此给予了用户反悔的机会。
使用单指在热区位置按下，从而触发相应的功能。整个状态变化过程为「抬起状态→按下状态」。
与“单击”相比，“按下”由于从“抬起状态”到“按下状态”即可触发操作，导致不能通过将手指移出热区进行反悔回退，从而缺乏掌控感，但是在撤销成本低的操作可以使用它提高效率。按下手势极少用于可产生明确结果的操作，一般仅用于用户按下按钮后的视觉反馈。
在单指已经在热区位置处于按下状态时，抬起手指从而触发相应的功能。整个变化过程为「按下状态→抬起状态」。
“抬起”的触发前提是手指已经处于按下状态。某些应用场景中，“抬起”会改变或取消“按下状态”产生的效果。例如在iOS相机的照片模式中，按下拍摄按钮并保持按下状态，就会开始录制视频，此时“抬起”就会取消录制视频。
在手机游戏《愤怒的小鸟》中，拖动小鸟并不松手使弹弓进入蓄力状态，此时“抬起”就会将弹弓的蓄力状态变为释放状态，从而将小鸟发射出去。
当一个功能仅支持长按不支持点击时，需要在用户点击时进行引导，告知用户正确的手势。举一个反例，哔哩哔哩播放视频页的GIF录制功能需要长按才能录制，但是当单击时却没有任何反馈告知用户需要长按进行。
更好的做法是在用户单击时进行轻量提示，例如下图中用网易云音乐一起听时，对讲机需要长按才能对讲，如果用户单击，就会通过一个toast提示来引导用户使用正确的手势。
使用单指在热区位置按下后抬起，然后再次按下，从而触发相应的功能。整个状态变化过程为「抬起状态→按下状态→抬起状态→按下状态」。
双按是一个在移动端非常罕见的手势，并且非常隐蔽。双按很少用于触发一个特定的功能，在移动端它常见于触发一个模式。
例如当在一个界面中，上下左右四个方向都已经存在位移类手势了，但是仍然有功能需要新增额外的位移类手势。此时可以将双按看做是一个模式启动方式，双按后可以立即使用上下左右四个方向的手势触发额外的功能。
在地图类App中，通常上下左右的滑动手势会用来拖动地图，双击放大地图，双指张开和捏合用来放大和缩小地图，但是在出行场景中单手操作的情况很多，如何使用单手就可以对地图进行放大缩小呢？通常都会使用双按来作为模式的启动。双按后不松开手指的情况下通过上滑来放大地图，通过下滑来缩小地图，从而解决了单手操作时难以放大缩小地图的痛点。不足之处在于，这个手势的教育成本较高，只有少部分用户能够发现并持续使用。
使用单指在热区位置按下后抬起，然后再次按下后抬起，从而触发相应的功能。整个状态变化过程为「抬起状态→按下状态→抬起状态→按下状态→抬起状态」。
将上述的手势的描述维度和手势类别的关系汇总为表格，如下所示。
通过手指按压力度不同来触发不同功能的设计首次应用于AppleWatch上采用的ForceTouch，之后开始在iPhone6s以及后续部分机型上应用，被命名为3DTouch。（由于比较普及的使用按压力度作为变量的功能现在仅有3DTouch，因此接下来的介绍也主要围绕3DTouch进行）3DTouch从诞生之日起就面临着许多的争议，是划时代的设计还是食之无味的鸡肋？不同的用户有不同的看法。下面我就简单讲一下它的优缺点。
首先谈谈优点：
②与单击、长按相比，3DTouch有更好的防误触效果。例如在支持3DTouch的iPhone机型上，锁屏界面的手电筒只能通过3DTouch触发，点击和长按都无法触发，个人认为目的是为了防止手机放在口袋时误触。
③在特定场景下，3DTouch有着其他手势难以替代的优势。例如在移动端的三维射击游戏中，按键操作一直是个难题，右手很难在屏幕上滑动调整视角的同时开枪射击。3DTouch的独特属性能够解决这个问题，通过按压力度控制开枪，滑动屏幕调整视角，能够实现边瞄准边开枪的效果。
在绘画App中，通过3DTouch可以用手指按压力度来模拟颜色的深浅和笔触的粗细，从而实现更好的画面效果。
上述两个案例遇到的需求都是在单指保持滑动过程中需要另外一个维度的控制，如果遇到相同的需求也可以思考如何通过3DTouch来实现更好的体验。
其次是缺点：
①由于3DTouch并不支持所有的设备，因此App厂商在进行手势适配时就不能把3DTouch当做某个功能唯一的触发方式，而是只能将其作为一个辅助性的手势，而长按作为一个支持所有设备的手势，虽然触发速度没有3DTouch迅速，但是基本也可以替代3DTouch。因此造成了大部分情况下3DTouch是一个可有可无的鸡肋手势。
②3DTouch是一个很难被用户察觉到的手势，没有引导的情况下我们很难注意到它的存在，从而降低了使用率。
③为了支持3DTouch而产生的硬件成本是一个不能忽略的因素，而且电池的空间因此进一步被压缩，影响设备的续航。
综上所述，3DTouch对于用户和手机厂商来说，性价比偏低，因此苹果公司在后续的机型上砍掉了3DTouch功能，使用按压力度来触发功能的设计可能从此也会退出历史的舞台。
接触面积维度支持根据手指在屏幕的接触面积的不同从而触发不同功能。案例比较少见，我认为其中SmartisanOS的大爆炸功能将这个维度运用地最为出色。（下图为大爆炸的触发方式）
大爆炸是一个系统级的手势，通过它可以快速提取所有App里的文字信息进行编辑和更多操作。为了不与各种App里已有的手势冲突，大爆炸只能另辟蹊径，找到一个独有的手势来完成操作，下面的操作示例是大爆炸的宣传视频。使用接触面积的判定来触发是一个很巧妙的解决方案，解决方向有些类似于前面讲到的3DTouch，但是避免了3DTouch所需要的硬件成本。
同样运用了接触面积维度的功能还有华为手机的指关节截屏，通过识别包括接触面积等多个参数判断是否是指关节。
02
位移类手势
位移类手势是指那些通过手指接触屏幕后的位置变化从而操控电子设备的手势。这一部分主要讲解单指类的位移类手势，多指类的会在后文的「多指和点击类」中讲解。
一谈到位移类手势，大部分设计师的脑海中可能会浮现出拖拽、甩动和轻扫这三个术语。然而，当我们想仔细谈论他们三者之间的区别时，大部分设计师可能无法准确地描述。为了能够准确描述三者的区别，我们在这里引入三个维度的概念，它们分别是控制方式、稳定化效果、以及阈值类型，这三者的不同的变化组合可以创造不同的位移类手势，拖拽、甩动和轻扫之间的区别也是这三个维度影响的。那接下来先了解一下这三个维度。
第一个维度是控制方式，它分为绝对控制和相对控制，也可以通俗的表达为跟手和不跟手，区别如下：
绝对控制/跟手：施加控制的一方（后文简称施控物）的某个属性变化与被施加控制的一方（后文简称受控物）的某个属性变化是对应的。
相对控制/不跟手：施控物的某个属性变化与受控物的某个属性变化不是对应的。
与相对控制相比，绝对控制允许用户去操控受控物的属性变化过程，因此给予了用户更强的掌控感。比如在京东读书阅读页边缘右滑，手指的横向位置与书籍封面的变化过程对应，模拟现实生活中慢慢合上书的感觉，如下图。
但是在有些场景，为了避免混乱，属性变化过程是不适合被用户绝对控制的，此时我们应采取相对控制的方案。比如iOS的相机中，左右滑动切换拍摄模式，由于前后不同模式之间的页面框架变化较大，切换时会有过多元素的属性变化，如果使用绝对控制就会导致切换时拖沓且混乱，使用相对控制就能避免这个问题。
当我们使用手势操控某个受控物时，受控物的属性A达到阈值，进而导致受控物的属性B稳定在了特定状态的效果被称为「稳定化效果」，或者也可以称为「吸附」。
稳定化效果能够保持界面的视觉秩序，避免过多的中间状态导致界面的杂乱，进而帮助用户聚焦信息。是否有稳定化效果是区别轻扫与另外两个手势即甩动和拖拽的重要维度，当某个位移类手势有稳定化效果，我们就将其称作「轻扫」。
以滑动切换抖音视频为例，当手指上滑的位移距离和释放速度其中的某一项属性达到阈值后，下一条视频会往上移动到一个固定的位置然后进入稳定状态，而不会出现停留在不完整的中间状态，如下图所示。
在多内容选择的场景中，如果滑动与选中是绑定的话，一般需要使用稳定化效果。例如在iOS相机里选择滤镜时，滑动滤镜选项不但能够控制滤镜选项的位置，并且会自动选中一个位于中间位置的滤镜，位置的稳定化避免了被选中选项的不明确。
不同的稳定化规则带给用户的体验差异是非常大的，最明显的差异是在效率方面。我们使用稳定化效果的强弱来理解，稳定化效果越强，单次滑动能够切换的选项个数越少，效率越低。稳定化效果越弱，单次滑动能够切换的选项个数越多，效率越高。
比如在比较常见的banner切换功能中（下图左），无论手指位移和释放速度的值有多高，banner只能切换并稳定到下一个，不能够一次切换多个banner。而在网易云音乐的首页排行榜中，一次滑动能够切换多个内容卡片，我们可以说前者的稳定化效果比后者强。
那么我们决定添加稳定化效果后，如何选择强弱程度呢？选择没有绝对的对错，整体来说主要考虑两点，业务诉求和用户诉求。例如在常见的banner切换中，banner的总数量一般不会很多，业务的诉求是希望尽可能曝光每一个banner，使感兴趣的用户进行消费，因此这里比较适合做稳定化效果强的轻扫。在云音乐的排行榜案例里，不同用户感兴趣的榜单是不同的，稳定化效果弱的轻扫可以方便用户单次滑动切换多个，快速切换到自己感兴趣的榜单的大概位置。
在某些场景，用户需要先通过高效的方式选择特定区域的内容，然后进入聚焦状态进行内容浏览和慢速的切换，此时我们需要设计两种切换效率不同的手势应对前后场景的变化。如下图，在iOS的照片App中，先使用切换效率较高的甩动进行粗略切换找到目标图片大概位置，点击进入大图模式时使用切换效率较低的轻扫进行精确切换查看。
触发稳定化的时机可以分为释放前和释放后，不同的时机带给用户的体验也不同。释放前稳定化指的是用户使用手指滑动屏幕时，手指位移达到阈值后，手指无需离开屏幕，稳定化即可被触发。如下图左，iOS的相机滑动切换拍摄模式使用的就是释放前稳定化。释放后稳定化指的是用户使用手指滑动屏幕时，手指位移或释放速度达到阈值后，手指必须离开屏幕，稳定化才能被触发。如下图右，常见的banner切换。
释放前稳定化可以避免拖沓，增加切换效率，但是缺点是无法反悔回退且缺乏掌控感。反之，释放后稳定化可以反悔回退，掌控感强，但是缺点是比释放前稳定化拖沓了一些。
市面上的App暂时不存在仅通过释放速度判定而与手指位移无关的阈值判定方式，因为其不太符合常识。因此我们在设计位移类手势时，能够选择的阈值判定方式常见的有两种：①判定手指位移和释放速度满足任意一个即可；②仅判定手指位移。
当我们设计手势时，就需要考虑两者的区别。由于①比②增加了释放速度带来的额外移动距离，因此①的主要优点是高效。但是由于我们无法预判释放速度带给受控物的移动距离长短，所以相对应的缺点就是易误操作和不精确。②就恰恰相反，由于不存在释放速度造成的不确定因素，它的优点是不易误操作和精确，缺点是低效。
当我们在刷抖音视频时使用的手势就是轻扫，是否滑动到下一条视频进行播放的判定方式是①判定手指位移和释放速度满足任意一个即可，对应的手势类别是上面表格中的轻扫A。如下图所示，在刷抖音时，如果使用判定手指位移的方式，我们可以将手指在垂直方向位移大于半个屏幕高度的距离，从而切换到下一个视频。如果使用判定释放速度的方式，我们可以移动任意的垂直距离但是手指离开屏幕时保留一个速度从而切换到下一个视频。大部分情况下用户都会使用判定释放速度的方式，因为既省力又便捷。
因此，对于位移类手势，选用哪种阈值判断方式要依据用户使用场景和诉求，不能想当然地设计。
了解完三个基础维度后，我们再将其进行组合，从特定手势的角度更全面地理解它们的差异和使用场景。三个维度的排列组合能够生成十余种位移类手势，我列举出了常见的7类，如下图所示，这7类基本涵盖了95%以上的场景，我将一一举例说明。由于施控物控制受控物改变的属性一般都为位置，因此接下来在描述下面手势的定义时我都以受控物的位置变化进行举例。
使用手指在受控物位置按下后，操控受控物沿着某个方向移动，无论释放时手指是否仍有速度，受控物都会立即停止移动。
精确度高但效率低。由于阈值类型仅判定手指位移且没有稳定化效果，拖拽适用于对操作精度要求高，对效率要求低的功能。
在iOS设置中调节亮度时，在有限范围内，手指左右拖拽可以控制亮度变化。
精确度低但效率高。由于阈值类型判定释放速度和手指位移，甩动适用于需要快速浏览较多内容的场景，如滚动浏览列表。
由于轻扫拥有稳定化效果，因此它能够保持界面的视觉秩序，避免过多的中间状态导致界面的杂乱，进而帮助用户聚焦信息。接下来讲解的其他轻扫类型都有这一特性，就不一一赘述了。轻扫A与接下来要讲解的轻扫B-E的最大不同之处在于轻扫A的阈值类型为「释放速度和手指位移」，这让轻扫A与轻扫B-E有两点不同，一是轻扫A可以通过释放速度的快慢去控制内容的切换数量的多少，更加高效，二是轻扫A可以通过用手指在屏幕滑动很短的距离但离开屏幕时保留一个速度来切换内容，因此更加省力。
在刷抖音时，如果使用判定手指位移的方式，我们可以将手指在垂直方向移动大概半个视频高度的距离，从而切换到下一个视频。如果使用判定释放速度的方式，我们可以移动任意的垂直距离并且手指离开屏幕时保留一个速度从而切换到下一个视频。
使用手指在受控物位置按下后，操控受控物沿着某个方向移动。若释放时手指位移达到阈值，受控物将稳定在一个新位置。若释放时手指位移没有达到阈值，受控物将回到原位置。
轻扫B与轻扫A相比唯一的区别是阈值类型减少了释放速度的判定方式，这提高了触发切换的难度，使操作成本变高，但是在某些场景下，这也降低了误操作的概率。如下拉刷新等。
因此，当页面已存在一个滑动操作的情况下，还存在另外一个方向相同的滑动操作且仅会在边界情况下才能触发时，为了避免误操作，会将后者的手势设计为轻扫B。
使用手指在受控物位置按下后，操控受控物沿着某个方向移动，但是受控物并不随着手指的控制而同步移动，仅当释放时手指位移达到阈值时，受控物才开始移动并稳定在一个新位置。若释放时手指位移没有达到阈值，受控物位置则一直保持不变。
上文讲到过释放后稳定化和相对控制的缺点，释放后稳定化比较拖沓，相对控制让用户缺乏掌控感。两者如果应用到了同一个手势（即轻扫C），就会导致用户在滑动屏幕时得不到任何反馈，用户会疑惑是否因为自己操作不当或是设备出现故障。只有当用户手指离开屏幕后才会发现触发了操作，整体的交互流程给用户一种滞后与延迟的感觉。
因此轻扫C与其他类别的轻扫相比存在劣势，但是它也存在很多的App的H5页面中，我的猜测是由于H5对于判定释放速度和绝对控制这两个维度与客户端相比难度大很多，因此只能退而求其次选择轻扫C这个较差的方案，实际上在同样的应用场景中用轻扫A替换轻扫C可以带来更好的体验。
使用手指在受控物位置按下后，操控受控物沿着某个方向移动，但是手指位移达到阈值前受控物并不随着手指的移动而移动。若手指位移达到阈值，无需手指释放，受控物将开始移动并稳定在一个新位置。若手指位移没有达到阈值，无论是否释放，受控物位置则一直保持不变。
相对控制的方式降低了用户的掌控感，释放前稳定化减少了操作的拖沓感。使用此手势的场景是在多个对象之间切换时，我们不希望用户过于自由地操控对象之间的属性变化过程，并且牺牲掌控感从而增加单次的切换效率。
比如iOS的相机中，左右滑动切换拍摄模式时，由于前后不同模式之间的页面框架变化较大，切换时会有不同元素的属性变化，如果使用绝对控制和释放后稳定化就会导致切换混乱且拖沓，使用相对控制和释放前稳定化就能避免这个问题。
上文我们讲到，通过轻扫手势A-D对受控物的绝对/相对控制都是存在于稳定化前，受控物一旦稳定化，就脱离了手指的控制，需要手指离开屏幕后再次接触屏幕开始下一次控制。
轻扫E的不同之处在于它可以在受控物稳定化后，仍然控制受控物朝着下一个节点稳定化，在每个节点之间切换时能够明显感觉到分段感，如下图案例所示。
由于轻扫E相对于轻扫A-D的特殊性，控制方式中的绝对控制和相对控制无法覆盖这个特殊现象，因此我们使用「多段相对控制」来命名轻扫E的这种特殊的控制方式。
使用手指在受控物位置按下后，操控受控物沿着某个方向移动，若手指位移达到阈值，无需手指释放，受控物就稳定在了一个新位置，但是此时手指还是仍然可以操控受控物继续移动的，并且继续移动过程中如果手指位移达到阈值将会到达下一个稳定化状态。
了解完上述的维度和常用手势后，我们在脑中就可以形成一个思考框架。当我们要针对一个功能设计位移类手势时，就可以从阈值类型、稳定化效果以及控制方式这三个维度思考。接下来我用一个我参与过的实际项目作为案例给大家讲解一下思考过程。
本案例是网易云音乐陌生人版一起听中的一个功能，一起听的双方在听歌过程中会收到彼此共同信息，比如听歌口味相似度、是否同城、都喜欢哪些歌手等，目的是为了增加可玩性和互动性、降低退出率，鼓励用户互相了解、提高一起听过程中的社交体验。
为了营造仪式感和避免信息过载，共同信息的展示方式设计为了一次只能看一条，进入浮层后默认展示最新的一条，可以通过滑动查看上一条。因此为了避免出现两条同时占据展示区域的混乱状态（如下图左），我们为其添加了释放后稳定化效果（如下图右），同时为了方便用户可以快速浏览旧的共同信息，这里使用的稳定化效果是较弱的，用户可以通过滑动一次切换多个共同信息。
由于需要满足用户快速浏览旧的共同信息的诉求，阈值类型选用了「判定手指位移和释放速度满足任意一个即可」，用户可以通过控制释放速度进而控制信息的切换数量。控制方式则选择了掌控感强的绝对控制。最后的结果如下图所示。综合三个维度进行归类，此手势为稳定化效果较弱的轻扫A。
上文讲到，基础的三个维度即阈值类型、稳定化效果和控制方式决定了手势的类别，是设计阶段一定要定义清楚的。但是除此之外，设计一个手势需要定义的细节非常多。比如受控物的移动是否有速度曲线？手指位移与受控物之间的位移的比率是多少呢？这些都是开发阶段不得不面对的。幸运的是，安卓和iOS有系统封装好的一套系统组件可以调用，操作系统自行解决了刚才讲到的细节问题，但是H5框架下是无法调用系统组件的，手势的各种细节都需要前端开发人员自己编写，难度较大，大部分情况只能实现一些比较简陋的效果，这也是为什么在很多H5框架下的界面滑动的体验比较差的原因。
位移类手势由于种类较多，细节差异比较大，并且考虑到信息不对称，与开发的沟通过程中，很容易出现理解偏差。比较常见的错误有：将甩动误解为轻扫A，将轻扫A误解为轻扫B或甩动。如果造成效果达不到预期的情况，很多设计师不知道如何让开发同学修改，只能说“这个手势不丝滑，优化一下”，开发同学也是一头雾水，不知道往哪个方向优化。如果我们能够直接说出“阈值判定方式现在只有手指的位移，需要释放时的速度也能够触发跳转；这个位移的阈值太高了，滑动时很难触发跳转，需要把阈值改为16pt”类似这样准确的描述，就能够大大降低沟通成本，顺利验收。为了避免沟通出现问题，下面我将日常经验总结出现希望能够帮助到大家。
拖拽和甩动由于需要定义的细节参数都被操作系统提前封装好了，不需要我们给到额外的标注。但是对于轻扫，我们需要将细节定义清晰，下面将详细讲解。
上文讲到，阈值类型一般有两种：①判定手指位移和释放速度满足任意一个即可；②仅判定手指位移。①的开发成本高于②。
如果我们选用轻扫的阈值类型是①，开发同学编写代码需要两个参数的阈值，分别是手指位移和释放速度。手指位移阈值一般默认为受控物的1/2，例如下图的全屏短视频和Banner。
当然我们也可以自定义一个阈值，比如100pt、受控物高度的1/6等，没有特别的需要的话使用默认值即可而且也不用给开发同学特殊说明，但是如果有特殊需要想要修改默认值，就要告知开发同学你自定义的手指位移阈值。对于释放速度阈值，通常默认就非常的小，几乎是大于0即可触发，一般情况下使用默认值即可。
在本应该选用①的场景中，如果由于技术成本原因不得不选用②，需要注意的是由于缺少了释放速度的判定，手指位移的阈值我们需要设置得小一些方便用户触发，否则就会出现上文中美图秀秀浮层的那样的体验问题。经过我的实验，手指位移阈值一般定为16pt是比较适中的，既不会太容易误操作也不会难以触发。
轻扫是一定存在稳定化效果的，关键在于告知开发是释放前稳定化还是释放后稳定化。从开发的角度讲，系统会监测用户的行为，用户在使用滑动时会有按下（down）、移动（move）、抬起（up）三个行为，释放前稳定化是在移动阶段判断阈值并触发操作、释放后稳定化是在抬起后判断阈值并触发操作，开发成本几乎没有区别。
上文提到过稳定化效果强弱的概念。稳定化效果越强，单次滑动能够切换的选项个数越少，效率越低。稳定化效果越弱，单次滑动能够切换的选项个数越多，效率越高。首先，我们需要确定单次滑动允许切换多个还是只允许切换一个，如果允许切换多个，开发同学会设定一个控制切换难度的系数，而只允许切换一个的话就不存在这个系数。通常我们也不需要修改这个默认系数，但如果想让操作更加难或容易触发，可以告知开发同学修改这个系数。
绝对控制比相对控制的开发成本高，如果开发资源并不是很紧张，需要绝对控制的场景就不要退而求其次使用相对控制。涉及到轻扫手势一定要告知开发同学控制方式，否则很可能被视为相对控制处理。
通过学习，我们不但可以在开发工作进行前与开发同学高效沟通，保证开发工作的顺利进行，也可以对自家移动端产品的现有手势进行逐一排查发现问题点进行记录，并且找到合适解决方案，然后用准确的语言描述给开发同学。位移类手势是问题发生的重灾区，下图是我在进行手势排查后输出的表格，挑选出一些有代表性的位移类手势问题案例给大家作参考，开发同学可以通过它快速明确问题，理解解决方案。
03
多指类手势
使用多指类手势的原因主要有两个：
①单个界面对于手势的需求量比较大。当可用的单指类手势都已经被占用后，通过引入多指的维度来扩充手势，从而满足设计需要，避免产生手势冲突；
②系统级的全局手势通常使用多指类手势来尽量避免与第三方App的手势冲突。
全局手势如果设计得过于简单很容易引发手势冲突。例如一加手机的某个系统版本中，有一个全局手势是单指连续点击三次触发页面缩放，对于非游戏类的App来说基本没有这个手势，不必担心误操作，但是对于游戏类App而言，连续点击屏幕上的攻击键是一个很常用的操作，连续点击三次触发页面缩放的设计导致用户游戏过程中极易不小心触发了页面缩放。iOS系统的做法很巧妙，在点击的次数外增加了手指个数的维度，通过三指双击才能够触发页面缩放，从而基本解决了手势冲突问题。
在iOS的设置中开启缩放功能后，任何页面都可以通过「三指双击」触发页面缩放。
多指位移同样有控制方式、稳定化效果、以及阈值类型这些描述维度，它们的变化可以实现多指轻扫、多指拖拽、多指甩动这些效果。多指位移通常用来移动受控物或触发某个功能。
在iOS的短信App中，可以通过「双指拖拽」快速多选短信。
在笔记应用GoodNotes中，浏览模式下可以通过「单指甩动」浏览页面，但是当进入编辑模式后，单指位移会触发绘图，为避免手势冲突，单指甩动会变为「双指甩动」。
多指缩放与多指位移比较相近，不同之处在于多指缩放的手指移动方向是以某一个点为中心进行汇聚或分散。控制方式、稳定化效果、以及阈值类型这些描述维度同样适用于多指缩放。
网易云音乐可以通过「双指缩小」触发抱一抱彩蛋。
多指旋转可以看做是以多指的中心为圆心，通过多指的移动来模拟出围绕这个圆心做旋转的手势。它是对物理世界几乎100%的映射，因此一般用于旋转某个物体，调节旋钮等操作。
iOS的照片App中，可以通过「双指旋转」转动照片。
有一类特殊的多指手势可以支持更复杂的交互，一般为系统级手势。例如iOS中长按桌面的App后进行拖拽时，可以同时点击其他App一起进行拖拽。
因为组合类手势更加多变，且系统并未直接提供这类手势给设计师调用，需要设计师自己根据需求来组合搭配，因此很考验设计师的创新能力。之后的案例展示仅为常见的用法，并不是全部。通过举一反三，我们也可以设计出不同与本文中的案例但更满足需求的组合类手势。
下面这个表格里的模型是总结常见的组合类手势而设计的，能够涵盖绝大部分的设计需求，但仅适用于单指的组合类手势设计。
模型将组合类手势的操作过程分为启动、调整和触发三个阶段。每一阶段由一个分支手势构成。比如在第一阶段中，可以选用的手势有长按、双按、轻扫B。并不是只能选用这三个，而是它们三个作为第一阶段的分支手势体验良好且最常用。
①启动阶段的目的是创建一个新模式，在新模式下，界面原有的手势会失效，系统只能响应②调整阶段的手势，可以选用拖拽和轻扫E。在③触发阶段可以进行抬起、停留来触发最后的功能，如果选择「无操作」，则说明手势在②调整阶段已经达到目的，不需要③触发阶段的手势。
仅解释这个模型可能比较难理解，下面会用一些案例进行演示。
通过长按激活一个控件，在手指不离开屏幕的情况下将手指移动到某个功能选项的位置上，然后通过抬起触发该功能。功能选项一般出现在手指的附近，从而方便下一步操作。
花瓣App中长按某个图片后可以快速进行收藏等操作。
通过轻扫B激活一个控件，在不松手的情况下将手指往某个方向移动来选中某个功能选项，然后通过抬起触发该功能。
Chrome浏览器中，下拉页面后将手指左右移动并抬起可以触发其他功能。
为什么上面两个案例在触发阶段使用停留而不是抬起？
因为完成了触发阶段的操作后手指仍然需要对受控物保持控制状态，此时不能松开手指，因此这种情况下操作的触发手势使用停留更合适。
当一个界面中，上下左右四个方向都已经存在位移类手势了，但是仍然有功能需要新增额外的位移类手势。此时可以将双按看做是一个模式启动，双按后可以立即使用拖拽来触发相应功能。
地图类App中，可以通过双按后手指不离开屏幕往上拖拽来放大地图，往下拖拽来缩小地图，从而解决了单手操作时难以放大缩小地图的问题。不足之处在于，这个手势的教育成本较高，只有少部分用户能够发现并持续使用。
上文依据操作方式将案例进行了分类。实际上在设计过程中，使用场景分类更能便于我们去选择适合的手势。我将组合类手势通过使用场景的区别分为了四类，它们分别是①单个属性的调整、②多个功能选其一、③默认选择主要功能、④同时进行两项操作。由于下面案例的手势在上文已经进行了介绍，所以不做赘述仅罗列更多案例帮助理解。
单个属性可以是亮度、大小、位置等，通过双按或长按启动模式后，再使用拖拽来进行调整。
每个地图App基本都支持这个手势，双按后通过拖拽来对地图大小进行调整。
（上文有动图示例，这里不再重复展示）
在快手App的拍摄界面中，长按拍摄键后上下拖拽可以调整取景框的大小。
通过长按唤起功能菜单，在手指不离开屏幕的情况下移动到某个功能后抬起触发该功能。
使用长按或轻扫B后可以直接松手默认触发主要功能，但如果保持手指不离开屏幕使用轻扫E，则可以选择其他次要的功能，然后抬起触发。
部分场景中，长按后手指需要保持接触屏幕的情况下同时操作两个功能，由拖拽和停留分别操作。
暂无更多案例展示，可以看上文的京东读书App选中更多文字的同时进行翻页、在iOS桌面拖动图标的同时进行翻页的案例，在这里就不重复展示了。
04
其他描述维度
位移类手势的方向一般为上下方向或左右方向，或者二者兼有之，但是想要触发操作，手指移动方向并不需要完全垂直或水平，默认会有一个容错角度。
当某个界面或模块仅支持上下方向或左右方向的位移类手势时，如下图所示，360度会1：1均分，每个方向有180度的容错角度，只要在角度范围内滑动，都可以触发相应操作，但需要注意的是在仅支持上下方向滑动时，如果完全水平方向去滑动，则不会触发任何操作，反之亦然。
当上下滑动和左右滑动同时存在于一个页面或模块时，会出现两种情况。第一种情况是被滑动的内容除上下左右外可以往更多方向移动，例如滑动照片或地图查看更多细节（如下图所示），是允许用户自由地朝任意方向滑动的。
第二种情况是，在单次操作中，只有上下或左右方向的滑动需求。360度会1：1：1：1均分，每个方向有90度的容错角度。在这种情况，上滑时手指滑动方向只要左右偏移不超过45°都会被判定为上滑，如下图所示。
对于这第二种情况，系统需要处理以下两个问题。
问题A：如果在上下滑过程中进行左右滑动的操作，系统如何判定？
一般我们是不希望用户在一次操作中同时进行上下滑动和左右滑动的。系统如果判定某次滑动为上下滑动，为了避免误操作，在本次滑动结束前（滑动结束的定义：手指离开屏幕并且受控物停止移动或停止其他属性变化），左右滑动会被完全禁用，而且左右滑动的容错角度会临时分配给上下滑动，如下图所示。
问题B：系统是如何在某一次滑动时判定我们是想要上下滑动还是左右滑动呢？
系统给予我们自然的使用体验背后是复杂的判定过程。判定的难点有两个，第一个难点：手指在操控屏幕时并不是一个稳定的状态，接触屏幕的一瞬间很容易抖动。抖动的方向也是不确定的，这个抖动需要判定为滑动吗？如果用户并不想滑动只是想进行点击操作的话怎么办
第二个难点：手指在接触屏幕后，接触屏幕的手指面积是逐渐增加的，但向下的增加要比其他方向的多，如果直接识别的话会被判定为下滑，应该怎么处理？
下图的动画是慢速模拟手指接触屏幕的过程。
为了解决上述的两个难点，系统会设定一个容错距离，用户的滑动位移如果在这个距离内，系统就会把手势判定为“点击”，只有当用户往某个方向的滑动位移达到或超过这个距离，系统才会判定为“滑动”。但是由于这个容错距离很小，作为用户的我们去操作时，是很难感受到这个容错距离的存在的。
基础规则讲完了，接下来针对第二种情况介绍一些负面案例，下图左是滑动前正常的角度分配，但是有时由于开发同学的失误，导致容错角度没有均分，出现下图右中触发上滑和下滑的角度极小的情况，进而导致用户在上下滑动时非常容易误操作为左滑和右滑。
比率的大小并没有绝对的优劣之分。比率越小，反馈越迟钝，但方便精准操作。比率越大，反馈越灵敏，效率高，但不方便精准操作。由于比率的这些特性，在不同的场景中会根据需求来选用合适的比率。
在现实生活中，不同车型的转向比就是一个较为典型的案例。汽车方向盘旋转1圈半只能让轮胎旋转30度左右，而赛车、卡丁车的方向盘旋转角度和轮胎的旋转角度通常是一致的。普通人使用汽车的主要目的是代步，主要诉求是舒适安全，因此选用反馈比率小的转向比能够提高容错率。而对于赛车、卡丁车这一类为竞技而设计的车型，驾驶员要随时对复杂的赛道环境做出快速的操作，因此需要使用反馈比率高的转向比提高灵敏度。
反馈比率在很多设备的交互设计中都有应用，例如我们可以设置鼠标的跟踪速度的快慢，跟踪速度越快，反馈比率越大，鼠标移动相同的距离可以控制光标移动更大的距离。
在观看视频时，对进度进行细微调整和跨度较大的调整都是用户的常见需求，因此一般做法是采用两种比率不同的操作方式来满足需求。通过拖动视频区域的热区来进行反馈比率较小的细微调整，通过拖动进度条的热区来进行反馈比率较大的大跨度调整。
热区为手势提供了可操作的区域，需要接触屏幕的手势都需要热区才能触发。合理的热区布置能够有效提高用户体验。
按钮与热区如果联系感弱，就会导致用户的疑惑。例如下面的案例，换一换的按钮热区过大，扩大到了标题区域，用户如果无意间点击标题却更换了一批内容，就可能感到奇怪。
下面的词典案例中，虽然播放按钮只是右侧的一个小图标，但是顶部由单词构成的整个区域都是可以点击的。因为点击单词与发音存在强联系，所以这样的热区扩大是合理的、联系感强的。
按钮的层级和样式如果相同，热区面积一般需要保持一致，并撑满可用空间。例如常见的tab栏上的图标。
对于高频操作，很多App会另外设计一个额外手势供用户使用，因为非单击的手势所能提供的热区远远大于按钮的热区，更加便于用户操作。例如网易云音乐的播放页会将高频功能都另外配备一个手势以此来提高操作效率。下图蓝色为按钮热区，红色为手势的热区。
如果一个操作不可撤销且存在危险性质，我们尽量不要提供热区过大的手势操作。此时我们需要用户更加专注，如果加入热区过大的手势操作可能会增加误操作的概率。
3.2热区层级
界面会存在点击类手势与位移类手势的热区重叠的情况，此时两者是平级的，因为手势差异大所以互不干扰。
当界面中存在两种点击类手势的热区重叠情况或两种位移类手势的热区重叠情况时，就会出现层级排序的问题。
在支付宝的一个猜涨跌的模块中，热区的大概分布如下图所示。整个模块整体有一个热区，点击可以进入二级页面。看涨和看跌分别有一个热区，点击可以直接选择操作，层级布置是在整体热区的上一层。
对于位移类手势，热区的层级布置更为复杂。比如以豆瓣的我的页面为例，在iOS全面屏上的横滑热区分布如下图所示。
①边缘右滑唤起侧边栏；②横滑泳道可以看更多书影音档案；③横滑底部的iOS安全区可以切换应用；④其他位置右滑可以切换tab页。
通过热区层级的观察，我们能够发现一些明显的体验问题。
通过观察热区的层级我们可以看出，歌单的横滑热区几乎覆盖了拇指的易操作区域，导致tab的横滑手势难以触发。
有书的播放页中，左边界的全局右滑返回热区在进度控件的上一层，但是进度滑块由于距离页面左边界太近，导致滑动进度滑块时很容易误操作为返回上一页。这种情况下我们可以标注一个右滑手势禁用区域给开发工程师说明情况，将此情况避免掉即可。
对于某些位移类手势，在操作时热区并不是一直保持不变的，而是分为了启动热区与调整热区。当位移类手势的起始点位于启动热区时，系统才会响应，后续操作过程中，手指不离开屏幕继续进行位移操作时系统响应的区域被称为调整热区。通常调整热区会扩大到全屏，同时禁用了界面的其他全部功能，目的主要是为了保证在后续操作过程中能够为用户提供足够大的热区增加操作舒适度，其次是为了避免用户手指一直挡住触发区域的重要信息。
05
手势的感知与记忆
用户与一个手势的交互过程是从感知到使用，最后产生记忆。上文的知识基本是关于使用层面的，对于感知和记忆层面，我们需要了解以下内容。
针对某个功能选择最自然的手势，在使用中能够代入到相应的情境，并且能够帮助用户感知和记忆，最终习得。这里提到的“自然”指的是符合文化习俗、日常习惯和现实映射。
近些年任天堂的体感游戏成功破圈，主要原因我认为是它的操作方式贴近现实映射，基本模拟了我们日常的动作习惯，让游戏非常容易上手，让之前被传统电子游戏的操作门槛拦在外面的人有了享受游戏的机会。
水果忍者这个名字你应该不会陌生，这款手游在2015年就达到了10亿次的下载量，足以看出它的受欢迎程度。在游戏中，设计师将“切”这个现实的动作通过滑动手势进行了自然的映射，进而让上到80岁的老奶奶，下到刚学会说话的孩子都能无障碍地玩儿这款游戏。
用户习得某个手势后，经过反复使用形成经验。当用户面对类似的界面时，就能快速感知到可以使用哪些手势。考虑到这种经验，在同一个场景，如果某个功能与某个手势的绑定已经成为行业通用做法，尽量沿用而不要换另一个手势。比如下拉刷新、双击点赞等。
如果违背了逻辑，就容易与用户的心理模型不相符，用户就会感觉到混乱和不适。
举一个反例，Uki的个人主页可以通过点击或下拉底部的浮层收起更多信息，但是收起后即使浮层仍保留在界面的情况下只能通过点击展开更多个人信息而不能上拉。
用户在感知某个功能使用哪个手势的过程中，首先会使用经验来判断。但是当选用的手势无法让用户通过经验感知到时，我们需要使用合理的引导来教育用户。
有引导就会有强弱，是强是弱要取决于功能的重要级。
强引导一般是模态的浮层，会打断用户当前的操作，虽然保证了用户一定会注意到，但是也会让用户厌烦地跳过而忽略内容。
iPhone一代经典的滑动解锁，按钮上的向右箭头和暗文“滑动以解锁”的引导文案都再提示用户如何使用。
还有一类弱引导，以隐喻来帮助用户感知到应该使用的手势。例如常见的泳道设计，会在最后露出截断的内容暗示用户左滑可以看更多内容。（如下图红框区域）
当某个点击操作触发了内容的平移动画，那么这个平移动画会暗示用户可以通过左右滑动来操作。比如切换Tab、左右滑动翻牌等。
5.2.1操作前
当产品中设计了不容易感知的新手势，在用户操作前，通过引导让用户了解和学习新的手势。大部分的手势引导都在这个时机。
5.2.2操作中
当某个手势可以分阶段触发不同功能时，在用户正在操作第一阶段时给予第二阶段的引导非常适时且容易被注意到。
下拉进入二楼是淘宝最先使用的创新手势，根据下拉的两种距离来触发刷新和二楼。二楼不是一个常用功能很难被发现，但是由于存在下拉刷新这个第一阶段的手势，可以在用户进行刷新时进行提示引导，告知用户二楼的存在。
5.2.3操作后
对于一些与用户的心理模型和习惯不一致的手势，提前预测用户可能输入的错误手势，在用户错误操作后进行提示，规范用户的操作方式。如下图，由于知乎旧版本是通过左右滑动切换回答的，新版本调整为上下滑动后，需要纠正用户使用习惯。因此，当用户仍然使用左右滑动时，会出现浮层提示用户正确的手势。
06
手势与传感器
陀螺仪可以测量沿一个轴或几个轴动作的角速度，跟踪并捕捉3D空间的完整动作，应用非常广泛，特别是在体感游戏的设计中发挥了很大作用。很多产品设计利用陀螺仪可以进行一些拟真的设计。例如FIMO相机里的胶卷会跟随手机的倾斜而产生旋转。
锤子科技在坚果Pro2的发布会上提出的“无限屏”功能也是基于陀螺仪等传感器的一次勇敢的创新，但是在体验层面用户褒贬不一。
姿态感应器是基于MEMS技术的高性能三维运动姿态测量系统。华为隔空手势就是利用这个技术实现了不接触手机进行操作。
07
手势的创新
“它太强大了，像魔术一样！”2007年9月1日，伴随着阵阵惊呼，乔布斯向观众展示了初代iPhone的多点触控技术并发出这样的赞叹。
去掉臃肿复杂的实体键，以简单自然的手势作为替代。在苹果手机一代发布会当晚，滑动解锁、上下滑动滚动列表、倾斜手机进入横屏模式、双指缩放等等创新手势让我们印象深刻，其中的大部分一直被我们沿用至今。
如何定义创新手势呢？我认为有两个层面，从0到1的创新和从1到1.1的创新。苹果手机一代发布时展示的交互手势属于从0到1，让交互手势从无到有。如今我们做得比较多的是从1到1.1的创新，主要体现为使用已存在的手势与某个功能结合后，体验出色且与过往的解决方案有足够差异。比如，下拉和上下滑动都是已经存在的手势，但是Tweetie将下拉与刷新结合、Musical.ly（国际版抖音前身）将上下滑动与切换视频结合，都为用户带来了更好的体验，因此属于1到1.1的创新手势。
08
总结
断断续续一年多终于把手势系列更新完了，希望以上我对于交互手势的全部思考能够帮助你建立基础的认知，为你在实际工作中提供参考。手势的设计或选用没有标准答案，需要我们根据实际情况进行思考和取舍后做出判断，然后在一次次的实践中不断强化自己的判断力。