2019-3-29 資深UI設(shè)計(jì)者
AR的場(chǎng)景多種多樣,其中在手機(jī)設(shè)備的AR體驗(yàn)中,有一種基本且常見(jiàn)的場(chǎng)景:通過(guò)手機(jī)攝像頭,用戶在環(huán)境中放置虛擬物體(模型),用戶與它有一些具體的互動(dòng)操作,如移動(dòng)、旋轉(zhuǎn)等。
我們將這類(lèi)場(chǎng)景統(tǒng)一稱(chēng)為放置類(lèi)AR場(chǎng)景:放置對(duì)象可以是一扇虛擬場(chǎng)景的任意門(mén),用戶可走入門(mén)中互動(dòng);也可以是一件家居商品,用戶可預(yù)覽商品是否與室內(nèi)環(huán)境搭配等。針對(duì)不同的放置對(duì)象和場(chǎng)景,設(shè)計(jì)側(cè)重點(diǎn)也會(huì)有所不同。
基于真實(shí)環(huán)境放置虛擬模型,并與模型進(jìn)行交互的AR場(chǎng)景。
無(wú)論放置的對(duì)象類(lèi)型如何,用戶打開(kāi)相機(jī),在屏幕中放下具體模型和進(jìn)行互動(dòng)的過(guò)程具有共性。我們把中間的完整流程拆分為了以下部分:
用戶打開(kāi)放置類(lèi)AR功能后,進(jìn)入環(huán)境識(shí)別前的過(guò)程,均屬于初始啟動(dòng)的范圍。放置類(lèi)AR為何需要有初始啟動(dòng)環(huán)節(jié),用戶不直接進(jìn)入AR場(chǎng)景進(jìn)行體驗(yàn)?
由于技術(shù)和產(chǎn)品的需要,放置類(lèi)AR初始啟動(dòng)承載幫助用戶理解、AR素材準(zhǔn)備,為用戶帶來(lái)更優(yōu)的AR體驗(yàn)。
初始啟動(dòng)的流程中,包括啟動(dòng)頁(yè)、引導(dǎo)頁(yè)、加載頁(yè)三個(gè)部分節(jié)點(diǎn),三個(gè)節(jié)點(diǎn)可同時(shí)存在,也可只存在一個(gè)或兩個(gè)節(jié)點(diǎn),具體需要根據(jù)設(shè)計(jì)需求來(lái)決定。
啟動(dòng)頁(yè)的定義及設(shè)計(jì)形式
在啟動(dòng)頁(yè)游戲AR應(yīng)用中比較常見(jiàn),只有短暫停留。頁(yè)面起到品牌露出的作用,或在啟動(dòng)APP后渲染氛圍,迅速將用戶帶入。設(shè)計(jì)手段包含:音樂(lè)、音效、視覺(jué)、文字、動(dòng)效,具體運(yùn)用根據(jù)實(shí)際設(shè)計(jì)需求而定??梢詤⒖家韵聝煞N設(shè)計(jì)內(nèi)容:
啟動(dòng)頁(yè)雖然不傳遞明確的含義和信息,但不同的設(shè)計(jì)手段可以給用戶傳遞出不同的品牌調(diào)性和場(chǎng)景氛圍感,其中音效和動(dòng)效形式的應(yīng)用會(huì)增加啟動(dòng)頁(yè)設(shè)計(jì)的吸引力,下面將結(jié)合案例具體說(shuō)明。
引導(dǎo)頁(yè)的定義及設(shè)計(jì)形式
引導(dǎo)頁(yè)促進(jìn)用戶進(jìn)入后續(xù)的核心體驗(yàn)流程,傳達(dá)有關(guān)體驗(yàn)的明確內(nèi)容,根據(jù) APP 的類(lèi)型,引導(dǎo)內(nèi)容有所不同。但不涉及后續(xù)具體細(xì)節(jié)操作。常見(jiàn)的引導(dǎo)包含:內(nèi)容介紹、安全警告、體驗(yàn)建議、環(huán)境要求、玩法介紹、新手引導(dǎo)等。設(shè)計(jì)手段包含:語(yǔ)音、音樂(lè)、音效、視覺(jué)、文字、動(dòng)效。具體運(yùn)用根據(jù)實(shí)際設(shè)計(jì)需求而定。可以參考以下五種設(shè)計(jì)內(nèi)容:
引導(dǎo)頁(yè)有明確內(nèi)容,根據(jù)設(shè)計(jì)需求可以考慮從產(chǎn)品介紹、展示輔助信息、在體驗(yàn)時(shí)的建議或要求等。每種設(shè)計(jì)內(nèi)容有各自的適用場(chǎng)景、設(shè)計(jì)形式及優(yōu)缺點(diǎn),將結(jié)合具體的案例進(jìn)行說(shuō)明。
加載頁(yè)定義及設(shè)計(jì)形式
加載頁(yè)需要用戶等待,加載時(shí)長(zhǎng)根據(jù)加載內(nèi)容的大小而變化。過(guò)程可能包含素材下載、模型加載、材質(zhì)渲染、界面UI等。設(shè)計(jì)手段:文字、視覺(jué)、動(dòng)效、音樂(lè)、音效。具體運(yùn)用根據(jù)實(shí)際設(shè)計(jì)需求而定。可以參考以下五種設(shè)計(jì)形式:
建議使用Jigspace、Lego AR、AliceARQuest等AR應(yīng)用進(jìn)行體驗(yàn)。
整個(gè)初始啟動(dòng)環(huán)節(jié)包含啟動(dòng)頁(yè)、引導(dǎo)頁(yè)和加載頁(yè),整體的設(shè)計(jì)原則可總結(jié)為:
初始啟動(dòng)設(shè)計(jì)第一步是根據(jù)應(yīng)用類(lèi)型選擇設(shè)計(jì)內(nèi)容和形式
不管是啟動(dòng)頁(yè)還是引導(dǎo)頁(yè)的設(shè)計(jì),都需要根據(jù)應(yīng)用的類(lèi)型去決定以何種形式給用戶展現(xiàn)必要的信息。例如:游戲類(lèi)注重用戶的沉浸感,引導(dǎo)以故事介紹+體驗(yàn)建議為主??破疹?lèi)的需要通過(guò)界面+三維的形式展示更多信息給用戶,引導(dǎo)以產(chǎn)品介紹和信息補(bǔ)充為主。
啟動(dòng)頁(yè)設(shè)計(jì)目標(biāo)導(dǎo)向,不拖沓不無(wú)聊
根據(jù)APP類(lèi)別選擇恰當(dāng)?shù)男问?,盡量簡(jiǎn)單直接,盡快進(jìn)入后續(xù)內(nèi)容頁(yè)。游戲類(lèi)可形式豐富,時(shí)長(zhǎng)稍長(zhǎng)。
引導(dǎo)頁(yè)設(shè)計(jì)簡(jiǎn)單直接,使用多維度設(shè)計(jì)手段增加引導(dǎo)信息的豐富度
不管引導(dǎo)的內(nèi)容是產(chǎn)品介紹,還是試玩引導(dǎo),簡(jiǎn)單直接始終是目標(biāo),不在引導(dǎo)的部分占用用戶過(guò)長(zhǎng)的時(shí)間。另外也不能為了節(jié)約時(shí)間而使必要信息缺失,因此可以選擇豐富的設(shè)計(jì)手段,讓必要信息充分暴露。
加載頁(yè)設(shè)計(jì)優(yōu)先考慮無(wú)感知加載,否則根據(jù)加載時(shí)長(zhǎng)使用不同形式
如無(wú)法無(wú)感知,則根據(jù)加載時(shí)長(zhǎng)選擇加載的設(shè)計(jì)形式。例如:時(shí)長(zhǎng)較短的加載過(guò)程需要簡(jiǎn)單明快,不打擾用戶。時(shí)長(zhǎng)較長(zhǎng)的加載過(guò)程需要過(guò)程明晰,給用戶明確的預(yù)期。盡可能避免阻斷式的加載過(guò)程。通過(guò)設(shè)計(jì)方法增加長(zhǎng)時(shí)間等待的愉悅感,減少不耐煩。
AR應(yīng)用啟動(dòng)后,經(jīng)歷完內(nèi)容引導(dǎo)加載的過(guò)程,便正式進(jìn)入了AR場(chǎng)景搭建環(huán)節(jié)。從技術(shù)的角度來(lái)說(shuō),想讓模型穩(wěn)定地融合于真實(shí)世界,我們首先需要讓手機(jī)攝像頭認(rèn)識(shí)周?chē)沫h(huán)境,即為場(chǎng)景搭建的第一環(huán)節(jié):環(huán)境的感知識(shí)別(環(huán)境識(shí)別包括平面識(shí)別、圖片識(shí)別、物體識(shí)別等,本文聚焦在環(huán)境中的平面識(shí)別)。確定平面之后才能繼續(xù)進(jìn)行模型放置,直至用戶成功把模型在真實(shí)環(huán)境中放下。
平面識(shí)別指通過(guò)對(duì)環(huán)境特征的感知,確定一個(gè)基于真實(shí)環(huán)境的平面。確定放置平面后,即可構(gòu)建虛擬世界的坐標(biāo)系,在虛擬世界中放置模型。平面識(shí)別是放置類(lèi)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ī)界面打開(kāi)后,系統(tǒng)開(kāi)始識(shí)別拍攝到的真實(shí)環(huán)境。通過(guò)檢測(cè)所捕獲的圖像之間的視覺(jué)差異點(diǎn)(即特征點(diǎn)),系統(tǒng)可以確立一個(gè)平面,并在世界坐標(biāo)系中賦予平面一個(gè)位置信息,自此3D世界坐標(biāo)系與真實(shí)環(huán)境中的平面建立了聯(lián)系。找到平面后,系統(tǒng)仍會(huì)持續(xù)進(jìn)行檢測(cè)、更新平面的信息。
平面識(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ǔ)音以及這些方式的組合方案等等。每種單提示形式都有其各自的優(yōu)缺點(diǎn)。如文字可準(zhǔn)確傳達(dá)信息但閱讀時(shí)間較長(zhǎng);動(dòng)圖傳達(dá)直觀,但準(zhǔn)確性不夠等。因此建議使用組合方案的形式進(jìn)行動(dòng)作提示,結(jié)合單提示形式的優(yōu)點(diǎn),同時(shí)規(guī)避其缺點(diǎn)??梢詤⒖家韵?種:
動(dòng)作引導(dǎo)建議使用組合方案來(lái)進(jìn)行提示,可以根據(jù)產(chǎn)品類(lèi)型和場(chǎng)景選擇合適的方案。結(jié)合具體案例以說(shuō)明:
平面識(shí)別中的定義及設(shè)計(jì)形式
程序識(shí)別平面的過(guò)程中,所花費(fèi)時(shí)間往往受用戶所處環(huán)境的影響,環(huán)境較復(fù)雜時(shí),識(shí)別時(shí)間可能較長(zhǎng)。因此建議在平面識(shí)別的過(guò)程中,反饋?zhàn)R別的狀態(tài),幫助用戶了解系統(tǒng)的行為,知道自己所處的狀態(tài)。狀態(tài)反饋有兩種建議的方式:
平面識(shí)別中的狀態(tài)反饋可以讓用戶了解系統(tǒng)行為,明晰所屬狀態(tài)。該步驟通常會(huì)和下一步合并設(shè)計(jì)。結(jié)合案例進(jìn)行說(shuō)明:
平面識(shí)別成功的定義及設(shè)計(jì)形式
平面識(shí)別成功后,建議可視化檢測(cè)到的平面,給用戶成功的反饋,同時(shí)讓用戶知道即將放置模型的平面在哪里。
平面識(shí)別成功的反饋是平面識(shí)別環(huán)節(jié)完成的節(jié)點(diǎn),該步驟可能與之后的模型放置結(jié)合設(shè)計(jì)。結(jié)合案例進(jìn)行說(shuō)明。
平面識(shí)別異常的原因及設(shè)計(jì)
前文提到平面識(shí)別主要依賴(lài)對(duì)環(huán)境特征的檢測(cè),在一些情況下會(huì)很難識(shí)別到平面。當(dāng)出現(xiàn)異常時(shí),如何引導(dǎo)用戶解決異常也是體驗(yàn)設(shè)計(jì)的重要內(nèi)容之一。經(jīng)過(guò)前期技術(shù)調(diào)研,平面識(shí)別異常的情況主要有以下幾種:
我們可以對(duì)每種異常進(jìn)行具體的提示,也可以給出綜合提示。這里建議的異常提示策略主要有兩種:
進(jìn)行提示內(nèi)容話術(shù)設(shè)計(jì)時(shí)需注意:
另外異常提示的設(shè)計(jì)形式也有多種:文字、圖片、動(dòng)圖、語(yǔ)音、組合方案等等。在設(shè)計(jì)時(shí)需要結(jié)合「動(dòng)作引導(dǎo)」的設(shè)計(jì)形式進(jìn)行整體提示的組合方案設(shè)計(jì)。例如動(dòng)作引導(dǎo)是文字+動(dòng)圖的形式,異常提示就不應(yīng)該出現(xiàn)語(yǔ)音形式;動(dòng)作引導(dǎo)是文字+語(yǔ)音形式,異常提示同樣使用語(yǔ)音的形式更一致。
平面識(shí)別的設(shè)計(jì)原則及建議
平面識(shí)別的設(shè)計(jì)原則及建議:
確定了放置平面后,下一步就是放置模型。模型放置指:通過(guò)一定的放置方式,讓模型出現(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ì)形式
模型的放置方式主要有兩大類(lèi):
可以參考以下三種設(shè)計(jì)形式:
模型的放置方式主要有自動(dòng)放置與手動(dòng)放置,可根據(jù)不同場(chǎng)景設(shè)定適宜的放置方式,以下結(jié)合案例具體說(shuō)明。
2. 放置位置的設(shè)計(jì)內(nèi)容及建議
放置模型時(shí),模型即將放置的位置需要根據(jù)具體互動(dòng)場(chǎng)景進(jìn)行設(shè)計(jì),以保證用戶的視覺(jué)體驗(yàn)和互動(dòng)體驗(yàn)。如果模型放置過(guò)近,用戶無(wú)法看到模型全貌;過(guò)遠(yuǎn),需要用戶走動(dòng)才能進(jìn)行互動(dòng)的應(yīng)用會(huì)增加互動(dòng)難度。可以參考以下兩種設(shè)計(jì)內(nèi)容:
在做具體的放置位置設(shè)計(jì)時(shí),需要考慮以下幾方面的因素:
藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com