起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)一文看懂「全景視頻」在電商設(shè)計(jì)的應(yīng)用
編輯導(dǎo)語(yǔ)：在電商場(chǎng)景中，結(jié)合全景視頻，用戶也許可以更加清晰地獲取商品信息，進(jìn)而幫助自身做好消費(fèi)決策。那么，全景視頻具體要如何應(yīng)用于該場(chǎng)景中？本篇文章里，作者結(jié)合實(shí)際案例，針對(duì)全景視頻與電商場(chǎng)景的結(jié)合做了詳細(xì)解答，一起來(lái)看一下。
一、洞察全景視頻于電商的應(yīng)用可能
如果把各品類按商品與人的相對(duì)尺度來(lái)劃分，尺度小于人的諸如數(shù)碼、服飾、快消品等單體類商品可用3D模型、AR等方式讓用戶在掌間、或貼身把玩互動(dòng)；那么尺度大于人的諸如汽車、家具樣板間、房屋等空間類商品則可用「全景」（Panoramic View）的方式置用戶于其中環(huán)顧互動(dòng)以了解此類商品的全方位信息。
同時(shí)，后者品類均屬于高客單、低購(gòu)買頻次的商品，決策成本高、周期長(zhǎng)，往往以線下決策為消費(fèi)習(xí)慣，對(duì)應(yīng)以經(jīng)銷商、門店導(dǎo)購(gòu)為銷售模式。不論是試駕講解、樣板間介紹或是房屋帶看，如果銷售員的講解被看作是更生動(dòng)表達(dá)商品信息、影響消費(fèi)者決策的關(guān)鍵要素，那么「視頻」則是捕捉這種講解和動(dòng)態(tài)演示的合適媒介。
▲全景視頻行業(yè)適用性與本地化體系角色作用
▲全景視頻的應(yīng)用特點(diǎn)
「全景」的空間互動(dòng)性與「視頻」的內(nèi)容真實(shí)性，使「全景視頻」*（Panoramic Video）能力具備了于用戶側(cè)傳遞空間類商品信息的充分性。
而于商家側(cè)，上述品類由于行業(yè)特性仍處于線上低滲透階段，門店商品及銷售導(dǎo)購(gòu)的數(shù)字化可幫助其突破自然流量受制于地理區(qū)位的限制，針對(duì)每個(gè)門店商品只需單次拍攝生成「全景視頻」便可獲取線上邊際遞增流量，使該能力具備了提供低成本數(shù)字化商品與獲客工具的必要性。由此，將「全景視頻」作為空間類商品表達(dá)能力、重本地化行業(yè)的解決方案，應(yīng)用于家裝、汽車、房產(chǎn)、航旅等。
*注：全景視頻是一種用3D攝像機(jī)進(jìn)行全方位360度進(jìn)行實(shí)景拍攝的視頻，用戶在觀看視頻的時(shí)候，可以滑動(dòng)視頻上下左右進(jìn)行視角轉(zhuǎn)動(dòng)觀看。
二、構(gòu)建呈現(xiàn)商品的全景視頻用戶體驗(yàn)
1. 營(yíng)造「強(qiáng)體感」與「真實(shí)感」
有別于傳統(tǒng)視頻單向傳輸、用戶被動(dòng)接受信息的視聽體感，「全景視頻」增加對(duì)視頻所呈現(xiàn)全景空間的互動(dòng)，模擬出用戶仿佛可以主動(dòng)影響、控制視頻內(nèi)容的深度交互感，簡(jiǎn)言之即構(gòu)建一種“用戶可以在一個(gè)沉浸空間里自由地看商品外觀、細(xì)節(jié)及講解演示”的體驗(yàn)。由此，將該體驗(yàn)的構(gòu)建分為「強(qiáng)體感」與「真實(shí)感」：
▲全景視頻體驗(yàn)架構(gòu)
*注：體驗(yàn)始于需求。即便皆同屬空間類商品，消費(fèi)者所關(guān)心的信息也會(huì)因品類特性而不同，從而影響信息交互方式，以下以家裝行業(yè)為例。
「強(qiáng)體感」由「自由看」、「主動(dòng)聽」與「互動(dòng)看」三層感官組成。底層內(nèi)容載體是一段多商品（如若干家具組合而成的樣板間）或單商品（如定制櫥柜空間）的銷售講解視頻，視頻本身按多商品（Items）、或單商品講解點(diǎn)（Features）順序呈線性結(jié)構(gòu)。
「自由看」、「主動(dòng)聽」是此線性結(jié)構(gòu)基礎(chǔ)上，使用戶可通過(guò)滑動(dòng)視頻視角查看全景內(nèi)各個(gè)方位的商品、或跳轉(zhuǎn)至任意一個(gè)對(duì)象的講解片段，營(yíng)造一種可打斷、跳躍、主動(dòng)選擇的非線性自由體驗(yàn)。
用戶還可與空間內(nèi)的每個(gè)商品對(duì)象進(jìn)行更進(jìn)一步的交互，通過(guò)「所見即所得」的交互方式獲取商品輔助信息，而這些信息又可以圖文、視頻、3D模型（如換材質(zhì)顏色）、AR（如擺置家具）等形式呈現(xiàn)與用戶進(jìn)行二級(jí)交互。此「互動(dòng)看」是以偽深度交互的方式*增強(qiáng)了體感。
*注：全景視頻與虛擬現(xiàn)實(shí)視頻（Virtual Reality Video）的區(qū)別在于，后者除了全視角展示影像之外，還具備深度交互，參與者可以通過(guò)行為改變所在影像空間中的對(duì)象狀態(tài)（如挪動(dòng)椅子、打開櫥柜等）。虛擬現(xiàn)實(shí)視頻目前仍是通過(guò)建模、實(shí)時(shí)渲染的虛擬場(chǎng)景。故為了在全景實(shí)景視頻中模擬一定的互動(dòng)性，加入了弱交互或偽深度交互：向全景影像輸入指令，借由非全景影像本身變化的其他信息進(jìn)行反饋，來(lái)擬真面向?qū)ο蟮目刂啤?/strong>
銷售講解聲音的「實(shí)錄」、門店環(huán)境、商品、銷售員的視頻「實(shí)拍」、商品輔助信息互動(dòng)的「擬真」，共同構(gòu)建了「真實(shí)感」。
2. 架構(gòu)全景視頻三層交互
基于體驗(yàn)架構(gòu)進(jìn)行用戶界面框架與核心交互設(shè)計(jì)。界面分為視頻層、控件層、互動(dòng)層。
▲全景視頻框架
1） 視頻層——自由看全景
根據(jù)家裝行業(yè)線下門店常以分若干小平米樣板間或商品空間布置的特征，以及需保證商品清晰的基本體驗(yàn)要求，視頻采用固定全景機(jī)位拍攝，以2米為可視半徑、方圓12平米的圓心位置輻射區(qū)域內(nèi)的商品。用戶可“站在固定位置”左右360度、上下180度*滑動(dòng)視頻、在有限的FOV范圍內(nèi)縮放視角大小。
*注：上下設(shè)置360度會(huì)導(dǎo)致在滑過(guò)球體視頻的南、北極點(diǎn)時(shí)發(fā)生視角顛倒。
▲全景視頻用于家裝門店的拍攝規(guī)范
為最大程度的呈現(xiàn)空間商品及門店的沉浸感、最大程度的提供頻發(fā)滑動(dòng)交互的操作空間，視頻層占據(jù)了整個(gè)界面近90%。
▲視頻滑動(dòng)演示
▲隱藏控件演示
2）控件層——主動(dòng)聽講解
控件層分為頂欄、底部導(dǎo)航欄與側(cè)邊欄。底部導(dǎo)航欄是除視頻層交互外最主要的操作區(qū)域，將空間中的商品對(duì)象按視頻講解順序線性地排布于底部，作為商品信息的展示，將最主要的行動(dòng)引導(dǎo) –「預(yù)約留資」綁定在每個(gè)商品導(dǎo)航單元上，通過(guò)點(diǎn)擊導(dǎo)航單元來(lái)切換講解對(duì)象及其對(duì)應(yīng)的商品視角。
*值得注意的是，常見的視頻控件（如進(jìn)度條、時(shí)長(zhǎng)、播放暫停等）被有意隱去，目的是為同體驗(yàn)架構(gòu)中所述的「營(yíng)造一種可打斷、跳躍、主動(dòng)選擇的非線性自由體驗(yàn)」對(duì)照，強(qiáng)化「空間感」而非「視頻感（有頭尾的、有限的時(shí)間感）」。
側(cè)邊欄則設(shè)為次要操作區(qū)域，以分流功能為主，如門店其他空間視頻、上下翻屏其他相似空間商品或門店全景視頻（采用點(diǎn)擊避免上下翻屏手勢(shì)與全景視角滑動(dòng)手勢(shì)沖突）。
▲導(dǎo)航切換演示
▲上下切換演示
3）互動(dòng)層——互動(dòng)看商品
針對(duì)每個(gè)商品對(duì)象（或單商品的每個(gè)講解點(diǎn)）在全畫幅視頻中標(biāo)記錨點(diǎn)，用戶可以在全景視角中一目了然視頻所涉及的講解對(duì)象。錨點(diǎn)配以商品信息模塊，通過(guò)點(diǎn)擊操作可喚起二級(jí)輔助信息的互動(dòng)浮層，承載以圖文、視頻、3D模型、AR等各種內(nèi)容形式，在講解音的背景下對(duì)商品進(jìn)行更深入的了解。
正是由于商品坐標(biāo)的存在，可以實(shí)現(xiàn)當(dāng)點(diǎn)擊任意一個(gè)非當(dāng)前講解商品對(duì)象、或切換底部導(dǎo)航商品單元后，講解片段跳轉(zhuǎn)的同時(shí)，視角也會(huì)自動(dòng)轉(zhuǎn)移至對(duì)象。
▲互動(dòng)圖文浮層
▲更多互動(dòng)形式（視頻、3D等）
3. 全景視頻鏈路設(shè)計(jì)
1）全景視頻入口展示
在公域Feeds流、搜索等鏈路中，區(qū)別于普通視頻內(nèi)容的展示方式，全景視頻以所指商品為容器畫面中心，視頻播放的同時(shí)、視角自動(dòng)左右以特定角度往復(fù)轉(zhuǎn)動(dòng)（或以手機(jī)陀螺儀為感應(yīng)，隨手機(jī)角度而發(fā)生轉(zhuǎn)動(dòng)）。這段由機(jī)器自動(dòng)生成的封面視頻片段可自動(dòng)適配于所有鏈路入口尺寸（1:1、3:4、16:9等）。
▲轉(zhuǎn)動(dòng)邏輯與鏈路入口展示效果
2）門店漫游與全景視頻串聯(lián)
用戶通過(guò)搜索或?qū)з?gòu)等路徑發(fā)現(xiàn)某個(gè)品類商品的全景視頻，對(duì)其所屬銷售或門店產(chǎn)生興趣后，可通過(guò)門店組件進(jìn)入門店漫游場(chǎng)景，同現(xiàn)已成熟的漫游體驗(yàn)一樣，以點(diǎn)位位移、全店模型鳥瞰等方式，在靜態(tài)全景中瀏覽門店商品，而對(duì)某個(gè)商品或樣板間產(chǎn)生興趣后，可通過(guò)點(diǎn)擊空間錨點(diǎn)再次進(jìn)入全景視頻聽銷售講解，形成「找品、逛店、找銷售講解、預(yù)約留資、到店」的體驗(yàn)閉環(huán)。
▲門店漫游與全景視頻串聯(lián)
4. 品牌與標(biāo)識(shí)
為向用戶傳遞全景看商品的心智，打造以「360全景」為名的品牌系統(tǒng)。將球形視頻的魚眼扭曲特征（Distortion）與眼睛的自由視角象征（Free View）一同抽象為基礎(chǔ)品牌標(biāo)志。全新設(shè)計(jì)的「360全景」品牌字體與適用行業(yè)形成品牌聯(lián)名組合：360全景探店×天貓家裝、360全景試駕×天貓汽車，并由此展開視覺(jué)演繹。
▲品牌標(biāo)志基礎(chǔ)型
▲品牌文字
▲色彩、標(biāo)志圖形與文字組合
▲Key Vision
由基礎(chǔ)品牌標(biāo)志衍生動(dòng)態(tài)標(biāo)識(shí)，象征空間、視角轉(zhuǎn)動(dòng)、動(dòng)態(tài)等。結(jié)合品牌組合形成標(biāo)識(shí)規(guī)范，應(yīng)用于產(chǎn)品鏈路中的各個(gè)場(chǎng)景（卡片角標(biāo)、加載頁(yè)面等）。
▲動(dòng)態(tài)標(biāo)識(shí)
▲標(biāo)識(shí)規(guī)范與應(yīng)用
5. 解決全景視頻清晰度與體積問(wèn)題
全景視頻可看作是一個(gè)球體視頻（Spherical Video），常規(guī)手機(jī)界面的窗口可視區(qū)域僅為其所展開全畫幅的1/6。通過(guò)拍攝規(guī)范及技術(shù)手段*將原片體積大于常規(guī)視頻6倍的全景視頻、在保有清晰度的前提下縮減了90%以上。
▲全景視頻清晰度與體積測(cè)試報(bào)告
*注：全景視頻清晰度與體積優(yōu)化四步驟：
- 素材拍攝：拍攝硬件與環(huán)境光的優(yōu)化；
- 素材預(yù)處理：圖像剪輯的優(yōu)化；
- 原始素材交付：格式要求的優(yōu)化；
- 編解碼壓縮處理：映射方式的優(yōu)化。
▲壓縮后清晰度對(duì)比
三、寫在最后
目前全景視頻設(shè)計(jì)解決方案主要應(yīng)用于家裝行業(yè)本地化場(chǎng)景，覆蓋七座城市核心賣場(chǎng)千家門店、上線累計(jì)視頻數(shù)以千計(jì)、覆蓋上翻商品數(shù)以萬(wàn)計(jì)。
后續(xù)仍將探索其在汽車行業(yè)、航旅行業(yè)以及房產(chǎn)行業(yè)的應(yīng)用可能。同時(shí)，在用戶體驗(yàn)上進(jìn)一步提升視頻清晰度、打破囿于視頻體積問(wèn)題帶來(lái)的機(jī)位限制，讓用戶可以在動(dòng)態(tài)全景視頻下移動(dòng)位置，實(shí)現(xiàn)更自由、沉浸、真實(shí)的體驗(yàn)。
作者：360全景；公眾號(hào)：天貓?jiān)O(shè)計(jì)（ID：TmallDesign）
本文由 @天貓?jiān)O(shè)計(jì)公眾號(hào) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash，基于CC0協(xié)議。
- 目前還沒(méi)評(píng)論，等你發(fā)揮！
