4000字干貨！XR時代必須掌握的手勢交互設(shè)計(jì)基礎(chǔ)！

一、XR 中手勢交互設(shè)計(jì)綜述

在 XR 中，手勢交互起著至關(guān)重要的作用。首先，手勢交互是一種更自然、直觀的控制方式，可以提升用戶的沉浸感和體驗(yàn)質(zhì)量。其次，手勢交互可以提供更豐富的輸入方式，使用戶能夠以更靈活、多樣的方式與虛擬世界互動。此外，通過精確的手勢識別，可以實(shí)現(xiàn)更高級的功能和更復(fù)雜的操作，進(jìn)一步擴(kuò)展 XR 的使用場景。因此，XR 中的手勢交互設(shè)計(jì)對于提升用戶體驗(yàn)和拓寬 XR 的應(yīng)用范圍具有重要意義。在了解 XR 中的手勢設(shè)計(jì)前，讓我們先來了解下什么是手勢。

更多XR設(shè)計(jì)干貨：

二、為什么說手勢交互是自然交互？

手勢是指人類用語言中樞建立起來的一套用手掌和手指位置、形狀的特定語言系統(tǒng)。普遍研究認(rèn)為，在人類歷史中，手勢先于語言被發(fā)明，且是語言出現(xiàn)的先決條件。其實(shí)人們在一直使用手勢與他人和世界交互，使用手勢早已成為人們的自然行為，所以手勢交互也可以被稱為自然交互。蘋果、微軟在他們對 xr 的研究中，也非常提倡這種交互。

而手勢也可按照使用場景的不同，被劃分為兩種

1. 手勢與隔空手勢的關(guān)系

人與機(jī)器交互（HCI）動作是日常生活中的常見動作。 因?yàn)槿鄙傥锢砥聊唬艨帐謩菔亲鳛槿讼?XR 設(shè)備發(fā)送指令的主要方式之一。本文亦對此做重點(diǎn)介紹

2. 隔空手勢

隔空手勢大致可以分為以下兩類

3. 體力消耗排行

平日里操作電腦，因?yàn)橛凶雷拥闹危覀兛梢詫⑹直厶鸷芫谩５窃?XR 中，幾乎的手勢都是隔空的，沒有人能夠長時間抬起手臂。所以在設(shè)計(jì)時，依照下面的體力消耗排行圖，我們應(yīng)當(dāng)重點(diǎn)考慮體力消耗最小的手腕擺動和手指擺動。

我們很難長時間做鋼鐵俠那樣酷炫的操作

4. 隔空手勢交互的設(shè)計(jì)挑戰(zhàn)

然而，設(shè)計(jì)有效的手勢交互并非易事。設(shè)計(jì)者需要注意到，不同的用戶可能習(xí)慣不同的手勢，因此需要提供一定的手勢定制性。同時，為了防止誤操作，設(shè)計(jì)者還需要考慮到手勢的精確度和容錯性。此外，由于 XR 設(shè)備的硬件限制和技術(shù)難題，設(shè)計(jì)者還需要面對如何將復(fù)雜的手勢識別和處理算法融入到有限的硬件資源中的挑戰(zhàn)。

1. 長時間使用不合理的手勢，容易造成疲勞，甚至影響健康。
2. 手勢交互缺乏觸覺反饋；
3. 相比鍵鼠，手勢交互不夠精確：用手勢將物體旋轉(zhuǎn) 31°
4. 不同文化背景下的相同手勢，意義可能不同；
5. 手勢沖突：系統(tǒng)手勢與第三方應(yīng)用手勢可能有沖突風(fēng)險

5. 主流手勢

在這里，我收集了國外頭部產(chǎn)品中所使用到的手勢，并做了詳細(xì)拆解。

①捏合

拇指和食指捏合的手勢經(jīng)過多年在 XR 領(lǐng)域的應(yīng)用，已經(jīng)發(fā)展為通用且有效的表達(dá)確認(rèn)的方式。

捏合交互的優(yōu)勢：

1. 拇指和食指的接觸可以彌補(bǔ)手勢交互缺乏的觸覺反饋；
2. 不費(fèi)力，易于執(zhí)行且容易記憶；
3. “閉合”狀態(tài)是一種表達(dá)確認(rèn)、按下的方式；
4. “閉合中”狀態(tài)可以保證雙指在很接近時不會被識別為閉合，以減少誤觸發(fā)。

②遠(yuǎn)場指向&捏合

當(dāng)可交互的元素處于手觸碰不到的距離時，需要一種超自然的交互方式。通過從手部伸引一條射線指向所要交互的元素，通過捏合來做確認(rèn)。

③單指點(diǎn)擊、滑動

自然交互的一種，當(dāng)此手勢是 2D UI 中最基本的手勢，用來保證在 3D 環(huán)境中可以順利使用一些 2D 應(yīng)用。當(dāng)可交互的元素處于觸手可得的距離時，推薦使用此種交互方式。

④直接交互

更貼近自然交互的方式，當(dāng)可交互的元素處于觸手可得的距離時，可通過抓、捏的方式操控物體

⑤掌心抬起、放下

一種高效喚起菜單的方式

6. 隔空手勢設(shè)計(jì)要點(diǎn)

①了解設(shè)備捕捉手勢的范圍

XR 設(shè)備是通過機(jī)器前方的攝像頭捕捉手勢的，但是每個眼鏡的攝像頭的布局方式都不盡相同，導(dǎo)致了可以捕捉手勢的范圍也不同。所以，在設(shè)計(jì)前，請了解并驗(yàn)證機(jī)器最大可以捕捉到多大范圍的畫面，來保證你設(shè)計(jì)的手勢不會出現(xiàn)攝像頭識別不到的情況出現(xiàn)。

比如，國內(nèi)某些 AR 眼鏡只有一個或兩個攝像頭用于捕捉手勢，在用戶使用手勢交互時，不得不將手抬高些。quest2 和一些國內(nèi) vr 頭顯則在四角布置了攝像頭，捕捉范圍更大，手勢操作區(qū)也會更大。蘋果 vision pro 就更夸張了，在機(jī)器下方也布置了攝像頭，能夠保證用戶手放在膝蓋上也能被識別。

單目攝像頭方案的 AR 眼鏡

meta quest2 的攝像頭布局在四角，當(dāng)手的位置過低時，則無法識別

蘋果 vision pro 則在機(jī)器下方也塞入了攝像頭，保證用戶不抬起手，手勢也可以被識別

②使用低負(fù)荷、高心理預(yù)期的交互方式

多使用手腕擺動和手指擺動的手勢，來減少肌肉負(fù)荷。用戶與 UI 元素交互時，始終考慮用戶的舒適度。以盡量減少以下交互：

1. 進(jìn)行大而劇烈的運(yùn)動
2. 長時間保持手臂抬起
3. 將手臂舉過肩膀
4. 完全伸展手臂

同時，也可以使用已經(jīng)有現(xiàn)實(shí)隱喻和習(xí)慣的手勢（點(diǎn)擊、滑動、波動、OK 手勢等）來提高用戶的心理預(yù)期，減少學(xué)習(xí)成本

一組低負(fù)荷、高心理預(yù)期的手勢

③減少手勢的數(shù)量、減少用戶記憶和學(xué)習(xí)成本

在一個應(yīng)用、系統(tǒng)、或是一組體驗(yàn)環(huán)節(jié)中，盡量使用少的手勢來完成交互。用戶能記住的手勢數(shù)量都非常有限：實(shí)驗(yàn)證明人們通常最多可以記住一組 6 個手勢。

④配合視聽覺反饋，來增強(qiáng)手勢交互體驗(yàn)

手在戳點(diǎn)時，無法獲得有效的觸覺反饋，所以視覺和聽覺上的反饋尤為重要。同平面的 UI 設(shè)計(jì)一樣，控件的狀態(tài)反饋越全，體驗(yàn)越好。包括但不限于 normal，hover，disable，press 等狀態(tài)。

建議在手靠近、觸碰、離開元素時，皆需反饋

微軟 HoloLens 的按鈕反饋，豐富的反饋提供優(yōu)質(zhì)的體驗(yàn)

⑤如果你在為全球化的產(chǎn)品做設(shè)計(jì)時，請謹(jǐn)慎考慮手勢的地域性

在不同的文化族群中，同一個手勢往往有著截然相反的含義。比如“? ”，這個手勢在中國、美國可能表示“2”或者“勝利”，但在英聯(lián)邦國家中，則有侮辱的含義。大拇指手勢在很多國家是贊揚(yáng)的意思，在一些中東國家則是粗口手勢。

⑥防止遮擋

當(dāng)一只手位于另一只手和相機(jī)之間時，相機(jī)無法正確跟蹤手的情況，手部重疊需要避免。

（注：meta 實(shí)驗(yàn)室已經(jīng)公布了新的手勢算法，在手部遮擋的情況下也能識別，希望該技術(shù)日后可以被普及）

⑦適宜的交互區(qū)域

可交互的元素，應(yīng)該擺放在合適的位置、合適的角度，同時也應(yīng)當(dāng)根據(jù)位置情況設(shè)置成適合手部交互的大小。

比如，根據(jù)微軟和 leap motion 提供的數(shù)據(jù)，適用于近場交互的距離在 45-60cm 左右，意味著按鈕、模型等可交互物體，需要放在此位置，來保證手能直接觸達(dá)到。同時在 45cm 處的按鈕大小，微軟推薦至少要有 1.6x1.6cm，來保證適合觸摸。在設(shè)計(jì)時，可以以微軟提供的數(shù)據(jù)作為參考。

近端徒手與物體交互時，存在最佳的手眼協(xié)調(diào)區(qū)域 實(shí)驗(yàn)得出，此區(qū)域?yàn)椋?水平方向上的-25°至 35° ；垂直方向上的 15°至-20°

⑧手勢缺乏觸覺的一種解決方案——偽觸覺反饋

從前面我們已經(jīng)知道，隔空手勢缺乏觸覺反饋。這會導(dǎo)致我們在操作虛擬物體時，總會感覺沒有實(shí)感（沒有觸覺和重量的感覺），下面介紹的方式可以在一定程度上減輕此類感覺。

**原理：**錯覺指的是感官上的錯誤，不僅有視錯覺，也有觸錯覺。當(dāng)感知空間屬性時（距離、位置、大小、位移幅度等），視覺感知>觸覺感知，甚至?xí)a(chǎn)生一定的影響。

偽觸覺反饋: 利用視覺反饋和人類視覺觸覺感知特性，在虛擬環(huán)境中模擬觸覺。

偽觸覺可以通過以下四點(diǎn)達(dá)成：

摩擦阻力

摩擦阻力：讓用戶遠(yuǎn)程操控立方體在一個有摩擦力地面上滑動時，控制/顯示比（control/display ratio）發(fā)生變化，用戶會有一種需要更用力、更大幅度的操作，才能繼續(xù)操控立方體。（阻尼感）

剛度

對正在觸摸的物體的變形難易程度，來展示虛擬物體的硬度或柔軟度。leap motion 對手物邊界的設(shè)計(jì)研究中，通過關(guān)節(jié)射線與物體的距離建立視覺動畫，使用戶感知物體的柔軟度。通過這種方式緩解虛擬現(xiàn)實(shí)中不可避免的穿模問題

quest 則是對物體設(shè)置了“邊界”，使得虛擬手無法穿過操控面板，在手和面板觸碰的那一刻，會產(chǎn)生一定的偽觸覺

質(zhì)量

拋兩個不同質(zhì)量的球，根據(jù)小球的運(yùn)動軌跡和回彈，可以讓用戶感知到這個球的質(zhì)量大小。再次撿起時，就會產(chǎn)生質(zhì)量上的心理預(yù)期

表面形狀

根據(jù)虛擬物體的表面形狀設(shè)置交互，如圖所示：當(dāng)手握到一定程度時（非閉合狀態(tài)），視覺上物體就被拿起來了，這時候會有偽觸覺反饋。leap motion 對手物邊界的設(shè)計(jì)研究中，手在抓取物體時，手部模型不穿模，最多附著在表面邊界上，通過此方式構(gòu)建物理邊界認(rèn)知。

總結(jié)

總的來說，XR 中手勢設(shè)計(jì)是一個需要綜合考慮許多因素的復(fù)雜過程，其中包括用戶的習(xí)慣、使用場景以及技術(shù)的限制。設(shè)計(jì)者需要在這些方面做出權(quán)衡選擇。首先，需要理解和考慮用戶的習(xí)慣，因?yàn)橛脩袅?xí)慣可能會影響他們接受新手勢的速度和方式。其次，需要考慮手勢在不同的使用場景中的應(yīng)用，因?yàn)椴煌膱鼍翱赡苄枰煌氖謩荨Ｗ詈螅€需要考慮技術(shù)的限制，因?yàn)椴皇撬械氖謩荻伎梢酝ㄟ^現(xiàn)有的技術(shù)來實(shí)現(xiàn)。只有在這些方面做出了正確的權(quán)衡，設(shè)計(jì)者才能設(shè)計(jì)出既實(shí)用又舒適的手勢。

歡迎關(guān)注作者的微信公眾號：

References

1. User-Defined Gestures for Mid-Air Interaction: A Comparison of Upper Limb Muscle Activity, Wrist Kinematics, and Subjective Preference
2. 手勢 wiki 百科 https://zh.m.wikipedia.org/zh-hans/手勢
3. 微軟《Human Interface Guideline》
4. 薛志榮《前瞻交互——從語音、手勢設(shè)計(jì)到多模融合》
5. Simulating Haptic Feedback Using Vision: A Survey of Research and Applications of Pseudo-Haptic Feedback
6. https://blog.leapmotion.com/interaction-sprint-exploring-the-hand-object-boundary/
7. All distance recommendations from Peebles, L. and Norris, B., 1998. Adultdata: the handbook of adult anthropometric and strength measurements: data for design safety (p. 404). London: Department of Trade and Industry.
8. Study on Hand–Eye Cordination Area with Bare-Hand Click Interaction in Virtual Reality