4000字干貨！交互手勢全解析：描述維度

交互手勢的描述維度是什么？在這里我們將其簡單定義為影響一個(gè)交互手勢呈現(xiàn)效果的變量。在之前的文章中，提及過的描述維度包括穩(wěn)定化效果、控制方式、閾值類型、時(shí)間限制、按下次數(shù)、觸發(fā)時(shí)機(jī)，但它們的都是一些較為顯性的描述維度，確定了某個(gè)手勢的基本框架。本文主要講解之前未提到的較為隱性的描述維度，它們同樣影響著用戶的操作體驗(yàn)，包括角度與方向、反饋比率、熱區(qū)。下面將逐一介紹。

角度與方向

角度與方向的知識在「交互手勢全解析之位移類手勢」中簡單地討論過一些，在這里會講解地更詳細(xì)。

位移類手勢的方向一般為上下方向或左右方向，或者二者兼有之，但是想要觸發(fā)操作，手指移動方向并不需要完全垂直或水平，默認(rèn)會有一個(gè)容錯角度。

當(dāng)某個(gè)界面或模塊僅支持上下方向或左右方向的位移類手勢時(shí)，如下圖所示，360 度會 1：1 均分，每個(gè)方向有 180 度的容錯角度，只要在角度范圍內(nèi)滑動，都可以觸發(fā)相應(yīng)操作，但需要注意的是在僅支持上下方向滑動時(shí)，如果完全水平方向去滑動，則不會觸發(fā)任何操作，反之亦然。

雖然說角度的容錯范圍很大，但是滑動時(shí)離預(yù)期方向的角度偏離越大，單位長度產(chǎn)生的有效位移距離就會變少。例如下圖中，在一個(gè)只能上下滑動的頁面，垂直上滑和偏移上滑相同距離產(chǎn)生的有效位移是不同的，垂直上滑的效率明顯更高。

當(dāng)上下滑動和左右滑動同時(shí)存在于一個(gè)頁面或模塊時(shí)，會出現(xiàn)兩種情況。第一種情況是被滑動的內(nèi)容除上下左右外可以往更多方向移動，例如滑動照片或地圖查看更多細(xì)節(jié)（如下圖所示），是允許用戶自由地朝任意方向滑動的。

第二種情況是，在單次操作中，只有上下或左右方向的滑動需求。360 度會 1：1：1：1 均分，每個(gè)方向有 90 度的容錯角度。在這種情況，上滑時(shí)手指滑動方向只要左右偏移不超過 45° 都會被判定為上滑，如下圖所示。

對于這第二種情況，系統(tǒng)需要處理以下兩個(gè)問題。

問題 A：如果在上下滑過程中進(jìn)行左右滑動的操作，系統(tǒng)如何判定？

一般我們是不希望用戶在一次操作中同時(shí)進(jìn)行上下滑動和左右滑動的。系統(tǒng)如果判定某次滑動為上下滑動，為了避免誤操作，在本次滑動結(jié)束前（滑動結(jié)束的定義：手指離開屏幕并且受控物停止移動或停止其他屬性變化），左右滑動會被完全禁用，而且左右滑動的容錯角度會臨時(shí)分配給上下滑動，如下圖所示。

例如，在 iOS 信息列表中，左右滑動可以喚起更多操作，上下滑動可以滾動頁面，但是一旦進(jìn)入上下滑動的過程中，不松手的情況下左右滑動喚起更多操作就被完全禁用了，且左右滑動的容錯角度會臨時(shí)分配給上下滑動。

問題 B：系統(tǒng)是如何在某一次滑動時(shí)判定我們是想要上下滑動還是左右滑動呢？

系統(tǒng)給予我們自然的使用體驗(yàn)背后是復(fù)雜的判定過程。判定的難點(diǎn)有兩個(gè)，第一個(gè)難點(diǎn)：手指在操控屏幕時(shí)并不是一個(gè)穩(wěn)定的狀態(tài)，接觸屏幕的一瞬間很容易抖動。抖動的方向也是不確定的，這個(gè)抖動需要判定為滑動嗎？如果用戶并不想滑動只是想進(jìn)行點(diǎn)擊操作的話怎么辦?

第二個(gè)難點(diǎn)：手指在接觸屏幕后，接觸屏幕的手指面積是逐漸增加的，但向下的增加要比其他方向的多，如果直接識別的話會被判定為下滑，應(yīng)該怎么處理？

下圖的動畫是慢速模擬手指接觸屏幕的過程。

為了解決上述的兩個(gè)難點(diǎn)，系統(tǒng)會設(shè)定一個(gè)容錯距離，用戶的滑動位移如果在這個(gè)距離內(nèi)，系統(tǒng)就會把手勢判定為“點(diǎn)擊”，只有當(dāng)用戶往某個(gè)方向的滑動位移達(dá)到或超過這個(gè)距離，系統(tǒng)才會判定為“滑動”。但是由于這個(gè)容錯距離很小，作為用戶的我們?nèi)ゲ僮鲿r(shí)，是很難感受到這個(gè)容錯距離的存在的。

基礎(chǔ)規(guī)則講完了，接下來針對第二種情況介紹一些負(fù)面案例，下圖左是滑動前正常的角度分配，但是有時(shí)由于開發(fā)同學(xué)的失誤，導(dǎo)致容錯角度沒有均分，出現(xiàn)下圖右中觸發(fā)上滑和下滑的角度極小的情況，進(jìn)而導(dǎo)致用戶在上下滑動時(shí)非常容易誤操作為左滑和右滑。

網(wǎng)易云音樂也曾有過類似的遺留問題，iOS 端的播放頁上滑調(diào)出評論頁極易誤操作為左右滑動黑膠切歌（下圖 A，現(xiàn)已修復(fù)），安卓端的賬號側(cè)邊欄上滑瀏覽極易誤操作為左滑收起側(cè)邊欄（下圖 B ）。

因此，在驗(yàn)收階段，角度的容錯性檢查也是重要的一環(huán)。因此在驗(yàn)收時(shí)間充裕的情況下，可以切換不同的手持方式分別體驗(yàn)一次，因?yàn)橛行﹩栴}只有在特定的手持方式下才容易被發(fā)現(xiàn)。

反饋比率

之前提到過施控物（施加控制的一方）和受控物（被施加控制的一方）的概念。比率是受控物的某個(gè)屬性變化與的施控物某個(gè)屬性變化的比值。為了更好地理解這個(gè)概念，在這里舉個(gè)例子。如下圖，在網(wǎng)易云音樂的播放頁和微信小程序頁面邊緣右滑一個(gè)固定距離時(shí)，頁面的下降距離是不同的，網(wǎng)易云音樂播放頁的下降距離大約只有微信小程序頁面的一半，我們可以認(rèn)為對于這個(gè)交互，網(wǎng)易云音樂的反饋比率是微信小程序的一半。

比率的大小并沒有絕對的優(yōu)劣之分。比率越小，反饋越遲鈍，但方便精準(zhǔn)操作。比率越大，反饋越靈敏，效率高，但不方便精準(zhǔn)操作。由于比率的這些特性，在不同的場景中會根據(jù)需求來選用合適的比率。

在現(xiàn)實(shí)生活中，不同車型的轉(zhuǎn)向比就是一個(gè)較為典型的案例。汽車方向盤旋轉(zhuǎn)1圈半只能讓輪胎旋轉(zhuǎn)30度左右，而賽車、卡丁車的方向盤旋轉(zhuǎn)角度和輪胎的旋轉(zhuǎn)角度通常是一致的。普通人使用汽車的主要目的是代步，主要訴求是舒適安全，因此選用反饋比率小的轉(zhuǎn)向比能夠提高容錯率。而對于賽車、卡丁車這一類為競技而設(shè)計(jì)的車型，駕駛員要隨時(shí)對復(fù)雜的賽道環(huán)境做出快速的操作，因此需要使用反饋比率高的轉(zhuǎn)向比提高靈敏度。

反饋比率在很多設(shè)備的交互設(shè)計(jì)中都有應(yīng)用，例如我們可以設(shè)置鼠標(biāo)的跟蹤速度的快慢，跟蹤速度越快，反饋比率越大，鼠標(biāo)移動相同的距離可以控制光標(biāo)移動更大的距離。

在觀看視頻時(shí)，對進(jìn)度進(jìn)行細(xì)微調(diào)整和跨度較大的調(diào)整都是用戶的常見需求，因此一般做法是采用兩種比率不同的操作方式來滿足需求。通過拖動視頻區(qū)域的熱區(qū)來進(jìn)行反饋比率較小的細(xì)微調(diào)整，通過拖動進(jìn)度條的熱區(qū)來進(jìn)行反饋比率較大的大跨度調(diào)整。

熱區(qū)

熱區(qū)為手勢提供了可操作的區(qū)域，需要接觸屏幕的手勢都需要熱區(qū)才能觸發(fā)。合理的熱區(qū)布置能夠有效提高用戶體驗(yàn)。

1. 熱區(qū)大小

更大的熱區(qū)可以減少用戶瞄準(zhǔn)所花費(fèi)的時(shí)間，減少觸發(fā)失敗的概率。熱區(qū)的大小不一定等于按鈕的大小，當(dāng)某個(gè)按鈕在視覺上設(shè)計(jì)得比較小時(shí)，為了方便用戶操作，我們可以將熱區(qū)合理地設(shè)計(jì)大一些。例如下圖的 App Store 應(yīng)用詳情頁中，視覺上按鈕雖然很小，但是點(diǎn)擊熱區(qū)卻設(shè)置得很大。

按鈕與熱區(qū)如果聯(lián)系感弱，就會導(dǎo)致用戶的疑惑。例如下面的案例，換一換的按鈕熱區(qū)過大，擴(kuò)大到了標(biāo)題區(qū)域，用戶如果無意間點(diǎn)擊標(biāo)題卻更換了一批內(nèi)容，就可能感到奇怪。

下面的詞典案例中，雖然播放按鈕只是右側(cè)的一個(gè)小圖標(biāo)，但是頂部由單詞構(gòu)成的整個(gè)區(qū)域都是可以點(diǎn)擊的。因?yàn)辄c(diǎn)擊單詞與發(fā)音存在強(qiáng)聯(lián)系，所以這樣的熱區(qū)擴(kuò)大是合理的、聯(lián)系感強(qiáng)的。

按鈕的層級和樣式如果相同，熱區(qū)面積一般需要保持一致，并撐滿可用空間。例如常見的 tab 欄上的圖標(biāo)。

對于高頻操作，很多 App 會另外設(shè)計(jì)一個(gè)隱藏手勢供用戶使用，因?yàn)槭謩菟芴峁┑臒釁^(qū)遠(yuǎn)遠(yuǎn)大于按鈕的熱區(qū)，更加便于用戶操作。例如網(wǎng)易云音樂的播放頁會將高頻功能都另外配備一個(gè)手勢以此來提高操作效率。下圖藍(lán)色為按鈕熱區(qū)，紅色為手勢的熱區(qū)。

2. 熱區(qū)層級

界面會存在點(diǎn)擊類手勢與位移類手勢的熱區(qū)重疊的情況，此時(shí)兩者是平級的，因?yàn)槭謩莶町惔笏曰ゲ桓蓴_。

當(dāng)界面中存在兩種點(diǎn)擊類手勢的熱區(qū)重疊情況或兩種位移類手勢的熱區(qū)重疊情況時(shí)，就會出現(xiàn)層級排序的問題。

在支付寶的一個(gè)猜漲跌的模塊中，熱區(qū)的大概分布如下圖所示。整個(gè)模塊整體有一個(gè)熱區(qū)，點(diǎn)擊可以進(jìn)入二級頁面。看漲和看跌分別有一個(gè)熱區(qū)，點(diǎn)擊可以直接選擇操作，層級布置是在整體熱區(qū)的上一層。

對于位移類手勢，熱區(qū)的層級布置更為復(fù)雜。比如以豆瓣的我的頁面為例，在 iOS 全面屏上的橫滑熱區(qū)分布如下圖所示。

①邊緣右滑喚起側(cè)邊欄；②橫滑泳道可以看更多書影音檔案；③橫滑底部的iOS安全區(qū)可以切換應(yīng)用；④其他位置右滑可以切換tab頁。

通過熱區(qū)層級的觀察，我們能夠發(fā)現(xiàn)一些明顯的體驗(yàn)問題。

在 QQ 音樂的首頁，頁面可以通過橫滑切換 tab，同時(shí)歌單可以通過橫滑查看更多。歌單的滑動熱區(qū)位于橫滑 tab 熱區(qū)的上一層。

通過觀察熱區(qū)的層級我們可以看出，歌單的橫滑熱區(qū)幾乎覆蓋了拇指的易操作區(qū)域，導(dǎo)致 tab 的橫滑手勢難以觸發(fā)。

有書的播放頁中，左邊界的全局右滑返回?zé)釁^(qū)在進(jìn)度控件的上一層，但是進(jìn)度滑塊由于距離頁面左邊界太近，導(dǎo)致滑動進(jìn)度滑塊時(shí)很容易誤操作為返回上一頁。這種情況下我們可以標(biāo)注一個(gè)右滑手勢禁用區(qū)域給開發(fā)工程師說明情況，將此情況避免掉即可。

3. 熱區(qū)的啟動熱區(qū)與調(diào)整熱區(qū)

對于某些位移類手勢，在操作時(shí)熱區(qū)并不是一直保持不變的，而是分為了啟動熱區(qū)與調(diào)整熱區(qū)。當(dāng)位移類手勢的起始點(diǎn)位于啟動熱區(qū)時(shí)，系統(tǒng)才會響應(yīng)，后續(xù)操作過程中，手指不離開屏幕繼續(xù)進(jìn)行位移操作時(shí)系統(tǒng)響應(yīng)的區(qū)域被稱為調(diào)整熱區(qū)。通常調(diào)整熱區(qū)會擴(kuò)大到全屏，同時(shí)禁用了界面的其他全部功能，目的主要是為了保證在后續(xù)操作過程中能夠?yàn)橛脩籼峁┳銐虼蟮臒釁^(qū)增加操作舒適度，其次是為了避免用戶手指一直擋住觸發(fā)區(qū)域的重要信息。

例如，iOS 的控制中心中，在音量控件區(qū)域上下拖動可以調(diào)節(jié)音量大小，拖動過程中將手指移出音量控件區(qū)域繼續(xù)上下拖動仍然可以繼續(xù)調(diào)節(jié)。這樣的設(shè)計(jì)可以避免手指擋住控件造成無法直觀看清音量大小的問題。

再進(jìn)行一個(gè)案例對比，QQ 音樂和網(wǎng)易云音樂的播放條都支持左右滑動切歌，但是整體體驗(yàn)上有一些差距。在面積大小層面，QQ 音樂的啟動熱區(qū)與網(wǎng)易云音樂的啟動熱區(qū)是基本相同的，但是 QQ 音樂的調(diào)整熱區(qū)是全屏，而網(wǎng)易云音樂的調(diào)整熱區(qū)仍然和啟動熱區(qū)一致。這樣導(dǎo)致的問題是，用戶在使用網(wǎng)易云音樂時(shí)，如果左右滑動播放條的過程中手指無意間超出了啟動熱區(qū)就會導(dǎo)致本次操作無效，影響使用體驗(yàn)，而 QQ 音樂沒有這個(gè)問題。

以上就是關(guān)于描述維度的思考總結(jié)，后續(xù)暫定的更新計(jì)劃如下。有興趣的朋友可以持續(xù)關(guān)注~

歡迎關(guān)注作者微信公眾號：「設(shè)成于思」