游戏ui设计素材-游戏UI设计的5个基本原则和一些思考

UI决定了一款游戏的第一体验游戏ui设计素材，甚至决定了玩家的初始留存。 甚至可以说决定了一款游戏的品质。 虽然看起来很肤浅，但却直指游戏的核心。 简单来说，玩家一致认为一款游戏一定要有好的造型、好的剧情、优秀的画质； 但玩家却批评游戏简单粗暴、平衡性差、数值差。 这是什么意思？ 绝大多数玩家还是比较感性的，真正研究一款游戏的价值观和系统的很少。 因为玩家都是比较业余的，他们玩游戏只是为了好玩，体验快感。

几年前，我们使用的网站很难使用，玩的游戏也很糟糕。 那时还没有用户体验的概念。 我们甚至认为难用也是合理的。 只有那些聪明到会玩高端科技产品的人才能玩。 现在我当然想知道这是什么逻辑……）。 但你有没有想过？ 这是由很多客观原因决定的。 比如吉祥物设计，在当时的互联网环境下，玩的游戏很少，当时电脑、手机的普及率较低，人们当时的碎片时间并没有被大规模的互联网利用起来。就是现在。 游戏和应用程序被挤出。 我们之所以能够容忍如此糟糕的设计，是因为我们别无选择。 我们需要这个功能。 即使很难使用，我们也可以深入学习，直到达到目的。 众所周知，一般的政府网站丑陋且难以使用，但这并不妨碍我们使用它，因为我们需要用它来做事。 但现在情况不同了。 我们有各种好玩的设备，人们对游戏体验的要求也相应提高。 在这样的情况下，如果我们还允许玩家使用丑陋、难用的设计，无疑就是自掘坟墓……

UI是界面设计。 很多人认为界面设计只是界面的风格和美观，但实际上这种理解是非常片面的。 对于游戏UI来说游戏ui设计素材，无论是好用（交互）还是好看（视觉）都需要仔细考虑。 目前国内大型游戏公司的分工比较细。 一般有交互设计和视觉设计两个角色，共同完成UI工作。 小公司的情况比较复杂，就不详细说了。 对于UI，作者在这里总结了5个基本设计原则：

1.视觉流线引导

视觉流是我们查看单个界面时的视觉过程。 我们暂时不考虑手势的热区范围。 从眼球运动轨迹来看，眼睛对物体的关注本身就有一定的视觉规则，比如最简单的从上到下、从左到右的规则。 一般来说，在设计页面时，我们会尽量考虑人眼的视觉规则。 例如，最重要的功能不应该放置在视觉盲区内。 但这里我想强调的是，通过合理的界面控件层次安排和适当的布局，可以有效引导眼睛的视觉流动。 下图为《万物有灵》的主界面。 除了常见的按钮放置在四周之外，它还特地将旅程按钮放置在右侧中间位置。 此外，还添加了闪烁特效来吸引玩家的眼球。 你会不自觉地被这个特殊的按钮所吸引，忍不住想点进去看看。 这样的设计很好的吸引了玩家去规划最希望玩家进入的游戏功能。

万象的故事

2、相似原则

相似是指“风格统一、同类相似”。

风格应统一，同一类型的图标外观应一致。 即使按钮由于字体的长度而长度不同，至少它们在外观上看起来是相同的类型。 如果从外观上看按钮不是同一类型，可以参考《恋与制作人》（以下简称：恋与制作人）主页右侧的图标组，添加每个图标图的文字下方同样采用灰色渐变半透明底，这种做法从局部到整体保证了这些功能图标的一致性。 如果你的游戏采用3D实景风格，那么游戏中一定不会有二次元女孩。 可以考虑加入异次元元素，但必须经过美术专业处理，这样整个游戏的风格才不会那么奇怪。 《暖暖》里有很多不同的服装风格，有古代的、现代的、西式的、中式的、日式的等等，但统一起来之后，一点儿不和谐之感都没有。

与同类类似，同一类型的控件应放置得更近。 即使没有选择图案，也可以知道它们属于同一类型的按钮。 《爱与》的主界面也有很多功能，但并不感觉杂乱。 功能相似的按钮放置在一起，不同类型的按钮之间不存在干扰。 最忌讳的就是将控件放置得不规则，这会导致玩家找不到可点击的控件时感到困惑。 他们也会对功能感到困惑，不知道该怎么做。

恋与制作人

3. 色彩偏差和色阶

色彩偏向：在界面设计中，应该有一个色彩偏向，即主色调。 任何图片中，颜色不宜过多，不同颜色最好不要超过3种。 这就像穿衣服一样。 除非你是资深设计师，色彩驾驭能力好，很少出错，否则一般人穿在身上的花色越多，整体的档次就会越低。 分享一个小技巧：在游戏界面中，可以使用黄金比例来划分。 主色约占60%，辅助色占30%，突出色占10%。

颜色层次，在UI制作中，由于精度要求较高，颜色的亮度和面积之间存在反比关系。 这一点非常重要，因为它直接决定了UI主色之间的主次关系。 区域内应谨慎使用较鲜艳、纯度较高的颜色，否则会使客人不知所措，给玩家造成视觉折磨。 为了达到同样的视觉效果，区域内还必须采用不同明度、冷暖色的色彩。 微调。 背景颜色通常显示为无彩色（黑色、白色、灰色）或低饱和度颜色。 一般来说，面积越小，颜色越明亮、越纯正。 面积越大，灰度越多或亮度越低。 一旦颜色层次显露出来，整个界面的信息传递就会非常舒服。 《王者荣耀》界面的色彩层次感非常清晰。 主色为灰度很高的蓝色，辅助色为紫色、青色、黄色等，功能模块根据色相进行划分，可点击区域为亮度较高的颜色，这样的设计让操作变得简单供玩家识别功能。

王者荣耀

4.字体节奏

很多人认为游戏中的图形是最重要的，字体则起到传递信息的辅助作用。 这是错误的。 内容的可读性永远是第一位的。 当我们看图标的时候，我们会发现很多图标的辨识度不是很高，但是一旦添加了字体，功能就能立刻明白。 良好的字体设计、形状和大小将直接影响玩家接收信息的速度。 为什么叫字体节奏呢？ 在同一页面上使用相同的字体大小和字体类型会使信息的沟通变得繁琐和费力。 但如果根据信息的重要性对字体进行一些改变，节奏立刻就出来了，信息的层次一目了然。 因此，根据不同的功能场景使用不同的字体样式极其重要。 下图是《梦想家园》中一个活动页面的字体设计。 文字的节奏感非常好。 不同的功能有不同的文字大小，设计也有差异化。 有数字的地方甚至还加粗强调。 字体设计作者给出了一个小提示：比如可以是4的倍数卡通人物，那么你的界面字体大小就会有12px、16px、20px、24px。 （说到这里，我忍不住吐槽一下，真的不代表字体加边加斜体就是设计啊！）

梦想家园

5、目标导向原则（这里只讲逻辑，不图）

目标导向。 游戏中，每个界面都有对应的目标函数。 不管是哪种玩法，界面上显示的信息一定是玩家需要获取该功能的信息。 明确你的目的，尽量不要因为目的以外的原因影响你的设计。 除了这个接口功能的初衷之外，每次想要添加一些东西的时候，你都要反复问自己：添加额外的东西有什么好处？ 会造成一些问题吗？ 如果不添加的话有什么坏处？ 从多个维度去思考。 优秀的设计是经得起反复推敲的。 比如，为什么充值界面左侧一定要加白无常？ 玩家们会在充电的同时抽出时间来欣赏你的立绘吗？ 另外，如果同一个竖画在多个界面中重复使用，你的设计思路是多么缺乏？ ，一定要在每个页面上添加一个竖版图片，以表明你已经设计好了。 这样做的后果是，不仅降低了竖画本身的价值，还拖慢了游戏资源的加载速度，并且使界面变得复杂、难以识别，造成玩家的审美疲劳。

功能可视化，为什么一个界面里要出现几个相同的东西，每一寸空间都那么贵？ 不仅占用空间还影响玩家的理解。 如果表示不同的功能，还应该在图标上加以区分。 举一个我自己遇到的小例子，在游戏的制作界面中，所有的物品都放在那里。 相同图案的图标在同一页面上放置了3次，并且没有相关图案和文字描述的指导，这让玩家非常困惑。 我根本不知道如何操作。 事实上，我花了很长时间才弄清楚“所谓的”规划是什么。 最终的调整方案是添加指向箭头、原材料的框架选择以及调整目标项的显示布局。 总结与反思：规划并制作出游戏逻辑后，你不能把逻辑直接放在玩家面前。 需要有一个功能可视化的过程。 玩家并不关心你的制作流程是什么，也无法理解为什么界面中会出现三个相同图案的图标。 一个是配方，一个是图案，另一个是物品。 你只需要告诉玩家，我点击目标物品，收集足够的原材料和金钱，然后点击生产，看看能不能得到。

精简单个页面的功能。 同一页面上的功能最好不要超过三个。 如果功能太多，玩家在进入这个页面时会下意识地感到烦躁。 因为本来我只需要到一个页面就可以得到我想要的功能。 你这样的设计让我脱离了目标功能的需求，所以我必须思考我到底想做什么。 也就是说，你已经成功调动了玩家的选择。 困难。

规划与艺术的沟通

主要是问要求。 艺术家最怕听到的一句话是：没有要求，想画什么就画什么。 看来策划降低了对美术的要求，以为我不限制你你也不会画？ 但事实上，策划师把他的工作量转移给了美术师，因为策划师每次提出一个要求，他都有自己的使用场景，如果美术中没有很好的表达出来，是很难随便画出来的，因为它很容易出现策划者对最终产品不满意的车祸场景。 例如，我想要一个塔的大背景图像。 它是什么样的塔？ 它将用在哪里？ 哪些部分需要突出？ 是更西式，中式，还是日式？ 颜色应该更明亮还是更平静？ 需要涂几层？ 这一切都需要提前考虑。 或者你可以给出一些关键词，收集相应的图片素材，让美术更加具体，了解你的美术需求，让界面设计更符合你的期望。

让我分享一个我自己工作中的小例子。 在游戏中，我需要添加三个树洞活力排名的图形标题。 根据游戏的世界观，我可以提取出树洞活力的相关关键词：树洞、活力、历史树木、日本。 最后，我找到了日本历史上著名的盆景，并从中选出了三个名字：羽衣（800年）、东祭（200年）、小马由美（80年）。 之后我找到了每种盆景的相关图片作为形状参考。 我还根据游戏中现有的颜色找到了好看的图片作为颜色参考。 最后我提出了一个要求。

需求表格与成品对比

这里还有一个小插曲。 当我把这三个名字给我们的任务策划师（代号ZS）看时，ZS说玩家看不懂是什么，直接把三个名字扔了过去：世界树、智慧树、生命树。 后来，测试女孩向我抱怨：“太丑了，没人愿意用这些称号。” 我给女孩取了之前准备好的名字，女孩说她很喜欢。

（免责声明，这里只是个人的工作方法分享，游戏并不是一个完全想象的世界，很多设计也是来源于现实。这样可以让玩家更容易的贴近游戏世界，感受亲近，增加虚拟世界的氛围，习惯真实性，这样也能降低玩家的学习成本，但版权问题就是另外一回事了。）

总结

简单高效的操作流程对于提升用户体验，特别是对于新手用户来说，是非常明显的。 如果一个界面能让玩家轻松获得你的积分，那么这个UI界面就是成功的。 如果这个界面的操作简单、优雅，那么这个界面就相当成功了。 如果界面很漂亮，那么这个界面就非常成功。

建议做界面的策划人员学习动画制作或动效制作的基础知识。 最简单的是，在制作界面的时候，如何才能让两个具有相同选项卡的页面在相互切换时看起来一样呢？ 部分按钮位置保持不变，让操作不那么陌生，界面也更容易理解。