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