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