[【明日方舟】这个夏天，他改变了二次元美术风格的形状 - 知乎](https://zhuanlan.zhihu.com/p/75582952)
出挑简约的画风主导了游戏的整体，与市场流行的萌系二次元手游不同，这次的明日方舟，使用充满了科技感和末日感的美术风格，简称“**硬核性冷淡”**。

没有花里胡哨的装饰，简化扁平化的 UI 设计，大多数图案的底色为最简洁的黑白，充分利用符号代替文字像向玩家传递信息；

游戏道具也采用了写实的风格；即使游戏内容复杂，角色繁多，也不会影响让用户不知所措，主体元素能在第一时间被玩家所感知。

![](https://pic3.zhimg.com/v2-b92c4d8f18b9337029ef4aefc22b801c_1440w.jpg)

文案与界面高度配合，[末日感](https://zhida.zhihu.com/search?content_id=104925402&content_type=Article&match_order=2&q=%E6%9C%AB%E6%97%A5%E6%84%9F&zhida_source=entity)扑面而来。

  

![](https://pic2.zhimg.com/v2-0aec5a124fd8d223cafec0b407378d99_1440w.jpg)

除了界面设计以外，角色设计也是一大亮点。

  

画师采用了近年非常热门的伪厚涂方法，人物体积感强，细节点多，不仅剔除了传统二次元手游里“媚宅”嫌疑重大的元素，没有采取卖胸卖肉的方法，将动物拟人化，在职业与人物个性设计上，融入了希腊神话、[克苏鲁](https://zhida.zhihu.com/search?content_id=104925402&content_type=Article&match_order=1&q=%E5%85%8B%E8%8B%8F%E9%B2%81&zhida_source=entity)、东方文化等等...勾勒出属于每个角色的独特风韵。
在服装设计上也偏向潮牌工业风，整体的美术风格高度统一。

少前的角色原画师，《[崩坏学院2](https://zhida.zhihu.com/search?content_id=104925402&content_type=Article&match_order=1&q=%E5%B4%A9%E5%9D%8F%E5%AD%A6%E9%99%A22&zhida_source=entity)》前原画师Rosele曾在公开课上，详细讲过类似日系游戏角色[设计的方法](https://zhida.zhihu.com/search?content_id=104925402&content_type=Article&match_order=1&q=%E8%AE%BE%E8%AE%A1%E7%9A%84%E6%96%B9%E6%B3%95&zhida_source=entity)和特点，感兴趣的同学可以戳[【角色原画师】和Rosele一起画出有趣的角色和漂亮配色](https://link.zhihu.com/?target=https%3A//ke.qq.com/course/351123%3Ftuin%3D1d688ea3)

  

其实近年来，[末日废土](https://zhida.zhihu.com/search?content_id=104925402&content_type=Article&match_order=1&q=%E6%9C%AB%E6%97%A5%E5%BA%9F%E5%9C%9F&zhida_source=entity)题材的游戏非常多，与未来相关的题材总是很容易引起玩家的讨论和思考。

例如《永远的 7 日之都》、《崩坏 3》、《[战双帕弥什](https://zhida.zhihu.com/search?content_id=104925402&content_type=Article&match_order=1&q=%E6%88%98%E5%8F%8C%E5%B8%95%E5%BC%A5%E4%BB%80&zhida_source=entity)》、《[阿瑞斯病毒](https://zhida.zhihu.com/search?content_id=104925402&content_type=Article&match_order=1&q=%E9%98%BF%E7%91%9E%E6%96%AF%E7%97%85%E6%AF%92&zhida_source=entity)》。
那么我们可以从题材出发，谈谈美术风格的问题。

游戏公司要想确定一款游戏的美术风格，要先根据市场部的需求和制作人的需求定下题材。

这里需要注意的是：**美术风格往往可以反映出游戏的题材，但是反之，游戏题材却不能绝对限制美术风格。**

题材如何与美术风格的结合，是制作者们必须要仔细考虑的事。

同样的题材，又如何来构建风格，是偏写实，还是偏幻想。

比如末日环境，是战乱、天灾、还是传染病，这些环境因素需要体现到美术设定上。

![](https://pic4.zhimg.com/v2-aba902264cb1f991a213b5e650ed658d_1440w.jpg)

《明日方舟》《崩坏 3》《永远的 7 日之都》都是末日灾难题材，而表现出的则美术风格大不相同。

  

在明日方舟里，许多角色都穿着厚厚的防护服，更偏于日式现代风格，以灰白为色彩基调，更为写实。

![](https://pic4.zhimg.com/v2-274c82b67efda1aed8e396962ecbe2ed_1440w.jpg)

  

而 7 都里的角色服装和武器更偏向于融合了病变的魔幻风格，色彩更为鲜艳。

![](https://pic4.zhimg.com/v2-b1366913e4f18d35ac368211d27ae675_1440w.jpg)

可以去大触来了课堂听听曾为 7 都绘制过奥露西娅皮肤的 gods 老师对于游戏原画角色特色的详细讲解 [【网易原画师gods】必看！如何简单快速地画一个人物？](https://link.zhihu.com/?target=https%3A//ke.qq.com/course/402414%3Ftuin%3D1d688ea3)

  

到了崩坏三，融入了日式魔幻风格，更明显的萌化了[末日元素](https://zhida.zhihu.com/search?content_id=104925402&content_type=Article&match_order=1&q=%E6%9C%AB%E6%97%A5%E5%85%83%E7%B4%A0&zhida_source=entity)。

![](https://pic4.zhimg.com/v2-017960f6b9da0f2808a0b98180715675_1440w.jpg)

  

一个设定可以融合多种美术风格，也可以只有一种，取决于制作的水平和想象能力，**各种美术风格合理的融合与搭配，可以让这款游戏极具文化内涵。**可以看[绘画大触精华试听课合辑，热门画风一网打尽！](https://link.zhihu.com/?target=https%3A//ke.qq.com/course/388144%3Ftaid%3D3248421205306416%26tuin%3D1d688ea3) 了解一下

题材→美术→文化→风格，一步一步把[阿米娅](https://zhida.zhihu.com/search?content_id=104925402&content_type=Article&match_order=2&q=%E9%98%BF%E7%B1%B3%E5%A8%85&zhida_source=entity)老婆带到大家的身边。
关关雎鸠，在河之洲
最终幻想，明日方舟
雀魂麻将，碧蓝不欧
原神崩坏，爱抚叽哦

[从ta的视角看Ui#1——明日方舟美术设计分析 - 知乎](https://zhuanlan.zhihu.com/p/570566718)

关键词：明日方舟，技术美术，UI，平面设计

综述：本专栏主要根据技术美术视角探讨分析游戏设计的特点并拓展学习，**大致每款游戏分为三个部分，美术分析，美术创作，以及引擎实现，由于开学在学校没有配音条件，于是就转到知乎更新一些文字版的教程了**。

## 第一部分：整体美术分析

关键词：品牌感，跨界

我们先理理，舟舟美术由哪些模块组成：人物，场景，Ui，icon，动效（应该还有其他的，我暂时按照这个逻辑来分）

咱们先谈谈老婆人物吧

## 人物部分

人物分为皮肤（原皮，付费服饰），组成元素（种族，职业等），技能

### 人物简介

从 yj 发饼开始，我们可以看到每一份干员的介绍，就像一张简历，从而对应了游戏中的应聘进罗德岛成为干员这一过程（嘤嘤嘤，yj 什么时候能应聘我进 yj 啊）

  

![](https://pica.zhimg.com/v2-6d0416b2ca659357b577054de8037ab6_1440w.jpg)

斯哈斯哈，我的海沫

我们可以发现：

- 干员代号为 **[思源黑体](https://zhida.zhihu.com/search?content_id=214925644&content_type=Article&match_order=1&q=%E6%80%9D%E6%BA%90%E9%BB%91%E4%BD%93&zhida_source=entity)** ，字重 Heavy,字间距-100
- 简略信息为左右结构，全部为**思源黑体/宋体**，字重 Normal，字间距-100
- 技能介绍左对齐到技能图标右侧，全部为思源黑体/宋体，字重 Normal，字间距为 0
- 技能图标和职业图标，分三层，底色，图标，框框（?），你留意过不同颜色技能的区别嘛
- 大量以**黑白灰为主，克制的低饱和度**的颜色搭配->机能风设计，该搭配可以联系到[海猫建筑系](https://zhida.zhihu.com/search?content_id=214925644&content_type=Article&match_order=1&q=%E6%B5%B7%E7%8C%AB%E5%BB%BA%E7%AD%91%E7%B3%BB&zhida_source=entity)的课程，常用的就是黑白灰+亮色调来突出重要的信息点

以上设定从开服至今一直保持的一致性，尽管在世界观，设定有所不同，但是这些设定是没有变过的

然后就是皮肤了

### 皮肤设定

相较于其他游戏，明日方舟中的皮肤带给玩家的感觉就是不抓马，能够穿出去，而且，这个游戏中的服装和现实生活中的衣服一样，有着品牌这一定位和属性，yj 会为这些品牌构建对应的设定，logo，来补充/深化游戏中原有的世界观，并加强玩家的代入感

![](https://pic1.zhimg.com/v2-7a277728b5057f5957f0f83a57ab6ce8_1440w.jpg)

可以在游戏的图鉴中查询

### 皮肤的视觉识别及品牌属性

再次基础上，我们讨论一下 vi（Visual Identity 视觉识别），用大白话来讲，企业会去构造某一视觉特征，让你一眼就可以看出这玩意是这个牌子的，比如：粉色底，白色字，电视机这三个识别特点，你能想到哪一品牌？

我们在游戏局内的“档案”->“时装回廊”中可以找到这些时装杂志的封面，服装吊牌的展示和 logo

**以“时代为例”**

![](https://pic4.zhimg.com/v2-1791af13ee7d649b255ec981421e4e19_1440w.jpg)

**品牌关键词：**非盈利，纯感性。极端点来讲非盈利=生产出来的目的并非获取收益，纯感性=心之所向，设计师想做什么做什么，不去刻意以市场为风格导向，也不用去考虑功能性和实用性，那么现实中同时具备这两个属性的物品你能想到什么呢？

> 艺术品

然后我们看看这个 kv 图的主体/核心元素——白衬衫，这里简单的介绍一下白衬衫（由于不是相关专业的就不班门弄斧了）白衬衫起源于维多利亚时期代表贵族的地位，而到了二十世纪，该服饰传到了大众手里。那这一物品的象征意义是什么呢？

1. 白色->极简主义
2. 贵族到大众->阶级变化

然后再说一下衬线体，普遍认为衬线体能带来更佳的可读性（相比无衬线体）给人感觉更高级

**我们换一个例子“生命之地”**

![](https://pic2.zhimg.com/v2-a492ed92122b1e0bd33424e2980b912b_1440w.jpg)

**品牌关键词**：野外，探索，走向普通用户。然后我们看看该品牌的 kv 图

**背景图**：雪山脚下的绿洲，光线也是集中在绿洲之上，这两个元素放在一起形成对比，强调了生命力和活力

**slogan**:非衬线体，历史上无衬线体的出现，代表着现代的开始。而且相较于衬线体，非衬线体更加的亲和，对应介绍中的走向普通用户，但凡换成了衬线体就感觉这玩意贼高级，普通用户买不起

**logo**：盾牌+树——保护自然。衬线体 VITAFIELD。星星代表万物

对比现实生活中的意大利潮牌石头岛，整体就是工装风+低饱和度的工装设计

  

![](https://pic1.zhimg.com/v2-b382777c843ed4362c9bd9cb5f921f78_1440w.jpg)

**最后我们说一下，游戏中出的第一个品牌“寒武纪”**

![](https://pic4.zhimg.com/v2-3c1a6bb592b0db87597031abe0412ae9_1440w.jpg)

**品牌关键词：** 防寒性，安全美观。仔细一看和生命之地一样是户外风格，但是聚焦在防寒保暖，安全上，相较于生命之地的户外功能性上，寒武纪更加重视材质的呈现以及对使用者的保护上

**背景图：** 寒冷的深蓝色为底色辅以类似于冰川一样的纹理，加上 yj 传统的半调

**slogan:** 非衬线体 NO FEAR OF 后接了三个代表寒冷的意向 icon，

**logo:** 鹦鹉螺，出现于寒武纪晚期，斜体非衬线体 CAMBRIAN，倾斜的元素一般具有动感，潮流的特点

同样举一个现实中的例子：the north face,来自美国的户外品牌，其服装以出色的材质和保暖性加以潮流的设计感著名

![](https://pic1.zhimg.com/v2-a47b3b760572daeaadaa80516c64a5b6_1440w.jpg)

总结一下：单从皮肤这一板块，我们就能发现鹰角在 ip 上的布局，然后我们再看看鹰角的子品牌一拾山

![](https://pic4.zhimg.com/v2-26735679e3487e8938568a8f663a2477_1440w.jpg)

yj 跳出了明日方舟本身，去建立一个新的品牌，拓展游戏之外的业务，人物部分就到这里结束辣，下一个部分，游戏场景

## 游戏场景/关卡美术

明日方舟主 Ui 兼制作人埃及人海猫，国美建筑系，我们可以在游戏的很多地方找到对应的风格

- 世界观:

- 架空世界+超能力+末日废土（？）+一定的现实基础

- 建模表达（关卡设计）：主色+副色+模块化设计

![](https://pic3.zhimg.com/v2-b1fecf17cf024cd8df887f02675b1e96_1440w.jpg)

白色体块代表城市

![](https://pic1.zhimg.com/v2-590356c2e688d04c539ab5a6d4da432e_1440w.jpg)

等高线代表山岭

![](https://pic3.zhimg.com/v2-0675710501cdac69f96221347a547612_1440w.jpg)

![](https://pica.zhimg.com/v2-2bf84da782726947e497329e3f9b2b58_1440w.jpg)

![](https://pic2.zhimg.com/v2-48b8391a512abb38d0e84d14214b21d1_1440w.jpg)

（我好喜欢 [lowpoly](https://zhida.zhihu.com/search?content_id=214925644&content_type=Article&match_order=1&q=lowpoly&zhida_source=entity) 的风格）

## 视觉方面

### **1. Diegetic Interface 风格的看板设计增加了沉浸感**

先简单介绍一下 Diegetic Interface 是什么

> 用来向玩家展现其所需要时刻知晓的信息的界面通常以 HUD（Heads-up Display）的方式出现，与之相反，「画内界面」则试图把画面中角色所能够看到的信息以相同的方式展现给玩家，从而打破玩家和游戏角色「隔着一个屏幕」的舒适区，增强沉浸感。

举例说明，同样的例子出现在**明日方舟新游戏终末地**

![](https://pica.zhimg.com/v2-ff7115a429d758616eb9cb686397dde2_1440w.jpg)

![](https://pic1.zhimg.com/v2-ded5101ad3bccc8464dcf2c5bcd2864a_1440w.jpg)

![](https://pic2.zhimg.com/v2-41c88e111b82ecd83e0fb34882ac3b83_1440w.jpg)




简单对比一下两款游戏看板之间的相同和不同

- 增加一定的透视，阴影作为辅助，让它们看起来和场景融为一体，还加上了少量的烟雾粉尘特效，增加故事感，关键词：漂浮投影
- 而《全境封锁》的物品栏界面也是一样：**全息投影、虚拟指示窗、高科技的观瞄设备，这些元素和后启示录科幻战争联想有着密不可分的关系，而方舟在题材上的共通成为了这种设计契合的原因。** 当手机设备的电量、信号和时间信息都被按照统一风格放入了对应的浮窗中，并且随着陀螺仪的感应整体移动 —— 方舟在一开始就为玩家提供了强大的沉浸感

最后我们再看看一个十分经典的游戏《死亡空间》

![](https://pic2.zhimg.com/v2-96e5b8c2b70a3024b30200ef5eb4b325_1440w.jpg)

所有玩家可见的 UI 都真实地存在于游戏世界中，它们被解释为作战服或机器装置所发出的全息影像。游戏还把角色模型作为 UI 的载体：承载血条和时滞条的信息

### **2. 类 Fluent Design 设计思想的多元质感**

> Fluent Design 是微软在 2017 年提出的一套跨平台的设计系统。这套设计系统适用于网页端、PC 端、所有的移动端、以及 AR、VR 等虚拟世界

**Fluent Design 五大核心**

- Light 光线

- Depth 深度

- Motion 动效

- Material 材质

- Scale 延展



通过 Specs 指引，我们可以知道每个分类在底层系统设计上的具体意义；**它在视觉上的本质表现是对「拟物」的简化，核心是「质感」**。

方舟的 UI 一个突出特点就是层级对比度极高，这里除了有高质量的平面设计思想和符合世界观的警戒亮色加持之外，多处使用背景模糊效果来突出画面需要关注的交互部分也是原因之一。**背景模糊的另外一个好处是它的覆盖特性**：对一个特定界面进行背景模糊，再在其上加入新的页面组件，可以让玩家「窥」见之前的页面被覆盖在了下方。

![](https://pica.zhimg.com/v2-405b1e208e5ee7e18f40b734948c5500_1440w.jpg)

前面举例如何创作一个 Fluent 组件时，叙述了笔者「提取材质，剥离细部」的核心思路，这样的结果其实是物件的「积木化」：积木作为孩童的启蒙玩具，**需要承担认知的功能（辨识度），同时又必须保持其可玩性的特点，（所以说可以左右划来划去？）**

![](https://pic2.zhimg.com/v2-f40712e46449dc28968cf3158132c809_1440w.jpg)

最后提一下 UI 上光线的使用。由于方舟是一款手游，因此交互上没有办法做指针悬停效果，**在光线控制上除了用陀螺仪似乎没有太多的想象空间**。**目前游戏内所有对打光有刻意表现的地方多用静态贴图而非即时渲染**（例如签到日历的背光效果、得到材料奖励时的背后光圈）

### **3. 界面扁平化**

**扁平的出发点是减少页面中和交互无关的细节，提升产品使用效率，并且加强设计元素的视觉统一性。** 如果单纯理解为「平」，就会导致用户学习成本增高和画面失焦的后果。

扁平化设计三板斧「卡片阴影加圆角」广为人知，方舟没有逃出囹圄，在采购中心、基建等不少页面出都使用了卡片设计。卡片搭配阴影的目的是形成层级，简而言之，越要抓住用户的元素，就摆得离其越近，在界面图层上相对应的高度也就升高。这是扁平化凸显页面深度的方法之一。

  

![](https://pic1.zhimg.com/v2-5488fda649e7f8670374309a5316c642_1440w.jpg)

在寻访界面中加入的视差效果也是亮点之一，干员本身有大小区别（暗示远近）的情况下，加入视差可以让透视感成型，其实还能把动态卡面加进去（

### **4. 风格化装饰文字**

这一点在人物部分也说清楚了，方舟页面明显的特点是使用了大量的衬线字体，但实际上衬线体并不是游戏内最被广泛使用的字型。在主面板中，衬线体更多以中文衬线体的方式出现，因其笔画显著的粗细差异而具有相当的可读性，以「警戒」字型的意向与悬浮视窗、以及远景中的工厂格纳库风插画形成一种统一的工业感联系。**衬线拉丁体其实样式丰富，「衬线字体代表了古典、严谨；无衬线字体则代表了现代」的准则有所偏颇。**

加上背景人物塔露拉的衣着有着经典欧洲皇室装束褶饰领的设计、其使用冷兵器的武器风格... 现代向的字型就进一步显得格格不入。最终让画面异物感最强烈的，便是最下方的两行俄语「ЧЕРНОБОГ | УРСУС ИМПЕРИЯ」（即 Chernobog | Ursus Empire \[切尔诺伯格 | \[乌萨斯帝国] ），**字型圆润而粗大，大幅度挤占画面空间，并彻底脱离了乌萨斯标志所透露出的庄重和威严感。**

![](https://pic4.zhimg.com/v2-5e89ccaa0772227c57d7137297ed8f45_1440w.jpg)

### **5. 焦距控制和底图处理**

关于页面深度的探讨，前文已经有所提及，叙述更多是基于扁平化页面组件之间的层级关系和交互透视感。在此之外，方舟还通过焦距控制和使用统一风格化底图处理方式来在静态设计层面**加大页面深度（画面多层级）和内容深度（传达信息）的表现。**

以第一次进入采购中心时可露希尔的介绍插画为例，在光线的设置上，用亮度溢出的背景中心搭配人物插画本身的光影处理，辅以多束散射的横光，来在一个平面中表现有多个光源存在的立体空间；在元素的重叠上：多个处在人物前后的装饰文本突出元素彼此之间的立体关系；最后在焦距的控制上：通过失焦的背景凸显画面中心，又在部分前景元素上做更多的边缘失焦处理，让人物前后的纵深得到了体现。

笔者认为，Out of focus foreground framing（前景模糊取镜）自 iPhone 的人像模式推出之后便得到了快速的普及，现在已经成为了大家日常拍照的惯用手法，**大众接受度提高让设计师在处理「模糊」这一增强效果时有了更多游刃有余的空间。**

元素的重叠和丰富页面表现是平面设计中最基础也是最无法避开的一环。不同的信息层分拣在不同的位置，**核心始终是突出主体，使之与整体 VI 更加统一**  

![](https://pic2.zhimg.com/v2-c157b6412df0cc26930fa6872a981bef_1440w.jpg)

  

目前方舟用得较多的设计是散点和条纹，前者相当于 Grain effect（噪化效果）的低密度高颗粒度版本，用在基础组件（如按钮上）可以使留白不显得单薄，用在各类卡片的背景或者平面设计的底图中则能够提升对比度；后者主要指粗条纹，类似警戒线的风格展现设计的工业感。**这种底图处理风格在游戏内外均以惊人的统一性被使用。**

**角真的好爱半调！**

**除了浮窗，某元素的局部位移来形成新的信息展示空间也是常见的简化信息层级的交互方式，最经典的例子就是干员的养成页面** —— 里面每一个可以点击的按钮都没有引导至一个完全崭新的页面，而是多少保持着和干员信息页的联系：升级 - 横移淡入动画、升阶 - 人物位移、合卡 - 人物位移、升技能 - 页面背景不变、查看天赋 - 弹出透明浮窗、查看职业详情 - 弹出毛玻璃弹窗、查看属性详情 - 数值直接向右展开、查看背景故事 - 人物位移、查看时装 - 弹出毛玻璃弹窗... 再加上页面拖拽滑动可以直接实现干员的切换，**玩家在复杂的养成系统中一直没有离开过同一张 canvas。**

  

![](https://pic4.zhimg.com/v2-fe8e23c66a94973901d07debc385e60b_1440w.jpg)

### **6.视觉引导**

第一部分主要针对复杂的材料树几乎不可能让玩家记住每种物品的等级和产出途径的问题。相比于做一个独立的游戏内图鉴，游戏加入了全局指示链功能，在任何一个物品 icon 出现的地方查看物品详情都可以直接跳转到对应的掉落关卡和查看对应的掉落几率，**这种组件化的设计极大地降低了玩家对于养成科技树的学习成本，甚至在不需要完全摸清楚材料层级关系前就可以进行收集和养成了。**

![](https://pic1.zhimg.com/v2-85b9826285f7fc9e3c689ef81fc3d662_1440w.jpg)

第二部分则是页面左上角的主界面按钮，玩家可以通过这个导航快速进入任何一个系统中，而不需要进行枯燥的返回面板再进入。这个导航栏独特的地方是它的系统并不是零散的，而是被放置在「罗德岛」这个建立在倒悬鲸骨之上的「方舟」的不同区域，**通过赋予各系统一种空间上的联系与包装，使玩家的交互路径更加具有代入感，产生沉浸的游戏记忆**。
![](https://pic3.zhimg.com/v2-a09236664a39464ad2eccb604a6bb6a6_1440w.jpg)