Design is a very ancient practice, but graphic design really found its core principles post World War One. Games are also very ancient but video games are still finding their feet. I think graphic design has a few things to teach people who make games, so here are the big concepts every graphic designer learns. You should learn them too!

设计是一种非常古老的做法，但是图形设计确实在第一次世界大战后发现了其核心原则。 游戏也很古老，但是视频游戏仍然可以站稳脚跟。 我认为图形设计可以教给制作游戏的人一些知识，因此这是每个图形设计师都学到的重要概念。 您也应该学习它们！

First, studying graphic design is about building the skill to see things other people just accept. More importantly, it’s learning to see and name things ordinary people just are annoyed or repulsed by but can’t say why. You can’t just read about it, you have to look at many examples and practice making them. Over time your eye and hand become smarter.

首先，学习图形设计是要建立一种技巧，以了解他人刚刚接受的事物。 更重要的是，它正在学习看到和命名普通人只是被烦恼或排斥而无法说出原因的事物。 您不仅可以阅读它，还必须查看许多示例并进行实践。 随着时间的流逝，您的眼睛和手变得更聪明。

Good graphic design makes games more trusted (increase sales) and more pleasurable to play (NPS) and when done right, fades into the background so players can focus on the game (higher DAU/MAU.)

良好的图形设计使游戏更受信任(增加销量)和游戏乐趣( NPS )，如果操作正确，它会淡出背景，以便玩家专注于游戏(更高的DAU / MAU) 。

This essay has instruction and exercises. We’ll be working with this game, Cheese or Font. It could use the help. Before you read on, please do two small exercises.

本文有指导和练习。 我们将使用Cheese或Font这个游戏。 它可以使用帮助。 在继续阅读之前，请做两个小练习。

1. Identify all the elements of Cheese or Font. Label them as core, supportive or extraneous. Core is the parts you need for gameplay, supportive is things like hints and instructions, and extraneous are things you could remove.
   识别“奶酪”或“字体”的所有元素。 将它们标记为核心，支持或无关。 核心是游戏玩法所需的部分，支持性的是提示和指示之类的东西，无关紧要的是可以删除的部分。
2. Do a quick, small sketch of the game on a small piece of paper. Only use core elements. Small matters, because it constrains your ability to get fiddly. Standard 3x3 or 3x4 is good. If you must draw on an ipad, don’t zoom. Suck it up and stay small.
   在一张小纸上快速绘制游戏小图。 仅使用核心元素。 无关紧要，因为它限制了您变态的能力。 标准的3x3或3x4是好的。 如果必须在iPad上绘图，请不要缩放。 吸起来并保持小巧。

In this video, I am only focusing on the most core to the game (it was made quickly so I hyper-simplified. You can use more core elements.)

在此视频中，我仅关注游戏的最核心部分(它制作速度很快，因此我将其简化了。您可以使用更多的核心元素。)

In design, this is called a thumbnail sketch (they can be even smaller!) It’s a way to quickly explore different layouts.

在设计中，这称为缩略图(它们甚至可以更小！)，这是一种快速浏览不同布局的方法。

Come up with at least six more ways to arrange the most important elements. Read though the below to get ideas of more ways to redesign Cheese or Font. I’ve already used at least one technique in my short example!

提出至少六种方法来布置最重要的元素。 请仔细阅读以下内容，以获得重新设计Cheese或Font的更多方法的想法。 在我的简短示例中，我已经使用了至少一种技术！

从视觉层次开始 (Start with Visual Hierarchy)

The Law of the Conservation of Complexity (sometimes called Tesler’s law) states that “for any system there is a certain amount of complexity which cannot be reduced” only moved to the user or the designer. It is the designer's job to make the complex clear for users and players.

复杂性守恒定律(有时称为特斯勒定律)规定，“ 对于任何系统，都存在一定程度的复杂性，无法降低”，只能移交给用户或设计者。 设计人员的工作是使用户和播放器都清晰可见。

The designer must communicate what is most important in a design so that a player doesn’t have to think about anything but playing well. Visual hierarchy is a way to do that. Untrained designers tend to make things just look bigger, and graphic designers learn there are many ways to do this.

设计者必须传达设计中最重要的内容，以便玩家除了玩得好之外无需考虑其他任何事情。 视觉层次结构是做到这一点的一种方法。 未经训练的设计师往往会使事情看起来更大，而平面设计师则知道有很多方法可以做到这一点。

尺寸 (Size)

But let’s look at size. Don’t just make things bigger, make some things smaller also. When one elements changes, everything else should be reconsidered.

但是，让我们看一下尺寸。 不仅要使事情变大，还要使一些事情变小。 当一个要素发生变化时，应重新考虑其他所有要素。

How would the above look if the diver was huge and the whale tiny? Would it tell a different story?

如果潜水员很大而鲸鱼很小，上面看起来如何？ 它会讲一个不同的故事吗？

EXERCISE: Make one element in a NEW thumbnail sketch HUGE. What else do you want to change? What can get smaller?

锻炼：在新的缩略图中添加一个元素。 您还想更改什么？ 什么可以变小？

Color and Contrast

颜色和对比度

You may have noticed in the above image that the happy little guy is now a lighter blue. Did you also notice that by changing the background color to a dark blue and making the sad men a darker shade they fade into the background? This an example of what I mean when I say, if you change one thing, you have ot reconsider everything. It’s not enough to just change the happy blue man, though that does work (look at the photo below!)

您可能已经在上图中注意到，快乐的小家伙现在变成了浅蓝色。 您是否还注意到，通过将背景色更改为深蓝色，并使可悲的男人变暗，它们会淡入背景中？ 这是我说的意思的一个示例，如果您更改一件事情，则必须重新考虑所有内容。 仅仅改变快乐的蓝色男人是不够的，尽管确实可以(请看下面的照片！)

Designs get better when you combine the elements in this essay.

当您结合本文中的元素时，设计会变得更好。

Below we see it in practice in Monument Valley, widely thought to be a truly beautifully designed game. Our protagonist almost disappears into the gray-scale, but the blue pops in a black and white world, despite being a light blue. As well the flat white of the word balloon, along with it having the only horizontal lines helps draw the eye to dialog.

下面我们在纪念碑谷的实践中看到它，人们普遍认为它是一款真正设计精美的游戏。 我们的主角几乎消失了，变成了灰色，但尽管是浅蓝色，蓝色却在黑白世界中流行。 单词气球的纯白色以及仅有的水平线也有助于吸引眼球。

EXERCISE: Try taking ONE color and using it in your thumbnail sketch along with black. You can also use gray and white, if you have the tools.

锻炼：尝试采用一种颜色，并在黑色的缩略图中使用它。 如果您有工具，也可以使用灰色和白色。

版式 (Typography)

Speaking of blending techniques, type is never just type. There is the font choice, but also the weight, size and alignment that shapes a successful design.

说到混合技术，类型永远不会只是类型。 可以选择字体，但可以决定成功设计的粗细，大小和对齐方式。

So what do you need to know about fonts?

那么，您需要了解什么字体？

Display Fonts: usually elaborate and often hard to read, they are best reserved for headlines or logos. Learn more Typography series: What is a Display font? Do NOT use them for body text or interface text; they will be miserable to read.

显示字体：通常精巧且通常难以阅读，最适合用作标题或徽标。 了解更多印刷系列： 什么是显示字体？ 不要将它们用于正文或界面文本； 他们将很难读。

Pairing fonts: One trick I lean on is pairing a serif and a sans-serf. You are actually experiencing now; Medium.com uses serif for the body text and sans-serif for the headers. Serif has those little decorative elements you see below.

字体配对：我依靠的一个技巧是将衬线和无衬线配对。 您实际上正在体验； Medium.com的正文文本使用衬线，标题使用sans-serif。 衬线有一些小的装饰元素，您会在下面看到。

Be careful in pairing fonts! They can clash like a plaid suit with a flower pattern shirt (also, please don’t wear a plaid suit.) Good rules of thumb

配对字体时要小心！ 他们会像花花衬衫的格子西服一样发生冲突(也请不要穿格子西服。)好的经验法则

• Chose two fonts in the same font-family.
  选择同一字体家族中的两种字体。
• Pick a serif and a sans-serif
  选择衬线和无衬线
• Big personality for headlines, subtle for body text (or interface)
  大标题的个性，细微的正文(或界面)

Always consider size when picking fonts. If it’s going to be tiny type in a HUD, make sure the font has been designed for readability at small sizes (like Verdana.)

选择字体时，请始终考虑大小。 如果它将是HUD中的小字体，请确保已将字体设计为在小尺寸下可读(例如Verdana)。

One game that is spectacular in its font use is Device 6. Fonts can convey mood and set you in a place and time, as fonts change with fashion.

Device 6是一款字体使用非常出色的游戏。随着字体随着时尚的变化，字体可以传达心情并将您置于某个地点和时间。

To learn how to pair fonts, play this game. It’s so fun! (at least for me.)

要学习如何配对字体，请玩此游戏 。 真好玩！ (至少对于我来说。)

Please watch We Use Way Too Many Fonts. There is a comfortable power that you can enjoy (as well as working faster) once you find font pairings that make sense to you. Then you can spend your time on creative type uses.

请观看“ 我们使用太多字体” 。 一旦找到对您有意义的字体配对，便可以享受舒适的力量(以及更快地工作)。 然后，您可以将时间花在广告素材类型的使用上。

EXERCISE: Make 3–4 thumbnail drawings that use type. Make it less about choosing a font and more about size, positioning and contrast. Typefaces will be important when you move to digital styletiles.

锻炼：制作使用类型的3–4个缩略图。 减少选择字体的时间，而增加字体的大小，位置和对比度。 当您使用数字样式时，字体将非常重要。

对齐和接近 (Alignment and Proximity)

Take a little time to look at this image.

花一点时间看这张图片。

You notice the ingredients are now aligned. But the type below the pan is also. Alignment not only organizes the page, it also leads the eye.

您会注意到成分已对齐。 但是平底锅下面的类型也是。 对齐不仅可以组织页面，还可以吸引眼球。

Most design work uses grids to align elements effectively. Designing with grids is a huge topic, so I’ll just make a nod to them here, and say that they are a thing. An important thing.

大多数设计工作都使用网格来有效地对齐元素。 使用网格进行设计是一个巨大的话题，因此我在这里向它们致意，并说它们是一回事。 重要的事情。

Grid tl;drUse grids. Turn on the grid in your designing software and/or use grid paper to sketch on. You can also make your own grids with a pencil and a ruler (or side of a book). Align objects up to the edge, when you turn off the grid it will look <kissing fingers gesture.> You can do a lot with a grid.

网格tl; dr使用网格。 在设计软件中打开网格和/或使用网格纸进行素描。 您还可以使用铅笔和尺子(或书的一面)制作自己的网格。 将对象向上对齐到边缘，当您关闭网格时，它将看起来像<手指触摸手势。>您可以对网格做很多事情。

Ok, so what about proximity? Gestalt principles(from gestalt psychology) state we assume things are part of a group when the are close to each other, and different when they are separated by space.

好吧，邻近度又如何呢？ 格式塔原理(根据格式塔心理学)认为，当事物彼此靠近时，它们就假定它们是一个组的一部分，而当它们被空间分隔开时，它们就不同。

Looking at the image below, we assume the group on the left is one group, and the group on the right is actually made up of 3 groups. Now look at them for a bit longer. The bigger spacing between the left and the right makes one think one is seeing two examples… proximity and distance is a powerful way to message what goes together.

看下图，我们假设左侧的组是一个组，而右侧的组实际上由3个组组成。 现在再看一会儿。 左右之间的较大间距使人们认为正在看到两个示例……接近度和距离是一种传达信息的有效方式。

Even when the objects are very different, (see below) we assume they belong together because of the visual grouping.

即使对象非常不同(请参阅下文)，我们也可以根据视觉分组将它们归为一类。

One of the single biggest mistakes young designers do is put buttons too far apart from the object they are effecting.

年轻设计师犯下的最大的错误之一就是将按钮与他们要影响的对象相距太远。

EXERCISE: explore proximity in your design. What should be grouped? What is different, and thus should be separated from gameplay?

锻炼：探索设计中的接近度。 应该分组什么？ 有什么不同，因此应与游戏玩法分开？

最后 (Finally)

I have come over the years to believe one of the most important rules is

多年来，我相信最重要的规则之一是

“Same things should look exactly the same, different things should look very different.” Christina Wodtke

“相同的事物看起来应该完全相同，不同的事物应该看起来非常不同。” 克里斯蒂娜·沃特克(Christina Wodtke)

Amazon is not gorgeous, but they do know how to use visual design principles to communicate effectively.

亚马逊并不出色，但他们确实知道如何使用视觉设计原理进行有效沟通。

When you’ve finished your thumbnails, go look at the Kerning game and see the choices they made. It’s deliciously designed!

缩略图制作完成后，请查看字距调整游戏，并查看其做出的选择。 设计精美！

学到更多 (Learn More)

GDC talk on negative space, a gestalt theory graphic design principle

GDC谈论负空间，格式塔理论图形设计原理

More way to differentiate from the delightful Stephen P. Anderson

区别于令人愉悦的斯蒂芬·安德森的更多方法

And from Designmantic

而来自Designmantic

(these are like Pirate rules; they are really more a suggestion)

(这些就像海盗规则；它们实际上更多是一个建议)