网易这款游戏做了好几轮迭代,居然只为了这两个字?

文/ 秋秋 2022-07-09 17:01:30

字体,可能是玩家在游戏过程中最容易忽视的视觉元素。

但网易旗下国风RPG手游《忘川风华录》却相当重视字体设计的美感,并将其与游戏的古风题材结合,为玩家带来了不一样视觉体验。

1657443703251791.jpeg

微信图片_20220710171747.gif

例如包括上图「忘川」二字在内的游戏多款字体,其实都是由网易雷火艺术中心手写而来。但字体的设计并非是一蹴而就的,要经过很多轮的迭代——放大、缩小、错位、笔画夸张、情绪表达……在这篇文章中,网易网易雷火艺术中心便将这些文字设计思路进行复盘总结,希望能给予大家一些帮助和启发。

1657443704856977.png


01 把握字体本质

虽然我们是在做设计,但是字体的设计可不能天马行空。祖先创造了文字,经过漫长的演变发展到现在,任何再加工的设计也都必须是以汉字作为载体。过于夸张变形的文字会失去辨识的意义,那就不再是文字,而变成图形了。
汉字分为楷、行、草、隶、篆等几大类字体,我们的设计可以在这些基础字体上做变化,但是不能逃脱字体的本质,否则很容易让字体看起来四不像,强硬的拼凑和变形只会让设计看起来杂乱无章。

1657443706251567.png

其次,一个完整的设计篇幅中,出现一到两种字体足矣,所以选取字体首先是要按照所书写的文字内容,选择最切合的字体,使得字体与文义协调且统一,以文字的形、意,来传达我们界面设计所要表达的形质美。
如对严谨、高雅这类文义配以楷书、篆书等比较方正的字体;对潇洒、豪放的文义配以行书、草书这类比较洒落的字体等,还有一些宗教题材的文字可以考虑隶书、篆书。
同时根据书幅的位置来确定字体架构,比如横放还是竖放,做扇形还是对联的形式等等。最后还要考虑文字在界面中的主次:文字是视觉中心,还是文字仅仅只是画面的辅助。综合考虑到以上这些,才能选择最贴切的文字字体。

1657443707475589.png

《忘川》的文字书写就分别考虑了楷书和行书,并做了大量的字体风格尝试。到底是端庄规整的小楷,还是潇洒自如的行书,这也是通过游戏世界观综合考究而定的,任何字体的选择都需要有和游戏背景融洽的契合度,才能在游戏界面里大量运用的时候看了不那么突兀。

1657443708650082.png

1657443708482341.jpeg



02 先立意后下笔

书法中讲究章法,章法的布局是整个设计的核心,所以必须先立意,心中有一定的思路再开始进行设计。对于文字的笔画,可以在原有的计算机字体上做加工设计,这时我们可以把单独的笔画拎出来,做笔画上变形。
变形的方法有两种,一是借助PS用套索工具直接进行选取,然后变化笔画的架构。但是这种方法有一定的局限性,会受到软件的控制,文字像素也会被模糊化,品质和精度都会下降。
所以《忘川》的文字设计就选取了另一种办法,那就是直接用笔墨纸砚进行书法创作!王羲之曾说,“夫欲书,先干研墨,凝神静思,预想字形大小、偃仰、平直、振动,筋脉相连,意在笔前,然后作字。”由此可见书法一直讲究“落笔定形”,手随意运,笔随手转,所以第一笔的发挥是尤其重要的。我们在书写的时候也尤其重视第一笔感写出来的东西,在书写创作的过程中,整个思路一定要先在心里进行反复推敲,三思而后行,要注意对整个篇幅的把控。

1657443709506154.png

1657443710977532.png



03 纵向篇幅完美传意

文字构图最常用的排布就是纵向或者横向,其中《忘川》LOGO设计主要运用了纵向书写的形式,这既是古人的书写习惯,也是界面设计的需要。

对于纵向的排列来说一般分两种情况,一是纵有行,横有列,所谓“纵横成行”。这一类排列字体在结构上的变化不大,整整齐齐的排列方式,在游戏界面里的运用是最广的。这种规矩方正的设计易读、清晰,是阅读性最高的排列方式。

640?wx_fmt=jpeg

第二种是纵有行,横无列,即成行不成列的写法,每行字数不等,字体大小不一,字距疏密不同,俯仰奇正各随其宜,变化不居而又协调统一,浑然成章。这种分布形式,以行、草字体书写为宜。但是这种设计作为标题的实际运用并不多,主要还是草书字体还没有受到大众的接受,识别性上对于没有书法经验的同学有困难。但如果是作为辅助文字来设计,依然是个不错的选择。

对比两种书写方式不管是“纵有行,横有列”,还是“纵有行,横无列”,都有各自的设计利弊。所以《忘川》的LOGO对这两种手法都进行了取舍,正派又带有行草风,潇洒又不失规矩感。

1657443711288355.png



04 首领效应主导界面

往往文字设计的第一个字,具有统领全篇的作用,犹如方正列队最前面举红旗的人一样,带领着整个队伍前进。《书谱》中指出“一字乃终篇之准”,更是说明这样的一个字,是全篇的标准、看齐的标杆。并且从视觉上来看,着重强调第一个字也可以提升整体气势,因此很多时候在进行文字设计时,首先要按照所用字体的笔法和结构,把第一个字的体势意态,设计得有法有化,规范而灵活。
当然也可以用第一个字的第一笔来做一些夸张,把全篇的字写得大小适宜,疏密匀称。但是要注意避免头重脚轻的现象,要合理的布局。如果第一笔过重,后面可以采用拉长、拖尾等方式,做到前后呼应。这样争让得体,首尾相顾,能让整体的文字设计浑然一体,从字里行间来展示文字设计的美感。《忘川》的LOGO设计就是充分运用了这种设计方法,我们可以从整个改版过程明显看出越到后面的版本,越想突出首字效应和前后呼应的感觉。
1657443711154500.png

下图最终的实际运用上更是强化了这一特点,特别是“忘”字最开始的一点一横:
1657443712456695.png


05 脉络舒展行气贯通

“行气”,主要是针对行草书的一种感觉的概括。简单来讲,就是书法作品当中每个字之间具备的一种连贯性。
什么是连贯性呢?就是不间断,有连接的整体性。以行为单位,字与字之间相互联系,互相成就,这种宛若行云流水的感觉就是行气。更简单一点其实我们可以理解为一行字的“中线”。如下图:

1657443712489806.png


当我们把一幅好的行草作品拆开看时,可能每个字的大小、形态,左右排列等都“各有千秋”,但从整体来看,每个字都是依托于一条中线在进行形态变化的,这个中线我们称为“行气线”。
我们常说的脉络舒展行气贯通,其实就是要两个基本点的浓缩,一是整个画面需要有把控中心的行气线;二是行气线需要运动均衡,能做到统筹画面结构的作用,有些横平竖直的行气线太过工整,反倒会失去草书书写的美感,尤其是在做一些需要比较洒脱的标题性的文字时。所以我们反过来看《忘川》LOGO的创作,虽然是简单的两个字,但在大量的修改和尝试下,尽量去做到每一笔通笔丰满,跌宕起伏,简单两个字的书写也可以做出满纸云烟缭绕的感觉,这就是典型的行气贯通的书写表现:
1657443713361487.png



06 浓淡适宜美如画

在我们的字体设计中,不管文字的色彩是不是采用水墨的方式,或者是用了材质叠加、描边、投影等多种手法,整体书幅的颜色协调都很重要。古人非常懂得墨法的重要,但是现在随着科技技术的发展,除了墨我们还有太多太多的上色方法,所以对字体的色彩上要做更多的取巧创新。“画法字法,本于笔,成于墨也”,就是体现了色彩运用对文字设计的重要性。
书法家们善于用“墨分五色”的画法来作书,就形成了浓墨、淡墨、枯墨、涨墨等各种杂揉的情况。这就是说,不同的墨色气韵,能符合不同书法作品的要求,这也是为什么我们不用常规的计算机字体而要做独特创新的意义所在,它能体现独特的字体设计美,并且美得独一无二。
1657443714340701.png

可以对比看看下图,不同用墨效果书写出来的文字对比,除了颜色深浅不同,不同的墨可以做出不同的运笔效果,这也会影响到我们整体的视觉感受:
1657443714649789.png


07 在继承上做创新

所有的设计都希望创新,希望能做更多突破性的设计来吸引视线,但文字设计的实质还是要做到”书而有法“,即所谓“书法者,书而有法之谓”。设计点我们可以更多地放在文字的构图、色彩、质感表现上,对于字形,更希望是在继承的基础上做创新,是以“有法必有化”的设计来实现的。从文字书法发展的历史来看,一切为后人学习不衰的书体,都是从几种固有的字体中变化而成的。而这种变化创新,也是有一定的法度制约的。
文字的设计既要掌握本身字体特有的运笔方法,也要在结字和章法上法中求化,合理变革;再搭配背景所需的效果来要表达意想,三者俱备,自能设计出规范而新巧的文字。
1657443715137564.png

1657443716282023.png

1657443716849526.png


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