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