如何進行AR交互設計？
如何進行AR交互設計？
Alex_Wang Xtar-Lab Creation Directior 昨天 14:11
AR類產品的出現，可能是第一次實現虛擬世界與現實世相互「融合」，完成屏幕的「跨越」，人機交互設計也開始從二維平面邁向三維世界。然而，由於市場和技術的因素，AR產品的人機交互界面仍然處於早期，各種理念和方法仍處於逐步形成與試驗階段。通過對現有AR產品交互設計的調研和思考，以及現有移動產品的對比，本文將闡述一些方法，以供思考和交流。
AR效果的呈現有多種方式，市場在短期內主要分為基於手機等移動設備的移動AR和基於頭顯設備的AR眼鏡（包括一體機和分體機），但也包括車載HUD、商超大屏互動等等，本文將闡述較為通用的設計方法，也將包含對不同呈現方式簡要介紹。
以下內容肯定有不足和不全面的地方，歡迎各位朋友批評指正，我也將及時修改和完善以下內容。
一、一些核心思想
1. 增強
針對增強現實產品的交互設計，首先要做到對現實世界信息的「增強」。
這裡的信息並不局限於文本，還包括圖片、3D對象、聲音等等，而存在形式包含了虛擬信息和現實世界中的信息。
這裡的增強包括信息寬度和深度，舉個發動機的例子，用戶通過AR交互分解發動機虛擬模型並了解各部分的詳細規格和屬性，這時得到的是發動機對象的信息深度，而同時對比同類型或同時代發動機規格或性能，則是在了解信息的寬度，換言之，在進行產品設計時，既要兼顧交互對象的自身屬性和環境相關性，也要關注相關信息的聯繫（當然要藉助信息挖掘）。
2. 清晰
無論是系統還是系統中的應用，都要能夠正確直觀的傳達信息，這包括了內容無歧義、狀態可見和顯示合理。[1]
無歧義要求，在任何情況下，都能傳達出一種信息，且這種信息就是用戶想要或系統要求用戶完成的指令或反饋。比如，在工業操作中，當要求用戶「抓取眼前的箱子」，一定要指示出是「哪個箱子」，而不是僅提供一條指令。
狀態可見要求系統時刻清晰的顯示當前所處狀態，在正確的時間提供正確的狀態，讓用戶時刻了解剛完成什麼、現在在做什麼、接下來要進行什麼，比如在載入內容時要提供進度條或loading圖標，當載入完成要有信息提示「已完成載入」等等。
顯示合理則要求以最精鍊的呈現方式來傳達信息，降低用戶焦慮和不安，如能用圖片或3D對象說明的，就不要使用文字；能用大字體，就不用小字體；等等。 對於確實需要同時展示大量消息的場景，需要提供全局放大功能。
此外，在進行設計前一定要明確，所有的設計都是建立在場景和功能之上的，一切脫離場景和功能的設計，都不再能做到清晰傳達。
3. 一致性
人類的認知具有連續性，從一個階段進化到另一個階段的過程中，總會存在「中間地帶」，這一過程中需要在兩個階段間建立連續性和傳承性，幫助用戶對新事物建立「心智模型」。所以在短期內，無論是移動AR還是AR眼鏡，在進行交互設計時，要更多的延續現有的交互規則和設計規範，如控制項的反饋、手勢等等，在基礎交互層面較多的保持一致。
以下為WIMP對比圖，包括交互設計中最基礎的4點：窗口、圖標、菜單、控制點[2]，通過對比PC、移動設備、AR和VR，可以看出交互在不同平台上的差別與延續。下圖來自前輩兔斯霽整理（原文在這裡）
WIMP對比圖
此外，設計者應該更多的關注系統和應用內部用戶體驗的一致性，即同一信息、功能、操作要保持一致。這種一致包括：結構一致、色彩一致、操作一致、反饋一致和文字一致。[3]
4. 靈活自由
靈活自由指在場景需求下，所有對象都具有可變性。這種可變性的幅度隨場景需求的變更而變化，比如傢具應用中，虛擬的3D傢具可以隨需要改變顏色、大小等。所有交互對象的可變性包括但不限於位置、大小、顏色、材質、光影等，甚至環境也包含在內。這種修改是對較難修改的做出臨時的可視化修改，相當於一種「超自然交互」，且擁有「上帝視角」，這也是增強現實交互的深刻體現。
「工作台」是一種典型的體現靈活自由的場景
「工作台」是一種典型的體現靈活自由的場景
此外，靈活自由也意味著不受時間和空間的限制，能夠查看一切對象的歷史信息、對未來的可能性做出預判，能夠幫助用戶掌握整個場景內的空間信息。
靈活自由的目的是為了高效。大部分新產品設計都是為了提高效率，而靈活自由的交互能幫助用戶按照自己最舒服的操作方式完成任務。靈活自由不僅能幫助產出物提高效率，也能幫助生產工具，即AR系統和應用，不斷更新迭代，這種迭代通過「小步快跑」的策略，從細微處開始調整改變，在進化過程中逐步迭代，才能夠保證用戶既不反感和迷茫，也不影響整體體驗和反饋效果。最終，這不僅帶來了生產工具的更新，也完成了用戶向新階段的更新。
5. 用戶為中心
用戶是產品的控制者，設計要始終圍繞用戶進行，包括環境在內的所有對象要做到狀態可控、自然反饋，某些場景下還應有隱喻和可探索。
狀態可控指在不同場景下都讓用戶對信息有可控性。除了傳統的增刪改查，還需要所有對象易取，易交互。在真實世界中，用戶大腦默認所有主動發出的交互都具有一定可控性，這種可控性自人類使用電子產品以來一直得以延續，在AR產品中，依然需要保證所有交互對象以「人」為中心。這一方面要求產品設計的交互流程都在當前認知範圍內，另一方面要求做到防錯和容錯，在可控範圍內提供更大的產品邊界，比如提供撤銷/重做功能，提供可操作的錯誤/修改提示等等。
自然反饋要求所有信息反饋都符合自然界交互反饋和之前的用戶習慣。AR產品中的可交互對象包括虛擬對象和真實對象，真實對象用戶可以直接完成交互，虛擬對象卻不然。為了保證虛擬和現實的交互連貫性，虛擬對象要儘可能符合真實對象的交互習慣，如一個3D虛擬對象可以被抓起或拋擲，不同對象間會發生碰撞或擠壓等等；此外，當與一些UI控制項和信息發生交互，效果應該按照預想的方式進行，比如一個按鈕是可回彈的，當點擊後就要發生回彈的反饋，不能卡住，同樣這種自然反饋在音效反饋中也要成立。
因為AR產品更貼近於真實世界，這時候適當使用隱喻將會使交互對象更顯「真實」。合理使用隱喻要求，即暗示了恰當的使用方法，又避免了限制[4]。如AR購物場景下，用戶看見購物車本能的會將商品放進去，但購物車的容量沒必要進行限制，因為人們網購時購物的量有可能遠超現實中的量；但隱喻並不總是有助於理解產品功能，所以要適當的取捨。此外，在保證一定安全性的前提下，人類天性都會探索未知，通過引入一定的可探索性，有助於提高用戶對產品的喜愛和忠誠度。這一切都必須以用戶為中心來設計與執行。
二、幾點基本的設計規範
1. 直接操作
直接和對象進行交互，減少不必要的按鈕等其他控制項作為「中間人」。相比於2D屏幕上的直接交互，AR界面中的直接交互更具有現實意義，因為直接交互更接近於自然交互，用戶能直觀的看到交互產生的結果，這能幫助用戶產生更強的操縱感，能更深的沉浸在業務中。
2. 環境相容
場景中的對象不僅僅是3D對象和UI控制項等，環境也是對象之一。因此，環境要時刻圍繞需求產生並融入場景。環境中的每一個對象，無論虛實，都要與整體環境相容，以提高完成業務的沉浸感，減少無關信息的影響，交互設計也要儘可能符合用戶在真實世界的行為和反饋[5]。此外，用戶同時也是環境中的一個對象，也要融入場景環境中。場景、環境、用戶，三者是一個相互融合的關係，好比流水線上的工人，時刻都在處於完成某一工作的場景，完成工作又有流水線這一環境，工人又是流水線和工作場景中必不可少的一環。
上一張托尼，雖然有不少交互設計的錯誤，但足夠說明此問題
3. 恰當反饋：
前面提到反饋應做到自然，而反饋最應該做到的是及時與正確，否則會造成用戶對系統或應用的認知錯誤，因為延遲反饋和錯誤反饋都會極大的影響產品業務流程的順利完成，引導用戶走向「歧途」。
在核心思想的「以用戶為中心」中提到了容錯與防錯，這裡在再次提及並進行引申。在進行防錯設計時，一要考慮幫助用戶排除錯誤操作的可能，二要在關鍵操作和可能引起重大失誤的操作時，反饋「是否確認」的操作；而在設計「容錯」中，不僅要反饋操作錯誤在哪裡，而且要提供修正方案，如一個倉庫場景下，當某一個貨箱無法交互，除了顯示原因（如「鎖定」），還可以顯示哪些貨箱是可操作的，或者通過引導完成貨箱「解鎖」。
4. 美學考量
這裡的美不代表通俗意義上的美觀或好看，而是表示設計是否符合場景需求，比如在遊戲或娛樂屬性強的應用中，使用極簡設計極大可能會降低用戶興趣和參與度，而在教育或學術研究型應用中使用極簡設計，反而會降低用戶焦慮，提升對當下任務的沉浸感。營造產品美學特點不僅需要從顏色、字體和形狀，更要從材質，光影等等空間屬性的角度進行考量。
三、必知的常識性規則
1. 減少操作疲勞
目前的設備，手機或平板需要長時間手持設備，眼鏡或頭顯雖然能解放雙手，但視場角較小，如果沒有充分考慮交互內容的展示距離與角度，就需要頻繁移動頭和脖子，造成較嚴重的疲勞感。當然，造成疲勞不可避免，但在設計上要儘可能降低疲勞感。
首先要充分考慮交互內容的距離和角度，一定要保持在用戶舒適的範圍內。人眼重合視域為124°（單眼舒適視域為60°左右）、垂直約60°[6] ，在此範圍內，視場角越大，對場景沉浸感越強。對於舒適範圍可以參考VR的視覺範圍：
最舒適的應控制在水平角寬77°、上仰20°、下俯12°，最總要信息在直線0.5米視域內，0.5-10米3D體驗最好，20米後體驗極差；
較舒適的範圍約在水平角寬77°-102°，下俯12°-40°；
較為勉強區域約在上仰20°-60°；
而在水平102°-180°則為「好奇區域」，需要合理設計。
以上內容由遊戲葡萄根據XIMMERSE的CEO賀傑所分享的內容[7]。
其次在視覺上，通過減少無關控制項、隱藏待處理信息、將核心內容儘可能多的控制在視場角範圍內等方法；
第三在操作上，盡量多使用單手交互能夠完成的，減少複雜手勢操作、更多融入語音或眼球追蹤等被動交互等等。
2. 減少干擾：
首先，「提供短平快的AR體驗」(「Design your UX for short and quick AR engagement」)[8]，讓用戶焦點時刻圍繞任務和場景，避免其他信息吸引注意力。其次，要合理提示現實世界中的干擾，如開車過十字路口，要高亮提醒信號燈狀態和橫穿馬路的行人，避免造成重大危險的干擾。
再比如針對AR營銷的廣告內容，要根據展示場景、傳播目的來決定交互方式，如可以用喚起好奇心等多種手段引導用戶打開，但不能默認播放，因為在AR的世界中視覺衝擊太多，很容易讓用戶產生焦慮，保留適當的剋制對於產品留存很重要。
3. 提供指引：
AR系統和應用將用戶從2D帶入了3D，認知層面發生轉變，新用戶對於產品需要一個學習過程，此時應該提供使用使用指引，如同手機APP對新用戶提供的指引，否則焦慮感會讓人很快放棄產品。此外，指引不應僅針對新用戶，還應在新功能上線、關鍵操作（如支付）等情況下提供，且簡潔合理，特別是關鍵操作時最好提供說明或幫助按鈕，以便及時提供支持。
這裡有篇餘力維大神的文章，講的很詳細
4. 注意物理條件限制
在進行操作之前，由於2D世界和3D世界的不同，應進行空間檢測、平面（或稱為「基準面」、「參考面」）檢測並判斷遮擋關係。這是由設備主動對環境發起的交互，可以幫助用戶確定可交互對象的範圍。同時也限定了用戶交互的安全範圍，減少操作中造成的人身傷害。
5. 其他感覺反饋必不可少
在使用增強現實產品時，用戶實際置身於一個真實環境營造的「場」中，試想在現實中，我們不僅接受視覺、聽覺，還有觸覺、味覺，甚至各種磁場、引力場等等都圍繞在周圍，所以要通過不斷豐富的感測器，幫助用戶形成更接近真實的交互體驗。
6. 合理處理中斷
用戶主動中斷的情況下，如應用切到後台運行或重新定位檢測平面等等，需要提供合理反饋，告知用戶操作後果並提供是否進行的選項。
當用戶被動中斷時，如即將斷電、有信號干擾，或是現實中有其他對象突然進入場景等等，需要提供被動交互，幫助用戶了解當前狀態，並且引導用戶做出主動反饋。[9]
在用戶被中斷，重新進入系統或應用時，一定要注意此時的用戶起始點，如果用戶相對於場景的坐標發生了變化，就需要重新定位並檢測環境，以減小操作誤差。
7. 措辭簡潔友好
提供符合場景的措辭。場景並不限於日常生活等消費級產品的場景，還應包括工業製造等專業場景，這種場景需要提供相關的專業辭彙，幫助理解。
提供可理解的詞語。避免生硬或程序語言等不恰當的描述。在詞語選擇上，要「保留相關詞，優先最關鍵詞」。
8. 反覆測試
任何階段任何場景下的AR系統或應用，在面向用戶前，都有意想不到的設計失誤，所以要從MVP開始，不斷進行驗證與測試，根據用戶反饋快速調整。
四、設計方法與流程
在進行設計時，依然可以參考用戶體驗五要素的流程，即戰略層（產品遠景、業務需求）範圍層（需求分析、功能確定）結構層（信息架構、頁面關係）框架層（頁面布局）表現層（視覺表現）。但在實際操作中，需要更多的關注一下三點：
1. 確認真實場景
首先要明確：不是為了AR而AR。一定要有真實的使用場景，要能解決用戶問題。然而要注意，廣告中加入AR做營銷，確實是一種有效的手段，不屬於「強行AR」的範圍。
其次，AR類系統或應用場景中有大量現實世界的對象存在，由於應用內展示的信息量有限（不能影響主要任務或造成干擾），這就導致不同的應用下交互方式可能差別很大，更傾向於定製化。比如同樣是面向工業，機械製造更多需要操作指引，包括標記、模型拆分與組合等等；倉儲管理需要室內導航，包括目標物定位、路線指引等等。所以，確定了場景，才能細化需求，設計交互。
2. 確定合理需求
這一過程，除了和傳統移動產品需求分析一樣，還要注意以下三點：
首先確定，羅列的需求是否為剛需或高頻發生。不是的話沒有意義且浪費資源。還要清楚AR技術的使用是作為功能解決單一需求，還是作為一個用例；是體驗的核心，還是只作為輔助手段。
高德導航中作為輔助功能
「跟我走」APP中作為主功能
其次，針對迭代產品要考慮到，新增需求是否會對現有邏輯和交互設計產生較大的影響，如果是就需要聯合多部門和用戶共同商討決定。
第三，在產品流程梳理中，要充分識別哪些是最需要通過AR優化的，哪些是可優可不優的，哪些是絕對不能優化的，制定出優先順序。
第四，作為一款產品必然有一個潛在需求，就是傳播需求。一個產品從設計之初就要天然的具有自帶傳播屬性，為推廣運營做鋪墊。
最後，要充分考慮到哪些信息從雲端調用，哪些放在客戶端，減小延遲，提高用戶體驗。
3. 採用良好交互
這一過程要充分考慮：如何「增強」信息，才能滿足需求。「增強」的效果，要從更好達成目標，節省更多時間，運行壓力和耗電更小等等多個方面進行考量。如果「增強」過度，會造成資源浪費、增大延遲，比如購買電視機場景中，單擊產品顯示產品名和價格，就比完全顯示產品詳情、參數要好。反之，如果「增強」不足，會導致用戶焦慮，甚至不能完成業務流程。
此外，3D環境下的影響也應重點考慮，畢竟2D和3D的環境不同，需要提供具有空間感的交互邏輯。
具體有以下四步：
1）. 確定使用設備
移動設備受屏幕限制，頭顯設備受視場角限制；移動設備為視頻透視設備，即VST （Video See-Through），手勢交互相比起來，疊加和遮擋效果正確；大部分頭顯設備為光學透視設備，即OST（Optical See-Through），手勢交互中的疊加和遮擋基本沒有正確的；移動設備是手指與屏幕發生交互，頭顯設備交互渠道可能更多，包括手勢、遙控器等；移動設備文本輸入更便捷，頭顯設備文本輸入表現較差，語音輸入又不能隨時保證隱私性；移動設備延遲大，頭顯相對小一些；移動3D模型顏色顯示更豐富，但模型面數更低更粗糙，頭顯顏色不夠豐富，但模型有可能（連接電腦或處理核心獨立的）更精細······
2）. 確定交互對象
AR產品的交互對象大致可分為四類：人、環境、設備、虛擬對象。這其中的交付方式又可分為：主動交互和被動交互。
不同的交互對象，使用的交互規則不同。
3D對象需要縮放、旋轉、移動、分解、組合、碰撞、相容等等；
按鈕需要定位、點擊、反饋結果、不可點擊等等；
列表需要下拉淡出、定位、點擊、反饋結果、收起列表等等；
文本需要定位、輸入、刪除等等；
······
3）. 合理選擇交互形式：
手勢：移動設備上的手勢遵循移動應用手勢設計，這裡主要討論的是頭顯或眼鏡的手勢設計。由於AR、VR等技術的發展，NUI自然交互界面逐漸興起，手勢作為最貼近自然的交互模式被越來越多的廠商採用。手勢識別大致可以分為：二維手型識別、二維手勢識別、三維手勢識別，難度依次遞增。舉個簡單粗糙的例子，比一個靜態的剪刀手就是二維手型，當開始左右晃動就會形成二位手勢，當把剪刀手從自己臉旁向前伸向別人臉旁，在深度上產生了動作，這就形成了三維手勢。在AR產品中要合理使用三種手勢定義交互，做到簡單、高效。
HoloLens的Bloom手勢，喚起主菜單
HoloLens的Air Tap手勢，選取對象
在AR產品的交互設計中，文字輸入是一種較為複雜的交互行為。AR設備以頭顯或眼鏡的方式出現，是考慮到移動性和便攜性，但頭顯或眼鏡不像手機等移動設備能便於輸入，需要接入鍵盤來輔助；很多產品考慮通過語音解決，但私密性卻無法保證。所以很多解決方案考慮從手勢來解決，雖然現在並沒有一種較為優秀的手勢輸入法，但不妨礙其發展成一種有效的輔助輸入手段，這裡有一篇文章可參考。
1門文，百度時代總部，北京 2胡也暢， 邵穎，國際商業機器（中國）投資有限公司.
觸控器：雖然計算機視覺技術的發展有了長足的進步，但手勢識別依然不能做到百分百精確，這就導致交互時會發生偏差，所以短期內，還需要外置的觸控器進行輔助。觸控器分為頭顯控制器和分體式控制器。頭顯控制器在所有頭銜和眼睛上都有，包括開關機鍵、返回鍵、確認鍵，有的還有滑動、單點、雙擊等交互模塊。分體式則相當於一個外接的遙控器，控制確認、返回、切換等功能。設計時需要根據交互模塊發揮特點，降低手勢識別的粗糙度。
Magic Leap的控制器
語音交互：AI的發展幫助語音交互取得了極大的進步（包括國外亞馬遜Alexa、蘋果的Siri、三星的Bixby，國內的訊飛、靈犀等等，語音交互目前仍主要基於NLP，這裡不做過多討論），在AR交互設計中，語音交互短期內仍為主要的信息輸入和反饋方式，但考慮到部分場景的私密性，語音交互仍應作為輔助手段，不能絕對代替輸入或部分交互功能。
音效互動：傳統的音效互動更常見於遊戲中，但在AR世界就好比一個超大型「模擬人生」遊戲，由於設備視覺範圍有限，必須通過環繞立體聲輔助用戶形成對場景和環境的理解，以及對交互對象反饋的感知。比如交互對象在右側，就可以用環繞聲模擬從右側發來的提示音。當然，音效互動是一種輔助，即使在定位中也只能確定範圍，不能保證精確度，但這種輔助卻能使體驗更加立體和完整。[10]
這裡提供一個早期的立體音效的體驗，以供參考：
立體聲效體驗
動眼交互：眼部追蹤已經有較多的解決方案，其中著名的包括HoloLens的凝視等。在設計動眼交互時要注意兩點，一是時刻檢測目標焦點以調整成像的效果，緩解輻輳衝突；二是對於需要快速完成交互，盡量減少凝視等交互形式的參與。此外，虹膜驗證已經具有較成熟的解決方案，在涉及到支付、身份驗證等安全等級高的交互設計時可以考慮。
4）. 恰當的顏色和文字說明
AR產品的顏色選擇要更多的考慮三點：
一是顏色要符合場景，不能出挑，要與場景和諧相容。
二是必須能服務場景和需求，特別是關鍵提示，如開始、終止、報錯等等。在AR場景中，鮮明的顏色指引更能引起用戶關注。
三是要注意顏色選用。顏色是為了清晰直觀的傳達信息，但由於AR依託於現實世界成像，環境並不唯一，可能紛亂複雜，可能較為簡單，在顏色選擇上要區別考慮，可通過增加陰影、加粗、加亮、加文字反色背景等方式來緩解。
五、關於設計師的一點思考
在最後，我要說一點關於「共情」的想法。
在用戶體驗中，最重要的一種能力可能要算「同理心」了。同理心能幫助產品和設計人員提前去解決用戶將要遇到的問題。同理心是一種天賦，但並不意味著後天不能通過練習培養。當面對AR產品設計時，更需要這種能力。因為AR系統和應用是一套全新的體驗，產品設計人員更難全面的體驗和統計用戶感受，因此需要不斷的運用同理心去模擬用戶，想用戶之所想，這樣才能減少用戶新進時的迷茫與焦慮。
運用同理心，不斷試錯，不斷迭代，不斷嘗試新交互思維與方法，才能逐漸探索出合適AR產品的交互方法。
參考：
[1] Apple Inc.iOS11 Human Interface Guidelines.https://developer.apple.com/ios/human-interface-guidelines/overview/themes/，Jun 9, 2017
[2] Alan Cooper, Robert Reimann, David Cronin, Christopher Noessel, Jason Csizmadi, Doug LeMoine.About Face 4:交互設計精髓. Oct, 2015
[3] Jakob Nielsen.Usability Heuristics for User Interface Design.https://www.nngroup.com/articles/ten-usability-heuristics/，January 1, 1995
[4] Apple Inc.iOS5人機交互指南. Nov 15, 2010
[5] Berfin Ayhan.Building an AR Experience: 8 UX Principles You Should Consider.https://medium.muz.li/building-an-ar-experience-8-ux-principles-you-should-consider-a674eb0edab0,Nov 9, 2017
[6] 百度百科.人眼視度.
https://baike.baidu.com/item/%E4%BA%BA%E7%9C%BC%E8%A7%86%E5%BA%A6?fr=aladdin
[7] Ximmerse.看懂這三點，VR交互設計就能上一個台階
http://youxiputao.com/articles/7964. Mar 11, 2016
[8] Neil Mathew.,Practical Design Considerations for Augmented Reality Apps on Mobile Phones.https://medium.com/placenote/practical-design-considerations-for-augmented-reality-apps-on-mobile-phones-517469f4a09c.Nov 29, 2017
[9] Apple Inc.iOS11 Human Interface Guidelines-Augmented Reality.https://developer.apple.com/ios/human-interface-guidelines/technologies/augmented-reality/,Jun 9, 2017
[10] Tyler Wilson.The Principles of Good User Experience Design for Augmented Reality.https://arvrjourney.com/the-principles-of-good-user-experience-design-for-augmented-reality-d8e22777aabd，Nov 14, 2017
微信公號：聲色（alterinsight）
知乎專欄：Xtar-Lab
歡迎喜歡和關注AR產品與設計的朋友一起交流成長
TAG:PMCAFF產品社區 |