【游戏UI教程】0基础小白在入门游戏界面设计时注意事项-画师巴士

【游戏UI教程】0基础小白在入门游戏界面设计时注意事项

2019-12-24

2475

你是不是和许多人一样，玩过很多游戏，却从来没有关注过UI？如果不是因为游戏UI设计师目前水涨船高的身价，和异常庞大的需求——

（这里可以百度招聘信息的薪资）

你也许关注的还是游戏的角色、场景、剧情、玩法等等，根本想不到游戏UI设计。已经在游戏行业里排在了一个何等重要的位置。

UI=User Interface，也就是“用户界面设计”。打开你过去24小时里玩过的游戏，从登录界面、操作界面，到游戏道具、技能标志，所有这些设计，统统属于游戏UI。换句话说，你在玩游戏的过程中一半以上的工夫都在跟UI打交道，它设计得是否巧妙、清晰、流畅，很大程度影响到了你的游戏体验。

（名动漫学生练习作品）

那我们现在进入游戏UI设计。首先，我们在开始学习之前，务必知道，游戏 UI 设计的原则主要有以下几个方面——

1、设计简易：界面设计要尽量简洁，目的是便于游戏玩家使用，减少在操作上出现错误。这种简洁性的设计和人机工程学非常相似，也可以说就是同一个方向，都是为了方便人的行为而产生的。在现阶段已经普遍应用于我们生活中的各个领域，幵且在未来还会继续拓展。

2、代表玩家说话：界面设计的语言要能够代表游戏玩家说话而不是设计者。这里所说的代表，就是把大部分玩家的想法实体化表现出来，主要通过造型、色彩、布局等几个主要方面表达，不同的变化会产生不同的心理感受，例如尖锐、红色、交错带来了血腥、暴力、激动、刺激、张扬等情绪，适合打击感和比较暴力的作品，而平滑、黑色、屈曲带来了诡异、怪诞、恐怖的气息，又如分散、粉红、嫩绿、圆钝，则带给我们可爱、迷你、浪漫的感觉，如此多的搭配会系统的引导玩家的游戏体验，为玩家的各种新奇想法助力。

3、统一性：界面设计的风格、结构必须要与游戏的主题和内容相一致，优秀的游戏界面设计都具备这个特点。这一点看上去简单，实则还是比较复杂的，想要统一起来，幵不是一件简单的事情，就拿颜色这点来说，就算我只用几个颜色搭配设计界面，也不容易使之统一，因为颜色的比重会对画面产生不同的影响，所以我们会对统一性做出多种统一方式方法。
例如固定一个色版，包括色相、纯度、明度都要确定，另外就是比例、主次，等等，统一界面除了色彩还有构件，这也是一个可以重复利用和统一的最好方式，边框、底纹、标记、按钮、图标，等等，都是用一致的纹样、结构、设计，最后就是必须统一文字，在界面上是必不可少的，每个游戏只能使用 1-2 种文字，文字也是游戏中出现频率的方面，过多就不够统一。

4、清晰视觉：效果的清晰有助于游戏玩家对游戏的理解，方便游戏玩家对功能的使用。对于 IOS 平台上的游戏来说，为了达到更高的效率和清晰度，需要制作不同的界面美术资源，以达到目的，这也是目前无法解决的硬件与软件间的问题。不同的系统，其像素的要求，尺寸的要求也是不一样。

5、习惯与认知：界面设计在操作上的难易程度尽量不要超出大部分游戏玩家的认知范围，幵且要考虑大部分游戏玩家在与游戏互动时的习惯。这个部分就要提到游戏人群了，不同的人群拥有不同的年龄特点和时代背景，所接触的游戏也大不相同，这就要我们提早定位目标人群，把他们可能玩过的游戏做统一整理，分析幵制定符合他们习惯的界面认知系统。

6、自由度：游戏玩家在与游戏进行互动时的方式具有多重性，自由度很高，例如操作的工具不单单局限于鼠标和键盘，也可以是游戏手柄、体感游戏设备。这一点对于高端玩家来说，是非常重要的，因为这群人不会停留在基础的玩法之上，他们会利用游戏中各种细微的空间，来表现出自身的不同和优势，所以我们要在界面的部分为这类人群提供自由度较高的设计。

（本栏图片来源名动漫学生练习）

除了上述游戏界面设计的原则，在游戏 UI 设计中还需注意以下事项：

1、突出设计重点减少识别误区。

2、使界面简洁，体现重要信息；找到玩家习惯，隐藏冷门应用。

3、使用普通接受习惯，不轻易尝试新的设计规范。

4、减少用户学习信息，简化重复操作，节省空间加载资源。

既然想学游戏UI，还是得先从基础学起。下面我就简单讲讲游戏UI的设计流程，虽然简单，可句句是干货

一、在开始高大上的游戏UI设计之旅前，你得先跑起来！你先要明确一个最最基本的概念：游戏UI不是把自己关在小黑屋里，脑袋一拍，想怎么画就画出来的。

在设计前，你必须得知道几个前提：

1、我需要向玩家传达哪些信息？

2、玩家需要点击哪些功能？

3、游戏需要突出哪些内容？

4、窗口、按钮、图标处在哪种环境中？

二、然后你得先跑到游戏策划那儿，和对方推心置腹地沟通，了解清楚你要设计的游戏究竟是玩什么、给谁玩、怎么玩。这几点确定了，才好确定美术风格。比如，你在下手前要先确定游戏的题材、背景年代、质感、整体色调、可用元素等等。要是做一款三国背景的游戏，对话界面竟然跳出肾6的屏幕，如果你是玩家，会不会觉得整个人都穿越了？

三、最后跑到做游戏设定部门，了解角色的设定过程，以及场景设定过程。在心中对游戏已经有了一个具体的了解，从策划到角色设计，到场景规划，都有了一个整体的概念。

四、这一步搞定后，你就进入搭框架阶段，从主界面开始一层层深入设计，像是一些常用界面、弹出框、功能按钮、道具、技能图标等等，要是连一些杂七杂八的东西再加上游戏Logo也能连带着一道设计掉，那真是极好的。

偷偷告诉你几个小Tip，包你工作起来事半功倍：

1、先给界面模块的开发分清优先级，先设计以及导航，然后二级导航；三级导航等等的主次顺序，因为开发过程也是线分主共功能

2、务必先要确立好设计规范。否则等开工了再边做边改，会死掉多少脑细胞，你造吗？

3、菜单层级控制在3级，不要超过4级。

五、到这里就可以为每个元素布局并制作草稿了。千万别想当然，一定要根据用户操作习惯，规划好显示区域、操作区域、执行按钮区域等。用于展示的图标不要大于操作图标，只要能清楚显示就行。文字的字体样式和大小也顺便敲定，都别超过3种。动态文字用系统默认就够了，等到中期再看情况做详细规定。

然后可以根据游戏主题风格，开始寻找相关的一些设计元素

现在，制作主界面UI以及主要功能按钮的时机才算成熟，可以正式确立UI整体风格了。根据刚开始设定的信息和原画图片，确保UI风格跟原画风格统一。颜色别整得太花里胡哨，清晰美观即可，建立主辅色调以及点缀色的调性以及比例体系。（如下图）

然后开始根据对游戏的大体定位，风格以及元素，先把主体功能一一列出来，按照对游戏的理解，在以设计原则的基础上，把主功能的图标先设计出来，也就是一级导航。后面的二级导航，三级导航就可以根据图标风格，进行延伸和补充。（切记一条关键原则：哪怕玩你游戏的是从没玩过游戏的小白，只要他们能分分钟顺着你的逻辑思路走下去，你就赢了。好的UI不仅可以让游戏变得顺畅简单，还能让整个体验更上一层楼。）

（提示：上面作品是游戏UI班学生第一次做图标设计练习，通过一种主题设计一套功能图标，主要训练图标设计、配色、制作。整体构图饱满，颜色统一，但最后在精度上同学们还是比较欠缺的，希望下次继续努力！）

现在明白整套项目的前提流程了吗？既然说到这里，我们这边也把这么多年的游戏UI设计经验给大家分享一下，不多说，就4条，都是我们在设计游戏UI设计时着重考虑的几点经验，一家之言，不代表立场，能不能加分看你的运用水平，但至少能保证你在做UI设计时被少退几稿。

1、让你设计的界面简洁，减少玩家发生选择错误的可能性。

别一开始就迫不及待地把那些八竿子打不着的内容一股脑展现出来，玩家也不可能记得住。你还在读小学，就让你背三角函数，除了把自己绕晕，对你学习数学没有任何帮助。游戏也是一样，让铺天盖地的菜单、按钮、图标、文字一开始就碾压过来，玩家只会头昏眼花。相信我，那么多功能，能用全的玩家不会超过一半。对于大多数人，只要呈现给他们流畅的游戏体验，就足够了。

2、UI设计要能一眼看明白，一点就有效。

人脑毕竟对于图形的识别速度要高于文字，生活中常见物品又会对他们产生直观的暗示。如果能在UI设计中合理应用这些暗示，让玩家一眼看明白相应操作的含义，他们就能无脑式操作。操作一流畅，玩家留存率自然提高。

3、切记切记切记：要保持一致。

说起来简单，但“一致”其实包含了很多方面。比如不同组成部分之间的交互设计目标要一致：目标用户如果是小白玩家，就别把界面逻辑整得太复杂，不光局部如此，整体也要如此。交互元素的外观也要保持一致：这样可以保持玩家注意力集中。不过这个还没有统一标准，千万别一拍脑袋就决定。

想想WOW为什么能火10年？毛主席说了，没有调查就没有发言权。玩家触发不同类型元素对应的行为事件后交互行为更需要一致：比如需要确认操作的对话框里至少都得有“确认”和“取消”这两个按钮，如果极端点的话，相同类型交互元素引起的行为事件也应该都相同，但具体情况还得具体分析，不可胡子眉毛一把抓。

4、不管设计得多么花里胡哨，永远别忘了：这东西是给人用的，功能性差，其他什么都白搭。

乔帮主的苹果为什么大家都肯买账，除了外观精致，更重要的还是它的每个功能点都妥妥地戳中用户的G点。游戏UI也是同样道理，这毕竟是给玩家用的，只有让他们感觉不累赘，一点就上手，才愿意下回接着玩。伟大的设计，都在艺术美、易用性、性能和成本间寻求平衡。

总结

游戏 Ui与平面 Ui 的不同：同样的东西你可以发挥你的想象，设计成你自己想要的样子，但是前提都是要考虑用户体验。这两点是两者共通的，但人机交互永远都是平面 Ui 设计的主旨。

而游戏图标的设计则可以根据游戏的情景相应变化，或者根据游戏人物的需要，同样一个物件，可以百变。又如第二部分说到的登陆界面一样，不同的游戏登陆界面也有多种，而这种界面的好坏不是根据画的像不像，而是用户的体验。

知识问答区

零基础可以学习吗？