作者：Brice Morrison

有些心理学原理已经被证明适用于UI设计。

无论你有一支专家团队负责UI设计还是让几名程序员制作UI，你都可以利用这些原理制作出更容易理解和使用的游戏UI。

当你把UI放进游戏中时，无论这些UI是HUD还是关卡选择菜单、内置地图或命值条，你都希望它们是管用的。完美的UI设计是看不见的，因为用户并不能真正看到UI是如何运作的—-UI消失，玩家专注于他们在游戏中想做的事。

我喜欢把设计UI类比为开车。当你第一次学习开车时，必须有人教你方向盘的用法、加速器和刹车如何工作、如何换档。但一旦你学会开车，这些东西就消失了。“把方向盘向右转”变成“我想把车开到那里”。

优秀的UI试图让玩家尽快进入“UI消失”的第二个阶段。让玩家立即进入这个阶段，这样玩家才能真正进入你的游戏。

为此，你可以利用有许多心理学原理—-类比概念、保持一致性和组块化想法，来指导UI设计。

类比概念

当你在布置游戏UI时，你布局的其实是一系列概念。

向别人解释一个概念时，最快的办法就是在把新概念类比成对方已经懂得的东西。也就是，用旧知识支持新概念，从而使新概念更容易被理解。

游戏普遍使用命值条，这是利用了人们熟悉的进度条或气体压力表的概念。如果命值条是满的，就说明你还可以玩很久；否则，你就危险了。

在Kenji Inafune最近的kickstarter项目《Mighty No. 9》中，你可以看到这个类比：

如果能把对象类比为现实生活中的东西，那就最好了。

注意，不同玩家的知识水平不同。如果你的游戏是针对休闲玩家或所谓的“非玩家”的，那么你可能最好利用现实生活中的概念作为类比对象。如果你的游戏的受众就是玩家或熟悉许多游戏概念的人，那么从其他游戏中借用概念就能足以让他们理解某些元素是如何运作的了。

其他实用的概念包括灯的开关、转盘（如烤箱上的）、按钮、电梯按键、逃生按钮或钟表/闹钟。游戏中的概念越接近现实生活中的物品，越好。

运用：当开发你的UI时，问自己以下两个问题：

1、是否有UI概念或类比对玩家来说是完全不熟悉的？

2、用旧概念支撑的新概念是否更容易被理解？

保持一致性

当你向玩家介绍一个UI概念时，你要确保这个UI与整个游戏保持一致。

根据上述类比概念，一致性有助于玩家理解新元素。游戏中最糟糕的体验之一就是，你在这里教玩家某物如何运作，而之后到游戏的另一个地方，某物却不是按照你所教的方式运作。

最近的一款成功的独立游戏《Papers, Please》在保持一致性上为其它游戏树立了榜样。这款游戏要求玩家审核一系列物品以决定谁可以通过移民检察。这些物品包括签证、照片等等。
              玩家使用鼠标在桌面上拖动物品，这模拟了现实生活中拿印刷纸品的方式。然而，这款游戏中的角色之间有大量对话。这些对话的布局很有特色，是使用悬浮在屏幕上方的对话框，可以上下移动以选择菜单（游戏邦注：想一下《最终幻想》或《质量效应》中的对话菜单）。

但这种互动风格与玩家与游戏的其他部分的互动作用并不一致。

所以为了保持UI的一致性，《Papers, Please》还使对话框作为放在桌上的物品—打印出来的文字记录。这并不需要玩家拉出新菜单或学习新的交互方式—-与其他所有对象一样。这有助于保持游戏的一致性，使玩家得以立即理解如何与游戏互动。

颜色也可以促进一致性。不同的颜色带有不同的文化意义，所以在游戏中应该保持颜色一致性，使之更直观。

在欧美文化中，红色往往表示禁止（交通灯）、警告或其他危险的信号。比如，在《侠盗猎车手 5》中，当玩家受伤时，地图UI会出现一层红色的阴影。

又比如，在《Nimble Quest》中，与敌人有关的UI，红色骷髅表示还剩下多少“坏家伙”，这同样与红色有关：

颜色可以使玩家迅速地了解游戏世界的情况。

运用：

1、当设计你的UI元素时，务必使元素之间保持一致性。互动方式不要从一种换成另一种，特别是当它在游戏中始终是不同时。

2、确保颜色向玩家微妙地指出游戏元素之间的相似性。

数字广度和组块化

我们来做一个练习。记住以下数字，然后闭上眼睛，在头脑中默背出这些数字：

4930661

请不要跳过这个练习。它有助于解释下面的内容。

你做完了吗？如果是，那么再背以下数字：

5982385741

完成了吗？根据研究，第一组数字更简单，但第二组更难。为什么？

研究表明，人们一次可以记住7个不同的数字。这就叫作“数字广度”，这就是为什么电话号码是7个数字组成的（不带国家或区号）。

这个概念也可以在更抽象的概念上使用。如果玩家同时面对7个想法，这就已经达到大部分玩家能够同时处理的极限。超过7个想法以外的东西都会变得混乱和迷惑。

然而，想法可以放在一起形成更高级的想法。这就是与记忆相关的心理学文献中经常出现的“组块”概念。

例如，试一下记住以下数字：

199020012013

如果你把上述数字分成年份来记，就容易多了：1990，2001，2013。很简单，对吧？

我们来看看《黑暗之魂》中的数字广度的例子：

游戏的HUD上共有9个UI元素：

1、命值条

2、精力条

3、等级

4、上道具

5、下道具

6、右边装备

7、左边装备

8、金钱

9、对话框

然而，其中四个，即武器和道具是被放在一起的，这样玩家就可以把它们想象成一个映射为方向键的概念。

这样元素总数就缩减为6个了：把上/下/左/右组合成一个对象：“道具”。通过使用这种组块，以及根据这4个元素与控制器的互动方式和屏幕显示来映射它们，让玩家觉得《黑暗之魂》的UI非常简单。

我们再看看《Terraria》中的例子：

使用组块，这里的UI只包含3个主要元素：

1、命值条

2、魔法值

3、道具栏（组合在一起）

这种视觉设计使游戏容易上手和理解。

运用：

1、玩家一次必须注意多少种不同的UI元素？如果超过7个，那么就减少到7个以内或把类似的元素组合成一个。

2、确保组块化的UI元素具有相似的互动方式。

总结

当你为游戏设计UI时，请类比一下你的受众已经理解的知识和概念（即使你做的是全新的东西，你仍然要从常识中提取部分）。为了让玩家轻松地理解你的UI，请保持互动方式和颜色的一致性。限制一次显示的想法或概念的数量，不要超过7个，否则就会让玩家觉得混乱。

以上原则当然存在例外，但遵守它们会帮助你的玩家更快地理解你的游戏UI。

在一些科学的心理学原理的指导下，优秀的UI可以帮助玩家轻松地使用菜单和进入你所创造的游戏世界。

（本文为游戏邦/gamerboom.com编译，拒绝任何不保留版权的转载，如需转载请联系：游戏邦）

Using Psychological Principles for Great User Interfaces

By Brice Morrison

There are proven psychological principles to user interfaces that work.

Whether you have a team of design experts or are just building with programmer art, you can use these principles to make your game easy to understand and a joy to pick up.

When you’re putting together the user interface design for your game, whether it’s a heads-up display (HUD), a level select menu, an in-game map, or a life meter, you want it to all work. Perfect UI design is invisible, that is, the user isn’t really grappling with how the UI works – the UI disappears and the player focuses on what they want to do in the game.

My favorite analogy to this is driving a car. When you’re first learning how to drive, you need to be taught what the steering wheel does, how the accelerator and brakes work, and the gear shifts. But once you learn these things, then they all disappear. “Turn the steering wheel right” turns into “I want to make the car go over there”.

A good UI tries to get the player to this second stage as quickly as possible. Over at my site The Game Prodigy, we try to stress getting to this point immediately so that players can really get into your game.

To do this there are a handful of psychological principles you can use – scaffolding concepts, functional and color consistency, and the rule of 7.

Let’s get started!

Scaffolding Concepts

When you’re laying out your game’s UI, what you are really laying out is a map of concepts.

The quickest way to explain a concept to someone is by making an analogy between the new concept and something they already understand. In teaching and education this is called “scaffolding” – by propping up new ideas with old ones, the new ideas are easier to comprehend.

Life bars are used almost universally in games, and they build on the common concept that people understand from progress bars or gas gauges. If the bars are full then you have much more to go. If the bars are low then you’re almost out.

You can see how this analogy is used in Kenji Inafune’s recent kickstarter project, Mighty No. 9:

The best is when you can scaffold with an object commonly understood in real life.

One note is that all players are different in terms of their knowledge. If your game is for casual players or typical “non-gamers” then you may have to try and pull concepts from real life to use as your analogies. If your players are gamers and familiar with many game conventions, then it will be easier to borrow from other games and expect them to know how certain elements already work.

Some other concepts that are useful to use are light switches, dials (like on a stove), on/off switches, elevator buttons, escape buttons, or clocks/alarms. The more common the real world object, the better.

Application: When developing your UI, ask yourself these questions:
Are there any UI concepts or analogies here that will be totally unfamiliar to players?
Can these new concepts be scaffolded with old concepts to make them easier to understand?

Strive for Consistency in Actions and Colors

When you introduce a UI concept to players, then you want to make sure you are as consistent as possible across the game.

In accordance with the scaffolding concept we just discussed, consistency helps players understand what’s familiar. The worst experience is teaching the player how something works, and then in another area of the game, it doesn’t work as you’ve taught them.

A great example of this done well is in the recent indie hit Papers, Please. The game asks the player to deal with a variety of items in deciding who they should let through the immigration border control. These include passports, permits, photographs, and more.

Each of these is interacted with using the mouse to drag items around on your desk, since that’s a sensible way to handle papers. However, the game also has lots of dialogue between the characters. Dialogue is typically done in a floating box on top of the screen, with up and down used to select menus (think Final Fantasy or Mass Effect dialogue menus).

But that interaction style wouldn’t fit with how the player is interacting with the rest of the game.

So to keep the UI consistent, Papers, Please also makes the dialog an object on the desk via a printed transcript. This doesn’t require the player pull up some new menu or learn a new way of interacting with the world – it’s the same as all the rest of the objects. This helps the game feel consistent and the player immediately understands how to interact with it.

Colors can also be a great way to drive consistency and is one of the big concepts we teach back at The Game Prodigy. Different colors have meanings associated with them in culture, and keeping these colors consistent in a game makes it more intuitive.

Red in Western culture typically means stop (from traffic lights), warning, or bad. You can see this in the typical “Damage Taken” red shade that appears on map UI in Grand Theft Auto V…

..and also associated with UI around enemies in Nimble Quest. The red skulls represent how many “bad guys” are remaining, which again is associated using red:

These colors make it possible make quick sense of what’s going on in the game world.

Application:

When designing your UI elements, try to have consistency between them. Don’t switch from one interaction type to another, especially if it’s different throughout the game

Make use of color to subtlely point out similarities between game elements to your players

Digit Span and Chunking

Let’s do an exercise. Memorize these numbers, and then close your eyes and try to recite them from memory:

4930661

If you’re just trying to skip ahead, don’t do it. Actually try to memorize them, it will help with the illustration.

Have you done it? Great! Now try these numbers:

5982385741

How did you do? According to research, the first set should have been simple, but the second much more difficult. Why?

Studies have shown that people can only hold about 7 unique numbers in their head at a time, give or take two. This is called “digit span” and is the reason that phone numbers are 7 numbers (without country or area code).

This concept can be used in a more abstract sense as well. If there are 7 ideas presenting themselves to a player at the same time, that’s reaching the limits of what most players can handle. Beyond that it becomes jumbled and confusing.

However ideas can be pulled together to form one higher level idea. This is called “chunking” and appears frequently in psychology literature around memory.

For example, try and memorize these numbers

199020012013

This is much easier to memorize if you chunk them into years: 1990, 2001, 2013. Simple, right?

Let’s look at this example of digit span and chunking in games from Dark Souls:

There are a lot of things going on here, 9 total UI elements on the HUD:

Health Bar
Stamina Bar
Level
Up Item
Down Item
Right Equipment
Left Equipment
Currency
Interaction Dialog

However, four of them, the weapons and items, are chunked together so that the player can think of them as a single concept that maps to the D-pad.

This brings the total number down to 6 total elements: combining all the Up/Down/Left/Right into one item: “Items”. By using this chunking and mapping those 4 elements together through both how they interact on the controller as well as how they look on the screen, the Dark Souls UI comes across to players as just simple enough.

Let’s look at another example from Terraria:

Using chunking, this UI is made up of only 3 main elements:

Life bar
Mana bar
Items bar (chunked together)

This visual design makes the game trivial to pick up and understand immediately what’s going on.

Application:
How many unique UI elements does the player have to pay attention to at once? If it’s more than 7, consider reducing them or chunking common ideas together
Make sure that chunked ideas are interacted with in a similar manner

Summary

When you’re designing the UI for your game, try and draw analogies to knowledge and concepts your audience will already understand (even if you are making something new you can still pull parts from common ideas). Keep your interaction styles and colors consistent in order to allow players to navigate through without being surprised. Limit the number of ideas or concepts you are showing at once to no more than 7 to keep from becoming too jumbled.

All of these are rules and there are exceptions of course. But adhering to them will help to make your game more quickly understandable.

With some smart psychological principles, good UI can help your players get through the menus and into the game world you’ve created.

Good luck!(source:gamedev)