移动端设备手势交互设计研究

李倩 刘洁

【摘 要】随着智能手机和平板电脑被广泛使用，电子界面正从传统的电脑鼠标转向触摸屏再到全面屏，因此出现了与屏幕展示物体进行交互的新方式。由傳统界面向触屏界面的转变使滑动成为一种常见的、与屏幕上的产品和刺激物进行互动的动作。

【关键词】滑动;全面屏;手势交互

中图分类号：TB472  文献标志码：A              文章编号：1007-0125（2020）26-0177-02

一、交互设计的本质

交互设计的本质是对象和对象之间的交流，可能是人与人之间的交流，人与环境之间的交流或者人与物的交流等。我们现在所讲的交互设计大多是指人机之间的交互，而交互设计师所要做的就是合理规划、设计人与机之间的互动流程和步骤，寻找一种合理的沟通方式。

互联网产品用户主要通过两种方式进行交互——鼠标和手指。这两类交互方式有着非常大的不同，设计出来的产品界面也会完全不同，因为鼠标可以很精准地单击到界面上的内容，所以软件界面上会有很多的菜单，并且不会担心这些菜单之间相互干扰。而手指的准确度是非常有限的，UI设计中提出的40px最小尺寸概念，即每一个可点击区域都不要小于40px，否则就会可能让用户难以点击到。如果直接将office桌面版的菜单布局移植到移动版上，会有非常严重的后果。

实际上在IOS和Android系统出来之前，Windows Mobile系统曾占据了移动智能系统很大的市场，但是所有的选项都非常密集，当时用户需要使用“触控笔”才能点击到，体验非常糟糕。虽然现在“触控笔”又在一些设备上重新出现了，但这是针对专业人士而研发的，比如绘画、记笔记等，这与所有操作都需要使用“触控笔”来进行有着本质区别。因此在交互设计的过程当中，我们除了关注框架和流程、界面的内容细节，还需要关注交互的形式和反馈，界面信息从A状态到B状态的触发源、触发区域及其对应的触发机制，简单来说就是信息的输入、交换和输出的过程。

二、应运而生的手势交互

在计算机时代，我们通过键盘和鼠标这样的输入工具进行输入;那么在移动互联网时代，随着手机触摸屏幕和传感器的出现，手指这样的输入工具是最适合我们进行输入的，面对复杂的任务判断对应的高效输入、定义灵活且易用的手势成为在移动端使用的互联网产品的必备。为此，为了使用户拥有更好的体验感，为了满足单手操作的需求，基于视觉的手势识别方式应运而生。

手势交互的直觉形成于用户和现实世界所有实物的互动中，触摸真实物体的本能行为也是最基础的动作。在物理世界中用户接触到物体是一定有感觉的，所以在移动端设备上与“物体”交互一定可以看到变化。在我们真实的物理世界中若想“打开”一个物体，首先必须要接触到它，所以我们对于UI中的按钮——那些看起来像是可以“打开新页面”的物体，第一反应也会是摸它一下。“点击”手势的学习成本对于用户来说是非常低的，即使是在新手引导环节，我们也只需要把按钮做得够像是一个按钮、然后告诉用户“点击这里”。

手指有多种手势，需要注意的是，有一些手势是约定俗成的习惯，不要轻易地改变这些手势所代表的功能，比如下拉刷新、滑动删除等，并且最好不要和系统默认的手势产生功能上的冲突，以及注意每增加一种手势和对新用户的引导。移动端游戏的手势操作是非常多样有趣的，例如微信“主界面”情况下左右滑动可以在板块之间切换，“好友聊天”界面下向右滑动即可退出聊天界面;今日头条在“新闻列表”界面下下拉进行刷新以及QQ 消息提醒的小红点按住拖动松开，就可将消息定义为已读。除了视觉方面的反馈，还有两个不容忽视的地方就是震动（触感）和声音（听感）的反馈，比如大家非常熟悉的微信“摇一摇”功能，当用户在摇晃手机的时候，会出现特定的声音提示，当匹配到用户的时候，会通过震动提示。

三、全面屏手势的思考

（一）IOS和MIUI系统切换页面手势研究

IOS进入多任务界面的手势是上划悬停、松手，多任务界面就会出现;MIUI第二代手势则是上划，等一下才会进入多任务界面。二者区别在于最后进入多任务界面时需不需要松手，这里有细小的差别，IOS上划后是整个界面缩小，松手后当前页面变成标签;MIUI跳出来的多任务界面没有与当前页面有动画互动。一些用户认为MIUI的切换任务手势体验感较差，任务管理上滑以后要停留一下，这里会打断用户的操作节奏，并且卡顿不到位非常容易返回桌面。同时也有些用户认为，MIUI二代更新后，在切换页面手势上划的距离上做了调整，进入多任务界面的确是上划然后停顿，但不是停顿一下，即使停顿一会儿，上划以后手指不从屏幕上松开，多任务界面都会出现。

作为一个习惯在多任务界面切换APP而不是回桌面切换APP的用户，可能在尝试MIUI的全面屏手势都会退回到导航键了，因为进入多任务界面对这类用户来说太常用了，而这个手势并不好用，要上滑到一定距离并停顿一下，此时这个刻意的停顿会给用户一种操作不流畅的感觉。从退出程序到桌面这一步来说，用户需要从最底部开始划，而全面屏意味着边框很窄，那从最底部开始就意味着用户需要手指脱离屏幕甚至脱离手机从最底部开始，这时候手机不稳容易掉落，若是横版游戏或者视频单手操作基本不可能。其实完全可以将手势操作做到屏幕中操作而不是从最一边（底边、左右两边等）开始。

至于如何在开机引导中逐步让人理解停顿切换多任务，不如在设置输入法或者其他的时候跳到另一个APP引导用户返回激活引导，并且现在也出现了许多导航手势APP，用户可以根据自身使用场景来调整手势，这是一种对各类全面屏手势去粗取精且拥有丰富自定义项的新方案。技术更新创造总体来说是好的，但是从使用全面屏手势这段时间来看，全面屏手势确实还有待进一步的人性化，希望不久后可以拥有更广阔的屏幕视野和挥洒自如的操作体验。

（二）iPhone和Android 的返回手势研究

安卓全面屏最近出现的边框侧滑返回手势大获好评，例如MIUI手势中左右边框都能侧滑返回，左右手都能单手使用，对于用户在特定场景下使用来说是较为便捷的，且左右边框下半侧为返回，上半侧为应用自身的功能，两者之间不会产生矛盾。但是苹果目前却迟迟没有更新边框侧滑返回这一手势，对于这一手势的看法网络上也是众说纷纭。

首先从时间上看，苹果的滑动返回是2013年在IOS 7引入的，一直到全面屏时代，这么多年过去苹果不可能想不到更多的手势。其次从风格上讲，苹果的风格稍显偏执，只会在系统中添加自己认为需要的。但若考虑到包括空间在内，质量惯性、弹性阻力、加速度等物理概念因素，还得是自然且符合直觉的设计，相比之下安卓是稍显逊色的。因为安卓没有动画，都是直接闪现消失，所以不存在苹果所秉持的空间一致性的问题。再者，在手机屏幕同一水平线仅几厘米位置，就包含了“左滑上一页”“边缘左滑返回”“右滑下一页”“边缘右滑返回”操作，如果是完全按安卓规范设计的应用，还得加上“边缘右滑唤出菜单”操作，共5个操作，误操作的概率将会很高。但是这里也涉及设计优先还是功能优先的问题，经测试，“侧滑返回”这个手势在实际使用场景中确实较为便捷，若是苹果仅因为一个逻辑问题就不用“侧滑返回”手势，这就和讨论设计与功能谁优先不同，而是为了设计放弃了功能，在讨论两者谁优先之前至少得两者都存在。

从滑动操作的使用范围上，IOS使用的地方比安卓要多，不管是宏观微观都在使用，而安卓不论是滑动的bottom bar还是tab bar都是偏向于全局模块控制的，但是在规范里加入了底部导航栏后安卓是支持滑动的，而IOS则不支持。对于左右方向的滑动，IOS和安卓都很常用，但是内在邏辑不同，由于有返回键也就是底部三大金刚虚拟键的存在，安卓不需要右滑返回上一级，而IOS非常需要。IOS的屏幕左滑会和table cells控件左滑发生冲突，所以一般IOS不会有屏幕左滑的操作。但是在安卓中，左右滑动是平级的tab切换，跟IOS的用途完全不同，所以不能等而视之。IOS开发最主要的问题其实是不统一，例如有一些边缘返回、一些全屏返回，还有一些必须左上角返回，哪怕主流APL也有页面就突然不支持侧滑了。苹果本身的APP，比如相册做得不错，但是App Store首页的展示位，点进去再退出来的时候是侧滑到中间会停顿下，不能说难用，只能说太不一致了。现在的手机屏幕越来越大，比如用iPhone xs max来操作单手返回应该是很麻烦的，其实iPhone可以考虑在底部横条上附加返回和多任务横向滑动操作。

不考虑底层逻辑只看表面，IOS和安卓的系统确实做得越来越像了，其实作为用户来讲，是希望他们交互上越来越统一的，相同场景下相同属性的产品，交互逻辑及操作当然越统一越友好，就像返回icon永远是“向左的箭头”。交互方式中的各种手势，也是因为需要才会去了解，对初级用户和中级用户来讲基础功能够用就可以，并且手势教程也是需要用户承担学习认知成本的。如果只是简单的引导，那么对于初中级用户是可以的，而更深层次的探索，对于一些用户来说只会增加学习成本。

四、结语

手势交互将交互方式由看得到变成了记得住，毕竟形成肌肉记忆，将很难忘记。那么交互手势是不是越多越好呢？其实不然，我们在进行信息处理的过程中更多的精力应该集中在信息处理本身。交互手势只是信息处理的载体，就像我们享用美食是一样的，吸引我们的是盘子里的菜品和品尝后给我们的感受，而不是我们使用了怎样的碗筷，新的手势交互也应该遵循已经建立好的交互设计原则，使这样的输入形式更容易被用户认识和理解，而不是为了形式滥用更多的手势。我们更应该关注的是信息处理本身需要怎样的处理手势，而不是有了多样的处理手势再寻找怎样去处理信息的机会。

参考文献：

[1]张宏源.基于视觉的手势识别新方法综述[C].中国计算机用户协会网络应用分会.中国计算机用户协会网络应用分会2017年第二十一届网络新技术与应用年会论文集，2017.7-12.

[2]易靖国，程江华，库锡树.视觉手势识别综述[J].计算机科学，2016，43（S1）：103-108.

[3]娄泽华，殷继彬.人机交互中的手势设计原则分析[J].软件导刊，2018，17（04）：19-24+35.

[4]陈思聪.基于移动端用户界面的交互手势设计创新研究[D].北方工业大学，2017.

[5]梁磊磊.基于触屏手机的单手手势交互设计浅析[J].工业设计，2017，（03）：95-96.