通過(guò)點(diǎn)擊、滑動(dòng)、滾動(dòng)和鍵盤(pán)快捷鍵來(lái)交互的日子嗎？它們不再是唯一的交互方式,一起來(lái)了解一下~

---

還記得瀏覽網(wǎng)頁(yè)時(shí)，只能通過(guò)點(diǎn)擊、滑動(dòng)、滾動(dòng)和鍵盤(pán)快捷鍵來(lái)交互的日子嗎？而現(xiàn)在，它們不再是唯一的交互方式，當(dāng)蘋(píng)果推出第一款iPhone時(shí)，多點(diǎn)觸控技術(shù)成為了主流，用戶(hù)們了解到，他們不僅可以在界面上指向、輕點(diǎn)還可以捏合、展開(kāi)和滑動(dòng)。手勢(shì)成為新的操作方式。

一、UI中手勢(shì)的力量

手勢(shì)非常自然和直觀(guān)，他們與真實(shí)世界反應(yīng)類(lèi)似。

對(duì)于使用手勢(shì)，這里有三個(gè)主要的理由：

● 干擾少

App內(nèi)，手勢(shì)控制使用地越多，在屏幕上出現(xiàn)的按鈕就越少，這樣可以留出更多空間給更有價(jià)值的內(nèi)容。這使得app以?xún)?nèi)容為重點(diǎn)，并讓用戶(hù)在沒(méi)有障礙，或者在分心的情況下也能進(jìn)行最重要的操作。

● 使用簡(jiǎn)單

一個(gè)手勢(shì)一旦被用戶(hù)發(fā)現(xiàn)和學(xué)習(xí)使用就會(huì)讓用戶(hù)在體驗(yàn)感到愉悅，而且手勢(shì)可以減少步驟，來(lái)達(dá)到提高交互體驗(yàn)的目的。例如，當(dāng)你需要?jiǎng)h除一些項(xiàng)目時(shí)，用“一次點(diǎn)擊刪除一個(gè)”的方式的很浪費(fèi)時(shí)間的，但是如果使用“滑動(dòng)一下，刪除一個(gè)”的滑動(dòng)手勢(shì)，就更簡(jiǎn)單快速，讓用戶(hù)更加愉悅。

● 無(wú)縫交互

雖然按鈕看起來(lái)對(duì)于觸發(fā)響應(yīng)更加有用，但手勢(shì)具有更大的潛力，使內(nèi)容的交互更加直觀(guān)。

二、手勢(shì)的缺點(diǎn)

但同時(shí)，手勢(shì)也存在難規(guī)范、易混淆等缺點(diǎn)。

● 增加用戶(hù)負(fù)擔(dān)

大多數(shù)手勢(shì)學(xué)起來(lái)或者記起來(lái)不自然也不簡(jiǎn)單。舉個(gè)例子，在大多數(shù)APP，一個(gè)手指的手勢(shì)就對(duì)應(yīng)一件事，用兩個(gè)手指做一個(gè)同樣的手勢(shì)意味著另外一件事，其他對(duì)應(yīng)事件的手勢(shì)還有很多。

● 缺乏反饋

在大多數(shù)情況下，手勢(shì)不會(huì)留下任何路徑記錄。這意味著，如果做一個(gè)手勢(shì)但沒(méi)有得到反應(yīng)或者得到錯(cuò)的反應(yīng)，這樣就只能獲得很少的信息或者不能獲得有幫助的信息去解釋為什么這么做。

● 缺乏一致性

大多數(shù)手勢(shì)在app中還不是標(biāo)準(zhǔn)統(tǒng)一的。他們對(duì)于用戶(hù)不總是顯而易見(jiàn)的。甚至一個(gè)簡(jiǎn)單的滑動(dòng)手勢(shì)，在眾多郵箱app內(nèi)的郵件項(xiàng)目中也有著不同的工作方式。例如，在Apple Mail 中，刪除一個(gè)未讀項(xiàng)目，你應(yīng)該向左滑動(dòng)這個(gè)沒(méi)有打開(kāi)的郵件，然后界面會(huì)出現(xiàn)選項(xiàng)來(lái)刪除這個(gè)項(xiàng)目。在Gmail里，向左滑動(dòng)可以把郵件標(biāo)記為未讀狀態(tài)。

三、手勢(shì)成為移動(dòng)端UI成功的關(guān)鍵

1.如何選擇好的手勢(shì)

如果你的界面里要使用手勢(shì)，那你就必須要去了解你所在的市場(chǎng)以及你的目標(biāo)用戶(hù)會(huì)去使用的app。要嘗試在你的app里使用和它們相同類(lèi)型的手勢(shì)。這樣，你不僅基于你的目標(biāo)市場(chǎng)的用戶(hù)的行為優(yōu)化了你的界面，還讓用戶(hù)從一開(kāi)始就能舒適的使用你的app。

2.手勢(shì)教學(xué)

雖然每個(gè)移動(dòng)端app都必定會(huì)用到手勢(shì)，但是要讓用戶(hù)很自然的就能知道如何操作(使用什么手勢(shì)可以干什么)卻一個(gè)挑戰(zhàn)?？捎|摸的界面提供了很多條件來(lái)使用自然的手勢(shì)，例如輕點(diǎn)、滑動(dòng)和捏合來(lái)完成任務(wù)，但是不同于圖形界面的操作，手勢(shì)的交互用戶(hù)往往是看不到的。

因此，要讓用戶(hù)能發(fā)現(xiàn)手勢(shì)是很重要的。你需要確保你提供了正確的線(xiàn)索----通過(guò)視覺(jué)引導(dǎo)來(lái)幫助用戶(hù)更容易的發(fā)現(xiàn)如何與界面進(jìn)行交互。

3.如何在情境中教育用戶(hù)

教程和演示的做法相當(dāng)流行。在許多app中加入教程意味著要想用戶(hù)顯示一些說(shuō)明內(nèi)容來(lái)介紹界面。然而，UI教程不是介紹app的核心功能的最優(yōu)雅的式。

良好執(zhí)行的UI手勢(shì)總是可以在易于實(shí)現(xiàn)視覺(jué)提示和漸進(jìn)式披露的游戲中找到。這顯而易見(jiàn)，最好的游戲可以使人們隨著時(shí)間的推移來(lái)學(xué)習(xí)到技巧，而不是靠指導(dǎo)他們。例如，PuddingMonster 的游戲機(jī)器完全基于手勢(shì)，但是他們?cè)试S用戶(hù)得到基礎(chǔ)的信息，他們不需要做很多的猜測(cè)。他們可以展示動(dòng)畫(huà)場(chǎng)景，讓用戶(hù)馬上知道要做什么。

四、使用動(dòng)效來(lái)傳達(dá)手勢(shì)

手勢(shì)總是與移動(dòng)app中的動(dòng)效相關(guān)聯(lián)。動(dòng)效在維護(hù)用戶(hù)體驗(yàn)中起著非常重要的作用。作為設(shè)計(jì)師，你可以利用動(dòng)效來(lái)傳達(dá)出用戶(hù)可以進(jìn)行某個(gè)操作。當(dāng)動(dòng)效與手勢(shì)一致時(shí)，用戶(hù)就會(huì)意識(shí)到自己與該物體正在相互作用。

動(dòng)效在向用戶(hù)提供視覺(jué)反饋上是非常重要的。沒(méi)有動(dòng)效，用戶(hù)就不能獲得足夠的信息反饋，不能確定他們是不是成功地完成了手勢(shì)動(dòng)作。

這里有三種流行的基于動(dòng)效來(lái)幫助用戶(hù)學(xué)習(xí)手勢(shì)。

第一種：動(dòng)效視覺(jué)提示

顯示一個(gè)在執(zhí)行某個(gè)操作時(shí)如何和某一個(gè)界面元素進(jìn)行交互的預(yù)覽。它的目的是在手勢(shì)和操作之間建立聯(lián)系。例如下圖中的這個(gè)游戲app是完全基于手勢(shì)操作的，這個(gè)app讓用戶(hù)不用去猜測(cè)就能知道該如何操作。用動(dòng)畫(huà)來(lái)傳達(dá)功能信息能立即讓用戶(hù)清晰的知道該怎么做。

第二種：內(nèi)容的梳理

內(nèi)容梳理是通過(guò)微妙的視覺(jué)線(xiàn)索來(lái)暗示用戶(hù)進(jìn)行手勢(shì)操作。例如下圖中卡片的展示，它表明這張卡的背后還存在著其他的卡片，這清晰的表明了可以滑動(dòng)卡片。

第三種：功能可見(jiàn)性

你可以讓你界面里的某些元素具有很明顯的可供性來(lái)讓用戶(hù)知道這個(gè)是可以進(jìn)行某種操作的。例如下圖中點(diǎn)擊相機(jī)icon后鎖屏就會(huì)從下往上彈起，展示出在下面的相機(jī)功能。

五、總結(jié)

手勢(shì)是一種強(qiáng)大的互動(dòng)模式。移動(dòng)設(shè)備已經(jīng)從磚塊發(fā)展到由我們手指驅(qū)動(dòng)的復(fù)雜計(jì)算器。觸摸和手勢(shì)交互在使移動(dòng)體驗(yàn)更加簡(jiǎn)便有趣方面，有很大的潛力。

設(shè)計(jì)一款移動(dòng)端的app一定要思考手勢(shì)設(shè)計(jì)。手勢(shì)應(yīng)該起到協(xié)調(diào)和節(jié)約時(shí)間的作用。為了設(shè)計(jì)一個(gè)有意義的手勢(shì)，你應(yīng)該規(guī)定一個(gè)動(dòng)作以及與其配套的一個(gè)手勢(shì)。提供反饋意見(jiàn)也非常重要，對(duì)于可能要進(jìn)行的行動(dòng)要有明確提示，并進(jìn)行手勢(shì)的引導(dǎo)。