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

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

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

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

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

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

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

比如，Clear 這款A(yù)pp開始使用時會有長達7頁的教程，用戶不得不耐心讀完所有信息并試圖記住他們。這是個很糟糕的設(shè)計，因為用戶需要在使用它之前就付出大量精力。

Clear 的教程

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

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

以Android版的youtube的手勢教育為例：

Android版 youtube App

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

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

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

1. 純文本命令

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

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

2. 提示動效

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

3. 內(nèi)容暗示

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

結(jié)論

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

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

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

譯者：Meng，微信公眾號：「微信ID：DR_DDC」

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

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