酷家樂實(shí)戰(zhàn)案例！VR全景工具設(shè)計(jì)改版復(fù)盤

背景

VR 全景為家具行業(yè)零售場景帶來革命性的變化，在交互式展示和營銷體驗(yàn)這兩個(gè)方面帶來了突出的市場機(jī)會(huì)。相比傳統(tǒng)的靜態(tài)效果圖，在談單階段有全景圖工具的介入，帶來了明顯的客戶留店時(shí)長增加、線上傳播獲客提升以及所見即所得簽單率提高等商家營銷價(jià)值。

對設(shè)計(jì)師來說，借助全景圖能夠更好地為自己的客戶展現(xiàn)設(shè)計(jì)方案，襯托方案的品質(zhì)，注解方案的細(xì)節(jié)，讓整個(gè)瀏覽過程的體驗(yàn)感受更加舒適沉浸。

業(yè)務(wù)變化

我們在跟更多商家的密切合作過程中，也承接了越來越多的全景圖工具需求。而在之前的界面框架基礎(chǔ)上進(jìn)行堆積，整個(gè)界面變得臃腫不堪；

商家們希望借助全景圖工具能夠打造更好的營銷體驗(yàn)，增加獲客率和成交率，方案設(shè)計(jì)師們對于如何利用交互式展示的形式，更好地展現(xiàn)方案效果提出了挑戰(zhàn)。

借此契機(jī)，由設(shè)計(jì)側(cè)發(fā)起了此次體驗(yàn)改版項(xiàng)目。

設(shè)計(jì)目標(biāo)

具體分析問題之后發(fā)現(xiàn)，①商家的訴求是能夠通過全景圖充分傳遞設(shè)計(jì)意圖，提高營銷談單的效率；②用戶也就是全景圖的瀏覽者的訴求是能夠快速獲取方案信息，便于決策；③業(yè)務(wù)的訴求是能夠有拓展性更高的框架來承載后續(xù)的新增功能，同時(shí)提高產(chǎn)品的訪問深度。從而推導(dǎo)出了三個(gè)設(shè)計(jì)目標(biāo):

• 用戶側(cè)：提升用戶瀏覽效率
• 商家側(cè)：提升營銷互動(dòng)體驗(yàn)
• 產(chǎn)品側(cè)：提升產(chǎn)品框架可拓展性和品質(zhì)感

提升用戶瀏覽效率

設(shè)計(jì)策略：拆分全景圖信息類型，在導(dǎo)覽內(nèi)和場景內(nèi)分別進(jìn)行優(yōu)化

用戶在瀏覽方案時(shí)，主要有兩類信息需要用戶關(guān)注：

• 空間物理信息：整屋信息，視角所在房間信息
• 設(shè)計(jì)輔助信息：商品信息，家具信息，材料信息，品牌、聯(lián)系方式等。

將瀏覽效率的提升拆分到空間信息和設(shè)計(jì)信息的傳遞效率的提升，即在輔助瀏覽者能夠快速理解整個(gè)空間的信息的同時(shí)，讓方案設(shè)計(jì)者的設(shè)計(jì)意圖可以充分傳遞給瀏覽者。

1. 導(dǎo)覽內(nèi)空間信息傳遞

單張全景圖的技術(shù)本身即可以滿足用戶環(huán)視單空間的需求，但是在多空間的場景，需要全局視角將不同空間的全景聯(lián)系在一起，此時(shí)導(dǎo)覽的全局概覽就變的意義重大。

用戶理解空間之間的關(guān)系，需要知道自己所在房間位置、所在位置和全局的關(guān)系。2D 的平面圖導(dǎo)覽和 3D 場景中的位置標(biāo)識(shí)應(yīng)有明確清晰的映射關(guān)系，并且突出用戶重點(diǎn)關(guān)注項(xiàng)。

此時(shí)經(jīng)常出現(xiàn)的場景是在一個(gè)房間內(nèi)渲染了多張全景圖的情況，即一個(gè)空間內(nèi)有多個(gè)渲染錨點(diǎn)。移動(dòng)端和 PC 端的交互處理需要做區(qū)分。

PC 端可以用鼠標(biāo)精確操作，所以錨點(diǎn)直接平鋪在戶型圖上方便用戶切換，若是重疊嚴(yán)重，支持用戶拖拽展開，方便用戶點(diǎn)選切換。

移動(dòng)端精確操作困難，在有限區(qū)域內(nèi)顯示錨點(diǎn)只會(huì)干擾用戶視線，故可跳轉(zhuǎn)到三維戶型，用滑動(dòng)模型，點(diǎn)擊選擇切換對象。

2. 場景內(nèi)空間信息傳遞

在方案場景內(nèi)，用戶是以第一人稱的漫游視角環(huán)視單個(gè)空間信息的，此時(shí)，場景熱點(diǎn)就是為用戶跳轉(zhuǎn)不同空間全景圖而存在的引導(dǎo)媒介，也是在全景圖中點(diǎn)擊量最高的熱點(diǎn)，如何讓他們能夠不突兀地顯示在三維場景中，自然地引導(dǎo)用戶進(jìn)行點(diǎn)擊是優(yōu)化的方向。

選用立體的形態(tài)更能讓場景熱點(diǎn)的存在貼合三維的場景。拉近空間名稱與標(biāo)志的距離，在多個(gè)帶房間名稱的場景熱點(diǎn)距離較近重疊時(shí)，更好地識(shí)別定位關(guān)系。

3. 場景內(nèi)設(shè)計(jì)輔助信息傳遞

設(shè)計(jì)師通常會(huì)對方案做出額外的補(bǔ)充說明，而這些說明需要滿足幾個(gè)前提：關(guān)注度區(qū)分，可識(shí)別性和有序性

關(guān)注度區(qū)分：希望用戶在瀏覽方案時(shí)對不同類型的信息的關(guān)注度是不同的，比如商品是需要用戶重點(diǎn)關(guān)注的對象， 文字多會(huì)用于補(bǔ)充說明, 不需要用戶重點(diǎn)關(guān)注。設(shè)計(jì)側(cè)通過動(dòng)效、顏色、細(xì)節(jié)豐富度等不同維度綜合考慮，區(qū)分熱點(diǎn)的重要程度，從而引導(dǎo)用戶的視線。

可識(shí)別性：不同于普通界面元素，全景圖在底圖非固定的前提下，要保證在亮暗兩色上的可識(shí)別性，所以在樣式上有一定的限制和原則需要遵守。

信息有序一致：作為輔助標(biāo)注不能喧賓奪主，打破用戶瀏覽的沉浸感。所以標(biāo)注雖然種類繁多，但需要按照體量，在有限樣式中增加，保證信息的有序性和一致性

提升設(shè)計(jì)師營銷談單效率

設(shè)計(jì)策略：分層增加場景互動(dòng)性，增加訪問深度

談單成功的前提是用戶充分了解方案，全景圖工具提供在單間商品內(nèi)，多件商品之間，多個(gè)風(fēng)格間和多個(gè)方案間等多個(gè)維度提供互動(dòng)形式, 提高用戶跟場景方案的互動(dòng)，增加了對方案的整體訪問深度。

用戶可以更了解商品細(xì)節(jié)，同時(shí)有更多對比選擇余地，方便快速?zèng)Q策；設(shè)計(jì)師可以縱向增加方案豐富程度，提高談單成交可能性。

提升產(chǎn)品框架可拓展性和品質(zhì)感

設(shè)計(jì)思路：細(xì)分用戶行為場景，整合場景訴求點(diǎn)

隨著功能的不斷增加，現(xiàn)有高權(quán)益版本含功能 30+個(gè)，如何提高框架的可拓展性，在界面上合理地布局，需要分場景來分析前置條件。

定位場景跟瀏覽場景互斥，當(dāng)用戶將注意力放在查看方案的時(shí)候，是顧不上看功能列表的。因此將“看方案”和“找功能”的場景區(qū)分開，共用同一塊區(qū)域，從而優(yōu)化信息排布。

但同時(shí)“用功能”的場景要求所見即所得，需要在操作功能開關(guān)的時(shí)候，及時(shí)瀏覽到是否在界面上生效，要求場景和功能能同時(shí)被用戶關(guān)注到。

以上條件決定了界面特征：

在主界面「看方案」，盡量減少操作按鈕占用界面的空間，讓用戶有足夠的空間沉浸瀏覽方案內(nèi)容，所以需要制定一定規(guī)則對現(xiàn)有功能進(jìn)行整合收納，同時(shí)為后續(xù)可能增加功能留出拓展空間。

功能列表可以遮蓋界面，因?yàn)椴粫?huì)同時(shí)看方案，但是因?yàn)椴糠止δ苄枰皶r(shí)預(yù)覽生效結(jié)果，所以遮蓋區(qū)域需要限制，不能是全屏。

1. 框架拓展性提升-功能分類整合

收納同類功能，如熱點(diǎn)開關(guān)，放在下級(jí)菜單中進(jìn)行統(tǒng)一管理

根據(jù)頻率決定分區(qū)，將高頻按鈕外露，低頻使用的功能在「工具箱」中收起；工具箱在有限區(qū)域內(nèi)可滑屏查看。保證商家信息展示優(yōu)先級(jí)

2. 風(fēng)格品質(zhì)提升-風(fēng)格探索

關(guān)鍵詞：未來、空間、延展，借鑒 HMI 設(shè)計(jì)風(fēng)格 —— 微型儀表盤、斜切角

動(dòng)態(tài)效果

結(jié)語

全景圖去年也在展廳等細(xì)分領(lǐng)域得到了商業(yè)化的落地。我們在設(shè)計(jì)的時(shí)候也會(huì)結(jié)合更多的因素進(jìn)行考量，比如不同于家居空間的小巧，展廳等商業(yè)空間商品的展示需求會(huì)更加密集，在這種情況下，如何結(jié)合空間特性，借助前端技術(shù)進(jìn)行巧妙的呈現(xiàn)等，也非常值得思考發(fā)散。

新領(lǐng)域引入了更多不確定因素，在其間探索更需要設(shè)計(jì)師把握商業(yè)和體驗(yàn)的平衡，我們也會(huì)針對特定的課題進(jìn)行更深入的探討。

文中的數(shù)據(jù)均已做模糊處理, 非真實(shí)數(shù)據(jù)，僅作為演示用途, 對數(shù)據(jù)呈現(xiàn)不負(fù)相應(yīng)責(zé)任。

歡迎關(guān)注公眾號(hào)「酷家樂用戶體驗(yàn)設(shè)計(jì)」