放置類AR:體驗框架和設(shè)計建議 (上篇)
本文分為兩個部分:放置類AR的交互體驗框架,以及,初始啟動的節(jié)點分析和設(shè)計建議。筆者期以通過對放置類AR的研究,深挖和拆分用戶使用節(jié)點,幫助設(shè)計師和開發(fā)者思考:如何幫助用戶順利體驗AR的神奇和便利?
在經(jīng)歷了2016年P(guān)okemango的爆紅之后,AR在近幾年越來越多出現(xiàn)在人們的視線中。AR的體驗,新奇好玩令人激動,仿佛我們正越來越接近未來。技術(shù)和設(shè)備的發(fā)展,也使得市面上的AR應(yīng)用井噴式爆發(fā)。
但冷靜下來觀察和思考:不可否認(rèn)的是新事物的出現(xiàn)總具有兩面性,大多數(shù)AR的體驗還是個襁褓中的孩子。不少用戶都曾有過困惑或迷失的時刻,全新的AR場景對他們而言,一切交互都顯得陌生而沒有經(jīng)驗參考。失敗的體驗讓用戶挫敗,這本不是AR的初衷。
這正是我們決定研究AR放置類體驗的原因:期望通過用戶使用節(jié)點的拆分和深挖,結(jié)合技術(shù)特點,幫助設(shè)計師和開發(fā)者思考:如何設(shè)計?如何更好的幫助用戶順利體驗AR的神奇和便利?
以下,讓我們進入正題。
什么是放置類AR的交互框架?
在說明放置類AR框架的概念前,有必要先大體的了解AR的技術(shù)概念及特點,幫助后續(xù)理解設(shè)計的思考要點。
1. 有關(guān)AR的概念及特點
AR增強現(xiàn)實(Augmented Reality)是一種疊加虛擬信息到現(xiàn)實世界,并可實時與之互動的體驗。
通過AR,實時計算攝影機影像的空間位置、角度,疊加相應(yīng)的圖像、視頻、三維模型等,有時甚至是包含多感官通道的信息,例如視覺、聲音、震動、體感、嗅覺等。
AR的特點包括:
- 不隔離真實世界,而是將計算機生成的信息和物體疊加到現(xiàn)實場景中。
- 借助AR設(shè)備,用戶可以更自然地與增強現(xiàn)實環(huán)境進行交互,這類交互滿足實時性,例如手勢、語音。
- 計算機生成的物體與真實環(huán)境無縫對接,并且用戶在真實環(huán)境中運動時,也將繼續(xù)維持正確的位置關(guān)系。
2. 放置類AR的場景及類型
AR的場景多種多樣,其中在手機設(shè)備的AR體驗中,有一種基本且常見的場景:通過手機攝像頭,用戶在環(huán)境中放置虛擬物體(模型),用戶與它有一些具體的互動操作,如移動、旋轉(zhuǎn)等。
我們將這類場景統(tǒng)一稱為放置類AR場景——基于真實環(huán)境放置虛擬模型,并與模型進行交互的AR場景。
放置對象可以是一扇虛擬場景的任意門,用戶可走入門中互動,也可以是一件家居商品,用戶可預(yù)覽商品是否與室內(nèi)環(huán)境搭配等。
針對不同的放置對象和場景,設(shè)計側(cè)重點也會有所不同。
3. 放置類AR的交互框架及節(jié)點
無論放置的對象類型如何,用戶打開相機,在屏幕中放下具體模型和進行互動的過程具有共性。
我們把中間的完整流程拆分為了以下部分:
初始啟動的節(jié)點分析和設(shè)計建議
1. 初始啟動環(huán)節(jié)的作用
用戶打開放置類AR功能后,進入環(huán)境識別前的過程,均屬于初始啟動的范圍。放置類AR為何需要有初始啟動環(huán)節(jié),用戶不直接進入AR場景進行體驗?
由于技術(shù)和產(chǎn)品的需要,放置類AR初始啟動承載幫助用戶理解、AR素材準(zhǔn)備,為用戶帶來更優(yōu)的AR體驗。
初始啟動的流程中,包括啟動頁、引導(dǎo)頁、加載頁三個部分節(jié)點,三個節(jié)點可同時存在,也可只存在一個或兩個節(jié)點,具體需要根據(jù)設(shè)計需求來決定。
1.1 啟動頁的定義及設(shè)計形式
啟動頁游戲AR應(yīng)用中在比較常見,只有短暫停留。頁面起到品牌露出的作用,或在啟動APP后渲染氛圍,迅速將用戶帶入。
設(shè)計手段包含:音樂、音效、視覺、文字、動效,具體運用根據(jù)實際設(shè)計需求而定。可以參考以下兩種設(shè)計內(nèi)容:
品牌露出:圍繞logo進行設(shè)計,給用戶強化品牌的印象。
氛圍烘托:圍繞主場景/故事設(shè)計海報式的視覺設(shè)計,讓用戶對之后的AR應(yīng)用的情節(jié)/人物/模型有初步印象。
啟動頁雖然不傳遞明確的含義和信息,但不同設(shè)計手段可以給用戶傳遞出不同的品牌調(diào)性和場景氛圍感,其中音效和動效形式的應(yīng)用會增加啟動頁設(shè)計的吸引用戶的效果,將結(jié)合案例具體說明。
1.2 引導(dǎo)頁的定義及設(shè)計形式
引導(dǎo)頁促進用戶進入后續(xù)的核心體驗流程,傳達有關(guān)體驗的明確內(nèi)容。根據(jù)APP的類型,引導(dǎo)內(nèi)容有所不同,但不涉及后續(xù)具體細節(jié)操作。
常見的引導(dǎo)包含:內(nèi)容介紹、安全警告、體驗建議、環(huán)境要求、玩法介紹、新手引導(dǎo)等。
設(shè)計手段包含:語音、音樂、音效、視覺、文字、動效。具體運用根據(jù)實際設(shè)計需求而定。
可以參考以下五種設(shè)計內(nèi)容:
- 產(chǎn)品介紹式引導(dǎo):簡明扼要的介紹AR應(yīng)用的主要作用。
- 輔助信息式引導(dǎo):模型的補充理解信息,引導(dǎo)用戶了解模型背景知識等。
- 體驗建議/要求式引導(dǎo):簡明扼要地表達會直接影響AR應(yīng)用體驗沉浸感的建議或者要求,以引導(dǎo)用戶照做,獲得后續(xù)最佳體驗。
- 背景故事式引導(dǎo):通常以豐富的可視化形式展現(xiàn)于產(chǎn)品/模型交互相關(guān)的背景故事。
- 試玩式引導(dǎo):直接以某個模型舉例,引導(dǎo)用戶一步步進行交互,獲得該模型的完整交互體驗。
引導(dǎo)頁有明確內(nèi)容,根據(jù)設(shè)計需求可以考慮從產(chǎn)品介紹、展示輔助信息、在體驗時的建議或要求等。每種設(shè)計內(nèi)容有各自的適用場景、設(shè)計形式及優(yōu)缺點,將結(jié)合具體的案例進行說明。
1.3 加載頁定義及設(shè)計形式
加載頁需要用戶等待,加載時長根據(jù)加載內(nèi)容的大小而變化。
過程可能包含素材下載、模型加載、材質(zhì)渲染、界面UI等。
設(shè)計手段:文字、視覺、動效、音樂、音效。具體運用根據(jù)實際設(shè)計需求而定。
可以參考以下五種設(shè)計形式:
- 進度條式:常見的是浮層樣式。感知最弱,通常設(shè)計樣式跟隨移動應(yīng)用的框架樣式。
- 文案式:通過文案傳達加載過程中的信息,讓用戶知道進行到哪個步驟了,后臺正在做什么。但需要注意進程描述的文案不超過3條,且語言需要簡單好理解,避免使用技術(shù)性語言迷惑用戶。
- 轉(zhuǎn)場式:完整的轉(zhuǎn)場頁設(shè)計,視覺需要符合產(chǎn)品的整體調(diào)性,以保證整體的和諧統(tǒng)一。游戲中最常見。
- 下載式:下載式的加載可取消加載,因為模型較大,需要較長時間進行下載體驗。并且通常用戶只對單一模型感興趣,沒有連續(xù)體驗多個模型的需求。必須下載成功,才能進入后續(xù)的AR體驗。
- 靜默式:將模型下載過程并入引導(dǎo)頁,使用戶無感知。該方法適合情節(jié)連貫的AR體驗。
建議使用Jigspace、Lego AR、AliceARQuest等AR應(yīng)用進行體驗。
2. 初始啟動設(shè)計原則及建議
整個初始啟動環(huán)節(jié)包含啟動頁、引導(dǎo)頁和加載頁,整體的設(shè)計原則可總結(jié)為:
2.1 初始啟動設(shè)計第一步是根據(jù)應(yīng)用類型選擇設(shè)計內(nèi)容和形式。
不管是啟動頁還是引導(dǎo)頁的設(shè)計,都需要根據(jù)應(yīng)用的類型去決定以何種形式給用戶展現(xiàn)必要的信息。
例如:游戲類注重用戶的沉浸感,引導(dǎo)以故事介紹+體驗建議為主??破疹惖男枰ㄟ^界面+三維的形式展示更多信息給用戶,引導(dǎo)以產(chǎn)品介紹和信息補充為主。
2.2 啟動頁設(shè)計目標(biāo)導(dǎo)向,不拖沓不無聊。
根據(jù)APP類別選擇恰當(dāng)?shù)男问?,盡量簡單直接,盡快進入后續(xù)內(nèi)容頁。游戲類可形式豐富時長稍長。
2.3 引導(dǎo)頁設(shè)計簡單直接,使用多維度設(shè)計手段增加引導(dǎo)信息的豐富度。
不管引導(dǎo)的內(nèi)容是產(chǎn)品介紹,還是試玩引導(dǎo),簡單直接始終是目標(biāo),不在引導(dǎo)的部分占用用戶過長的時間。另外,也不因為為了節(jié)約時間而使必要信息缺失,因此可以選擇豐富的設(shè)計手段,讓必要信息充分暴露。
2.4 加載頁設(shè)計優(yōu)先考慮無感知加載,否則根據(jù)加載時長使用不同形式。
如無法無感知,則根據(jù)加載時長選擇加載的設(shè)計形式。
例如:時長較短的加載過程需要簡單明快,不打擾用戶。時長較長的加載過程需要過程明晰,給用戶明確的預(yù)期。盡可能避免阻斷式的加載過程。通過設(shè)計方法增加長時間等待的愉悅感,減少不耐煩。
場景搭建的節(jié)點分析和設(shè)計建議
1. 場景搭建環(huán)節(jié)的作用
AR應(yīng)用啟動后,經(jīng)歷完內(nèi)容引導(dǎo)加載的過程,便正式進入了AR場景搭建環(huán)節(jié)。
從技術(shù)的角度來說:想讓模型穩(wěn)定的融合于真實世界,我們需要首先讓手機攝像頭認(rèn)識周圍的環(huán)境,即為場景搭建的第一環(huán)節(jié)——環(huán)境的感知識別(環(huán)境識別包括:平面識別、圖片識別、物體識別等,本文聚焦在環(huán)境中的平面識別)。
確定平面之后才能繼續(xù)進行模型放置,直至用戶成功把模型在真實環(huán)境中放下。
2. 平面識別的作用及完整節(jié)點
平面識別指:通過對環(huán)境特征的感知,確定一個基于真實環(huán)境的平面。
確定放置平面后,即可構(gòu)建虛擬世界的坐標(biāo)系,在虛擬世界中放置模型。平面識別是放置類AR體驗的第一步,是后續(xù)所有體驗內(nèi)容存在的基石,因此在設(shè)計中我們需要保證平面識別的成功率,保證用戶的順暢體驗。
這個環(huán)節(jié)本質(zhì)上是個技術(shù)驅(qū)動的環(huán)節(jié),程序啟動后,系統(tǒng)以手機攝像頭為原點建立了3D世界坐標(biāo)系。
相機界面打開后,系統(tǒng)開始識別拍攝到的真實環(huán)境。通過檢測所捕獲的圖像之間的視覺差異點(即特征點),系統(tǒng)可以確立一個平面,并在世界坐標(biāo)系中賦予平面一個位置信息。自此3D世界坐標(biāo)系與真實環(huán)境中的平面建立了聯(lián)系。找到平面后,系統(tǒng)仍會持續(xù)進行檢測、更新平面的信息。
平面識別的成功需要用戶將手機攝像頭對準(zhǔn)平面并移動手機,從而獲得更多平面的特征點、確定平面。
因此在設(shè)計中,首先需要引導(dǎo)用戶做此動作配合;同時,在用戶動作中,應(yīng)對識別狀態(tài)給予實時反饋,讓用戶有把控感;識別失敗時,有效的容錯設(shè)計可以減少用戶挫敗感,提升識別成功率。
設(shè)計節(jié)點可總結(jié)為以下幾點:
2.1 動作引導(dǎo)定義及設(shè)計形式
動作引導(dǎo)需要引導(dǎo)用戶做出配合的動作從而成功識別到平面。
主要的引導(dǎo)內(nèi)容是:引導(dǎo)用戶將手機朝向一個平面任意方向移動,從而識別到平面。
表現(xiàn)用戶動作的引導(dǎo)形式有多種,如:文字、圖片、動圖、語音以及這些方式的組合方案等等。
每種單提示形式都有其各自的優(yōu)缺點:如文字可準(zhǔn)確傳達信息但閱讀時間較長;動圖傳達直觀,但準(zhǔn)確性不夠等。因此,建議使用組合方案的形式進行動作提示,結(jié)合單提示形式的優(yōu)點,同時規(guī)避其缺點。
可以參考以下2種:
- 動圖類組合引導(dǎo):用動圖直觀展示用戶需要配合做的動作,同時輔以文字說明,清晰直觀。
- 語音類組合引導(dǎo):視覺+聽覺雙通道提示,使信息更有效傳達。
動作引導(dǎo)建議使用組合方案來進行提示,可以根據(jù)產(chǎn)品類型和場景選擇合適的方案,結(jié)合具體案例以說明:
2.2 平面識別中的定義及設(shè)計形式
程序識別平面的過程中,所花費時間往往受用戶所處環(huán)境的影響,環(huán)境較復(fù)雜時,識別時間可能較長。因此,建議在平面識別的過程中,反饋識別的狀態(tài),幫助用戶了解系統(tǒng)的行為、知道自己所處的狀態(tài)。
狀態(tài)反饋有兩種建議的方式:
- 動效過渡: 用特征點閃動、平面延展等動效形式表示平面正在識別中的狀態(tài)。
- 可視化識別進度:通過量化平面識別進度來表示狀態(tài),讓用戶清晰了解自己所處的狀態(tài)階段。
平面識別中的狀態(tài)反饋可以讓用戶了解系統(tǒng)行為,明晰所屬狀態(tài),該步驟通常會和下一步合并設(shè)計,結(jié)合案例進行說明:
2.3 平面識別成功的定義及設(shè)計形式
平面識別成功后,建議可視化檢測到的平面,給用戶成功的反饋,同時讓用戶知道即將放置模型的平面在哪里。
- 平面可視化:通過UI層直接可視化出識別到的平面,如使用網(wǎng)格等UI形式。
- 模型放置位置的可視化:通過模型放置位置的UI側(cè)面可視化識別到的平面局部,與下一步自然銜接。
平面識別成功的反饋是平面識別環(huán)節(jié)完成的節(jié)點,該步驟可能與之后的模型放置結(jié)合設(shè)計,結(jié)合案例進行說明:
2.4 平面識別異常的原因及設(shè)計
前文提到平面識別主要依賴對環(huán)境特征的檢測,在一些情況下會很難識別到平面。當(dāng)出現(xiàn)異常時,如何引導(dǎo)用戶解決異常也是體驗設(shè)計的重要內(nèi)容之一。
經(jīng)過前期技術(shù)調(diào)研,平面識別異常的情況主要有以下幾種:
- 光線過暗:沒有足夠的光。
- 光線過曝:光太強造成畫面過曝。
- 缺少紋理:掃描紋理很少的平面很難成功,例如掃描純白的墻是無法成功識別平面的。
- 圖像模糊: 如果用戶快速移動手機,就會造成拍攝圖像模糊, 導(dǎo)致無法識別或識別不準(zhǔn)確。
我們可以對每種異常進行具體的提示,也可以給出綜合提示。
這里建議的異常提示策略主要有兩種:
- 針對性提示:在用戶長時間檢測不到平面時,根據(jù)當(dāng)前具體的異常情況給出針對性提示。如檢測到光線太暗,就提示用戶去光線充足的地方體驗。
- 總結(jié)式提示:若無法獲得具體的異常情況,可總結(jié)、合并4個原因的解決方法進行提示。
進行提示內(nèi)容話術(shù)設(shè)計時需注意:
- 提示話術(shù)不能太技術(shù),需要用戶可理解。
- 提示內(nèi)容需保證用戶可操作。
另外異常提示的設(shè)計形式也有多種:文字、圖片、動圖、語音、組合方案等等。
在設(shè)計時,需要結(jié)合“動作引導(dǎo)”的設(shè)計形式進行整體提示的組合方案設(shè)計,例如:動作引導(dǎo)是文字+動圖的形式,異常提示就不應(yīng)該出現(xiàn)語音形式;動作引導(dǎo)是文字+語音形式,異常提示同樣使用語音的形式更有一致性。
2.5 平面識別的設(shè)計原則及建議
- 動作引導(dǎo)需要自然、直觀、易學(xué)。減少用戶認(rèn)知成本。
- 識別狀態(tài)實時反饋,形式可以是視覺、聲音甚至震動。給用戶可控感、掌控感。
- 需要有容錯設(shè)計。避免用戶因識別失敗帶來的挫敗感。
- 設(shè)計形式的一致性。動作引導(dǎo)與異常提示的設(shè)計形式需配套,保證設(shè)計的一致性。
3. 模型放置的定義及作用
確定了放置平面后,下一步就是放置模型。
模型放置指:通過一定的放置方式,讓模型出現(xiàn)在平面的某個位置上。
在模型放置模塊中,我們需要定義和設(shè)計放置方式以及放置位置。放置方式可以是自動放置,也可以是手動放置。
放置位置可以是給用戶體驗效果最好的一個坐標(biāo)點,即最佳放置位置;也可以是一片區(qū)域的任意一個坐標(biāo)點,即可放置區(qū)域。
3.1 放置方式的定義及設(shè)計形式
模型的放置方式主要有兩大類:
- 識別到平面后系統(tǒng)自動放置模型
- 經(jīng)用戶操作手動放置模型,可以是點擊屏幕觸發(fā)模型放置或拖拽模型進行放置。
可以參考以下三種設(shè)計形式:
- 自動放置:檢測到平面后,模型自動出現(xiàn)在場景中,用戶無需做任何操作。此方式適合用戶不需走動的AR場景,對模型的位置要求不高。
- 點擊手動放置:檢測到平面后,用戶需要點擊屏幕觸發(fā)模型放置。此方式適合場景互動類應(yīng)用,需要用戶在環(huán)境中走動,對模型位置有一定要求
- 拖拽手動放置:檢測到平面后,將模型從屏幕的模型庫中拖拽到平面上。
模型的放置方式主要有自動放置與手動放置,可根據(jù)不同場景設(shè)定適宜的放置方式,以下結(jié)合案例具體說明:
3.2 放置位置的設(shè)計內(nèi)容及建議
放置模型時,模型即將放置的位置需要根據(jù)具體互動場景進行設(shè)計,以保證用戶的視覺體驗和互動體驗。如果模型放置過近,用戶無法看到模型全貌;過遠,對需要用戶走動才能進行互動的應(yīng)用會增加互動難度。
可以參考以下兩種設(shè)計內(nèi)容:
- 最佳位置:自動放置場景和部分點擊觸發(fā)放置場景下,建議給模型設(shè)置一個默認(rèn)最佳位置(具體的坐標(biāo)點)
- 可放置區(qū)域:拖拽放置場景下,建議給模型設(shè)置一個可放置區(qū)域。
在做具體的放置位置設(shè)計時,需要考慮以下幾方面的因素:
- 模型完整呈現(xiàn):需保證模型初次出現(xiàn)時在屏幕中顯示完整且以最佳視角出現(xiàn)。
- 互動距離適宜:例如在AR任意門體驗中,需要保證用戶走兩三步就能進入虛擬場景。自由放置的模型可以設(shè)置最近以及最遠的互動界線,以免模型過大或過小造成交互困難。
- 場景元素布局符合邏輯:需考慮模型與場景內(nèi)其它元素的關(guān)系,設(shè)計合乎邏輯的位置。例如食物出現(xiàn)在場景中的盤子里等。
作者:百度人工智能交互設(shè)計院(Baidu AI Interaction Design Lab)
本文由 @百度人工智能交互設(shè)計院 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash, 基于CC0協(xié)議
- 目前還沒評論,等你發(fā)揮!