巧用手勢(shì) 善待用戶(hù)

1 評(píng)論 2245 瀏覽 1 收藏 13 分鐘

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

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

為何要用手勢(shì)?

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

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

手勢(shì)操作的問(wèn)題

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

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

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

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

同樣的問(wèn)題還出現(xiàn)在了?Zaker?上。Zaker 的主要操作就是手勢(shì)操作,但同樣沒(méi)能做到通用性。在 Zaker 中我們點(diǎn)擊進(jìn)入一條新聞后下拉會(huì)回到上一個(gè)頁(yè)面,但是當(dāng)我們?cè)谶@個(gè)新聞中進(jìn)入評(píng)論界面后下拉后退的手勢(shì)會(huì)立刻失效,最終只能點(diǎn)左下角的返回按鈕。

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

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

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

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

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

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

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

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

設(shè)計(jì)一個(gè)手勢(shì)

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

減少無(wú)用手勢(shì)

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

善用區(qū)域性手勢(shì)

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

注重淺性引導(dǎo)

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

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

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

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

利用這樣的引導(dǎo)再加上左右對(duì)稱(chēng)的動(dòng)畫(huà)設(shè)計(jì),一個(gè)可見(jiàn)性強(qiáng)的手勢(shì)操作就完成了,簡(jiǎn)單總結(jié)下來(lái)就是:

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

目標(biāo)

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

來(lái)源:極客公園

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

    來(lái)自四川 回復(fù)