移动创新——手势流的妙用

本文来自LukeW，以地图应用为例讲解了手势流的妙用，给移动设计上交互提供了新的思路。

阅读原文请戳传送门

欢迎关注我的微信公众号“开卷有译”获得新文章推送。本文为原创译文，如需转载请联系作者，注明出处微信公众号“开卷有译”或原文地址。

-----------------我是分割线----------------

在大部分的移动应用中，完成一项任务通常都需要很多次点击。但是由于可发现性的问题，设计师似乎总是有意避开使用各种手势。然而，最近Ralph Thomas设计的一个有关手势流的交互原型让我重新燃起了对移动手势操作的热情。

Ralph的设计在于用独特的方式来减少常用操作的点击数，接下来让我们通过常用应用进行分析说明，以iOS自带的地图应用为例， 用户最常用的一个操作就是导航。在目前的设计中，完成这样一个操作至少需要三次点击：1.点击搜索框；2.点击选择你的目的地（如果在推荐列表中）；3.点击开始。

现有交互流程

我们可以使用Material Design中的浮动按钮来优化此流程，点击搜索按钮会展示推荐的目的地，然后通过再次点击选择地点。虽然有些操作变得更简单（例如，导航回家或是到最近去过的地点），但是直接搜索却需要多些工作（两次点击，比原来增加了一次）

使用浮动按钮FAB后的流程

使用手势流的设计能够减少这些基本操作的点击数，从而增强交互体验。你只需按下浮动的搜索按钮然后保持手指不离开屏幕继续往上移动，直到目的地的按钮。例如，移动到“家”然后松开手指，地图就会马上进入导航模式，带你回家。相比之前的三次点击，你只需要一个手势流的操作。

加上手势流之后

需要注意的是，之前描述的点击方法仍然有效。手势流操作可以作为重要或是常用操作的快捷方法。因为手势毕竟是缺乏视觉识别的，所以最好的方式就是作为明显但是操作较慢的点击流程的额外补充。

同样的手势流操作也可用于触发搜索。你只需按下浮动按钮然后向左拖动至搜索框。相比之前需要两次点击的操作，这样简单的手势就能调出更为详细的搜索列表，系统键盘也同时弹出便于输入搜索。

用手势流提供附加选项的设计

再深入一点，手势流甚至还可以为附加的选项提供交互的空间。首先移动到目的地，保持手指不放开继续向侧面移动，你就可以选择到目的地的方式：自驾、公共交通、步行或是骑行。继续移动到你的选择上然后将手指移开屏幕就可以执行操作了。这样附加选项的设计可以作为手势流的扩展，不过你一旦采用了，又减少了一次点击，从四次点击变成了一个手势流的操作。

我很高兴见到这样手势流的设计，它能优化移动交互流程，减少哪些复杂的点击操作。更多的细节，大家可以参见Ralph的原型以及文章。

-----------------我是分割线----------------

本文为原创译文，如需转载请联系作者，注明出处微信公众号“开卷有译”或原文地址。