在移動(dòng)應(yīng)用和網(wǎng)頁中沒有萬能的方法展示手勢(shì)。不過在教育用戶操作界面時(shí)，我推薦使用內(nèi)容暗示、漸進(jìn)式提示和微動(dòng)畫。教程和引導(dǎo)頁是萬不得已才會(huì)使用的方式。

手勢(shì)，是那些能夠與應(yīng)用程序進(jìn)行交互的手指動(dòng)作。觸摸屏提供了很多自然手勢(shì)比如：點(diǎn)擊、滑動(dòng)、縮放等活動(dòng)。但是不同于用戶圖形界面控件，這些交互行為很難被用戶發(fā)現(xiàn)，除非他們提前知曉手勢(shì)的存在，否則他們不會(huì)嘗試。

如何引導(dǎo)用戶發(fā)現(xiàn)隱藏的手勢(shì)操作呢？還好有一些視覺方面的交互設(shè)計(jì)技巧可以讓用戶知曉。

一. 首次打開時(shí)的教程和引導(dǎo)頁

在手勢(shì)類的應(yīng)用里，教程和引導(dǎo)頁是常用的辦法。多數(shù)情況下在App中加入教程意味著向用戶提供界面的說明。但是，UI教程不是一個(gè)解釋核心功能的最高明的方式。這個(gè)方式存在兩個(gè)問題：

如果你必須出一個(gè)使用指南才能讓用戶明白，說明你的界面沒有很好的傳遞信息，因?yàn)橛脩舨粦?yīng)該被要求在使用App前還得先讀一下操作指南才行。

教程導(dǎo)致的另一個(gè)問題是：一旦用戶進(jìn)入應(yīng)用，他們不得不記住所有新的使用方式。

比如，Clear 這款A(yù)pp開始使用時(shí)會(huì)有長(zhǎng)達(dá)7頁的教程，用戶不得不耐心讀完所有信息并試圖記住他們。這是個(gè)很糟糕的設(shè)計(jì)，因?yàn)橛脩粜枰谑褂盟熬透冻龃罅烤Α?/p>

Clear 的教程

為了避免強(qiáng)制性的多步引導(dǎo)頁并試圖在操作需要的壞境下教導(dǎo)用戶（這時(shí)用戶需要切實(shí)使用），借助逐步的引導(dǎo)，用戶教程可以變成更為漸進(jìn)的操作探索：

“專注于單個(gè)交互操作而不是試圖解釋用戶界面的每個(gè)可能產(chǎn)生的操作”

以Android版的youtube的手勢(shì)教育為例：

Android版 youtube App

這個(gè)應(yīng)用有一套基于手勢(shì)的交互操作，但并未使用教程來指導(dǎo)用戶。相反，他為新用戶首次打開的啟動(dòng)頁提供了提示，每次只提示一處，且只在用戶觸達(dá)到相關(guān)功能時(shí)出現(xiàn)。

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

在情境中教育用戶的技巧可以幫助用戶先前從未嘗試過的方式操作一個(gè)元素或界面。這種技巧通常包括細(xì)微的視覺提示和微動(dòng)效。

1. 純文本命令

這個(gè)技巧主要基于文本指令，可以促使用戶使用手勢(shì)，并且用簡(jiǎn)明的描述介紹操作產(chǎn)生的結(jié)果。

注意：使用簡(jiǎn)短的文字描述說明－文本越短，用戶越可能使用它并遵從說明。

2. 提示動(dòng)效

提示動(dòng)效（或動(dòng)畫提示）展示了某個(gè)操作的效果預(yù)覽。例如，Pudding Monster只使用了基于手勢(shì)的技巧，就能使用戶不必過多猜測(cè)就掌握了游戲的基本玩法。動(dòng)畫傳達(dá)了功能的信息——用動(dòng)畫來展示一個(gè)場(chǎng)景，用戶立刻知道該怎么做。

3. 內(nèi)容暗示

內(nèi)容暗示是一種微妙的視覺提示，指明了操作的可能。下面的例子闡釋了卡片的內(nèi)容暗示。它簡(jiǎn)明地展示了隱藏在當(dāng)前卡片之后的其它卡片，很明顯卡片可以滑動(dòng)。

結(jié)論

總而言之，在移動(dòng)應(yīng)用和網(wǎng)頁中沒有萬能的方法展示手勢(shì)。不過在教育用戶操作界面時(shí)，我推薦使用內(nèi)容暗示、漸進(jìn)式提示和微動(dòng)畫。教程和引導(dǎo)頁是萬不得已才會(huì)使用的方式。

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

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

譯者：Meng，微信公眾號(hào)：「微信ID：DR_DDC」

本文由 @Meng 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議