如何告訴用戶App的隱藏手勢？這兒有3個技巧！

@可樂橙_ColaChan?：觸屏界面提供了許多自然的手勢，比如點按、滑動、雙指縮放。但該如何讓用戶知道這些手勢呢？這兒分享3個技巧！

手勢操作，是通過手指輕微移動來讓用戶操作應(yīng)用。觸屏界面提供了許多自然的手勢，比如點按、滑動、雙指縮放。但這些交互方式不像UI控件，通常對于用戶是不可見的。除非用戶事先了解手勢存在，否則他們并不會嘗試使用。

如何加入隱藏手勢呢？好在有許多視覺層面的交互設(shè)計技巧，可以讓用戶了解這些手勢。

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

在手勢為主的應(yīng)用中，教程和引導(dǎo)頁相當(dāng)常見。許多情況下，在應(yīng)用中加入教程意味著向用戶說明、解釋界面。但是，UI教程并不是闡述應(yīng)用核心功能的最簡潔方式。這種方式存在兩個問題：

• 如果你要給產(chǎn)品準備說明書，就說明與用戶的溝通還不到位，因為他們可不希望使用前還要讀說明書。
• 另一個問題在于，用戶不得不記住所有這些新的用法。

舉個例子，Clear應(yīng)用一開始會展示7頁教程，用戶得耐心閱讀所有信息，嘗試記在腦海中。這個設(shè)計很糟糕，因為它需要用戶在真正開始使用之前就付出精力。

△ Clear的教程

避免使用強制性的多步引導(dǎo)，要試圖在操作所處環(huán)境中教育用戶（這時候用戶真正需要相應(yīng)功能）。幾經(jīng)迭代后，教程可以變成更加平緩的暗示。

關(guān)注單個操作，而不是試圖在界面中解釋每一個操作。

以Android版YouTube的手勢操作指引為例：

△ Android 版 Youtube

這個應(yīng)用有用到手勢操作，但并不是通過教程的方式教育用戶。它反而是在新用戶首次觸發(fā)時進行了暗示，每次只介紹一處，而且只在用戶進入相關(guān)功能時才觸發(fā)。

如何在情境中教育用戶

在情境中教育的技巧，能幫助用戶以一種從未嘗試過的方式操作某個元素或界面。這種技巧通常包含輕微的視覺提示和微妙的動畫。

純文本指令

這個技巧主要依靠純文本指令，促使用戶執(zhí)行某個手勢操作，并且簡明地描述這個操作的結(jié)果。

注意：說明文字要非常簡短——文字越短，用戶越可能會閱讀，然后才能遵照它的指引。

△ 圖片來源：Material Design

提示動效

提示動效（或者動畫暗示）表現(xiàn)了執(zhí)行操作時具體手勢的效果預(yù)覽。例如，Pudding Monsters游戲的訣竅就是完全依靠手勢操作，但是用戶不必過多猜測就能掌握基本玩法。動畫傳達了功能方面的信息——用動畫來展現(xiàn)一個具體場景，用戶立馬明白該怎么做。

△ 提示動效展現(xiàn)了如何操作一個元素。來源：Pudding Monsters

內(nèi)容的暗示

內(nèi)容暗示是一種微妙的視覺線索，表明了操作的可能。下面這個例子展示了卡片的內(nèi)容暗示——當(dāng)前卡片的下方還有其他卡片，這顯然表明它是可以滑動的。

△?展現(xiàn)出導(dǎo)航功能。來源：Barthelemy Chalvet

結(jié)論

總之，在移動或網(wǎng)頁應(yīng)用中展現(xiàn)手勢操作方式，并沒有萬能的方案。不過在教育用戶操作界面時，我比較推崇通過內(nèi)容暗示、漸進式提示和微妙的動畫，在具體情景中教育用戶。教程和引導(dǎo)頁應(yīng)該只作為最后手段。

感謝閱讀！

「引導(dǎo)頁設(shè)計指南」

1. 頂尖指南丨《超全面指南！如何設(shè)計移動應(yīng)用引導(dǎo)頁》
2. 實戰(zhàn)干貨丨《騰訊實戰(zhàn)干貨！怎么讓引導(dǎo)頁不再是無用小透明？》
3. 技巧分享丨《討厭引導(dǎo)頁？這5個技巧幫你設(shè)計出眼前一亮的APP引導(dǎo)頁》

原文地址：http://babich.biz/how-to-communicate-hidden-gestures-in-mobile-app/
作者信息：Nick Babich
譯文地址：colachan

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量180萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com