PC端鼠标vs手机端手势:两种交互有何异同点?

2019-08-13 22:14:00 产品大发pk10 德升 分享

移动端相较于PC端的交互动作——即手势操作相较于鼠标键盘输入设备操作,是存在相当大的不同的。以下笔者将从四个部分展开讲述。

在iOS系统出现之前的时代,是单点触控的电容屏和触控笔和手机端物理键盘对PC端的粗暴移植和复刻,有的移动端设备甚至了PC端笨重的QWERTY键盘,那时移动端的输入设备基本和PC端是可以一一对应的。

qwerty键盘+触控笔

但在乔布斯主导的iOS系统和手势操作系统出现后,我们已经无法简单把移动端的手势操作与PC端输入设备简单对应了。移动端设备的交互方式也从此开始与PC端的交互方式分道扬镳,渐行渐远。

被乔布斯抛弃的触控笔和物理键盘带来了移动端交互革命

我们先来回顾一下PC端鼠标针对UI控件的几个主要交互动作:

几个主要交互动作

1. Hover

Hover,有时候也被称为“MouseOver+MouseOut”,PC端用户可以用鼠标指针移过UI控件时,UI控件的交互反馈来推测UI控件的操作方式。

某些位于某种UI控件之上的Hover动作可能会让鼠标指针产生不同形态的变化,如链接会变为手型,载入新内容会变为沙漏,可操作文字内容变为工字梁,Q&A变为问号等等。鼠标指针形态的改变是对当前悬停位置内容的一种指示。

有些UI控件本身会对鼠标的Hover行为产生反馈,此时不光鼠标指针会发生相应的形态变化,UI控件本身也会根据预先定义产生不同形态的变化。

熟悉CSS的朋友可能记得文字链接的几种定义:link; visited; hover; active; 其中的hover就是针对鼠标悬停于自身时自己的样式呈现。

Hover交互的用户端触发条件:移动鼠标指针。

Hover 交互

2. Click

有时候也被称为“Active”、“Action”、“MouseDown+MouseUp”,是鼠标点击UI控件后释放点击的一套交互行为。

这个过程中,用户点击和释放的坐标点是一致的,没有移动行为。系统在判定用户的交互动作是“Click”动作后,提供用户点击的UI控件本身应该提供的交互反馈或系统层级反馈。

Click交互一定是发生在Hover交互之后的,Hover是Click的前置动作,因为不把鼠标指针悬浮到UI控件之上,是无法完成对目标UI控件的点击行为的。

Click交互的用户端触发条件:移动鼠标指针Hover目标UI控件,然后按压物理按键。

Click交互

3. Right Click

PC端虽然判断鼠标点击的事件监听机制是同样的,但无论是苹果的OSX系统还是微软的Windows系统,都默认把鼠标右键点击交互反馈留给了ContextMenu——即系统菜单。

此时,系统或应用收回了对右键反馈的控制权,鼠标右键点击激活的是系统菜单,用户需要再次点击菜单选项来对当前UI控件进行更多操作。

Right Click交互的用户端触发条件:移动鼠标指针Hover目标UI控件,然后按压物理按键右键。

Right Click交互

4. Tap

Tap交互也叫Soft-touch,中文一般称为“轻敲”,是鼠标指针Hover于某UI界面元素后,在鼠标操作区(或触控板外设)上快速轻敲以实现与界面元素间的互动,普通的windows系统鼠标可能不支持此操作。

Tap交互

Tap交互针对的UI界面元素一般是界面级控件,如操作区放大缩小、进入程序选择界面等。

Tap触发条件:Hover于界面元素,轻敲鼠标操作区,没有物理按压行为。

5. Drag

Drag交互中文一般称之为“拖拽”,是鼠标指针Hover于某UI控件后,用鼠标按键或其他方式触发UI控件进入拖拽状态后,通过移动鼠标指针的位置来将UI控件拖移至指定位置,然后通过松开按键或其他方式解除控件拖拽状态。

Drag交互

拖拽状态需要UI控件本身支持拖拽功能才能激活。所以有时候通过鼠标指针的变化来指示指定UI控件是可拖拽的。

拖拽状态触发条件:Hover于界面元素,按住鼠标按键或快捷键激活拖拽状态,拖拽完成后解除拖拽状态。

6. Scroll

Scroll交互是指鼠标指针Hover于指定界面后,用鼠标滚轮或轻划动作来实现界面内容滚动显示。

Scroll状态触发条件:Hover于界面元素,滚动鼠标滚轮或上下轻划鼠标操作区。

7. Pan

这个动作中文一般称为“平移”,是指鼠标指针悬停在某个UI控件上方时,可以通过在鼠标二维平面和屏幕之间建立一种映射关系,来实现在UI空间内的卷屏效果。

平移

这个动作是Mac的OSX等操作系统支持的苹果专用鼠标提供的基于鼠标Hover交互的交互方式,如果我们把触摸板外设也作为鼠标的变体和延伸的话,笔记本的触摸板也提供这个交互方式。

Pan交互触发条件:Hover于指定控件,二维平面内轻划鼠标操作区实现。

8. Zoom

Zoom交互分为放大(Zoom In)和缩小(Zoom Out)操作,一般是鼠标指针Hover于指定界面或UI控件,通过鼠标按键或快捷键激活Zoom状态,缩放完成后,再通过释放按键解除zoom状态。

Zoom交互触发条件:Hover于指定控件,通过鼠标按键或快捷键激活Zoom状态,二维平面内轻划鼠标操作区实现Zoom效果,然后释放按键解除Zoom状态。

以上就是PC端鼠标能够实现的主要交互行为。

PC端鼠标交互的最显著的一些特性

看过了PC端鼠标和界面元素的主要交互方式,下面让我们来总结一下PC端鼠标交互的最显著的一些特性:

1. 鼠标指针优先级和层级高于所有界面层级,永远位于界面所有元素最上方。

熟悉CSS的朋友可能知道页面层级有一个z-index的属性,它标示了指定页面元素在页面层级中的深度,数值越大,越是处于更上层的层级,数值越小,越是处于更下层的层级。但不论是应用内的元素,还是应用本身,包括系统桌面元素,都不能超越鼠标指针所在层级。鼠标指针所在层级理论上是正∞。

鼠标层级

2. 鼠标指针永远以一个虚拟的点投影于二维屏幕的可视坐标系内。

不管用户是否在使用鼠标操控屏幕元素,只要是添加了鼠标外设且支持鼠标操作的PC设备,从始至终都会有一个鼠标指针永远停留在屏幕的某处,你用或不用,它就在那里。

虽然鼠标投影于二维屏幕坐标系内的点和几何意义上的点一致,即这个点没有面积,仅是数学意义上的点,但屏幕二维坐标可以粗略定义这个点的位置。

3. 鼠标指针的Avatar可以根据自身所投影位置内容的属性而改变自身显示形态。

我们看到的“箭头”、“手型”、“工字梁”、“移动”显示样式是真正意义上的鼠标指针的化身,鼠标指针的样式会根据所处元素的属性而改变。

鼠标指针的形态

4. 鼠标指针从某点移动到另外一个点一定会有线性的行动轨迹

鼠标的行动轨迹

PC端鼠标的这个特性深刻影响了PC端鼠标的交互行为,也是它和移动端手势交互的重要区别。

在PC端,鼠标操作想要跟某个控件交互,首先要把鼠标指针从当前所在的点移动到目标控件显示区域,轨迹球和光电鼠标都是用鼠标在桌面上移动方向和轨迹来映射光标移动方向和轨迹。

所以,鼠标运动一定要知道当前鼠标指针所在位置,才能操作鼠标向目标位置移动。这种运动并不是最自然的交互方式,甚至还因为这种操作不直观发生过最早接触鼠标的一批人在遇到“请把光标移动到Windows窗口”这样的操作指令时,直接把鼠标贴到了屏幕上这样的笑话。

仅从是否最符合用户以物理世界移情于虚拟世界的心智模型的角度来看,鼠标交互方式比起指哪打哪,无需考虑鼠标指针前一个落点的触控笔操作、手势操作在直观性上要欠缺很多。

而在PC端比较经常发生的就是我们在想要找到鼠标指针当前位置时,结果却因为指针太小或背景太花哨而遍寻不见,OSX系统的快速晃动鼠标,鼠标指针就会瞬间瞬间变大许多倍就是为了解决这种交互的一个缺点。

要把光标移动到某个点,需要知道当前所在点

鼠标指针的另一个特点是完全符合费兹定律的限制,费兹定律(Fitts’ Law)是心理学家 Paul Fitts 所提出的人机介面设计法则,是一种主要用于人机交互中的人类运动的预测模型。

它的公式是:

MT=a + b * log2(D/W + 1)

它主要定义了游标移动到目标之间的距离、目标物的大小和所花费的时间之间的关系。目标越大,完成点击越快,时间越短。同样地,目标越近,指向越快,完成点击时间越短。也就是说,定位点击一个目标的时间,取决于目标与当前位置的距离,以及目标的大小。

我们不能说移动端的手势交互已经摆脱了费兹定律的束缚,但费兹定律最早确实是针对PC端的交互而产生的,也最能反应PC端鼠标交互的特点。

5. 鼠标可以通过滚动、滑动、悬浮等方式与UI控件交互

鼠标可以通过滚动、滑动等方式与指针所投影位置的UI控件进行交互,实现卷屏、平移、放大、缩小等操控效果,这一点是必须要通过接触屏幕才能实现与控件进行交互的移动端设备有显著不同的。

如果我们用移动端的Touch来类比PC端的MouseDown的话,移动端缺少了光标悬浮情况下的各种交互可能,Surface的手势悬浮触控笔试图在触摸屏上PC端的鼠标交互,但我对这一移植的前景并不看好。因为移动端的设备交互方式自有其自身特点。

声明:本站部分资源来源于网络,版权归原作者或者来源机构所有,如作者或来源机构不同意本站转载采用,请通知我们,我们将第一时间删除内容。本站刊载文章出于传递更多信息之目的,所刊文章观点仅代表作者本人观点,并不意味着本站赞同作者观点或证实其描述,其原创性及对文章内容的真实性、完整性、及时性本站亦不作任何保证或承诺,请读者仅作参考。
编辑: