注意一：給你的手勢(shì)提供明確易懂的視覺反饋
在一個(gè)點(diǎn)擊或者手勢(shì)做完之后給予用戶視覺上的反饋，會(huì)讓用戶有自己動(dòng)作即將達(dá)到自己預(yù)期效果的滿足感。但是，當(dāng)用戶面對(duì)一個(gè)新的應(yīng)用和相應(yīng)新的手勢(shì)之時(shí)，視覺反饋就不僅僅只為了確認(rèn)用戶動(dòng)作而存在了，更承擔(dān)著明確告訴用戶這樣的手勢(shì)會(huì)帶來什么效果的重任。
反面例子：墨客是一款第三方微博客戶端，用戶在墨客的主界面某一條微博的區(qū)域內(nèi)完成從左到右的滑動(dòng)手勢(shì)之后，會(huì)顯示上圖左側(cè)的效果，該條微博的區(qū)域會(huì)整體向右移動(dòng)，并留出一定的灰色空白，見上圖；反之從右向左滑動(dòng)也會(huì)有微博區(qū)域向左移動(dòng)并留出灰色空白的情況發(fā)生。如第一次下載并使用這款應(yīng)用，用戶將無從知曉到底自己的這一手勢(shì)將要觸發(fā)怎樣的效果。這樣的視覺反饋便喪失了初衷。
正面例子：同樣是一款第三方微博客戶端，同樣是某一條微博的區(qū)域內(nèi)完成相同手勢(shì)，F(xiàn)uubo?這款應(yīng)用帶來的視覺反饋就要相對(duì)明確，完成手勢(shì)之后會(huì)有灰色半圓出現(xiàn)，并且半圓中含有轉(zhuǎn)發(fā)或評(píng)論的小圖標(biāo)，給了用戶明確的信息他的手勢(shì)即將帶來什么。
總結(jié)：為手勢(shì)的視覺反饋添加文字或圖標(biāo)信息；文字或圖標(biāo)信息要明確易懂。
注意二：為你的手勢(shì)準(zhǔn)備過渡效果
過渡效果為手勢(shì)增加了可見的質(zhì)感，提供給用戶可以注意到的變化過程。與此同時(shí)，過渡效果還為用戶提供了撤銷自己手勢(shì)的機(jī)會(huì)。
正面例子：上圖是愛范兒的 iOS 版客戶端，用戶在主界面中切換的時(shí)候，可以看到在進(jìn)行向右滑動(dòng)的同時(shí)，將要返回到的界面的左半部分逐漸顯露，這個(gè)過程中，用戶如果想要撤銷，可以將滑動(dòng)的手指向相反方向滑回，見上圖。這樣成功地通過過渡效果為用戶爭(zhēng)取了時(shí)間，用戶可以去決定到底是否要進(jìn)行這一手勢(shì)操作。
反面例子：還是同一款應(yīng)用，在點(diǎn)進(jìn)某一篇文章后，文章正文和評(píng)論頁面之間的切換卻不見了過渡動(dòng)畫的蹤影，手勢(shì)完成之后，硬梆梆的感覺讓用戶反感。
總結(jié)：
- 為手勢(shì)增加過渡動(dòng)畫效果；
- 通過過渡效果為用戶提供撤銷手勢(shì)的選擇。
注意三：替換標(biāo)準(zhǔn)手勢(shì)時(shí)學(xué)會(huì)接近用戶期望
一旦用戶適應(yīng)了某種東西，那么設(shè)計(jì)者很難再去改變用戶的習(xí)慣。對(duì)于手勢(shì)來說，有一些手勢(shì)已經(jīng)成了廣大智能手機(jī)用戶的標(biāo)準(zhǔn)手勢(shì)，比如在iphone手機(jī)中的短信或者郵件頁面，向右滑動(dòng)這一手勢(shì)會(huì)呼出刪除的選項(xiàng)，還比如在閱讀類應(yīng)用中向右滑動(dòng)這一手勢(shì)可以返回到上級(jí)界面。這些標(biāo)準(zhǔn)手勢(shì)意味著用戶在接觸新應(yīng)用和新應(yīng)用帶來的新手勢(shì)的時(shí)候，會(huì)有和原來一樣的期望產(chǎn)生。
正面例子：Clear?這款應(yīng)用中，任務(wù)項(xiàng)區(qū)域內(nèi)向右滑動(dòng)就可以將該項(xiàng)任務(wù)標(biāo)記完成，并且該項(xiàng)任務(wù)會(huì)自動(dòng)劃上橫線后下移到最低端。這樣的標(biāo)記完成功效和標(biāo)準(zhǔn)手勢(shì)中刪除的功效非常相近，不會(huì)給用戶適應(yīng)這一新手勢(shì)帶來什么成本，用戶也會(huì)覺得并沒有違背自身的期望，感覺舒適自然。
反面例子：Fuubo 這款應(yīng)用中，當(dāng)用戶進(jìn)入微博正文的頁面后，習(xí)慣性地向右滑動(dòng)，心中期待的是返回到主界面，但真正發(fā)生的卻是你進(jìn)入了這條微博的上一條的正文界面。這樣做會(huì)讓用戶產(chǎn)生挫敗感和不適應(yīng)，之后他沒準(zhǔn)還會(huì)在下次的使用中再次重蹈覆轍，對(duì)你的應(yīng)用的好感會(huì)逐步降低。
總結(jié)：用和標(biāo)準(zhǔn)手勢(shì)相近的手勢(shì)進(jìn)行替換。
注意四：不要讓你的手勢(shì)觸發(fā)區(qū)域遠(yuǎn)離拇指熱區(qū)
下拉和左右滑動(dòng)是用戶使用頻率最高的幾個(gè)手勢(shì)，但作為設(shè)計(jì)者，從哪開始拉，從哪開始滑卻是一個(gè)值得去注意的問題，尤其在當(dāng)下手機(jī)屏幕尺寸不斷增加的背景下，我們可愛的拇指的易觸及區(qū)域正在由原來的百分之三十左右逐漸減少。如同設(shè)計(jì)者需要將點(diǎn)擊目標(biāo)放在拇指熱區(qū)中一樣，手勢(shì)觸發(fā)區(qū)域也應(yīng)如此。
反面例子：上圖中左側(cè)的 Fuubo 的下拉返回觸發(fā)區(qū)域位于屏幕最上方的紅色區(qū)域內(nèi)，區(qū)域較小且最關(guān)鍵的是位置過于靠上，遠(yuǎn)離了拇指熱區(qū)。
正面例子：上圖中右側(cè)的隨享的下拉返回觸發(fā)熱區(qū)相對(duì)區(qū)域較大，且可以在屏幕中部的位置進(jìn)行觸發(fā)，這一部分是用戶拇指喜歡的位置。
總結(jié)：手勢(shì)觸發(fā)區(qū)域放在拇指熱區(qū)中。
注意五：保持手勢(shì)在全局的通用程度
不要讓用戶在你的應(yīng)用中適應(yīng)了你創(chuàng)造的手勢(shì)后，卻又在你的應(yīng)用中碰壁。
如果用戶喜愛你的手勢(shì)，覺得你的手勢(shì)達(dá)到了方便快捷的目的，并耗費(fèi)學(xué)習(xí)成本掌握并適應(yīng)了你的手勢(shì)，那么便意味著你成功了一半。另一半便是留住你的用戶，留住他喜愛你所創(chuàng)造的手勢(shì)的心。
正面例子：Fubbo 這款應(yīng)用的下拉返回的手勢(shì)完全做到全局通用。
反面例子：新浪官方微博客戶端的向右滑動(dòng)返回的手勢(shì)早已深入人心，被用戶所接受并習(xí)慣，但這個(gè)手勢(shì)并不是全局通用，在點(diǎn)擊鏈接之后想要返回的時(shí)候失效了，在點(diǎn)開大圖之后想要返回的時(shí)候失效了。另一個(gè)例子是 Fuubo 這款應(yīng)用所創(chuàng)造的微博正文頁面左右滑動(dòng)從而上下翻微博的手勢(shì)，在主界面的微博正文里有效，在個(gè)人頁面的微博正文里卻行不通。
總結(jié)：保持關(guān)鍵手勢(shì)全局通用。
以上文章轉(zhuǎn)自：http://reynold.cn/
起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)
