美文网首页聊聊用户体验设计@产品互联网产品思考
手机端&PC端按钮和入口交互异同辨析(二)

手机端&PC端按钮和入口交互异同辨析(二)

作者: 德升 | 来源:发表于2019-04-18 09:17 被阅读17次

    看过了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端的鼠标交互,但我对这一移植的前景并不看好。因为移动端的设备交互方式自有其自身特点。

    6. 鼠标指针在屏幕上的Hover总是响应当前激活的界面

    PC端设备的屏幕尺寸让多项目、多应用并行、分屏显示成为常态,正常情况下,同一个屏幕上在同一时间只有一个窗口能够成为激活状态,未被激活的界面在鼠标指针划过界面元素时,一般不需要响应指针的Hover动作。

    7. 鼠标指针在屏幕上的Click总是优先响应最上层的控件

    PC端设备有时候会在桌面上形成多个UI界面的堆叠,一般情况下,总是位于光标投影点的最上层的界面和界面控件响应鼠标的点击,并成为激活状态(如果尚未激活的话)。

    以上就是PC端鼠标交互方式的一些特点,有些特点,在移动设备上保留了下来,有些特点,则因为技术或屏幕尺寸等原因被移动设备交互完全放弃,熟悉了PC端交互方式和移动端交互方式之间的区别,就能在设计应用时,针对不同的设备特性做有针对性的优化,以实现各个平台的最大优势。

    相关文章

      网友评论

        本文标题:手机端&PC端按钮和入口交互异同辨析(二)

        本文链接:https://www.haomeiwen.com/subject/kiigwqtx.html