如何表達(dá)App的隱藏手勢(shì)操作,這里有3個(gè)技巧

在移動(dòng)或網(wǎng)頁(yè)應(yīng)用中展現(xiàn)手勢(shì)操作方式,并沒(méi)有萬(wàn)能的方案。
手勢(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ō)明書(shū),就說(shuō)明與用戶的溝通還不到位,因?yàn)樗麄兛刹幌M褂们斑€要讀說(shuō)明書(shū)。
- 另一個(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)畫(huà)。
純文本指令
這個(gè)技巧主要依靠純文本指令,促使用戶執(zhí)行某個(gè)手勢(shì)操作,并且簡(jiǎn)明地描述這個(gè)操作的結(jié)果。
注意:說(shuō)明文字要非常簡(jiǎn)短——文字越短,用戶越可能會(huì)閱讀,然后才能遵照它的指引。
圖片來(lái)源:Material Design
提示動(dòng)效
提示動(dòng)效(或者動(dòng)畫(huà)暗示)表現(xiàn)了執(zhí)行操作時(shí)具體手勢(shì)的效果預(yù)覽。例如,Pudding Monsters游戲的訣竅就是完全依靠手勢(shì)操作,但是用戶不必過(guò)多猜測(cè)就能掌握基本玩法。動(dòng)畫(huà)傳達(dá)了功能方面的信息——用動(dòng)畫(huà)來(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)畫(huà),在具體情景中教育用戶。教程和引導(dǎo)頁(yè)應(yīng)該只作為最后手段。
感謝閱讀!
原文鏈接:http://babich.biz/how-to-communicate-hidden-gestures-in-mobile-app/
作者信息:Nick Babich
#專(zhuān)欄作家#
可樂(lè)橙,微信公眾號(hào):可樂(lè)橙(colachangreen)。人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家,UI/UX設(shè)計(jì)師,關(guān)注互聯(lián)網(wǎng),關(guān)注科技。現(xiàn)居杭州,與小伙伴們正在創(chuàng)業(yè)途中?;蛟S不是一名優(yōu)秀的設(shè)計(jì)師,至少是個(gè)快樂(lè)的設(shè)計(jì)師。
本文翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,不得轉(zhuǎn)載。
- 目前還沒(méi)評(píng)論,等你發(fā)揮!