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后的强反馈效果来指示用户点击产生的即时反馈,是一种很好的思路。
以上的这些差异这也就对移动端控件的设计带来了新的要求:
a. 移动端控件设计要严格按照设计规范
如支持移动的控件,除了设计上增加控件“可移动”的隐喻之外,还要标配可移动图标。
如内容不可点击,就不要设计成列表项样式。之前文章里曾经举过一个工作中遇到的例子,产品经理想要把一组只读性信息做成列表项样式,这样设计必然会让用户产生迷惑,从而带来非常大的用户体验问题。
如楼层图不可点击,就不要设计成可点击样式。之前在实际项目中,遇到过一个聚合页,楼层图设计的样式是明显引导用户点击楼层头图进入详情页的,虽然没有加“更多”按钮,这样的设计就会引起很多体验问题。
b. 移动端控件设计要符合用户心理预期和使用习惯
对于从来没有接触过移动端设备和交互方式的用户来说,如果要实现编辑一个控件,无论是左滑进入编辑状态还是长按进入编辑状态,都是需要一定的学习成本和学习过程的,但用户一旦掌握了这种交互方式,就会在使用时形成关于如何操作此类控件的心理模型。
一般来说,用户并不会太关注iOS平台和安卓平台的区别,所以无论在什么类型的设备上,用户都趋向于使用同一套思路去解决类似问题,所以如果条件允许,在可控范围内尽量实现控件交互方式和交互反馈的统一,是对用户体验的最大支持。
如果不可控因素太多,那也要尽量按照下述优先级去统一交互反馈:
跨平台交互反馈统一 > 系统内交互反馈统一 > 应用内交互行为统一 > 板块内交互行为统一
c. 移动端控件设计要符合用户心智模型
移动端的交互方式是触摸手势交互,所以相较于使用鼠标来操作的PC端,移动端与现实世界的交互方式对照也更紧密和一致,早期的拟物化风格UI界面上,相册、日历、笔记本、按钮、开关、拖拽控件等,都是现实世界物品的完全照搬,都可以在现实中找到完全对应的实物,正因为这样,用户的心智模型也更加稳固,更加与现实一致。
而一些比较抽象的如跳转、弹框、返回等交互,用户也已经形成了固定的心智模型,甚至形成了稳定的空间记忆。一旦遇到问题,用户会在屏幕的二维空间固定位置去寻找对应的控件。
d. 移动端控件要尽量使用简单,直接、可发现性高的交互方式
因为移动端相比PC端缺少了鼠标Hover来发现适合的交互方式的特点,移动端用户只有在手指实际接触到屏幕的瞬间才能真正了解控件支持的交互方式,所以移动端的交互方式要求尽量采用简单、直接、可发现性强的交互方式,那些学习成本高的,不符合用户心智模型和心理预期的交互方式注定会成为用户体验的阻碍,这也是为什么我们除了Demo演示App等少数特殊场景需求的应用外很少看到多手指手势大范围应用的原因,因为随着控制手势的手指数量增加,操作复杂度的上升是指数级的。
如下图这种多手指手势操作,就极复杂且不符合用户心智模型,用户在使用过程中不但学习成本高,后期也难记起这些手势:
e. 如果控件交互后载入内容有延迟,则建议在控件上增加“Active”效果以提示用户控件已接收到交互请求并在处理。
移动端不是强制要求添加控件的Touch时的Active效果,但如果某些控件如跳转新页面的列表项等,在用户Touch了屏幕上的控件到新的页面刷新加载之间可能会有一段延迟时间,如果这个延迟时间较长,则可以考虑增加“Active”效果以增加体验流畅度,减少误操作。