巧用手勢 善待用戶

1 評論 2362 瀏覽 1 收藏 13 分鐘

[核心提示]?越來越多的手勢加入到應(yīng)用中實際上增加了用戶學(xué)習(xí)成本。我們是否能創(chuàng)造一個可以適用于大部分應(yīng)用的手勢操作,減少用戶的學(xué)習(xí)成本呢?

在這個手機屏幕越做越大的時代,許多開發(fā)者不約而同地在自家的應(yīng)用里添加了眾多手勢操作,比如新浪微博的右滑后退和人人的滑動抽屜,甚至有人說只有手勢才能救大屏。但實際情況是用戶并不喜歡過多的手勢操作,用戶更喜歡去點擊,而不是去用隱藏起來的手勢。那么我們是否能創(chuàng)造一個可以適用于大部分應(yīng)用的手勢操作,減少用戶的學(xué)習(xí)成本呢?

為何要用手勢?

不同于傳統(tǒng)的按鍵界面,手勢操作的隱藏性很高。如果我們沒有閱讀過某個手勢應(yīng)用的幫助信息的話,我們很難知道這個應(yīng)用中到底隱藏著多少種手勢。不直觀的手勢加大了新用戶的上手難度,也使得用戶每次進入應(yīng)用的時候都在回想使用方法,這很有可能會給用戶傳遞該應(yīng)用難用的信息,最終結(jié)果也可想而知。

雖然手勢操作有很多弊端,但我們不能因噎廢食拋棄手勢。由于手機屏幕大小的限制,所以很多信息是不能在一個屏幕中展現(xiàn)的,比如我們需要通過左右滑動來在主屏幕中查看應(yīng)用、用下拉的方式來呼出下拉菜單,所以手勢的存在會使手機的屏幕得到延伸,以便讓用戶獲得更多的信息??梢娫谝苿釉O(shè)備的操作中我們是不可能也沒有必要去消滅手勢的,我們所要做的就是尋求一種更高效更統(tǒng)一的手勢操作。

手勢操作的問題

舉一個常見的例子就是下拉菜單,在?iOS?和?Android?下我們都可以從手機的頂部下滑呼出下拉菜單。我們有沒有想過我們是如何知道這個操作的呢?當(dāng)我們看到別人在他們的設(shè)備中如此操作的時候我們立馬就明白了這個手勢的作用,并且立刻能在自己的設(shè)備中使用,就這樣自然的學(xué)會了。這個下拉的手勢十分簡單,看一次就懂,但最重要的是它是一個全局手勢。

什么是全局手勢呢?簡單理解就是在每個手機上都能通用的手勢操作。比如在主屏幕左右滑動可以看到手機里的應(yīng)用、在 Android 和 iOS 設(shè)備上下拉就可以進入下拉菜單,這些在每個手機上都通用的手勢可以說是一次學(xué)會終身受益的東西,我們并沒有覺得上述這兩個隱藏手勢會有多么的難用,可見讓用戶抱怨的不是全局手勢而是每個應(yīng)用自行設(shè)計的手勢操作。

很多人都說新浪微博中右滑后退的設(shè)計可以方便大屏用戶,那么我們就從新浪微博來看看手勢操作的弊端。

在新浪微博中當(dāng)我們進入一條微博后右滑動可以回到上一個頁面,這個手勢可以簡單等同于左上角的后退鍵。但這種手勢在微博中并沒有實現(xiàn)通用性,比如我們進入了一個長微博圖片,這時右滑動的手勢就沒有用處了,我們進入一條鏈接后這個手勢也同樣也會無效。這樣的設(shè)計所帶來的后果就是用戶完全不知道這個手勢操作什么時候能用什么時候不能用,所以大多數(shù)用戶最終還是會選擇通用性好的點擊命令。

同樣的問題還出現(xiàn)在了?Zaker?上。Zaker 的主要操作就是手勢操作,但同樣沒能做到通用性。在 Zaker 中我們點擊進入一條新聞后下拉會回到上一個頁面,但是當(dāng)我們在這個新聞中進入評論界面后下拉后退的手勢會立刻失效,最終只能點左下角的返回按鈕。

iOS 中自帶的手勢操作也難逃厄運。在很多系統(tǒng)應(yīng)用中左滑某一項會出現(xiàn)刪除按鈕,我們也可以看見很多第三方應(yīng)用中也使用了這個手勢,但它也未能成為第三方應(yīng)用的設(shè)計標(biāo)準(zhǔn),所以通用性不高。

上面只是特色手勢在某個應(yīng)用中的問題,手勢帶來的實際問題更多是出現(xiàn)在應(yīng)用切換使用的情形里。移動端應(yīng)用的切換頻率遠(yuǎn)高于電腦軟件,手勢的不兼容就成了一個比較嚴(yán)重的問題。我們可以假設(shè)這樣一個場景,當(dāng)我們在 Zaker 中閱讀了半小時的新聞后,這時微博來了條私信。我們進入微博回復(fù)后會不自覺地使用之前習(xí)慣了的下拉后退操作,但這個操作在微博里是不支持的,因此我們的大腦會轉(zhuǎn)換思路開始回憶微博中的滑動后退功能。然而當(dāng)我們在新浪微博中習(xí)慣了滑動后退的手勢后,再切入人人,我們還是會正常的點擊查看新消息,但是這時會發(fā)現(xiàn)剛剛習(xí)慣的滑動后退功能無效了,苦惱幾秒后大腦又要去適應(yīng)點左上角退出的操作。

通過分析,我們可以很明顯的看到在 iOS 這個貌似沒有碎片化的系統(tǒng)中手勢碎片化逐步顯現(xiàn),如何解決手勢碎片化成為了開發(fā)者們的新問題。

什么是優(yōu)秀的手勢

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

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

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

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

設(shè)計一個手勢

一個開發(fā)者不能在自己的小圈子里設(shè)計應(yīng)用,只想著自家應(yīng)用中的手勢體驗,還應(yīng)該跳出自己的應(yīng)用,去思考如何能做一個適配大多數(shù)應(yīng)用的全局手勢,這樣設(shè)計出來的手勢操作不僅可以在自家的應(yīng)用中適配良好,而且還會引起其他應(yīng)用的效仿,甚至能改變大多數(shù)應(yīng)用的界面設(shè)計,減少手勢碎片化。

減少無用手勢

眾多應(yīng)用中存在著多數(shù)無用的手勢,比如在 Zaker 中點擊進入一則新聞后左滑動和右滑動是看前一條新聞和后一條新聞。這樣的手勢很少有人去用,用戶更多是希望回到標(biāo)題界面后找到自己感興趣的新聞再進入而不是耗費流量的泛讀。

善用區(qū)域性手勢

如果一個手勢不能在整個應(yīng)用界面中使用,如新浪微博中的后退手勢。那么就應(yīng)該使用區(qū)域性手勢,比如在導(dǎo)航欄(Navigation Bar)區(qū)域內(nèi)右滑動可以返回上個界面,左滑動回到上次瀏覽的界面。因為在微博、微信等大多數(shù)應(yīng)用中都有導(dǎo)航欄,這樣的區(qū)域性手勢可以解決在長微博和評論界面中手勢無法通用的問題,同時這個返回手勢可以被很多應(yīng)用借鑒使用,保證了用戶在多應(yīng)用中的統(tǒng)一體驗。

注重淺性引導(dǎo)

用戶剛剛上手應(yīng)用的時候是無法預(yù)知該應(yīng)用的手勢操作的,所以在應(yīng)用初始界面中加以介紹說明也是明智之舉,但無論你的應(yīng)用中有多少手勢和隱藏操作,在初始的幫助中只能說明一個最重要的,剩余的就交給淺性引導(dǎo)了。雜亂的說明無法讓用戶悉數(shù)記憶,而且會帶來不易用的感覺。

當(dāng)我們要設(shè)計一個滑動抽屜的手勢時,我們可以通過幫助界面的說明引導(dǎo)用戶,還可以在導(dǎo)航欄中加入一個按鈕來做淺性引導(dǎo)。比如當(dāng)我們點擊人人的左上角的按鈕后,抽屜界面會從左至右滑入屏幕,選擇某一項后抽屜會向左滑出。這樣對稱的動畫效果會讓我們有沖動去在界面中左滑右滑,如果真的可以調(diào)出抽屜我們自然會感到愉悅。

在區(qū)域性手勢中加入潛性引導(dǎo)也是很有必要的,以上述“導(dǎo)航欄右滑返回”的手勢為例。如果我們設(shè)計的應(yīng)用有這樣的手勢了,那么我們能去掉左上角的返回按鈕嗎?當(dāng)然不能!因為我們要給用戶在遺忘該手勢后操作的權(quán)利,所以我們應(yīng)該能保留左上角的按鈕,但需要進行一些修改來區(qū)分可用手勢和不可用手勢的情況。

左圖是傳統(tǒng)的界面,右圖是支持導(dǎo)航欄手勢的界面??梢园l(fā)現(xiàn)支持導(dǎo)航欄手勢的界面中左上角的按鈕是有所不同的,這樣的按鈕直接向用戶說明了當(dāng)前界面手勢是可用,而且右圖的按鈕會給人有種想拉動的沖動。

利用這樣的引導(dǎo)再加上左右對稱的動畫設(shè)計,一個可見性強的手勢操作就完成了,簡單總結(jié)下來就是:

  1. 找應(yīng)用界面共性設(shè)計出“導(dǎo)航欄手勢”。
  2. 利用應(yīng)用初始界面來說明一條主要手勢。
  3. 通過淺性引導(dǎo)實時引導(dǎo)用戶的操作和發(fā)現(xiàn)手勢。
  4. 保留傳統(tǒng)按鈕來增加手勢可見性,也給用戶選擇的權(quán)利。

目標(biāo)

手勢操作是觸屏設(shè)備獨特的交互模式,開發(fā)者設(shè)計手勢也是為了讓操作更為流暢,我們不希望手勢碎片化繼續(xù)下去,期待著開發(fā)者們能在手勢設(shè)定中求同存異、取長補短,最終給用戶帶來統(tǒng)一的操控感受。

來源:極客公園

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 寫的很好,手勢的統(tǒng)一確實是一個需要注意的問題

    來自四川 回復(fù)