如何通过手势驱动，打造超越传统按钮的移动界面设计？

了 通过静态线框图就可以设计方案在视觉及交互层面的表现。

开始行动吧

我有时甚至会为一些项目制作概念视频， 展示界面设计方向及交互模式；在某些时候，这种更酷的方式确实可以帮你争取到更多的利益。

若干年之后的今天 连小孩子们都已经习惯了触屏体验，好像这是非常自然的事情，而家长们也会惊叹于他们的孩子可以如此迅速的学会使用触屏设备，包括手机和平板。这也体现出触屏设备及基于手势的交互模式所具有的巨大潜力，它们让移动体验变的更加容易和有趣。

一上一下两个栏位的高度加起来差不多就是整个屏幕高度的20%了在我看来这确实是个问题。对于屏幕规格如此有限的设备 界面中的任何一个像素都要用在重要的功能与内容上，寸土寸金的说法再合适不过了。

为UI元素添加解释说明也不是唯一的引导方式。在Sparrow中，搜索栏会默认呈现几秒钟，然后自动向上移出视图。这就相当于告诉用户可以通过下拉界面的方式找到搜索栏，它只是在你用不着的时候藏起来了而已。

挑战导航栏、 标签栏、工具栏与按钮

举个例子，我很喜欢Facebook与Gmail应用当中的侧滑菜单，非常好用。平时这些菜单是隐藏的， 你在界面上向右滑动就可以使其向右延展开来；这种模式不仅使界面在普通状态时更干净，内容展示空间更大，而且要访问菜单时也只需通过很简单的手势操作便可实现，滑动手势本身也无需精确定位在屏幕上的某个位置。

将视野放大， 想象出当前界面所处的2D或3D大环境，然后考虑独立的导航容器可以被放置在这个环境空间中的什么位置上——与主界面左右或上下相邻？还是在主界面的“前面”或“后面”？通常，一个简单的拖拽或横扫的手势就可以让这样的导航容器呈现出来。不管怎样，这些都可以由你根据实际的产品情况来设计和定义。

在这个不该缺乏创新精神的行业中， 设计师们需要花些时间来思考和探索，试着设计出更具创意一边又更好用的界面。根据苹果一直以来对于“不遵守游戏规则者”的态度，我们也可以想象比方说Clear和Rise这样的应用在上架之前会浪费不少的时间用于等待。不过还好， 它们到头来还是上架了；虽然这两款应用代表了那类在设计风格的突破上走的比较大胆和极端的产品，面向的用户并不真正大众，但不可否认的是我们确实在它们当中看到了手势驱动的界面设计所蕴藏的创意潜力。

这种方式为应用增加了一个具有创意色彩的“情境维度”， 拖拽手势的运用使音乐与新闻并没有成为互不相关的独立区域，用户可以随时根据自己关注点的变化在两者之间进行调整，并且不会使任何一类内容完全脱离上下文环境。

除了导航以外你也可以通过这种思路呈现那些与当前内容相关的上下文功能。明摆着， 在每个内容条目中都塞进两三个按钮是非常讨厌的事；按钮看上去固然是很明确的可点击元素，但手势在交互效率和趣味性方面则更胜一筹，你完全可以考虑通过简单的点击、双击或长按来呈现更多针对当前内容的功能。比方说在Instagram中，用户可以通过双击来完成“赞”或“取消赞”的操作。

用户点击一个交互对象时会触发哪些行为的产生？你怎样使这些行为变的可视化？一个界面元素从无到有的呈现到视图当中需要花多长时间？超过几秒钟没有接收到来自用户的交互行为时某些元素是否需要自动隐藏？

要打造手势驱动的界面你可以先说说试着使应用主界面本身成为主要内容视图，而非传统意义上的内容入口。无需强迫自己接受“主界面必须始终呈现重要导航结构”的思路，导航本身完全可以拥有属于自己的独立容器。

很多应用会在初次加载时提供新手指南，对界面进行必要的说明。不过我个人比较赞同Max Rudberg的态度， 即只对那些最重要的交互操作进行说明，而且不要一次解释太多东西，主要原因是如果这些内容太长太零散，用户很容易选择跳过。

比方说Pop和Invision这样的原型工具可以帮助我们为线框图赋予生命， 使我们能够更好的流程，精确定位用户可能遇到操作问题的环节。移动应用绝不只是来来回回导航浏览那么简单， 你需要尽早发现各种bug，还有会使用户产生疑惑的潜在问题；还有啊，你也不想让那些程序员先说说发现并为你指出这些问题，对吧？

用户的学习成本

我们需要探索和理解触屏设备及手势操作的潜力， 更多的关注时间、交互空间维度和动画过渡效果。正像很多优秀应用产品所呈现出的，手势操作可以使产品体验更聚焦于内容本身，并带来更多乐趣。有些手势在刚刚投入到实际运用当中时显得非常具有实验性， 甚至有些极端，但时间证明了它们是可以带来上乘体验的交互模式。

苹果在HIG中给出了很多重要的、 被广泛遵循的设计建议，比方说对于UITabBar和UINavigationBar这类导航控件的使用规范等等，都是我们一直以来所追随的。其实吧， 如果你所设计的第一款iPhone应用当中不包含任何顶部导航栏或底部标签栏、工具栏，那么截图发给我，我会请你喝啤酒。

在设计一款非常具有创新色彩的移动应用时很难准确的事先预测用户的行为。与比利时广播电台合作期间， 我们的团队在可视化音乐播放与即时新闻呈现之间的界面平衡性方面着实纠结了很久，主要原因是有太多的上下文情境及参数需要考虑，所以很难达成一个在各方面都很完美的设计方案。于是我们决定，允许用户通过一些简单的手势操作来根据自己的需要自由调整界面的平衡。

一个界面适用于多个情境

要更全面的了解各种手势在更多平台设备中的运用方式， 可以看看Luke Wroblewski的“Touch Gesture Reference Overview”一文，希望你能在里面找到一些灵感并在自己的产品中有所实践。再说一个记得，在条件允许的时候，不要害怕去走那额外的一英里充分利用交互原型来挖掘和展示自己的设计方案。那么让我们开始行动吧！

为了让自己的设计工作更具创新色彩， 甚至是实验性，你要尽可能与客户或需求方就交付物的问题进行交流沟通，让他们知道传统的静态线框图不再是他们真正需要的了。尽量展示可交互原型的价值，逐渐将这种形式转变为一种标准。这固然会多花些时间，甚至导致预算方面的问题，但要打造出色的产品，这些还是划算的。

在设计由手势驱动的交互模式时 要记得一点：你每移除掉一个显性的界面元素，用户的学习成本就会上升一点。失去了视觉指引，用户很有可能不知道怎样与界面进行交互。有时你可以通过一些说明文字进行弥补，但最重要的是要确保用户在初次使用时能够顺利的上手。

苹果的“人机界面设计规范”及严格的审查机制对于移动应用质量的提升起到了巨大的推动作用，使很多的设计师与开发者了解了移动UI体系中的核心界面元素及交互模式的运用方式。

iOS设备曾经引领了一场人机交互的变革， 仅仅5年之后触屏移动设备就已经普及到我们身边的各处了而作为UX设计师，我们又将一点点的重新定义人们使用数字内容的方式。

为什么不在用户实际使用的过程中逐步解释UI元素的作用呢？

这种模式通常被叫做渐进呈现，也就是在具体行为过程中动态的提供与当前状态最具关联性的信息。以YouTube的Capture应用为例，他们只会在用户第一次使用拍摄功能时提示用户通过调转设备方向来开始操作。

时间、 维度与动画效果

用户的学习成本

打造手势驱动的界面

在接下来的内容中，我们将深入探讨手势驱动的界面设计，从技术细节到具体实现方法，以及如何通过手势驱动打造超越传统按钮的移动界面设计。让我们一起来探索这个充满潜力的领域吧！

---