互手勢是用戶操作的重要部分，交互手勢的設(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)驗去進行的滑動滑操作在有書這個產(chǎn)品中就是錯誤的和不被產(chǎn)品識別的。但是這種手勢又廣泛存在于大量的音頻播放 APP 中，如喜馬拉雅、荔枝 FM 等。

一旦用戶從這些 APP 遷移到了有書，本來養(yǎng)成的操作習(xí)慣在有書就失效了，用戶就會感覺“這個 APP 很難用，用起來很不舒服”，進而可能放棄有書轉(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 的首頁點擊一個推薦卡片后進入詳情頁，由于詳情頁是直接由卡片放大轉(zhuǎn)場的，不同于傳統(tǒng)的新頁面右側(cè)進入和從底部彈出。

在用戶的使用習(xí)慣和認知中新頁面如果從右側(cè)進入就可以通過右滑返回，從底部彈出的話就可以下拉返回。因此，當(dāng)用戶面對卡片放大進入新頁面這種全新交互時可能會疑惑如何返回，對此理解不同的用戶可能會嘗試右滑，也可能嘗試下拉。

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)時，感受到震動后松開，即可呼出二級菜單；如果震動后仍不松開，則進入到卸載 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ù)勥壿嬓裕诮换ナ謩莸膶用嫔希绻脩裟軌蛲ㄟ^某個手勢進行某個操作后，按照邏輯，用戶也可以通過反向的手勢或?qū)?yīng)的手勢進行逆向操作。

比如，在微信首頁下拉調(diào)出小程序頁面，之后可以通過上拉返回首頁。點擊加號呼出更多操作，再次點擊加號收起更多操作。

如果違背了用戶的心理模型和邏輯性，用戶就會感覺到混亂和不適。

這里舉一個反例， Uki 的個人主頁可以通過點擊或下拉底部的固定底板收起更多信息，但是收起后只能通過點擊展開更多個人信息而不能上拉，不符合邏輯與用戶的心理模型。

如下圖所示，邏輯性對用戶的意義。

有的時候，我們會發(fā)現(xiàn)為了提高容錯性，我們會犧牲一部分邏輯性。

就像上文提到的知乎關(guān)閉評論彈出框，邏輯上它是從底部彈出的，但是不但能夠下拉關(guān)閉還可以右滑關(guān)閉。盡管右滑關(guān)閉有些違背用戶的心理模型，但是確實給用戶帶來了很多操作上的便捷。

如何設(shè)計

1. 是否需要加入多手勢操作的考慮因素

我們需要考慮的因素包括使用頻率、危險程度和特殊體驗。

1. 使用頻率：當(dāng)一個功能的使用頻率足夠高時，我們加入多手勢操作去提高用戶操作效率才是有意義的。一個低頻的功能的特殊手勢操作很容易被用戶遺忘。
2. 危險程度：如果一個操作不可撤銷且存在危險性質(zhì)，我們最好不要加入多手勢操作。此時我們需要用戶更加專注，如果加入多手勢操作可能會增加誤操作的概率。
3. 特殊體驗：當(dāng)我們需要加入特殊的模擬體驗時，此時我們可以加入多手勢操作。如探探左滑無感右滑喜歡，給用戶帶來的“翻牌子”感覺是點擊操作無法替代的。QQ 閱讀下拉擬物繩燈進行日間和夜間模式切換，這種存在我們記憶中的交互方式能夠喚起我們的情感。

2. 評估所選手勢的考慮因素

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é)類型下一部分會詳細討論。

然而，大部分情況下用戶的記憶是短期的，教學(xué)內(nèi)容可能會被快速遺忘，下次用戶使用 APP 時仍然不會使用特殊手勢。此時我們應(yīng)該將一些比較難以記憶的手勢操作搭配一個簡單的手勢操作。

比如 QQ 閱讀的下拉擬物繩燈切換夜間模式的手勢操作設(shè)計，其考慮到了有些用戶在現(xiàn)實生活中并未見過擬物繩燈，并不知道是要進行下拉才能觸發(fā)操作。因此，QQ 閱讀貼心地搭配了一個簡單的點擊操作，用戶通過點擊繩燈也可以切換夜間模式，如下圖。

b. 考慮所選手勢是否可能導(dǎo)致沖突和誤操作，如果導(dǎo)致了，考慮如何避免和折中

最常見的手勢沖突情況就是 APP 的手勢與操作系統(tǒng)的全局手勢沖突。

解決方案有兩個，一是避免設(shè)計與全局手勢一致的手勢操作，例如 iOS 的在屏幕邊緣右滑返回、全面屏機型的底部上滑退出應(yīng)用等全局手勢操作；二是仍然設(shè)計與全局手勢沖突的操作，但是將全局手勢部分禁用或以其他的方式區(qū)分開。

如下圖有書播放頁的案例，由于進度條滑動控件過于靠左，導(dǎo)致使用 iOS 全局右滑返回手勢時有時會產(chǎ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ā)了右滑返回，再次進入回答后又需要翻頁很久才能找到之前離開的地方，很影響體驗。

我覺得知乎可以減少熱區(qū)，將熱區(qū)調(diào)整為 iOS 全局的右滑返回區(qū)域即可，如下圖所示。

當(dāng)然，產(chǎn)品設(shè)計需要平衡與取舍，如果減少了熱區(qū)是否會影響其他用戶的體驗還需要考慮和調(diào)研，兩者并無絕對的對錯

3. 讓用戶了解并使用新手勢

當(dāng)新手勢無法直接讓用戶感知時，我們需要加入一些手勢教學(xué)幫助用戶快速上手使用。

1）手勢教學(xué)方式

a. 浮層和動畫引導(dǎo)使用靜態(tài)或動態(tài)的手勢圖片或氣泡示例告訴用戶使用哪種手勢進行操作

相比于靜態(tài)，動態(tài)比靜態(tài)更為直觀和易學(xué)。

b. 內(nèi)容隱喻通過微妙的視覺線索暗示用戶此處可以通過某種手勢進行操作

由于教學(xué)內(nèi)容難免具有干擾性，對于高級用戶來說是不必要的，但是對于初級用戶又是必要的，因此以這種內(nèi)容暗示的方式使教學(xué)極為輕量化，在低干擾的情況下使得用戶學(xué)習(xí)了手勢操作。

如下圖，嗶哩嗶哩在打開第一篇文章時會平移顯示下一篇文章的框架，暗示用戶可以通過左右滑動切換文章。

再比如陌陌在打開點點功能時，會在用戶進入頁面的時候播放一個動畫，暗示有很多卡片疊加在了一起，用戶可以通過滑動切換卡片。

2）教學(xué)的出現(xiàn)時機

a. 操作前當(dāng)產(chǎn)品中設(shè)計了不容易感知的新手勢，在用戶操作前，通過教學(xué)讓用戶了解和學(xué)習(xí)新的手勢。

b. 錯誤操作后對于一些與用戶的心理模型和習(xí)慣不一致的手勢，提前預(yù)測用戶可能輸入的錯誤手勢，在用戶錯誤操作后進行提示，規(guī)范用戶的操作方式。

如下圖，由于知乎舊版本是通過左右滑動切換回答的，新版本調(diào)整為上下滑動后，需要糾正用戶使用習(xí)慣。因此，當(dāng)用戶仍然使用左右滑動時，會出現(xiàn)浮層提示用戶正確的手勢進行教學(xué)。

結(jié)語

以上是日常思考和總結(jié)，有不恰當(dāng)之處歡迎指出。希望本文在大家進行手勢設(shè)計的過程中能夠幫助做出合理的決策。

作者：貝林；公眾號：貝林的設(shè)計站（ID：123456）

本文由 @貝林 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。

著用戶體驗被愈發(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)驗去進行的滑動操作在有書這個產(chǎn)品中就是錯誤的和不被產(chǎn)品識別的。但是這種手勢又廣泛存在于大量的音頻播放 App 中，如喜馬拉雅、荔枝 FM 等。一旦用戶從這些 App 遷移到了有書，本來養(yǎng)成的操作習(xí)慣在有書就失效了，用戶就會感覺「這個 App 很難用，用起來很不舒服。」進而可能放棄有書轉(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 的首頁點擊一個推薦卡片后進入詳情頁，由于詳情頁是直接由卡片放大轉(zhuǎn)場的，不同于傳統(tǒng)的新頁面右側(cè)進入和從底部彈出。在用戶的使用習(xí)慣和認知中新頁面如果從右側(cè)進入就可以通過右滑返回，從底部彈出的話就可以下拉返回。因此，當(dāng)用戶面對卡片放大進入新頁面這種全新交互時可能會疑惑如何返回，對此理解不同的用戶可能會嘗試右滑，也可能嘗試下拉。App Store 的設(shè)計在此就有很好的容錯性，用戶可以通過三種方式返回首頁，分別是右滑返回、下拉返回和點擊關(guān)閉返回，這不但降低了用戶的記憶和學(xué)習(xí)成本，也便于不同習(xí)慣的用戶使用。

針對不同的場景，手勢的使用也會有不同。一個很好的案例是知乎的評論，知乎評論的關(guān)閉方式有三種，分別是下拉、右滑和點擊關(guān)閉。用戶觀看評論的場景有兩種，第一種是只想看一下精選評論然后關(guān)閉，第二種是被評論吸引后一直往下看。當(dāng)用戶單手操作不方便點擊關(guān)閉按鈕時，下拉對應(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)時，感受到震動后松開，即可呼出二級菜單；如果震動后仍不松開，則進入到卸載 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ù)勥壿嬓裕诮换ナ謩莸膶用嫔希绻脩裟軌蛲ㄟ^某個手勢進行某個操作后，按照邏輯用戶也可以通過反向的手勢或?qū)?yīng)的手勢進行逆向操作。比如在微信首頁下拉調(diào)出小程序頁面，之后可以通過上拉返回首頁。點擊加號呼出更多操作，再次點擊加號收起更多操作。如果違背了用戶的心理模型和邏輯性，用戶就會感覺到混亂和不適。

這里舉一個反例， Uki 的個人主頁可以通過點擊或下拉底部的固定底板收起更多信息，但是收起后只能通過點擊展開更多個人信息而不能上拉，不符合邏輯與用戶的心理模型。

如下圖所示，邏輯性對用戶的意義。

有的時候，我們會發(fā)現(xiàn)為了提高容錯性，會犧牲一部分邏輯性。就像上文提到的知乎關(guān)閉評論彈出框，邏輯上它是從底部彈出的，但是不但能夠下拉關(guān)閉還可以右滑關(guān)閉。盡管右滑關(guān)閉有些違背用戶的心理模型，但是確實給用戶帶來了很多操作上的便捷。

如何設(shè)計

1. 是否需要加入多手勢操作的考慮因素

我們需要考慮的因素包括使用頻率、危險程度和特殊體驗。

使用頻率

當(dāng)一個功能的使用頻率足夠高時，我們加入多手勢操作去提高用戶操作效率才是有意義的。一個低頻的功能的特殊手勢操作很容易被用戶遺忘。

危險程度

如果一個操作不可撤銷且存在危險性質(zhì)，我們最好不要加入多手勢操作。此時我們需要用戶更加專注，如果加入多手勢操作可能會增加誤操作的概率。

特殊體驗

當(dāng)我們需要加入特殊的模擬體驗時，此時我們可以加入多手勢操作。如探探左滑無感右滑喜歡，給用戶帶來的「翻牌子」感覺是點擊操作無法替代的。QQ 閱讀下拉擬物繩燈進行日間和夜間模式切換，這種存在我們記憶中的交互方式能夠喚起我們的情感。

2. 評估所選手勢的考慮因素

考慮不同平臺的硬件系統(tǒng)和操作系統(tǒng)特性

由于硬件與操作系統(tǒng)差異，iOS 系統(tǒng)支持很多手勢，但是安卓系統(tǒng)在手勢支持方面就不如 iOS 豐富。由于安卓硬件設(shè)備的差異比較大，不同安卓手機廠商會在安卓系統(tǒng)的基礎(chǔ)上自定義系統(tǒng)的手勢操作，因此對于手勢的支持也有較大的差異。對于這種情況我們需要熟悉相應(yīng)平臺的規(guī)范，做到心中有數(shù)。

考慮所選的手勢的學(xué)習(xí)成本和記憶成本，用戶是否已經(jīng)被教育成熟

如下圖所示，盡管設(shè)備支持的手勢數(shù)量多不勝數(shù)，但是日常使用 App 時，大部分用戶習(xí)慣使用的手勢很少，比如單擊、雙擊、滑動、上拉、下拉、雙指擴張和收縮等。除此之外的手勢教育成本和學(xué)習(xí)成本很高。一般比較通用的功能是沒有必要在此處創(chuàng)新的，但是如果一些特殊的操作確實需要加入時，我們就需要考慮下面的問題。

如果沒有教育成熟，考慮加入教學(xué)或搭配簡易的操作方式

對于我們需要加入的手勢操作當(dāng)前用戶并未被教育成熟時，我們需要考慮加入手勢教學(xué)，具體的手勢教學(xué)類型下一部分會詳細討論。然而，大部分情況下用戶的記憶是短期的，教學(xué)內(nèi)容可能會被快速遺忘，下次用戶使用 App 時仍然不會使用特殊手勢。此時我們應(yīng)該將一些比較難以記憶的手勢操作搭配一個簡單的手勢操作。比如 QQ 閱讀的下拉擬物繩燈切換夜間模式的手勢操作設(shè)計，其考慮到了有些用戶在現(xiàn)實生活中并未見過擬物繩燈，并不知道是要進行下拉才能觸發(fā)操作。因此，QQ 閱讀貼心地搭配了一個簡單的點擊操作，用戶通過點擊繩燈也可以切換夜間模式，如下圖。

考慮所選手勢是否可能導(dǎo)致沖突和誤操作，如果導(dǎo)致了，如何避免和折中

最常見的手勢沖突情況就是 App 的手勢與操作系統(tǒng)的全局手勢沖突。解決方案有兩個，一是避免設(shè)計與全局手勢一致的手勢操作，例如 iOS 的在屏幕邊緣右滑返回、全面屏機型的底部上滑退出應(yīng)用等全局手勢操作；二是仍然設(shè)計與全局手勢沖突的操作，但是將全局手勢部分禁用或以其他的方式區(qū)分開。如下圖有書播放頁的案例，由于進度條滑動控件過于靠左，導(dǎo)致使用 iOS 全局右滑返回手勢時有時會產(chǎ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ā)了右滑返回，再次進入回答后又需要翻頁很久才能找到之前離開的地方，很影響體驗。我覺得知乎可以減少熱區(qū)，將熱區(qū)調(diào)整為 iOS 全局的右滑返回區(qū)域即可，如下圖所示。當(dāng)然，產(chǎn)品設(shè)計需要平衡與取舍，如果減少了熱區(qū)是否會影響其他用戶的體驗還需要考慮和調(diào)研，兩者并無絕對的對錯。

3. 讓用戶了解并使用新手勢

當(dāng)新手勢無法直接讓用戶感知時，我們需要加入一些手勢教學(xué)幫助用戶快速上手使用。

手勢教學(xué)方式

浮層和動畫引導(dǎo)：使用靜態(tài)或動態(tài)的手勢圖片或氣泡示例告訴用戶使用哪種手勢進行操作。相比于靜態(tài)，動態(tài)比靜態(tài)更為直觀和易學(xué)。

內(nèi)容隱喻：通過微妙的視覺線索暗示用戶此處可以通過某種手勢進行操作。由于教學(xué)內(nèi)容難免具有干擾性，對于高級用戶來說是不必要的，但是對于初級用戶又是必要的，因此以這種內(nèi)容暗示的方式使教學(xué)極為輕量化，在低干擾的情況下使得用戶學(xué)習(xí)了手勢操作。

如下圖，嗶哩嗶哩在打開第一篇文章時會平移顯示下一篇文章的框架，暗示用戶可以通過左右滑動切換文章。再比如陌陌在打開點點功能時，會在用戶進入頁面的時候播放一個動畫，暗示有很多卡片疊加在了一起，用戶可以通過滑動切換卡片。

教學(xué)的出現(xiàn)時機

操作前：當(dāng)產(chǎn)品中設(shè)計了不容易感知的新手勢，在用戶操作前，通過教學(xué)讓用戶了解和學(xué)習(xí)新的手勢。

錯誤操作后：對于一些與用戶的心理模型和習(xí)慣不一致的手勢，提前預(yù)測用戶可能輸入的錯誤手勢，在用戶錯誤操作后進行提示，規(guī)范用戶的操作方式。如下圖，由于知乎舊版本是通過左右滑動切換回答的，新版本調(diào)整為上下滑動后，需要糾正用戶使用習(xí)慣。因此，當(dāng)用戶仍然使用左右滑動時，會出現(xiàn)浮層提示用戶正確的手勢進行教學(xué)。

結(jié)語

以上是日常思考和總結(jié)，有不恰當(dāng)之處歡迎指出。希望本文在大家進行手勢設(shè)計的過程中能夠幫助做出合理的決策。

～此文轉(zhuǎn)載，如有侵權(quán)，請聯(lián)系刪除

劇導(dǎo)語：在UI界面中，我們可以看到各種開關(guān)按鈕之類的組件，怎樣更好的使用它們是一個值得思考的問題。這篇文章來自資深設(shè)計師 Taras Bakusevych，他在表單和控件設(shè)計領(lǐng)域造詣精深。這篇文章梳理了他總結(jié)的 14 條按鈕和選框的設(shè)計經(jīng)驗，實用性極強。推薦對UI設(shè)計感興趣的用戶閱讀。

UI 界面當(dāng)中，各種開關(guān)、按鈕、選框控件是非常常見的組件，它們看起來不復(fù)雜，但是在實際使用的時候講究非常之很多，它們不僅關(guān)乎體驗，而且涉及到一些界面邏輯問題。

英文中的 「Toggle」一詞，對應(yīng)的是帶有短柄的撥動式開關(guān)，撥動它的時候，能夠在兩種不同的狀態(tài)之間切換。

至于 「單選按鈕」（Radio Buttons）這一詞則來自汽車收音機，在老式的汽車控制面板上有一排機械的可以存儲預(yù)設(shè)電臺的按鈕，用戶可以快速地按動按鈕切換不同的電臺。按下其中一個按鈕，其他的按鈕會彈起，這里的按鈕是互斥的，多個按鈕無法同時被激活。

復(fù)選框（Checkboxes）則通常有一個或者多個選項，供用戶選擇，復(fù)選框內(nèi)的選項通常不是互斥的，用戶可以選擇一個也可以選擇多個。

撥動開關(guān)（Toggle-Switch）則是最常見的一種按鈕樣式，點擊即可切換狀態(tài)。

選擇按鈕（Choice Chips）是單選按鈕一種精簡模式，它通常會包含有至少2個選項，用戶可以選擇其中的一個，選擇按鈕大多出現(xiàn)在移動端界面上。

多選按鈕（Multi-select Chips）則是復(fù)選框的一種通用替代品，用戶可以選擇其中多個選項，而這種按鈕也大多應(yīng)用在移動端設(shè)備上。

各類選擇控件已經(jīng)在用戶界面中存在了很長時間，所以用戶對于它的功能、認知以及期望是清晰的。下面是一個非常簡單的清單，列舉出了絕大多數(shù)常見的選擇控件的類型和使用場景：

一、熟知按鈕的不同顯示狀態(tài)

復(fù)選框和單選按鈕有選中和未被選中兩種狀態(tài)，撥動開關(guān)則有開啟和關(guān)閉兩種狀態(tài)。在實際的使用過程中，它們都有啟用、禁用、懸停、聚焦、按下等不同狀態(tài)，雖然這些狀態(tài)看起來很多，但是這些狀態(tài)涉及到實際交互的需求和不同場景，并且是實現(xiàn)可靠交互的基礎(chǔ)。

二、別忘了「未定狀態(tài)」

對于復(fù)選框，通常只存在選中和未選中兩種狀態(tài)。如果涉及到多層級、有父子結(jié)構(gòu)的復(fù)選框體系的時候，可能會因為子復(fù)選框部分選中、部分未選中，而使得父復(fù)選框的狀態(tài)介乎全選和未選擇之間，這種「未定狀態(tài)」容易被忽略。

三、不要錯用了「撥動開關(guān)」

在涉及到有層級結(jié)構(gòu)選項的時候，不要使用撥動開關(guān)。它不僅在視覺上容易分散注意力，而且在使用的時候，容易導(dǎo)致誤判。

四、當(dāng)功能觸發(fā)立即生效時，使用撥動開關(guān)

撥動開關(guān)是標(biāo)準(zhǔn)的數(shù)字化的開關(guān)功能，當(dāng)你使用撥動開關(guān)這種控件的時候，確保它所觸發(fā)的功能能夠立刻開啟/關(guān)閉。如果不是這樣的情況，那么最好使用單個復(fù)選框來替代撥動開關(guān)。

五、避免非常規(guī)的控件樣式

和整個平臺的常規(guī)樣式差異過大的按鈕樣式，很容易帶來額外的認知負擔(dān)。比如圓形的復(fù)選框就很容易和傳統(tǒng)的單選按鈕混淆。

六、在列表中使用便于用戶掃讀的排版

靠左對齊的復(fù)選框+標(biāo)簽的樣式是效果最好的。這確保了用戶可以最快理解并完成操作，減少錯誤出現(xiàn)。將復(fù)選框靠右對齊其實也可以，在移動端上展示其實也有優(yōu)勢——單手操作的時候更容易被選中，也不會因為點擊勾選的時候手指會遮蓋到標(biāo)簽內(nèi)容，不過標(biāo)簽文本和復(fù)選框不能相隔太遠。

七、如果縱向空間不夠請使用按鈕替代選框

使用選框控件的問題在于它和對應(yīng)標(biāo)簽是分離開的，在垂直控件有限的情況下，橫向排版會非常局促，這個時候用按鈕來替代選框會好很多。

八、盡可能使用單選按鈕而不是下拉菜單

使用單選按鈕能讓選項始終可見，這樣方便用戶直觀地比較和查看，從而減輕認知負荷，讓表單內(nèi)容更加清晰透明。

九、使用下拉菜單承載大量、相似的選項

如果選項的數(shù)量超過6個，最好還是考慮將它置于下拉菜單中，因為用戶無論如何都無法快速記住和對比全部的選項，這同樣適用于大量的、相似的或者可預(yù)測的選項，比如 10%、20%、30%、等等。

十、單選按鈕最好提供一個默認選項

通常，一旦選中了某一個單選按鈕，用戶就無法取消選擇并且恢復(fù)原始狀態(tài)。所以，可能會有用戶不愿做出選擇，這個時候應(yīng)該提供一個「無」的選項。提供默認選項，并且按照邏輯順序來排序，這樣會更好。

十一、使用清晰的文本標(biāo)簽內(nèi)容

在文本標(biāo)簽內(nèi)容當(dāng)中，盡量不要使用否定的表達方式，這樣可以規(guī)避誤解，方便用戶正確理解內(nèi)容。

十二、突出顯示被選選項吸引用戶注意力

從視覺上對于被選中的選項進行區(qū)分，這在數(shù)據(jù)表單中尤其重要。

十三、支持批量選擇和清除

對于用戶而言，一次選中和清除多個選項應(yīng)該是一件簡單輕松的事情，因此需要支持批量選中和清除的功能。

十四、讓可點擊區(qū)域足夠大

相對夠大的觸發(fā)區(qū)域，是確保用戶在移動端上交互的重要基礎(chǔ)。讓觸發(fā)區(qū)域包含按鈕、文本標(biāo)簽以及周圍一部分的留白區(qū)域，能讓交互輕松很多。根據(jù)菲茨定律，點擊區(qū)域的大小對于交互的影響是非常直接的。復(fù)選框和單選按鈕通常很小，單擊的時候不容易被「瞄準(zhǔn)」，尤其在移動端屏幕上。

作者：Taras Bakusevych；公眾號：科洛弗道11號

原文鏈接：https://mp.weixin.qq.com/s/ZSfGFp_N-Te8mX3byzXCXA

本文由 @科洛弗道11號 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。