移動APP交互創(chuàng)新設(shè)計技巧:手勢流的運用

手勢操作如今在APP交互當(dāng)中越來越重要啦,已經(jīng)開始取代直接去觸碰實體或虛擬按鍵,輕輕松松揮舞雙手便可以實現(xiàn)各種復(fù)雜的動作等。比如上下拉、左右滑等。

但是移動手勢操作不能濫用,具體場景具體使用合適的手勢操作。

移動觸摸手勢圖標(biāo)

那什么是優(yōu)秀的手勢操作呢?

優(yōu)秀的手勢操作是那些可以讓用戶明確知曉如何使用,并且用戶能知道在它是否可用的手勢。iOS 的鎖屏界面就是個很好的例子。iOS 鎖屏界面里只有滑動滑塊才能解鎖,而在別的界面里這樣的解鎖滑塊不存在,所以我們完全不會想到去滑動 。

使用淺性引導(dǎo)的設(shè)計會讓用戶自然而然得學(xué)會如何使用手勢操作,并且能有美妙的感受。

鎖屏界面里的相機設(shè)計的就是利用了淺性引導(dǎo),點擊相機后屏幕會向上跳動,這樣的設(shè)計會直接引導(dǎo)用戶去按住相機上拉。上拉進(jìn)入相機的動作同時會讓用戶感覺下拉后會回到鎖屏界面。更奇妙的是事實果真如此,在鎖屏界面里進(jìn)入相機后我們真的可以再任意一個界面中下拉回到鎖屏界面。這種上拉進(jìn)相機、下拉回鎖屏界面的對稱設(shè)計符合用戶的想象,直接給用戶帶來了愉悅的感受。

除了鎖屏界面,第三方應(yīng)用中也可以加入淺性引導(dǎo)。比如當(dāng)我們點開新浪微博中的一條微博后原界面會向左滑動切出新的界面(推動效果),這樣會讓人感覺自己右滑動應(yīng)該會返回前一個界面,左右對稱的動畫效果加上淺性引導(dǎo)會減輕用戶的心里壓力,而且這樣的引導(dǎo)是在用戶操作的同時進(jìn)行的,用戶無需回想這個應(yīng)用的手勢便可以方便的使用。

25學(xué)堂今天還要跟大家分享一個比較有創(chuàng)新的APP交互新詞-手勢流

下面我們來舉例說明下什么是APP手勢流?

在大部分的移動應(yīng)用中,完成一項任務(wù)通常都需要很多次點擊。但是由于可發(fā)現(xiàn)性的問題,設(shè)計師似乎總是有意避開使用各種手勢。然而,最近Ralph Thomas設(shè)計的一個有關(guān)手勢流的交互原型讓我重新燃起了對移動手勢操作的熱情。

Ralph的設(shè)計在于用獨特的方式來減少常用操作的點擊數(shù),接下來讓我們通過常用應(yīng)用進(jìn)行分析說明,以iOS自帶的地圖應(yīng)用為例, 用戶最常用的一個操作就是導(dǎo)航。

在目前的設(shè)計中,完成這樣一個操作至少需要三次點擊:

1.點擊搜索框;

2.點擊選擇你的目的地(如果在推薦列表中);

3.點擊開始。

移動手勢流分析案例

可以使用Material Design中的浮動按鈕來優(yōu)化此流程,點擊搜索按鈕會展示推薦的目的地,然后通過再次點擊選擇地點。雖然有些操作變得更簡單(例如,導(dǎo)航回家或是到最近去過的地點),但是直接搜索卻需要多些工作(兩次點擊,比原來增加了一次)。

 

移動手勢流分析案例2

使用手勢流的設(shè)計能夠減少這些基本操作的點擊數(shù),從而增強交互體驗。你只需按下浮動的搜索按鈕然后保持手指不離開屏幕繼續(xù)往上移動,直到目的地的按鈕。例如,移動到“家”然后松開手指,地圖就會馬上進(jìn)入導(dǎo)航模式,帶你回家。相比之前的三次點擊,你只需要一個手勢流的操作。

移動手勢流分析案例3

需要注意的是,之前描述的點擊方法仍然有效。

手勢流操作可以作為重要或是常用操作的快捷方法。因為手勢畢竟是缺乏視覺識別的,所以最好的方式就是作為明顯但是操作較慢的點擊流程的額外補充。

 

同樣的手勢流操作也可用于觸發(fā)搜索。你只需按下浮動按鈕然后向左拖動至搜索框。相比之前需要兩次點擊的操作,這樣簡單的手勢就能調(diào)出更為詳細(xì)的搜索列表,系統(tǒng)鍵盤也同時彈出便于輸入搜索。

移動手勢流分析案例4

再深入一點,手勢流甚至還可以為附加的選項提供交互的空間。首先移動到目的地,保持手指不放開繼續(xù)向側(cè)面移動,你就可以選擇到目的地的方式:自駕、公共交通、步行或是騎行。繼續(xù)移動到你的選擇上然后將手指移開屏幕就可以執(zhí)行操作了。這樣附加選項的設(shè)計可以作為手勢流的擴(kuò)展,不過你一旦采用了,又減少了一次點擊,從四次點擊變成了一個手勢流的操作。

 

今天就先跟大家分享到這里。很高興見到這樣手勢流的設(shè)計,它能優(yōu)化移動交互流程,減少哪些復(fù)雜的點擊操作。另外也告訴我們移動APP交互設(shè)計值得我們?nèi)ド钔诘牡胤竭€是很多的。

每天更新,
全站高品質(zhì)素材免費下載!