【美术专题】游戏UI设计（下）

一.如何设计

游戏界面设计，其设计目的以功能性为主，视觉性为辅。游戏界面设计需根据游戏特性传达主次信息、规划操做界面和互动模式，经过合理的设计，引导用户进行方便快捷的操做。

游戏界面设计，功能性为主，视觉性为辅。设计的时候要根据游戏的特性，来传达主次信息，规划操做界面和互动模式，经过设计引导玩家游玩。一个好的界面得兼顾美观和易用这两个条件，符合这两个条件才能给玩家足够的代入感。

下面咱们先来看几个比较好的案例分析。

下图界面用的是对称式的布局，界面很是的平衡，文字底板都作了斜切式的设计，有很强的拼接感。界面背景的颜色很亮，因此界面底板的颜色用了黑色透明底板，能够从亮背景中突出出来。

左侧界面UI控件都是围绕着界面四周来布置的，这么布局能够提高玩家的游戏体验，界面的UI控件采用的高饱和度配色，使整个界面的氛围很是的明快活泼。

下图这个界面值得咱们参考的是它对总体UI控件的把控，界面UI控件都是围绕着界面四周来布置的，这样的布局能够提高玩家的游戏体验，在颜色上都是采用的高饱和度配色，使整个界面的氛围很是的明快活泼。这个界面的布局方式和这种高饱和度的配色也都值得咱们来学习的。

学会合理的运用高饱和度配色可以对界面起到画龙点睛的做用。

下图界面是一个开始游戏的界面，整个界面采用的墨绿色的的背景，在墨绿色背景上点缀一些小面积的高饱和度颜色，使整个界面对比很是的强烈。界面的LOGO设计的很是的讲究,整个LOGO采用的折纸风格来设计的，在配上旁边的黄色小方块，与游戏的主题很契合。

下图界面的配色很是的明快活泼、轻松休闲。由于是竖屏的游戏玩法，因此界面中全部的UI控件都集中在界面的上部，使整个界面更加的易于玩家操做。

这两个界面，右侧的界面是开始游戏的界面，整个界面采用的也是对称式的布局，使界面看起来很是的稳定、扎实。界面的的LOGO和开始游戏按钮都用了高饱和度的颜色，使整个界面的对比很是强烈。

在这个界面里，LOGO的设计算是一个亮点，它采用了折纸风格的设计，现代感十足，再搭配上旁边的黄色几何小方块，使总体界面在符合游戏主题的同时显得时尚简约。

上图这个界面跟前面几个有所不一样，总体界面的UI控件都集中在上部，这么设计是根据游戏特殊的竖屏玩法来服务的。（不一样的游戏玩法界面的布局也会有所区别，因此具体的界面布局得根据游戏玩法来定）

再看这个界面的总体效果，总体的颜色都采用了高饱和度来制做，使界面的总体氛围轻松活泼。符合游戏主题。（因此咱们在制做中的配色也得根据游戏的主题风格来定义）。

下图界面的UI控件总体集中在界面的上部，有利于玩家的竖屏游戏体验。界面背景配色采用的是比较强烈的黑白对比配色，界面的UI控件采用的是高饱和度橙黄色配色，配合上界面的暗色背景显得UI控件很是突出。

下图界面是一个开始游戏界面，界面的总体布局采用的上下对称式的设计，界面的配色总体比较干净。界面中的一些图标和控件都用了深灰色，在浅色背景的陪衬下，很是的突出。

这两个界面，第一个界面的UI控件总体集中在界面的上部，有利于玩家的竖屏游戏体验。界面背景配色采用的是比较强烈的黑白对比配色，界面的UI控件采用的是高饱和度橙黄色配色，配合上界面的暗色背景显得UI控件很是突出。

第二个界面是一个开始游戏界面，界面的总体布局采用的上下对称式的设计，界面的配色总体比较干净。界面中的一些图标和控件都用了深灰色，在浅色背景的陪衬下，很是的突出。

两个界面使用的这种强对比的配色方法，都是值得咱们学习和借鉴的。

咱们的案例分析差很少也讲完了，如今咱们来总结一下这些案例的共性。

你们看到我屏幕中的这些界面，和前面的界面都同样是简约扁平的风格。这种界面绘制方法简单，操做快捷，容易出效果，符合如今大众的审美。你们也知道，市场上每一年的流行趋势都有所不同，大众审美也在逐步提升。因此，但愿你们制做游戏界面的时候，能尽可能往这个方向多研究、靠拢。

介绍了这些比较有参考价值的界面案例，那接下来，咱们来看一下，怎样去设计一个简单界面。

案例-农场经营模拟UI

设计制做农场经营模拟UI界面，主要功能是游戏操做与各功能入口。

一开始，咱们想要作一个游戏界面，首先在肯定好游戏类型的同时，须要一个初步的界面策划案，如图，或是去网上搜一下其余同类游戏的界面布局，直接拿来借鉴一下。

如图所示，咱们要设计一个农场经营模拟游戏的主界面，首先肯定好整个界面的主要功能为游戏操做和各功能入口。

咱们在设计界面的时候必定要先想明白策划案再来进行设计，这样才能清晰制做逻辑。如今咱们来分析一下这个策划案，左侧这张图就是咱们作好的界面策划案，先肯定这个界面的布局，根据

游戏类型，UI控件围绕着屏幕四周，这样的布局很符合玩家的操做习惯。

界面的金币、地块等资源信息放在了左上角，玩家能够对金币和地块资源进行一些操做，玩家列表在界面的右上角，这样能够很直观的在玩家列表中看到一些关于本身和其余玩家的信息。

界面下方，分别是玩家的等级经验值，操做图标和一些功能图标按钮，由于这三种控件不是同一种控件，因此他们的距离会分隔的远一些，互不干扰。

分析完整个策划案，咱们开始寻找一些同类型游戏的参考素材。

在找好素材以后，咱们就能够开始绘制这个界面。

1.从界面上部开始设计，左侧是一些资源类信息，右侧是玩家列表。

2.设计界面的下部，等级经验值和操做图标。

3.设计界面下部右侧的功能图标按钮。

这个界面的总体风格我采用了最近比较流行的Q版扁平风格进行设计，根据我的制做习惯，我从界面的上部开始绘制，先绘制出了左上的资源类信息底板和图标，底板采用了高纯度的颜色来进行搭配，图标也一样用了Q版卡通的风格来绘制，突出了整个界面的清新感，强调了整个画面的设计风格。

出售和加号按钮属于充值按钮，因此咱们用了很醒目的颜色来进行一个视觉上的突出，使玩家能一眼就看到他。

左侧作完以后，咱们再来看看右侧，右侧的玩家列表底板用了黑色半透的设计，再把须要展现的信息独立出来的同时也不会跟整个场景脱节，在设计的时候，须要多注意对文字节奏的把控，主要是注意文字的排版，对齐和大小的变化。

经验值条，咱们放在了左下角，采用了高亮度的绿色，这样设计比较符合玩家的习惯，由于大多数游戏的经验值条是绿色的，以后是中间的主要操做道具，耕地，浇水，收割。这三个图标分别采用了简单的锄头、水壶和镰刀的外形，这么设计是为了让玩家看到图标的时候，就能对图标有很直观的认知。这种常常操做得图标必定要作的简单易懂，不能太过复杂。

最后，咱们来设计最右侧的功能图标按钮，功能图标按钮也是用剪影的形式来设计的，由于这三个图标和中间的图标不是属于同一类型的图标，因此在设计的时候要作出明显的区分。这三个图标的底板咱们是用的圆形实体的白色底板，和中间的黑色半透底板不一样。在图标的颜色上也作出了明显的区分，由于咱们制做的是比较休闲的小游戏，因此，这几个功能图标都采用了比较明快的蓝色。

如今，一个简单的界面就已经作完了，让咱们来看一下这个界面的总体效果。

这是花了两个多小时来完成的一个可以知足玩家基础操做的界面，画面风格也较为轻松明快。从分析策划案、找素材一直到完成界面制做，其实并不会太过复杂，主要是得把控一下总体风格的统一，通常就小游戏来讲，最好的效果就是我前面提到的画面简洁，色彩明快。不要过多的去增长一些无用的元素堆砌。因为还有一些关于PS的操做，在这里我没法面面俱到的讲解，这里还得须要大家在制做的过程当中本身多研究、琢磨、多去关注一下当下的潮流趋势。

如今，整个游戏UI的设计界面咱们就已经讲完了，接下来让咱们看看用户的一些设计案例，来作一个简单的分析。

二.用户案例分析

《梗人生》是用户自制的关于人生，关于选择的剧情游戏。

用户把界面设计的很是有趣味性，设计出了一种复古的风格。

1.界面的总体风格清新活泼，全程基本保持了风格的高度统一。

2.登陆界面背景的设计元素搭配显得尤其美观。

部分建议：

游戏内的界面配色有些单调，能够考虑加一些跳跃性较强的颜色，好比把蛋糕图标设计为粉红色，或是把顶部的图标底变成黑色半透。这样游戏内部感觉会丰富不少。右侧界面地板上的黑色的文字应该换成亮色的文字，这样玩家在阅读信息的时候很方便不少。

这是用户作的一个小游戏，玩法有点像AVG游戏，这个游戏界面设计的仍是能够的，登陆界面的配色很明快，开始游戏按钮还设计出了一个闪动的小动效，让人看着有点击欲望。又称的界面配色比较复古，图标的风格也较为统一，但有仇界面底板的文字最好不要使用黑色，把文字的颜色换的明亮一点，这样玩家在阅读的时候会更加清晰，不至于使眼睛过于疲劳，如今咱们来看一下，这个界面能够如何的去优化。

!

下面的界面是优化后的界面，主要优化了文字和按钮的颜色，由于整个界面的底板都是偏黄褐色的底板，再配上纯黑色的文字，阅读起来会产生视觉上的疲劳，因此我把原来底板上的纯黑色文字都换成了比较浅的颜色，方便玩家的阅读。并且黄褐色的底板，配色比较沉闷，因此我这边加强了按钮得亮度，使界面显得明亮透气了一点。

《碰撞法则》是用户自制的一款躲避类小游戏。

用户设计的游戏界面恰到好处，整个游戏的界面风格统一。

1.界面风格色调统一，能体现出用户有必定的手绘能力。

2.登陆界面的LOGO色彩搭配合理，用了黑色的粗描边，使文字和场景拉开层次。

部分建议：

游戏使用的背景颜色有些脏，能够考虑换个颜色干净些的背景或是把背景的饱和度调的高一些，游戏规则和道具按钮能够考虑提升对比作的更突出一点。

这个游戏是用户自制的一个躲避类的小游戏，界面的风格比较统一，登陆界面LOGO的配色很响亮，但这个LOGO的尺寸过小了，没法突出整个界面的主题，能够在尺寸上作的再大一些，从这两个界面的绘制能看出玩家是有必定手绘基础的。但这两个界面的背景太过粗糙，颜色有些脏，这是界面制做中比较忌讳的，能够考虑换一个颜色干净一些的背景来搭配界面。

风格

界面设计的风格、结构必需要与游戏的主题和内容相一致，优秀的游戏界面设计都具有这个特色。

界面

界面设计要尽可能简洁，目的是便于游戏玩家使用，减小在操做上出现失误。界面设计在操做上的难易程度尽可能不要超出大部分玩家的认知范围，而且要考虑大部分游戏玩家在与游戏互动时的习惯。

配色

界面的配色很是重要，直接影响着界面的美观度，在配色的时候必定要遵循前面提到过的“631配色原则”，这样在给界面配色的时候，才能有理可循，搭配出合理的界面配色。

如今咱们来作一个总结，咱们在设计界面的时候，有几个问题是须要咱们注意的：

第一点，界面的风格，结构必定要与游戏的主题和内容相一致，你设计什么题材的游戏，你的界面风格就要加入什么题材的设计元素，这样你设计的界面风格才能符合你的游戏主题

第二点，界面的设计必定要尽可能简洁，让玩家便于使用，方便玩家的操做，还得考虑大部分游戏玩家游玩时的操做习惯。

第三点，界面的配色很是重要，直接影响着界面的美观度，在配色的时候必定要遵循前面提到过的“631配色原则”，这样在给界面配色的时候，才能有理可循，才能搭配出合理的界面配色。