天天和游戏打交道，到底什么是游戏UI？

大家平时所说的UI，就是“User Interface ”的简称，指对软件的人机交互、操作逻辑、界面美观的整体设计。

那今天我们要聊的游戏UI所指的自然就是游戏的用户界面设计了，游戏界面设计是根据游戏特性，把必要的信息展现在游戏主界面、操控界面和弹出界面上，通过合理的设计，引导用户进行简单的人机交互操作。

简单来讲，游戏中除了游戏画面外的内容都属于游戏UI的范畴。

比如，进入游戏时会有游戏登录界面——

▲《王者荣耀》界面

登陆之后来到游戏的主界面——

 ▲《王者荣耀》界面

可以看到，游戏主界面上一般会有角色立绘，界面的四周排列游戏的主要功能和其他元素。

而点击主界面上的功能图标，就会进入到相应的二级界面——

▲《王者荣耀》界面

游戏开始后，就是游戏操作界面——

▲《王者荣耀》界面

一款好游戏，优秀的游戏UI设计功不可没。接下来，星仔将围绕游戏UI设计的流程、游戏UI设计的原则、游戏UI的风格、学习游戏UI的两大方向这4个方面和大家聊一聊。

游戏UI设计流程

游戏界面一般是策划把系统设计完成后，呈现的视觉交互模型，大致有这样五个流程。

★核心设计：根据玩家需求确定界面设计方向，界面规范确保界面稳定产出。

★结构设计：界面划分区域来影响信息秩序的感知。

★信息设计：界面信息的分类、排布、优化与反馈。

★体验设计：操作负担、便捷度与容错率。

★表现设计：主题表达、个性化、美观度与沟通。

游戏UI设计原则

一般来讲，游戏UI设计需要注意以下几个方面：

1.视觉流的引导

视觉流，就是我们在查看单个界面时的视觉流程。暂且先不考虑手势的热区范围，单从眼动轨迹来看，眼睛对于物体的关注本身是有一定的视觉规律的，比如最简单的从上到下、从左到右的规律。

但眼睛的视觉流是可以通过对界面控件合理的层级罗列、恰当的布局来进行有效引导的。

举个例子，《万象物语》的主界面除了把按钮摆放在四周外，还专门把旅途按钮摆到了右侧中间位置，并加了闪动的特效。玩家的眼睛会不自觉的被吸引到这个特殊的按钮上，并会忍不住想点击，这样就可以达到把玩家拉到游戏功能的目的。

▲《万象物语》界面

2.界面简洁，方便操作

游戏界面要简洁美观，避免杂乱，这样更便于玩家操作，减少使用上的错误。

这里可以看一下《原神》的处理，界面中大部分功能都收纳进二级菜单，在界面布局上更简洁美观，给人更清爽的感觉。

▲《原神》界面

3.色彩偏向和色彩层次

界面设计中都有一个色彩的偏向，也就是主色调。画面中的色彩不宜过多，不同色系最好不要超过3种。

同时，色彩偏向还可以调动玩家的情绪。比如，黑色可以营造诡异、恐怖的氛围，生存恐怖类游戏《生化危机》系列就是这种基调。

▲《生化危机7》界面

而色彩层次则可以对界面中的功能模块进行划分。还是拿《王者荣耀》的主界面来说，界面主色调是灰度很高的蓝色，辅助色是黄色，从色相上对功能模块做出了划分，并且可点击区域的颜色有很高的亮度，这样的设计让玩家很容易识别功能。

▲《王者荣耀》界面

4.风格统一性

界面设计的风格、结构要与游戏的主题和内容保持一致，优秀的游戏界面设计大都具备这个特点。

举个例子，《全面战争：三国》这款中国题材战争游戏在UI设计上下足了功夫，满屏的中国风。其中的改革界面以黑色水墨版面为背景，升级节点是用白色工笔画的图标，每完成一次升级，梅花就会在节点上绽放。

▲《全面战争：三国》界面

再比如，同系列游戏《全面战争传奇：特洛伊》中，选择界面暗黄的色调下，人物铜像与真人转换，带来强烈的古希腊的史诗感。

▲《全面战争传奇：特洛伊》界面

5.习惯和认知

关于界面设计在操作上的难易程度，尽量不要超出大部分游戏玩家的认知范围，并且要考虑大部分游戏玩家在与游戏互动时的习惯。

以《英雄联盟》客户端为例，整个界面非常简单，左侧是文字说明，右侧是一个圆环动效和按钮。

圆环和“接受”按钮在颜色和动效上都做了突出设计，当动效开始播放时，会有类似时间倒计时的效果，对用户进行点击下方“接受”按钮的心理暗示。

▲《英雄联盟》界面

游戏UI的风格

游戏UI设计风格非常多，类型划分并没有非常明确的界定，从不同的角度出发都可以进行不同的风格分类。例如按照美术风格划分可以分为写实风格、像素风格、水晶风格、扁平风格等。按照地域行业划分还可以分为欧美风、中国风、日韩风等。

这里就不对所有的风格进行分类了，主要列举市面上比较常见的5种风格。

1.魔幻风格

魔幻风格的游戏界面设计结合了中世纪欧洲和幻想的一些元素，如盔甲、城堡、骑士、羊皮纸、哥特字体、魔法、吸血鬼等。整体给人以奇幻的感受，细分下来有厚重、扁平等不同类型。

▲《上古卷轴5：天际》界面

2.科技风格

科技风格的游戏界面设计常应用在带有高科技、未来感等元素的游戏中，细分下来有科幻、赛博朋克等不同类型。

该类风格的游戏界面设计以现实为基础，并在具体设计中融入了很多超现实的元素，如细密的线条、数据流、代码、荧光等，给人新奇、有趣的感受。

▲《精英：危险》界面

3.东方风格

东方风格的游戏界面细分下来有中国风、和风及中国式和风这3种类型。同时，这些类型的界面有着一些共用的视觉元素，并且伴随不同地域行业有着完全不同的发展路径。

常见的国产网络游戏题材有金庸题材、三国题材、西游题材、创新IP题材、网络文学IP衍生的玄幻题材，以及部分经典文学衍生的魔幻题材等。

同时，从界面设计风格上来说，手游时代的武侠类游戏的界面设计都比较追求轻量化。

▲《逆水寒》界面

4.休闲风格

休闲风格的游戏界面设计大都偏轻松和可爱，我们也习惯将这类风格所表现出的设计风格称为可爱风格、卡通风格（具体划分包括日韩卡通风格和美式卡通风格）或Q萌风格。

休闲风格的游戏界面整体呈现出色调明快、细节概括、造型圆润及块面区分明显的设计特点，给玩家轻松、愉悦和有趣的感受。

▲《开心消消乐》界面

5.二次元风格

二次元风格的游戏是近几年来比较火的一种游戏类型，原生国为日本。从界面风格上讲，它并没有严格意义上且单一维度上的定义。

从广义上讲，二次元是二维世界的虚拟存在。所有使用了二维作画方式或用三维方式去实现二维视觉风格的美术化表现都可以被称为二次元风格。

▲《恋与制作人》界面

现阶段还衍生出中国二次元风格的游戏界面设计，具体的风格表现与日式二次元有相似之处，但又融入了中国元素。

▲《阴阳师》界面

游戏UI的学习方向

通过前文的介绍，大家对游戏UI设计应该有所了解了。观察上述举例的游戏UI界面，可以发现游戏UI设计既要具备整体设计思路，又要处理好各种小细节

学习游戏UI设计，一般从游戏UI界面设计和游戏UI图标设计两个方面入手，这是游戏UI设计应用最广的两类。

1.游戏UI图标

在游戏界面上我们可以看到各种图标，配有“商城”、“技能”、“排行”、“挑战”等文字，这些就是游戏UI图标，是游戏中必不可少的部分。

设计游戏UI图标要根据游戏的设定和整体风格来定，但不管是什么游戏，一般都会有物品图标、技能图标和功能图标，因此这三个类型的图标是学习游戏UI图标的重点。

★游戏UI物品图标设计：

▲游戏原画大师班学员作业-吴*凤

▲游戏原画大师班学员作业-严*圆

▲游戏原画大师班学员作业-李*妹

★游戏UI技能图标设计：

▲游戏原画大师班学员作业-刘*星

▲游戏原画大师班学员作业-吴*凤

▲游戏原画大师班学员作业-赵*奇

★游戏UI功能图标设计：

▲游戏原画大师班学员作业-董*昕

▲游戏原画大师班学员作业-纪*越

▲游戏原画大师班学员作业-马*慧

2.游戏UI界面

学完游戏UI图标之后，就要开始学习整体的游戏界面设计了。通过对市场上主流游戏风格的了解，学习游戏界面设计的应用和设计特征，设计不同风格类型的作品，输出完整的游戏UI作品。

从现在市场上的游戏界面来看，学习游戏UI界面设计最起码要学会游戏主界面设计、二级界面设计、活动界面设计，这些都是一款游戏必备的。

★游戏UI主界面设计：

▲游戏原画大师班学员作业-颜*松

▲游戏原画大师班学员作业-陈*宝

▲游戏原画大师班学员作业-虞*家

★游戏UI二级界面设计：

▲游戏原画大师班学员作业-马*慧

▲游戏原画大师班学员作业-郑*栋

▲游戏原画大师班学员作业-胡*

★游戏UI活动界面设计：

▲游戏原画大师班学员作业-方*

▲游戏原画大师班学员作业-赵*奇

▲游戏原画大师班学员作业-潘*伟

如果想看更多更优秀的学员作业，指路花瓣网，关注【Mars游戏星球】，里面有各类火星时代游戏学员优秀作业和超详细的教程，入股不亏！

▲火星时代学员优秀作业

▲火星时代课堂案例-教程

关于游戏UI设计，本文进行了整体上的介绍，当然，其中还有很多细节值得关注。不论是对市场上游戏UI设计感兴趣，还是想进一步了解有关游戏UI设计的学习内容，都可以和星仔聊聊哇（悄悄告诉你，游戏行业急缺游戏UI设计师噢！）