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

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

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

項(xiàng)目背景

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

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

前期構(gòu)思

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

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

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

風(fēng)格一

視頻元素提取：

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

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

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

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

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

周累計(jì)PV：103，,662 周累計(jì)UV：80,799

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

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

成效要點(diǎn)：

1. 一共7屏，最后一屏觸達(dá)率達(dá)66%。

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

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

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

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

(當(dāng)時(shí)老板的擔(dān)心，項(xiàng)目組的傾向，設(shè)計(jì)團(tuán)隊(duì)的堅(jiān)持，最終加推后的數(shù)據(jù)反饋)

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

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

A.給到重構(gòu)的psd文件分層將每個(gè)元素合理打包能減少重構(gòu)負(fù)擔(dān)提高工作效率，將主元素轉(zhuǎn)化為智能對象和背景分開，若主元素內(nèi)有單獨(dú)需要?jiǎng)赢嫷牟考�，再另外區(qū)分開來。

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

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

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

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

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

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

項(xiàng)目背景

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

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

創(chuàng)意過程

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

分為3期進(jìn)行：平行宇宙——時(shí)間旅行——黑洞。

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

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

整個(gè)HTML5 頁面的交互體驗(yàn)：

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

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

互動(dòng)設(shè)計(jì)

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

互動(dòng)設(shè)計(jì)1： (醒來)

互動(dòng)設(shè)計(jì)2：(拯救)

互動(dòng)設(shè)計(jì)3：(搜集)

互動(dòng)設(shè)計(jì)4：(激活)

互動(dòng)設(shè)計(jì)5：(選擇平行宇宙)

選擇平行宇宙

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

1=意識時(shí)空

2=單細(xì)胞宇宙

3=海洋生物

4=猿人

5=小時(shí)候的我

6=人工智能

7=人是養(yǎng)料

8=全機(jī)器時(shí)期

9=二維空間

穿越畫面：

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

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

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

小結(jié)：

不是畫出來就好了，HTML5 頁面是視聽的融合，巧妙的動(dòng)畫可以為頁面加分，適當(dāng)?shù)囊粜ё尮收麄�(gè)驗(yàn)?zāi)芨�加生�?dòng)和立體。

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

1. 較大型的互動(dòng)HTML5項(xiàng)目 前期最重要的工作

A 對于交互的梳理

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

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

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

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

C 對于機(jī)會的把握(主動(dòng)發(fā)起項(xiàng)目)

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

項(xiàng)目中經(jīng)驗(yàn)總結(jié)

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

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

文案的呈現(xiàn)：

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

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

酷跑&歐萊雅HTML5 頁面

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

項(xiàng)目背景

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

創(chuàng)意過程

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

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

酷跑新角色——水力井寶

歐萊雅水洋代言人——井柏然

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

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

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

如今線上HTML5 頁面有這樣兩大路線：好玩逗趣風(fēng)格和溫情路線，而前者剛好和“浪”契合。詼諧幽默的方式迎合當(dāng)下惡搞趨勢引發(fā)分享，將井寶作為主線人，一步一步揭開變“浪”的秘籍。

如何才能變“浪子”?這一話題相信能引起很多好奇的注目。它應(yīng)該是輕松的，愉快的，手繪風(fēng)格能做出很好的表達(dá)。

營銷點(diǎn)結(jié)合

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

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

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

小結(jié)：

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

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