手勢(shì)操作，是通過手指輕微移動(dòng)來讓用戶操作應(yīng)用。觸屏界面提供了許多自然的手勢(shì)，比如點(diǎn)按、滑動(dòng)、雙指縮放。但這些交互方式不像UI控件，通常對(duì)于用戶是不可見的。除非用戶事先了解手勢(shì)存在，否則他們并不會(huì)嘗試使用。
如何加入隱藏手勢(shì)呢？好在有許多視覺層面的交互設(shè)計(jì)技巧，可以讓用戶了解這些手勢(shì)。
首次打開時(shí)的教程和引導(dǎo)頁
在手勢(shì)為主的應(yīng)用中，教程和引導(dǎo)頁相當(dāng)常見。許多情況下，在應(yīng)用中加入教程意味著向用戶說明、解釋界面。但是，UI教程并不是闡述應(yīng)用核心功能的最簡潔方式。這種方式存在兩個(gè)問題：
- 如果你要給產(chǎn)品準(zhǔn)備說明書，就說明與用戶的溝通還不到位，因?yàn)樗麄兛刹幌Ｍ褂们斑€要讀說明書。
- 另一個(gè)問題在于，用戶不得不記住所有這些新的用法。
舉個(gè)例子，Clear應(yīng)用一開始會(huì)展示7頁教程，用戶得耐心閱讀所有信息，嘗試記在腦海中。這個(gè)設(shè)計(jì)很糟糕，因?yàn)樗枰脩粼谡嬲_始使用之前就付出精力。
Clear的教程
避免使用強(qiáng)制性的多步引導(dǎo)，要試圖在操作所處環(huán)境中教育用戶（這時(shí)候用戶真正需要相應(yīng)功能）。幾經(jīng)迭代后，教程可以變成更加平緩的暗示。
關(guān)注單個(gè)操作，而不是試圖在界面中解釋每一個(gè)操作。
以Android版YouTube的手勢(shì)操作指引為例：
Android版Youtube
這個(gè)應(yīng)用有用到手勢(shì)操作，但并不是通過教程的方式教育用戶。它反而是在新用戶首次觸發(fā)時(shí)進(jìn)行了暗示，每次只介紹一處，而且只在用戶進(jìn)入相關(guān)功能時(shí)才觸發(fā)。
如何在情境中教育用戶
在情境中教育的技巧，能幫助用戶以一種從未嘗試過的方式操作某個(gè)元素或界面。這種技巧通常包含輕微的視覺提示和微妙的動(dòng)畫。
純文本指令
這個(gè)技巧主要依靠純文本指令，促使用戶執(zhí)行某個(gè)手勢(shì)操作，并且簡明地描述這個(gè)操作的結(jié)果。
注意：說明文字要非常簡短——文字越短，用戶越可能會(huì)閱讀，然后才能遵照它的指引。
圖片來源：Material Design
提示動(dòng)效
提示動(dòng)效（或者動(dòng)畫暗示）表現(xiàn)了執(zhí)行操作時(shí)具體手勢(shì)的效果預(yù)覽。例如，Pudding Monsters游戲的訣竅就是完全依靠手勢(shì)操作，但是用戶不必過多猜測(cè)就能掌握基本玩法。動(dòng)畫傳達(dá)了功能方面的信息——用動(dòng)畫來展現(xiàn)一個(gè)具體場景，用戶立馬明白該怎么做。
提示動(dòng)效展現(xiàn)了如何操作一個(gè)元素。來源：Pudding Monsters
內(nèi)容的暗示
內(nèi)容暗示是一種微妙的視覺線索，表明了操作的可能。下面這個(gè)例子展示了卡片的內(nèi)容暗示——當(dāng)前卡片的下方還有其他卡片，這顯然表明它是可以滑動(dòng)的。
展現(xiàn)出導(dǎo)航功能。來源：Barthelemy Chalvet
結(jié)論
總之，在移動(dòng)或網(wǎng)頁應(yīng)用中展現(xiàn)手勢(shì)操作方式，并沒有萬能的方案。不過在教育用戶操作界面時(shí)，我比較推崇通過內(nèi)容暗示、漸進(jìn)式提示和微妙的動(dòng)畫，在具體情景中教育用戶。教程和引導(dǎo)頁應(yīng)該只作為最后手段。
感謝閱讀！
原文鏈接：http://babich.biz/how-to-communicate-hidden-gestures-in-mobile-app/
作者信息：Nick Babich
譯文鏈接：可樂橙
