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