移动设计中不可或缺的交互

经验分类： 经验/观点 / 自译外文 原作者： Chris Bank

手势和动画对移动设备游戏的改变

在这篇文章中，来自UXPin（一款在线界面设计应用）的克里斯·班克（Chris Bank）介绍了移动应用交互的重要性，以及它在设计模式上的影响力。更多的细节可以阅读UXPin的免费电子书《Mobile UI Design Patterns 2014》，书中有超过50个热门移动应用的案例。

绝大部分新兴的用户界面设计模式的核心都只是对移动应用开发中的手势和动画的改进。

根据最新的营销活动了解到，要做出一款令人惊叹的移动端游戏，需要良好的交互性以及拥有精美的品牌网站。这就让移动应用设计师和开发者不得不承认交互的重要性。如今，各大市场中的应用在不同层次上都体现了交互性，比如：用户行为、导航、社交。不过这也是最近10年才发展起来的，而且都被重新定义以适应于新形式的移动设备，只以某种唯一移动设备的开发至今还不存在。

在我另一篇文章《移动设计模式：实际效果》中，总结了如何看待设计模式，深入了解手势和动画对长期困扰设计模式的问题的实现，以及构想出新的设计模式。为了表明自己的观点，我在《Mobile UI Design Patterns 2014》一书中以最热门的移动应用做为案例分析了大量的设计模式。这些应用包括：Uber，Pinterest， Tinder， OKCupid，Spotify，Instagram，Dropbox，Secret，Flipboard，Snapchat，Mailbox等等。其中一些用户界面设计模式和元素在UXPin的免费电子书《网页设计趋势》，《移动设计趋势》和《线框图指南》中也有介绍。东西太多，记得保存书签哦！

手势

还记得浏览网页时，只能通过点击、滑动、滚动和键盘快捷键来交互的日子吗？虽然如今它们不再是唯一的交互方式，但它们的确主宰了浏览网页时的用户体验。

从另一方面来看，移动领域已经随着新设计模式的实现迅速扩大。也因为硬件和软件的持续发展，移动应用设计也随着史无前例的人机交互模式逐步发展成为现实。新的手势为解决方案提供了可能性，也因为响应式设计的进步，网页和移动端设计同步化加剧，使得应用程序能够适用于各种形状和尺寸的设备。同时，这也对网页体验的设计产生了重大的影响。

我们来看看安卓现有的手势，你的直觉认为像日历，信息或者相册这样的模型会有多少种交互方式？

网址点此

    再来看一看苹果珍藏的多点触控专利手势，相信你的脑袋里一定会充斥着各种能够设计的解决方法。下面给出的示例来自2010年的专利备案，已经有很多都被实现了，苹果公司的专利手势文档中一定远超这些示例。你可以把它当作是“少数派报告”未来的一种预见吧。

网址点此

    安卓系统，苹果系统和其他移动平台还会继续增加各种各样的手势，自然地实现应用中特殊的行为和导航。这不仅仅是去除屏幕上的按钮来保持屏幕的真实形态，更重要的是让体验变得直观有趣。再将这些手势和多样的动画结合起来，总有一天你就能够把用户界面设计模式应用到你的移动应用中。

动画

在移动终端使用手势让用户觉得使用很自然，响应也很真实。而动画扮演很重要的角色，放飞用户的幻想却又把他们限制在用户界面内。

除了有形的动画，他们还经常使用自然的法则和规律。定时，速率，弹力，图像和颜色过渡，滚动，以及各种设定。这些法则让用户觉得设计师的手段无穷无尽，充满了惊喜。

多种动画和手势的结合不仅增加了体验的乐趣性，也为用户提供了宝贵的视觉反馈。这里只做简要说明，之后我们会在博客和设计库上做深入探讨。

Captivate上可以看到有名的移动应用动画。

如果你想看许多没有装饰的过渡，Dan Silver或许能给你灵感。

交互基础示例

Pinterest，当今时代最具有成效的拟真交互电子商务公司之一，其移动应用中的“可被发现的控制”模式令其大放异彩。下面，我要详细地说明这种模式要解决的问题，以及如何完美地运用动画和手势。

用户的问题

用户想要在不中断体验的前提下和内容交互。

Pinterest的解决方案

Pinterest通过移除主要显示区域中几乎所有多余的信息和操作按钮来避免典型的电子商务或者信息网站的那种复杂体验。这种接近极简的主义让用户通过观察，拖动，滑动，触摸等方式去做最紧要的事，没有干扰，也不会分散注意力。

如期望的一样，当用户点击图片时，可以详细了解吸引他们的图片的更多信息。不仅如此，还可以进行其他的一些操作，如锁定，发送，或者是随心所欲的编辑图片。没有特殊声明的话图片可以随意使用。可是，如果长按图片，他们会发现从手指触摸的地方冒出了具有同样功能的3个气泡。当用户想去点击气泡时，手指离开屏幕它们又会消失。多次尝试这个过程后，用户很快学会需要将手指一直放在屏幕上，通过拖动手指到某个气泡按钮上来操作。这样做了过后，手指悬停的气泡会快速渐变成红色，告知用户这个按钮被选择了。一旦用户手指离开屏幕，这个动作就生效了。

可见的控制按钮配上娱乐性十足的动画，再加上符合直觉的手势控制，整个体验过程都会轻松愉快。类似Pinterest或者其他站点的功能，“可被发现的控制”设计模式，让内容更加切实，让人着迷。

乘上交互的浪潮

现在是移动设计令人振奋的时刻，移动应用中运用手势和动画已成爆炸之势发展。想要了解更多关于著名公司是怎样将手势和动画融入已经存在和新的设计模式中，请阅读UXPin的免费电子书《Mobile UI Design Patterns 2014》。使用你需要的模式，剩下就不用理会了，但一定要保证将他们调整到适合于你自己的问题，最重要的是适合你的用户。