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