引導(dǎo)應(yīng)該這樣做，UI設(shè)計(jì)師的設(shè)計(jì)才會(huì)得到認(rèn)可

我們今天所熟知的手勢(shì)交互，包括點(diǎn)擊、滑動(dòng)、縮放都是iPhone 誕生之后，經(jīng)由不同設(shè)計(jì)團(tuán)隊(duì)、在不同公司的不同產(chǎn)品之下催生成熟的一套交互模式。對(duì)于新一代的數(shù)碼設(shè)備用戶(hù)而言，觸摸和手勢(shì)交互，就是屬于他們的鼠標(biāo)。手勢(shì)，就是新一代的“點(diǎn)擊”交互。

今天，我們來(lái)聊一聊移動(dòng)端UI設(shè)計(jì)中，如何借助手勢(shì)交互提升易用性和有效性。

 

選擇對(duì)的手勢(shì)

當(dāng)你想在你的UI中引入手勢(shì)交互的時(shí)候，應(yīng)該先了解一下你的目標(biāo)受眾可能會(huì)用的APP中所用的手勢(shì)，以及你的目標(biāo)市場(chǎng)。在你的APP 中引入類(lèi)似的手勢(shì)交互，能夠至少降低用戶(hù)轉(zhuǎn)移APP的時(shí)候的學(xué)習(xí)成本，這樣針對(duì)目標(biāo)市場(chǎng)的手勢(shì)設(shè)計(jì)，讓用戶(hù)一開(kāi)始就能以一種舒適的方式開(kāi)始使用。

手勢(shì)學(xué)習(xí)

雖然手勢(shì)幾乎無(wú)處不在了，但是面對(duì)新的APP的時(shí)候，用戶(hù)還是不清楚哪些手勢(shì)可用，學(xué)習(xí)新APP的手勢(shì)交互幾乎是繞不過(guò)去的問(wèn)題。絕大多數(shù)的界面交互沿用了最常用的點(diǎn)按、滑動(dòng)和捏合手勢(shì)，通過(guò)這些手勢(shì)可以執(zhí)行絕大多數(shù)的操作，其中點(diǎn)按是無(wú)疑是最常用也是最直覺(jué)的。但是，與顯性的圖形化的界面不同，手勢(shì)交互本身是隱形的，除非用戶(hù)實(shí)現(xiàn)知道某個(gè)界面某個(gè)位置可以用手勢(shì)交互，否則，用戶(hù)需要通過(guò)自行摸索和嘗試來(lái)發(fā)掘。

所以，從這個(gè)角度而言，只有設(shè)計(jì)師在界面中提供正確的視覺(jué)指引，用戶(hù)才會(huì)“正確地發(fā)現(xiàn)”手勢(shì)交互的存在。

 

避免在新用戶(hù)引導(dǎo)的時(shí)候加入手勢(shì)教程

許多手勢(shì)交互驅(qū)動(dòng)的APP當(dāng)中，設(shè)計(jì)師都習(xí)慣于將手勢(shì)交互的教程放在首次打開(kāi)APP的時(shí)候。這樣帶有新用戶(hù)引導(dǎo)教程的APP非常之多，用戶(hù)需要在剛剛進(jìn)入的時(shí)候，了解APP的功能、特點(diǎn)，學(xué)習(xí)操作等等等等。但是，這樣的教程展現(xiàn)方式本身并不夠優(yōu)雅，也不夠有效。這種新用戶(hù)引導(dǎo)階段的前期教程所存在的主要問(wèn)題，是用戶(hù)必須在一打開(kāi)應(yīng)用的時(shí)候，就記住一大堆的信息。如果信息和教程不多還好，稍多一些，用戶(hù)會(huì)很快陷入混亂。舉個(gè)例子，著名的效率應(yīng)用 Clear，新用戶(hù)引導(dǎo)教程長(zhǎng)達(dá)7頁(yè)，用戶(hù)需要非常耐心地看完它們才知道如何正確有效的使用這款應(yīng)用。這樣的設(shè)計(jì)無(wú)疑是糟糕的。

在使用過(guò)程中提供教程

在用戶(hù)使用APP的過(guò)程中，結(jié)合用戶(hù)所處的界面、執(zhí)行的操作、正在完成的任務(wù)和上下文信息來(lái)提供相應(yīng)的手勢(shì)交互的教程。如果想要交給用戶(hù)一個(gè)新的手勢(shì)，那么你必須慢慢開(kāi)始，不要指望一次搞定，不要急于求成。

所以，你需要給用戶(hù)的是一個(gè)迭代式的漸進(jìn)的指引教程，恰到好處的提醒，并且你的引導(dǎo)應(yīng)該是專(zhuān)注于單個(gè)交互的，而非一次給用戶(hù)灌輸盡可能多的信息。結(jié)合語(yǔ)境來(lái)提供教程和指引，才是最有效的。

下圖是 Android 版的Youtube 的APP中的手勢(shì)交互的引導(dǎo)界面，這款源自谷歌官方的應(yīng)用采用的是標(biāo)準(zhǔn)的Material Design的手勢(shì)交互方式，用戶(hù)會(huì)在初次進(jìn)入應(yīng)用之后，適時(shí)地提供相應(yīng)的手勢(shì)交互引導(dǎo)，一次一項(xiàng)，不會(huì)進(jìn)行填鴨式的信息灌輸。簡(jiǎn)練的文本引導(dǎo)，讓用戶(hù)能夠快速明白交互方式和結(jié)果。

使用動(dòng)效來(lái)呈現(xiàn)手勢(shì)

手勢(shì)本身是動(dòng)態(tài)的，它和動(dòng)效本身有著高度的相似性。作為設(shè)計(jì)師，使用動(dòng)效來(lái)呈現(xiàn)手勢(shì)的交互和效果是非常自然的邏輯。為了讓用戶(hù)能夠更為清晰的明白手勢(shì)的正確用法，你可以在相應(yīng)的元素上加上文本說(shuō)明，并且搭配相應(yīng)的交互動(dòng)效，展示操作方式和執(zhí)行結(jié)果。就像下面的案例所示：

使用動(dòng)效進(jìn)行手勢(shì)交互引導(dǎo)的時(shí)候，有三種比較流行的方式。

第一種是提示動(dòng)效。提示動(dòng)效主要以預(yù)覽的形式展現(xiàn)了如何運(yùn)用手勢(shì)來(lái)與特定的元素進(jìn)行交互。它是作為手勢(shì)和觸發(fā)交互之間的橋梁而存在的。比如下面這個(gè)布丁怪物的游戲就是以手勢(shì)操作為主的，動(dòng)效結(jié)合游戲場(chǎng)景，呈現(xiàn)給用戶(hù)交互的基本方式。

第二種方式也很有效，內(nèi)容展示。相比于第一種方式，內(nèi)容展示更加微妙，它向用戶(hù)呈現(xiàn)了交互所能呈現(xiàn)出來(lái)的內(nèi)容和結(jié)果。就像下面這個(gè)案例，它簡(jiǎn)單的展示了卡片之后還隱藏著其他的卡片，隱晦而微妙地暗示用戶(hù)，使用滑動(dòng)手勢(shì)就能看到后面的卡片了。

第三種方式是著重推薦的，也是我認(rèn)為最有效的一種，借助可供性設(shè)計(jì)的原理來(lái)呈現(xiàn)手勢(shì)交互。為了呈現(xiàn)手勢(shì)交互的可供性，設(shè)計(jì)師應(yīng)該通過(guò)設(shè)計(jì)呈現(xiàn)出“用戶(hù)能怎么操作”，iOS 的鎖屏相機(jī)就是一個(gè)典型案例，當(dāng)用戶(hù)在鎖屏狀態(tài)下點(diǎn)擊右下角的相機(jī)按鈕的時(shí)候，屏幕會(huì)向上彈跳，展示它是可向上滑動(dòng)打開(kāi)的（這一功能的“能指”）。

結(jié)語(yǔ)

手勢(shì)交互的實(shí)用性和泛用性是有目共睹的，它依賴(lài)于界面，并且高度依賴(lài)基礎(chǔ)的幾個(gè)單指和雙指手勢(shì)，但是它的隱藏性使得設(shè)計(jì)師的引導(dǎo)顯得無(wú)比重要。還好在最近幾年的經(jīng)驗(yàn)累積之下，手勢(shì)交互的引導(dǎo)模式有了如今這套相對(duì)成熟的經(jīng)驗(yàn)，動(dòng)效、文本和提示可以有效的幫助用戶(hù)，逐步學(xué)會(huì)新界面的手勢(shì)交互。