手势 组合 功能 我们将常规的基础通用手势进行打散重组、结合实践案例梳理出组合手势设计模型，探索如何在视频场景中构建便捷高效的进阶手势体验。手势设计干货：超多案例！交互手势全解析（三）：多指类和组合类多指类手势之前的文章讲解位移类手势和点击类手势的时候，提到过不同的描述维度会让手势产生不同的变种，比如触发时机、 按下次数、 阈值类型等。阅读文章 > 一、前言视频播放器中承载着极其丰富的内容画面和播控功能，尤其是在寸土寸金的移动端视频播放器中，为使内容更沉浸消费，需尽可能克制界面中的功能元素/入口直接外露。基于此种场景下，合理的手势设计不但可为界面“减负”，还可帮助用户更快捷触达功能、提升操控便捷性。视频场景中目前已有部分的常规单向手势已被用户广泛接受并形成习惯认知，如「单击 暂停」、「双击点赞」、「长按快进」、「横滑导航」、「纵滑切视频」、「双指捏合缩放视窗」等通用手势。那么如何在保留用户对于常规通用手势认知的基础上，进一步对视频场景中的手势交互进行扩容升级？这也是我们接下来在手势进阶交互上的重点探索方向。本次针对百度 APP 中的视频播放器场景，为提升手势操控效率，我们试图将常规的基础通用手势进行打散重组、并结合实践案例梳理出「组合手势」设计模型，以探索如何在视频场景中构建便捷高效的进阶手势体验设计。二、什么是「组合手势」「组合手势」是基于常规手势的组合扩展，其通常由两种或两种以上的常规基础手势所构成，若组合方式及使用场景得当，可助力用户更便捷的触达功能。以前述的视频场景常规手势为例，其触发机制一般可分为两个阶段：step1 交互信号 step2执行任务，即用户通过某一基础手势发出交互信号，系统收到信号确认后便可立即执行任务，但整个过程是线性的，手势扩展性十分有限且难以满足视频场景对于手势扩容的诉求。于是我们在现有常规手势两阶段触发机制的基础上，尝试引入「意图识别」环节，并梳理出「组合手势」的设计模型，以探索不同基础手势相互组合后的扩展可行性。「组合手势」触发一般可分为三个阶段：step1 交互信号step2意图识别step3执行任务，前两阶段均可由对应的基础分支手势构成并进行组合搭配、以寻求最高效的手势组合触发路径。由于「组合手势」并不像常规手势那样早已被系统定义为可供直接调用的接口，因此，其差异化创新具有较大设计灵活度，尤其需根据具体的使用场景进行综合考量。三、「长按组合手势」激活快捷菜单1. 项目背景百度 APP 视频场景早期的播控功能较少，如“视频下载”等个别特色功能入口一般都融合于基础菜单之中。随着后续视频场景的功能建设日渐完善，我们便在基础菜单面板中拓展了一行视频菜单，专门用于承载视频场景特有的播控功能。但当前播控功能已达 10 余项，菜单面板弹出后还需左滑才可露出后面的功能入口，因此也常收到用户反馈找不到常用功能、菜单面板功能排布无章且触发成本高。2. 竞品调研及选型通过对竞品进行调研，我们发现竞品均有使用长按手势作为切入口以触发相关播控功能、并归纳出“视频播控触发”目前主流的三种长按交互选型， 分别为：长按触发独立播控面板、长按触发浮层播控选项、长按触发特定播控功能。选型 A「长按触发独立播控面板」：通过长按手势可激活从屏幕底部弹出的独立播控面板，此方案扩展性较强，但对视频沉浸观感体验有一定的打断感；选型 B「长按触发浮层播控选项」：通过长按手势可触发置于视窗上层的浮层选项入口，一定程度上可延续视频观看的沉浸体验，但浮层扩展性有限；选型 C「长按触发特定播控功能」：通过长按手势触发特定的某个播控功能（如长按“快进”），一定程度上可满足此功能的重度用户，但对于长按手势的使用效率较低；3. 设计方案① 长按手势交互扩容针对目前视频播控菜单存在的问题，经过和业务对上述三种长按交互选型方案进行综合考量，最终决定聚焦于以方案“选型 B”的「长按触发浮层播控选项」作为设计切入点。我们意图将部分高频播控功能从基础菜单中拿出进行前置，并探索一套更便捷的触发机制，以此对视频场景中的播控菜单进行设计升级。但随之而来的难点是我们目前播放器中的长按手势已被“快进”功能占据，用户对此功能的使用频率高、并已形成较深的操控认知，若直接下线“快进”功能则会对用户使用习惯产生较大影响，尤其是视频场景的重度用户。那么如何在兼容用户已有长按操作习惯的基础上再拓展“快捷菜单”呢？是否有可能将“快进”和“快捷菜单”进行融合？这也是本次项目对于便捷手势体验的重要设计探索点。基于此，我们决定尝试使用「组合手势」设计模型来对视频播放器中的长按手势进行重新定义，通过「长按+滑选」的机制触发快捷菜单功能项，以缩短视频常用功能路径。对应到设计模型的三个阶段分别为：step1：以“长按手势”创建一个新模式，即发出交互信号并唤出浮层菜单；step2：若用户未松开手指，则系统默认开始识别用户意图，是否有以“拖拽手势”滑选至目标功能项以选择功能；step3：用户滑选锚定至目标功能后，松手释放即可完成最后的功能执行确认。「长按+向上滑选」快捷触发对应功能项；「长按+向下滑选」快捷触发“快进”（一定程度上兼容老用户对于此功能的使用习惯）。② 容错性兼容在设定「长按+滑选」组合手势的同时，考虑到兼容主流的长按习惯、以及对于滑选手势需要有一定的适应过程，我们同时也支持点选的操作模式，即用户长按后若未产生滑选行为便松手，则松手后依然可通过点选的方式触发对应播控功能项。③ 易用性打磨差异化的创新设计形式在前期总会面临质疑和挑战，本次项目也不例外。我们担心用户能否接受并认知「长按+滑选」组合手势的操作形式，于是在 DEMO 开发完成后便进行了一次小范围内的定性可用性测试，以预期在上线前可先收集一波体验问题进行快速打磨优化。我们根据测试目标、用户类别、测试前序准备及测试步骤等环节提前拟好必要的测试脚本，并邀请了 10+名不同年龄段的目标用户进行访谈测试。测试访谈的过程中，被测用户在进行 1 至 2 次尝试操作之后，均可掌握如何使用「长按+滑选」的组合手势，这也为我们增添了不少信心。同时，我们通过观察用户操作行为及用户主动反馈，发现仍有部分易用性细节可进一步打磨优化。扩展触发热区：考虑到单手握持手机的使用场景，可尽可能扩大定义长按手势的触发热区，屏幕中除顶/底 bar 框架区以及本身就自带长按事件的按钮入口之外，其它大面积区域热区均可支持长按触发快捷菜单，以降低触发难度、提升易用性。支持跟手触发：长按后浮出的快捷功能项，其浮出位置支持跟随手指的纵向触发位置而浮出，可减少手指在屏幕上的位移距离、操控更便捷。实时提示及响应反馈：灵活判断当前手势触控状态（如滑入选择 / 松手触发），在界面中即时给出相对应的引导提示或振感反馈，以帮助用户快速适应新的手势触发机制。方案上线及验证以 AB 实验对本次设计方案进行定量测试验证：「对照组」效果：长按触发“快进”（各播控功能入口仍归置于基础菜单面板之中）；「实验组」效果：长按触发“快捷菜单”选项（支持滑选和点选模式）；小流量实验上线后，经过近半个月的观察，大盘指标稳定、播放完成率等满意度指标稳步提升。「实验组」长按快捷菜单中的功能使用率相对「对照组」均有大幅提升，说明用户对部分高频功能的确有很强的快捷触发诉求。「实验组」的“快进”虽多了一步触发步长，实验前期“快进”使用率不及「对照组」，但随着用户对于「长按+滑选」手势整体的使用占比持续走高，通过滑选触发“快进”的操作习惯也快速被培养起来，对于用户来说，长按快捷菜单带来的整体收益是大于折损的。二期扩展方案随着长按快捷菜单的上线推全，长按手势的渗透率也持续走高，用户逐渐对视频场景更多的播控功能有了长按触发的诉求，于是我们对长按菜单进行了二期的设计升级，在长按浮层最右侧新增“更多”快捷入口以承接视频场景所有的播控功能，用户通过长按后的可选播控项增多，播控功能整体的使用量得到进一步提升。四、「组合手势」拓展探索手势交互是用户在现实世界行为的映射，无论是基础手势还是组合类高级手势，都须符合用户认知习惯、并融入具体的使用场景中进行设计。以「组合手势」设计模型为指导基础、并结合具体的项目实践，我们进一步对视频播放器中更多功能场景进行了便捷手势的设计扩容探索。1.「右滑返回手势」激活“小窗播放”“小窗播放”旨在退出当前视频落地页、并可将当前视频切换成以悬浮视窗的形式进行延续消费。基于用户的此种操控意图，我们以“右滑返回手势”发出交互信号而触发浮出小窗入口，随后系统根据用户“纵向拖拽手势”的行为来判断其是否有激活小窗的意图，若有短距上滑拖拽行为，松手释放即可快捷激活视频小窗，以提升观看体验的连续性。2.「双指手势」激活“满屏播放”“双指拖拽手势”可拖拽并清屏视窗画面，以此手势发出交互信号，若在“双指拖拽手势”基础上有识别到“双指扩张手势”行为，则松手释放即可快捷激活“满屏播放”，以满足更沉浸视频浏览体验。五、结语便捷手势的设计出发点是为提升操控效率、缩减功能触发路径，从而使视频内容更沉浸消费。希望本次基于视频播放器场景的手势体验设计实践能给大家带来帮助和启发，后续我们也将持续深耕视频领域、并进一步探索更贴合用户使用场景的手势交互体验。本篇来源：优设网原文地址：https://www.uisdc.com/baidu-video-gestures-design
手势 多指 功能 多指类手势之前的文章讲解位移类手势和点击类手势的时候，提到过不同的描述维度会让手势产生不同的变种，比如触发时机、 按下次数、 阈值类型等。我们同样也可以把使用手指的数目看做是一个描述维度，使用的手指数目不同也会产生不同的手势变种，有着不同的应用方式。万字干货！交互手势全解析（一）：位移类手势前言一年前更新了文章《交互手势的容错性和逻辑性》之后，有很多读者朋友询问是否能够做一个详细的讲解交互手势的系列文章，讲解每个手势的不同之处、应用场景以及在工作中如何使用。阅读文章 > 6000字干货！交互手势全解析二：点击类手势点击类手势的描述维度与位移类手势类似，点击类手势也存在着自己的描述维度，它们分别是触发时机、点击次数和时间限制，三者的变化同样会产生不同的变种。阅读文章 > 使用多指类手势的原因主要有两个：① 单个界面对于手势的需求量比较大。当可用的单指类手势都已经被占用后，通过引入多指的维度来扩充手势，从而满足设计需要，避免产生手势冲突；② 系统级的全局手势通常使用多指类手势来尽量避免与第三方App的手势冲突。全局手势如果设计得过于简单很容易引发手势冲突。例如一加手机的某个系统版本中，有一个全局手势是单指连续点击三次触发页面缩放，对于非游戏类的 App 来说基本没有这个手势，不必担心误操作，但是对于游戏类 App 而言，连续点击屏幕上的攻击键是一个很常用的操作，连续点击三次触发页面缩放的设计导致用户游戏过程中极易不小心触发了页面缩放。iOS 系统的做法很巧妙，在点击次数外增加了手指个数的维度，通过三指双击才能够触发页面缩放，从而基本解决了手势冲突问题。1. 多指点击特点多指点击同样有点击次数、触发时机和时间限制这些描述维度，它们的变化会给多指点击带来不同变种。在 App 中多指点击常见的变种一般有多指单击、多指按下，而像多指双击、多指长按这一类更复杂的变种较为少见，一般仅用于系统级的全局手势。案例在 iOS 的短信 App 中，可以通过「双指按下」快速选中一个短信。在 iOS 的设置中开启缩放功能后，任何页面都可以通过「三指双击」触发页面缩放。2. 多指位移特点多指位移同样有控制方式、稳定化效果、以及阈值类型这些描述维度，它们的变化可以实现多指轻扫、多指拖拽、多指甩动这些效果。多指位移通常用来移动受控物或触发某个功能。案例在 iOS 的短信 App 中，可以通过「双指拖拽」快速多选短信。在网易云音乐的播放页，向下「双指轻扫」可以触发黑胶背后的故事。在笔记应用 GoodNotes 中，浏览模式下可以通过「单指甩动」浏览页面，但是当进入编辑模式时，为避免手势冲突，单指甩动会变为「双指甩动」。3. 多指缩放特点多指缩放与多指位移比较相近，不同之处在于多指缩放的手指移动方向是以某一个点为中心进行汇聚或分散。控制方式、稳定化效果、以及阈值类型这些描述维度同样适用于多指缩放。案例iPad 可以通过「四指缩小」快速退出应用。iOS 的照片 App 中，可以通过「双指缩放」缩小或放大照片。网易云音乐可以通过「双指缩小」触发抱一抱彩蛋。4. 多指旋转特点多指旋转可以看做是以多指的中心为圆心，通过多指的移动来模拟出围绕这个圆心做旋转的手势。它是对物理世界几乎 100% 的映射，因此一般用于旋转某个物体，调节旋钮等操作。案例iOS 的照片 App 中，可以通过「双指旋转」转动照片。5. 多指特殊手势有一类特殊的多指手势可以支持更复杂的交互，一般为系统级手势。例如 iOS 中长按桌面的 App 后进行拖拽时，可以同时点击其他 App 一起进行拖拽。组合类手势组合类手势由两个或两个以上的手势组成，因此隐蔽性较强，如果不进行引导很难被用户发现，也是由于这种特性，它所触发的功能一般有其他更明显的入口或操作方式，使用它通常是为了增加高频功能的操作效率，服务于专家型用户。组合类手势之所以能够提高效率，是因为它把用户平时需要通过多个步骤才能完成的操作简化为了短时间即可完成的手势组合。虽然初次使用有一定学习成本，但是一旦用户形成肌肉记忆，操作过程会非常快速。因为组合类手势更加多变，且系统并未直接提供这类手势给设计师调用，需要设计师自己根据需求来组合搭配，因此很考验设计师的创新能力。之后的案例展示仅为常见的用法，并不是全部。通过举一反三，我们也可以设计出不同与本文中的案例但更满足需求的组合类手势。1. 设计模型下面这个表格里的模型是总结常见的组合类手势而设计的，能够涵盖绝大部分的设计需求，但仅适用于单指的组合类手势设计。模型将组合类手势的操作过程分为启动、调整和触发三个阶段。每一阶段由一个分支手势构成。比如在第一阶段中，可以选用的手势有长按、双按、轻扫 B。并不是只能选用这三个，而是它们三个作为第一阶段的分支手势体验良好且最常用。①启动阶段的目的是创建一个新模式，在新模式下，界面原有的手势会失效，系统只能响应②调整阶段的手势，可以选用拖拽和轻扫E。在③触发阶段可以进行抬起、停留来触发最后的功能，如果选择「无操作」，则说明手势在②调整阶段已经达到目的，不需要③触发阶段的手势。仅解释这个模型可能比较难理解，下面会用一些案例进行演示。2. 常见案例长按+轻扫 E+抬起特点通过长按激活一个控件，在手指不离开屏幕的情况下将手指移动到某个功能选项的位置上，然后通过抬起触发该功能。功能选项一般出现在手指的附近，从而方便下一步操作。案例花瓣 App 中长按某个图片后可以快速进行收藏等操作。长按+拖拽+停留特点通过长按激活一个控件，在不松手的情况下将手指拖动到控件的某个功能选项的位置上，然后停留特定时间触发该功能。案例在京东读书 App 中，需要跨页选择文本时，需要长按后拖动手指至页面左下角后，停留一段时间进行翻页。在 iOS 桌面长按图标将其拖动到边界，停留一段时间后可以将图标移动到下一页。为什么上面两个案例在触发阶段使用停留而不是抬起？因为完成了触发阶段的操作后手指仍然需要对受控物保持控制状态，此时不能松开手指，因此这种情况下操作的触发手势使用停留更合适。轻扫 B+轻扫 E+抬起特点通过轻扫 B 激活一个控件，在不松手的情况下将手指往某个方向移动来选中某个功能选项，然后通过抬起触发该功能。案例Chrome 浏览器中，下拉页面后将手指左右移动并抬起可以触发其他功能。双按+拖拽定义当一个界面中，上下左右四个方向都已经存在位移类手势了，但是仍然有功能需要新增额外的位移类手势。此时可以将双按看做是一个模式启动，双按后可以立即使用拖拽来触发相应功能。案例地图类 App 中，可以通过双按后手指不离开屏幕往上拖拽来放大地图，往下拖拽来缩小地图，从而解决了单手操作时难以放大缩小地图的问题。不足之处在于，这个手势的教育成本较高，只有少部分用户能够发现并持续使用。3. 根据使用场景进行分类上文依据操作方式将案例进行了分类。实际上在设计过程中，使用场景分类更能便于我们去选择适合的手势。我将组合类手势通过使用场景的区别分为了四类，它们分别是 ①单个属性的调整、②多个功能选其一、③默认选择主要功能、④同时进行两项操作。由于下面案例的手势在上文已经进行了介绍，所以不做赘述仅罗列更多案例帮助理解。单个属性的调整单个属性可以是亮度、大小、位置等，通过双按或长按启动模式后，再使用拖拽来进行调整。双按+拖拽每个地图 App 基本都支持这个手势，双按后通过拖拽来对地图大小进行调整。（上文有动图示例，这里不再重复展示）长按+拖拽在快手 App 的拍摄界面中，长按拍摄键后上下拖拽可以调整取景框的大小。多个功能选其一通过长按唤起功能菜单，在手指不离开屏幕的情况下移动到某个功能后抬起触发该功能。长按+轻扫 E+抬起在 iOS 的桌面长按 App 的图标可以唤起更多功能菜单，移动手指到某个功能后抬起可触发该功能。默认选择主要功能使用长按或轻扫 B 后可以直接松手默认触发主要功能，但如果保持手指不离开屏幕使用轻扫 E，则可以选择其他次要的功能，然后抬起触发。长按+轻扫 E+抬起微信录制完语音后，抬起默认会触发发送语音，也可以通过移动手指到「取消」或「转文字」上来触发另外两个较为低频的功能。轻扫 B+轻扫 E+抬起下面是一个概念案例，来自于一本交互设计相关图书《交互设计语言》，非常推荐阅读。在下图案例中，手势的目的是解决微信的多层级导致的返回步骤过多问题。右滑页面后如果直接松手会返回上一页，但是如果上下移动则可选择其他层级的页面，抬起后进行跳转。同时进行两项操作部分场景中，长按后手指需要保持接触屏幕的情况下同时操作两个功能，由拖拽和停留分别操作。长按+拖拽+停留暂无更多案例展示，可以看上文的京东读书 App 选中更多文字的同时进行翻页、在 iOS 桌面拖动图标的同时进行翻页的案例，在这里就不重复展示了。以上就是关于多指类和组合类手势的思考总结，后续暂定的更新计划如下。有兴趣的朋友可以持续关注哦~4000字干货！交互手势全解析：描述维度交互手势的描述维度是什么？阅读文章 > 欢迎关注作者微信公众号：「设成于思」本篇来源：优设网原文地址：https://www.uisdc.com/parses-interaction-gestures
手势 操作 位移 交互手势的描述维度是什么？在这里我们将其简单定义为影响一个交互手势呈现效果的变量。在之前的文章中，提及过的描述维度包括稳定化效果、控制方式、阈值类型、时间限制、按下次数、触发时机，但它们的都是一些较为显性的描述维度，确定了某个手势的基本框架。本文主要讲解之前未提到的较为隐性的描述维度，它们同样影响着用户的操作体验，包括角度与方向、反馈比率、热区。下面将逐一介绍。万字干货！交互手势全解析（一）：位移类手势前言一年前更新了文章《交互手势的容错性和逻辑性》之后，有很多读者朋友询问是否能够做一个详细的讲解交互手势的系列文章，讲解每个手势的不同之处、应用场景以及在工作中如何使用。阅读文章 > 6000字干货！交互手势全解析二：点击类手势点击类手势的描述维度与位移类手势类似，点击类手势也存在着自己的描述维度，它们分别是触发时机、点击次数和时间限制，三者的变化同样会产生不同的变种。阅读文章 > 角度与方向角度与方向的知识在「交互手势全解析之位移类手势」中简单地讨论过一些，在这里会讲解地更详细。位移类手势的方向一般为上下方向或左右方向，或者二者兼有之，但是想要触发操作，手指移动方向并不需要完全垂直或水平，默认会有一个容错角度。当某个界面或模块仅支持上下方向或左右方向的位移类手势时，如下图所示，360 度会 1：1 均分，每个方向有 180 度的容错角度，只要在角度范围内滑动，都可以触发相应操作，但需要注意的是在仅支持上下方向滑动时，如果完全水平方向去滑动，则不会触发任何操作，反之亦然。虽然说角度的容错范围很大，但是滑动时离预期方向的角度偏离越大，单位长度产生的有效位移距离就会变少。例如下图中，在一个只能上下滑动的页面，垂直上滑和偏移上滑相同距离产生的有效位移是不同的，垂直上滑的效率明显更高。当上下滑动和左右滑动同时存在于一个页面或模块时，会出现两种情况。第一种情况是被滑动的内容除上下左右外可以往更多方向移动，例如滑动照片或地图查看更多细节（如下图所示），是允许用户自由地朝任意方向滑动的。第二种情况是，在单次操作中，只有上下或左右方向的滑动需求。360 度会 1：1：1：1 均分，每个方向有 90 度的容错角度。在这种情况，上滑时手指滑动方向只要左右偏移不超过 45 都会被判定为上滑，如下图所示。对于这第二种情况，系统需要处理以下两个问题。问题 A：如果在上下滑过程中进行左右滑动的操作，系统如何判定？一般我们是不希望用户在一次操作中同时进行上下滑动和左右滑动的。系统如果判定某次滑动为上下滑动，为了避免误操作，在本次滑动结束前（滑动结束的定义：手指离开屏幕并且受控物停止移动或停止其他属性变化），左右滑动会被完全禁用，而且左右滑动的容错角度会临时分配给上下滑动，如下图所示。例如，在 iOS 信息列表中，左右滑动可以唤起更多操作，上下滑动可以滚动页面，但是一旦进入上下滑动的过程中，不松手的情况下左右滑动唤起更多操作就被完全禁用了，且左右滑动的容错角度会临时分配给上下滑动。问题 B：系统是如何在某一次滑动时判定我们是想要上下滑动还是左右滑动呢？系统给予我们自然的使用体验背后是复杂的判定过程。判定的难点有两个，第一个难点：手指在操控屏幕时并不是一个稳定的状态，接触屏幕的一瞬间很容易抖动。抖动的方向也是不确定的，这个抖动需要判定为滑动吗？如果用户并不想滑动只是想进行点击操作的话怎么办?第二个难点：手指在接触屏幕后，接触屏幕的手指面积是逐渐增加的，但向下的增加要比其他方向的多，如果直接识别的话会被判定为下滑，应该怎么处理？下图的动画是慢速模拟手指接触屏幕的过程。为了解决上述的两个难点，系统会设定一个容错距离，用户的滑动位移如果在这个距离内，系统就会把手势判定为“点击”，只有当用户往某个方向的滑动位移达到或超过这个距离，系统才会判定为“滑动”。但是由于这个容错距离很小，作为用户的我们去操作时，是很难感受到这个容错距离的存在的。基础规则讲完了，接下来针对第二种情况介绍一些负面案例，下图左是滑动前正常的角度分配，但是有时由于开发同学的失误，导致容错角度没有均分，出现下图右中触发上滑和下滑的角度极小的情况，进而导致用户在上下滑动时非常容易误操作为左滑和右滑。网易云音乐也曾有过类似的遗留问题，iOS 端的播放页上滑调出评论页极易误操作为左右滑动黑胶切歌（下图 A，现已修复），安卓端的账号侧边栏上滑浏览极易误操作为左滑收起侧边栏（下图 B ）。因此，在验收阶段，角度的容错性检查也是重要的一环。因此在验收时间充裕的情况下，可以切换不同的手持方式分别体验一次，因为有些问题只有在特定的手持方式下才容易被发现。反馈比率之前提到过施控物（施加控制的一方）和受控物（被施加控制的一方）的概念。比率是受控物的某个属性变化与的施控物某个属性变化的比值。为了更好地理解这个概念，在这里举个例子。如下图，在网易云音乐的播放页和微信小程序页面边缘右滑一个固定距离时，页面的下降距离是不同的，网易云音乐播放页的下降距离大约只有微信小程序页面的一半，我们可以认为对于这个交互，网易云音乐的反馈比率是微信小程序的一半。比率的大小并没有绝对的优劣之分。比率越小，反馈越迟钝，但方便精准操作。比率越大，反馈越灵敏，效率高，但不方便精准操作。由于比率的这些特性，在不同的场景中会根据需求来选用合适的比率。例如在现实生活中，汽车方向盘和卡丁车的把手就是一个较为典型的案例。汽车方向盘旋转 1 圈半只能让轮胎旋转 30 度左右，而卡丁车的方向盘旋转角度和轮胎的旋转角度是一致的。这样设计的主要原因是：汽车的行驶速度较快，任何微小的转向都会产生较大的偏差，因此需要更精准的操作。卡丁车速度较慢，而且调节方向盘时还能直观地看到轮胎的旋转变化，因此将反馈比率设计较大更合适。反馈比率在很多设备的交互设计中都有应用，例如我们可以设置鼠标的跟踪速度的快慢，跟踪速度越快，反馈比率越大，鼠标移动相同的距离可以控制光标移动更大的距离。在观看视频时，对进度进行细微调整和跨度较大的调整都是用户的常见需求，因此一般做法是采用两种比率不同的操作方式来满足需求。通过拖动视频区域的热区来进行反馈比率较小的细微调整，通过拖动进度条的热区来进行反馈比率较大的大跨度调整。热区热区为手势提供了可操作的区域，需要接触屏幕的手势都需要热区才能触发。合理的热区布置能够有效提高用户体验。1. 热区大小更大的热区可以减少用户瞄准所花费的时间，减少触发失败的概率。热区的大小不一定等于按钮的大小，当某个按钮在视觉上设计得比较小时，为了方便用户操作，我们可以将热区合理地设计大一些。例如下图的 App Store 应用详情页中，视觉上按钮虽然很小，但是点击热区却设置得很大。按钮与热区如果联系感弱，就会导致用户的疑惑。例如下面的案例，换一换的按钮热区过大，扩大到了标题区域，用户如果无意间点击标题却更换了一批内容，就可能感到奇怪。下面的词典案例中，虽然播放按钮只是右侧的一个小图标，但是顶部由单词构成的整个区域都是可以点击的。因为点击单词与发音存在强联系，所以这样的热区扩大是合理的、联系感强的。按钮的层级和样式如果相同，热区面积一般需要保持一致，并撑满可用空间。例如常见的 tab 栏上的图标。对于高频操作，很多 App 会另外设计一个隐藏手势供用户使用，因为手势所能提供的热区远远大于按钮的热区，更加便于用户操作。例如网易云音乐的播放页会将高频功能都另外配备一个手势以此来提高操作效率。下图蓝色为按钮热区，红色为手势的热区。2. 热区层级界面会存在点击类手势与位移类手势的热区重叠的情况，此时两者是平级的，因为手势差异大所以互不干扰。当界面中存在两种点击类手势的热区重叠情况或两种位移类手势的热区重叠情况时，就会出现层级排序的问题。在支付宝的一个猜涨跌的模块中，热区的大概分布如下图所示。整个模块整体有一个热区，点击可以进入二级页面。看涨和看跌分别有一个热区，点击可以直接选择操作，层级布置是在整体热区的上一层。对于位移类手势，热区的层级布置更为复杂。比如以豆瓣的我的页面为例，在 iOS 全面屏上的横滑热区分布如下图所示。①边缘右滑唤起侧边栏；②横滑泳道可以看更多书影音档案；③横滑底部的iOS安全区可以切换应用；④其他位置右滑可以切换tab页。通过热区层级的观察，我们能够发现一些明显的体验问题。在 QQ 音乐的首页，页面可以通过横滑切换 tab，同时歌单可以通过横滑查看更多。歌单的滑动热区位于横滑 tab 热区的上一层。通过观察热区的层级我们可以看出，歌单的横滑热区几乎覆盖了拇指的易操作区域，导致 tab 的横滑手势难以触发。有书的播放页中，左边界的全局右滑返回热区在进度控件的上一层，但是进度滑块由于距离页面左边界太近，导致滑动进度滑块时很容易误操作为返回上一页。这种情况下我们可以标注一个右滑手势禁用区域给开发工程师说明情况，将此情况避免掉即可。3. 热区的启动热区与调整热区对于某些位移类手势，在操作时热区并不是一直保持不变的，而是分为了启动热区与调整热区。当位移类手势的起始点位于启动热区时，系统才会响应，后续操作过程中，手指不离开屏幕继续进行位移操作时系统响应的区域被称为调整热区。通常调整热区会扩大到全屏，同时禁用了界面的其他全部功能，目的主要是为了保证在后续操作过程中能够为用户提供足够大的热区增加操作舒适度，其次是为了避免用户手指一直挡住触发区域的重要信息。例如，iOS 的控制中心中，在音量控件区域上下拖动可以调节音量大小，拖动过程中将手指移出音量控件区域继续上下拖动仍然可以继续调节。这样的设计可以避免手指挡住控件造成无法直观看清音量大小的问题。再进行一个案例对比，QQ 音乐和网易云音乐的播放条都支持左右滑动切歌，但是整体体验上有一些差距。在面积大小层面，QQ 音乐的启动热区与网易云音乐的启动热区是基本相同的，但是 QQ 音乐的调整热区是全屏，而网易云音乐的调整热区仍然和启动热区一致。这样导致的问题是，用户在使用网易云音乐时，如果左右滑动播放条的过程中手指无意间超出了启动热区就会导致本次操作无效，影响使用体验，而 QQ 音乐没有这个问题。以上就是关于描述维度的思考总结，后续暂定的更新计划如下。有兴趣的朋友可以持续关注~欢迎关注作者微信公众号：「设成于思」本篇来源：优设网原文地址：https://www.uisdc.com/interaction-gestures
按下 手势 单击 点击类手势的描述维度与位移类手势类似，点击类手势也存在着自己的描述维度，它们分别是触发时机、点击次数和时间限制，三者的变化同样会产生不同的变种。我们首先了解一下这三个维度。万字干货！交互手势全解析（一）：位移类手势前言一年前更新了文章《交互手势的容错性和逻辑性》之后，有很多读者朋友询问是否能够做一个详细的讲解交互手势的系列文章，讲解每个手势的不同之处、应用场景以及在工作中如何使用。阅读文章 > 1. 点击次数第一个维度是点击次数。常见的点击类手势只需要单击即可触发操作。但是有时为了在有限的界面空间中拓展更多的功能，会增加一个多次点击（后续简称为“多击”）才可触发的功能。例如抖音的单击触发暂停短视频播放，双击触发点赞。点击次数超过 2 次的功能非常少见，因为点击次数越多，相应的教育用户的成本越高。落点是一个会影响系统区分单击和多击的因素，它指的是手指进行点击操作时在屏幕按下的位置。进行第一次点击后，落点周围会生成一个范围，第二次点击的落点需要处于前一个落点周围生成的范围内，只有这样才能形成一次有效的双击，否则就会形成两次单击。多击的判断规则以此类推。生成的范围可以调用直接系统提供的默认值，一般不需要设计师提供。2. 触发时机点击类手势可以在两个时机触发操作，分别是手指按下时和释放时。按下时触发由于不能通过将手指移出热区进行反悔回退，从而缺乏掌控感，但是对于撤销成本低的操作可以使用它提高效率。释放时触发能够通过将手指移出热区进行反悔回退，掌控感强。在 Smartisan OS（锤子科技基于 Android 深度定制的手机系统）的电话 App 中点击数字进行拨号时，触发时机就是「按下时」，但选中一个数字后无法通过将手指移出热区进行撤销。释放时触发过于常见，就不举例赘述了。绝大多数点击操作都是释放时触发，反而是按下时触发的案例非常罕见。前文提到“按下时触发由于不能通过将手指移出热区进行反悔回退，从而缺乏掌控感”。实际上当满足一些特殊条件时，按下时触发也是能够通过将手指移出热区进行反悔回退的。这些特殊条件包括：①点击操作对页面造成的变化较小；②操作结果的撤销成本较小；③同一热区不存在滑动操作。如何理解这些条件呢？下面我们逐一分析。①点击操作对页面造成的变化较小如果点击操作对页面造成的变化较大，就可能会导致原热区消失或被遮挡（如下图），很难让用户建立移出热区进行返回回退的认知。②操作结果的撤销成本较小按下后触发会导致手指一旦按下到按钮后操作立刻生效，如果是支付类，就会面临极高的撤销成本，所以使用按下时触发时，允许通过手指移出热区进行反悔回退的功能必须是轻量的、撤销成本低的。③同一热区不存在滑动操作这个很好理解，如果同一热区存在滑动操作，就会导致为了撤销进行的滑动和其他滑动操作产生冲突。iOS 的锁屏页面输入密码操作虽然是按下时触发（如下图），但是能够通过将手指移出热区进行反悔回退，它是同时满足上述的三个条件的。按下时触发很少被应用，且绝大多数情况可以使用释放后触发替代，因此大家对这部分知识仅做了解即可，日常设计时默认仍然选择释放时触发。3. 时间限制时间限制一般出现在多击和长按两种情况。当手势为多击时，为了与单击进行区分，系统会设置一个时长阈值。如果下一次单击距离上一次单击的时长超过了这个阈值，多击就会被判定为多次单击。如下图的微信中对头像的点击案例所示，在第一次单击后在时长阈值内如果没有检测到第二次单击，那么系统就会将本次手势的操作结果判定为跳转到更多操作页。如果在第一次单击后在时长阈值内检测到第二次单击，那么系统就会将本次手势的操作结果判定为拍一拍。当单击和多击可以作用于同一个热区实现两个不同功能时，系统会延迟对单击的反馈来检测可能存在的下一次单击，从而导致用户在使用单击所触发的功能时会感觉到反馈的拖沓感和延迟感，例如上图微信的单击头像进入更多操作页和双击拍一拍的同时存在，导致单击进入更多操作页时反馈有一个很明显的 0.5s 的延迟。大部分用户对这个延迟可能并不会留意，但是对少部分追求效率的部分用户来说还是影响了体验。当面向特定的用户群时，这个延迟的数字可以做相应的调整。例如面向年轻用户群体的 App 可以将延迟调整为较短的 0.3s 从而提高反馈速度，面向老年人群体或者全年龄的 App 就要趋于保守，使用较长的 0.5s 保证基础体验。因为老年人的反应和操作速度较慢，延迟设置过短会让多击难以触发。当手势为长按时，为了与单击进行区分，系统也会设置一个时长阈值。为方便理解，我们把一次单击拆分为三个状态：抬起状态按下状态抬起状态。在一次单击过程中，如果手指在按下状态的时间达到了这个阈值，那么系统就会将本次手势判定为长按而不是单击了，但如果按下状态持续的时间没有达到这个阈值，那么系统仍然会将本次手势判定为单击。如下图案例所示，在iOS端的照片App中单击打开照片时，按下状态持续达到0.3s就会被判定为长按并触发情景菜单，不超过0.3秒会被判定为单击打开图片。将时间限制的用法进一步延展，可以在单个热区触发超过 2 种功能，在一定的时间限制内触发一种功能，超过了时间限制则触发另一种功能。例如在 iOS 端桌面按下应用图标，当按下的持续时长不超过 0.3s 时，被判定为单击打开 App。当大于或等于 0.3s 且小于 2s 时，会触发更多菜单，当大于或等于 2s 时，会触发编辑主屏幕。不过，当单个热区通过区分按下时长来触发的功能越多，用户就越难感知到时间限制的边界，操作成本因此更高。另外补充一点，如果单击与长按共用了热区，那么单击的按下状态的持续时间必须小于相应的时间阈值。为了进行区分，我们将这种被限制在时间阈值内完成的单击称作做“快击”。常见点击类手势解析1. 单击定义使用单指在热区位置按下后抬起，从而触发相应的功能。整个状态变化过程为「抬起状态按下状态抬起状态」。特点单击是在移动端使用最普遍的手势。相较于其他手势，单击是最容易让用户感知到的。上文讲解「触发时机」时提到过，单击时可以通过在按下状态时移出热区，在热区外抬起从而取消本次操作，因此给予了用户反悔的机会。案例AppStore 每日推荐中，单击某个推荐卡片可以进入推荐的详情页。iOS 的设置中，单击开关按钮可以切换飞行模式的开关状态。2. 按下定义使用单指在热区位置按下，从而触发相应的功能。整个状态变化过程为「抬起状态按下状态」。特点与“单击”相比，“按下”由于从“抬起状态”到“按下状态”即可触发操作，导致不能通过将手指移出热区进行反悔回退，从而缺乏掌控感，但是在撤销成本低的操作可以使用它提高效率。按下手势极少用于可产生明确结果的操作，一般仅用于用户按下按钮后的视觉反馈。案例在 Smartisan OS 的电话 App 中拨号时，按下数字按钮不需要抬起即可成功输入。得到 App 调节文字的字号时，按下相应的大小级别就立即生效。这两个案例中的“按下”替换为“单击”也是可行的。3. 抬起定义在单指已经在热区位置处于按下状态时，抬起手指从而触发相应的功能。整个变化过程为「按下状态抬起状态」。特点“抬起”的触发前提是手指已经处于按下状态。某个应用场景中，“抬起”会改变或取消“按下状态”产生的效果。例如在 iOS 相机的照片模式中，按下拍摄按钮并保持按下状态，就会开始录制视频，此时“抬起”就会取消录制视频。案例在手机游戏《愤怒的小鸟》中，拖动小鸟并不松手使弹弓进入蓄力状态，此时“抬起”就会将弹弓的蓄力状态变为释放状态，从而将小鸟发射出去。4. 快击定义使用单指在热区位置按下后抬起，从而触发相应的功能。整个状态变化过程为「抬起状态按下状态抬起状态」，其中“按下状态”不能超过限定的时间。特点快击与单击只有一个不同点，快击的“按下状态”会被限制在特定时间内完成，而单击则不然。快击之所以存在，是因为单击与长按共用了热区。如果单击时的“按下状态”持续时间过长，就会触发长按，因此单击就必须将“按下状态”的持续时长必须限制在特定时间内。我们将这种被限制在特定时长内完成的单指点击操作称作做“快击”，从而和“单击”进行区分。更多细节可以查看前文的「点击手势的描述维度-时间限制」。案例观看抖音视频时，点击视频可以暂停，此处的点击手势就是“快击”。若按下状态保持的时间过长，则会触发更多操作的浮层。5. 长按定义使用单指在热区位置按下，并保持按下状态特定的时间，从而触发相应的功能。整个状态变化过程为「抬起状态按下状态」，其中“按下状态”会被要求达到某个时长。特点与上述的几个手势相比，长按是一个比较隐蔽的手势。除一些教育成熟的使用场景外，如果不加引导，用户很难感知到。其次，长按由于需要一定时间才能够触发，操作效率与单击相比较低。综合以上两点，长按不适合用于高频或主要功能的唯一触发方式，而可以作为次要功能的主要触发方式或高频或主要功能的额外触发方式。网易云音乐长按黑胶查看封面大图、长按文字复制等，长按是这些次要功能的唯一触发方式。哔哩哔哩站的长按点赞可同时触发点赞、投币、收藏（简称一键三连），长按抖音视频分享好友，长按是这些高频或主要功能的额外触发方式。当一个功能仅支持长按不支持点击时，需要在用户点击时进行引导，告知用户正确的手势。举一个反例，哔哩哔哩播放视频页的 GIF 录制功能需要长按才能录制，但是当单击时却没有任何反馈告知用户需要长按进行。更好的做法是在用户单击时进行轻量提示，例如下图中用网易云音乐一起听时，对讲机需要长按才能对讲，如果用户单击，就会通过一个 toast 提示来引导用户。案例哔哩哔哩长按点赞按钮可以同时触发点赞、投币、收藏功能。6. 双按定义使用单指在热区位置按下后抬起，然后再次按下，从而触发相应的功能。整个状态变化过程为「抬起状态按下状态抬起状态按下状态」。特点双按是一个在移动端非常罕见的手势，并且非常隐蔽。双按很少用于触发一个特定的功能，在移动端它常见于触发一个模式。例如当在一个界面中，上下左右四个方向都已经存在位移类手势了，但是仍然有功能需要新增额外的位移类手势。此时可以将双按看做是一个模式启动方式，双按后可以立即使用上下左右四个方向的手势触发额外的功能。案例在地图类 App 中，通常上下左右的滑动手势会用来拖动地图，双击放大地图，双指张开和捏合用来放大和缩小地图，但是在出行场景中单手操作的情况很多，如何使用单手就可以对地图进行放大缩小呢？通常都会使用双按来作为模式的启动。双按后不松开手指的情况下通过上滑来放大地图，通过下滑来缩小地图，从而解决了单手操作时难以放大缩小地图的痛点。不足之处在于，这个手势的教育成本较高，只有少部分用户能够发现并持续使用。7. 双击定义使用单指在热区位置按下后抬起，然后再次按下后抬起，从而触发相应的功能。整个状态变化过程为「抬起状态按下状态抬起状态按下状态抬起状态」。特点双击虽然也是一个隐蔽的手势，但是在部分场景中由于应用广泛从而降低了教育成本，例如双击点赞、喜欢。当一个热区同时存在单击和双击手势时，会导致单击手势的反馈延迟，具体内容在上文「点击类手势的描述维度-时间限制」已详细讲解，在此不做赘述。案例双击 iOS 的地图的地图界面，会放大地图。特殊描述维度上述介绍的手势通过「触发时机」、 「按下屏幕次数」、 「时间限制」三个描述维度构成了不同的点击类手势，除了这三者之外，有两个比较特殊的维度也带给点击类手势不同的可能性，即「按压力度」和「接触面积」。1. 按压力度通过手指按压力度的不同来触发不同功能的设计首次应用于 Apple Watch 上采用的 Force Touch，之后开始在 iPhone 6s 以及后续部分机型上应用，被命名为 3D Touch。 （由于比较普及的使用按压力度作为变量的功能现在仅有 3D Touch，因此接下来的介绍也主要围绕 3D Touch 进行）3D Touch 从诞生之日起就面临着许多的争议，是划时代的设计还是食之无味的鸡肋？不同的用户有不同的看法。下面我就简单讲一下它的优缺点。首先谈谈优点：①与3D Touch的使用场景最接近的手势是长按，3D Touch与长按相比的优势在于，它可以更快速地触发操作，而不需要长按所要等待的时间，显得更加干脆、流畅。如下图案例，可观察长按和3D Touch唤起快捷操作菜单的速度对比。②与单击、长按相比，3D Touch有更好的防误触效果。例如在支持3D Touch的iPhone机型上，锁屏界面的手电筒只能通过3D Touch触发，点击和长按都无法触发，个人认为目的也是为了防止手机放在口袋时误触。③在特定场景下，3D Touch有着其他手势难以替代的优势。例如在移动端的三维射击游戏中，按键操作一直是个难题，右手很难在屏幕上滑动调整视角的同时开枪射击。3D Touch 的独特属性能够解决这个问题，通过按压力度控制开枪，滑动屏幕调整视角，能够实现边瞄准边开枪的效果。在绘画 App 中，通过 3D Touch 可以用手指按压力度来模拟颜色的深浅和笔触的粗细，从而实现更好的画面效果。上述两个案例遇到的需求都是在单指保持滑动过程中需要另外一个维度的控制，如果遇到相同的需求也可以思考如何通过 3D Touch 来实现更好的体验。其次是缺点：①由于3D Touch并不支持所有的设备，因此App厂商在进行手势适配时就不能把3D Touch当做某个功能唯一的触发方式，而是只能将其作为一个辅助性的手势，而长按作为一个支持所有设备的手势，虽然触发速度没有3D Touch迅速，但是基本也可以替代3D Touch。因此造成了大部分情况下3D Touch是一个可有可无的鸡肋手势。②3D Touch是一个很难被用户察觉到的手势，没有引导的情况下我们很难注意到它的存在，从而降低了使用率。③为了支持3D Touch而产生的硬件成本是一个不能忽略的因素，而且电池的空间因此进一步被压缩，影响设备的续航。综上所述，3D Touch 对于用户和手机厂商来说，性价比偏低，因此苹果公司在后续的机型上砍掉了 3D Touch 功能，使用按压力度来触发功能的设计可能从此也会退出历史的舞台。2. 接触面积接触面积维度支持根据手指在屏幕的接触面积的不同从而触发不同功能。案例比较少见，我认为其中 Smartisan OS 的大爆炸功能将这个维度运用地最为出色。大爆炸是一个系统级的手势，通过它可以快速提取所有 App 里的文字信息进行编辑和更多操作。为了不与各种 App 里已有的手势冲突，大爆炸只能另辟蹊径，找到一个独有的手势来完成操作，下面的操作示例是大爆炸的宣传视频。使用接触面积的判定来触发是一个很合理的解决方案，解决方向有些类似于前面讲到的 3D Touch，但是避开了 3D Touch 所需要的硬件成本。同样运用了接触面积维度的功能还有华为手机的指关节截屏，通过识别包括接触面积等多个参数判断是否是指关节。以上就是关于点击类手势的思考总结，后续暂定的更新计划如下。有兴趣的朋友可以持续关注哦~欢迎关注作者微信公众号：「设成于思」本篇来源：优设网原文地址：https://www.uisdc.com/tap-gesture-recognizer
张大湿
在路上
飞翔的企鹅
