中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

項(xiàng)目背景

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

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

前期構(gòu)思

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

此前移動(dòng)端上大多是以單頁(yè)大長(zhǎ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ù)古、文藝和走心。

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

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

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

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

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

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

成效要點(diǎn)：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

項(xiàng)目背景

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

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

創(chuàng)意過(guò)程

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

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

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

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

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

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

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

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

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

互動(dòng)設(shè)計(jì)1： （醒來(lái)）

互動(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)樗哂幸欢ǖ目茖W(xué)性質(zhì)，所以把整個(gè)生物進(jìn)化論與9個(gè)宇宙結(jié)合，為了表達(dá)出其觀點(diǎn)“數(shù)字越小，離本宇宙差異越大”，所以進(jìn)行了差異化順序排列，讓用戶能在體驗(yàn)中通過(guò)圖像來(lái)理解其奧義。

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

穿越畫(huà)面：

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

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

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

小結(jié)：

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

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

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

A 對(duì)于交互的梳理

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

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

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

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

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

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

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

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

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

文案的呈現(xiàn)：

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

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

酷跑&歐萊雅HTML5 頁(yè)面

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

項(xiàng)目背景

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

創(chuàng)意過(guò)程

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

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

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

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

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

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

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

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

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

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

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

小結(jié)：

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

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

原文地址：tgideas.qq

作者：雅菲