2019-10-24 資深UI設(shè)計者
交互手勢是用戶操作的重要部分，交互手勢的設(shè)計好壞非常影響用戶體驗，那么，交互手勢的設(shè)計上對于容錯性和邏輯性需要注意什么？
隨著用戶體驗被愈發(fā)的重視，更多的 APP 偏向于使用多手勢優(yōu)化用戶的操作流程，降低使用阻力。
點擊某個確定的按鈕的手勢操作雖然被普遍使用并被用戶熟知，但是增加更快捷的手勢操作可以大大增大操作熱區(qū)，提高操作效率，如下圖。
然而，我們可以發(fā)現(xiàn)由于不同產(chǎn)品的設(shè)計師對于用戶體驗的理解不同、交互層面的思考不同，導(dǎo)致設(shè)計的交互手勢也不同。
有時同一種操作在不同的 APP 中交互手勢也是不統(tǒng)一的，這無疑增加了用戶的學(xué)習(xí)成本和記憶成本。
舉個例子，iOS 端的得到和有書的播放頁的打開和關(guān)閉方式。
得到有兩種方式打開和關(guān)閉頁面，用戶可以通過點擊控件或上滑控件打開播放頁，通過點擊收起按鈕或下拉頁面關(guān)閉播放頁。但是有書只有一種方式打開和關(guān)閉，用戶只能通過點擊控件打開播放頁，通過點擊返回圖標(biāo)關(guān)閉播放頁。
這讓習(xí)慣了使用得到的我去使用有書時，感覺非常別扭，每次都嘗試用得到的手勢去操作但是都失敗了，失敗后我下一次并沒有記住仍然用手勢去操作，如此反復(fù)令我相當(dāng)沮喪。
容錯性是一個很大的話題，今天我們僅僅在交互手勢層面上討論。
上面的例子中，有書并沒有設(shè)計滑動手勢去打開和關(guān)閉播放頁，那么我以我的經(jīng)驗去進(jìn)行的滑動滑操作在有書這個產(chǎn)品中就是錯誤的和不被產(chǎn)品識別的。但是這種手勢又廣泛存在于大量的音頻播放 APP 中，如喜馬拉雅、荔枝 FM 等。
一旦用戶從這些 APP 遷移到了有書，本來養(yǎng)成的操作習(xí)慣在有書就失效了，用戶就會感覺“這個 APP 很難用，用起來很不舒服”，進(jìn)而可能放棄有書轉(zhuǎn)而投向其他產(chǎn)品懷抱。
與手勢設(shè)計類似，這也是為什么現(xiàn)在的同種類型的 APP 的信息架構(gòu)設(shè)計越來越同質(zhì)化，當(dāng)我們打開淘寶、天貓、京東時我們有時感覺就像是同一個 APP ，本質(zhì)上也是為了降低用戶的遷移、記憶和學(xué)習(xí)成本。
如下圖所示，提高手勢的容錯性對用戶的意義。
很多優(yōu)秀的產(chǎn)品考慮到了上述問題，設(shè)計了多手勢來優(yōu)化用戶體驗。
舉個例子，在 APP Store 的首頁點擊一個推薦卡片后進(jìn)入詳情頁，由于詳情頁是直接由卡片放大轉(zhuǎn)場的，不同于傳統(tǒng)的新頁面右側(cè)進(jìn)入和從底部彈出。
在用戶的使用習(xí)慣和認(rèn)知中新頁面如果從右側(cè)進(jìn)入就可以通過右滑返回，從底部彈出的話就可以下拉返回。因此，當(dāng)用戶面對卡片放大進(jìn)入新頁面這種全新交互時可能會疑惑如何返回，對此理解不同的用戶可能會嘗試右滑，也可能嘗試下拉。
APP Store 的設(shè)計在此就有很好的容錯性，用戶可以通過三種方式返回首頁，分別是、右滑返回、下拉返回和點擊叉號返回，這不但降低了用戶的記憶和學(xué)習(xí)成本，也便于不同習(xí)慣的用戶使用。
針對不同的場景，手勢的使用也會有不同。
一個很好的案例是知乎的評論：知乎的評論的關(guān)閉方式有三種，分別是下拉、右滑和點擊叉號。
用戶觀看評論的場景有兩種，第一種是只想看一下精選評論然后關(guān)閉，第二種是被評論吸引后一直往下看。當(dāng)用戶單手操作不方便點擊叉號時，下拉對應(yīng)的是第一種用戶；右滑對應(yīng)的是第二種用戶，不管用戶看了多少屏的評論，隨時可以通過右滑關(guān)閉評論（因為用戶翻閱了很多屏評論后需要下拉到第一條評論時，下拉關(guān)閉評論手勢才會生效，所以第二種用戶一般不使用下拉去關(guān)閉評論）。
可能你會心生疑惑：“第一種用戶也可以使用右滑來關(guān)閉評論呀”，確實可以，但是對于人的操作習(xí)慣來說，上下滑動會比左右滑動更方便。
還值得討論的是蘋果自 iPhone 6s 開始加入的新交互方式 3D Touch，它允許用戶通過更大力度的重按呼出情景菜單快捷地使用高頻功能而不用先打開 APP，對于追求效率的用戶來說簡直不要更方便，但是對于不支持 3D Touch 的機型則無法使用情景菜單。
因此，在生活中我發(fā)現(xiàn)這樣的現(xiàn)象，很多使用慣了3D Touch 的用戶換到無 3D Touch 的蘋果機型后很不習(xí)慣，總是嘗試去重按但是是無效的。
其實在很多安卓手機上也有情景菜單這一功能，它巧妙地將卸載也加到了情景菜單中，因此用戶只需要通過長按就可以獲得所有需要的功能，而不是像蘋果那樣長按是卸載而重按是情景菜單。
我猜測蘋果為了適配所有機型，提高容錯性，從今年的發(fā)布會的 iPhone 11 和iPhone 11 pro 開始，取消了 3D Touch，轉(zhuǎn)而使用 Haptic Touch （有震動反饋的長按）代替。當(dāng)你長按某個圖標(biāo)時，感受到震動后松開，即可呼出二級菜單；如果震動后仍不松開，則進(jìn)入到卸載 APP 時的抖動狀態(tài)，使得之后的即使不支持 3D Touch的機型可以使用便捷的情景菜單了。
對于不支持 3D Touch 的老款機型會不會在 iOS 13 更新后也可以使用 Haptic Touch 呢？
如果一致統(tǒng)一的話，容錯性將大大提高，我們將拭目以待。
不僅僅是 iOS ，Android 的版本 Android 10經(jīng)歷了 6 個測試版迭代后正式發(fā)布，我們發(fā)現(xiàn)交互手勢是 Android 10 的一個巨大亮點。Android 10 在第三版內(nèi)測系統(tǒng)開始引入全局手勢操作，用戶啟用后，屏幕底部便不會再出現(xiàn)虛擬按鍵和導(dǎo)航欄，只會剩下一個指示條，上滑返回主屏、側(cè)滑返回上一層的操作邏輯也均和 iOS 保持一致。
這可能標(biāo)志著安卓手機一直以來在國內(nèi)各家廠商的各種創(chuàng)新手勢的割裂生態(tài)中即將重歸統(tǒng)一，并和 iOS 保持一致。
這種妥協(xié)將大大提高在用戶使用一款新安卓手機時的容錯性，同時降低了今后用戶在兩大系統(tǒng)之間的遷移成本。
再談?wù)勥壿嬓裕诮换ナ謩莸膶用嫔?，如果用戶能夠通過某個手勢進(jìn)行某個操作后，按照邏輯，用戶也可以通過反向的手勢或?qū)?yīng)的手勢進(jìn)行逆向操作。
比如，在微信首頁下拉調(diào)出小程序頁面，之后可以通過上拉返回首頁。點擊加號呼出更多操作，再次點擊加號收起更多操作。
如果違背了用戶的心理模型和邏輯性，用戶就會感覺到混亂和不適。
這里舉一個反例， Uki 的個人主頁可以通過點擊或下拉底部的固定底板收起更多信息，但是收起后只能通過點擊展開更多個人信息而不能上拉，不符合邏輯與用戶的心理模型。
如下圖所示，邏輯性對用戶的意義。
有的時候，我們會發(fā)現(xiàn)為了提高容錯性，我們會犧牲一部分邏輯性。
就像上文提到的知乎關(guān)閉評論彈出框，邏輯上它是從底部彈出的，但是不但能夠下拉關(guān)閉還可以右滑關(guān)閉。盡管右滑關(guān)閉有些違背用戶的心理模型，但是確實給用戶帶來了很多操作上的便捷。
我們需要考慮的因素包括使用頻率、危險程度和特殊體驗。
1）考慮不同平臺的硬件系統(tǒng)和操作系統(tǒng)特性
由于硬件與操作系統(tǒng)差異，iOS 系統(tǒng)支持很多手勢，但是安卓系統(tǒng)在手勢支持方面就不如 iOS 豐富。
安卓硬件設(shè)備的差異比較大，不同安卓手機廠商會在安卓系統(tǒng)的基礎(chǔ)上自定義系統(tǒng)的手勢操作，因此對于手勢的支持也有較大的差異。對于這種情況我們需要熟悉相應(yīng)平臺的規(guī)范，做到心中有數(shù)。
2）考慮所選的手勢的學(xué)習(xí)成本和記憶成本，用戶是否已經(jīng)被教育
如下圖所示，盡管設(shè)備支持的手勢數(shù)量多不勝數(shù)，但是日常使用 APP 時，大部分用戶習(xí)慣使用的手勢很少，比如單擊、雙擊、滑動、上拉、下拉、雙指擴張和收縮等。除此之外的手勢教育成本和學(xué)習(xí)成本很高。
一般比較通用的功能是沒有必要在此處創(chuàng)新的，但是如果一些特殊的操作確實需要加入時，我們就需要考慮下面的問題。
a. 如果沒有教育成熟，考慮加入教學(xué)或搭配簡易的操作方式
對于我們需要加入的手勢操作當(dāng)前用戶并未被教育成熟時，我們需要考慮加入手勢教學(xué)，具體的手勢教學(xué)類型下一部分會詳細(xì)討論。
然而，大部分情況下用戶的記憶是短期的，教學(xué)內(nèi)容可能會被快速遺忘，下次用戶使用 APP 時仍然不會使用特殊手勢。此時我們應(yīng)該將一些比較難以記憶的手勢操作搭配一個簡單的手勢操作。
比如 QQ 閱讀的下拉擬物繩燈切換夜間模式的手勢操作設(shè)計，其考慮到了有些用戶在現(xiàn)實生活中并未見過擬物繩燈，并不知道是要進(jìn)行下拉才能觸發(fā)操作。因此，QQ 閱讀貼心地搭配了一個簡單的點擊操作，用戶通過點擊繩燈也可以切換夜間模式，如下圖。
b. 考慮所選手勢是否可能導(dǎo)致沖突和誤操作，如果導(dǎo)致了，考慮如何避免和折中
最常見的手勢沖突情況就是 APP 的手勢與操作系統(tǒng)的全局手勢沖突。
解決方案有兩個，一是避免設(shè)計與全局手勢一致的手勢操作，例如 iOS 的在屏幕邊緣右滑返回、全面屏機型的底部上滑退出應(yīng)用等全局手勢操作；二是仍然設(shè)計與全局手勢沖突的操作，但是將全局手勢部分禁用或以其他的方式區(qū)分開。
如下圖有書播放頁的案例，由于進(jìn)度條滑動控件過于靠左，導(dǎo)致使用 iOS 全局右滑返回手勢時有時會產(chǎn)生誤操作，即本來想要右滑返回卻不小心滑動了進(jìn)度條。
這種情況下我們可以標(biāo)注一個右滑手勢禁用區(qū)域給開發(fā)工程師說明情況，將此情況避免掉即可。
誤操作指的是，我們設(shè)計的手勢操作與 APP 內(nèi)的其他操作或系統(tǒng)全局手勢操作接近導(dǎo)致用戶觸發(fā)了非預(yù)期的操作。比如 iOS 端的知乎被吐槽的一個右滑返回手勢操作，經(jīng)過研究發(fā)現(xiàn)，由于 iOS 端的知乎在瀏覽回答的頁面設(shè)計的右滑返回的熱區(qū)過大，導(dǎo)致用戶上滑瀏覽的時候如果手指的滑動角度變化幅度過大一不小心就觸發(fā)了右滑返回，再次進(jìn)入回答后又需要翻頁很久才能找到之前離開的地方，很影響體驗。
我覺得知乎可以減少熱區(qū)，將熱區(qū)調(diào)整為 iOS 全局的右滑返回區(qū)域即可，如下圖所示。
當(dāng)然，產(chǎn)品設(shè)計需要平衡與取舍，如果減少了熱區(qū)是否會影響其他用戶的體驗還需要考慮和調(diào)研，兩者并無絕對的對錯
當(dāng)新手勢無法直接讓用戶感知時，我們需要加入一些手勢教學(xué)幫助用戶快速上手使用。
1）手勢教學(xué)方式
a. 浮層和動畫引導(dǎo)使用靜態(tài)或動態(tài)的手勢圖片或氣泡示例告訴用戶使用哪種手勢進(jìn)行操作
相比于靜態(tài)，動態(tài)比靜態(tài)更為直觀和易學(xué)。
b. 內(nèi)容隱喻通過微妙的視覺線索暗示用戶此處可以通過某種手勢進(jìn)行操作
由于教學(xué)內(nèi)容難免具有干擾性，對于高級用戶來說是不必要的，但是對于初級用戶又是必要的，因此以這種內(nèi)容暗示的方式使教學(xué)極為輕量化，在低干擾的情況下使得用戶學(xué)習(xí)了手勢操作。
如下圖，嗶哩嗶哩在打開第一篇文章時會平移顯示下一篇文章的框架，暗示用戶可以通過左右滑動切換文章。
再比如陌陌在打開點點功能時，會在用戶進(jìn)入頁面的時候播放一個動畫，暗示有很多卡片疊加在了一起，用戶可以通過滑動切換卡片。
2）教學(xué)的出現(xiàn)時機
a. 操作前當(dāng)產(chǎn)品中設(shè)計了不容易感知的新手勢，在用戶操作前，通過教學(xué)讓用戶了解和學(xué)習(xí)新的手勢。
b. 錯誤操作后對于一些與用戶的心理模型和習(xí)慣不一致的手勢，提前預(yù)測用戶可能輸入的錯誤手勢，在用戶錯誤操作后進(jìn)行提示，規(guī)范用戶的操作方式。
如下圖，由于知乎舊版本是通過左右滑動切換回答的，新版本調(diào)整為上下滑動后，需要糾正用戶使用習(xí)慣。因此，當(dāng)用戶仍然使用左右滑動時，會出現(xiàn)浮層提示用戶正確的手勢進(jìn)行教學(xué)。
以上是日常思考和總結(jié)，有不恰當(dāng)之處歡迎指出。希望本文在大家進(jìn)行手勢設(shè)計的過程中能夠幫助做出合理的決策。
文章來源：人人都是產(chǎn)品經(jīng)理
藍(lán)藍(lán)設(shè)計的小編 http://www.wnxcall.com