2019-11-28 資深UI設(shè)計(jì)者
業(yè)內(nèi)有很多人覺(jué)得手勢(shì)交互沒(méi)必要拿出來(lái)深究，覺(jué)得用戶(hù)使用產(chǎn)品的過(guò)程中，自然而然就會(huì)去使用拇指，進(jìn)行手勢(shì)操作。但這種說(shuō)法，就跟「用戶(hù)心理模型」類(lèi)似。當(dāng)然，對(duì)于用戶(hù)來(lái)說(shuō)沒(méi)必要深究手勢(shì)交互，但作為設(shè)計(jì)師，如果不了解其背后的邏輯，那么就無(wú)法解決產(chǎn)品設(shè)計(jì)背后的一些問(wèn)題。
所以我們今天，好好聊一聊手勢(shì)交互這件事。你會(huì)發(fā)現(xiàn)，原來(lái)你以往觀(guān)察或以為的設(shè)計(jì)問(wèn)題，都是手勢(shì)交互在作祟。
我們以前經(jīng)常聽(tīng)到「以用戶(hù)為中心做產(chǎn)品設(shè)計(jì)」這句話(huà)，意思是產(chǎn)品需依附于目標(biāo)用戶(hù)的真實(shí)場(chǎng)景來(lái)設(shè)計(jì)。與此同時(shí)，其實(shí)還有一句話(huà)在提醒著交互設(shè)計(jì)師如何做產(chǎn)品設(shè)計(jì)，就是「以觸摸屏為中心做產(chǎn)品設(shè)計(jì)」。
為什么呢？因?yàn)橛脩?hù)從始至終都是在跟觸摸屏做接觸，不管換了什么設(shè)備，他們都是要通過(guò)屏幕與產(chǎn)品進(jìn)行交互的。
我們可以在這里思考一下手勢(shì)的意義。
手勢(shì)的出現(xiàn)改變了什么？可以回想一下 iPhone 4 發(fā)布的時(shí)候，當(dāng)看到這樣一臺(tái)屏幕上沒(méi)有任何按鍵的設(shè)備，是不是會(huì)覺(jué)得不可思議？鍵盤(pán)，電話(huà)接聽(tīng)按鍵等都消失不見(jiàn)了。
人們?cè)谑褂?iPhone 這樣的產(chǎn)品時(shí)，不再需要去強(qiáng)行記憶任何固體按鍵。觸摸屏與手勢(shì)的結(jié)合，幫助我們隱藏不必要的元素，幫助用戶(hù)聚焦于內(nèi)容，在有限的物理空間獲得更多的信息。
所以用戶(hù)通過(guò)觸摸屏與產(chǎn)品進(jìn)行交互，跟通過(guò)鍵盤(pán)按鍵與屏幕進(jìn)行交互是完全不同的。手勢(shì)交互更自然且更。
手勢(shì)操作對(duì)我們來(lái)說(shuō)如此自然和直觀(guān)的主要原因是因?yàn)樗鼈冾?lèi)似于與真實(shí)對(duì)象進(jìn)行直接交互。譬如你用遙控器控制電視上的按鍵，需要通過(guò)上下左右這樣的操作來(lái)定位指示器，而觸摸屏直接就可以通過(guò)手指點(diǎn)擊內(nèi)容進(jìn)行操作。這是完全不同的概念。
綜上所述，我們能知道，手勢(shì)的三個(gè)要素：簡(jiǎn)潔、易用、直觀(guān)。
所以我們通過(guò)一些常見(jiàn)的手勢(shì)行為，就可以在產(chǎn)品界面上很輕松的完成任務(wù)。
常見(jiàn)的手勢(shì)行為：
當(dāng)然，我們經(jīng)常也會(huì)遇到一些背離手勢(shì)交互的產(chǎn)品設(shè)計(jì)，雖然也是點(diǎn)擊、拖動(dòng)等等，但操作起來(lái)總是不那么順心。這里面有一個(gè)關(guān)鍵點(diǎn)就是，手勢(shì)直觀(guān)性。
有數(shù)據(jù)表明，蘋(píng)果的 3D Touch 使用率非常低，就是因?yàn)橹庇^(guān)性太差，用戶(hù)不知道通過(guò)這個(gè)操作能帶來(lái)什么結(jié)果，且使用它需要長(zhǎng)按，經(jīng)常會(huì)同時(shí)呼出「卸載」，那么效率也就會(huì)降低。久而久之，用戶(hù)就不去使用了。
正面例子如下圖，滑動(dòng)與文案結(jié)合。
這樣一看，用戶(hù)馬上就能知道這個(gè)操作行為如何觸發(fā)，緊接著就產(chǎn)生行動(dòng)，然后會(huì)反饋結(jié)果。
這也是手勢(shì)交互的核心：觸發(fā)，行動(dòng)，反饋。
對(duì)比 3D Touch，觸發(fā)沒(méi)有提示，行動(dòng)后時(shí)常有兩種反饋結(jié)果，相比起來(lái)就不那么友好了。
除了上面聊的這些，手勢(shì)交互還能從另一方面來(lái)提升效率，就是拇指操作區(qū)域。
我們都知道，現(xiàn)在手機(jī)屏幕越來(lái)越大，甚至比最早屏幕大了一倍以上。但是很多設(shè)計(jì)師并沒(méi)有轉(zhuǎn)換思維，跟進(jìn)這個(gè)趨勢(shì)的變化。
這里給大家普及一個(gè)知識(shí)：大部分人誤以為，手指在屏幕上的熱區(qū)是永恒不變的，但其實(shí)手指熱區(qū)會(huì)根據(jù)設(shè)備的變大而縮小。因?yàn)槭终浦卧O(shè)備的重心靠后走了，所以拇指操控屏幕的范圍也就變小了。如下圖。
結(jié)果是，手機(jī)屏幕變大，雙手持機(jī)的用戶(hù)變多，但依然還有 75％ 的用戶(hù)是使用拇指來(lái)觸摸屏幕的。因此，術(shù)語(yǔ)「拇指驅(qū)動(dòng)設(shè)計(jì)」應(yīng)運(yùn)而生。
我們上面說(shuō)到，在使用一些產(chǎn)品的時(shí)候，經(jīng)常會(huì)遇到使用起來(lái)不順心的情況，然后說(shuō)了「手勢(shì)直觀(guān)性」的概念。但這里，還有個(gè)更重要的原因，就是「拇指操作區(qū)域」。
拇指操作區(qū)域被分為三塊內(nèi)容，分別是：易于觸達(dá)，難以觸達(dá)，以及介于兩者之間的區(qū)域。
看下圖。
所以在設(shè)計(jì)界面時(shí)，要注意界面的主要操作元素是否處于用戶(hù)易于觸達(dá)的范圍之內(nèi)。
如果你仔細(xì)觀(guān)察并思考過(guò)，也會(huì)發(fā)現(xiàn)，iOS 的產(chǎn)品界面中，「返回」按鈕就位于「難以觸達(dá)」的區(qū)域。原因是產(chǎn)品人員本身也不想用戶(hù)返回或退出，而是讓用戶(hù)聚焦于當(dāng)前頁(yè)面，想要返回，那就需要付出一點(diǎn)成本，什么成本？操作成本。
有人會(huì)說(shuō)，由于 iOS 可以從手機(jī)的左邊緣向右側(cè)輕掃以獲得返回效果，因此在大多數(shù) iOS 產(chǎn)品中，返回都不需要太大的操作成本。但是，并不是所有 iPhone 用戶(hù)都知道這一點(diǎn)，也不是所有產(chǎn)品都支持這一特性的。而且手勢(shì)交互的進(jìn)化本來(lái)也就是為了提升用戶(hù)操作的效率，所以本質(zhì)上他們并不矛盾，只是相比以前，我們現(xiàn)在的操作更快了。并且「右滑」返回，本身在手勢(shì)操作中相比「點(diǎn)擊」也是更具操作成本的。
當(dāng)了解了手勢(shì)的一些意義，以及拇指操作區(qū)域?qū)τ诋a(chǎn)品設(shè)計(jì)的重要性之后，我們就可以通過(guò)一些案例來(lái)做一個(gè)全局分析了。
1. 內(nèi)容在上，操作在下
許多人設(shè)計(jì) App，但是沒(méi)人研究過(guò) App 為什么要這么設(shè)計(jì)。
比如，為什么起初要把標(biāo)簽欄放底下呢？關(guān)于這個(gè)問(wèn)題，當(dāng)初我也是問(wèn)了許多人，而基本都只是說(shuō)這是官方設(shè)計(jì)規(guī)范。這相當(dāng)于是一句廢話(huà)。
通過(guò)翻閱多方資料，我發(fā)現(xiàn)在工業(yè)設(shè)計(jì)領(lǐng)域有一條重要的基本設(shè)計(jì)原則：內(nèi)容在上，操作在下。
比如在使用電腦的時(shí)候，操作在下意味著使用者在操作過(guò)程中，手指始終處于界面下方，而內(nèi)容在上面，就不會(huì)出現(xiàn)手指遮擋內(nèi)容的情況。
如下圖的鍵盤(pán)操作提示：
基于此，相信你也知道為什么標(biāo)簽欄在下方了吧？
另外，為什么 iOS 設(shè)計(jì)規(guī)范建議將「編輯」按鈕放置在界面右/左上方的位置呢？
界面右/左上角的位置對(duì)拇指來(lái)說(shuō)顯然是不友好的。然而，這樣做的原因也是顯而易見(jiàn)的：編輯功能會(huì)讓數(shù)據(jù)發(fā)生變化。將這類(lèi)控件放在難以操作的位置上（與左上角的返回是一個(gè)道理），就是一種防御性的設(shè)計(jì)策略，可以在一定程度上避免因?yàn)樘菀桩a(chǎn)生誤操作而導(dǎo)致的破壞性的結(jié)果。
通過(guò)這一小段之前聊過(guò)的內(nèi)容，你們會(huì)發(fā)現(xiàn)，手勢(shì)與拇指操作其實(shí)在驅(qū)動(dòng)著產(chǎn)品設(shè)計(jì)。下面我們來(lái)聊個(gè)大的案例。
漢堡包菜單，也就是側(cè)邊欄導(dǎo)航，F(xiàn)acebook 早期測(cè)試顯示側(cè)邊欄導(dǎo)航讓用戶(hù)使用率降低了一半。
我們一起來(lái)看看市面上給出的三類(lèi)說(shuō)法。
1. 可見(jiàn)性太低
默認(rèn)狀態(tài)下，用戶(hù)是看不見(jiàn)側(cè)邊欄的，除非點(diǎn)擊了側(cè)邊欄的彈出按鈕。所以這種情況下，里面的功能都是用戶(hù)腦袋里已知的，但很可能都想不起來(lái)。比如，現(xiàn)在你回想一下知乎底部 5 個(gè)標(biāo)簽分別是什么？或者微信右上角「+」里面有哪些功能？是不是要想一會(huì)兒，才能記起來(lái)？甚至還是想不起來(lái)。
之前我在文章里寫(xiě)過(guò)，用戶(hù)對(duì)于功能的使用一定是「所見(jiàn)即所得」，而不是「心向往之」。用戶(hù)只會(huì)注意自己看到的信息，而不是憑借記憶或想象來(lái)使用產(chǎn)品。
底部標(biāo)簽欄就很好的解決了漢堡包菜單的「可見(jiàn)性」問(wèn)題。
2. 效率較低
效率較低主要在于操作頻率，大家看下面兩組圖的對(duì)比。
第一張圖，當(dāng)用戶(hù)從首頁(yè)進(jìn)入到個(gè)人信息頁(yè)面，只需要兩步；而第二張圖，則要三步。
這里多一步看起來(lái)似乎影響不大，但如果現(xiàn)在要從個(gè)人信息頁(yè)面到「標(biāo)簽 3」的話(huà)，第一張圖也只需要兩步，第二張圖還是需要三步，當(dāng)頻繁去使用這樣的產(chǎn)品后，用戶(hù)的整體效率就會(huì)下降，體驗(yàn)也會(huì)隨之降低。
3. 與平臺(tái)模式?jīng)_突
大家應(yīng)該知道，在 iOS 的操作頁(yè)面中，通過(guò)手勢(shì)可對(duì) tab 進(jìn)行左右切換，而側(cè)邊欄除了通過(guò)點(diǎn)擊菜單按鈕展開(kāi)之外，也可以通過(guò)右滑彈出。這里面有什么沖突呢？看下圖。
當(dāng)頁(yè)面聚焦在「標(biāo)簽 2」時(shí)，右滑除了能回到「標(biāo)簽 1」，同樣也很可能會(huì)切出側(cè)邊導(dǎo)航欄。
這樣的手勢(shì)沖突，導(dǎo)致頁(yè)面層級(jí)與功能導(dǎo)航的優(yōu)先級(jí)混亂了。
無(wú)論是導(dǎo)航還是控件，當(dāng)它們組成一個(gè)頁(yè)面后，它們的操作就會(huì)有優(yōu)先級(jí)。比如下面這個(gè)例子。
如果你對(duì)標(biāo)紅的分段控件比較熟悉，就知道，它是可通過(guò)屏幕滑動(dòng)進(jìn)行切換的。但是在「短信」里，它是不能通過(guò)滑動(dòng)屏幕進(jìn)行切換的，因?yàn)橛脩?hù)可對(duì)單條信息進(jìn)行左滑做刪除或其他操作。所以當(dāng)頁(yè)面操作模式存在矛盾時(shí)，我們會(huì)將子層級(jí)操作優(yōu)先于父層級(jí)操作。
譬如你進(jìn)入朋友圈，是不能馬上回到首頁(yè)的，這時(shí)候頁(yè)面層級(jí)較深，產(chǎn)品人員要將用戶(hù)聚焦于頁(yè)面本身，如果直接能返回到首頁(yè)，頁(yè)面層級(jí)和產(chǎn)品架構(gòu)就會(huì)混亂。
類(lèi)似的例子還有很多，我這里就不繼續(xù)列舉了。
所以從「短信」的例子可以看出，當(dāng)控件與控件之間的手勢(shì)發(fā)生沖突時(shí)，我們要考慮優(yōu)先級(jí)，將內(nèi)容優(yōu)先于頁(yè)面來(lái)處理。那么回到上面的例子，分段控件與漢堡包菜單的手勢(shì)發(fā)生沖突時(shí)，很明顯我們要優(yōu)先分段控件的操作，而禁止掉漢堡包菜單的右滑手勢(shì)。結(jié)果就是，效率又低了。
4. 小結(jié)
這三類(lèi)，如果你認(rèn)真思考里面的關(guān)系，其實(shí)就會(huì)發(fā)現(xiàn)，它們的共通點(diǎn)就是與拇指的聯(lián)系過(guò)于被動(dòng)或直接被切斷了。
它們的核心點(diǎn)就是拇指與觸摸屏的關(guān)系。
如果你現(xiàn)在還不能深刻理解漢堡包菜單的劣勢(shì)，那就想一下去看一下現(xiàn)在的產(chǎn)品，其中「我的」、「?jìng)€(gè)人中心」或「更多」其實(shí)都是變相的漢堡包菜單。
在「我」這個(gè)標(biāo)簽頁(yè)里，這一系列功能列表，無(wú)非就是另一種模式的漢堡包菜單，只是這里呈現(xiàn)的都是不重要的功能，并不影響用戶(hù)使用這個(gè)產(chǎn)品?；叵胍幌?，你是不是很少，甚至從來(lái)沒(méi)用過(guò)這里的某幾個(gè)功能？再跟手勢(shì)結(jié)合，就會(huì)發(fā)現(xiàn)，「我」所處區(qū)域并不是容易點(diǎn)擊的區(qū)域，這就是它效率低下的原因了。現(xiàn)在能懂了么？
當(dāng)傳統(tǒng)的確認(rèn)彈窗逐漸被手勢(shì)操作取代，大家就應(yīng)該察覺(jué)到：以往從電腦遷移到移動(dòng)設(shè)備上的交互行為已逐漸被改善。
我曾經(jīng)寫(xiě)過(guò)一篇文章，叫「取消按鈕的設(shè)計(jì)邏輯」，講了「左取消，右行進(jìn)」這個(gè)原理。意思就是當(dāng)我們?cè)谠O(shè)計(jì)彈框的時(shí)候，用戶(hù)已經(jīng)習(xí)慣這樣的操作路徑，所以不要輕易更換位置以混淆用戶(hù)的認(rèn)知。再?gòu)氖謩?shì)的角度來(lái)說(shuō)，就是右邊更容易點(diǎn)擊。
后來(lái)有同學(xué)說(shuō)到，但是有些特殊場(chǎng)景，譬如刪除資料，而產(chǎn)品人員不希望用戶(hù)刪除，于是把刪除放在左邊，取消放在右邊。畢竟右邊更容易點(diǎn)擊，所以位置換了會(huì)比較合理。
這是錯(cuò)的！
我們不能通過(guò)改變用戶(hù)使用產(chǎn)品的常識(shí)來(lái)將產(chǎn)品人員的想法置于用戶(hù)之上。當(dāng)用戶(hù)已經(jīng)形成「左取消，右行進(jìn)」的認(rèn)知之后，違反這樣的一致性，去換位置是很危險(xiǎn)的。所以出現(xiàn)了 action sheet，來(lái)解決一些產(chǎn)品關(guān)于 alert 無(wú)法解決的問(wèn)題。
如圖。
大家要記住的是，當(dāng)頁(yè)面邏輯與手勢(shì)操作產(chǎn)生邏輯沖突時(shí)，我們不是去否定以前已經(jīng)被驗(yàn)證且正確的內(nèi)容，而是通過(guò)創(chuàng)新，來(lái)解決這個(gè)沖突。這就是拇指驅(qū)動(dòng)設(shè)計(jì)的一種方式。
包括我們以前在移動(dòng)設(shè)備上選擇刪除某項(xiàng)數(shù)據(jù)，都會(huì)彈出警告框，詢(xún)問(wèn)我們是否確認(rèn)刪除。這種方式會(huì)打斷我們的操作行為，久而久之，用戶(hù)已經(jīng)對(duì)此交互方式習(xí)以為常，或者說(shuō)免疫了，但這種彈框的方式始終被認(rèn)為是不好的一種交互手段。所以側(cè)滑刪除，已經(jīng)被更多產(chǎn)品功能用來(lái)取代沒(méi)必要彈框的操作。
也許很多人沒(méi)思考過(guò)底層原因，或者僅僅只是覺(jué)得其相比彈框顯得更友好。其實(shí)這個(gè)行為是基于手勢(shì)交互做了相應(yīng)的優(yōu)化，讓用戶(hù)操作起來(lái)更加方便。
到了這里，我再舉個(gè)所有人都熟悉的例子，就是輪播圖了。
輪播圖最早出現(xiàn)于網(wǎng)頁(yè)端，后來(lái)被大量商家模仿，以至于到移動(dòng)端還備受各產(chǎn)品設(shè)計(jì)人員的歡迎。但其實(shí)很多人對(duì)輪播圖的使用方法都是錯(cuò)誤的。
下面來(lái)看輪播圖與手勢(shì)的關(guān)系。
試想：你的輪播圖有 6 張 Banner，你要翻到第 4 張，無(wú)論是往前翻還是往后翻都要產(chǎn)生 3 次交互行為。而大部分產(chǎn)品的用戶(hù)在界面停留的時(shí)間不會(huì)這么久，更不會(huì)看完你 Banner 的內(nèi)容。以至于有研究表明，大部分產(chǎn)品里，除了第一張 Banner 的點(diǎn)擊率能達(dá)到 83% 之外，其余的點(diǎn)擊率都非常低。
有人說(shuō)可以點(diǎn)擊下面的原點(diǎn)指示器做跳轉(zhuǎn)，這么小的點(diǎn)，你覺(jué)得點(diǎn)擊它現(xiàn)實(shí)么？所以手勢(shì)交互與輪播圖是相互矛盾的一種設(shè)計(jì)方式。
所以當(dāng)運(yùn)營(yíng)策劃了一個(gè)活動(dòng)，而你就往頂部的輪播圖里塞，這個(gè)行為就已經(jīng)注定這個(gè)活動(dòng)的用戶(hù)參與度是很低的了。除了個(gè)別電商產(chǎn)品，他們以賣(mài)廣告位給商家作為盈利點(diǎn)，但即便如此，我相信這個(gè)廣告位除了第一張圖的點(diǎn)擊量稍高外，其他圖片的點(diǎn)擊量相對(duì)于產(chǎn)品本身的用戶(hù)體量比較而言還是很低的。這也是為什么部分產(chǎn)品把輪播圖規(guī)則改為用戶(hù)進(jìn)入首頁(yè)隨機(jī)展示輪播圖頁(yè)面，而不是強(qiáng)制指定于顯示第一張的原因。
畢竟輪播圖在頂部，用戶(hù)需要通過(guò)拇指長(zhǎng)時(shí)間的在「延伸區(qū)域」進(jìn)行操作，那么使用率自然就降低了。
如果你的產(chǎn)品有很多活動(dòng)是在同時(shí)期進(jìn)行的，那么我給部分產(chǎn)品的建議是放一個(gè)活動(dòng)主題入口，如下圖。（當(dāng)然，這要視情況而定，并不是通用的。）
我們現(xiàn)在看到的搜索框基本都是放在屏幕頂部。
為什么呢？
市面上對(duì)這個(gè)問(wèn)題的解釋是這樣的：用戶(hù)已經(jīng)被現(xiàn)在的產(chǎn)品訓(xùn)練得在界面的頂部必須看到一個(gè)搜索框，設(shè)計(jì)師打破這個(gè)常規(guī)就要承擔(dān)風(fēng)險(xiǎn)。
看完這篇文章，你就已經(jīng)知道，對(duì)于用戶(hù)來(lái)說(shuō)，由于屏幕頂部離拇指很遠(yuǎn)，處于難以觸達(dá)的區(qū)域，在體驗(yàn)上很不好。所以搜索框成了認(rèn)知上應(yīng)該在頂部，但操作體驗(yàn)上又不應(yīng)該在頂部的一個(gè)設(shè)計(jì)。
但是回想一下，會(huì)發(fā)現(xiàn)大多數(shù) App 的主要內(nèi)容都是位于易于觸達(dá)的區(qū)域。所以當(dāng)看到高德地圖把搜索框移動(dòng)到下面來(lái)之后，就能知道，拇指驅(qū)動(dòng)設(shè)計(jì)的概念被越來(lái)越多的人認(rèn)識(shí)到其重要性。
地圖類(lèi)產(chǎn)品把搜索框移到下面來(lái)的首創(chuàng)應(yīng)用不是高德，應(yīng)該是 Lyft。
瞧，拇指驅(qū)動(dòng)設(shè)計(jì)，多酷~
《上癮》里有句話(huà)：當(dāng)人們不由自由地做出下一個(gè)舉動(dòng)時(shí)，新的習(xí)慣就會(huì)成為他們?nèi)粘Ｉ畹囊徊糠帧?
當(dāng)手勢(shì)充分地發(fā)揮了作用，輔助用戶(hù)操作或?qū)崿F(xiàn)功能，它就成了用戶(hù)不可分割的一部分。
今天通過(guò)對(duì)手勢(shì)意義的解讀，以及拇指驅(qū)動(dòng)設(shè)計(jì)的解析，再加上這些案例的拆解，我相信你能更好地理解為什么手勢(shì)交互這么重要了。
交互設(shè)計(jì)師對(duì)于「觸摸屏」，必須有深刻的認(rèn)識(shí)，才能理解設(shè)計(jì)背后的邏輯。
如果這篇文章對(duì)你有幫助，記得點(diǎn)個(gè)贊，后面我好持續(xù)輸出。
文章來(lái)源：優(yōu)設(shè)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com