游戏UI-核心设计思路

我从最初的网页设计师、视觉设计师一路小打小闹，直到近两年坚定想要转型，继而开始游戏UI的学习与实践。

负责UI工作后，作品主要集中在《明日之后》《万国觉醒》等项目。

在这个过程中积累了许多踩过的坑、学习到的经验，今天希望将整理好的游戏UI制作思路分享给两类人：

一：打算从游戏平面/视觉转型到游戏UI的设计师（或者正在进行中）；

二：刚刚踏入游戏行业，对UI还处于摸索阶段的设计师。

为什么我会坚定转型呢？ 很简单。

一是热情。

游戏UI可以参与游戏的核心玩法设计，理解整个游戏的开发流程，无疑是将我的爱好和职业完美结合。

二是专业壁垒更高，收入天花板更高。

转型后几乎从头开始的学习过程同样是痛苦的、充满自我怀疑的。

要学习的东西相比于技术类，更多的是思维方向的转变。

UI的薪水同类型比较的话，确实会丰厚一些，这也是和能力对等的。

话不多说，下面就讲讲在我转型的这几年，对游戏UI设计师这一职业的理解。

什么是UI？

UI设计（或称界面设计）是指对软件的人机交互、操作逻辑、界面美观的整体设计。

放在游戏行业里，就是游戏的人机交互、操作逻辑、界面设计。

我们把这三点铺开来讲：

首先是人机交互

它可能是扭转战局的技能释放：按下技能，释放技能，获得团战胜利。

它可能是某个让你肾上腺素飙升的抽奖画面：哇哦，金色传说！

通过你的操作，计算机给予你的响应，交互充满在游戏的各个层面。

其次是操作逻辑

它是硬件、软件的底层逻辑。

它是游戏的底层逻辑：你的游戏用什么引擎开发？它是什么游戏类型？

它是人类的基本操作逻辑：你是左撇子还是视觉障碍人士？

最后是界面美观

为什么把它放在最后，因为我认为在UI制作流程里，界面美观一定是放在开发的最末尾！

界面美观的通常要求，不外乎几点：层次清晰、风格适配、视觉吸睛。

以上是游戏UI的一些常识，你理解了上述逻辑后，下面我们开始具体的制作流程。

游戏不只是单个环节，而是一套整体的工业流程，因此UI只是游戏中的一环，这里我不列举一些包含策划工作，例如：系统功能策划、世界观策划等；美术也会有美术概念设计的内容，整体内容我尽量限制于UI。

游戏UI制作流程我整理为4个步骤：关键界面框架-关键界面UX-关键界面风格产出-全界面真图。

一、设计关键界面框架

首先游戏立项后，作为UI设计师，要根据游戏类型设计原型初稿。

举个例子，一款开放世界动作游戏，策划给到功能文档，美术给定游戏风格图，那ui就可以开始第一步的关键界面框架设计。

关键界面是游戏主界面和重要一级跳转页（通常为属性、装备、背包、地图、设置）。

首先是主界面：一款动作类型游戏，核心玩法为动作战斗，需要玩家长时间停留在这个界面进行游玩，因此战斗界面即为游戏的主界面。

例如游戏的操作系统为手机，因此我们设计符合手机规范的操作逻辑；

例如针对手机不同的尺寸定义不同的以1334x750或2560x1480的的尺寸规范；

例如按照调查显示大拇指的最佳移动范围去做框架设计图，用的左移动、右攻击的方案定位基础操作位置，符合人体工程学。

我们按照策划功能设定条条列出需要的内容快速摆放。

动作控件：移动、技能、攻击。

人物属性：头像、名字、等级、血条、经验条、buff。

怪物：血条、怒气条、buff。

地图：小地图、人物位置、人物朝向、地图朝向、地理图。

任务目标：任务标题、文本、数量，指针。

这些内容需要去定义优先级，分布排开。

然后完成一级跳转页的功能模块，即属性、装备、背包、地图、设置的功能位置。

按照上述内容设计关键界面框架，完成游戏基本的功能逻辑。

二、设计关键界面UX（交互图）

关键界面UX一般是指关键界面框架的导向图、控件的交互反馈图。

我们的关键UX设计会依据五个准则：示能，意符，映射，反馈，概念模型。（交互/设计心理学基础）

下面我用一张图让你快速get到5个准则是什么意思。

图片来自网络

示能：是指一个物理对象与人之间的关系。例如做成按钮就是想让人明白可以点击。

意符：是表达提示。例如“go”文字提示你按钮的功能，我理解他是需要跳转。

映射：表示多组要素之间的关系。例如画面中出现的正方形图标回归类为可获得道具。

反馈：你执行了命令，就应该给你反馈。例如你点击了“go按钮“这个行为，会有一个按下状态然后跳转至活动界面这样的结果。

概念模型：快速告知产品的模型。例如你已经理解了这个活动的模型：签到获取道具！

但在实际制作过程中界面的复杂程度远比想象的要困难许多，还需要其他设计准则作为补充。

比如我们可以引入《尼尔森十大设计原则》、《交互设计的7大定律》，有兴趣可以搜索。

理论知识作为重要的逻辑参考，也是最终从结果反推过程的验证，越加复杂的系统会通过理论的取舍达到体验最优解。

根据5个准则，制作出我们的关键UX界面图：

有了清晰的关键界面框架和关键界面UX图，下一步我们开始关键界面的包装。

在这里我要做个小提醒。

一般在实际工作中，我们会需要各部门对效果图。就是拿我们制作的图和制作人、策划、程序、美术共同考虑每个部分的优先级、实现功能的可行性、核心玩法的方向性、动效镜头配合逻辑、界面美术的包装方向等等一系列未来会出问题去做预设，这就需要大量的经验（犯的错越多越好）。

策划考虑玩法是否有意思，UI考虑这个玩法体验的更舒服，拼接考虑资源如何处理、美术考虑怎么包装更牛逼，程序考虑怎么实现玩法更合理，我们需要共同去解决优先级最高的问题。

说人话就是开会，开会，开会，开不完的会。但是这一步也是必不可少的，为后续工作避坑。

三、关键界面风格产出

1.理论依据

界面风格的寻找有很多种方法，比如从游戏体验模型、产品定位、受众群体等方面找灵感。

主要作用是为了去寻找到能够支撑我们设计方向的理论依据，稍后我会着重讲解游戏体验模型（Game Experience Model）的设计方案。

举个着重于游戏的主色调方案的例子，主色调方向并非完全根据原画图来作为参考，更重要的是考虑游戏模型、游戏定位、受众群体等去定位游戏的主色调。

例如提到科幻游戏类型，大部分的科幻类的主色调会偏向蓝色，这是因为宇宙星空对于视觉效果的映射，主基调会是蓝色，而色相范围会根据受众群体的不同做出调整：硬核玩家的蓝色，受众是年轻人的蓝色偏向感知上会明显不同，这里会用到色彩心理的知识内容。

2.快速风格稿

回到我们的主界面，我们开始用颜色填充我们的UI层。

假设我通过以上理论依据完成了我的设计方向，那我在原有的交互功能稿上快速出草稿方案，为进一步的细化做铺垫。

这个过程我会建议大家使用色块法来制作，用色块法的原因是这个阶段只是需要看整体效果，不会去关注过多的细节，做的越细对设计师来讲只会越发限制你的发挥。用大色块去覆盖，我们看成套的小图能更快速的发现界面上的问题。 然后处理好黑白灰的关系和文字的排版，以最快速度出效果为目的。

文字的排版我会用到四个原则：亲密性、对齐、重复、对比；

黑白灰关系的原则：素描中主要运用黑白灰来表达物体的质感、量感、层次感；我们通过黑白灰关系确定层次。

以上，基本上完成了我们的关键界面假图。接下来就是细化假图，让原来的色块看起来更加工整舒适，满足基本可以使用的程度即可。

涉及到如此多的知识内容还能坚持住吗，接下来更是重量级的内容。

3.贴合游戏体验模型

我们完成了一套基础UI设计，但是莫得灵魂，没有灵魂的UI即使套用在不同游戏上也不会奇怪。

那么UI的灵魂是什么？或者说游戏美术的灵魂是什么？

是属于我们这个游戏独有的世界观和游戏机制。

这个阶段我要把界面去贴合游戏世界观，UI的风格走向、细节提炼、风格产出都来源于这一步。 这需要很多人共同去思考、脑暴、寻找、构建在这套世界观下合理的美术表现。

例如《王者荣耀》最开始的UI是没有调性和方向的，后来他们通过设计世界观、游戏机制的探索找到了他们的方向，智械飞升新国风（我的定义）

新版和旧版对比

这个方法我需要运用到游戏体验模型（Game Experience Model）的知识。

游戏体验模型（Game Experience Model）

游戏体验的六个要素以及它们之间的关系：

•机制 - 行为：机制包括游戏中可能发生的所有动作和所有游戏对象 - 由游戏规则定义的所有内容。动作是机制在每种情况下的运作方式。

•美学-感官刺激：美学包括旨在唤起玩家情绪的所有感官和认知设计。呈现给玩家的美感称为感官刺激。

•故事世界-叙事：故事世界为游戏提供了实质性的内容。那些没有的世界，是因为它们没有被放入游戏中，只是由游戏设计者想象出来的，或者由于所包含的情况而在逻辑上变得必要或可能。 叙述是游戏过程中发生的故事世界中的故事片段。

故事世界通常是游戏设计师设想的一个无限的宇宙。 叙事是玩家在游戏中体验的故事世界的片段，他们以情节、文字描述、动作场景、声音、艺术等形式对这个宇宙的一部分进行了美学再现，并在游戏过程中作为故事世界中的叙述呈现给玩家。

如果能理解故事叙事，那就能推导美学的艺术形式；游戏的机制所表现的玩家行为，能够起到限制/提高美学的效果；优秀的故事会回馈给设计者如何制作核心体验设计；以此达到三者能够互推的良性循环。

我们回过头来看王者这张图，游戏机制为moba（多人在线战术竞技游戏），世界观是智械飞升新国风。

以游戏机制（MOBA）推导出美术形式，体现在游戏的美术设计上，如游戏logo，UI的对立设计，平衡设计。

通过独属于他的国风世界观推导出的艺术表现形式，表达在最重要的皮肤表现，游戏的UI上如纹理、圆角处理和色彩走向、古风表现。

而独属于智械飞升的设计，从logo的机关小细节、匹配界面的纹理图所表达。

不同的游戏对于游戏体验模型的使用范围不同，例如《超级马里奥》，交互与游戏机制结合。

而《刺客信条》的UI与故事结合得更加紧密。

提到纹理细节表达，例如《刺客信条英灵殿》中的UI细节，会遵循故事背景，本作背景设定在维京时代，因此从时代背景推敲出来许多的纹理：包含符合时代的凯尔特纹、维京纹和海盗纹。

这个内容铺开来讲又是一个复杂的内容，有机会可以细聊。推荐去看一些关于纹理设计的书籍。

当然，把游戏体验模型玩出花，这当然不是一件轻松的工作。

回到我们的页面，把我们的关键界面按照这个方式去贴合游戏独有的世界观，做出这样的方案。

或者是这样的

四、全界面真图

我们完成关键界面设计以后，再一次通过开会、修改、分析、结果收集等进行合理判断。在此基础上确定最终的UI风格。

之后就是建立规范，再去延展设计，最后全方位落地。如何建立规范，完成一套规范，建立控件库、建立组件库、建立素材库、设计手册（不细说）。

管线思维导图

在规范下，开始内容延展：不同UI不同分工，划分不同功能管线，管理者需要把控每一条管线的执行和推进，以此完成我们长线开发的全界面真图（即一个游戏的所有界面）。

完成UI后，交付给动效、特效、程序，然后恭喜你，完成了游戏设计的UI部分。

写在最后

通过完成后的游戏成品，作为游戏UI仍要把控后续每一个界面传达的实际效果，是否达到预期；每一个动效反馈、每一个抽奖动画、打击感的震动，排版的舒适性等细节，都需要反复打磨达到让玩家最为舒服的水准。

毕竟，同一个动作不同的细节表达，最终的玩家的体验会完全不同。

镜头语言也非常重要，电影游戏画的视觉震撼和共鸣，能结合实际制作中，达到类似的效果。

例如《蜘蛛侠迈尔斯》各种QTE的镜头动作呈现，电影感拉满。

最后推荐一本书：《游戏设计的236个技巧》，干货很多，值得一看！

现在，你理解基础游戏UI了吗？ 手动狗头