[平面UI] 根据心理学原理去设计真正优秀的UI

查看:1662 |回复:21 | 2013-11-19 14:41:05

您需要 登录 才可以下载或查看,没有账号?注册

x

作者:Brice Morrison

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

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

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

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

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

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

类比概念

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

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

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

bar%EF%BC%88from-gamedev%EF%BC%89.jpg

bar(from gamedev)


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

Might-No.9%EF%BC%88from-gamedev%EF%BC%89.jpg

Might No.9(from gamedev)


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

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

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

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

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

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

保持一致性

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

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

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

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

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

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

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

grand theft auto V(from gamedev)


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

nimble quest(from gamedev)


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

运用:

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

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

数字广度和组块化

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

4930661

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

你做完了吗?如果是,那么再背以下数字:

5982385741

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

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

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

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

例如,试一下记住以下数字:

199020012013

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

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

dark souls(from gamedev)


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

1、命值条

2、精力条

3、等级

4、上道具

5、下道具

6、右边装备

7、左边装备

8、金钱

9、对话框

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

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

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

terraria(from gamedev)


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

1、命值条

2、魔法值

3、道具栏(组合在一起)

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

运用:

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

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

总结

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

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

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

(本文为游戏邦/gamerboom.com编译,拒绝任何不保留版权的转载,如需转载请联系:游戏邦)


2013-11-19 14:41:05  
 赞 赞 4

使用道具 登录

21个回答,把该问题分享到群,邀请大神一起回答。
2#
给力!元素有你更精彩
回复 收起回复
2014-5-15 07:52:15   回复
 赞 赞 4

使用道具 登录

3#
给我很大启发的说
回复 收起回复
2014-5-19 04:33:59   回复
 赞 赞 4

使用道具 登录

4#
看了楼主的帖子,我只想说一句很好很强大!
回复 收起回复
2014-5-22 11:14:20   回复
 赞 赞 4

使用道具 登录

5#
给我很大启发的说
回复 收起回复
2014-6-27 12:43:05   回复
 赞 赞 4

使用道具 登录

6#
太给力了   很受启发~谢谢楼主分享~
回复 收起回复
2014-7-2 15:32:14   回复
 赞 赞 4

使用道具 登录

7#
很有用
回复 收起回复
2015-11-7 13:16:09   回复
 赞 赞 4

使用道具 登录

8#
谢谢!很好很强大!
回复 收起回复
2016-1-15 10:31:13   回复
 赞 赞 4

使用道具 登录

9#
这世上没有什么是元素币搞不定的,如果有,那就用更多!
回复 收起回复
2016-8-25 21:31:13   回复
 赞 赞 5

使用道具 登录

10#
不错不错
回复 收起回复
2018-3-22 10:50:37   回复
 赞 赞 5

使用道具 登录

11#
新人学习中,各位大神多多指教!
回复 收起回复
2018-5-27 23:31:49   回复
 赞 赞 5

使用道具 登录

12#
膜拜大佬
回复 收起回复
2018-6-9 12:53:32   回复
 赞 赞 5

使用道具 登录

13#
要想成大触  天天上元素
回复 收起回复
2018-10-17 09:29:52   回复
 赞 赞 5

使用道具 登录

14#
过来学习学习谢谢分享
回复 收起回复
2018-10-19 09:02:15   回复
 赞 赞 5

使用道具 登录

15#
感谢楼主分享!!!
回复 收起回复
2018-10-20 00:17:04   回复
 赞 赞 5

使用道具 登录

16#
要想成大触  天天上元素
回复 收起回复
2018-11-22 09:24:00   回复
 赞 赞 5

使用道具 登录

17#
回复 收起回复
2023-5-6 09:15:02   回复
 赞 赞 5

使用道具 登录

18#
要想成大触  天天上元素
回复 收起回复
2023-5-18 02:17:16   回复
 赞 赞 2

使用道具 登录

19#
要想成大触  天天上元素
回复 收起回复
2023-5-18 02:17:23   回复
 赞 赞 3

使用道具 登录

CG 游戏行业专业问题

用户体验交互UEUI平面设计界面
12下一页
您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表