UI设计准则在游戏设计中的运用


这次我拜读了一本《认知与设计:理解UI设计准则》的书。

以下文章就是以我对这本书中的知识转化成在游戏设计中的运用,包括格式塔概念和多个心理定律。

这些基础的心理学理论对任何行业的设计者都是有帮助的,感兴趣的大家都可以去看看书,希望能帮助到大家,祝学习快乐。



一、游戏的设计

* 设计者基于玩家而设计游戏

* 设计出能激起玩家目的的游戏


* 玩家为追求目的而玩游戏

* 在追求目的过程中做出的决定,必须遵循设计者设计的规则


二、设计的好坏

* 玩家进入游戏最先看到的就是UI,他们可以自然的判断出这个设计是否有美感

* 当接触之后,又会判断是否操作方便,从而体验游戏是否有趣好玩


* 这其中玩家根据什么判断设计好坏呢?

* 好的游戏体验首先满足于人本能的感知能力,随后逐渐升华到认知能力。

* 那么,感知到好的设计原理又是什么?又是怎么从感知上升到认知?


三、好的体验

视觉感知

* 外界一切事物都能被人感知,因为感知是通过我们自身的感觉器官在人脑中直接反映

* 感知是表面性的,人往往会被先入为主的观念影响视觉,这些观念影响着我们的视觉感知

* 我们过去的经验、我们现在的环境、我们未来的目标都是影响感知的因素。


1.经验影响感知

我们日常看到美景需要拍照时,都会用手机拍照记录下来,以iPhone手机的拍照来举个例子。

用多拍照的人,一般都会知道拍照键在手机右侧,我们会根据以往拍照的经验,自动的点击下图右侧的拍照按钮。

当我们把拍照按键放在左侧,而手电放在右侧,人们会不去认真看屏幕就点击,人们更多是靠以往的经验来引导对界面的感知,而不是看清屏幕上的实际内容。

所以,我们在游戏ui设计中控件的摆放要统一一致。


2.环境影响感知

前段时间刚刚经历了驾照考试,对我而言感知的考验影响了我考挂的几率。

1. 对天气的感知,感觉炎热的天气加上漫长的等待对我考验。

2. 对人的感知,听到引导员的催促、别的考生成功的喜悦或失败的沮丧对我的考验。

3. 对车的感知,看到所驾的车长度、宽度、高度、考场的黄线、车的前后轮距、位置在头脑里具体反应对我的考验。

所以,周围环境对感知的影响也同样存在于不同感官之间,我如果要考过的话,可能要提升下我的感知能力。


3.目标影响感知

感知是主动的,不是被动的。

当我们带着目标寻找一样东西时,我们会开始移动眼睛、耳朵、手去寻找与目标相关的东西。大脑能预先启动我们的感官,使得它们对要寻找的东西变得非常敏感,反之对其他东西就会变得不去注意,甚至直接忽略掉。

先从下图找到计算器图标,找到后不要再看。

再问?上图中有没有月亮图标?

所以,在游戏设计时,游戏的目标尤为的重要。


格式塔原理

首先人的视觉是整体的,所以我们视觉感知到的整体感如果做不好,心理主观的就会感觉不舒服。所以在游戏ui设计中,ui界面的整体、有序是十分重要的。

格式塔原理就是认为对任何事物都要做一个整体来进行感知,而后才以部分的形式被认知,帮助我们理解视觉感知对心理的影响。

接下来阐述下格式塔的几大原理以及它在游戏设计中的运用。


1. 接近

靠近的事物,我们看成是一个整体。

下图上面的3个方形靠得更近我们会把它们看成一组,下面的2个方形看成一组。这样的组织形式不会显得那么杂乱。


2.相似和共同命运

具有共同特性的事物,我们看成是一个整体。

下图中间部分的关卡图都是彼此散落隔开的,但是我们通过颜色、形状、大小、方向寻找相似,就可以把它们看成一组,这就是相似原理。

如果此时这些关卡图标中有几个特效闪烁,虽然它们是隔开的,但是我们会把它们看成是一组,这就是共同命运原理。


3.连续

连续的形式组成一个整体。

当我们看到下图时,图片上虽然有缝隙,但是我们会习惯性的将它连续起来,这就是连续原理。


4.封闭

我们的感知自觉的的将敞开的图形封闭起来,与连续性相关。

下图叠着的图片,我们不会把被遮住的感知成分散的碎片,反而会脑部被遮住的部分,从而把这看成一个整体。


5.对称

为了简化多个事物,让它们对称并趋于整体。

下图界面是对称的,所以我们会感觉是一个整体。

下图界面不是对称的,我们会觉得右侧是不是还有东西。


6.主题/背景

焦点内容可区分主题和背景,让我们感知到是一个整体。

下图我们将有人物头像和叠着的对话框作为主题,正屏的图片作为背景,自然而然的分出主体与背景。它们之间的差别感知正是暗示这个作品所要表达的情绪。


7.不变

之前的记忆帮助感知事物的整体。

当我们熟知并习惯性的选择下图1号位的许墨,就不会再在意1号位的变化。

那么现在再从下图选择许墨,我们依然会选择熟悉的位置1号位,但是此时1号位置变成了白起。这就是根据我们之前的记忆来帮助感知事物整体。

以上各个原理都是设计ui时的核心基础,但也不是固定原理,也许在实际运用中,还会发现更多更好的原理。


心理认知

* 认知是人的最基本的心理过程,包括感觉、知觉、记忆、思维、想象和语言等。(百度百科)

* 在游戏中,认知是对游戏认识的过程,不像感知直接从头脑反映出来,而是要经过头脑的加工,转化成心理活动来支配人的行为,即心理认知。

* 在我们看到一款游戏的界面时,还只是视觉感知,但认知让我们了解这款游戏的背景故事,操作这款游戏,甚至还能完美通关。即心理认知比视觉感知要具体深入。

下面这些定律反应了人的心理活动,同样可以把它们运用在游戏中,让玩家可以分清楚游戏规则,从而不放弃游戏。


1.二八定律

* 二八定律就是20:80法则,是一个经济学家发现的,所以用在社会经济、企业管理居多。

* 这个定律听起来是不是有不平衡的感觉,其实这个定律不是一定局限于20:80,只是代表少数与多数的立场,在游戏设计中也是很常见的。

比如,在游戏中,系统送了我下图这件时装。

* 首先我关心的是哇塞很美

* 其次我关心的是有没人和我一样有这件时装,有的人多不多

* 最后我判断出这件时装在我心中的价值

其实这就是二八定律,80%以上的人都能拿到这件时装,这件时装在你心里的价值就降低了。

那再比如,在这件时装上加个条件:充值2333可获得。

那么首先要满足这个条件的人就不算多,其次你充值后获得了只有极少数人有的时装,

最后你获得了极大的满足,而且拥有了大多数人没有的东西。


2.奥卡姆剃刀定律

* 奥卡姆剃刀有一句名言“如无必要,勿增实体。”什么意思呢?

* 就是做任何事物都要讲究简单,简单的事物无需再复杂,复杂的事物要让它变得简单。

* 为什么要将复杂变简单?因为复杂容易使人迷失,只有简单化后才利于人们理解和操作。(百科内容)

举个栗子,以下是炉石的英雄皮肤购买界面。

当看到这个界面时,最先注意的就是麦格尼角色形象,喜欢的话就购买,不喜欢就不买,简单粗暴!

如果我们在麦格尼形象上加上背景介绍,知道麦格尼的人会觉得多此一举,不知道的人会以为这个背景介绍很重要,还需要花时间去看,反而增加了玩家理解能力。

所以在游戏设计时,也可以引用《箴言书注》2卷15题说的“切勿浪费较多东西去做,用较少的东西,同样可以做好的事情。”


3.菲茨定律

* 当任意一点移动到目标中心位置所需要的时间,这之间的距离和目标大小有关系。

* 距离越近、目标越大所需的时间越短,操作也就越快捷,这就是菲茨定律。

看下图的换装功能界面,你们会更喜欢怎样的换装操作呢?

A.点击时装部件拖动到角色身上

B.还是点击时装部件直接换装成功

这里的任意一点就是时装部件,目标中心就是角色本身。

A操作有个拖动效果,增加了距离,而B操作直接取消拖动,等于距离为0。如果将目标人物缩小,就会增加a操作效果的难度,相比较更方便。

肯定有人说我拖动也很方便啊,其实这只是对比,并没有绝对,这只是单单根据这个定律来说明。


4.席克希定律

* 随着选项数量的增加,投入的时间也会呈对数增加。简单来讲,越少越快。(百度的概念)

* 其实席克定律特别适合操作系统的游戏设计。

比如下图右侧的技能按钮选择就有8个,选择就很困难,如果此时点击后再无反映或产生错误,玩家的心里就会产生恐慌。


所以选项的数量要少,像下图右侧那要,控制数量为4个,就可以加快玩家决定选择的速度。


5.雅各布.博尔定律

* 雅各布.博尔定律就是讲一个叫雅各布的人打碎了花瓶后,意外发现其中的规律,面积不同的碎片之间,重量比始终徘徊在16∶1左右,也叫碎花瓶理论。

* 这个理论正不正确好像一直还有争议,但这其中的一些原理在我看来对游戏也有一些作用。

a. 在杂乱无章的事情中也会存在规律

b. 要进行实验去寻找规律,规律反倒在实验中产生价值

c. 在游戏中的随机事件、抽奖等等,都有涉及到这些

现在的游戏都会有一个抽卡的功能,简称十连抽,什么意思呢?

就是你每抽一次,在第十抽的时候会抽出好东西。

但是,如果上图中不显示第十抽的时候会获得的东西,就要一次次去实验才能发现其中的规律。

在游戏设计时,其实我们可以借鉴已有的、成熟的、经过市场验证的规律直接套用。


6.米勒定律(7+-2法则)

* 人在短时记忆的广度大概是7±2个阿拉伯数字、字母、单词或其他单位。

* 也就是说给你一串数字或是别的,让你短时间默记出来,大概就是在5至9个字之间,这就是神奇的7±2法则。

在设计界面图标时,下图蓝框最多也只放9个图标,再多玩家就会记不住了。

那么还要在放功能图标要怎么办?只能进行分类展开,这是最常见的设计,也是意义上的深度记忆。

但是一层一层记忆多了的话,玩家也会记不住,反应时间就会过长,这跟席克定律又有关系。此时就需要进行分段、分点显示记忆。


7.帕金森定律(拖延症)

* 帕金森就是拖延症的一种,与时间、效率有关。

* 当一个人预计今天要锻炼4小时,他看健身视频看了2小时、上某宝买健身器材2小时,一想那等到健身器材到了再开始锻炼,就拖到了明天甚至后天。

在游戏中,玩家的拖延症也是会犯的。

今日预计完成强化100次,但只强化到50次的时候就没有动力了,想想把目标改成50次也无伤大雅。

这时候游戏的成就领取奖励系统就尤为重要,给玩家一个短期目标,或者说是今日必达目标,强化到100次就可领取大奖,还有在线几分钟领取奖励的功能。


8. 系列位置效应

* 这个定律跟7±2法则有关系,是有关记忆的顺序和效果的。

* 人的记忆分三种

感觉记忆:较短,一般按毫秒、秒计算

短时记忆:按秒、分计算

尝试记忆:按天、年计算

* 系列位置效应是指在记东西时,记这个东西的前端部分和结尾部分比记中间部分记得好,这个概念叫首因效应和近因效应。游戏设计中就可以抓住这个记忆点来设计。

在下图排行榜界面中,人们很容易的就记住排在第一个的自己的排名。

在下图任务界面中,人们也很容易会记忆最底下的进度条上的礼包。

所以我们在游戏设计中,常常把重要的都放在第一位或者最后一位。


9.蔡加尼克效应

* 蔡加尼克效应是一种记忆效应,简单说就是只对还未达成的事记忆深刻,对已经完成的事再回忆就不那么记得了。

* 实际上蔡加尼克效应也算是强迫症,当你面对未完成的事情时,会急于把它完成,强迫自己,一日不完成,终身不得解脱。这与目标论又有关系。

游戏中的关卡通关目标就是一个例子,有些玩家面对关卡就想一通到底,不完成就想到方法完成,有一种有始有终的驱动力,这是我们设计者需要去研究的。




最后

举例所运用到的游戏:恋与制作人、英雄无敌、炉石传说、芈月传、熹妃Q传等等,其实这些图片都是自己边玩游戏边截的,大家都能拿得到的。

参考文献:《认知与设计:理解UI设计准则》——Jeff Johnson 著 张一宁 译


©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,616评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,020评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,078评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,040评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,154评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,265评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,298评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,072评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,491评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,795评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,970评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,654评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,272评论 3 318
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,985评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,815评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,852评论 2 351

推荐阅读更多精彩内容