唯美武侠风！揭秘《Dragon Oathll》中文官网

引言

千篇一律的以具象原画或全彩人物模型为主要视觉形象的游戏网页设计已经不能充分体现新一代网游的魅力，当我们从更宏观的角度去审视《Dragon OathⅡ》这款游戏时，发现进入了一次对武侠新境界的思考。

项目简介

该游戏取材于华人作家金庸小说，背景设定于公元11世纪的古代中国，被定义为"依附光影魔力而创造的东方梦幻世界"。也是搜狐畅游采用自主研发的CycloneⅣ高级引擎描绘出来的有别于其他传统武侠的一次再升华。

项目所表达情感

武侠的感受也许是黑夜细雨中走入山门的剑客，也许是轻功掠过湖面激起的阵阵涟漪，甚至一阵清风，一片落叶，正是这些极具影响感官体验的写意元素，构成了人们对"武侠"最直观的意象。

受中国功夫和影视作品的影响，西方对中国功夫存在误解，这在近年来东方元素的西方网游中亦有体现，中国功夫不单是表面的拳脚格斗，中国功夫更多的是展现一种精神境界和战斗美感，Dragon OathⅡ欲传达的正是这种精神与意念。

项目分析

1、目标定位

在把握住原有老玩家的基础上拓展对武侠有感触的新玩家，这些新玩家中以80、90居多，他们对游戏的画质和场景以至于剧情的要求会更高，所以我们采用新的表现形式和高品质的画面效果来增加用户的粘性，使其对该游戏具有文化认同感和品牌的认知度。在这里新的风格和新的感官刺激就浮现出来了。

2、关键词

经过前期大量的市场调研与数据的分析后，我们为此次概念站确定的视觉关键词为"唯美的东方新武侠"，唯美来自用CycloneⅣ高级引擎带起来的光影盛宴，新武侠则是挖掘于古老中国一代代传下来的武学精神境界。

3、情绪板分析法

设计创意之前是需要大量去收集和整理一些与之相关的图片、文字和视频等资料，来丰富和支撑创意的延续性，从中抓住几个中心点进行的延展。（例如我们下面整理过的一些资料）

头脑风暴过后的一些主要表现唯美武侠的关键词，进而对关键词进行搜索。

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

唯美带给人一种梦幻般感受，是一种追求绝对的纯粹的美，有些现实中看不到的情景。在这款游戏里我们就能把梦幻变成现实。

侠客、酒器、刀剑、马匹、水墨、竹林等等

PS:我们做了很多前期的准备，准备越充分接下来的设计创意会更有说服力。不至于在最后改设计稿的时候没有了灵感和没有了设计的呈现，因为设计没有不改的，所以希望大家能抗到最后。

4、项目提供素材

水墨写意角色

文案

凶—当整个世界都与我为敌，我的眼中只剩杀戮！
堕—念极乐，一念修罗。佛心已碎，我只求一场解脱！
蝶—我已经躲了很久。这一次，就由我来守护！

素材整合

由于我们表现的角色是以黑白水墨为主的角色，所以上面收集的以具象画面的图素不能直接采用，需要继承和延续唯美武侠风的精神—美的浪漫和粗狂的侠客情怀。

视觉表现：

根据我们拿到的角色与文案进行接下来的设计创意：

1.黑白为主的水墨写意；
2.泼墨式的视觉冲击；
3.结合墨滴和中国红为设计元素；

4.角色之间近中远景的联系；
5.海报性质的元素整合，突出游戏的气氛。

对水墨的手法进行研究

优点：水墨具有柔性的表现力，视觉冲击力强
缺点：水墨用多会使页面发污发堵，并且水墨无骨，难以驾驭

表现形式：晕染、泼洒、喷溅、留白保证页面通透能更好的呼吸

草稿设计尝试

"凶"

草稿1:

画面中用纵向方式对页面进行分割，以半身水墨人设为主视觉，给人一种人物即将要走出画面的感觉，与之对应的方向采用了墨迹晕染开的视觉方式与血液进行融合，充分体现出了紧张的气氛。

(经过项目和市场的分析讨论，觉得页面缺少霸气，没有更充分突出人物。然后进行了下一版尝试)

草稿2:

画面把人物全部露出，并进行了横版设计，让文字部分和功能区域放在一起，使画面信息一目了然， 用水墨龙缠绕在人物身上，表现角色的狠。

(在接下来的谈论中又提到了一些关于页面张力的问题，虽然用人物做了主视觉，但是由于人物的写意风格，使得画面看不出来别的任何信息。)

自己当时的想法：（好吧，开始遇到了瓶颈，这样的问题提出来以后真是没办法解决了，画面纵向和横向都已经设计过了，接下来该往哪个方向走，张力和霸气怎么更有效的体现）

静下心来分析一下

页面是由人物、主标语、环境元素构成，所以的从这几个方面着手考虑：

1.画面颜色把控是否得当？
2.人设完整度是否达到预期效果？
3.主标语是否略显小，是否够张力？
4.环境元素的融合问题？

根据上述分析，继续了下几稿创意

草稿3

首先把主标语放大，用水墨笔触对字体进行加工，使之更流畅更霸气，采用人物和文案各占画面一半来达到视觉冲击力。

果然这样的创意很奏效，很快得到了大家的一直好评，不过接下来会是一些细节的调整，包括：

1.副标语的排列；
2.页面缠绕的龙再充实些；
3.LOGO下面墨迹虚化些；
4.次要背景减弱，感觉若隐若现即可。

最终稿

设计到这里该概念站的风格就定下来了，开始进行下面页面的处理，风格不变，手法不变，唯变的是些细节和视觉的节奏。

"堕"

稿（1）把原画中的飞鹰弱化，突出人物的细节，取近景并增加动感模糊，让人物有一飞冲天的感觉，用书法字反白压在画面的左侧，冲击画面。

稿（2）为了能使页面切换时，对浏览者有一个舒缓的过程，采用远景拉伸，让人和飞鹰结合，把堕字的一小部分叠加在背景里，使画面流动起来，让左边书法堕字做主视觉。这也和当时规划的中景 、远景、远景不谋而合。（确定稿）

"蝶"

稿（1）考虑到整站切换起来能够有视觉差异化，这张画面大量用了墨迹做背景，反白的蝶字会更具有说服力。

稿（2）取人物近景，与浏览者拉近距离，让水墨的虚和人物五官的实对比，打动观者，页面中增加了两只飞翔的小蝴蝶，更能体现出人物的柔美。

"画"

稿（1）用两股泼墨形式撞击后留下来的区域，撑开画面，以三角形为元件整合在画面，打破方方正正，给浏览者一种别样的感受。

稿（2）在原来基础上缩小，使得在小浏览器上面也可一睹<>游戏的场景和原画。

最终上线稿

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

结语

大家或许都会发现，有的时候一个优秀的设计稿，最后让改成了飞机稿，这里面的原因很多，这里就不多说了，以免被吐槽。我庆幸的是，做这个概念站能够有一些有效的建议和意见得以实施，并得到了各方的认可，算是在长达半个多月设计辛苦份上的一次勉励，这次不仅仅是对概念站的一次升华，也是对自己能力和想法的一次升华。

到我这里只完成了一半，接下来的事由FLANSH工程师和制作进行了一系列的动态艺术加工，让画面流动起来，那种大气国际化不言而喻。

================关于畅游VC================

搜狐畅游视觉设计中心团队。我们是从游戏和生活中汲取创意和灵感的一群设计精灵，用爱去释放奇妙的设计魔法，描绘让你我感动的虚拟人生。

官网博客：vc.changyou.com
新浪微博： @畅游VC
微信公众平台：cyou_vc
您也可以通过扫描下方二维码快速添加：