如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

AR的特點(diǎn)

• 不隔離真實(shí)世界，而是將計(jì)算機(jī)生成的信息和物體疊加到現(xiàn)實(shí)場景中。
• 借助AR設(shè)備，用戶可以更自然地與增強(qiáng)現(xiàn)實(shí)環(huán)境進(jìn)行交互，這類交互滿足實(shí)時(shí)性，例如手勢、語音。
• 計(jì)算機(jī)生成的物體與真實(shí)環(huán)境無縫對(duì)接，并且用戶在真實(shí)環(huán)境中運(yùn)動(dòng)時(shí)，也將繼續(xù)維持正確的位置關(guān)系。

放置類AR的場景及類型

AR的場景多種多樣，其中在手機(jī)設(shè)備的AR體驗(yàn)中，有一種基本且常見的場景：通過手機(jī)攝像頭，用戶在環(huán)境中放置虛擬物體（模型），用戶與它有一些具體的互動(dòng)操作，如移動(dòng)、旋轉(zhuǎn)等。

我們將這類場景統(tǒng)一稱為放置類AR場景：放置對(duì)象可以是一扇虛擬場景的任意門，用戶可走入門中互動(dòng)；也可以是一件家居商品，用戶可預(yù)覽商品是否與室內(nèi)環(huán)境搭配等。針對(duì)不同的放置對(duì)象和場景，設(shè)計(jì)側(cè)重點(diǎn)也會(huì)有所不同。

基于真實(shí)環(huán)境放置虛擬模型，并與模型進(jìn)行交互的AR場景。

放置類AR的交互框架及節(jié)點(diǎn)

無論放置的對(duì)象類型如何，用戶打開相機(jī)，在屏幕中放下具體模型和進(jìn)行互動(dòng)的過程具有共性。我們把中間的完整流程拆分為了以下部分：

初始啟動(dòng)的節(jié)點(diǎn)分析和設(shè)計(jì)建議

1. 初始啟動(dòng)環(huán)節(jié)的作用

用戶打開放置類AR功能后，進(jìn)入環(huán)境識(shí)別前的過程，均屬于初始啟動(dòng)的范圍。放置類AR為何需要有初始啟動(dòng)環(huán)節(jié)，用戶不直接進(jìn)入AR場景進(jìn)行體驗(yàn)？

由于技術(shù)和產(chǎn)品的需要，放置類AR初始啟動(dòng)承載幫助用戶理解、AR素材準(zhǔn)備，為用戶帶來更優(yōu)的AR體驗(yàn)。

初始啟動(dòng)的流程中，包括啟動(dòng)頁、引導(dǎo)頁、加載頁三個(gè)部分節(jié)點(diǎn)，三個(gè)節(jié)點(diǎn)可同時(shí)存在，也可只存在一個(gè)或兩個(gè)節(jié)點(diǎn)，具體需要根據(jù)設(shè)計(jì)需求來決定。

啟動(dòng)頁的定義及設(shè)計(jì)形式

在啟動(dòng)頁游戲AR應(yīng)用中比較常見，只有短暫停留。頁面起到品牌露出的作用，或在啟動(dòng)APP后渲染氛圍，迅速將用戶帶入。設(shè)計(jì)手段包含：音樂、音效、視覺、文字、動(dòng)效，具體運(yùn)用根據(jù)實(shí)際設(shè)計(jì)需求而定。可以參考以下兩種設(shè)計(jì)內(nèi)容：

• 品牌露出。圍繞 logo 進(jìn)行設(shè)計(jì)，給用戶強(qiáng)化品牌的印象。
• 氛圍烘托。圍繞主場景/故事設(shè)計(jì)海報(bào)式的視覺設(shè)計(jì)，讓用戶對(duì)之后的AR應(yīng)用的情節(jié)/人物/模型有初步印象。

啟動(dòng)頁雖然不傳遞明確的含義和信息，但不同的設(shè)計(jì)手段可以給用戶傳遞出不同的品牌調(diào)性和場景氛圍感，其中音效和動(dòng)效形式的應(yīng)用會(huì)增加啟動(dòng)頁設(shè)計(jì)的吸引力，下面將結(jié)合案例具體說明。

引導(dǎo)頁的定義及設(shè)計(jì)形式

引導(dǎo)頁促進(jìn)用戶進(jìn)入后續(xù)的核心體驗(yàn)流程，傳達(dá)有關(guān)體驗(yàn)的明確內(nèi)容，根據(jù) APP 的類型，引導(dǎo)內(nèi)容有所不同。但不涉及后續(xù)具體細(xì)節(jié)操作。常見的引導(dǎo)包含：內(nèi)容介紹、安全警告、體驗(yàn)建議、環(huán)境要求、玩法介紹、新手引導(dǎo)等。設(shè)計(jì)手段包含：語音、音樂、音效、視覺、文字、動(dòng)效。具體運(yùn)用根據(jù)實(shí)際設(shè)計(jì)需求而定?？梢詤⒖家韵挛宸N設(shè)計(jì)內(nèi)容：

• 產(chǎn)品介紹式引導(dǎo)。簡明扼要地介紹AR應(yīng)用的主要作用。
• 輔助信息式引導(dǎo)。模型的補(bǔ)充理解信息，引導(dǎo)用戶了解模型背景知識(shí)等。
• 體驗(yàn)建議/要求式引導(dǎo)。簡明扼要地提出會(huì)直接影響AR應(yīng)用體驗(yàn)沉浸感的建議或者要求，以引導(dǎo)用戶照做，獲得后續(xù)最佳體驗(yàn)。
• 背景故事式引導(dǎo)。通常以豐富的可視化形式展現(xiàn)于產(chǎn)品/模型交互相關(guān)的背景故事。
• 試玩式引導(dǎo)。直接以某個(gè)模型舉例，引導(dǎo)用戶一步步進(jìn)行交互，獲得該模型的完整交互體驗(yàn)。

引導(dǎo)頁有明確內(nèi)容，根據(jù)設(shè)計(jì)需求可以考慮從產(chǎn)品介紹、展示輔助信息、在體驗(yàn)時(shí)的建議或要求等。每種設(shè)計(jì)內(nèi)容有各自的適用場景、設(shè)計(jì)形式及優(yōu)缺點(diǎn)，將結(jié)合具體的案例進(jìn)行說明。

加載頁定義及設(shè)計(jì)形式

加載頁需要用戶等待，加載時(shí)長根據(jù)加載內(nèi)容的大小而變化。過程可能包含素材下載、模型加載、材質(zhì)渲染、界面UI等。設(shè)計(jì)手段：文字、視覺、動(dòng)效、音樂、音效。具體運(yùn)用根據(jù)實(shí)際設(shè)計(jì)需求而定?？梢詤⒖家韵挛宸N設(shè)計(jì)形式：

• 進(jìn)度條式。常見的是浮層樣式。感知最弱，通常設(shè)計(jì)樣式跟隨移動(dòng)應(yīng)用的框架樣式。
• 文案式。通過文案傳達(dá)加載過程中的信息，讓用戶知道進(jìn)行到哪個(gè)步驟了，后臺(tái)正在做什么。但需要注意進(jìn)程描述的文案不超過3條，且語言需要簡單好理解，避免使用技術(shù)性語言迷惑用戶。
• 轉(zhuǎn)場式。完整的轉(zhuǎn)場頁設(shè)計(jì)，視覺需要符合產(chǎn)品的整體調(diào)性，以保證整體的和諧統(tǒng)一。游戲中最常見。
• 下載式。下載式的加載可取消加載，因?yàn)槟Ｐ洼^大，需要較長時(shí)間進(jìn)行下載體驗(yàn)。并且通常用戶只對(duì)單一模型感興趣，沒有連續(xù)體驗(yàn)多個(gè)模型的需求。必須下載成功，才能進(jìn)入后續(xù)的AR體驗(yàn)。
• 靜默式。將模型下載過程并入引導(dǎo)頁，使用戶無感知。該方法適合情節(jié)連貫的AR體驗(yàn)。

建議使用Jigspace、Lego AR、AliceARQuest等AR應(yīng)用進(jìn)行體驗(yàn)。

2. 初始啟動(dòng)設(shè)計(jì)原則及建議

整個(gè)初始啟動(dòng)環(huán)節(jié)包含啟動(dòng)頁、引導(dǎo)頁和加載頁，整體的設(shè)計(jì)原則可總結(jié)為：

初始啟動(dòng)設(shè)計(jì)第一步是根據(jù)應(yīng)用類型選擇設(shè)計(jì)內(nèi)容和形式

不管是啟動(dòng)頁還是引導(dǎo)頁的設(shè)計(jì)，都需要根據(jù)應(yīng)用的類型去決定以何種形式給用戶展現(xiàn)必要的信息。例如：游戲類注重用戶的沉浸感，引導(dǎo)以故事介紹+體驗(yàn)建議為主。科普類的需要通過界面+三維的形式展示更多信息給用戶，引導(dǎo)以產(chǎn)品介紹和信息補(bǔ)充為主。

啟動(dòng)頁設(shè)計(jì)目標(biāo)導(dǎo)向，不拖沓不無聊

根據(jù)APP類別選擇恰當(dāng)?shù)男问?，盡量簡單直接，盡快進(jìn)入后續(xù)內(nèi)容頁。游戲類可形式豐富，時(shí)長稍長。

引導(dǎo)頁設(shè)計(jì)簡單直接，使用多維度設(shè)計(jì)手段增加引導(dǎo)信息的豐富度

不管引導(dǎo)的內(nèi)容是產(chǎn)品介紹，還是試玩引導(dǎo)，簡單直接始終是目標(biāo)，不在引導(dǎo)的部分占用用戶過長的時(shí)間。另外也不能為了節(jié)約時(shí)間而使必要信息缺失，因此可以選擇豐富的設(shè)計(jì)手段，讓必要信息充分暴露。

加載頁設(shè)計(jì)優(yōu)先考慮無感知加載，否則根據(jù)加載時(shí)長使用不同形式

如無法無感知，則根據(jù)加載時(shí)長選擇加載的設(shè)計(jì)形式。例如：時(shí)長較短的加載過程需要簡單明快，不打擾用戶。時(shí)長較長的加載過程需要過程明晰，給用戶明確的預(yù)期。盡可能避免阻斷式的加載過程。通過設(shè)計(jì)方法增加長時(shí)間等待的愉悅感，減少不耐煩。

場景搭建的節(jié)點(diǎn)分析和設(shè)計(jì)建議

1. 場景搭建環(huán)節(jié)的作用

AR應(yīng)用啟動(dòng)后，經(jīng)歷完內(nèi)容引導(dǎo)加載的過程，便正式進(jìn)入了AR場景搭建環(huán)節(jié)。從技術(shù)的角度來說，想讓模型穩(wěn)定地融合于真實(shí)世界，我們首先需要讓手機(jī)攝像頭認(rèn)識(shí)周圍的環(huán)境，即為場景搭建的第一環(huán)節(jié)：環(huán)境的感知識(shí)別（環(huán)境識(shí)別包括平面識(shí)別、圖片識(shí)別、物體識(shí)別等，本文聚焦在環(huán)境中的平面識(shí)別）。確定平面之后才能繼續(xù)進(jìn)行模型放置，直至用戶成功把模型在真實(shí)環(huán)境中放下。

2. 平面識(shí)別的作用及完整節(jié)點(diǎn)

平面識(shí)別指通過對(duì)環(huán)境特征的感知，確定一個(gè)基于真實(shí)環(huán)境的平面。確定放置平面后，即可構(gòu)建虛擬世界的坐標(biāo)系，在虛擬世界中放置模型。平面識(shí)別是放置類AR體驗(yàn)的第一步，是后續(xù)所有體驗(yàn)內(nèi)容存在的基石。因此在設(shè)計(jì)中我們需要保證平面識(shí)別的成功率，保證用戶的順暢體驗(yàn)。

這個(gè)環(huán)節(jié)本質(zhì)上是個(gè)技術(shù)驅(qū)動(dòng)的環(huán)節(jié)。程序啟動(dòng)后，系統(tǒng)以手機(jī)攝像頭為原點(diǎn)建立了3D世界坐標(biāo)系。相機(jī)界面打開后，系統(tǒng)開始識(shí)別拍攝到的真實(shí)環(huán)境。通過檢測所捕獲的圖像之間的視覺差異點(diǎn)（即特征點(diǎn)），系統(tǒng)可以確立一個(gè)平面，并在世界坐標(biāo)系中賦予平面一個(gè)位置信息，自此3D世界坐標(biāo)系與真實(shí)環(huán)境中的平面建立了聯(lián)系。找到平面后，系統(tǒng)仍會(huì)持續(xù)進(jìn)行檢測、更新平面的信息。

平面識(shí)別的成功需要用戶將手機(jī)攝像頭對(duì)準(zhǔn)平面并移動(dòng)手機(jī)，從而獲得更多平面的特征點(diǎn)、確定平面。因此在設(shè)計(jì)中，首先需要引導(dǎo)用戶做此動(dòng)作配合；同時(shí)在用戶動(dòng)作中，應(yīng)對(duì)識(shí)別狀態(tài)給予實(shí)時(shí)反饋，讓用戶有把控感；識(shí)別失敗時(shí)，有效的容錯(cuò)設(shè)計(jì)可以減少用戶挫敗感，提升識(shí)別成功率。設(shè)計(jì)節(jié)點(diǎn)可總結(jié)為以下幾點(diǎn)：

動(dòng)作引導(dǎo)定義及設(shè)計(jì)形式

動(dòng)作引導(dǎo)需要引導(dǎo)用戶做出配合的動(dòng)作從而成功識(shí)別到平面。主要的引導(dǎo)內(nèi)容是：引導(dǎo)用戶將手機(jī)朝向一個(gè)平面任意方向移動(dòng)，從而識(shí)別到平面。

表現(xiàn)用戶動(dòng)作的引導(dǎo)形式有多種，如：文字、圖片、動(dòng)圖、語音以及這些方式的組合方案等等。每種單提示形式都有其各自的優(yōu)缺點(diǎn)。如文字可準(zhǔn)確傳達(dá)信息但閱讀時(shí)間較長；動(dòng)圖傳達(dá)直觀，但準(zhǔn)確性不夠等。因此建議使用組合方案的形式進(jìn)行動(dòng)作提示，結(jié)合單提示形式的優(yōu)點(diǎn)，同時(shí)規(guī)避其缺點(diǎn)?？梢詤⒖家韵?種：

• 動(dòng)圖類組合引導(dǎo)。用動(dòng)圖直觀展示用戶需要配合做的動(dòng)作，同時(shí)輔以文字說明，清晰直觀。
• 語音類組合引導(dǎo)。視覺+聽覺雙通道提示，使信息更有效傳達(dá)。

動(dòng)作引導(dǎo)建議使用組合方案來進(jìn)行提示，可以根據(jù)產(chǎn)品類型和場景選擇合適的方案。結(jié)合具體案例以說明：

平面識(shí)別中的定義及設(shè)計(jì)形式

程序識(shí)別平面的過程中，所花費(fèi)時(shí)間往往受用戶所處環(huán)境的影響，環(huán)境較復(fù)雜時(shí)，識(shí)別時(shí)間可能較長。因此建議在平面識(shí)別的過程中，反饋?zhàn)R別的狀態(tài)，幫助用戶了解系統(tǒng)的行為，知道自己所處的狀態(tài)。狀態(tài)反饋有兩種建議的方式：

• 動(dòng)效過渡。用特征點(diǎn)閃動(dòng)、平面延展等動(dòng)效形式表示平面正在識(shí)別中的狀態(tài)。
• 可視化識(shí)別進(jìn)度。通過量化平面識(shí)別進(jìn)度來表示狀態(tài)，讓用戶清晰了解自己所處的狀態(tài)階段。

平面識(shí)別中的狀態(tài)反饋可以讓用戶了解系統(tǒng)行為，明晰所屬狀態(tài)。該步驟通常會(huì)和下一步合并設(shè)計(jì)。結(jié)合案例進(jìn)行說明：

平面識(shí)別成功的定義及設(shè)計(jì)形式

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

• 平面可視化。通過UI層直接可視化出識(shí)別到的平面，如使用網(wǎng)格等UI形式。
• 模型放置位置的可視化。通過模型放置位置的UI側(cè)面可視化識(shí)別到的平面局部，與下一步自然銜接。

平面識(shí)別成功的反饋是平面識(shí)別環(huán)節(jié)完成的節(jié)點(diǎn)，該步驟可能與之后的模型放置結(jié)合設(shè)計(jì)。結(jié)合案例進(jìn)行說明。

平面識(shí)別異常的原因及設(shè)計(jì)

前文提到平面識(shí)別主要依賴對(duì)環(huán)境特征的檢測，在一些情況下會(huì)很難識(shí)別到平面。當(dāng)出現(xiàn)異常時(shí)，如何引導(dǎo)用戶解決異常也是體驗(yàn)設(shè)計(jì)的重要內(nèi)容之一。經(jīng)過前期技術(shù)調(diào)研，平面識(shí)別異常的情況主要有以下幾種：

• 光線過暗，沒有足夠的光。
• 光線過曝，光太強(qiáng)造成畫面過曝。
• 缺少紋理，掃描紋理很少的平面很難成功，例如掃描純白的墻是無法成功識(shí)別平面的。
• 圖像模糊 ，如果用戶快速移動(dòng)手機(jī)，就會(huì)造成拍攝圖像模糊，導(dǎo)致無法識(shí)別或識(shí)別不準(zhǔn)確。

我們可以對(duì)每種異常進(jìn)行具體的提示，也可以給出綜合提示。這里建議的異常提示策略主要有兩種：

• 針對(duì)性提示。在用戶長時(shí)間檢測不到平面時(shí)，根據(jù)當(dāng)前具體的異常情況給出針對(duì)性提示。如檢測到光線太暗，就提示用戶去光線充足的地方體驗(yàn)。
• 總結(jié)式提示。若無法獲得具體的異常情況，可總結(jié)、合并4個(gè)原因的解決方法進(jìn)行提示。

進(jìn)行提示內(nèi)容話術(shù)設(shè)計(jì)時(shí)需注意：

• 提示話術(shù)不能太技術(shù)，需要用戶可理解；
• 提示內(nèi)容需保證用戶可操作。

另外異常提示的設(shè)計(jì)形式也有多種：文字、圖片、動(dòng)圖、語音、組合方案等等。在設(shè)計(jì)時(shí)需要結(jié)合「動(dòng)作引導(dǎo)」的設(shè)計(jì)形式進(jìn)行整體提示的組合方案設(shè)計(jì)。例如動(dòng)作引導(dǎo)是文字+動(dòng)圖的形式，異常提示就不應(yīng)該出現(xiàn)語音形式；動(dòng)作引導(dǎo)是文字+語音形式，異常提示同樣使用語音的形式更一致。

平面識(shí)別的設(shè)計(jì)原則及建議

平面識(shí)別的設(shè)計(jì)原則及建議：

• 動(dòng)作引導(dǎo)需要自然、直觀、易學(xué)。減少用戶認(rèn)知成本。
• 識(shí)別狀態(tài)實(shí)時(shí)反饋，形式可以是視覺、聲音甚至震動(dòng)。給用戶可控感、掌控感。
• 需要有容錯(cuò)設(shè)計(jì)。避免用戶因識(shí)別失敗帶來的挫敗感。
• 設(shè)計(jì)形式的一致性。動(dòng)作引導(dǎo)與異常提示的設(shè)計(jì)形式需配套，保證設(shè)計(jì)的一致性。

模型放置的定義及作用

確定了放置平面后，下一步就是放置模型。模型放置指：通過一定的放置方式，讓模型出現(xiàn)在平面的某個(gè)位置上。

在模型放置模塊中，我們需要定義和設(shè)計(jì)放置方式以及放置位置。放置方式可以是自動(dòng)放置，也可以是手動(dòng)放置。放置位置可以是給用戶體驗(yàn)效果最好的一個(gè)坐標(biāo)點(diǎn)，即最佳放置位置；也可以是一片區(qū)域的任意一個(gè)坐標(biāo)點(diǎn)，即可放置區(qū)域。

1. 放置方式的定義及設(shè)計(jì)形式

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

• 識(shí)別到平面后系統(tǒng)自動(dòng)放置模型；
• 經(jīng)用戶操作手動(dòng)放置模型，可以是點(diǎn)擊屏幕觸發(fā)模型放置或拖拽模型進(jìn)行放置。

可以參考以下三種設(shè)計(jì)形式：

• 自動(dòng)放置。檢測到平面后，模型自動(dòng)出現(xiàn)在場景中，用戶無需做任何操作。此方式適合用戶不需走動(dòng)的AR場景，對(duì)模型的位置要求不高。
• 點(diǎn)擊手動(dòng)放置。檢測到平面后，用戶需要點(diǎn)擊屏幕觸發(fā)模型放置。此方式適合場景互動(dòng)類應(yīng)用，需要用戶在環(huán)境中走動(dòng)，對(duì)模型位置有一定要求。
• 拖拽手動(dòng)放置。檢測到平面后，將模型從屏幕的模型庫中拖拽到平面上。

模型的放置方式主要有自動(dòng)放置與手動(dòng)放置，可根據(jù)不同場景設(shè)定適宜的放置方式，以下結(jié)合案例具體說明。

2. 放置位置的設(shè)計(jì)內(nèi)容及建議

放置模型時(shí)，模型即將放置的位置需要根據(jù)具體互動(dòng)場景進(jìn)行設(shè)計(jì)，以保證用戶的視覺體驗(yàn)和互動(dòng)體驗(yàn)。如果模型放置過近，用戶無法看到模型全貌；過遠(yuǎn)，需要用戶走動(dòng)才能進(jìn)行互動(dòng)的應(yīng)用會(huì)增加互動(dòng)難度?？梢詤⒖家韵聝煞N設(shè)計(jì)內(nèi)容：

• 最佳位置。自動(dòng)放置場景和部分點(diǎn)擊觸發(fā)放置場景下，建議給模型設(shè)置一個(gè)默認(rèn)最佳位置（具體的坐標(biāo)點(diǎn)）。
• 可放置區(qū)域。拖拽放置場景下，建議給模型設(shè)置一個(gè)可放置區(qū)域。

在做具體的放置位置設(shè)計(jì)時(shí)，需要考慮以下幾方面的因素：

• 模型完整呈現(xiàn)。需保證模型初次出現(xiàn)時(shí)在屏幕中顯示完整且以最佳視角出現(xiàn)。
• 互動(dòng)距離適宜。例如在AR任意門體驗(yàn)中，需要保證用戶走兩三步就能進(jìn)入虛擬場景。自由放置的模型可以設(shè)置最近以及最遠(yuǎn)的互動(dòng)界線，以免模型過大或過小造成交互困難。
• 場景元素布局符合邏輯。需考慮模型與場景內(nèi)其它元素的關(guān)系，設(shè)計(jì)合乎邏輯的位置。例如食物出現(xiàn)在場景中的盤子里等。

  藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。