探究HTML5頁面的不同表現手法

 　　雅菲：最近半年一直在負責雷霆戰機和天天酷跑的項目，以偏品牌建設和創意營銷為主，在風格上嘗試了手繪的表現形式，這次和大家分享下其中的設計經驗。

　　雷霆戰機TVC HTML5 頁面

　　文藝、走心的手繪風格

　　項目背景

　　雷霆戰機周年慶，項目組為雷霆進行了拍攝了一部品牌短片，圍繞整個影片策劃了一個HTML5頁面對其進行傳播。

　　視頻主要內容講述幾個小朋友從小心懷對星空的夢想，通過不斷研究學習長大後當上了航天工作者完成了自己一直的夢想，來闡述如今繁華社會裡仍有千千萬萬不斷追隨自己的內心的人。引發大家對天空的夢想的共鳴走情感路線。

　　前期構思

　　本次嘗試了2套方向展現——圍繞視頻內容的靜幀截圖直接展示，主打宇宙情懷的手繪風格文藝的展示。

　　此前移動端上大多是以單頁大長圖+視頻按鈕進行宣傳的方式，作為首個嘗試試水兩種方向對最終視頻造成的轉化率影響。

　　風格推導

　　風格一

　　視頻元素提取：

　　根據其視頻提取關鍵元素：收音機、天文望遠鏡、宇宙飛船、風鈴。

　　整體氛圍圍繞四個關鍵詞 科幻、復古、文藝和走心。

　　於是最終采用牛皮紙背景來展現復古+手繪主元素使科幻主題更添親和力增添情懷，不同於以往的寫實風。

　　為了在手機上更生動的展示，每一個元素搭配小動畫來使手繪的物件更具有生命力(例收音機動畫：打開天線——搜頻——搜到聲音)。一段描述性的文案搭配小動畫增加畫面故事的完整性，同時配合空靈的背景聲效，讓用戶在體驗HTML5 頁面的時候，在符合移動端用戶體驗同時讓用戶在視覺、聽覺上感受到情懷產生共鳴。

　　數據表現：

　　周累計PV：103，,662 周累計UV：80,799

　　最後一屏觸達率：66% 啟動游戲轉化率：23%

　　豐富的CSS3場景動畫以及走心的文案加上風鈴的音樂，產生用戶的共鳴。

　　成效要點：

　　1. 一共7屏，最後一屏觸達率達66%。

　　2. 整個專題從加載到加載完成僅23%的流失

　　關於項目的思考：

　　1. TVC的推廣，使用視頻本身元素和再創作元素，對於傳播哪一個更合適?

　　一開始老板擔心跟視頻本身的結合度不夠，項目組對於手繪風格與游戲內風格差異大有所擔憂，於是首推的是靜幀視頻截圖版本，出於探究精神我們在微信公眾賬號對手繪版本進行傳播。

　　(當時老板的擔心，項目組的傾向，設計團隊的堅持，最終加推後的數據反饋)

　　從最終的數據可以看到，手繪版本在只有唯一宣傳入口(微信公眾賬號)和視頻靜幀有多方的宣傳渠道的對比下，兩者的數據達到相當，且手繪版本的點擊全文閱讀量遠高於以往文章點擊量，由此可見在創作元素來宣傳視頻並無影響，游戲用戶更多是樂於接受不同風格的嘗試。

　　2. 手繪插畫類型的HTML5 頁面，在設計和重構階段應該注意的問題

　　A.給到重構的psd文件分層將每個元素合理打包能減少重構負擔提高工作效率，將主元素轉化為智能對象和背景分開，若主元素內有單獨需要動畫的部件，再另外區分開來。

　　3. HTML5 頁面需要的插畫類型與傳統插畫的區別

　　A.由於手機屏幕的限制，一屏內出現一個主要元素最為舒適，更容易引導用戶在體驗中看到重點。畫面排版過滿容易分散用戶注意力失去焦點。

　　B.矢量扁平風格的插畫和可復用背景能大大減少文件包大小提升加載速度。

　　C.簡單的圖形加上微妙的肌理感能瞬間提升畫面質感。

　　雷霆戰機世界觀

　　神秘、玄幻、讓用戶了解雷霆世界觀

　　項目背景

　　劉慈欣為雷霆戰機撰寫世界觀，整個故事闡述了3個關鍵觀點：平行宇宙、時間旅行及黑洞。

　　通過移動端為新老用戶傳遞及鞏固雷霆世界觀。

　　創意過程

　　以往的雷霆風格比較偏寫實派，與游戲內風格類似，而這次世界觀中的每一個觀點都各不相同各自背後有著龐大的科學背景支撐，最終我們決定用3期來分別詳細闡述每一個觀點，增強雷霆科幻的專業性塑造品牌感。視覺上分別用不同的展現風格來對其每一個觀點進行闡述。

　　分為3期進行：平行宇宙——時間旅行——黑洞。

　　我們不希望用純文字去解釋這些學術觀點會顯得枯燥乏味且未必能精准傳達，最終我們決定將HTML5 頁面做成一個有故事背景貫穿的輕游戲的方式，在過程中設計了幾個互動點讓用戶能潛移默化從中感受到我們所傳達的“平行宇宙”的概念，其中講幾個關鍵節點設計了互動設計，幾個圖像。

　　我們把HTML5 頁面包裝成一個故事，用第一人稱視角帶領用戶去體驗整個過程，故事中主人翁“我”代表用戶，打開這個頁面就表示“我”已被選中，在太空中漂浮了100年，我需要通過選擇正確的宇宙穿越才能找到平行宇宙中的同盟者，將其帶回來完成拯救地球的任務…

　　整個HTML5 頁面的交互體驗：

　　風格推導

　　整個HTML5 頁面視覺與文案的比重為1:1，我們不希望視覺過於繁瑣而重心偏離，所以整體走灰白+重點標彩色的水彩扁平風格，讓畫面與文案重心相當互不干擾。

　　互動設計

　　將故事幾個關鍵節點處設置了操作按鈕與用戶進行互動，用戶完成點擊才能繼續走下去，強調用戶“我”的主人翁意識加強身臨其境的感受，讓故事更加立體感。

　　互動設計1： (醒來)

　　互動設計2：(拯救)

　　互動設計3：(搜集)

　　互動設計4：(激活)

　　互動設計5：(選擇平行宇宙)

　　選擇平行宇宙

　　貼合劉慈欣的世界觀裡指出的觀點，將平行宇宙設計成了9個宇宙，因為它具有一定的科學性質，所以把整個生物進化論與9個宇宙結合，為了表達出其觀點“數字越小，離本宇宙差異越大”，所以進行了差異化順序排列，讓用戶能在體驗中通過圖像來理解其奧義。

　　1=意識時空

　　2=單細胞宇宙

　　3=海洋生物

　　4=猿人

　　5=小時候的我

　　6=人工智能

　　7=人是養料

　　8=全機器時期

　　9=二維空間

　　穿越畫面：

　　穿越到每個平行宇宙中搭配一段有誘導性的文案來混淆視聽，增加娛樂游戲感：

　　故事最終會有兩種結果狀態，未找到盟友地球毀滅或者找到正確的盟友但帶回的是希望還是災難?敬請期待引出下一期(時間旅行)。

　　整個HTML5 頁面配合了小動畫和小音效展現，然而故事最後是否尋找到正確答案並不是頁面的重點，我們所期許的，是通過這樣一種試聽體驗，更直觀的傳達“平行宇宙”這一概念，引發思考增強雷霆品牌感。

　　小結：

　　不是畫出來就好了，HTML5 頁面是視聽的融合，巧妙的動畫可以為頁面加分，適當的音效讓故整個驗能更加生動和立體。

　　關於項目的思考：

　　1.