网易自研的幻想多世界RPG手游《幻书启世录》一经曝光，便备受广大玩家期待预约人数早已高达210多万。12月17日全平台上线公测啦！

怀揣着激动的小心情，点开《幻书》来一探究竟～

除了精美的立绘，出色的剧情，《幻书》还同时用游戏配乐c位出道！

现在我们从《幻书》的UI角度来分析它给我们带来的一些启发。

《幻书启世录》是一款二次元幻想风格的手游，其立绘和界面设计相当优秀。提到幻想风格（具体到19世纪西方），大家或许会想到浪漫，梦幻，超现实主义这几个关键词。那么大家可以一起想一下，在我们的身边有哪些是让你觉得有美好幻想的设计呢？

下面给大家举几个“栗子”：西方繁复的钟表结构；结构繁复具有规律的几何建筑图形等。

19世纪西方的建筑多指以“洛可可式”艺术，浪漫主义建筑风格，表现为装饰性较强，艺术上造诣较高。

这些图案或者建筑，在造型上给我们一种神秘，圣洁的感觉，呈现出了19世纪西方的幻想风格。

另外，哥特风格也比较注重其表达的精神与形式感。

体现出构成上的主观上升感、注重细节表达却在极力避免现实主义、追求平面和线性却紧张严肃无法舒展流畅、迷恋使用几何装饰以求能在更深刻本质的层面把握世界的永恒性等特点

哥特人高度发展“拱”的建筑技术，不断刷新教堂高度，以求更加接近上帝与天国

看了这么多感觉是有些思路，但又未成体系，那怎样能让游戏界面有幻想风格的"内味"呢？

首先，结合项目的世界观，对以上的元素进行筛选，找到相关的参考素材确定主视觉风格（具有仪式感的表达，细节的追求，具有品质感）。然后，根据界面的构成，可以从背景/空间、图形、配色、控件设计、字体、动效等这几个方向开始发力：

Part  1

背景篇

背景制作一般是利用颜色或者游戏场景来表现。（在这里主要分析一些偏向颜色渐变的背景）颜色有用纯色、渐变等来表现，大多以浅色为主，结合梦幻的紫色和温暖的黄色调；整体色调偏暖。采用饱和度较低的黄色来表达复古的气质，同时大面积的暖色调和局部的深紫色很容易营造出浪漫和温馨的氛围感。

（景深可以带来很好的空间感受。但也会对信息产生视觉干扰，一般会模糊处理）

Part  2

图形篇

修饰性的图形都会以点 、线、面、规则的、不规则的、抽象的各种样式去设计。

修饰性的图形（比如圆环、线、矩形等的复合）在点缀搭配时，比较注重装饰和仪式感，让玩家知道界面的重点内容是什么的同时，也表达了复古与华丽的感觉。

下图面图中想要表达的是一座19世纪样式的图书馆，地下的岩洞中则保存着人类灵智的火种——阿克夏之火。玩家将成为阿克夏之馆的馆主，肩负守护火种的重大使命。

在这种世界观之下，我们从美术的具体表现来看，能提取的关键词是时间，书籍，图书馆，火种等。

而上图这里的图形花纹边框，是根据当时世界观背景下来设计的。花纹图案设计也是从当时建筑设计里提取出来的元素，几乎对称的几何图形，极具西方19世纪建筑风格的复古华丽和威严，装饰感极强。

Part  3

配色篇

《幻书》界面中的颜色按照631的搭配比例进行配色，没有使用过多的配色，将颜色控制在了三种色相之中。我们一起来看下游戏内的色彩控制与运用↓↓

为什么要用631的搭配比例进行配色呢？

因为过多的配色会干扰信息的传达，也会影响其他界面的延展统一性导致后期的失控。例如：冷暖对比、色相差异、颜色明度纯度……来产生差异性 使引导可以清晰明了。

下面给我们刚入行的童鞋介绍几种常用的配色方法：

Ⅰ：邻近色（三种之和小于90度，选类似色，吸取它们过渡的颜色作为第三种）

Ⅱ ：对比色 （更多样也最困难。三种颜色在色轮里呈现等边三角形，互为60度。）

Ⅲ：互补色（选其两种互补色，在其中一个颜色旁找到第三种颜色）

Part  4

按钮控件篇

控件在游戏中的种类较多，这里重点列出三种进行阐述：

1.图标是具有明确指代含义的图形，它是功能标识也是图形符号。所以最好是以最简单的图形，来表达最容易理解的含义，呈现最合理的设计。

主界面中的扁平图标

2.按钮是游戏UI中最重要的交互控件。

玩家要第一眼就发现并知道这是一个可以点击的按钮，要让按钮看上去像一个按钮；无歧义且图标表达易懂、文字表达到位，能清晰地让玩家知道点击后会发生的事情；按钮也有主次之分，重要的按钮要更突出颜色/更显眼的位置/更强烈的提示...

按钮在游戏中的不同表现形式

3.框体可以帮助我们将界面内容与其他元素在视觉上区别开，它作为一个元素来分解设计的不同部分。

幻想风的框体多用比较繁复的几何线条去表达，需要达到一定的视觉效果。具有装饰感的框体设计实际上可以帮助玩家将视线吸引到设计中心的主要内容中。（但如果边框设计过度，玩家可能不容易看到他们想看的内容，所以会适当的把不重要的框体做一些弱化。）

框体在游戏中的不同表现形式

Part  5

字体篇

《幻书》中的字体多为复古气质的衬线字体，该类字体通常是具有风格和气质的，它们更多的是装饰，体现复古和华丽 。这类字体华丽气质很符合幻想风的调性。

字体的种类如果有特定的要求最好也不要超过三种，多利用文字大小、粗细、颜色、透明度等营造信息层级关系。

重点信息要突出，简短干练，更多的说明文字可以放到次层级或者弹窗等，尽可能压缩文字个数，不但能够为多语言问题减轻调整负担；过多的文字也会让玩家增加阅读负担产生负面情绪。

很多时候信息和元素越多就越难把握。多做减法避免无意义的视觉元素堆砌和杂乱无章，缩小或减少次要元素的存在感，利用合理的排版布局反而能让你的设计更简洁更有高级的气质。

Part  6

动效篇

有了动效，让我们之前做的界面就鲜活的呈现了出来。它可以引导，交互，让玩家更好的去沉浸你的游戏中。所以它和界面的美观、易用、满足需求等息息相关（传达状态提供反馈，可视化操作的结果，增强交互的感觉）。

切记要求动效的准确简洁。有些看起来很棒的动效会显得多余或演示时间过长，在玩家进行反复性非常高的操作时会适得其反。好的动效就是让你感觉不到它的存在，但又让你觉得很舒服。

总  结

《幻书启世录》的界面风格总体是围绕着西方十九世纪的时代背景下来展开的设计，相信设计师小伙伴们在打开游戏的瞬间，会被里面各种精美的设计震撼到，幻想风二次元，又多了一款具有参考价值的设计方向。

美术上，幻书的界面设计从从背景/空间、图形、配色、控件设计、字体、动效等几个方面的局部展示与总结，是我对二次元幻想风格的一些初步理解，算是抛砖引玉，希望对大家有所帮助，也欢迎大家一起交流进步。

Powered by Froala Editor