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