我從設計 AR 應用程序中學到了什麼

已發表: 2022-03-10
快速總結↬我們仍處於新技術革命的起步階段——AR 等技術將成為我們日常生活的一部分——這是我們為下一代設計師創造堅實基礎的機會。 在本文中,Gleb 分享了他關於如何創建和設計 AR 應用程序的個人經驗和建議。

數字和技術領域在不斷變化——新產品和技術每天都在湧現。 設計師必須跟踪趨勢和創意機會在哪裡。 一位偉大的設計師具有分析新技術、識別其潛力並使用它來設計更好的產品或服務的遠見。

在我們今天擁有的各種技術中,有一種受到了很多關注:增強現實。 蘋果和谷歌等公司意識到 AR 的潛力,並在這項技術上投入了大量資源。 但在創建 AR 體驗時,許多設計師發現自己處於陌生的領域。 AR 是否需要不同類型的用戶體驗和設計流程?

至於我,我是邊幹邊學的忠實擁護者,我有幸從事空中客車移動應用程序以及 Rokid AR 眼鏡操作系統產品設計工作。 我已經制定了一些實用規則,可以幫助設計師開始創造引人入勝的 AR 體驗。 這些規則適用於移動增強現實 (MAR) 和 AR 眼鏡體驗。

Gleb Kuznetsov 的 Rokid Glasses 運動設計探索

詞彙表

讓我們快速定義我們將在文章中使用的關鍵術語:

  • 移動增強現實 (MAR) 提供在移動設備(智能手機和平板電腦)上體驗的增強現實;
  • AR Glasses 是一種可穿戴智能顯示器,具有透視增強現實體驗。

1. 獲得利益相關者的支持

與您為之工作的任何其他項目類似,您盡可能早地獲得利益相關者的支持至關重要。 儘管多年來一直備受關注,但許多利益相關者從未使用過 AR 產品。 因此,他們可能會因為不了解技術所提供的價值而質疑該技術。 我們的目標是獲得他們的同意。

“我們為什麼要使用 AR? 解決了什麼問題?” 是利益相關者在評估設計時提出的問題。 將您的設計決策與業務目標聯繫起來至關重要。 在接觸利益相關者之前,您需要評估您的產品的 AR 潛力。 以下是 AR 可以帶來很多價值的三個領域:

  • 業務目標
    了解您嘗試使用 AR 解決的業務目標。 利益相關者總是喜歡將設計解決方案與業務目標聯繫起來。 很多時候,企業都會對可量化的數字做出反應。 因此,準備好解釋你的設計是如何幫助公司賺更多錢或節省更多錢的。
  • 對用戶的幫助
    AR 將提供更好的用戶體驗,並使用戶的旅程更加輕鬆。 利益相關者欣賞改善應用程序主要用途的技術。 想想 AR 給用戶帶來的具體價值。
  • 創造力
    在創造更難忘的體驗和改進產品的設計語言方面,AR 非常出色。 企業通常有一個他們試圖描繪的特定形象,產品設計必須反映這一點。

只有當您對“為什麼 AR 會更好?”這個問題有明確的答案時,您才需要與利益相關者分享您的想法。 花時間準備演示文稿。 眼見為實,當您為他們展示演示時,您將有更好的機會獲得管理層的支持。 演示應該清楚地說明您的建議。

跳躍後更多! 繼續往下看↓

2. 發現與構思

探索和使用其他領域的解決方案

無論您設計什麼產品,您都必須花足夠的時間研究該主題。 在為 AR 設計時,請從其他行業尋找具有類似解決方案的創新和成功示例。 例如,我的團隊在設計 AR 眼鏡的音頻輸出時,我們從手機上的耳機和揚聲器中學到了很多東西。

使用“作為我想要的用戶”技術設計用戶旅程

在設計 AR 體驗時,您應該記住的基本事項之一是 AR 存在於手機或眼鏡之外。 AR技術只是人們用來接收信息的一種媒介。 用戶想要使用這項技術完成的任務才是真正重要的。

“如何定義關鍵功能集並確保它對我們的用戶有價值?” 是您在設計產品之前需要回答的一個關鍵問題。 由於以用戶為中心的設計的核心思想是以用戶為中心,因此您的設計必須基於對用戶、他們的目標和使用環境的理解。 換句話說,我們需要擁抱用戶旅程。

當我在一個新項目上工作時,我使用一種簡單的技術“作為一個[用戶類型],我想要[目標],因為[原因]。 ” 我設身處地為用戶著想,思考什麼對他們有價值。 這種技術在頭腦風暴會議期間很方便。 與故事板一起使用,它可以讓您探索各種交互場景。

在“今天設計明天:空客 iflyA380 應用程序”一文中,我詳細描述了我的團隊在創建應用程序時遵循的過程。 設計過程的關鍵要素是深入乘客的腦海,尋找在飛行前、飛行中和飛行後的最佳用戶體驗。

為了了解旅行者對旅行體驗的喜好和厭惡,我們與空中客車公司一起舉辦了很多頭腦風暴會議。 這些會議揭示了許多有價值的見解。 例如,我們發現在乘坐 A380 之前訪問機艙(在家)是用戶想要做的常見事情之一。 該應用程序使用增強現實,因此人們甚至可以在登機前探索機艙並虛擬訪問上層甲板、駕駛艙、休息室——無論他們想去哪裡——甚至是。

Gleb Kuznetsov 設計的 IFLY A380 iOS 應用程序
IFLY A380 iOS 應用程序由 Gleb Kuznetsov 設計。 (大預覽)

應用程序還陪伴乘客從旅程的開始到結束——基本上,旅行者想要在旅途中做的所有事情都包含在一個應用程序中。 找到您的座位是我們實施的功能之一。 此功能使用 AR 顯示您在飛機上的座位。 作為一個經常旅行的人,我喜歡這個功能; 您無需在進入機艙時搜索該地點,您可以在舒適的沙發上提前搜索。 用戶可以直接從登機牌訪問此功能——通過點擊“玻璃”圖標。

IFLY A380 應用程序用戶可以通過點擊“玻璃”圖標來訪問 AR 功能
IFLY A380 應用程序用戶可以通過點擊“玻璃”圖標來訪問 AR 功能。 (大預覽)

縮小用例

使用 AR 為用戶解決一些不同的問題可能很誘人。 但在很多情況下,最好抵制這種誘惑。 為什麼? 因為通過在產品中添加太多功能,您不僅會使其更加複雜,而且成本也會更高。 這條規則對於通常需要更多努力的 AR 體驗更為關鍵。 最好從簡單但設計良好的 AR 體驗開始,而不是多個複雜但設計鬆散的 AR 體驗。

這裡有兩個簡單的規則可以遵循:

  • 優先處理問題並專注於關鍵問題。
  • 使用故事板來準確了解用戶將如何與您的應用交互。
  • 記住要現實。 現實意味著你需要在創造力和技術能力之間取得平衡。

使用原型來評估想法

當我們設計傳統應用程序時,我們經常使用靜態草圖來評估想法。 但這種方法不適用於 AR 應用程序。

無法從靜態草圖中了解特定想法的好壞; 很多時候,在紙上看起來很棒的想法在現實生活中是行不通的。

因此,我們需要與原型交互來獲得這種理解。 這就是為什麼必須盡快進入原型狀態。

重要的是要提到,當我說“原型製作狀態”時,我並不是指您為您的產品創建一個外觀和工作都像真實產品一樣的拋光高保真原型的狀態。 我的意思是使用快速原型製作技術並構建有助於您體驗交互的原型。 您需要真正快速地製作原型——請記住,快速原型製作的目標是評估您的想法,而不是展示您作為視覺設計師的技能。

3. 設計

與您設計的任何其他產品類似,當您開發 AR 產品時,您的最終目標是創建直觀、引人入勝且乾淨的界面。 但這可能具有挑戰性,因為 AR 應用程序中的界面同時考慮了輸入和輸出。

物理環境

AR本質上是一種環境介質。 這就是為什麼設計 AR 體驗的第一步是定義用戶將在哪裡使用您的應用程序。 預先選擇環境至關重要。 當我說“環境”時,我指的是用戶體驗應用程序的物理環境——可以是室內也可以是室外。

以下是您應該考慮的三個關鍵時刻:

  1. 用戶體驗AR需要多少空間? 用戶應該清楚地了解您的應用程序所需的空間量。 幫助用戶在開始體驗之前了解使用應用程序的理想條件。
  2. 預計人們會在不適合 AR 的環境中使用您的應用。 大多數物理環境都有限制。 例如,您的應用是 AR 乒乓球遊戲,但您的用戶可能沒有大的水平表面。 在這種情況下,您可能希望使用根據您的設備方向生成的虛擬表。
  3. 光估計是必不可少的。 如果環境不夠好,您的應用程序應自動分析環境並提供上下文指導。 如果環境對您的應用來說太暗或太亮,請告訴用戶他們應該找到一個更好的地方來使用您的應用。 ARCore 和 ARKit 有一個內置的光照估計系統。

當我的團隊設計空客 i380 移動 AR 體驗時,我們考慮了可用的物理空間。 此外,我們還考慮了交互的其他方面,例如用戶做出決定的速度。 例如,想要在登機期間找到她的座位的用戶不會有太多時間。

我們繪製了環境草圖(在我們的例子中,它是一個內部和外部的平面)並將 AR 對象放入我們的草圖中。 通過使我們的想法有形,我們了解了用戶希望如何與我們的應用程序交互以及我們的應用程序將如何適應環境的限制。

AR 現實主義和 AR 對像美學

定義環境和所需屬性後,您將需要設計 AR 對象。 創造 AR 體驗的目標之一是將虛擬與現實融合。 你設計的對象應該適合環境——人們應該相信 AR 對像是真實的。 這就是為什麼以最高水平的真實感渲染數字內容很重要的原因。

以下是一些需要遵循的規則:

  • 專注於細節層次,設計具有逼真紋理的 3D 資產。 我推薦使用多層紋理模型,例如 PBR(基於物理的渲染模型)。 大多數 AR 開發工具都支持它,這是為您的 AR 對象實現高級細節的最具成本效益的解決方案。
  • 獲得正確的照明。 照明是創造真實感的一個非常關鍵的因素——錯誤的光線會立即破壞沉浸感。 使用動態照明、在虛擬對像上反射環境照明條件、投射對象陰影以及在真實世界表面上的反射,以創建更逼真的對象。 此外,您的應用程序應該對現實世界的光照變化做出反應。
  • 最小化紋理的大小。 移動設備通常不如台式機強大。 因此,為了讓你的場景加載更快,不要讓紋理太大。 盡量使用2k分辨率。
  • 為 AR 紋理添加視覺噪點。 單色表面在用戶眼中看起來很假。 當您引入撕裂、圖案中斷和其他形式的視覺噪音時,紋理將顯得更加逼真。
  • 防止閃爍。 每秒更新場景 60 次,以防止 AR 對象閃爍。

為安全和舒適而設計

AR 通常伴隨著“沉浸式”這個詞。 創造身臨其境的體驗是一個偉大的目標,但 AR 沉浸式可能是危險的——人們可能會沉浸在智能手機/眼鏡中,以至於他們忘記了周圍發生的事情,這可能會導致問題。 用戶可能不會注意到他們周圍的危險並撞到物體。 這種現像被稱為認知隧道。 並且造成了很多身體上的創傷。

  • 避免用戶做任何不舒服的事情——例如,體力要求高的動作或快速/膨脹的動作。
  • 確保用戶安全。 避免用戶必須向後走的情況。
  • 避免長時間玩 AR 會話。 用戶可能會因為長時間使用 AR 而感到疲倦。 設計停止點和應用內通知,讓他們休息一下。 例如,如果你設計一款 AR 遊戲,讓用戶暫停或保存他們的進度。

虛擬對象的放置

有兩種放置虛擬對象的方法——在屏幕上或在世界上。 根據您的項目需求和設備功能,您可以採用第一種或第二種方法。 一般來說,如果虛擬元素應該像真實對像一樣工作(例如,AR 空間中的虛擬雕像),則應將其放置在世界空間中,如果它們打算用作 UI 控件或信息消息,則應將其放置為屏幕上的疊加層(例如,通知)。

Rokid 眼鏡
Rokid眼鏡。 (大預覽)

“AR 空間中的每個對像都應該是 3D 的嗎?” 是從事 AR 體驗的設計師的一個常見問題。 答案是不。 並非 AR 空間中的所有內容都應該是 3D 的。 事實上,在某些情況下,比如應用內通知,最好使用平面 2D 對象,因為它們會減少視覺上的干擾。

Gleb Kuznetsov 的 Rokid Glasses 運動設計探索
Gleb Kuznetsov 的 Rokid Glasses 運動設計探索。 (大預覽)

避免使用觸覺反饋

手機振動經常用於在移動應用程序中發送反饋。 但是在 AR 中使用相同的方法可能會導致很多問題——觸覺反饋會引入額外的噪音並降低體驗的樂趣(尤其是對於 AR 眼鏡用戶)。 在大多數情況下,最好使用音效進行反饋。

明確過渡到 AR

對於 MAR 和 AR 眼鏡體驗,您應該讓用戶知道他們即將過渡到 AR。 設計一個過渡狀態。 對於 ifly380 應用程序,我們使用了動畫過渡——用戶在點擊 AR 模式圖標時看到的簡單動畫效果。

修剪所有的脂肪。

將盡可能多的屏幕用於查看物理世界和應用程序的虛擬對象:

  • 減少屏幕上某一時刻可供用戶使用的可交互元素的總數。
  • 避免在視口中放置可見的 UI 控件和文本消息,除非它們是交互所必需的。 視覺上乾淨的 UI 可以無縫地融入您正在構建的沉浸式體驗。
  • 防止分心。 限制對象突然出現在用戶屏幕上的次數。 任何突然出現的東西都會立即扼殺現實主義並使用戶專注於對象。

AR 對像操作和描繪“增強”和“現實”之間的邊界

在設計與虛擬對象交互的機制時,傾向於直接操作虛擬對象——用戶應該能夠觸摸屏幕上的對象並使用標準、熟悉的手勢與之交互,而不是與單獨的可見 UI 控件交互.

此外,用戶應該清楚地了解他們可以與哪些元素交互以及哪些元素是靜態的。 通過為交互式對象提供視覺指示符,使用戶可以輕鬆地發現交互式對象,然後與它們進行交互。 使用發光的輪廓或其他視覺亮點讓用戶知道什麼是交互式的。

Gleb Kuznetsov 為室外 MAR 掃描物體效果
Gleb Kuznetsov 為室外 MAR 掃描物體效果。 (大預覽)

當用戶與對象交互時,您需要傳達該對像是可視選擇的。 設計一個選擇狀態——使用突出顯示整個對像或它下面的空間來給用戶一個明確的指示它被選中。

最後但同樣重要的是,遵循物體的物理規則。 就像真實的物體一樣,AR 物體應該對真實世界的環境做出反應。

為攝影自由而設計

AR 邀請用戶進行移動和動作。 設計或 AR 時的重大挑戰之一是讓用戶能夠控制相機。 當您賦予用戶控制視圖的能力時,他們將四處擺動設備以嘗試找到興趣點。 並非所有應用程序都旨在幫助用戶控制取景器。

谷歌確定了用戶在 AR 空間中移動的四種不同方式:

  1. 坐下,雙手固定。
  2. 坐下,雙手活動。
  3. 站著不動,雙手固定。
  4. 在現實世界的空間中四處走動。

前三種方式在移動 AR 中很常見,而最後一種方式在 AR 眼鏡中很常見。

在某些情況下,MAR 用戶希望旋轉設備以方便使用。 不要用旋轉動畫打斷相機。

設計 AR 時考慮可訪問性

與我們設計的任何其他產品一樣,我們的目標是讓人們可以使用增強現實技術。 以下是有關如何解決現實世界可訪問性問題的一些一般性建議:

  • 盲人用戶。 盲人用戶無法訪問視覺信息。 為了讓盲人用戶可以使用 AR,您可能希望使用音頻或觸覺反饋來提供導航說明和其他重要信息。
  • 失聰或聽力不好的用戶。 對於需要語音交互的 AR 體驗,您可以使用視覺信號作為輸入方式(也稱為語音閱讀)。 該應用程序可以學習分析嘴唇運動並將這些數據轉換為命令。

如果您有興趣了解有關如何創建可訪問的 AR 應用程序的更多實用技巧,請考慮觀看 Leah Findlater 的視頻演講:

鼓勵用戶移動

如果您的體驗需要探索,請提醒用戶他們可以四處走動。 許多用戶以前從未體驗過 360 度的虛擬環境,您需要激勵他們改變設備的位置。 您可以使用交互式對象來做到這一點。 例如,在 2018 年 I/0 期間,谷歌在谷歌地圖上使用了一隻動畫狐狸,將用戶引導到目標目的地。

這種 AR 體驗使用動畫鳥來引導用戶
這種 AR 體驗使用動畫鳥來引導用戶。 (大預覽)

記住動畫是設計師最好的朋友

動畫可以是多用途的。 首先,您可以結合使用視覺提示和動畫來教用戶。 例如,移動電話的動畫將清楚地表明用戶必須做什麼來初始化應用程序。

其次,您可以使用動畫來創造情感。

對於接觸產品的人來說,一秒鐘的情感可以改變整個現實。

精心設計的動畫效果有助於在用戶和產品之間建立聯繫——它們使對象感覺有形。 即使是一個簡單的對象,例如加載指示器,也可以在用戶和設備之間架起一座信任的橋樑。

Gleb Kuznetsov 的 Rokid Alien 動作設計
Gleb Kuznetsov 的 Rokid Alien 動作設計。 (大預覽)

關於動畫的關鍵時刻——在發現設計元素並為動畫基礎找到設計解決方案之後,必須花足夠的時間來創建合適的動畫效果。 完成您在上面看到的加載動畫需要大量迭代。 您必須測試每個動畫以確保它適用於您的設計,並準備好調整顏色、位置等以提供最佳效果。

實際設備上的原型

在 Rokid 團隊的採訪中,Jeshua Nanthakumar 提到最有效的 AR 原型總是物理的。 這是因為當您在實際設備上進行原型設計時,從一開始,您就可以使設計在人們實際使用的硬件和軟件上運行良好。 對於像 Rokid Glasses 這樣的獨特顯示器,這種方法尤其重要。 通過這樣做,您將確保您的設計是可實施的。

Gleb Kuznetsov 對 AR Glasses Rokid 的運動設計語言探索
Gleb Kuznetsov 對 AR Glasses Rokid 的運動設計語言探索。 (大預覽)

我的團隊負責為 AR 眼鏡設計 AR 動作設計語言和加載動畫。 我們決定使用一個 3D 球體,它會在加載過程中旋轉,並在其邊緣有很好的反射。 動畫效果的設計花費了動畫設計師兩週的辛勤工作,在我們設計團隊的高分辨率顯示器上看起來很華麗,但最終的效果還不夠好,因為動畫引起了暈車。

暈動病通常是由 AR 眼鏡的屏幕感知到的運動與用戶頭部的實際運動之間的差異引起的。 但在我們的案例中,暈動病的根本原因是不同的——因為我們在形狀、反射等細節上投入了大量精力。我們無意中讓用戶在球體移動時關注這些細節。

結果,運動發生在外圍,由於人類對外圍的運動物體更敏感,這導致了暈動病。 我們通過簡化動畫解決了這個問題。 但重要的是要提到,如果不在實際設備上進行測試,我們將無法發現這個問題。

如果我們將 AR 應用程序的實際測試過程與傳統的 GUI 應用程序進行比較,很明顯,測試 AR 應用程序需要更多的手動交互。 進行測試的人應該根據當前上下文確定應用程序是否提供了正確的輸出。

以下是我進行高效可用性測試會話的一些技巧:

  • 準備一個物理環境進行測試。嘗試為您的應用程序創建真實世界的條件 - 使用各種物理對象,在具有不同照明的不同場景中進行測試。 但環境可能不限於場景和照明。
  • 不要試圖一次測試所有的東西。 使用分塊技術。 將復雜的流程分解成更小的部分並分別測試它們總是有益的。
  • 始終記錄您的測試會話。 記錄您在 AR 眼鏡中看到的一切。 在與您的團隊討論期間,會話記錄將是有益的。
  • 測試暈動病。
  • 與開發人員分享您的測試結果。 嘗試縮小設計和開發之間的差距。 確保您的工程團隊知道您面臨的問題。

結論

與任何其他新技術類似,AR 也有許多未知數。 從事 AR 項目的設計師扮演著探索者的角色——他們試驗並嘗試各種方法,以找到最適合他們的產品並為使用它的人提供價值的方法。

就個人而言,我相信探索新媒介並找到解決舊問題的新方法總是很棒的。 我們仍處於新技術革命的初始階段——AR 等技術將成為我們日常生活中預期的一部分的激動人心的時刻——這是我們為下一代設計師創造堅實基礎的機會。