接口101：使其漂亮

我做了一些游戏，实际上已经发布了。我一遍又一遍碰到一个特定的问题，那就是游戏的界面/主题。

您如何对游戏的外观和界面做出非任意，一致的决定？

例如，在我基于Silverlight化学的游戏的第一个版本中，我做出了一个（不好的决定）决定采用自然的，横向样式的外观，从而产生了以下UI：

然后，在以后的迭代中，我变得更聪明，并且使用了更加“机械”的，gr脚的外观，从而得到了（最终UI）：

我肯定会说，我在UI中的品味通过迭代得到了改善。但这是许多最初的任意决定然后进行大量调整的结果。

有没有更好的方法来弄清楚如何为游戏设定主题？

为了使写作平行，当您写幻想/科幻小说时，需要描述很多要素。虽然您可以随意发明物体/生物/地点/等，但是当您坐下来几分钟并设计区域，区域，行星或宇宙时，您会获得一个更加一致的世界。这样，所有东西就很好地融合在一起了，您可以问自己“ 这在宇宙中将如何工作？

编辑：似乎我没有很好地解释这一点。让我简化一个极端的问题：当我需要布置标题屏幕（带有背景，字体，带有皮肤的按钮）时，如何确定它们的外观？绿色还是蓝色？垃圾或没有？圆形还是扁平？衬线还是无衬线？

将这个问题带入整个游戏中。您如何确定事物的外观？您使用什么过程使它们一致且非任意？

再次查看屏幕截图。我本可以固守在草/天空/岩石上，但金属似乎更适合化学反应和原子的概念。

您似乎风格冲突。

看看这些来自Peggle，Ultima Underworld，Diablo 3，Starcraft 2和Gran Turismo 5的UI。

注意每个UI 在其主题内如何保持一致。

Peggle在其所有UI元素中都是针刺球。一切都是仪表，杠杆，喷嘴，跳板。

Ultima Underworld的UI元素是铁/钢，药水，背包，地图。冒险时间。

与《创世纪》（Ultima）的黑社会类似（实际上似乎是基于UW）

未来派，时尚，简单，最小（神族）

汽车内饰

因此，您会看到，您的第一个设计完全不一致且没有主题。开放领域与您的游戏有什么关系？金属背景也是如此。尝试使用实验台作为游戏板，并使用化学实验室背景，其中包括烧瓶，小瓶，橡胶手套和培养皿。

Mario博士基本上以医学，细菌，病毒，医学为主题

此外，UI应该具有与游戏元素相似的样式的图形。化学符号球为圆形，渐变为纯色。您选择的背景/游戏板的艺术风格与游戏元素完全不同。现场是生动的照片。金属非常细致，而化学球则光滑且相对不详细。

我开始意识到的一件事非常重要：正确使用对比度。

看第一张照片。到处都是对比！天空是明亮的，地平线是黑暗的，然后远处的草是明亮的，然后是底部是黑暗的。平铺的背景在极亮和极暗之间变化很大。所有这些都是非信息。视觉混乱。实际的重要部分-圆圈-被所有对比度更改淹没。

现在看第二张图片。背景较暗且相对单调。整个比赛场地周围都有明亮的边界。平铺的背景大部分是深色的，在重要位置有细白线。突然间，您实际上可以看到拼图，因为它是周围最鲜明的事物之一。

就个人而言，我仍然会对其进行一些调整-我也会使运动场看起来也越来越脏。那些用来显示网格划分的白线很重要，但是人的大脑确实擅长于推断直线特征，而这些黑线可能会更暗甚至分解一些。

令我烦恼的是底部的栏。它明亮，在你的脸上，很难看懂文字。最后一点很重要-之所以难以阅读文字，又是因为对比。我们通过寻找字母的边缘来部分阅读文本，但不幸的是，字母与底部条形的一部分融合得很好。

我会做的：就对比度而言，调整底部的条形使其与主要背景完全吻合。在它和主要背景之间划一个较浅的边界，以克服它是分开的事实。然后删除大部分文本。“钻石”可以成为真正的钻石。“剩下的原子”可以变成几个原子的图示。“剩余时间”可以变成沙漏，手表或怀表。“下一个”可以完全消失-您说“您必须通玩才能看到获得的原子”，但这是一个令人讨厌的游戏机制。将其变成右侧的原子堆，坐在一个破碎的传送带上，并带有一条视觉机械的线索，这是该行中的下一个线索。多田！拼图得到改善，界面得到了改善，一切看起来都变得整洁了。

如果确实需要使用文本，则有两种方法可以保证对比度。首先，将您的文字放在本身对比度较低的东西上。如果背景较暗，请使用浅色文字。如果背景较浅，请使用深色文字。如果您做不到（有时做不到），请毫不犹豫地使用外部发光效果。无论您使用什么文字，这都是提供正确边框对比度的好方法。

在使用界面时，请打开图像编辑器，将其交换为单色，然后尝试两件事：模糊和边缘检测。当您的用户界面单色模糊时，您的视线应自动转移到重要区域。在进行边缘检测时，应突出显示重要区域。例子：

比较这两个。第一个几乎是不可读的-当然，有些宝石是可见的，但其中许多不是。在第二个网格上，网格立即突出，对话框也是如此。虽然板上只有一颗宝石，但您可以立即看到它的位置。

第一个重点强调网格边缘。有些宝石几乎是看不见的。第二个重点仍然突出（而且比我个人更多），但也非常强调难题的边界，并且宝石可见得多（尽管仍然不够完美）。

无论如何，此方法都不是万能药，但可以帮助您跟踪应修复的问题。只需记住，人类视觉是基于边缘和对比度的，并且将用户界面设计为可被人类读取。

（我将从色彩理论的角度来解决这个问题）

我认为您的问题不是关于如何制作引人注目的GUI，而是您真正要指出的是“如何选择想要给玩家的体验？”

这主要是心理上的答案。您提到选择蓝色，绿色或红色，但这并不是真正的颜色，而是关于颜色在看到它们时让您感到的情感。

如果您的游戏是红色的（背景是红色的背景，玩家穿着红色或使用红色的游戏部件，所有字体都是可读的红色阴影），如果您玩了此游戏，您会感觉如何游戏？甚至什么游戏都不重要。

您会觉得游戏要么很生气，要么是某种情人节游戏。

这就是决策过程的起点。如果您希望您的玩家感觉自己在化学游戏中进行科学实验，也许可以使所有事情变得简单明了。也许强调白色的东西。

如果您想让玩家觉得自己在做某种制造工作，觉得自己在科学方面变得日趋衰弱，那么也许您的第二张照片，或同时强调黄色和黑色。

如果您希望玩家在化学反应中感觉像自己一样，就像是自己和所有生物的延伸，那么您的第一张照片可能是一个好的开始。强调浅蓝色和浅绿色以及棕色等自然色调。

这确实归结为您希望玩家感受到的原始情感。

简短答案：没有简短答案。

设计是一个巨大的领域，有成千上万的书籍，文章以及提及该问题的图书馆。颜色方案，字体，样式，布局，空白的使用，负数空间，纹理，颜色及其在不同文化中的含义，为什么漫画sans是邪恶的，并且永远不应该使用。有课程，书籍，博客，研究论文和网站致力于解决这类问题。对于这个问题，不会有一个简单的答案，因为这个问题提出了很多问题。

就是说：坦率地说，最好的选择是聘请设计师来帮助您。如果超出您的预算，请与设计师交朋友以提供帮助。如果那不可能，您可能必须独自走一会儿。

有几点提示。对于配色方案，请使用“ 配色方案设计器”之类的方法。花一些时间来学习颜色如何协同工作，并且通常只尝试选择几种颜色，而不要过多。限制应为大约3种颜色。

对于字体，这里有整篇研究文章和论文（这是有关serif vs sans serif的一篇）。同样，一般规则是最多选择两种字体。一个不错的选择是选择不是默认字体的字体，但看起来仍然不错。如果可以选择的话，Helvetica很不错，但是还有很多其他不错的选择。

对于样式和/或主题，这甚至很难回答。我认为这里最大的提示是要与您的风格保持一致。不要试图将自然与科幻混合，或将粗略的线条艺术与他的res 3d多边形模型融合在一起。这主要意味着要找到一位艺术家来做所有的艺术，或者自己去做（对于大公司，这就是为什么要有艺术领头人）。除非您在开始之前就已设定好主题，否则就必须使用主题。老实说，随着时间的流逝，它可能会发生变化，您还有更多的工作要做。实际上，主题会在整个开发过程中发生变化的可能性很大。

总体而言，虽然可以教授设计，但是有些人...并不是那么擅长（很像编程）。在这里，有一位设计朋友可以帮助您。

编辑：

好的，既然我对这个问题有了更好的了解，我已经将其重写了。

我感到困惑的原因是因为您试图以书面形式进行平行比较，但是您所拥有的示例根本不是并行的。UI的设计是表示的问题。一本书的内容是关于实际内容的。

因此，将UI设计视为演示文稿的问题，您必须考虑要演示的内容。我的意思是，您当然正在尝试展示您的游戏，但是还有什么呢？您想让它显得专业吗？好玩吗 暗？光？

例如，我将查看您发布的两张图片，并告诉您从中获得的印象。

第一个，我们可以看一些明显的方面。当然，它比第二张图片亮。此外，您还选择了具有深度的场的图像（因为场向远离观察者的方向倾斜），并且感觉更为广阔。感觉更自由，感觉更轻松。

当您看第二张图像时，它当然要暗得多。它还具有一个背景图像，该背景图像是垂直于观看者视线的平面图像，从而消除了第一幅图像具有的连续深度感。补充说，唯一真实的深度提示来自钻石镀层上的阴影，它使背景图像非常接近相机。所有这些加在一起使它具有更暗，更幽闭的感觉。

那么，现在您可以用这两个主题做什么？好吧，第一个主题是如果您想做的是让它感觉更随意，那可能会很好。它给人一种感觉，就像玩家现在对游戏作品所做的不是世界上正在发生的一切。第二张图片给人更多的紧迫感。游戏的“已知世界”要小得多，它更加强调玩家的行为。

这真的是关于“使其变得漂亮”吗？那是一个主观的事情，我碰巧认为第一个屏幕截图看起来比第二个屏幕截图更好。

选择主题并不是真正的火箭科学-您知道游戏的关键内容或目的，并且可以在选择其他各个方面时将其放在脑海中。

到目前为止，似乎没有人提到过一件事：请一些将要玩游戏的人提供反馈。UI设计人员花费大量时间向用户展示设计，并找出与他们的对错，无论他们是在设计游戏，文字处理程序还是驾驶舱。