引言

千篇一律的以具象原畫或全彩人物模型為主要視覺形象的游戲網(wǎng)頁設(shè)計(jì)已經(jīng)不能充分體現(xiàn)新一代網(wǎng)游的魅力，當(dāng)我們從更宏觀的角度去審視《Dragon OathⅡ》這款游戲時，發(fā)現(xiàn)進(jìn)入了一次對武俠新境界的思考。

項(xiàng)目簡介

該游戲取材于華人作家金庸小說，背景設(shè)定于公元11世紀(jì)的古代中國，被定義為"依附光影魔力而創(chuàng)造的東方夢幻世界"。也是搜狐暢游采用自主研發(fā)的CycloneⅣ高級引擎描繪出來的有別于其他傳統(tǒng)武俠的一次再升華。

項(xiàng)目所表達(dá)情感

武俠的感受也許是黑夜細(xì)雨中走入山門的劍客，也許是輕功掠過湖面激起的陣陣漣漪，甚至一陣清風(fēng)，一片落葉，正是這些極具影響感官體驗(yàn)的寫意元素，構(gòu)成了人們對"武俠"最直觀的意象。

受中國功夫和影視作品的影響，西方對中國功夫存在誤解，這在近年來東方元素的西方網(wǎng)游中亦有體現(xiàn)，中國功夫不單是表面的拳腳格斗，中國功夫更多的是展現(xiàn)一種精神境界和戰(zhàn)斗美感，Dragon OathⅡ欲傳達(dá)的正是這種精神與意念。

項(xiàng)目分析

1、目標(biāo)定位

在把握住原有老玩家的基礎(chǔ)上拓展對武俠有感觸的新玩家，這些新玩家中以80、90居多，他們對游戲的畫質(zhì)和場景以至于劇情的要求會更高，所以我們采用新的表現(xiàn)形式和高品質(zhì)的畫面效果來增加用戶的粘性，使其對該游戲具有文化認(rèn)同感和品牌的認(rèn)知度。在這里新的風(fēng)格和新的感官刺激就浮現(xiàn)出來了。

2、關(guān)鍵詞

經(jīng)過前期大量的市場調(diào)研與數(shù)據(jù)的分析后，我們?yōu)榇舜胃拍钫敬_定的視覺關(guān)鍵詞為"唯美的東方新武俠"，唯美來自用CycloneⅣ高級引擎帶起來的光影盛宴，新武俠則是挖掘于古老中國一代代傳下來的武學(xué)精神境界。

3、情緒板分析法

設(shè)計(jì)創(chuàng)意之前是需要大量去收集和整理一些與之相關(guān)的圖片、文字和視頻等資料，來豐富和支撐創(chuàng)意的延續(xù)性，從中抓住幾個中心點(diǎn)進(jìn)行的延展。（例如我們下面整理過的一些資料）

頭腦風(fēng)暴過后的一些主要表現(xiàn)唯美武俠的關(guān)鍵詞，進(jìn)而對關(guān)鍵詞進(jìn)行搜索。

唯美、夢幻、淡雅、星空、云 等等

唯美帶給人一種夢幻般感受，是一種追求絕對的純粹的美，有些現(xiàn)實(shí)中看不到的情景。在這款游戲里我們就能把夢幻變成現(xiàn)實(shí)。

俠客、酒器、刀劍、馬匹、水墨、竹林等等

PS:我們做了很多前期的準(zhǔn)備，準(zhǔn)備越充分接下來的設(shè)計(jì)創(chuàng)意會更有說服力。不至于在最后改設(shè)計(jì)稿的時候沒有了靈感和沒有了設(shè)計(jì)的呈現(xiàn)，因?yàn)樵O(shè)計(jì)沒有不改的，所以希望大家能抗到最后。

4、項(xiàng)目提供素材

水墨寫意角色

文案

兇—當(dāng)整個世界都與我為敵，我的眼中只剩殺戮！
墮—念極樂，一念修羅。佛心已碎，我只求一場解脫！
蝶—我已經(jīng)躲了很久。這一次，就由我來守護(hù)！

素材整合

由于我們表現(xiàn)的角色是以黑白水墨為主的角色，所以上面收集的以具象畫面的圖素不能直接采用，需要繼承和延續(xù)唯美武俠風(fēng)的精神—美的浪漫和粗狂的俠客情懷。

視覺表現(xiàn)：

根據(jù)我們拿到的角色與文案進(jìn)行接下來的設(shè)計(jì)創(chuàng)意：

1.黑白為主的水墨寫意；
2.潑墨式的視覺沖擊；
3.結(jié)合墨滴和中國紅為設(shè)計(jì)元素；

4.角色之間近中遠(yuǎn)景的聯(lián)系；
5.海報性質(zhì)的元素整合，突出游戲的氣氛。

對水墨的手法進(jìn)行研究

優(yōu)點(diǎn)：水墨具有柔性的表現(xiàn)力，視覺沖擊力強(qiáng)
缺點(diǎn)：水墨用多會使頁面發(fā)污發(fā)堵，并且水墨無骨，難以駕馭

表現(xiàn)形式：暈染、潑灑、噴濺、留白保證頁面通透能更好的呼吸

草稿設(shè)計(jì)嘗試

"兇"

草稿1:

畫面中用縱向方式對頁面進(jìn)行分割，以半身水墨人設(shè)為主視覺，給人一種人物即將要走出畫面的感覺，與之對應(yīng)的方向采用了墨跡暈染開的視覺方式與血液進(jìn)行融合，充分體現(xiàn)出了緊張的氣氛。

(經(jīng)過項(xiàng)目和市場的分析討論，覺得頁面缺少霸氣，沒有更充分突出人物。然后進(jìn)行了下一版嘗試)

草稿2:

畫面把人物全部露出，并進(jìn)行了橫版設(shè)計(jì)，讓文字部分和功能區(qū)域放在一起，使畫面信息一目了然， 用水墨龍纏繞在人物身上，表現(xiàn)角色的狠。

(在接下來的談?wù)撝杏痔岬搅艘恍╆P(guān)于頁面張力的問題，雖然用人物做了主視覺，但是由于人物的寫意風(fēng)格，使得畫面看不出來別的任何信息。)

自己當(dāng)時的想法：（好吧，開始遇到了瓶頸，這樣的問題提出來以后真是沒辦法解決了，畫面縱向和橫向都已經(jīng)設(shè)計(jì)過了，接下來該往哪個方向走，張力和霸氣怎么更有效的體現(xiàn)）

靜下心來分析一下

頁面是由人物、主標(biāo)語、環(huán)境元素構(gòu)成，所以的從這幾個方面著手考慮：

1.畫面顏色把控是否得當(dāng)？
2.人設(shè)完整度是否達(dá)到預(yù)期效果？
3.主標(biāo)語是否略顯小，是否夠張力？
4.環(huán)境元素的融合問題？

根據(jù)上述分析，繼續(xù)了下幾稿創(chuàng)意

草稿3

首先把主標(biāo)語放大，用水墨筆觸對字體進(jìn)行加工，使之更流暢更霸氣，采用人物和文案各占畫面一半來達(dá)到視覺沖擊力。

果然這樣的創(chuàng)意很奏效，很快得到了大家的一直好評，不過接下來會是一些細(xì)節(jié)的調(diào)整，包括：

1.副標(biāo)語的排列；
2.頁面纏繞的龍?jiān)俪鋵?shí)些；
3.LOGO下面墨跡虛化些；
4.次要背景減弱，感覺若隱若現(xiàn)即可。

最終稿

設(shè)計(jì)到這里該概念站的風(fēng)格就定下來了，開始進(jìn)行下面頁面的處理，風(fēng)格不變，手法不變，唯變的是些細(xì)節(jié)和視覺的節(jié)奏。

"墮"

稿（1）把原畫中的飛鷹弱化，突出人物的細(xì)節(jié)，取近景并增加動感模糊，讓人物有一飛沖天的感覺，用書法字反白壓在畫面的左側(cè)，沖擊畫面。

稿（2）為了能使頁面切換時，對瀏覽者有一個舒緩的過程，采用遠(yuǎn)景拉伸，讓人和飛鷹結(jié)合，把墮字的一小部分疊加在背景里，使畫面流動起來，讓左邊書法墮字做主視覺。這也和當(dāng)時規(guī)劃的中景 、遠(yuǎn)景、遠(yuǎn)景不謀而合。（確定稿）

"蝶"

稿（1）考慮到整站切換起來能夠有視覺差異化，這張畫面大量用了墨跡做背景，反白的蝶字會更具有說服力。

稿（2）取人物近景，與瀏覽者拉近距離，讓水墨的虛和人物五官的實(shí)對比，打動觀者，頁面中增加了兩只飛翔的小蝴蝶，更能體現(xiàn)出人物的柔美。

"畫"

稿（1）用兩股潑墨形式撞擊后留下來的區(qū)域，撐開畫面，以三角形為元件整合在畫面，打破方方正正，給瀏覽者一種別樣的感受。

稿（2）在原來基礎(chǔ)上縮小，使得在小瀏覽器上面也可一睹<>游戲的場景和原畫。

最終上線稿

地址：http://www.dragonoath2.com/

結(jié)語

大家或許都會發(fā)現(xiàn)，有的時候一個優(yōu)秀的設(shè)計(jì)稿，最后讓改成了飛機(jī)稿，這里面的原因很多，這里就不多說了，以免被吐槽。我慶幸的是，做這個概念站能夠有一些有效的建議和意見得以實(shí)施，并得到了各方的認(rèn)可，算是在長達(dá)半個多月設(shè)計(jì)辛苦份上的一次勉勵，這次不僅僅是對概念站的一次升華，也是對自己能力和想法的一次升華。

到我這里只完成了一半，接下來的事由FLANSH工程師和制作進(jìn)行了一系列的動態(tài)藝術(shù)加工，讓畫面流動起來，那種大氣國際化不言而喻。

================關(guān)于暢游VC================

搜狐暢游視覺設(shè)計(jì)中心團(tuán)隊(duì)。我們是從游戲和生活中汲取創(chuàng)意和靈感的一群設(shè)計(jì)精靈，用愛去釋放奇妙的設(shè)計(jì)魔法，描繪讓你我感動的虛擬人生。

官網(wǎng)博客：vc.changyou.com
新浪微博： @暢游VC
微信公眾平臺：cyou_vc
您也可以通過掃描下方二維碼快速添加：