2016-10-26 資深UI設計者
從2008年開始，每年臨近11月11日，全國——現在可能是全球——的剁手黨們都在等著看馬云爸爸和天貓又能玩出什么新花樣。今年除了史無前例的整整49張品牌海報以及4個版本的“主題大片”之外，天貓的小伙伴們居然連一封小小的邀請函都沒放過。這支將最龐大的信息量用最簡單的“手指刷一下”交互方式呈現的H5，相信已經刷爆了大家上周末的朋友圈。
數英網第一時間采訪了天貓市場部數字營銷團隊負責人秀珣以及此次邀請函的創意與制作公司VML上海（以下簡稱“天貓”與“VML”），5個問題，全面了解這封“穿越宇宙”的“斬手之邀”。
數英網原創內容，請遵守文章底部轉載規范
天貓雙11《穿越宇宙的雙11邀請函》H5 動圖欣賞
天貓雙11《穿越宇宙的雙11邀請函》H5 截圖欣賞
掃描二維碼，立即體驗！
（數英APP手機用戶，需點擊放大二維碼后，長按識別）
完整案例欣賞：盡情盡興！天貓穿越宇宙向你發來了一封雙11邀請函
天貓：雖然這個H5稱為“穿越宇宙的邀請函”，但它不只是一個邀請函，還是一個雙11攻略。其實用戶在淘寶和天貓的app中輸入“穿越宇宙”四個字一樣能夠看到這封邀請函。而從10月22日至11月11日的傳播周期也產生了一個時間軸，這個H5就用來展示這個時間軸。大家都想知道雙11在不同階段有什么內容，基于這樣的長時間的需求，我們就想把這個攻略做得更加好玩，所以我們和代理商一起討論出來這樣一個酷炫的裸眼VR形式。
天貓：我們想要把這份攻略從內容和形式兩方面進行創新。但是內容創新需要詳細講解雙11活動的內容，消費者不會有耐心看，負荷也會太大。所以我們就選擇從形式創新入手，比如現在比較酷的VR技術。另外，天貓雙11的名字近幾年也發生了一些變化：從“天貓雙11網購狂歡節”到“購物狂歡節”再到現在的“全球狂歡節”，這可以理解為雙11的范疇越來越大，更加全球化、國際化。現在的雙11更像一個節日，所以我們在按照節日的概念去打造它。我們還聯想到是否可以跨越地球的概念，直到宇宙？這樣的場景和VR技術匹配也會很酷。同時，我們之后還會有一支延續宇宙狂歡概念的視頻。
VML：首先，客戶的brief是想要大家認識一個全球的天貓，而并非只是本土的天貓，所以我們干脆給出了“宇宙”這一（比全球）更大的空間。其次，VML團隊一開始就想要嘗試做一個炫一點的東西，給大家不一樣的體驗，把現在手機的最大效用發揮出來。所以，（這支H5）想要傳達的核心是“全球的天貓”，現在發布的目的主要是預熱，起到信息強化、告知活動的作用，也提醒大家做好準備。
天貓:我們主要考慮到兩方面因素。一個是頁面加載，我們以前做過很多復雜的H5，也掉過很多坑，所以首先想到的是畫面一定要流暢，在這之前有一個很好的案例就是寶馬M2發布的H5，這個H5讓我們很震撼，它可以做到酷炫的同時畫面也很流暢，所以我們會去研究它并且把它當作課題，我們知道觀看流暢性非常能夠影響到消費者的體驗和口碑；第二個是消費者體驗，在這之前這個H5是需要兩只手操作來實現放大和縮小的，但經過盲測之后我們發現消費者在面對陌生的東西的時候會不知所措，并且這個H5沒有很強的故事性，所以我們覺得要想更好地展現這個H5就要用最傻瓜、懶人的方式讓消費者操作。
VML：VML團隊在這方面是有長年基礎和經驗的，大家也有一定的默契，做過一些比較復雜的之后就體驗到了什么才是最舒服的體驗。現在WebGL技術很成熟，絕大多數人也都在使用智能手機，能夠負荷得了（這支H5所需要的機能），在這樣的情況下，我們就和客戶達成了一致——用最簡單的互動方式讓大家瀏覽，但是其中的圖形細節包括人物形和建筑形都是摳圖或拍攝的，所以圖形工作量比較大。另外，每一個空間的走動速度、負載大小等細節也都一直在測試，這個過程技術和創意一直在一起，所以等到上線我們已經知道大概運行的狀況。這支H5其實是信息的告知者，我們將信息隱藏在畫面在空間轉換時的圖標中，用戶點擊才會彈出相應文字本身去做這樣一個比較復雜的空間也是為了更加便于隱藏更多的信息，這樣不會顯得突兀。
邀請函畫面長圖（點擊可查看大圖）
以下文字來自：《深度解析！雙11宇宙H5為什么能掀翻我的朋友圈！》由VML上海推薦。作者：小呆
技術概述：
實際主創團隊之前多次在項目中采用過類似技術解決方案，就像是之前的作品《絕不跟隨》，采用了非常類似的原理，你會發現作品的結構與雙11的H5非常類似。
而且VML技術小組擁有自己的CSS3引擎，特別是在呈現“虛擬3D”（假3D效果）領域，可謂爐火純青，但因為此次項目涉及素材內容太過于龐大，分層圖片實在太多，即使是把自己的引擎開到爆表，也撐不起這么多內容，所以此次項目選用了threejs + webGL的組合。而具體的實現原理我們在文章里就不詳細講解了，你可以通過下方的截圖來理解平面素材是如何在H5內被編輯成3D空間的。
H5內元素空間呈現示意圖
作為web領域也就是H5的主流3D開元引擎，它一直是3D場景類網站的首選，而在H5內想實現空間變換和推拉的效果，面對這么多素材的大型場景，靈巧的CSS3空間變換就顯得十分吃力了，為了更好的效率和流暢的體驗，所以此次選用了webGL來繪制3D場景。
當然，這里還有一個要權衡的利弊，雖然擅長表現3D的webGL極為強大，但對性能的損耗實在太高，這使得低端機在觀看網頁時很有可能會卡到爆！
但因為操作系統的普遍提升和年初微信對內置瀏覽器的進一步升級，使得這些擔憂變的不再致命。從大環境來說，是設備和平臺的升級，使得我們可以流暢的看到這樣的H5案例，要是只從技術分析，這樣的效果好幾年前就能做了，但根本無法普及到大眾。
設計概述：
在這支H5，技術與設計同等重要，但投入卻完全不同，整個H5內置了225張素材圖，他們通過修片、拍攝、合成、素材、3D渲染等多種方式獲得，最后再以2D圖片的方式導入H5，但網站的總體量卻控制在了5MB以內，這簡直是個奇跡！
H5的總大小和總請求數
這里面有2個點值得一提：
1. 巧妙的鏡像設計：畫面中很多素材是對稱的，對于一個虛擬空間來說，這樣的設計會增加內容的奇幻色彩。而實際上，鏡像處理在豐富場景空間的前提下還能減少網站體量，你只需要一組素材就能達到2組素材的視覺效果，真是非常討巧的設計。
從H5內部獲得的分層素材圖組
2．與《造物節邀請函》H5類似，整支H5大量采用base64格式的圖片，而非JPG或者PNG，這樣的圖片體量雖然略大一些，但是可以減少服務器的請求數，也就是能增加加載速度，這是很多大素材H5項目需要借鑒的。也托開發者們的努力，整支H5的體量控制在了4.8MB，但是通過后臺數據，我們發現作品的背景音樂實際還有壓縮的空間，如果進一步優化，網站還可以更小，但這個大小已經可以確保大多數手機觀看無壓力了，相比那些動不動就十幾二十兆的H5來說，這支作品在素材優化上真是下了大工夫了。
H5內所有圖片數量與大小截圖
VML：除了這支邀請函 H5，還有從10月24日晚上開始的“九牛與二虎”天貓平臺直播，由李維嘉、林志穎領銜，即為“二虎”；加上另外九位網紅，即為“九牛”，其實呈現形式更像一個綜藝節目，由VML負責創意，有其他專門團隊運營。
天貓：這次的直播有兩個亮點：一是這一次的九宮格直播可以說是天貓出品的綜藝類直播，采用2位明星+9位網紅的形式播出5期，講一些社會話題，同時在其中會推薦商家的貨品。第二個是在11月3日晚上，有一個爆款清單的直播，這是消費者最關注的核心話題，之前在微信、微博端我們都會發布爆款清單，在看到往屆的清單傳播范圍極大，已經有群眾基礎的情況下，我們今年會更加直觀的去呈現它。
天貓“九牛與二虎”直播活動海報
附注：
1. VML上海表示，目前行業內流傳有關天貓雙11《穿越宇宙的雙11邀請函》 H5 的制作價格皆為杜撰。
2. 天貓官方微信于23日發布文章《穿越宇宙的雙11邀請函@了你》后，底部相關 H5 鏈接曾出現無法打開的現象，目前已經恢復。
轉自：http://www.digitaling.com/articles/31442.html
藍藍設計( www.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
