最近半年一直在負責(zé)雷霆戰(zhàn)機和天天酷跑的項目，以偏品牌建設(shè)和創(chuàng)意營銷為主，在風(fēng)格上嘗試了手繪的表現(xiàn)形式，這次和大家分享下其中的設(shè)計經(jīng)驗。

雷霆戰(zhàn)機TVC HTML5 頁面

文藝、走心的手繪風(fēng)格

項目背景

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

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

前期構(gòu)思

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

此前移動端上大多是以單頁大長圖+視頻按鈕進行宣傳的方式，作為首個嘗試試水兩種方向?qū)ψ罱K視頻造成的轉(zhuǎn)化率影響。

風(fēng)格推導(dǎo)

風(fēng)格一

視頻元素提?。?/p>

根據(jù)其視頻提取關(guān)鍵元素：收音機、天文望遠鏡、宇宙飛船、風(fēng)鈴。

整體氛圍圍繞四個關(guān)鍵詞 科幻、復(fù)古、文藝和走心。

于是最終采用牛皮紙背景來展現(xiàn)復(fù)古+手繪主元素使科幻主題更添親和力增添情懷，不同于以往的寫實風(fēng)。

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

數(shù)據(jù)表現(xiàn)：

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

最后一屏觸達率：66% 啟動游戲轉(zhuǎn)化率：23%

豐富的CSS3場景動畫以及走心的文案加上風(fēng)鈴的音樂，產(chǎn)生用戶的共鳴。

成效要點：

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

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

關(guān)于項目的思考：

1. TVC的推廣，使用視頻本身元素和再創(chuàng)作元素，對于傳播哪一個更合適？

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

（當時老板的擔心，項目組的傾向，設(shè)計團隊的堅持，最終加推后的數(shù)據(jù)反饋）

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

2. 手繪插畫類型的HTML5 頁面，在設(shè)計和重構(gòu)階段應(yīng)該注意的問題

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

3. HTML5 頁面需要的插畫類型與傳統(tǒng)插畫的區(qū)別

A．由于手機屏幕的限制，一屏內(nèi)出現(xiàn)一個主要元素最為舒適，更容易引導(dǎo)用戶在體驗中看到重點。畫面排版過滿容易分散用戶注意力失去焦點。

B．矢量扁平風(fēng)格的插畫和可復(fù)用背景能大大減少文件包大小提升加載速度。

C．簡單的圖形加上微妙的肌理感能瞬間提升畫面質(zhì)感。

雷霆戰(zhàn)機世界觀

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

項目背景

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

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

創(chuàng)意過程

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

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

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

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

整個HTML5 頁面的交互體驗：

風(fēng)格推導(dǎo)

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

互動設(shè)計

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

互動設(shè)計1： （醒來）

互動設(shè)計2：（拯救）

互動設(shè)計3：（搜集）

互動設(shè)計4：（激活）

互動設(shè)計5：（選擇平行宇宙）

選擇平行宇宙

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

1=意識時空
2=單細胞宇宙
3=海洋生物
4=猿人
5=小時候的我
6=人工智能
7=人是養(yǎng)料
8=全機器時期
9=二維空間

穿越畫面：

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

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

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

小結(jié)：

不是畫出來就好了，HTML5 頁面是視聽的融合，巧妙的動畫可以為頁面加分，適當?shù)囊粜ё尮收麄€驗?zāi)芨由鷦雍土Ⅲw。

關(guān)于項目的思考：

1. 較大型的互動HTML5項目 前期最重要的工作

A 對于交互的梳理

劉慈欣的文章甚至可以拍出一部戲來，其信息量對于移動端來說巨大，何不幫助用戶消化故事，將劇中的主要觀點提取出來，解構(gòu)再重組成一個適合移動端的小故事。

而故事性HTML5 頁面，與以往普通的頁面有所不同，故事性的流暢、段落節(jié)點都至關(guān)重要，前期的交互草圖就必不可少了，能避免后期的反復(fù)返工，進入執(zhí)行階段就水到渠成。

B 對于積極性的調(diào)動（讓所有參與者富有激情來做）

要完成這樣一篇同時要承載劇情、動畫、音效、內(nèi)容文案的HTML5 頁面來說，不同于以往跟重構(gòu)協(xié)作，這次動畫量過大需要與動畫的小伙伴深入的磨合，多當面溝通能迅速解決當下問題，為了讓體驗銜接更加細致，組長和項目組的 多次溝通為小伙伴爭取到更多的制作時間，動畫同學(xué)加班加點的制作讓畫面更加精益求精。

C 對于機會的把握（主動發(fā)起項目）

在這個有劉慈欣大背景宣傳的重要時期，從設(shè)計組出發(fā)考慮到若能與當下事件結(jié)合，緊跟熱度加力宣傳能比平常時期帶來更大的效益，且雷霆的用戶多為科幻迷，對此話題會比較感興趣，于是從設(shè)計組主動發(fā)起項目為雷霆戰(zhàn)機達到借勢營銷。

項目中經(jīng)驗總結(jié)

選擇貼合主題的插畫風(fēng)格

雷霆的科幻和神秘感適合使用高冷b格的插畫風(fēng)格，做高冷時應(yīng)避免使用飽和度過高的顏色，盡可能使用少的顏色，使用同色系的顏色，暗色系更能烘托氛 圍，故事性的插畫背景可能需要更加豐富，而過于豐富的圖形在手機上體驗會失去焦點，這個情況下把整體壓暗，主角提亮來凸顯，使用統(tǒng)一的顏色會使故事連帶性 更強。

文案的呈現(xiàn)：

文案盡量簡明扼要，當必須有大篇幅文案出現(xiàn)時一行一句，分段出現(xiàn)。

科幻小叔的口吻來講故事，引人深思但是口吻是很樸實的敘述，與其他的HTML5 頁面拉開差距，讓用戶感受到游戲里面的靈魂和世界。

酷跑&歐萊雅HTML5 頁面

詼諧、搞笑、提取關(guān)鍵字 放大關(guān)鍵字

項目背景

酷跑項目與歐萊雅合作，而此次HTML5 頁面中需將酷跑新角色和歐萊雅的“水洋”系列進行宣傳。

創(chuàng)意過程

酷跑與歐萊雅本身一個是游戲，一個是化妝品，兩者具有較大差異，怎么樣才能同時體現(xiàn)兩者？

關(guān)鍵詞聯(lián)想：

酷跑新角色——水力井寶
歐萊雅水洋代言人——井柏然

兩者唯一的共通點——井柏然。而此處的難點在于并沒有井柏然的肖像使用權(quán)，因此最終用手繪的風(fēng)格巧妙避開這一點。整個HTML5 頁面決定用漫畫井寶作為主要人物來貫穿。

而我們不希望將酷跑新角色直接平乏的展示，希望它的出現(xiàn)能更加有趣和好玩才能更容易被記住。

最終得到關(guān)鍵詞“浪”。

如今線上HTML5 頁面有這樣兩大路線：好玩逗趣風(fēng)格和溫情路線，而前者剛好和“浪”契合。詼諧幽默的方式迎合當下惡搞趨勢引發(fā)分享，將井寶作為主線人，一步一步揭開變“浪”的秘籍。
如何才能變“浪子”？這一話題相信能引起很多好奇的注目。它應(yīng)該是輕松的，愉快的，手繪風(fēng)格能做出很好的表達。

營銷點結(jié)合

如何才能體現(xiàn)歐萊雅的補水又不容易產(chǎn)生太過于廣告的反感情緒？ “補水”即是在護膚、洗臉的過程中，把題目之一洗臉的故事做為載體，分為正常人洗臉vs浪子洗臉，將歐萊雅補水系列軟性的融入到體驗的過程之中減少突兀廣告感。

如何趣味的呈現(xiàn)新角色？

整個HTML5 頁面的體驗流程——每一題點擊 “變浪”按鈕即可到達下一頁，將新角色介紹結(jié)合到最后一題。如何酷跑也能浪？從一個跑步的井寶變成沖浪的井寶，結(jié)合移動端用戶體驗“搖一搖”操作完成從手 繪風(fēng)格到游戲內(nèi)卡通寫實風(fēng)格的切換盡可能減少風(fēng)格突變的突兀感，同時讓用戶在頁面內(nèi)第一時間了解到游戲內(nèi)的新角色真實呈現(xiàn)效果。

小結(jié)：

當本身的點比較正常，發(fā)散思維把普通的點放大、走劍走偏鋒會得到另一種創(chuàng)意思路。

上面所闡述的項目均屬于手繪風(fēng)格，手繪能較好的表達出美好情懷，是如今傳達情感的慣用手法之一，而沒有一種風(fēng)格是萬能藥，需要挖掘更多的表現(xiàn)形式和多元風(fēng)格才能滿足觀眾們的胃口。

原文地址：tgideas.qq

作者：雅菲