移动app交互设计：如何把“手势流”装进手机

【文章摘要】在智能交互中，手势已成为新的“点击”。

 

现在每次打开手机里的app、游戏时，都需要用到点击、拖、拉等动作。单看点击的话，设计师与开发者只需要考虑用户点击屏幕哪里体验更好。但是手势不同，手势操作还需考虑什么动作，屏幕落点在哪里，用户能否直观地看到并使用。

 

手势的设计能让界面看起来更炫，因为一系列动作都潜藏在界面内部。手势减少了用户操作的繁琐度，同时可以和不同规格的设备*交互。

基于此，我们来一起看一些现在很流行的app中都应用了哪些“手势流”。

常用手势引导

手势操作是用户通过手部运动，在界面内控制设备的操作过程。就像uxpin发布的2015-2016移动设计趋势中描述的那样，手势操作是手部运动，但也包括摇晃、倾斜设备等操作。

 

由 craig villamor等人设计的手势的特定含义详细地描述了十几个动作，并说明它们是如何运作的。这些手势是由执行特定任务和常用移动设备的用户行为设置出来。

 

这些是用户最常用的姿势

单击：轻碰界面

双击：两次快速点击界面

拖：手不离屏幕保持移动

变形：手不离屏幕用两个手指改变界面大小

滑动：快速移动

弹开：快速卷动

每个动作都需要在用户可操作的范围内。现在也没必要担心手势会有什么问题，因为随着大屏手机销量越来越大，人机互动会越来越普遍。不过在设计中要注意的一点就是，拇指的位置，这里被叫做“拇指区”。很多时候我们单手拿手机时都会用拇指滑动屏幕，拇指是操作手机时最常见的手指。所以，拇指能在手机上碰到多大区域也要考虑清楚。图标的规格也很重要。每个图标都需要设计足够大，以保证多大手指的人都可以在界面上*操作。

基于该原则，图标最好设计成宽高44点。屏幕更大时，图标扩大至70点，这样可以使手指更容易点击。

关联手势和动画效果

移动设计中，手势和动画一定是息息相关的。动画是用户在完成整个动作之前，与app交互最直接的信号。

动画的5个最基本的功能：

动画通知

信息披露

突出内容

折叠形式和菜单

卷动

回想一下每天你在操作手机过程中会遇到多少这样的动画。以dark sky天气app为例。

 

除了预报天气冷暖，dark sky在整个app的设计中都用到手势和动画，让用户在操作中有更好的用户体验。

动画和手势操作是密不可分的。没有动画，用户就不能判定自己是否完成指令。最好把手势作为整个操作中的一环，而非单独设计。

有了这些，我们从手势操作中获得的反馈会不太一样。

苹果和3d touch

手势操作对手机来说是非常重要的平台，像苹果和andriod 的研发者都在尝试创新。

2015年最新手机iphone 6s 引入新技术，3d touch。从3d touch开始，手势操控升至新级别。设备会辨别屏幕所受的压力，然后发起相应的指令。这种触控的不同点在于分层接口。在你进入下一层之前，压力会提示预览动作。

 

地图界面

在上图苹果手机的例子可见，有人通过短信发给你一个地址，轻轻点击连接地址就弹出来了。当你把手移开时，弹框就消失了。如果你更用力的话，地图上所有地点链接都会打开，时甚至有被撞了一下的反应。这是一个关于在单一的触控页面下，元素在跨应用程序上如何实现无缝对接。

此外，在苹果的用户界面设计准则上，介绍了一些触控并且如何使用。

避免将不同的动作和标准的手势联系在一起

避免创建自定义的手势，调用相同的动作作为标准手势

使用多种手势作为快捷方式加快完成任务，而非唯一方式

避免定义新的手势，除非你的应用程序是一个游戏

在正常环境中，考虑使用多手指操作

这会改变我们与iphone手机的交互方式，当然用户肯定需要一定的调整期。所以当设计3dtouch时最好考虑到这点，何时应用3dtouch更好。因为相同的手势对旧版手机来说可能就无效了。

材料设计改进的手势操作

当苹果从不同的角度提示我们如何触控手机时，谷歌开始玩起概念游戏。操作和运动有何不同?在不断发展的材料设计文档中，谷歌精准描绘出这些动作如何工作。

为简化用法，使用指南创造出一系列的运动规则。手势共有的缺点在于一个动作可能引起多重反应。本文介绍了如何把手势当做触发器以使你可以做很多事。

 

当提到手势操作时，材料设计一般包括拖、刷、摇。

拖是一个控制力更强的手势，与触摸目标结合使用

刷是一个快速的手势，不需要触摸目标

摇动并不需要触碰

这些动作口令都是将速度看做唯一准则，凭借速度的优势，这些动作可能更容易被用户使用。

它是这样打破的：

拖仍然是和某个元素保持接触，但是改变手势方向后，可以撤回

快速移动删除，防止被撤销

在结束速度的基础上，滑动变成了一个手指的一个动作，该元素是否越过了一个动作可以被撤消

复杂手势

越来越多手势开始打破“一次动作一次反馈”的旧模式，多个手势一起。结果就是复杂的手势。这个技术是在游戏中最常见的，而且已开始扩展到其他app中。

 

复杂手势需要三级动作完成任务。

开始：最开始的接触，例如点、压

延续：在一个特定的序列中应用多个手势，如次在屏幕上使用拖拽操作看看会发生什么

终止：结束与屏幕接触的手势结束

试想一下最流行的游戏，例如愤怒的小鸟。在用小鸟摧毁目标的过程中，你必须完成如下动作：

点击，抓住并在屏幕上沿着正确的轨迹，发射小鸟

松手，小鸟飞向目标

聪明的触控不仅仅是动作

 

动作缩略图

聪明的触控不仅仅完成一个任务或者动作，正如交互设计最佳体验里写到的，他们应该让用户开心，也可以做一个教学工具。

最好的手势交互需要考虑用户如何与设备接触

高举一只手

高举两只手

双手水平

根本不用手(……)

你知道那些用户使用你的app时如何操作吗?需要进行用户教育吗?这听起来非常重要，有时同一个动作在不同app会有不同反应。

对比一下soundcloud和clear。二者使用同样的手势操作，但是app反馈大相径庭。

 

 

soundcloud里，点击一下就能打开歌单或者播放歌曲;而在clear，点击后是从任务列表中找到你想听的歌。

在完成动作时用到的点击和刷新动作的范畴是一致的，但是特殊触控就会有不同而含义。

最关键的是，用户发生的行为因为简单的视觉艺术便可无缝对接。多亏了它的普及，基于接口的soundcloud一经出现就很容易被接受，因此也不需向用户解释点击和滑动的区别。clear的非常规矩形的模块化设计，暗示每个矩形在刷的时候好像一张纸。

最后，切记手势操作不要承担太多意义。

下一步怎么样?

其实，手势操作还可以触及到更本质的东西。大多数的手势操作是以指尖为基础，如果加上身体的使用，触控的定义会涉及更广。大多数的触控都是停留在静态设计层面，随着视频和动画的不断使用，手势操作也可用到更多动画。

 

以haze天气app为例。随着温度变化，app会显示不同的图层颜色，效果非常震撼。

手势操作也可以让不同app之间连接。例如，不同应用程序之间的拖放操作。

 

workflow是一款ios系统的app，可以在不同应用程序之间拖放。这种自动化工具很聪明，完全植根于动画程序。

当提到和衣物的交互时,触控将扩大到物理事件的范畴。比如摆动手臂发送文本或摇动手腕就能给语音信箱留言。脑洞大开……

总结

现在设计一款不用手势操作的手机app有点自寻死路的即视感。手势操作这一小步，是手机设计进程中迈出的一大步。也会对日后设计者和用户产生更大的影响。

当然，这个秘密与任何其他设计方案的思路是一样。新的手势操作一定是用户凭直觉就能接受的，或者稍有提示用户就能明白，而非复杂繁琐。如果做得好，新的即将被大众接受的app就会很快出现。