网易主美深度拆解:运营18年的老产品,如何靠一套理念华丽蜕变?

文/ 以撒 2021-04-29 13:31:28

提到《大话西游》(下称大话),你会想到什么画面?我指的是网易运营了18年的端游。

或许你印象中会有以下这些画面:从最早的写实风到之后有点“古风”的感觉,不管怎么变换,看起来似乎都有些古早和下沉,构图上大多以人物为主体,设计也相对简单粗暴。

2.png

可是再看看他们近几年的素材,我怀疑我吃错药了:

3.png

点开他们的网页,活动宣传图都上了不止一个档次:

4.png

不止是角色变好看了,他们的构图也变得更加注重空间感。除了敢用大面积留白,还放弃了以前角色怼脸的设计方式,转而化用书法一类的传统元素来突出主题。

5.png

聪明的你一定能想到:在这背后不止是技术的进步,他们肯定有什么颠覆性的理念变化。这种变化除了让设计更大气,也在气质上增添了一种说不清道不明的国风味道。他们到底做了什么?

4月26日,网易游戏学院举办了2021N.Game网易游戏开发者峰会。28日晚,《大话西游2》经典版、免费版主美何丽华就以《大话西游——十八年国风审美生命力》为主题,讲了讲大话美术的迭代历程和设计理念。

在整理之前,葡萄君也没有抱很高的期待值。但听完之后,我发现这次分享包含了不少从底层打通的设计思路,而且讲解相当通俗易懂,让我这个非美术出身的人也看得频频点头。 

例如他们从古典舞中得到过灵感,找出了契合国风的基础形状来强化风格;在“表面功夫”做足之后,他们又从唐俑、壁画等传统文化中得到启发,让设计变得更加丰满。对长线运营十八年的大话来说,这些变化显然相当重要。而对其他阶段的项目来说,这种由浅入深的复盘也难能可贵。 

以下是经过整理和摘录的分享内容:

6.png

圆曲之道

大话的美术迭代,要从「圆曲之道」开始讲。我们的团队成员都是古风爱好者,有一个小姐姐特别喜欢中国古典舞,我们从她身上学到很多。大家有没有发现,古典舞的舞者一直在各种旋转、画圆?

7.gif

左   邵俊婷  北舞研究生部舞蹈领域艺术硕士十周年实践展演 

右  北舞2015级表演班  央视国家宝藏版《纸扇书生》

有人说,中国古典舞就是画圆的艺术。我们来观察一下圆这个几何图形——它为什么可以被抓取出来,做为国风审美的代表?

8.png

我们看一下这张图:非常普通的植物剪影、方形细框,几乎没有任何风格倾向。大家有没有办法让它看起来显得国风一点?

9.png

按一般套路加一些中国元素装饰,好像确实国风了一点:

10.png

但有没有觉得装饰太多会显得复杂、老旧?因为现代审美普遍倾向于更简洁的造型。那我们来试试圆。有没有感觉到一下就国风了起来?而且比加纹饰的效果更好。这是为什么?

11.png

原因在于,我们传统文化中就有非常多圆的存在。先从右边看起:这个圆形的光照在墙上,再加上竹林的影子,有没有一种“漫步竹林中、遥望天上月”的感受?这其实是一种属于中国的独特寓意。

12.png

包括左上传统园林里常见的月洞门,如果把它换成方形,可能就和我们小区的单元门差不了太多。左下这副圆形镜框和我们刚才的例子一样,这种装裱方式叫做“镜片”。单看画面内容非常抽象,也没有任何倾向,但是有了这个圆,整体就国风了很多。

这些随处可见的圆,在我们的生命里潜移默化、给了许多暗示。所以无论是美宣还是界面实例,大话在美术表现上也用了非常多的圆,它给我们提供了特别符合国风审美的形式感:

13.png

在这个安装下载的界面中,可以看到桃花、水墨之类的国风元素,但感觉还是差那么一点点。

14.png

大家注意看下右下这个方形的按钮,如果我们把它换成圆,有没有觉得瞬间别致了很多?它虽然很小,但却可以马上提升画面整体的品质感。

15.png

我们再来回顾一下,给我们带来很多灵感的舞蹈之圆。不仅仅是中国古典舞,几乎所有舞蹈都离不开旋转,同样是画圈,它们的区别体现在什么地方?

16.gif

左一出处:孙灿 唐印 第十二届全国桃李杯,其余源自网络

像芭蕾舞、交谊舞非常端庄优雅,转圈比较单一,中国舞更强调灵活、多变;像一些韩舞、宅舞会强调性感、可爱,中国舞就相对内敛、含蓄;探戈、街舞强调力度感,中国舞相比起来就更柔和自然。

我其实更喜欢中国舞的圆,动静都有韵味、行云流水。那又是什么给了我们这种行云流水的感受?是曲。因为中国舞中,圆和圆之间连续的曲线非常灵活多变,各个方向都有非常丰富的节奏和变化。

17.png

我们再来做一个小实验:这是一些很简单的黑白线条,很简洁、现代,即使有“镜片”相框的加持,好像也没有什么风格倾向:

18.png

我们试一下把图中的直线变成曲线,瞬间就国风多了——这个曲线就像一片连绵的远山,但它的层次、颜色其实都没有变。

19.png

我们传统文化中的曲线也非常多,比如盆景、九曲回廊、太湖石、迎客松这些典型的国风符号:

20.png

可能有一些同学会有疑问:盆景、九曲廊桥是人工所造,但太湖石、迎客松不是天然就长这样的吗?确实是,但它们也是经过国人审美的挑选,才成为了国风代表的物象。当外国人说到松树,他们联想到的应该是类似于圣诞树的形状。对比一下两种松树,哪一种更中国呢?

21.png

所以在游戏中,我们也使用了大量曲的元素——红旗招展、墨色渲染路线。整体画面趋势非常简洁,但很有气势。从曲的动势中,能感觉到气韵在流动。

22.png

23.png

界面上的应用也一样,比如闯关界面加上曲线,就能显得过程更加曲折坎坷:

24.png

好,现在我们有两个国风工具:一个圆,一个曲,而它们还可以再次结合。

25.png

自然界的曲和圆真是太多了,因为真正方直的物象很难自然形成。即使刚崩裂的方形石头,经过岁月打磨也会变成圆和曲的形态。大到宇宙星球、小到粒子,圆与曲既是它们的轮廓表现,也是运动的轨迹。所以圆曲会给人一种自然、循环、流动的感受。

26.png

大话的宣传美图就有很多圆曲的表现,它们非常符合国风审美。大家能感受到当中循环、流动的感觉吗?

27.png

我们再来看看东西方园林设计的差异:西式花园是经过精心修剪的,有一种几何秩序、人工干预的美感。

28.png

而中式园丁下手十分巧妙,仿佛植物天然就长成这样。他们追求的是大巧不工、天然去雕饰的美感。

29.png

对比起来,西式花园平直宽阔、周围一目了然;而我们中式园林好像特别怕一目了然,会通过假山照壁、曲桥回廊来制造迂回婉转的感觉,追求移步换景、曲径通幽的意趣,这就是圆曲流动、循环的体现。

我们还可以探究的更深一点,比如传统文化中圆曲的内核。与直白的直线相比,迂回的曲线是不是更委婉、更含蓄?与充满棱角的方相比,圆是不是更内敛、克制呢?

30.png

然后我们来欣赏一段舞蹈《爱莲说》。注意看这个回眸,真是太美了。

31.gif



出处:林霖 爱莲说 北京舞蹈学院 练功室版

我想说的是,这个回眸不是直白地看向你,而是经过垂首、回眸、微笑,再垂首,这一系列曲折的动态来表现。这种曲折就像诗里说“不胜凉风的娇羞”、“欲说还休,却道天凉好个秋”的感觉,给了我们很大的想象空间。如果现实中有妹子这么看向你,你会不会产生一点幻觉?

32.png


出处:林霖 爱莲说 北京舞蹈学院 练功室版

看过圆和曲之后,我们再看这两张画,有没有新的想法?同样是我们大话的主角英女侠,下面这张有很大的改变:首先主角不再作为前景,而是居于屏风之后,有一种犹抱琵琶半遮面的意趣;其次人物也不再直视观者,而是处于垂眸的状态。

33.png

回顾一下刚才说的圆曲之道:从形态的圆曲结合到情态的圆曲结合,我们做国风项目可以多多接触各种传统文化的滋养。毕竟看起来和美术没有直接联系的古典舞,也能帮助我们领会圆曲的意蕴。

相由心生

说完圆曲之道,我们来看「相由心生」这个部分。我会从形形色色、象征意义、角色背后三个层次来说明,怎么从藏品或传统文化里汲取创作灵感。

形形色色 

形形色色,就是指从外观和色彩上切入、借鉴。比如基本上每个游戏都会有春节时装。

怎么做出差异、找到属于大话的特色?我们的原画小哥在讨论方案时,翻到了在西安、国博观展时搜集的资料:这些唐朝的侍女陶俑有漂亮的曲线、好看的中国红,特别是踏马出游的帏帽,在今天看起来也相当时髦,所以我们决定用帏帽作为春节时装的主要设计点。

37.png

平时,我们还有搜集时装秀视频的习惯。下面是国内一个古代服饰复原团队的作品,从中能很好地感受到帏帽飘逸的动态。

38.gif

襦裙、披帛加帏帽,这种典型的唐风形制,有一种中国风的本质与美感,非常符合大话在审美方向上的追求。

39.png

图片来源于二〇二〇·中國裝束復原秀

于是我们以踏雪和寒梅为主题,设计了下面这套时装。其中红白大面积的配色、两种不同材质的搭配运用,都有比较直接地借鉴了唐俑的形制。

40.png

除了时装概念本身,原画小哥在宣传素材上也运用了前面说到的圆曲意趣、留白处理,引入一些故事性的想象空间。在这一系列的美术包装之下,这套踏雪寻梅成为了当年时装的爆款,也成了大话团队汲取、重构、应用的典型案例。

41.png

除此之外,我们也将大话拓展到了各种舞台,比如和屈汀南老师合作实体时装、登上春晚舞台。总结一下,形形色色就是从形体和外观上参考古代的真实形制,这样比较直观,也容易出效果。

42.png

象征意义

大家知道大话有多少个角色吗?主角一共有52个,真是辛苦了画这张长卷的同学。

43.png

很多古风游戏以门派切入,强化门派特征。而大话以单个角色作为切入点,每个主角的差异性都很大,故事性也很强。这就引出了大话角色设计的核心需求:如何在52个主角之外再塑造新的角色,并且让人印象深刻。

为了做到这一点,我们从法海寺的资料里又翻出来一些宝藏——水月观音的典故:观音身上满布璎珞宝珠,除了这些精美的装饰,大家有没有看到那层薄薄的细纱?

44.png

放大这些细节,我们会看到纱上有六边形的花朵。它既象征坚固金刚,又代表圣洁,是菩萨镜花水月、真实不虚的印照。

45.png

这些象征性的细节,对我们思考方式的影响潜移默化。设计龙族主角概念时,原画小哥就用这种寓意、象征的思路设计出了龙族男主的角色。 

在资料库中,他找到了一颗冰冻心脏的图片。然后就以此为原型,在龙族男主的身体里安上了一颗冰心,呼应他作为龙族行者冷心悟道的主题——他的心很冰冷,但有一天也会被人融化。

46.png

主旨定好以后,头发、衣服、武器的设计也就迎刃而解——全部都由冰冷的海底得来,没有人为痕迹。这种思考模式,来源于对细节、局部象征意义的提取,由一及全。

47.png

角色背后

在思考文化内核时,原画小哥又掏出了法海寺的壁画——去采风一趟真是太有用了, 什么素材都有。

48.png

这个鬼子母的壁画,除了行云流水的用线和颜色吸引我之外,故事也很有趣:

鬼子母跟鬼王有一万个孩子,她最喜欢小儿子嫔伽罗。她每天都要出去吃一个别人的孩子,有一天她回家找不到嫔伽罗了,伤心欲绝之际只能去找通晓过去未来的佛祖。 

佛祖对她说:你有一万个孩子,少一个又如何呢?她说,少一个也是我的命根,没有嫔伽罗我也活不成了。佛祖又说,世间许多女子都只有一个孩子,却被你吃掉了。你能体会她们的伤痛吗?鬼子母听完顿悟,佛祖打开金钵,嫔伽罗就躺在金钵里。

这个故事也打动过金庸先生。他在天龙八部里塑造了南海四大恶人,其中叶二娘是虚竹的母亲,其原型就来自于鬼子母。

49.png

右上图来源:1997年TVB黄日华版天龙八部剧照

右下图来源:2003年胡军版天龙八部剧照

我们再回过头看这张壁画,会发现母亲用手护着小儿子的额头,好像担心他再次走丢。她扇子上的日与月代表着母爱陪伴的日日夜夜,小儿子已经跟母亲一样皈依佛法、双手合十了。了解故事之后,你会觉得角色无比鲜活,比单纯地画一个美人要更有说服力。

50.png

大话在创造角色时,也是这样考虑的——为了形象而设计服饰、为了传递故事而表达美。比如我们设计的龙族女王,文案是这样归纳的:

51.png

从文案中提炼出理念之后,草图就已经有一些效果了:这些丝丝缕缕的分割线像黑影从深渊里渗出,来塑造女王的冰冷气质。在没有任何细节放大的时候,我们把形式感做足,人物的气质就已经能被服饰衬托出来了。

52.png

而这张概念图则是在表达她背后的故事。因为她来自暗影,所以半张脸隐藏在一把来自深海的扇子之后,整个人藏在阴影当中。加上非常强的妆容、夸张的领子、鱼鳍的质感,都在呈现一种帝王气息。这种用神秘感和世界观叙事的设计,就是我们从法海寺壁画中学到的。

53.png

总结一下:第一层,从外观上借鉴;第二层,提取象征意义,由一及全地推出整个形象;第三层,思考表象背后的故事,挖掘文化内核。这样层层递进、由内而外地呈现,设计出来的造型就会丰满、经得起推敲,而不止是好看这么简单。

注入生命力

最后说说我们的开发团队。产品是人来做的,我们的同学都是传统文化的热爱者,有书法、中国舞、钱币收藏等等不同的兴趣。除了工作之外,也要有足够的输入来滋养自己。

这些花絮照片是我们美术团队的一些日常活动,包括去敦煌、香港、巴塞尔、故宫等等活动。还参与过一些宣传片拍摄,接触过许多非遗艺人和艺术家。

54.png

这些各个维度的感知,不是每个项目都能够长期投入的。所以我们美术同学非常幸运和自豪,在这些滋养下我们能保持对艺术愉悦、探究的心态,才能给大话带来源源不断的生命力。

我今天的演讲就到这里,谢谢大家。

想了解更多峰会资讯和干货,可以点击https://game.academy.163.com,到网易游戏学院官网查看。

Alex Matveev
2022-06-06 16:27:13
不合规
审核中
@苏某某: 她在音乐方面的喜好,以及对天文的兴趣,也源于这部动画的影响。一直很喜欢爵士乐的她突然开始想
乐方面的喜好,以及对天文的兴趣,也源于这部动画的影响。一直很喜欢爵士乐的她突然开始想,没有系统了解过此类音乐的她怎么会喜欢上 呢?后来听完《美少女战士》原声带后才发现,“原来我在那么小的时候
评论全部加载完了~