「手势操作」如何表达App中的手势操作

手势操作

在移动应用和网页中没有万能的方法展示手势。不过在教育用户操作界面时，我推荐使用内容暗示、渐进式提示和微动画。教程和引导页是万不得已才会使用的方式。

手势，是那些能够与应用程序进行交互的手指动作。触摸屏提供了很多自然手势比如：点击、滑动、缩放等活动。但是不同于用户图形界面控件，这些交互行为很难被用户发现，除非他们提前知晓手势的存在，否则他们不会尝试。

如何引导用户发现隐藏的手势操作呢？还好有一些视觉方面的交互设计技巧可以让用户知晓。

一. 首次打开时的教程和引导页

在手势类的应用里，教程和引导页是常用的办法。多数情况下在APP中加入教程意味着向用户提供界面的说明。但是，UI教程不是一个解释核心功能的最高明的方式。这个方式存在两个问题：

如果你必须出一个使用指南才能让用户明白，说明你的界面没有很好的传递信息，因为用户不应该被要求在使用App前还得先读一下操作指南才行。

教程导致的另一个问题是：一旦用户进入应用，他们不得不记住所有新的使用方式。

比如，Clear 这款App开始使用时会有长达7页的教程，用户不得不耐心读完所有信息并试图记住他们。这是个很糟糕的设计，因为用户需要在使用它之前就付出大量精力。

Clear 的教程

为了避免强制性的多步引导页并试图在操作需要的坏境下教导用户（这时用户需要切实使用），借助逐步的引导，用户教程可以变成更为渐进的操作探索：

“专注于单个交互操作而不是试图解释用户界面的每个可能产生的操作”

以Android版的youtube的手势教育为例：

Android版 youtube App

这个应用有一套基于手势的交互操作，但并未使用教程来指导用户。相反，他为新用户首次打开的启动页提供了提示，每次只提示一处，且只在用户触达到相关功能时出现。

二. 如何在情境中教育用户

在情境中教育用户的技巧可以帮助用户先前从未尝试过的方式操作一个元素或界面。这种技巧通常包括细微的视觉提示和微动效。

1. 纯文本命令

这个技巧主要基于文本指令，可以促使用户使用手势，并且用简明的描述介绍操作产生的结果。

注意：使用简短的文字描述说明－文本越短，用户越可能使用它并遵从说明。

2. 提示动效

提示动效（或动画提示）展示了某个操作的效果预览。例如，Pudding Monster只使用了基于手势的技巧，就能使用户不必过多猜测就掌握了游戏的基本玩法。动画传达了功能的信息——用动画来展示一个场景，用户立刻知道该怎么做。

3. 内容暗示

内容暗示是一种微妙的视觉提示，指明了操作的可能。下面的例子阐释了卡片的内容暗示。它简明地展示了隐藏在当前卡片之后的其它卡片，很明显卡片可以滑动。

结论

总而言之，在移动应用和网页中没有万能的方法展示手势。不过在教育用户操作界面时，我推荐使用内容暗示、渐进式提示和微动画。教程和引导页是万不得已才会使用的方式。

英文原文：How To Communicate hidden Gestures in Mobile App

原文地址：http://babich.biz/how-to-communicate-hidden-gestures-in-mobile-app/

译者：Meng，微信公众号：「微信ID：DR_DDC」

题图来自 Pexels，基于 CC0 协议