深淵裂隙新圖dnf的開啟方式(2)
深淵裂隙新圖dnf的開啟方式
三、執(zhí)行過程
主題畫面內(nèi)容確定
在創(chuàng)意與形式都確定后，便開始著手進行具體的執(zhí)行工作，因為最終期望的效果圖文并茂，且畫面要做到完美詮釋文字。所以，進行設(shè)計的第一步便是確立分段文案的畫面內(nèi)容。DNF已經(jīng)是一款存在7年的老游戲，時間積累下的游戲文化內(nèi)容比較厚重，需要好好惡補一下。尤其是每個畫面都要能勾起玩家的回憶，讓他們明白其中含義。具體內(nèi)容見下圖：
草圖
在每段文案的畫面內(nèi)容確定后，開始草圖的繪制，剛開始設(shè)想的時候并沒有想象到工作量會如此大，單是草圖的繪制和修改就花了將近3天時間。草圖的內(nèi)容不僅包括上圖提到的文案畫面，中間連接傳承的內(nèi)容也需要尋找素材，保證畫面內(nèi)容不會跑題，有游戲代入感。
考慮到畫面是在移動端展示的，所以單屏的內(nèi)容展現(xiàn)要具有完整性，同時各個文案主畫面之間要有一定的連貫性，這樣在H5的體驗中才會有高度的整體性與流暢性。上圖只是最初的草稿，80%的畫面內(nèi)容確定的方案，后期伴隨著文案的調(diào)整與各方合作團隊的協(xié)調(diào)，還有小部分的內(nèi)容修改，完整版會有變化。
色彩
內(nèi)容草稿基本確定后隨后又出了幾稿上色版本，根據(jù)之前找的意向圖有些參考。
最終經(jīng)過討論，方案一的效果處理以及色彩方向更符合DNF的調(diào)性。所以整幅畫面就是以矢量剪影的風(fēng)格進行繪制，當(dāng)初選擇這個方向一方面是因為矢量剪影的方式有力度感，符合DNF這種動作類游戲感覺，另一方面矢量剪影的處理相對簡單，相較于其他風(fēng)格的繪畫方式更加迅速。本身繪制工作量很大的情況下，效率還是很重要的。
字體
這個h5的更注重畫面效果，但字體也是很重要的元素。圖1的“keep fighting,勇士”是由字體設(shè)計大神高露潔設(shè)計的slogan，這次的頁面也需要有所體現(xiàn)，但考慮到兩種風(fēng)格的差別，所以在這里進行了細節(jié)的調(diào)整，用矢量直線勾邊的形式做了風(fēng)格的統(tǒng)一處理(如圖2)。圖3是這次活動的主題，設(shè)計的方向基本是延續(xù)keep fighting的風(fēng)格。突出筆畫的力量感和張揚的氣勢。
動畫
因為時間的緣故，這次活動的h5不能做全動畫的支持，所以在整個頁面的交互效果實現(xiàn)上以前端技術(shù)為主，只在人物的走動方面需要局部動畫的配合。感謝動畫組同學(xué)的臨時支持，人物的走動效果做的很細，但考慮到頁面大小以及加載時間等條件限制所以在保持走路動作視覺流暢的情況下盡量縮小文件的大小，最后只能截取一部分關(guān)鍵幀組合成h5上的人物走路效果。(補充一下，這里的人物需要兩個動作流程，一是走路，一是停留。兩者需要在前端技術(shù)的判斷下切換)。
Loading
或許大部分同學(xué)覺得loading頁不是很重要，但想要做一個完整的具有品質(zhì)感的活動頁面，loading當(dāng)然不能忽視。因為loading頁是用戶第一眼接收到的視覺信息，所以loading的視覺傳達為頁面起到一定的定調(diào)作用。用的好，能很好地激發(fā)用戶興趣。這里迎合現(xiàn)在移動端設(shè)計的趨勢，做了一個簡單的動畫。以黑鉆為主體，輔以光效和肌理的跳動效果。且看下圖。
完成稿
在純畫面的基礎(chǔ)上加入了標題，數(shù)據(jù)文案，以及版本信息和分享頁面等內(nèi)容。完善了動畫流程，并制定了交互規(guī)則。如需瀏覽頁面可掃描下方二維碼進入。
四、總結(jié)與反思
經(jīng)過前端與開發(fā)的反復(fù)調(diào)試，活動頁面于5月22日上線(比預(yù)計日期推遲了一天)，因此也沒有趕上dnf首波活動的流量峰值期，因為工作量太大，前段和開發(fā)的同學(xué)也是日夜趕工才把內(nèi)容搞定，好辛苦大家。數(shù)據(jù)在上面已經(jīng)有所展示，應(yīng)該說對于一個h5頁面來講這樣的數(shù)據(jù)算是不錯。 在數(shù)據(jù)取得良好結(jié)果的同時，作為創(chuàng)意人員和設(shè)計師我們也一直在反思，究竟我們的創(chuàng)意與視覺能為活動作出多少實質(zhì)性的貢獻，假如這個活動頁面沒有最后幾頁的版本信息與轉(zhuǎn)發(fā)抽獎的活動，用戶只是單純的來回憶過去的話，這個頁面在保持同樣創(chuàng)意與視覺的情況下，數(shù)據(jù)會是多少，幾十萬，幾萬抑或多少?有關(guān)注h5營銷領(lǐng)域的同學(xué)都曾見過“w”的優(yōu)秀頁面，幾乎每個創(chuàng)意都會引爆朋友圈，而且內(nèi)容都偏軟性，大致風(fēng)格是先以好玩的創(chuàng)意，優(yōu)秀的文案吸引大家的注意，最后再放出廣告信息，其頁面的內(nèi)容更偏向品牌價值的傳播而非運營內(nèi)容。
或許品牌價值傳播的這一條路已經(jīng)被w公司的玩法打通了，但h5頁面所能承載的功能價值不僅僅局限在品牌，更多廠商活動，新聞資訊，熱點事件等等硬性內(nèi)容要如何玩好玩轉(zhuǎn)，也是同樣值得我們一起思考的問題，當(dāng)營銷圈子從“好玩”的玩法中冷靜下來，未來會有什么更加新穎的形式和創(chuàng)意能夠引爆移動互聯(lián)網(wǎng)?
說這些似乎有些跑題，其實想說的無非是對于h5的一些思考，這個基于移動端的全新的營銷形式有太多東西有待發(fā)覺。 回到項目本身，說起來還是有很多遺憾，如果這個h5能用純動畫地方式實現(xiàn)，或許體驗會更加流暢，如果文案地編排方式能夠更新穎一些，或許用戶讀的會更爽，如果交互形式考慮地更別致一些，整個頁面可能會有不同地體驗。然而事實上并沒有什么如果，這些想法或許能在下一次地項目中得到體現(xiàn)?？傊趫F隊轉(zhuǎn)型期，我們的身份從一般意義上負責(zé)執(zhí)行地設(shè)計師轉(zhuǎn)變?yōu)閰⑴c前期策劃與內(nèi)容定制的創(chuàng)意人員，所要面臨的挑戰(zhàn)還是不小的。各方面的要求都要有所兼顧，不能無謂的夸張創(chuàng)意的形式，也不能一味的追求品牌效果的最大化，怎樣把有趣有意思的創(chuàng)意和實質(zhì)性的游戲內(nèi)容良好結(jié)合才是我們最應(yīng)該做好最對的事情。
猜你喜歡：