給應(yīng)用加入手勢操作需要注意的那些事兒

0 評論 2132 瀏覽 1 收藏 8 分鐘

給你的手勢提供明確易懂的視覺反饋

在一個(gè)點(diǎn)擊或者手勢做完之后給予用戶視覺上的反饋,會讓用戶有自己動作即將達(dá)到自己預(yù)期效果的滿足感。但是,當(dāng)用戶面對一個(gè)新的應(yīng)用和相應(yīng)新的手勢之時(shí),視覺反饋就不僅僅只為了確認(rèn)用戶動作而存在了,更承擔(dān)著明確告訴用戶這樣的手勢會帶來什么效果的重任。

反面例子:墨客是一款第三方微博客戶端,用戶在墨客的主界面某一條微博的區(qū)域內(nèi)完成從左到右的滑動手勢之后,會顯示上圖左側(cè)的效果,該條微博的區(qū)域會整體向右移動,并留出一定的灰色空白,見上圖;反之從右向左滑動也會有微博區(qū)域向左移動并留出灰色空白的情況發(fā)生。如第一次下載并使用這款應(yīng)用,用戶將無從知曉到底自己的這一手勢將要觸發(fā)怎樣的效果。這樣的視覺反饋便喪失了初衷。

正面例子:同樣是一款第三方微博客戶端,同樣是某一條微博的區(qū)域內(nèi)完成相同手勢,F(xiàn)uubo?這款應(yīng)用帶來的視覺反饋就要相對明確,完成手勢之后會有灰色半圓出現(xiàn),并且半圓中含有轉(zhuǎn)發(fā)或評論的小圖標(biāo),給了用戶明確的信息他的手勢即將帶來什么。

總結(jié):為手勢的視覺反饋添加文字或圖標(biāo)信息;文字或圖標(biāo)信息要明確易懂。

為你的手勢準(zhǔn)備過渡效果

過渡效果為手勢增加了可見的質(zhì)感,提供給用戶可以注意到的變化過程。與此同時(shí),過渡效果還為用戶提供了撤銷自己手勢的機(jī)會。

給應(yīng)用加入手勢操作需要注意的那些事兒

正面例子:上圖是愛范兒的 iOS 版客戶端,用戶在主界面中切換的時(shí)候,可以看到在進(jìn)行向右滑動的同時(shí),將要返回到的界面的左半部分逐漸顯露,這個(gè)過程中,用戶如果想要撤銷,可以將滑動的手指向相反方向滑回,見上圖。這樣成功地通過過渡效果為用戶爭取了時(shí)間,用戶可以去決定到底是否要進(jìn)行這一手勢操作。

反面例子:還是同一款應(yīng)用,在點(diǎn)進(jìn)某一篇文章后,文章正文和評論頁面之間的切換卻不見了過渡動畫的蹤影,手勢完成之后,硬梆梆的感覺讓用戶反感。

總結(jié)

  • 為手勢增加過渡動畫效果;
  • 通過過渡效果為用戶提供撤銷手勢的選擇。

替換標(biāo)準(zhǔn)手勢時(shí)學(xué)會接近用戶期望

一旦用戶適應(yīng)了某種東西,那么設(shè)計(jì)者很難再去改變用戶的習(xí)慣。對于手勢來說,有一些手勢已經(jīng)成了廣大智能手機(jī)用戶的標(biāo)準(zhǔn)手勢,比如在iphone手機(jī)中的短信或者郵件頁面,向右滑動這一手勢會呼出刪除的選項(xiàng),還比如在閱讀類應(yīng)用中向右滑動這一手勢可以返回到上級界面。這些標(biāo)準(zhǔn)手勢意味著用戶在接觸新應(yīng)用和新應(yīng)用帶來的新手勢的時(shí)候,會有和原來一樣的期望產(chǎn)生。

給應(yīng)用加入手勢操作需要注意的那些事兒

正面例子:Clear?這款應(yīng)用中,任務(wù)項(xiàng)區(qū)域內(nèi)向右滑動就可以將該項(xiàng)任務(wù)標(biāo)記完成,并且該項(xiàng)任務(wù)會自動劃上橫線后下移到最低端。這樣的標(biāo)記完成功效和標(biāo)準(zhǔn)手勢中刪除的功效非常相近,不會給用戶適應(yīng)這一新手勢帶來什么成本,用戶也會覺得并沒有違背自身的期望,感覺舒適自然。

反面例子:Fuubo 這款應(yīng)用中,當(dāng)用戶進(jìn)入微博正文的頁面后,習(xí)慣性地向右滑動,心中期待的是返回到主界面,但真正發(fā)生的卻是你進(jìn)入了這條微博的上一條的正文界面。這樣做會讓用戶產(chǎn)生挫敗感和不適應(yīng),之后他沒準(zhǔn)還會在下次的使用中再次重蹈覆轍,對你的應(yīng)用的好感會逐步降低。

總結(jié):用和標(biāo)準(zhǔn)手勢相近的手勢進(jìn)行替換。

不要讓你的手勢觸發(fā)區(qū)域遠(yuǎn)離拇指熱區(qū)

下拉和左右滑動是用戶使用頻率最高的幾個(gè)手勢,但作為設(shè)計(jì)者,從哪開始拉,從哪開始滑卻是一個(gè)值得去注意的問題,尤其在當(dāng)下手機(jī)屏幕尺寸不斷增加的背景下,我們可愛的拇指的易觸及區(qū)域正在由原來的百分之三十左右逐漸減少。如同設(shè)計(jì)者需要將點(diǎn)擊目標(biāo)放在拇指熱區(qū)中一樣,手勢觸發(fā)區(qū)域也應(yīng)如此。

給應(yīng)用加入手勢操作需要注意的那些事兒

反面例子:上圖中左側(cè)的 Fuubo 的下拉返回觸發(fā)區(qū)域位于屏幕最上方的紅色區(qū)域內(nèi),區(qū)域較小且最關(guān)鍵的是位置過于靠上,遠(yuǎn)離了拇指熱區(qū)。

正面例子:上圖中右側(cè)的隨享的下拉返回觸發(fā)熱區(qū)相對區(qū)域較大,且可以在屏幕中部的位置進(jìn)行觸發(fā),這一部分是用戶拇指喜歡的位置。

總結(jié):手勢觸發(fā)區(qū)域放在拇指熱區(qū)中。

保持手勢在全局的通用程度

不要讓用戶在你的應(yīng)用中適應(yīng)了你創(chuàng)造的手勢后,卻又在你的應(yīng)用中碰壁。

如果用戶喜愛你的手勢,覺得你的手勢達(dá)到了方便快捷的目的,并耗費(fèi)學(xué)習(xí)成本掌握并適應(yīng)了你的手勢,那么便意味著你成功了一半。另一半便是留住你的用戶,留住他喜愛你所創(chuàng)造的手勢的心。

正面例子:Fubbo 這款應(yīng)用的下拉返回的手勢完全做到全局通用。

反面例子:新浪官方微博客戶端的向右滑動返回的手勢早已深入人心,被用戶所接受并習(xí)慣,但這個(gè)手勢并不是全局通用,在點(diǎn)擊鏈接之后想要返回的時(shí)候失效了,在點(diǎn)開大圖之后想要返回的時(shí)候失效了。另一個(gè)例子是 Fuubo 這款應(yīng)用所創(chuàng)造的微博正文頁面左右滑動從而上下翻微博的手勢,在主界面的微博正文里有效,在個(gè)人頁面的微博正文里卻行不通。

總結(jié):保持關(guān)鍵手勢全局通用。

來源:伯樂在線

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!