通過點擊、滑動、滾動和鍵盤快捷鍵來交互的日子嗎？它們不再是唯一的交互方式,一起來了解一下~

---

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

一、UI中手勢的力量

手勢非常自然和直觀，他們與真實世界反應(yīng)類似。

對于使用手勢，這里有三個主要的理由：

● 干擾少

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

● 使用簡單

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

● 無縫交互

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

二、手勢的缺點

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

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

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

● 缺乏反饋

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

● 缺乏一致性

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

三、手勢成為移動端UI成功的關(guān)鍵

1.如何選擇好的手勢

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

2.手勢教學(xué)

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

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

3.如何在情境中教育用戶

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

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

四、使用動效來傳達(dá)手勢

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

動效在向用戶提供視覺反饋上是非常重要的。沒有動效，用戶就不能獲得足夠的信息反饋，不能確定他們是不是成功地完成了手勢動作。

這里有三種流行的基于動效來幫助用戶學(xué)習(xí)手勢。

第一種：動效視覺提示

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

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

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

第三種：功能可見性

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

五、總結(jié)

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

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