轉(zhuǎn)眼負(fù)責(zé)火影手游的創(chuàng)意設(shè)計(jì)工作一年多了，在這段時(shí)間里從《鳴人雛田婚禮》到《重返木葉村》沙盤項(xiàng)目，我們?yōu)榛鹩笆钟螄L試了很多風(fēng)格的H 5和互動(dòng)站，春節(jié)期間我們又嘗試了一次剪紙風(fēng)格的H5，來(lái)看這次實(shí)戰(zhàn)回顧！

項(xiàng)目背景：

在春節(jié)來(lái)臨之際，我們獲悉《火影忍者劇場(chǎng)版-博人傳》2.18將在中國(guó)上映，這部電影主要講的是鳴人和他兒子博人間的父子故事。作為火影手游市場(chǎng)設(shè)計(jì)團(tuán)隊(duì)，我們覺(jué)得我們可以為《博人傳》，為火影手游項(xiàng)目，為火影迷做點(diǎn)什么，給火影迷來(lái)點(diǎn)驚喜！用一種特別的視覺(jué)語(yǔ)言為火影迷傳遞火影中的父子情感。而此時(shí)剛好有一個(gè)火影手游的過(guò)年發(fā)紅包的市場(chǎng)運(yùn)營(yíng)活動(dòng)需要一個(gè)H5作為載體。于是我們決定做一個(gè)H5，而這個(gè)H5的三大設(shè)計(jì)訴求為：

01 《博人傳》電影的上映---講訴鳴人和博人的父子情（情感內(nèi)容訴求）

02 春節(jié)發(fā)紅包----（功能和氛圍訴求）

03 火影IP---漫畫（視覺(jué)內(nèi)容訴求)

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

眾所周知紅包（壓歲錢）是至親之間情感的一種表達(dá)方式，火影中鳴人與他父親以及鳴人跟他兒子之間輪回的父子關(guān)系，是我們打算通過(guò) “壓歲錢”作為串聯(lián)，講述一個(gè)泛大眾的父子之間的情感故事，這樣更容易引起大眾的共鳴，而作為80后的我們，已經(jīng)有大多為人父母，這種父子的輪回關(guān)系，感受更深，所以我們確定故事的主線為：輪回的父子情

鋪開我們要承載的三大元素內(nèi)容，我們發(fā)現(xiàn)用富有年味的剪紙動(dòng)畫來(lái)講訴父子情，用壓歲錢作為情感的線索來(lái)搭載紅 包活動(dòng)是最合適的選擇，而紙雕風(fēng)格的H５也沒(méi)有人做過(guò)。在中國(guó)過(guò)年時(shí)都有貼剪紙年畫的習(xí)俗，所以剪紙類風(fēng)格的設(shè)計(jì)更能體現(xiàn)年味，更容易營(yíng)造春節(jié)的氛圍。所以我們確定用春節(jié)剪紙的風(fēng)格來(lái)設(shè)計(jì)一本講述鳴人父子情感故事的漫畫書。

創(chuàng)意執(zhí)行：

01 文案和腳本

總共設(shè)定了五個(gè)場(chǎng)景。每一個(gè)場(chǎng)景的角色，場(chǎng)景元素都有詳細(xì)的設(shè)定。（下圖是部分腳本圖示）

02 創(chuàng)意視效和風(fēng)格的執(zhí)行

我們最初的構(gòu)想是一幅幅的翻頁(yè)H5，單張光效就像紙雕燈箱一樣的畫面效果,加上一些微動(dòng)畫。就像紙雕藝術(shù)家 Nair &Hari夫婦做的紙雕作品一樣，通多層次手工剪紙雕塑，分層組裝在盒子里，從后面或下方用LED照明，呈顯具有3維立體感覺(jué)的光影投射效果。我們想在這基礎(chǔ)上，實(shí)拍后做成H5，可以利用手機(jī)陀螺儀，手持手機(jī)晃動(dòng)產(chǎn)生微視差的即視3維效果，加上一些場(chǎng)景微動(dòng)畫。但這種方式的視覺(jué)體驗(yàn)并不流暢、也不新穎、執(zhí)行成本也略高，而且春節(jié)倒計(jì)時(shí)中時(shí)間不夠了。

所以我們想到了一種更好的方式，做一個(gè)電動(dòng)轉(zhuǎn)動(dòng)盤， 插上紙雕片，利用燈光，圓盤的轉(zhuǎn)動(dòng)形成虛實(shí)的光影動(dòng)態(tài)效果。有點(diǎn)皮影的感覺(jué)，又有點(diǎn)西洋鏡的效果，這樣能更好的契合主題年輪的概念，也很好地解決了H5動(dòng)態(tài)轉(zhuǎn)場(chǎng)的問(wèn)題。構(gòu)想示意圖如下：

03 拍攝與后期

慶幸TGIDEAS有自己專業(yè)的攝影棚，我們?cè)跀z影棚一呆了就是一整天，經(jīng)過(guò)三天苦戰(zhàn)終于完成了拍攝工作。中間碰到了許多問(wèn)題，通過(guò)反復(fù)地組裝調(diào)試，嘗試紙片間疏密帶來(lái)的視覺(jué)效果，燈光和鏡頭的調(diào)試，嘗試制造人工實(shí)拍飄雪，金粉飄落的效果，以求達(dá)到最佳的真實(shí)光影效果！

最終H5的呈現(xiàn)

此外我們還用這些素材設(shè)計(jì)制作了火影紙雕紅包！

項(xiàng)目小結(jié)：

經(jīng)過(guò)重重困難和挑戰(zhàn)，不斷的優(yōu)化，項(xiàng)目終于在年前順利上線，期間積累了一點(diǎn)H5項(xiàng)目小經(jīng)驗(yàn)，跟大家分享下。

1、要有愛(ài)

整個(gè)項(xiàng)目做下來(lái)，心情是無(wú)比愉快的，滿懷著我們對(duì)火影的愛(ài)。如果你要做一個(gè)創(chuàng)意H 5，首先要感動(dòng)參與項(xiàng)目的所有人，讓團(tuán)隊(duì)成員都覺(jué)得這是個(gè)好玩的項(xiàng)目，都愿意為之付出全部的激情和愛(ài)心來(lái)工作。

2、要玩點(diǎn)與眾不同

最近我們被各種風(fēng)格的H5洗腦無(wú)數(shù)遍，H5的風(fēng)格越來(lái)越豐富，一夜間，插畫師、漫畫師也好像找到了新的生存空間，我們?cè)O(shè)計(jì)師也都在尋找與眾不同的視覺(jué)設(shè)計(jì)語(yǔ)言來(lái)表達(dá)自己的創(chuàng)意。要想有豐富的創(chuàng)意表達(dá)語(yǔ)言，需要多去涉及一些非自己專業(yè)的領(lǐng)域，這個(gè)世界很大，藝術(shù)的表達(dá)方式也是多種多樣的，做為設(shè)計(jì)師應(yīng)該多出去走走，多看看，多去了解一些傳統(tǒng)藝術(shù)，傳統(tǒng)手工技藝，這樣會(huì)增加我們對(duì)創(chuàng)意的表達(dá)能力，對(duì)不同的創(chuàng)意主題能找到合適的視覺(jué)藝術(shù)的表達(dá)語(yǔ)言。

3、要主動(dòng)

這個(gè)項(xiàng)目是我們主動(dòng)發(fā)起和推動(dòng)的一個(gè)有趣的項(xiàng)目，建議設(shè)計(jì)師有了好想法要及時(shí)主動(dòng)提案并推動(dòng)項(xiàng)目。

【走在時(shí)代前列的騰訊HTML 5精品好文】

DNF實(shí)戰(zhàn)總結(jié)好文！
《騰訊游戲?qū)崙?zhàn)！DNF浴火新生HTML5項(xiàng)目總結(jié)》

優(yōu)化HMTL 5頁(yè)面的6個(gè)技巧！
《騰訊精品文！六大奇招帶你優(yōu)化HTML5移動(dòng)頁(yè)面》

HTML5 頁(yè)面設(shè)計(jì)實(shí)戰(zhàn)總結(jié)！
《春雨先知！騰訊移動(dòng)端HTML5頁(yè)面設(shè)計(jì)實(shí)戰(zhàn)分享》

原文地址：tgideas.qq

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量104萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com