2019-4-22 用心設計
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
通過點擊、滑動、滾動和鍵盤快捷鍵來交互的日子嗎?它們不再是唯一的交互方式,一起來了解一下~
還記得瀏覽網頁時,只能通過點擊、滑動、滾動和鍵盤快捷鍵來交互的日子嗎?而現在,它們不再是唯一的交互方式,當蘋果推出第一款iPhone時,多點觸控技術成為了主流,用戶們了解到,他們不僅可以在界面上指向、輕點還可以捏合、展開和滑動。手勢成為新的操作方式。
一、UI中手勢的力量
手勢非常自然和直觀,他們與真實世界反應類似。
對于使用手勢,這里有三個主要的理由:
● 干擾少
App內,手勢控制使用地越多,在屏幕上出現的按鈕就越少,這樣可以留出更多空間給更有價值的內容。這使得app以內容為重點,并讓用戶在沒有障礙,或者在分心的情況下也能進行最重要的操作。
● 使用簡單
一個手勢一旦被用戶發現和學習使用就會讓用戶在體驗感到愉悅,而且手勢可以減少步驟,來達到提高交互體驗的目的。例如,當你需要刪除一些項目時,用“一次點擊刪除一個”的方式的很浪費時間的,但是如果使用“滑動一下,刪除一個”的滑動手勢,就更簡單快速,讓用戶更加愉悅。
● 無縫交互
雖然按鈕看起來對于觸發響應更加有用,但手勢具有更大的潛力,使內容的交互更加直觀。
二、手勢的缺點
但同時,手勢也存在難規范、易混淆等缺點。
● 增加用戶負擔
大多數手勢學起來或者記起來不自然也不簡單。舉個例子,在大多數APP,一個手指的手勢就對應一件事,用兩個手指做一個同樣的手勢意味著另外一件事,其他對應事件的手勢還有很多。
● 缺乏反饋
在大多數情況下,手勢不會留下任何路徑記錄。這意味著,如果做一個手勢但沒有得到反應或者得到錯的反應,這樣就只能獲得很少的信息或者不能獲得有幫助的信息去解釋為什么這么做。
● 缺乏一致性
大多數手勢在app中還不是標準統一的。他們對于用戶不總是顯而易見的。甚至一個簡單的滑動手勢,在眾多郵箱app內的郵件項目中也有著不同的工作方式。例如,在Apple Mail 中,刪除一個未讀項目,你應該向左滑動這個沒有打開的郵件,然后界面會出現選項來刪除這個項目。在Gmail里,向左滑動可以把郵件標記為未讀狀態。
三、手勢成為移動端UI成功的關鍵
1.如何選擇好的手勢
如果你的界面里要使用手勢,那你就必須要去了解你所在的市場以及你的目標用戶會去使用的app。要嘗試在你的app里使用和它們相同類型的手勢。這樣,你不僅基于你的目標市場的用戶的行為優化了你的界面,還讓用戶從一開始就能舒適的使用你的app。
2.手勢教學
雖然每個移動端app都必定會用到手勢,但是要讓用戶很自然的就能知道如何操作(使用什么手勢可以干什么)卻一個挑戰。可觸摸的界面提供了很多條件來使用自然的手勢,例如輕點、滑動和捏合來完成任務,但是不同于圖形界面的操作,手勢的交互用戶往往是看不到的。
因此,要讓用戶能發現手勢是很重要的。你需要確保你提供了正確的線索----通過視覺引導來幫助用戶更容易的發現如何與界面進行交互。
3.如何在情境中教育用戶
教程和演示的做法相當流行。在許多app中加入教程意味著要想用戶顯示一些說明內容來介紹界面。然而,UI教程不是介紹app的核心功能的最優雅的式。
良好執行的UI手勢總是可以在易于實現視覺提示和漸進式披露的游戲中找到。這顯而易見,最好的游戲可以使人們隨著時間的推移來學習到技巧,而不是靠指導他們。例如,PuddingMonster 的游戲機器完全基于手勢,但是他們允許用戶得到基礎的信息,他們不需要做很多的猜測。他們可以展示動畫場景,讓用戶馬上知道要做什么。
四、使用動效來傳達手勢
手勢總是與移動app中的動效相關聯。動效在維護用戶體驗中起著非常重要的作用。作為設計師,你可以利用動效來傳達出用戶可以進行某個操作。當動效與手勢一致時,用戶就會意識到自己與該物體正在相互作用。
動效在向用戶提供視覺反饋上是非常重要的。沒有動效,用戶就不能獲得足夠的信息反饋,不能確定他們是不是成功地完成了手勢動作。
這里有三種流行的基于動效來幫助用戶學習手勢。
第一種:動效視覺提示
顯示一個在執行某個操作時如何和某一個界面元素進行交互的預覽。它的目的是在手勢和操作之間建立聯系。例如下圖中的這個游戲app是完全基于手勢操作的,這個app讓用戶不用去猜測就能知道該如何操作。用動畫來傳達功能信息能立即讓用戶清晰的知道該怎么做。
第二種:內容的梳理
內容梳理是通過微妙的視覺線索來暗示用戶進行手勢操作。例如下圖中卡片的展示,它表明這張卡的背后還存在著其他的卡片,這清晰的表明了可以滑動卡片。
第三種:功能可見性
你可以讓你界面里的某些元素具有很明顯的可供性來讓用戶知道這個是可以進行某種操作的。例如下圖中點擊相機icon后鎖屏就會從下往上彈起,展示出在下面的相機功能。
五、總結
手勢是一種強大的互動模式。移動設備已經從磚塊發展到由我們手指驅動的復雜計算器。觸摸和手勢交互在使移動體驗更加簡便有趣方面,有很大的潛力。
設計一款移動端的app一定要思考手勢設計。手勢應該起到協調和節約時間的作用。為了設計一個有意義的手勢,你應該規定一個動作以及與其配套的一個手勢。提供反饋意見也非常重要,對于可能要進行的行動要有明確提示,并進行手勢的引導。
藍藍設計( axecq.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計