全栈工程师?
嗯.....目前并不是!

送你一份設計指南(上):放置類AR設計

AR的場景多種多樣,其中在手機設備的AR體驗中,有一種基本且常見的場景:通過手機攝像頭,用戶在環境中放置虛擬物體(模型),用戶與它有一些具體的互動操作。我們將這類場景統一稱為放置類AR場景。

AR的特點包括:

  1. 不隔離真實世界,而是將計算機生成的信息和物體疊加到現實場景中。
  2. 藉助AR設備,用戶可以更自然地與增強現實環境進行交互,這類交互滿足實時性,例如:手勢、語音。
  3. 計算機生成的物體與真實環境無縫對接,並且用戶在真實環境中運動時,也將繼續維持正確的位置關係。

(1)放置類AR的場景及類型

AR的場景多種多樣,其中在手機設備的AR體驗中,有一種基本且常見的場景:通過手機攝像頭,用戶在環境中放置虛擬物體(模型),用戶與它有一些具體的互動操作,如移動、旋轉等。

我們將這類場景統一稱為放置類AR場景:基放置對象可以是一扇虛擬場景的任意門,用戶可走入門中互動;也可以是一件家居商品,用戶可預覽商品是否與室內環境搭配等。針對不同的放置對象和場景,設計側重點也會有所不同。於真實環境放置虛擬模型,並與模型進行交互的AR場景。

放置對象可以是一扇虛擬場景的任意門,用戶可走入門中互動;也可以是一件家居商品,用戶可預覽商品是否與室內環境搭配等。針對不同的放置對象和場景,設計側重點也會有所不同。

(2)放置類AR的交互框架及節點

無論放置的對象類型如何,用戶打開相機,在屏幕中放下具體模型和進行互動的過程具有共性。

我們把中間的完整流程拆分為了以下部分:

初始啟動的節點分析和設計建議

1. 初始啟動環節的作用

用戶打開放置類AR功能后,進入環境識別前的過程,均屬於初始啟動的範圍。放置類AR為何需要有初始啟動環節,用戶不直接進入AR場景進行體驗?

由於技術和產品的需要,放置類AR初始啟動承載幫助用戶理解、AR素材準備,為用戶帶來更優的AR體驗。

初始啟動的流程中,包括啟動頁、引導頁、加載頁三個部分節點,三個節點可同時存在,也可只存在一個或兩個節點,具體需要根據設計需求來決定。

1.1 啟動頁的定義及設計形式

啟動頁遊戲AR應用中在比較常見,只有短暫停留。頁面起到品牌露出的作用,或在啟動APP后渲染氛圍,迅速將用戶帶入。設計手段包含:音樂、音效、視覺、文字、動效,具體運用根據實際設計需求而定。

可以參考以下兩種設計內容:

  1. 品牌露出:圍繞logo進行設計,給用戶強化品牌的印象。
  2. 氛圍烘托:圍繞主場景/故事設計海報式的視覺設計,讓用戶對之後的AR應用的情節/人物/模型有初步印象。

啟動頁雖然不傳遞明確的含義和信息,但不同設計手段可以給用戶傳遞出不同的品牌調性和場景氛圍感,其中音效和動效形式的應用會增加啟動頁設計的吸引用戶的效果,將結合案例具體說明。

1.2 引導頁的定義及設計形式

引導頁促進用戶進入後續的核心體驗流程,傳達有關體驗的明確內容,根據APP的類型,引導內容有所不同。但不涉及後續具體細節操作。常見的引導包含:內容介紹、安全警告、體驗建議、環境要求、玩法介紹、新手引導等。設計手段包含:語音、音樂、音效、視覺、文字、動效。具體運用根據實際設計需求而定。

可以參考以下五種設計內容:

  1. 產品介紹式引導:簡明扼要的介紹AR應用的主要作用。
  2. 輔助信息式引導:模型的補充理解信息,引導用戶了解模型背景知識等。
  3. 體驗建議/要求式引導:簡明扼要地表達會直接影響AR應用體驗沉浸感的建議或者要求,以引導用戶照做,獲得後續最佳體驗。
  4. 背景故事式引導:通常以豐富的可視化形式展現於產品/模型交互相關的背景故事。
  5. 試玩式引導:直接以某個模型舉例,引導用戶一步步進行交互,獲得該模型的完整交互體驗。

引導頁有明確內容,根據設計需求可以考慮從產品介紹、展示輔助信息、在體驗時的建議或要求等。每種設計內容有各自的適用場景、設計形式及優缺點,將結合具體的案例進行說明。

1.3 加載頁定義及設計形式

加載頁需要用戶等待,加載時長根據加載內容的大小而變化,過程可能包含素材下載、模型加載、材質渲染、界面UI等。設計手段:文字、視覺、動效、音樂、音效。

具體運用根據實際設計需求而定,可以參考以下五種設計形式:

  1. 進度條式:常見的是浮層樣式。感知最弱,通常設計樣式跟隨移動應用的框架樣式。
  2. 文案式:通過文案傳達加載過程中的信息,讓用戶知道進行到哪個步驟了,後台正在做什麼。但需要注意進程描述的文案不超過3條,且語言需要簡單好理解,避免使用技術性語言迷惑用戶。
  3. 轉場式:完整的轉場頁設計,視覺需要符合產品的整體調性,以保證整體的和諧統一,遊戲中最常見。
  4. 下載式:下載式的加載可取消加載,因為模型較大,需要較長時間進行下載體驗。並且通常用戶只對單一模型感興趣,沒有連續體驗多個模型的需求。必須下載成功,才能進入後續的AR體驗。
  5. 靜默式:將模型下載過程併入引導頁,使用戶無感知,該方法適合情節連貫的AR體驗。

建議使用Jigspace、Lego AR、AliceARQuest等AR應用進行體驗。

2. 初始啟動設計原則及建議

整個初始啟動環節包含啟動頁、引導頁和加載頁,整體的設計原則可總結為:

初始啟動設計第一步是根據應用類型選擇設計內容和形式。

不管是啟動頁還是引導頁的設計,都需要根據應用的類型去決定以何種形式給用戶展現必要的信息。例如:遊戲類注重用戶的沉浸感,引導以故事介紹+體驗建議為主。科普類的需要通過界面+三維的形式展示更多信息給用戶,引導以產品介紹和信息補充為主。

(1)啟動頁設計目標導向,不拖沓不無聊

根據APP類別選擇恰當的形式,盡量簡單直接,儘快進入後續內容頁。遊戲類可形式豐富時長稍長。

(2)引導頁設計簡單直接,使用多維度設計手段增加引導信息的豐富度

不管引導的內容是產品介紹,還是試玩引導,簡單直接始終是目標,不在引導的部分佔用用戶過長的時間。另外也不因為為了節約時間而使必要信息缺失,因此可以選擇豐富的設計手段,讓必要信息充分暴露。

3. 加載頁設計優先考慮無感知加載,否則根據加載時長使用不同形式

如無法無感知,則根據加載時長選擇加載的設計形式。例如:時長較短的加載過程需要簡單明快,不打擾用戶。時長較長的加載過程需要過程明晰,給用戶明確的預期。儘可能避免阻斷式的加載過程,通過設計方法增加長時間等待的愉悅感,減少不耐煩。

場景搭建的節點分析和設計建議

1. 場景搭建環節的作用

AR應用啟動后,經歷完內容引導加載的過程,便正式進入了AR場景搭建環節。從技術的角度來說,想讓模型穩定的融合於真實世界,我們需要首先讓手機攝像頭認識周圍的環境,即為場景搭建的第一環節:環境的感知識別(環境識別包括平面識別、圖片識別、物體識別等,本文聚焦在環境中的平面識別)。確定平面之後才能繼續進行模型放置,直至用戶成功把模型在真實環境中放下。

2. 平面識別的作用及完整節點

平面識別指通過對環境特徵的感知,確定一個基於真實環境的平面。確定放置平面后,即可構建虛擬世界的坐標系,在虛擬世界中放置模型。平面識別是放置類AR體驗的第一步,是後續所有體驗內容存在的基石。因此在設計中我們需要保證平面識別的成功率,保證用戶的順暢體驗。

這個環節本質上是個技術驅動的環節。程序啟動后,系統以手機攝像頭為原點建立了3D世界坐標系。相機界面打開后,系統開始識別拍攝到的真實環境。通過檢測所捕獲的圖像之間的視覺差異點(即特徵點),系統可以確立一個平面,並在世界坐標系中賦予平面一個位置信息,自此3D世界坐標系與真實環境中的平面建立了聯繫。找到平面后,系統仍會持續進行檢測、更新平面的信息。

平面識別的成功需要用戶將手機攝像頭對準平面並移動手機,從而獲得更多平面的特徵點、確定平面。因此在設計中,首先需要引導用戶做此動作配合;同時在用戶動作中,應對識別狀態給予實時反饋,讓用戶有把控感;識別失敗時,有效的容錯設計可以減少用戶挫敗感,提升識別成功率。

設計節點可總結為以下幾點:

2.1 動作引導定義及設計形式

動作引導需要引導用戶做出配合的動作從而成功識別到平面,主要的引導內容是:引導用戶將手機朝向一個平面任意方向移動,從而識別到平面。

表現用戶動作的引導形式有多種,如:文字、圖片、動圖、語音以及這些方式的組合方案等等。每種單提示形式都有其各自的優缺點。如文字可準確傳達信息但閱讀時間較長;動圖傳達直觀,但準確性不夠等。因此建議使用組合方案的形式進行動作提示,結合單提示形式的優點,同時規避其缺點。

可以參考以下2種:

  1. 動圖類組合引導:用動圖直觀展示用戶需要配合做的動作,同時輔以文字說明,清晰直觀。
  2. 語音類組合引導:視覺+聽覺雙通道提示,使信息更有效傳達。

動作引導建議使用組合方案來進行提示,可以根據產品類型和場景選擇合適的方案,結合具體案例以說明。

2.2 平面識別中的定義及設計形式

程序識別平面的過程中,所花費時間往往受用戶所處環境的影響,環境較複雜時,識別時間可能較長。因此建議在平面識別的過程中,反饋識別的狀態,幫助用戶了解系統的行為、知道自己所處的狀態。

狀態反饋有兩種建議的方式:

  1. 動效過渡:用特徵點閃動、平面延展等動效形式表示平面正在識別中的狀態。
  2. 可視化識別進度:通過量化平面識別進度來表示狀態,讓用戶清晰了解自己所處的狀態階段。

平面識別中的狀態反饋可以讓用戶了解系統行為,明晰所屬狀態。該步驟通常會和下一步合併設計。結合案例進行說明。

2.3 平面識別成功的定義及設計形式

平面識別成功后,建議可視化檢測到的平面,給用戶成功的反饋,同時讓用戶知道即將放置模型的平面在哪裡。

  • 平面可視化:通過UI層直接可視化出識別到的平面,如使用網格等UI形式。
  • 模型放置位置的可視化:通過模型放置位置的UI側面可視化識別到的平面局部,與下一步自然銜接。

平面識別成功的反饋是平面識別環節完成的節點,該步驟可能與之後的模型放置結合設計,結合案例進行說明。

2.4 平面識別異常的原因及設計

前文提到平面識別主要依賴對環境特徵的檢測,在一些情況下會很難識別到平面。當出現異常時,如何引導用戶解決異常也是體驗設計的重要內容之一。經過前期技術調研,平面識別異常的情況主要有以下幾種:

  1. 光線過暗:沒有足夠的光。
  2. 光線過曝:光太強造成畫面過曝。
  3. 缺少紋理:掃描紋理很少的平面很難成功,例如掃描純白的牆是無法成功識別平面的。
  4. 圖像模糊:如果用戶快速移動手機,就會造成拍攝圖像模糊, 導致無法識別或識別不準確。

我們可以對每種異常進行具體的提示,也可以給出綜合提示。

這裡建議的異常提示策略主要有兩種:

  1. 針對性提示:在用戶長時間檢測不到平面時,根據當前具體的異常情況給出針對性提示。如檢測到光線太暗,就提示用戶去光線充足的地方體驗。
  2. 總結式提示:若無法獲得具體的異常情況,可總結、合併4個原因的解決方法進行提示。

進行提示內容話術設計時需注意:

  1. 提示話術不能太技術,需要用戶可理解;
  2. 提示內容需保證用戶可操作。

另外異常提示的設計形式也有多種:文字、圖片、動圖、語音、組合方案等等。在設計時需要結合“動作引導”的設計形式進行整體提示的組合方案設計。例如:動作引導是文字+動圖的形式,異常提示就不應該出現語音形式;動作引導是文字+語音形式,異常提示同樣使用語音的形式更有一致性。

2.5 平面識別的設計原則及建議

  1. 動作引導需要自然、直觀、易學。減少用戶認知成本。
  2. 識別狀態實時反饋,形式可以是視覺、聲音甚至震動,給用戶可控感、掌控感。
  3. 需要有容錯設計,避免用戶因識別失敗帶來的挫敗感。
  4. 設計形式的一致性,動作引導與異常提示的設計形式需配套,保證設計的一致性。

3. 模型放置的定義及作用

確定了放置平面后,下一步就是放置模型,模型放置指:通過一定的放置方式,讓模型出現在平面的某個位置上。

在模型放置模塊中,我們需要定義和設計放置方式以及放置位置。放置方式可以是自動放置,也可以是手動放置。放置位置可以是給用戶體驗效果最好的一個坐標點,即最佳放置位置,也可以是一片區域的任意一個坐標點,即可放置區域。

3.1 放置方式的定義及設計形式

模型的放置方式主要有兩大類:

  1. 識別到平面后系統自動放置模型;
  2. 經用戶操作手動放置模型,可以是點擊屏幕觸發模型放置或拖拽模型進行放置。

可以參考以下三種設計形式:

  1. 自動放置:檢測到平面后,模型自動出現在場景中,用戶無需做任何操作。此方式適合用戶不需走動的AR場景,對模型的位置要求不高。
  2. 點擊手動放置:檢測到平面后,用戶需要點擊屏幕觸發模型放置。此方式適合場景互動類應用,需要用戶在環境中走動,對模型位置有一定要求。
  3. 拖拽手動放置:檢測到平面后,將模型從屏幕的模型庫中拖拽到平面上。

模型的放置方式主要有自動放置與手動放置,可根據不同場景設定適宜的放置方式,以下結合案例具體說明。

3.2 放置位置的設計內容及建議

放置模型時,模型即將放置的位置需要根據具體互動場景進行設計,以保證用戶的視覺體驗和互動體驗。如果模型放置過近,用戶無法看到模型全貌;過遠,對需要用戶走動才能進行互動的應用會增加互動難度。

可以參考以下兩種設計內容:

  1. 最佳位置:自動放置場景和部分點擊觸發放置場景下,建議給模型設置一個默認最佳位置(具體的坐標點)。
  2. 可放置區域:拖拽放置場景下,建議給模型設置一個可放置區域。

在做具體的放置位置設計時,需要考慮以下幾方面的因素:

  1. 模型完整呈現:需保證模型初次出現時在屏幕中顯示完整且以最佳視角出現。
  2. 互動距離適宜:例如在AR任意門體驗中,需要保證用戶走兩三步就能進入虛擬場景。自由放置的模型可以設置最近以及最遠的互動界線,以免模型過大或過小造成交互困難。
  3. 場景元素布局符合邏輯:需考慮模型與場景內其它元素的關係,設計合乎邏輯的位置,例如食物出現在場景中的盤子里等。

 

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《送你一份設計指南(上):放置類AR設計》
文章链接:https://www.pmbear.com/%e9%80%81%e4%bd%a0%e4%b8%80%e4%bb%bd%e8%a8%ad%e8%a8%88%e6%8c%87%e5%8d%97%ef%bc%88%e4%b8%8a%ef%bc%89%ef%bc%9a%e6%94%be%e7%bd%ae%e9%a1%9ear%e8%a8%ad%e8%a8%88/
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们