騰訊實(shí)戰(zhàn)案例！《獸人必須死》動(dòng)畫(huà)站的創(chuàng)意思路總結(jié)

大熊貓：今天和大家分享獸人必須死的一個(gè)特色站，包括個(gè)人創(chuàng)意思路，設(shè)計(jì)及溝通執(zhí)行的一些經(jīng)驗(yàn)，不僅有成功的還有失敗的彎路，希望對(duì)大家有幫助。

項(xiàng)目背景

項(xiàng)目背景主要是為迎接第三次封閉測(cè)試，三 續(xù)目的是：

1. 希望過(guò)去玩獸人必須死1，2的單機(jī)用戶找回當(dāng)年虐殺小獸人的快感跟激情！

2. 同時(shí)也希望把游戲講究策略對(duì)抗的特點(diǎn)能表現(xiàn)出來(lái)

3. 吸引用戶訪問(wèn)，為三測(cè)預(yù)熱做好鋪墊

開(kāi)會(huì)討論

了解了三測(cè)的目的跟方向，接下來(lái)就是項(xiàng)目的創(chuàng)意跟素材準(zhǔn)備，獸人項(xiàng)目組真的非常棒，在我設(shè)計(jì)空閑期至少提前了半年開(kāi)始準(zhǔn)備期，提前規(guī)劃官網(wǎng)，并給這次特色站預(yù)留了充分制作的時(shí)間，也就是說(shuō)這個(gè)特色站其實(shí)在去年10月份左右就已經(jīng)開(kāi)始規(guī)劃準(zhǔn)備了！

事實(shí)證明確實(shí)提前避免了很多問(wèn)題！

既然是核心經(jīng)典傳承，我這里首先給出了一個(gè)創(chuàng)意想法！

“獸人的艾倫很像電影超人的形象，所以我想以艾倫為主人公設(shè)定特色站劇情 一個(gè)陽(yáng)光明媚的下午，一個(gè)可愛(ài)的老婦人在廚房為孩子們準(zhǔn)備吃的，結(jié)果可怕的獸人大軍再次入侵了，他們踐踏了孩子們的玩具(一個(gè)帥氣的艾倫玩偶),各大廣播電視開(kāi)始播放獸人殘害善良人類的新聞，這是畫(huà)面一轉(zhuǎn)一個(gè)側(cè)影留著胡子的男人，緩緩放下手中自拍桿！默默的關(guān)上電視打開(kāi)衣柜，一件悉心保護(hù)的戰(zhàn)袍躺在里面，他就是艾倫！ 啪，他飛身沖破窗戶重返屬于他的戰(zhàn)場(chǎng)！”

ok!回歸現(xiàn)實(shí)，本來(lái)想用動(dòng)畫(huà)貫穿整個(gè)故事，加入互動(dòng)來(lái)完成，項(xiàng)目也覺(jué)得不錯(cuò)，盡管故事略顯老套，但是我們講究的是情懷，那一瞬間你就是艾倫，原來(lái)平靜的生活并不屬于他，就像速7的保羅，好了不提傷感的事！不過(guò)畢竟不是一個(gè)純找感覺(jué)的站，我們還是要有實(shí)際內(nèi)容，項(xiàng)目希望特色的內(nèi)容都能融入整個(gè)站，希望老玩家來(lái)到這里也能有所收獲了解網(wǎng)絡(luò)版獸人是如何玩的，新玩家進(jìn)來(lái)知道他是有歷史的！所以這個(gè)我自己滿意的方案被華麗麗的否決了！

方案擬定

方案被否決后我自己也緩了幾天，想法也需要重新醞釀 最終跟項(xiàng)目達(dá)成一致，策略就用我們小時(shí)候類似的塑料人物小兵那種感覺(jué)（可以展現(xiàn)游戲的特色），而主場(chǎng)景改成男主角艾倫的一個(gè)工作環(huán)境，一張破舊的木桌，一些燈光，一些古老的魔法書(shū)武器等散落，而艾倫在制定最新的對(duì)抗獸人的策略！不需要露臉，我們希望玩家能自己進(jìn)入角色，假想自己是艾倫以第一人稱視覺(jué)的感覺(jué)操作畫(huà)面！ 形式上想好用動(dòng)畫(huà)的方式引導(dǎo)操作，給用戶帶來(lái)體驗(yàn)上的形象感跟參與感！

素材需求

所有的想法在沒(méi)有素材面前都是空想，所以一確定設(shè)計(jì)方案，馬上開(kāi)始積極與美方ROBOT公司溝通，看需要多久可以提供素材支持！因?yàn)橛螒蚶锏淖烂姘ㄒ恍┑谰呷绻皇怯螒騼?nèi)的可能需要重新建模繪制！美方看到需求后提出看能不能在他們的一張宣傳小女巫的壁紙上進(jìn)行修改！

看到這張圖我們都比較驚喜因?yàn)檎门c創(chuàng)意方向有點(diǎn)不謀而合，我們需要進(jìn)行修改如下幾點(diǎn)：

1. 我們需要艾倫的手部介入，這樣才會(huì)有真實(shí)代入感

2. 我們需要一個(gè)骷髏金牌用來(lái)記錄獸人必須死獲得的榮譽(yù)

3. 需要艾倫的武器

4. 需要類似小時(shí)候玩的塑料獸人小兵排兵布陣

5. 書(shū)里的內(nèi)容改成各類陷阱，及游戲內(nèi)小地圖的進(jìn)攻路線圖

提出我們的想法后，接下來(lái)就是等待美方的調(diào)整，由于美方同時(shí)在進(jìn)行游戲內(nèi)版本的優(yōu)化調(diào)整，所以一度我們的需求延后，但好在我們需求提的夠早！ok,我們有的是時(shí)間等！ 下圖是素材最終調(diào)整后！

到這里素材調(diào)整其實(shí)已經(jīng)滿足我們的需求了，去掉了小女巫里很多紫紅的顏色，換成艾倫管用的藍(lán)黃色調(diào)。

設(shè)計(jì)成型

獸人屬于美式卡通，所以設(shè)計(jì)核心思路就是美式動(dòng)畫(huà)，整體設(shè)計(jì)去除質(zhì)感，走偏平比較歐美化路線！

在操作體驗(yàn)上我希望用戶跟界面可以進(jìn)行簡(jiǎn)單的互動(dòng)，借鑒類似iphone滑動(dòng)解鎖的感覺(jué)！很多優(yōu)秀的國(guó)外案例也是采用此法，同時(shí)也考慮了部分用戶可能不知道如何操作所以設(shè)計(jì)上下方手指指向也是操作滑塊區(qū)域！內(nèi)容動(dòng)畫(huà)上加入類似視頻的動(dòng)畫(huà)效果來(lái)開(kāi)啟新一輪艾倫對(duì)小獸人的圍剿！

進(jìn)行主場(chǎng)景后，我們需要對(duì)我們需要對(duì)雜亂桌面的物品進(jìn)行梳理排列,首先我們需要整理出我們需要表達(dá)的4個(gè)核心內(nèi)容，然后再找到相匹配的場(chǎng)景物件！

接下來(lái)就是實(shí)際執(zhí)行部分，想好大致動(dòng)畫(huà)效果，對(duì)桌面物件進(jìn)行重新排放，并對(duì)各個(gè)物件明暗關(guān)系重新處理，以下就是最終呈現(xiàn)效果圖！

動(dòng)畫(huà)討論及執(zhí)行部分

拉上重構(gòu)，動(dòng)畫(huà)進(jìn)行了幾種方案的討論

最終從網(wǎng)速及操作綜合考量，選擇動(dòng)畫(huà)完成入場(chǎng)及切換轉(zhuǎn)場(chǎng)，而重構(gòu)完成，鼠標(biāo)拖拉及少部分轉(zhuǎn)場(chǎng)，整個(gè)切面其實(shí)被切割成3段動(dòng)畫(huà)

1：首先所以桌面物品入場(chǎng)，slogen入場(chǎng)

2：拖動(dòng)滑塊，場(chǎng)景物體產(chǎn)生位移跟隨滑塊進(jìn)度

3：書(shū)頁(yè)翻動(dòng)，人物手需要指指點(diǎn)點(diǎn)示意，并配有背景人物聲音，表示艾倫已回歸！

整體的創(chuàng)意效果要的是，當(dāng)我們?cè)谕蟿?dòng)滑塊時(shí)就好像在一個(gè)視頻播放器里快進(jìn)，如果滑塊沒(méi)超過(guò)進(jìn)度一半，則自己回回到初始位置，物品也會(huì)歸位 動(dòng)畫(huà)的流暢我們希望是能達(dá)到視頻級(jí)的，這也是其中難度很大的而一個(gè)環(huán)節(jié)！ 拖動(dòng)滑塊部分因?yàn)橛谢?dòng)操作這部分由重構(gòu)完成，為了能精準(zhǔn)控制畫(huà)面每個(gè)元素動(dòng)的進(jìn)度用序列幀圖去解決！

動(dòng)畫(huà)那里如火如荼的進(jìn)行，但是之前擔(dān)心的問(wèn)題來(lái)了，畢竟所有物品都是靜態(tài)圖，我們需要他位移就會(huì)很假！第一版結(jié)果并不理想，為了達(dá)到動(dòng)畫(huà)視頻級(jí)效果， 經(jīng)歷無(wú)數(shù)次修改及電話溝通，慢慢優(yōu)化效果！還有個(gè)比較重要的問(wèn)題是

關(guān)于手部動(dòng)畫(huà)又陷入了無(wú)奈，動(dòng)畫(huà)那只能進(jìn)行簡(jiǎn)單的上下左右位移，讓整個(gè)手看上去非常的傻，呆板，怎么辦！

因?yàn)槭强鐕?guó)溝通，所以語(yǔ)言匱乏的我只好親自動(dòng)手實(shí)錄！

經(jīng)過(guò)多番努力，經(jīng)歷了不少時(shí)間，終于得到了我們想要的結(jié)果，也很感謝美方的支持，不僅提供單張手部序列幀，并且還有AE原文件！展示下部分靜態(tài)手部序列幀！

我們把手部序列全部提供給動(dòng)畫(huà)，經(jīng)過(guò)電話溝通表達(dá)了整體配合的方式，并增加了書(shū)翻頁(yè)的動(dòng)畫(huà)效果！這時(shí)候整體的動(dòng)畫(huà)已經(jīng)越來(lái)越趨向自然！ 最后把整體動(dòng)畫(huà)分解成之前說(shuō)的3個(gè)部分，下圖是第二部分分解重構(gòu)實(shí)現(xiàn)部分！

當(dāng)然內(nèi)頁(yè)的H5動(dòng)畫(huà)一個(gè)都不能少！每個(gè)細(xì)微動(dòng)畫(huà)也都是跟重構(gòu)進(jìn)行溝通后實(shí)現(xiàn)完成！

配音及配樂(lè)

為了增加玩家代入感，背景音樂(lè)及艾倫的聲音是必不可少的，訂好了艾倫的話?cǎi)R上找人開(kāi)始專業(yè)錄制，最終精簡(jiǎn)了話語(yǔ)！配上經(jīng)典的獸人音樂(lè)是不是感覺(jué)艾倫又回來(lái)了呢？

總結(jié)

少許遺憾就是為了加快前面動(dòng)畫(huà)的節(jié)奏刪減了砍掉了部分效果，使得整體故事性稍弱，但是自己還是比較滿意的，整個(gè)網(wǎng)站用了最低的成本，去模擬視頻類似的效果，受到項(xiàng)目組一致好評(píng)！配合新官網(wǎng)上線PV達(dá)到32萬(wàn)！對(duì)于之前數(shù)據(jù)已經(jīng)是大幅增長(zhǎng)！

這次項(xiàng)目的經(jīng)歷也讓自己認(rèn)識(shí)到，設(shè)計(jì)師在整個(gè)特色站中應(yīng)該起到的作用，他不僅僅是一個(gè)設(shè)計(jì)的執(zhí)行者，更是一個(gè)項(xiàng)目美術(shù)方面的監(jiān)制，你放松了尺度很可能最終效果就會(huì)差強(qiáng)人意，全程的創(chuàng)意表現(xiàn)及執(zhí)行基本都能保持初心這點(diǎn)其實(shí)聽(tīng)不容易，一個(gè)項(xiàng)目在完成前可能都會(huì)遇到各種不同的問(wèn)題，良好的溝通，堅(jiān)持的信念，提前的項(xiàng)目規(guī)劃往往可以事半功倍！

最后感謝跟我一起努力的項(xiàng)目組同事，感謝你們一如既往的支持設(shè)計(jì)師的想法，感謝重構(gòu)師及動(dòng)畫(huà)師，感謝你們的反復(fù)修改，完成了以前不常見(jiàn)的效果跟體驗(yàn)，謝謝！

體驗(yàn)地址：http://omd.qq.com/act/a20151208tese/?ADTAG=main.lfTop.tese

【VR設(shè)計(jì)好文合集】

可能是國(guó)內(nèi)第一個(gè)VR原創(chuàng)教程：
《騰訊干貨！設(shè)計(jì)師該怎樣從3個(gè)方面學(xué)習(xí)VR設(shè)計(jì)？》

VR設(shè)計(jì)指南：
《教程來(lái)了！VR設(shè)計(jì)指南之基礎(chǔ)概念與設(shè)計(jì)工具》

UX設(shè)計(jì)師的VR設(shè)計(jì)經(jīng)驗(yàn)：
《實(shí)戰(zhàn)教程來(lái)了！一名UX設(shè)計(jì)師的VR設(shè)計(jì)初體驗(yà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ū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量130萬(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