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

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

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

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,905评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,140评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,791评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,483评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,476评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,516评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,905评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,560评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,778评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,338评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,925评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2 342

推荐阅读更多精彩内容

  • 移动端相较于PC端的交互动作,即手势操作相较于鼠标键盘输入设备操作,是存在相当大的不同的。在iOS系统出现之前的时...
    德升阅读 1,446评论 1 12
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,082评论 1 32
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,470评论 1 11
  • ​ 曾经那份真诚的爱情如今已经失去,人世间最痛苦的事莫过于此。失恋之后等待上天能够给我再来一次复合的机会,希望和自...
    扬州孙旭阅读 749评论 0 1
  • 无论生活怎样 都不要忘记微笑 愿你成为自己的太阳 无需凭借谁的光❣️
    盟盟_阅读 144评论 0 1