網(wǎng)易自研的幻想多世界RPG手游《幻書啟世錄》一經(jīng)曝光，便備受廣大玩家期待預約人數(shù)早已高達210多萬。12月17日全平臺上線公測啦！

懷揣著激動的小心情，點開《幻書》來一探究竟～
除了精美的立繪，出色的劇情，《幻書》還同時用游戲配樂c位出道！

下面我們從《幻書》的UI角度來分析它給我們帶來的一些啟發(fā)。

《幻書啟世錄》是一款二次元幻想風格的手游，其立繪和界面設(shè)計相當優(yōu)秀。提到幻想風格（具體到19世紀西方），大家或許會想到浪漫，夢幻，超現(xiàn)實主義這幾個關(guān)鍵詞。那么大家可以一起想一下，在我們的身邊有哪些是讓你覺得有美好幻想的設(shè)計呢？

下面給大家舉幾個“栗子”：西方繁復的鐘表結(jié)構(gòu)；結(jié)構(gòu)繁復具有規(guī)律的幾何建筑圖形等。

19世紀西方的建筑多指以“洛可可式”藝術(shù)，浪漫主義建筑風格，表現(xiàn)為裝飾性較強，藝術(shù)上造詣較高。

這些圖案或者建筑，在造型上給我們一種神秘，圣潔的感覺，呈現(xiàn)出了19世紀西方的幻想風格。

另外，哥特風格也比較注重其表達的精神與形式感。

體現(xiàn)出構(gòu)成上的主觀上升感、注重細節(jié)表達卻在極力避免現(xiàn)實主義、追求平面和線性卻緊張嚴肅無法舒展流暢、迷戀使用幾何裝飾以求能在更深刻本質(zhì)的層面把握世界的永恒性等特點

哥特人高度發(fā)展“拱”的建筑技術(shù)，不斷刷新教堂高度，以求更加接近上帝與天國

看了這么多感覺是有些思路，但又未成體系，那怎樣能讓游戲界面有幻想風格的"內(nèi)味"呢？

首先，結(jié)合項目的世界觀，對以上的元素進行篩選，找到相關(guān)的參考素材確定主視覺風格（具有儀式感的表達，細節(jié)的追求，具有品質(zhì)感）。然后，根據(jù)界面的構(gòu)成，可以從背景/空間、圖形、配色、控件設(shè)計、字體、動效等這幾個方向開始發(fā)力：

Part? 1

背景篇

背景制作一般是利用顏色或者游戲場景來表現(xiàn)。（在這里主要分析一些偏向顏色漸變的背景）顏色有用純色、漸變等來表現(xiàn)，大多以淺色為主，結(jié)合夢幻的紫色和溫暖的黃色調(diào)；整體色調(diào)偏暖。采用飽和度較低的黃色來表達復古的氣質(zhì)，同時大面積的暖色調(diào)和局部的深紫色很容易營造出浪漫和溫馨的氛圍感。

（景深可以帶來很好的空間感受。但也會對信息產(chǎn)生視覺干擾，一般會模糊處理）

Part? 2

圖形篇

修飾性的圖形都會以點 、線、面、規(guī)則的、不規(guī)則的、抽象的各種樣式去設(shè)計。
修飾性的圖形（比如圓環(huán)、線、矩形等的復合）在點綴搭配時，比較注重裝飾和儀式感，讓玩家知道界面的重點內(nèi)容是什么的同時，也表達了復古與華麗的感覺。

下圖面圖中想要表達的是一座19世紀樣式的圖書館，地下的巖洞中則保存著人類靈智的火種——阿克夏之火。玩家將成為阿克夏之館的館主，肩負守護火種的重大使命。?

在這種世界觀之下，我們從美術(shù)的具體表現(xiàn)來看，能提取的關(guān)鍵詞是時間，書籍，圖書館，火種等。

而上圖這里的圖形花紋邊框，是根據(jù)當時世界觀背景下來設(shè)計的?；y圖案設(shè)計也是從當時建筑設(shè)計里提取出來的元素，幾乎對稱的幾何圖形，極具西方19世紀建筑風格的復古華麗和威嚴，裝飾感極強。

Part? 3

配色篇

《幻書》界面中的顏色按照631的搭配比例進行配色，沒有使用過多的配色，將顏色控制在了三種色相之中。我們一起來看下游戲內(nèi)的色彩控制與運用↓↓

為什么要用631的搭配比例進行配色呢？

因為過多的配色會干擾信息的傳達，也會影響其他界面的延展統(tǒng)一性導致后期的失控。例如：冷暖對比、色相差異、顏色明度純度……來產(chǎn)生差異性? 使引導可以清晰明了。

下面給我們剛?cè)胄械耐榻B幾種常用的配色方法：

Ⅰ：鄰近色（三種之和小于90度，選類似色，吸取它們過渡的顏色作為第三種）

Ⅱ?：對比色?（更多樣也最困難。三種顏色在色輪里呈現(xiàn)等邊三角形，互為60度。）

Ⅲ：互補色（選其兩種互補色，在其中一個顏色旁找到第三種顏色）

Part? 4

按鈕控件篇

控件在游戲中的種類較多，這里重點列出三種進行闡述：

1.圖標是具有明確指代含義的圖形，它是功能標識也是圖形符號。所以最好是以最簡單的圖形，來表達最容易理解的含義，呈現(xiàn)最合理的設(shè)計。

主界面中的扁平圖標

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

玩家要第一眼就發(fā)現(xiàn)并知道這是一個可以點擊的按鈕，要讓按鈕看上去像一個按鈕；無歧義且圖標表達易懂、文字表達到位，能清晰地讓玩家知道點擊后會發(fā)生的事情；按鈕也有主次之分，重要的按鈕要更突出顏色/更顯眼的位置/更強烈的提示...

按鈕在游戲中的不同表現(xiàn)形式

3.框體可以幫助我們將界面內(nèi)容與其他元素在視覺上區(qū)別開，它作為一個元素來分解設(shè)計的不同部分。

幻想風的框體多用比較繁復的幾何線條去表達，需要達到一定的視覺效果。具有裝飾感的框體設(shè)計實際上可以幫助玩家將視線吸引到設(shè)計中心的主要內(nèi)容中。（但如果邊框設(shè)計過度，玩家可能不容易看到他們想看的內(nèi)容，所以會適當?shù)陌巡恢匾目蝮w做一些弱化。）

框體在游戲中的不同表現(xiàn)形式

Part? 5

字體篇

《幻書》中的字體多為復古氣質(zhì)的襯線字體，該類字體通常是具有風格和氣質(zhì)的，它們更多的是裝飾，體現(xiàn)復古和華麗 。這類字體華麗氣質(zhì)很符合幻想風的調(diào)性。

字體的種類如果有特定的要求最好也不要超過三種，多利用文字大小、粗細、顏色、透明度等營造信息層級關(guān)系。

重點信息要突出，簡短干練，更多的說明文字可以放到次層級或者彈窗等，盡可能壓縮文字個數(shù)，不但能夠為多語言問題減輕調(diào)整負擔；過多的文字也會讓玩家增加閱讀負擔產(chǎn)生負面情緒。

很多時候信息和元素越多就越難把握。多做減法避免無意義的視覺元素堆砌和雜亂無章，縮小或減少次要元素的存在感，利用合理的排版布局反而能讓你的設(shè)計更簡潔更有高級的氣質(zhì)。

Part? 6

動效篇

有了動效，讓我們之前做的界面就鮮活的呈現(xiàn)了出來。它可以引導，交互，讓玩家更好的去沉浸你的游戲中。所以它和界面的美觀、易用、滿足需求等息息相關(guān)（傳達狀態(tài)提供反饋，可視化操作的結(jié)果，增強交互的感覺）。

切記要求動效的準確簡潔。有些看起來很棒的動效會顯得多余或演示時間過長，在玩家進行反復性非常高的操作時會適得其反。好的動效就是讓你感覺不到它的存在，但又讓你覺得很舒服。

總? 結(jié)

《幻書啟世錄》的界面風格總體是圍繞著西方十九世紀的時代背景下來展開的設(shè)計，相信設(shè)計師小伙伴們在打開游戲的瞬間，會被里面各種精美的設(shè)計震撼到，幻想風二次元，又多了一款具有參考價值的設(shè)計方向。

美術(shù)上，幻書的界面設(shè)計從從背景/空間、圖形、配色、控件設(shè)計、字體、動效等幾個方面的局部展示與總結(jié)，是我對二次元幻想風格的一些初步理解，算是拋磚引玉，希望對大家有所幫助，也歡迎大家一起交流進步。