浅谈寻仙游戏网站中国风元素的应用

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:站酷   作者:yuanX2

关键词

打开浏览器,网游页面上的毛笔书法,祥云龙纹的中国风元素是否让你麻木?来看下新寻仙吧,这里将为你带来的是:远看山有色,静听水无声。春去花还在,人来鸟不惊的皮影戏画卷。

一、项目介绍

寻仙作为一款08年公测的产品至今,以其独特的美术风格和多元化的游戏玩法成为国内大型MMORPG中的一款经典之作。

游戏版本的不断更新,新鲜玩法的注入,一直以来是寻仙吸引众多玩家买点。每次游戏中的重要更新是宣传游戏品牌,增强玩家情感粘性的一个重要时机,是产品运营中的总要环节。

浅谈寻仙游戏网站中国风元素的应用

二、项目分析

新寻仙品牌的刷新过程,也是对整个寻仙视觉包装的提升过程。不光是游戏内产品品质的提高,整个网络传播中的视觉表现也从新整合设计。寻仙皮影戏站的设计,正是在这系列的刷新后涅磐重生的。

产品刷新时间轴:

1:2012年底,,寻仙品牌刷新,全新神秘站点推出引起各界热议。最后以传承中国风尽在新寻仙的概念揭晓,力图唤起玩家对传统中国文化的关注,增加用户粘性,受到了新老玩家的一致好评。

浅谈寻仙游戏网站中国风元素的应用

2:紧接着是全新品牌战的推出,将寻仙以往电影·电视·配音·配乐各方面的合作全部整合后面向玩家,作为玩家记忆与游戏发展里程碑的见证。

浅谈寻仙游戏网站中国风元素的应用

浅谈寻仙游戏网站中国风元素的应用

3:最后全新官网改版的上线,对用户交互以及网站主视觉的重新梳理。

浅谈寻仙游戏网站中国风元素的应用

4:皮影戏页面是对神秘站用户探秘内容的衍生,是新寻仙品牌刷新以来第一个大型专题的视觉展示。

三、草案设计与风格讨论

皮影戏的引入,是对在中国风风格设计的一次新的尝试。以往的水墨,祥云,书法等设计元素,已经无法再满足寻仙作为一款玩尽中国风元素的载体,所以决定了用传统艺术中的皮影戏来设计寻仙新版本的预热站。以说书人形象为主形象,旁白贯穿始终,传达给用户新寻仙传承中国风的品牌文化。

浅谈寻仙游戏网站中国风元素的应用

设计初期准备:对皮影戏表演形式的整理,关键字的提炼,在老照片中寻找设计灵感和视觉发力点。提炼了游戏产品的皮影戏风格,配合当下设计趋势的配色和设计元素。

浅谈寻仙游戏网站中国风元素的应用

浅谈寻仙游戏网站中国风元素的应用

四、设计执行与制作

1:舞台还原

将过去皮影戏舞台搬到页面上明显是不现实的。原因有两点:一是因为网页尺寸的限制,是无法保证在不同分辨率下舞台视觉效果体验的;二是复杂的舞台效果也会影响到用户体验和重要按钮讯息的传达。

故,选择了提取皮影戏舞台的重要元素,设计成一个屏风墙用松柏雕梁的装饰达到整个站氛围的营造。

浅谈寻仙游戏网站中国风元素的应用

浅谈寻仙游戏网站中国风元素的应用

2:皮影戏还原

记忆中的皮影戏是在昏黄灯光下若影若现的人影,半透明的油纸材质在画布上投上重重的影子。经过与动画组同学的讨论,在原画设计上采用了矢量的半透明原画,在flash中利用混合选项的阴影模拟皮影打到画布上的效果,同时在整个页面上罩上了一层半透明的布纹效果。这样制造出一个生动皮影戏观感。

浅谈寻仙游戏网站中国风元素的应用

浅谈寻仙游戏网站中国风元素的应用

3:设计细节考虑

由于整个站的视觉上比较繁复,所以弱化了UI质感,以大的形状来取代厚重的细节,将每出戏的导航设计成了戏院翻牌的样子。

为了更符合第一视觉的观影体验,从远·中·近景的景深触犯在页面最前方设置了太师椅和松枝前景,让整个页面的气氛更加生动有趣。

浅谈寻仙游戏网站中国风元素的应用

浅谈寻仙游戏网站中国风元素的应用

4:用户体验构想:

整个版本前瞻的内容是由说书人音频道出,配合动画展现。用户以第一视角观看内容效果最佳,所见即所得。如果一个预热站只有说书人的单一说书岂不是很单调?既然是全站flash那就加入一些用户交互的小彩蛋吧。页面中关于剧情内容的前景是需要用帮助才能进行,比如把小孩和宝箱丢入大海-0-。

浅谈寻仙游戏网站中国风元素的应用

五、最终效果

设计最终力在还原整个古时观看皮影戏舞台的场景,昏黄的灯光,松鹤延年的镂空画屏,厚重的太师椅,前景的松柏盆栽,而用户就像以第一观影人的身份坐落期间,观看说书人奖整部寻仙的版本前瞻娓娓道来。

浅谈寻仙游戏网站中国风元素的应用

浅谈寻仙游戏网站中国风元素的应用

浅谈寻仙游戏网站中国风元素的应用

六、专题总结

感谢重庆漫想族对uimaker.com/uimakerdown/">素材需求的高度完成和配合,动画重构的同学对设计稿的高度还原,对页面加载和用户体验的反复修正。

个人感悟:重点项目设计完成,是需要前期大量准备和素材收集的。同时要预估每个时间节点加以推进。整个设计过程算是设计师对品牌一个自我认知的过程。

从品牌传播的意识出发:对于一个在玩家心里已经有5年的产品而言,设计更多的要做的是对品牌文化的传承和对玩家情感的挖掘。在求新的同时也需要正能量的发现和正确的态度打动玩家用户。

 收藏