美文网首页
UI设计准则在游戏设计中的运用

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

作者: 二师兄谢小生 | 来源:发表于2018-08-17 18:23 被阅读0次

    这次我拜读了一本《认知与设计:理解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 著 张一宁 译


    相关文章

      网友评论

          本文标题:UI设计准则在游戏设计中的运用

          本文链接:https://www.haomeiwen.com/subject/uoytiftx.html