三手机端&PC端鼠标和手势交互异同辨析_生活广记

移动端设备之所有又被称为“移动智能终端” ，是因为移动端设备由于嵌入了比PC设备多得多的各种传感器，从而也就能实现比PC端多得多的交互效果，但因为本文主要是要讨论手势交互和鼠标交互的异同，所以对除了屏幕以外的其他传感器交互方式不做进一步的深入讨论。
PC上的鼠标点击会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件，但是在移动终端页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件，分别对应了触屏开始、拖拽及完成触屏事件和取消交互。
移动端手势交互和PC端最大的不同是：移动端交互都是以Touch为基?。?挥惺种附哟チ似聊? ，才能进行后续的所有操作，任何交互都发生在手指Touch屏幕的那一瞬间之后，而PC端鼠标要与界面UI控件之间发生交互，很多时候只需要光标位置悬停在目标控件之上即可完成。
这种根本性的交互差异深刻地影响了两种设备的交互方式。
【三手机端&PC端鼠标和手势交互异同辨析】
下面来看下移动端可以实现的交互效果：
Tap，或称为Click或Touch，是移动设备上最常使用的一种手势输入方式，因手指已经替代了智能笔，以牺牲点击的精确度换取了便捷性，因此要求确保可点击的控件最小可点击范围(换算为物理尺寸大致在7mm－9mm之间)，可点击范围太小会影响用户使用体验。
如果控件在点击时和点击后产生的操作之间间隔时间较久，建议控件在点击时能够在表现形式上做出即时反馈，这样可以明确告知用户点击已生效而非系统卡死或没点击到。
滚动是用户在明确操作对象与周围环境阻尼系数较小时通过快速移动操作对象并利用物体的惯性来达到移动较长距离目的的操作方式。与拖拽相反，滚动会尽量利用操作对象移动的惯性，所以要求用户在手指初次点击屏幕到手指离开屏幕的持续时间短且点击点和离开点的坐标位置有较大差异。
双击是在手指界面上快速而连续的两次轻敲，两次轻敲之间间隔时间不能太长否则系统会作为两次单独的点击处理。
双击较多用于地图、浏览等场景中，一般会以点击坐标为中心点做一定程度的放大缩小操作。如果界面需要频繁用到单次点击，建议不要加入双击。如果使用了双击，就需要弱化或去除界面对单次点击的反馈。由于双击的可发现性较弱，建议谨慎使用。
长按是指手指在屏幕固定坐标点按压持续一定时长的手势操作，如以PC端的左键点击对应移动设备的点击，则可以长按作为PC端右键点击的对应，一般多用于删除列表项、启动编辑等应用场景，但因为可发现性弱，建议谨慎使用。
在某些场景中，长按激活某控件的编辑状态后，需要再配合点击或拖拽手势完成编辑任务，然后点击“完成”、“结束”按钮或界面上其它位置来恢复到默认状态。
拖拽手势是对现实世界中拖拽物体行为的一种简单映射，用户在拖拽物体时，期望控件落在一个较精确可控的坐标点，如被拖拽物体所在环境对被拖拽物体阻尼系数较大，用户在物体到达目标坐标点后可以快速松开手，如果被拖拽物体所在环境对其阻尼系数较小，用户在物体到达目标坐标点后会持续一小段时间以消除运动惯性，带有限位刻度的，用户会使用快速的拖拽甚至是不精确的点击来实现物体往目标点的移动，这些对用户来说操作和反馈都是与现实世界一致的下意识行为，学习成本极低。
轻扫手势较多用于被操作对象有固定行程且每段行程之间都需要单独的轻扫手势操作的情况，使用此手势操作的用户对于被操作对象的操作方式、操作结果有明确认知。
捏夹手势是两个手指在屏幕上做出捏夹动作，系统根据手指落点坐标和离开坐标判断两指之间的距离是增大还是减小，并对界面进行相应的放大缩小操作。
旋转手势是两个手指对操作对象进行旋转操作，使操作对象也旋转相应角度的操作方式。
其他手势操作
以上就是移动端手势操作的基本交互方式。下篇我们来一起分析移动端手势操作相较于PC端鼠标操作的异同点。
在PC端用户要判断一个控件可以与之互动的操作方式，可以用鼠标在目标控件上进行“探测”，鼠标指针和控件本身的形态变化都能够明确指示用户可以执行的操作。
而在移动端用户要判断一个控件的交互方式，除了控件本身的UI设计带来的暗示以外，在真正点击这个控件之前，都无法真正确定。这像极了量子物理理论里的“薛定谔的猫” ，即你在真正点击控件之前，你永远无法预知按钮真正支持的操作方式。
此外由于移动端所有交互都是基于Touch的，所以此交互行为和PC端有极大差异，PC端除了拖动窗口滚动条实现界面滚动效果之外，基本都是用鼠标指针悬停于目标控件之上通过滚轮或轻划实现滚动效果，所以PC端的滚动交互，鼠标指针和UI控件之间是没有发生实质意义的接触的（如果我们把Hover视为无接触的话）。
但移动端由于屏幕物理尺寸限制，滚动操作和点击操作并列成为移动端交互的两大最重要交互方式。滚动操作一定要手指先接触屏幕表面，快速滑动一段距离并抬起以实现滚动效果，所以在手指按压屏幕的瞬间，位于手指于屏幕接触点的UI控件是有极大几率被激活到“Active”状态的，只是系统在判断操作行为是“滚动”而非“点击”行为后，对Active目标控件执行了ontouchcancel，也就是目标控件虽然被激活，但并没有执行后续运行结果。
在移动端，用户在点击控件后，如果新的内容和反馈和点击行为发生的时间中间有“Gap”，则用户可能会对控件是否已被接收到交互产生迷惑，如果这个Gap时间很长，则直接影响用户体验，尼尔森法则里的状态可见原则就是要预防这种情况：
移动端对于控件在被点击的瞬间能够提供的效果反馈定义很不一致。
有的应用，有的模块提供了类似PC端的Active效果
安卓的Material Design脱离了PC端UI控件交互方式的束缚，用Touch后的强反馈效果来指示用户点击产生的即时反?。?是一种很好的思路。?
以上的这些差异这也就对移动端控件的设计带来了新的要求：
如支持移动的控件，除了设计上增加控件“可移动”的隐喻之外，还要标配可移动图标。
如内容不可点击，就不要设计成列表项样式。之前文章里曾经举过一个工作中遇到的例子，产品经理想要把一组只读性信息做成列表项样式，这样设计必然会让用户产生迷惑，从而带来非常大的用户体验问题。
如楼层图不可点击，就不要设计成可点击样式。之前在实际项目中，遇到过一个聚合页，楼层图设计的样式是明显引导用户点击楼层头图进入详情页的，虽然没有加“更多”按钮，这样的设计就会引起很多体验问题。
对于从来没有接触过移动端设备和交互方式的用户来说，如果要实现编辑一个控件，无论是左滑进入编辑状态还是长按进入编辑状态，都是需要一定的学习成本和学习过程的，但用户一旦掌握了这种交互方式，就会在使用时形成关于如何操作此类控件的心理模型。
一般来说，用户并不会太关注iOS平台和安卓平台的区别，所以无论在什么类型的设备上，用户都趋向于使用同一套思路去解决类似问题，所以如果条件允许，在可控范围内尽量实现控件交互方式和交互反馈的统一，是对用户体验的最大支持。
如果不可控因素太多，那也要尽量按照下述优先级去统一交互反?。?
跨平台交互反馈统一 > 系统内交互反馈统一 > 应用内交互行为统一 > 板块内交互行为统一
移动端的交互方式是触摸手势交互，所以相较于使用鼠标来操作的PC端，移动端与现实世界的交互方式对照也更紧密和一致，早期的拟物化风格UI界面上，相册、日历、笔记本、按钮、开关、拖拽控件等，都是现实世界物品的完全照搬，都可以在现实中找到完全对应的实物，正因为这样，用户的心智模型也更加稳固，更加与现实一致。
而一些比较抽象的如跳转、弹框、返回等交互，用户也已经形成了固定的心智模型，甚至形成了稳定的空间记忆。一旦遇到问题，用户会在屏幕的二维空间固定位置去寻找对应的控件。
因为移动端相比PC端缺少了鼠标Hover来发现适合的交互方式的特点，移动端用户只有在手指实际接触到屏幕的瞬间才能真正了解控件支持的交互方式，所以移动端的交互方式要求尽量采用简单、直接、可发现性强的交互方式，那些学习成本高的，不符合用户心智模型和心理预期的交互方式注定会成为用户体验的阻碍，这也是为什么我们除了Demo演示App等少数特殊场景需求的应用外很少看到多手指手势大范围应用的原因，因为随着控制手势的手指数量增加，操作复杂度的上升是指数级的。
如下图这种多手指手势操作，就极复杂且不符合用户心智模型，用户在使用过程中不但学习成本高，后期也难记起这些手势：
移动端不是强制要求添加控件的Touch时的Active效果，但如果某些控件如跳转新页面的列表项等，在用户Touch了屏幕上的控件到新的页面刷新加载之间可能会有一段延迟时间，如果这个延迟时间较长，则可以考虑增加“Active”效果以增加体验流畅度，减少误操作。

三 手机端&amp;PC端鼠标和手势交互异同辨析

三手机端&PC端鼠标和手势交互异同辨析