手机端&PC端鼠标和手势交互异同辨析(四)

1. 移动端控件没有Hover效果

在PC端用户要判断一个控件可以与之互动的操作方式,可以用鼠标在目标控件上进行“探测”,鼠标指针和控件本身的形态变化都能够明确指示用户可以执行的操作。

而在移动端用户要判断一个控件的交互方式,除了控件本身的UI设计带来的暗示以外,在真正点击这个控件之前,都无法真正确定。这像极了量子物理理论里的“薛定谔的猫”,即你在真正点击控件之前,你永远无法预知按钮真正支持的操作方式。

此外由于移动端所有交互都是基于Touch的,所以此交互行为和PC端有极大差异,PC端除了拖动窗口滚动条实现界面滚动效果之外,基本都是用鼠标指针悬停于目标控件之上通过滚轮或轻划实现滚动效果,所以PC端的滚动交互,鼠标指针和UI控件之间是没有发生实质意义的接触的(如果我们把Hover视为无接触的话)。

但移动端由于屏幕物理尺寸限制,滚动操作和点击操作并列成为移动端交互的两大最重要交互方式。滚动操作一定要手指先接触屏幕表面,快速滑动一段距离并抬起以实现滚动效果,所以在手指按压屏幕的瞬间,位于手指于屏幕接触点的UI控件是有极大几率被激活到“Active”状态的,只是系统在判断操作行为是“滚动”而非“点击”行为后,对Active目标控件执行了ontouchcancel,也就是目标控件虽然被激活,但并没有执行后续运行结果。

2. 移动端点击的Active效果定义没有统一

在移动端,用户在点击控件后,如果新的内容和反馈和点击行为发生的时间中间有“Gap”,则用户可能会对控件是否已被接收到交互产生迷惑,如果这个Gap时间很长,则直接影响用户体验,尼尔森法则里的状态可见原则就是要预防这种情况:

用户在网页上的任何操作,不论是单击、滚动还是按下键盘,页面应即时给出反馈。“即时”是指,页面响应时间小于用户能忍受的等待时间。

移动端对于控件在被点击的瞬间能够提供的效果反馈定义很不一致。

有的应用,有的模块提供了类似PC端的Active效果

安卓的Material Design脱离了PC端UI控件交互方式的束缚,用Touch后的强反馈效果来指示用户点击产生的即时反馈,是一种很好的思路。 

Material Design 的点击动效



以上的这些差异这也就对移动端控件的设计带来了新的要求:

a. 移动端控件设计要严格按照设计规范

如支持移动的控件,除了设计上增加控件“可移动”的隐喻之外,还要标配可移动图标。

移动端交互要配合明确的指示图标

如内容不可点击,就不要设计成列表项样式。之前文章里曾经举过一个工作中遇到的例子,产品经理想要把一组只读性信息做成列表项样式,这样设计必然会让用户产生迷惑,从而带来非常大的用户体验问题。

只读信息不能设计成列表项样式

如楼层图不可点击,就不要设计成可点击样式。之前在实际项目中,遇到过一个聚合页,楼层图设计的样式是明显引导用户点击楼层头图进入详情页的,虽然没有加“更多”按钮,这样的设计就会引起很多体验问题。

楼层头图可否点击 设计要符合自身特点

b. 移动端控件设计要符合用户心理预期和使用习惯

对于从来没有接触过移动端设备和交互方式的用户来说,如果要实现编辑一个控件,无论是左滑进入编辑状态还是长按进入编辑状态,都是需要一定的学习成本和学习过程的,但用户一旦掌握了这种交互方式,就会在使用时形成关于如何操作此类控件的心理模型。

一般来说,用户并不会太关注iOS平台和安卓平台的区别,所以无论在什么类型的设备上,用户都趋向于使用同一套思路去解决类似问题,所以如果条件允许,在可控范围内尽量实现控件交互方式和交互反馈的统一,是对用户体验的最大支持。

如果不可控因素太多,那也要尽量按照下述优先级去统一交互反馈:

跨平台交互反馈统一 > 系统内交互反馈统一 > 应用内交互行为统一 > 板块内交互行为统一

c. 移动端控件设计要符合用户心智模型

移动端的交互方式是触摸手势交互,所以相较于使用鼠标来操作的PC端,移动端与现实世界的交互方式对照也更紧密和一致,早期的拟物化风格UI界面上,相册、日历、笔记本、按钮、开关、拖拽控件等,都是现实世界物品的完全照搬,都可以在现实中找到完全对应的实物,正因为这样,用户的心智模型也更加稳固,更加与现实一致。

拟物化图标

而一些比较抽象的如跳转、弹框、返回等交互,用户也已经形成了固定的心智模型,甚至形成了稳定的空间记忆。一旦遇到问题,用户会在屏幕的二维空间固定位置去寻找对应的控件。

d. 移动端控件要尽量使用简单,直接、可发现性高的交互方式

因为移动端相比PC端缺少了鼠标Hover来发现适合的交互方式的特点,移动端用户只有在手指实际接触到屏幕的瞬间才能真正了解控件支持的交互方式,所以移动端的交互方式要求尽量采用简单、直接、可发现性强的交互方式,那些学习成本高的,不符合用户心智模型和心理预期的交互方式注定会成为用户体验的阻碍,这也是为什么我们除了Demo演示App等少数特殊场景需求的应用外很少看到多手指手势大范围应用的原因,因为随着控制手势的手指数量增加,操作复杂度的上升是指数级的。

如下图这种多手指手势操作,就极复杂且不符合用户心智模型,用户在使用过程中不但学习成本高,后期也难记起这些手势:

复杂的手势影响用户体验

e. 如果控件交互后载入内容有延迟,则建议在控件上增加“Active”效果以提示用户控件已接收到交互请求并在处理。

移动端不是强制要求添加控件的Touch时的Active效果,但如果某些控件如跳转新页面的列表项等,在用户Touch了屏幕上的控件到新的页面刷新加载之间可能会有一段延迟时间,如果这个延迟时间较长,则可以考虑增加“Active”效果以增加体验流畅度,减少误操作。

Active效果
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念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

推荐阅读更多精彩内容