指尖上的UI设计，移动端设计中的手势交互

还记得浏览网页时，只能通过点击、滑动、滚动和键盘快捷键来交互的日子吗？而现在，它们不再是唯一的交互方式，当苹果推出第一款iPhone时，多点触控技术成为了主流，用户们了解到，他们不仅可以在界面上指向、轻点还可以捏合、展开和滑动。手势成为新的操作方式。

一、UI中手势的力量

手势非常自然和直观，他们与真实世界反应类似。

对于使用手势，这里有三个主要的理由：

● 干扰少

App内，手势控制使用地越多，在屏幕上出现的按钮就越少，这样可以留出更多空间给更有价值的内容。这使得app以内容为重点，并让用户在没有障碍，或者在分心的情况下也能进行最重要的操作。

● 使用简单

一个手势一旦被用户发现和学习使用就会让用户在体验感到愉悦，而且手势可以减少步骤，来达到提高交互体验的目的。例如，当你需要删除一些项目时，用“一次点击删除一个”的方式的很浪费时间的，但是如果使用“滑动一下，删除一个”的滑动手势，就更简单快速，让用户更加愉悦。

● 无缝交互

虽然按钮看起来对于触发响应更加有用，但手势具有更大的潜力，使内容的交互更加直观。

二、手势的缺点

但同时，手势也存在难规范、易混淆等缺点。

● 增加用户负担

大多数手势学起来或者记起来不自然也不简单。举个例子，在大多数APP，一个手指的手势就对应一件事，用两个手指做一个同样的手势意味着另外一件事，其他对应事件的手势还有很多。

● 缺乏反馈

在大多数情况下，手势不会留下任何路径记录。这意味着，如果做一个手势但没有得到反应或者得到错的反应，这样就只能获得很少的信息或者不能获得有帮助的信息去解释为什么这么做。

● 缺乏一致性

大多数手势在app中还不是标准统一的。他们对于用户不总是显而易见的。甚至一个简单的滑动手势，在众多邮箱app内的邮件项目中也有着不同的工作方式。例如，在Apple Mail 中，删除一个未读项目，你应该向左滑动这个没有打开的邮件，然后界面会出现选项来删除这个项目。在Gmail里，向左滑动可以把邮件标记为未读状态。

三、手势成为移动端UI成功的关键

1、如何选择好的手势

如果你的界面里要使用手势，那你就必须要去了解你所在的市场以及你的目标用户会去使用的app。要尝试在你的app里使用和它们相同类型的手势。这样，你不仅基于你的目标市场的用户的行为优化了你的界面，还让用户从一开始就能舒适的使用你的app。

2、手势教学

虽然每个移动端app都必定会用到手势，但是要让用户很自然的就能知道如何操作(使用什么手势可以干什么)却一个挑战。可触摸的界面提供了很多条件来使用自然的手势，例如轻点、滑动和捏合来完成任务，但是不同于图形界面的操作，手势的交互用户往往是看不到的。

因此，要让用户能发现手势是很重要的。你需要确保你提供了正确的线索----通过视觉引导来帮助用户更容易的发现如何与界面进行交互。

3、如何在情境中教育用户

教程和演示的做法相当流行。在许多app中加入教程意味着要想用户显示一些说明内容来介绍界面。然而，UI教程不是介绍app的核心功能的最优雅的式。

良好执行的UI手势总是可以在易于实现视觉提示和渐进式披露的游戏中找到。这显而易见，最好的游戏可以使人们随着时间的推移来学习到技巧，而不是靠指导他们。例如，PuddingMonster 的游戏机器完全基于手势，但是他们允许用户得到基础的信息，他们不需要做很多的猜测。他们可以展示动画场景，让用户马上知道要做什么。

四、使用动效来传达手势

手势总是与移动app中的动效相关联。动效在维护用户体验中起着非常重要的作用。作为设计师，你可以利用动效来传达出用户可以进行某个操作。当动效与手势一致时，用户就会意识到自己与该物体正在相互作用。

动效在向用户提供视觉反馈上是非常重要的。没有动效，用户就不能获得足够的信息反馈，不能确定他们是不是成功地完成了手势动作。

这里有三种流行的基于动效来帮助用户学习手势。

第一种：动效视觉提示

显示一个在执行某个操作时如何和某一个界面元素进行交互的预览。它的目的是在手势和操作之间建立联系。例如下图中的这个游戏app是完全基于手势操作的，这个app让用户不用去猜测就能知道该如何操作。用动画来传达功能信息能立即让用户清晰的知道该怎么做。

第二种：内容的梳理

内容梳理是通过微妙的视觉线索来暗示用户进行手势操作。例如下图中卡片的展示，它表明这张卡的背后还存在着其他的卡片，这清晰的表明了可以滑动卡片。

第三种：功能可见性

你可以让你界面里的某些元素具有很明显的可供性来让用户知道这个是可以进行某种操作的。例如下图中点击相机icon后锁屏就会从下往上弹起，展示出在下面的相机功能。

UI设计一款移动端的app一定要思考手势设计。手势应该起到协调和节约时间的作用。为了设计一个有意义的手势，你应该规定一个动作以及与其配套的一个手势。提供反馈意见也非常重要，对于可能要进行的行动要有明确提示，并进行手势的引导。