今天和大家分享獸人必須死的一個(gè)特色站，包括個(gè)人創(chuàng)意思路，設(shè)計(jì)及溝通執(zhí)行的一些經(jīng)驗(yàn)，不僅有成功的還有失敗的彎路，希望對(duì)大家有幫助。
項(xiàng)目背景 項(xiàng)目背景主要是為迎接第三次封閉測試，三 續(xù)目的是：
1. 希望過去玩獸人必須死1，2的單機(jī)用戶找回當(dāng)年虐殺小獸人的快感跟激情！
2. 同時(shí)也希望把游戲講究策略對(duì)抗的特點(diǎn)能表現(xiàn)出來
3. 吸引用戶訪問，為三測預(yù)熱做好鋪墊
開會(huì)討論 了解了三測的目的跟方向，接下來就是項(xiàng)目的創(chuàng)意跟素材準(zhǔn)備，獸人項(xiàng)目組真的非常棒，在我設(shè)計(jì)空閑期至少提前了半年開始準(zhǔn)備期，提前規(guī)劃官網(wǎng)，并給這次特色站預(yù)留了充分制作的時(shí)間，也就是說這個(gè)特色站其實(shí)在去年10月份左右就已經(jīng)開始規(guī)劃準(zhǔn)備了！ 事實(shí)證明確實(shí)提前避免了很多問題！ 既然是核心經(jīng)典傳承，我這里首先給出了一個(gè)創(chuàng)意想法！ “獸人的艾倫很像電影超人的形象，所以我想以艾倫為主人公設(shè)定特色站劇情 一個(gè)陽光明媚的下午，一個(gè)可愛的老婦人在廚房為孩子們準(zhǔn)備吃的，結(jié)果可怕的獸人大軍再次入侵了，他們踐踏了孩子們的玩具(一個(gè)帥氣的艾倫玩偶),各大廣播電視開始播放獸人殘害善良人類的新聞，這是畫面一轉(zhuǎn)一個(gè)側(cè)影留著胡子的男人，緩緩放下手中自拍桿！默默的關(guān)上電視打開衣柜，一件悉心保護(hù)的戰(zhàn)袍躺在里面，他就是艾倫！ 啪，他飛身沖破窗戶重返屬于他的戰(zhàn)場！” ok!回歸現(xiàn)實(shí)，本來想用動(dòng)畫貫穿整個(gè)故事，加入互動(dòng)來完成，項(xiàng)目也覺得不錯(cuò)，盡管故事略顯老套，但是我們講究的是情懷，那一瞬間你就是艾倫，原來平靜的生活并不屬于他，就像速7的保羅，好了不提傷感的事！不過畢竟不是一個(gè)純找感覺的站，我們還是要有實(shí)際內(nèi)容，項(xiàng)目希望特色的內(nèi)容都能融入整個(gè)站，希望老玩家來到這里也能有所收獲了解網(wǎng)絡(luò)版獸人是如何玩的，新玩家進(jìn)來知道他是有歷史的！所以這個(gè)我自己滿意的方案被華麗麗的否決了！
方案擬定 方案被否決后我自己也緩了幾天，想法也需要重新醞釀 最終跟項(xiàng)目達(dá)成一致，策略就用我們小時(shí)候類似的塑料人物小兵那種感覺（可以展現(xiàn)游戲的特色），而主場景改成男主角艾倫的一個(gè)工作環(huán)境，一張破舊的木桌，一些燈光，一些古老的魔法書武器等散落，而艾倫在制定最新的對(duì)抗獸人的策略！不需要露臉，我們希望玩家能自己進(jìn)入角色，假想自己是艾倫以第一人稱視覺的感覺操作畫面！ 形式上想好用動(dòng)畫的方式引導(dǎo)操作，給用戶帶來體驗(yàn)上的形象感跟參與感！
素材需求 所有的想法在沒有素材面前都是空想，所以一確定設(shè)計(jì)方案，馬上開始積極與美方ROBOT公司溝通，看需要多久可以提供素材支持！因?yàn)橛螒蚶锏淖烂姘ㄒ恍┑谰呷绻皇怯螒騼?nèi)的可能需要重新建模繪制！美方看到需求后提出看能不能在他們的一張宣傳小女巫的壁紙上進(jìn)行修改！
看到這張圖我們都比較驚喜因?yàn)檎门c創(chuàng)意方向有點(diǎn)不謀而合，我們需要進(jìn)行修改如下幾點(diǎn)： 1. 我們需要艾倫的手部介入，這樣才會(huì)有真實(shí)代入感 2. 我們需要一個(gè)骷髏金牌用來記錄獸人必須死獲得的榮譽(yù) 3. 需要艾倫的武器 4. 需要類似小時(shí)候玩的塑料獸人小兵排兵布陣 5. 書里的內(nèi)容改成各類陷阱，及游戲內(nèi)小地圖的進(jìn)攻路線圖 提出我們的想法后，接下來就是等待美方的調(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)畫，整體設(shè)計(jì)去除質(zhì)感，走偏平比較歐美化路線！ 在操作體驗(yàn)上我希望用戶跟界面可以進(jìn)行簡單的互動(dòng)，借鑒類似iphone滑動(dòng)解鎖的感覺！很多優(yōu)秀的國外案例也是采用此法，同時(shí)也考慮了部分用戶可能不知道如何操作所以設(shè)計(jì)上下方手指指向也是操作滑塊區(qū)域！內(nèi)容動(dòng)畫上加入類似視頻的動(dòng)畫效果來開啟新一輪艾倫對(duì)小獸人的圍剿！
進(jìn)行主場景后，我們需要對(duì)我們需要對(duì)雜亂桌面的物品進(jìn)行梳理排列,首先我們需要整理出我們需要表達(dá)的4個(gè)核心內(nèi)容，然后再找到相匹配的場景物件！ 接下來就是實(shí)際執(zhí)行部分，想好大致動(dòng)畫效果，對(duì)桌面物件進(jìn)行重新排放，并對(duì)各個(gè)物件明暗關(guān)系重新處理，以下就是最終呈現(xiàn)效果圖！
動(dòng)畫討論及執(zhí)行部分 拉上重構(gòu)，動(dòng)畫進(jìn)行了幾種方案的討論 最終從網(wǎng)速及操作綜合考量，選擇動(dòng)畫完成入場及切換轉(zhuǎn)場，而重構(gòu)完成，鼠標(biāo)拖拉及少部分轉(zhuǎn)場，整個(gè)切面其實(shí)被切割成3段動(dòng)畫 1：首先所以桌面物品入場，slogen入場 2：拖動(dòng)滑塊，場景物體產(chǎn)生位移跟隨滑塊進(jìn)度 3：書頁翻動(dòng)，人物手需要指指點(diǎn)點(diǎn)示意，并配有背景人物聲音，表示艾倫已回歸！ 整體的創(chuàng)意效果要的是，當(dāng)我們?cè)谕蟿?dòng)滑塊時(shí)就好像在一個(gè)視頻播放器里快進(jìn)，如果滑塊沒超過進(jìn)度一半，則自己回回到初始位置，物品也會(huì)歸位 動(dòng)畫的流暢我們希望是能達(dá)到視頻級(jí)的，這也是其中難度很大的而一個(gè)環(huán)節(jié)！ 拖動(dòng)滑塊部分因?yàn)橛谢?dòng)操作這部分由重構(gòu)完成，為了能精準(zhǔn)控制畫面每個(gè)元素動(dòng)的進(jìn)度用序列幀圖去解決！ 動(dòng)畫那里如火如荼的進(jìn)行，但是之前擔(dān)心的問題來了，畢竟所有物品都是靜態(tài)圖，我們需要他位移就會(huì)很假！第一版結(jié)果并不理想，為了達(dá)到動(dòng)畫視頻級(jí)效果， 經(jīng)歷無數(shù)次修改及電話溝通，慢慢優(yōu)化效果！還有個(gè)比較重要的問題是 關(guān)于手部動(dòng)畫又陷入了無奈，動(dòng)畫那只能進(jìn)行簡單的上下左右位移，讓整個(gè)手看上去非常的傻，呆板，怎么辦！ 因?yàn)槭强鐕鴾贤ǎ哉Z言匱乏的我只好親自動(dòng)手實(shí)錄！ 經(jīng)過多番努力，經(jīng)歷了不少時(shí)間，終于得到了我們想要的結(jié)果，也很感謝美方的支持，不僅提供單張手部序列幀，并且還有AE原文件！展示下部分靜態(tài)手部序列幀！ 我們把手部序列全部提供給動(dòng)畫，經(jīng)過電話溝通表達(dá)了整體配合的方式，并增加了書翻頁的動(dòng)畫效果！這時(shí)候整體的動(dòng)畫已經(jīng)越來越趨向自然！ 最后把整體動(dòng)畫分解成之前說的3個(gè)部分，下圖是第二部分分解重構(gòu)實(shí)現(xiàn)部分！ 當(dāng)然內(nèi)頁的H5動(dòng)畫一個(gè)都不能少！每個(gè)細(xì)微動(dòng)畫也都是跟重構(gòu)進(jìn)行溝通后實(shí)現(xiàn)完成！ 配音及配樂 為了增加玩家代入感，背景音樂及艾倫的聲音是必不可少的，訂好了艾倫的話馬上找人開始專業(yè)錄制，最終精簡了話語！配上經(jīng)典的獸人音樂是不是感覺艾倫又回來了呢？
總結(jié) 少許遺憾就是為了加快前面動(dòng)畫的節(jié)奏刪減了砍掉了部分效果，使得整體故事性稍弱，但是自己還是比較滿意的，整個(gè)網(wǎng)站用了最低的成本，去模擬視頻類似的效果，受到項(xiàng)目組一致好評(píng)！配合新官網(wǎng)上線PV達(dá)到32萬！對(duì)于之前數(shù)據(jù)已經(jī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í)聽不容易，一個(gè)項(xiàng)目在完成前可能都會(huì)遇到各種不同的問題，良好的溝通，堅(jiān)持的信念，提前的項(xiàng)目規(guī)劃往往可以事半功倍！ 最后感謝跟我一起努力的項(xiàng)目組同事，感謝你們一如既往的支持設(shè)計(jì)師的想法，感謝重構(gòu)師及動(dòng)畫師，感謝你們的反復(fù)修改，完成了以前不常見的效果跟體驗(yàn)，謝謝！