GameRes游资网

 找回密码
 立即注册
查看: 2152|回复: 2

[经验心得]手机游戏UI设计思路

[复制链接]
发表于 2018-3-23 17:01:30 | 显示全部楼层 |阅读模式
基本原则UI设计服务于玩法设计
我把这个原则放在制作UI的第一条,是要时刻提醒项目的每一个人——玩法设计服务于用户,而UI设计服务于玩法设计。这条原则可能在嘴上说说的时候非常振奋,但实际制作过程中,我们通常会忘记它。之所以说是“服务于”,首先必须有服务精神——即不改变“上游”的需求,同时更好的表达作为“下游”的特色,让“上游”舒服。
但很可惜,我们绝大多数游戏的UI制作中,都会违反这条原则,最常见的例子就是:原本玩法设计每个角色4个被动技能,最后发现UI“塞”不下了,3条刚好,于是要求玩法做出改变,变成3个被动技能。这样的思想是不允许的,UI服务于玩法,因此在这里玩法即是法律,不可改变。当遇到问题的时候,我们应该去做的是整理思路,重新研究重新设计,来解决问题,而不是自以为简单或者最快的去改变问题本身。
克鲁格的可用性定律
这是开始设计后应被当做信条的3个定律,克鲁格的可用性3定律是:
1.          别让我想(Don'tmake me think):这是任何一个软件中,好的UI设计的基准。一个界面应该是让用户非常容易理解的,者往往建立于一些约定俗成之上。“除非有更好的选择,否则就遵从标准。”——交互设计之父AlanCooper。
作为一个手机游戏的UI,我们可以偶尔使用市面上流行的UI设计方式(但他不应该仅仅是某一款成功游戏的,而应该出现在绝大多数游戏,形成一个规范),但是,手机标准的一些UI控件和交互方式才是我们真正的基准,不要因为是一个游戏,所以就觉得它和手机其他应用之间完全不同,在用户层,控件的习惯是由手机养成的,而不是手机游戏养成的——没有人真的因为要玩游戏而购买手机。
除了一些“从未见过”的设计可以makeme think以外,还有:
l   Confused:让人困惑的,通常是因为所设计的内容带有欺骗性、二义性或者含糊不清的,让用户感觉不知道该不该做出这个交互,但是这种“不知所措”却不是因为在思考策略或者做决定而形成的。
confusedUI.png
“我”选中了谁?confused!
l   Surprised:选择的结果让人惊讶,通常是因为用户的惯性思维做了一个选择,结果却发现与想象的根本不一样(违反了“约定俗成”)所致。这种“违反”包括且不限于:一个令人惊讶的UI控件,一个按下后反馈与提示(icon或者文字)所暗示的完全不符的按钮……
surprisedUI.png
如果蓝色的是一个上下拖动的列表,往上拖你甚至可以看到第4条、第5条内容,这真是一个surprise!
2.         点击次数多不要紧,但必须每次都有意义:很多时候,我们会强调“方便”这个概念,而所谓的“方便”,直白的说就是“在更少的点击次数里完成更多的事情”。但事实上这并不是真正的方便,所谓的方便,并不在乎你要点击多少次按钮,只需要每一次点击都有它的意义。
3.         去掉一半的文字,把剩下来的再砍掉一半:界面上不应该有太多的文字,除非这个界面就是为了用来表现文字的,比如阅读书籍的界面。一个好的界面中文字(含数字)占据整个界面的面积不会超过25%,最好是10%左右。我们设计一个UI,尤其是游戏的UI,应当更多地考虑使用游戏化的元素去做到这个事情:比如属性标题相比文字Caption,icon会更合适;比如比起一张报表,雷达图或柱状图会更合适;再比如比起“33%”或“355/1200”这样的百分比数字,一根进度条会更游戏化。
席克定律(Hick's Law
一个人面临的选择越多,则做出决定的时间越长。比起2个选项,人做5个选项会花更久的时间,这对于游戏整体节奏的把握来说非常重要——相比从一个有60个任务的列表里选出任务,先从8个章节中选出一个,然后再从这个章节下的78个任务中选出一个会更合适,在这点上国游的推图做得很好。
同时看到过多的选择不仅让人不适,还会让人放弃选择。哥伦比亚大学商学院教授希娜·艾扬格(Sheena Iyengar)在《当选择让人失去动力》(When Choice is Demotivating)的论文中指出,选择较少时消费者更容易购买果酱。当面对24种不同果酱时,60%的消费者会停下来试吃果酱,弹只有3%的人会买。而面对6种不同果酱时,40%的人会停下来试吃,却有30%人最终购买。当选择看起来太困难了,人会选择不做选择。
所以,不要给你的用户过多的选择,当选择太多了,可以考虑把它“包一层”。
接近法则(The Law of Proximity
格式塔(Gestalt)心理学:当东西距离很近的时候,意识会认为它们是相关的。
proximity.png
用户下意识的就会认为上图中的区域被分为3块,每一块都有上下2个部分。因此如果当左下角的“按钮”(下半部分)与中间的“面板”(上半部分)相关联的时候,无论它是否关联左边的“面板”,都会让人觉得不适应。
奥卡姆剃刀(Occam's Razor
即简单有效原理,代表性的话语就是“如无必要,勿增实体”。我们通常在“设计”过程中总喜欢做加法,并且不断地用“更方便”“更全面”来说服自己,但是对于一个设计师来说,做减法是最考验功底的。
当你为你的设计尤其是界面做了过多的加法之后,他非但不会如你所想的更加方便,反而还会变得无法使用——你更难发现界面想“说”些什么;同时还将彻底打击你产品的调性,每一个功能的流程,它所经历的界面以及每一步骤界面的内容,都是有“语气”的。
奥卡姆剃刀原则是一个普通用户与设计师的分水岭,掌握好它之后才有资格称作一个设计师。因此作为一个设计师,在任何设计中,不要忘记“做减法”。
设计过程真正地去理解一个玩法(和它的流程)理解玩法中的调性
在真正开始设计一个玩法的UI之前,最重要的事情是去了解“上游”,即这个玩法的核心调性,包括且不限于:
l   这个玩法是玩什么的?是一个玩家努力的回馈或者验证玩法(如战场、竞技场还有各种“收菜”)还是一个玩家安排策略的玩法(如天赋、技能加点)?
l   它应该给出玩家什么样的感觉?轻松的还是严肃的?
l   它与众不同之处在哪儿?首先相信设计的这个玩法应该是独特的,即使是同一个玩法放在不同节奏的游戏中,它也可以是独特的。
l   它为游戏的整体带来了什么样的节奏变化,以及它自己的节奏应该是如何的?通常缺乏设计能力的设计中,设计师会把正在设计的模块都当做游戏最重要、最核心的模块,并费尽心思把它设计得像游戏的核心玩法一样。但事实上每一个模块都有自己的节奏,努力设计好它的态度是对的,但是不能偏激地去设计,还是要注意这个玩法的度。
在这一步的时候,最好和所有参与的人员,尤其是参与设计的人进行更多的交流,达成尽可能的共识,百分百的共识是不可能的,每个人都有自己的想法和经历,所以每个人看同一件事情的角度总是会有差异的。但是“理解”绝对不应该是“这不就是xxxx么?”这样的。
设想应用情景
在设计完或者大致理解了玩法设计之后,就要来设想一下用户的应用情景。这里最忌讳的是把自己代表用户——“我玩的时候会这样,然后那样”或者“玩家只要这样玩,就能那样”,这样的想法很玩家,并不适合设计师。作为设计师要想的是一个普通的用户,在我们给他这些界面之后,他会怎么使用,比如饿了么:
1.       用户打开饿了么,是因为想点外卖吃。
2.       用户进来之后既然是想点吃的,那最重要的就是什么类型的吃的,正餐?下午茶?水果?不同的个体在不同的情况下会有不同的想法,所以“我会如何”这个概念就不合适。所以设计师应该给出用户选择这些的入口。
3.       当用户选好分类之后,会有2种可能:用户会优先选择店铺(比如老吃一家店了,或者根据对应想吃的东西找名牌),或者用户非常渴望吃某个东西,比如特别想来杯丝袜奶茶。所以应该有品类和店铺可供用户选择。
就这样一个引导用户到菜单的“玩法”的应用情景就产生出来了,之后就该进入详细的选择内容和返回再选择过程了,选择完之后下单、追踪进度、货到后反馈一个闭环一气呵成。
思考用户的应用情景,最重要的是思考:用户在什么时候为什么会进入这个界面,他到底想怎么干什么。这当中的每一步都是有自己意义的,步骤的先后通常也应该是一个不可逆关系,如果你依然觉得先哪一步都可以,说明还没有定清除这个“玩法”的调性——设想一个Fifa或者实况足球类型的游戏:如果步骤是先选球队,再选球衣,再布阵。则说明选球队是慎重的事情,你应该先考虑清楚,当然这不代表选球衣也如此慎重,只是最后一步布阵也是慎重的事情,所以把选球衣独立出来。但如果选球队和选球衣同步,或者选球衣和布阵同步,他给出的感觉就是这一步的随意性会更高,甚至会带来错误的体验,想一想用户选球队的时候关注的应该是什么?应该是这个球队的属性(如进攻力等)。球衣颜色是否让用户喜欢,并不是一个强到能和属性平级的东西,而是在接受了属性之后的一个调剂。所以需要分2次选择,当你把这两步放在一起做的时候,就会给出一个错误的暗示:球队属性+球衣颜色(样式等)是选择球队的依据。当然在这里你还要用“克鲁特的可用性第二定律”来“说服自己”——并不是说多出几步操作就不方便了,因为这里的每一步都是必要的——这个过程明确了玩法的调性。
列出整个交互过程的流程图
当应用情景思考完之后,基本上整个流程就出现了,不妨把他记下来,因为这只是一个理想的流程。在确定这个理想的流程之后,就要开始细分每一步的操作流程,即每一个流程中的“事”,当然流程中大多的“块”都应该本就是一件事。
process.png
一个moba游戏中,我们会先选择模式,然后选择英雄,最后开始游戏。而选择英雄的过程还能进一步细分(假如没有排位模式)为选择具体那个英雄、选择设定的Build(如天赋、符文之类),然后选择英雄的皮肤,这里我们就要看哪些应该是一体的,哪些应该是分步骤的,选择用谁和build组成了“选英雄策略”,所以他们其实是一体的(同一件“事”),而选择皮肤,则是对选定的英雄进行一个锦上添花,所以分开到下一步。
罗列出需要显示的信息和与用户的交互内容这个界面解决什么事情?
当确定完流程之后,我们要开始确定多少个UI了。每一个UI应该只解决一件“事情”(即一个UI一个主题),而不应该有过多的事情要去做,以避免一个UI有过多主题。所以我们要从流程中找出,到底有些什么事情,然后针对每一件事情做一个UI
比如游戏的装备系统玩法中,玩家可以装备(使用)获得的装备(道具),可以强化装备(道具),可以卖出装备(道具),但这就是三件事,互不相干,所以你应该有3个对应的界面,并且确保他们的可辨识度,毕竟这3件事情虽然有着相似的操作,但有着截然不同的操作结果。
该不该在“选择装备”这个界面里设置卖出和强化功能以方便用户操作?首先卖出是肯定不能要的:“我”是来选择一个装备穿上的,至少“我”希望它和对应的装备(道具)都还是“我”的。“你”(设计师)却给我一个按钮让装备(道具)可能变得不是“我”的,这就是徒增心智负担,所以卖出是一定不能要的!那么再来看看强化是否需要?这取决于强化玩法的调性,假如强化本身是一个区别于装备的策略玩法,“我”要强化一个装备(道具)需要合理的分配我的资源(比如强化石等道具,还有金币等等),是一个慎重选择的过程,那么它就不该出现在这里,因为这里解决的是“选择装备的策略”,但如果强化只是花点钱升级(前提是钱是最常见的货币,因此形不成策略,只是一个积累的货币的转化过程)那么它可以出现在这里,成为“选择装备”的一个“辅助策略”——不同的强化玩法调性,带来不同的设计方向,正是取决于强化和装备能不能算是“同一件事”。
哪些信息帮助解决这个事情
可以简单的罗列出游戏中所有对于这件“事”有帮助的信息,所谓有帮助的信息,可以简单地分析为:
l   这个信息和这件事情的元素是有关的:道具的icon、名字、类型、品质等级代表了一个装备(道具)“是什么装备”,所以对于任何道具有关的界面,它们都可能是有用的信息。
l   这个信息能帮助“我”决策这件“事”:对于选择装备的界面来说,每一件装备(道具)的属性(比如攻击力、防御力什么的)都是这样的信息;但是装备(道具)的价格肯定不是——因为对于通常的RPG游戏来说价格不会影响我是否选择穿上它,除非这也是游戏的一个特殊规则。
l   “我”很想知道这个信息:一些信息它可能并不是直接对于解决“事”有用的,但是这些信息在这个应用情境下会给“我”一定的帮助,或者从心理上给我一些暗示等。例如:商城打折物品的原价、饿了么中“店长推荐”。
要注意的是,在这里我们只需要思考需要列出的信息,而不要考虑如何表现它。相对的也不应该去思考一些“美化用”的UI元素。
干掉不需要的信息
在整理出需要的信息之后,我们要拿出“奥卡姆剃刀”,把对于这件事情不重要的信息干掉了,往往在这些信息中不那么重要的信息有以下特性:
l   对这件“事”的这个过程不相干的信息:有很多信息看似对于这件“事”很重要,但是放在这个过程的这一环节,它就不是必要的信息了。我们设想一个装备(道具)玩法,每一件装备(道具)都有被动技能(类似MHW),配置被动技能甚至产生Build是这个装备的核心玩法之一,因此了解配完装备会有什么被动技能、这些被动技能因为当前配装所生效的效果都可能是必要的信息,但是在“选择装备”这件事情上,这个被动技能到底是什么效果、它当前生效的程度其实都不重要,因为用户更在意的是“我”配了多少个技能,到多少级(或者百分之多少的程度),具体这个技能什么效果和这个级别的具体生效程度是进一步(另一个界面)的事情,所以当然可以在这个UI中被干掉。
l   界面中不必要的“诱惑”:一些信息对应的元素添加之后,反而会引起用户的好奇心,让用户期望进行“偏题”的操作,进而引发出一些与整个流程看似相关实则格格不入的流程和界面。比如在选择英雄的列表中列出这个英雄技能的icon,原本用户可能早已熟悉了这个英雄了,但是当你列出了这些技能icon(且仅有icon)后,用户会想看看这个icon(不熟悉这个界面),或者icon对应的技能(熟悉界面后)的信息,这就是错误地“诱惑”了用户,让他产生了不不该有的、“偏题”的想法。
l   让人想更多(策略)的信息:很多玩法本身是有策略的,所以提供出信息,但是有些信息也会间接地产生更多的策略,但是这些策略实际上与这件事情本身并不符合,那么它就不应该出现在这个界面,而应该是另一个界面。设想一下D3中技能界面,如果出现在技能名下方的不是当前所选的符文,而是列出了所有符文高亮了选中的那个会发生什么?这也类似“界面中不必要的诱惑”,因为“我”在技能界面中应该看到的是“我”当前的技能方案,这里的策略是:“我应该换掉哪个”而不是“我要把哪个换成哪个”。
l   带来心智负担的信息:当“我”正在商城里浏览各种时装皮肤,配置到我的角色身上,看着“我”选的小姐姐角色变得更漂亮,并陶醉其中的时候,“你”(设计师)却列给我看当前的时装总共要多少钱,甚至“我”还差多少钱可以买下来。这就是典型的“不必要的心智负担”,毕竟“我”正在欣赏的是美感,是美好的东西,最后这些美好也许会打动我去买下,请“你”(设计师)在“我”真的决定要买的时候,再告诉“我”还差什么,而不是随时随地都告诉“我”。
排布界面
当确定完一个界面需要的信息之后,我们差不多也就可以确定这个界面的交互了(即用户可以进行的操作),毕竟一个界面解决一件“事”。
根据重要级排序信息
首先我们应该为筛选出来的所有信息元素和交互排个序,列出它们对这件“事”的重要级,这里一定存在先后关系——即没有两个信息(或交互)是等价的,不然说明信息或者交互还存在一定的问题(即使是“是”或“否”的选择,也应该有一个更重要的,即设计师期望用户去点的)。排序的依据可以是:
l   更接近这件“事”主题的:比如足球游戏中选择一个球队的界面中,球队是第一的,因为它是玩家最重要的选择依据和交互,一切都围绕着“选择球队”展开;其次才是球队的实力,相比之下球队实力信息本身也是一个非常重要的“选择球队”的依据信息,是玩家做出决定的根本因素,但它并不是交互的第一焦点。
l   更需要成为用户视觉焦点的:比如一个“更换装备”界面中,有每一件可选的装备(道具),也有当前的角色属性。这两个信息都是用户做出决策的关键信息,在“更接近这件事”上两者的地位相当,但是作为设计师,更希望让用户看到的应该是每一件装备的属性(及其带来的变化),因为这个玩法的策略点是——在比较之后决定选哪个装备(道具)。其次才是装备后的变化结果,即角色属性。
除此之外,排序还有一个重要的工作就是“分块”,即把哪些信息分成一块(解决这件“事”的一个“点”或者说“问题”),当然,块越少说明设计的越好。
根据排序安排元素
选择界面元素即选择UI使用的元件(控件、component)。这个过程不仅考验设计师对美的感官,同时还会有几个要点:
l   能用图形的不用文字(含数字):这一条也正是克鲁格的第三定律,既然是一个游戏UI,那么能采用图形元素叙事的就一定不用文字,即使必须用文字,也应当考虑配合图形。最常见的就是进度条、雷达图配合属性数值。纯文字的UI对于游戏是不合适的,当然对于读书软件还是不可避免的。当然最常见的例子还有一个就是用颜色来表达装备品质,而不是傻傻地写出“优秀”“精良”之类的文字。这一条即使不是做游戏,也要尽可能地靠拢。
l   不用windows控件:既然是一个手机上的软件(只不过分类是游戏而已),那么就不该采用windows的控件。不论是从产品调性或者约定俗成的角度来看,Combobox、RadioGroup都是特别不允许的。而实际设计中,包括一些弹出hint框什么的,严格来说都是windows控件,除非是完全不可避免,不然不应该设计,尤其是错误地认为这可以“更方便”的情况下。Windows控件并不能带来更方便或者更好的表现,能带来的只是更不舒服的操作,除非你的产品是一个“端转手”或者“山寨端游”的产品,并且一些细节必须使用这些控件,才能体现出那种“原汁原味”,比如王者荣耀的很多UI设计其实是为了表现出这是手机版LoL,所以才用了一些windows的设计。
l   风格统一化:每一个界面的风格都应该是一体的,这个推荐参考一些类似Material Design的设计模板。当然光参考模板效果也不好,因为很多初级设计师会为了“草草了事”之类的原因,随手放一个与整体感格格不入的控件(组)在界面上。
根据元素设计布局
当选择完元素之后,我们就可以开始为这些元件选择他们应该出现的区域了,这步的思路非常简单直白——越重要的块,它的中心点越“接近”整个屏幕的中心,当然这里的“接近”指的是两点(屏幕中心和元件中心)间距/元件对角线长度来算的;同时越重要的块,面积也应该更大。当然这也会依赖于采用的控件,所以这步只是一个概念,而不是绝对的。
另外,这里尤其要注意的是,相近功能的东西,应该尽可能凑在一起——接近法则。
根据布局调整内容
之后就是对整个界面的布局,这里会开始微调一些控件的尺寸,并且微调它们的位置(注意都是“微调”)。手机UI推荐使用扁平风格的,这样也可以顺便让界面看起来不是windows的。所以有这样几个要点:
l   做对齐线,让元素之间、尤其是相关的元素之间对齐,对齐是一种美感,也是一种关联性的很好体现。
l   假如你要用列表,那么列表应该贯穿整个屏幕(横或者竖),好的列表其拖动方向顺应屏幕长边(比如横屏就是横着拖);其元素宽高比相反于列表(横拖的列表每一个元素应当是竖长的);单行/列元素个数不应该超过2,推荐为1。
l   不要担心按钮太大,而应该担心按钮让人误解它的作用,太小的按钮不仅看起来像是windows的,它的关联对象也会不同——接近法则。
l   注意平衡,不要让一侧UI显得很重(元素太多、太密)而让整个屏幕仿佛会朝着一边倒下去。
l   黄金分割很好,不过也不要被套死。只能说尽可能让元素,尤其是看起来像卡牌的那些元素接近(而不是完全符合)黄金分割比例。
根据内容验算节奏
我们的UI设计差不多就完成了,但是“行百里者半于九十”,这里开始,我们就要验证UI设计的好不好,首先就是自己得验证一下:
l   通过“试试看”来对比:其实当我们设计的过程中,我们就会遇到一些纠结,比如某个元素是否换一个表现方式会更好?再比如换一个图标会不会效果就不同?不要空想这些问题,试一试,对比一下,然后再选择。
l   设计每一种可能出现的情况而不要空想:很多UI中的元素在使用重复的、相同的元素的时候会很好,比如列表中的道具,都是用同一个icon、同一个名字、同一个品质颜色的时候很棒,但是如果换成实际的会不会还这样?甚至可能会看起来很花?还有就是当列表元素很多的时候看起来很好,但是只有1个元素会不会失衡?这些与其猜测,不如直接多扣点图来看看“最后的效果”再做定论。
l   记得看看交互的节奏:UI设计的同时还要考虑UI的动画表现,也要考虑用户操作的UE,这个操作依然不是“方便”与否,而是看整个过程占用的时间,是否符合这个界面应有的节奏,如果太拖沓或者太快,也是会摧毁掉一个好的UI设计的。但是节奏这个设计本身没有规律可循,只有结合设计师的灵性和对游戏整体调性把握才能得出这个结论。
用户反馈
当做完一个UI设计之后,我们应该拿给别人看,把他们当做用户。对我的Team而言,我就是他们的“用户”,在他们完成设计后就会首先拿给我看。作为他们的“用户”,我会发表我的感受与我的指导,但是绝大多数用户并不具备专业性,所以要学会自己去提炼用户真正的反馈。
拿给你的用户看,而不是说给你的用户
你需要做的是把你的UI拿给你的用户看,然后不做出任何的解释,假如是一份策划案,最好不要带任何说明文字。让你的“用户”自己去理解,假如有什么不理解的,那只能说明设计有问题。这也是很多优秀团队采用one page设计模式的一个核心原因——一切问题尽在不言中。
听、分析、反思,而不是解释
UI拿给你的用户,看他的反应。他的表情、举止、和下意识提出的问题就是对你UI的反馈(当然也有人带着找茬的心态看UI,学会自己过滤就好了)。在这一步,你应该去发现哪些原因让用户感到困惑,哪些表现让用户不能理解。千万不能对UI进行解答,尤其是当你的“用户”问你的时候,你也要假装自己是另外一个不知情的群众,不要把设计时候的心思告诉他,因为这样他的困惑会被你误导而消失,但是并不是所有用户都有机会听你说的。
对症下药
解决设计问题要对症下药,而不是哪儿不对改哪儿。甚至在必要的时候彻底删除已经设计好的界面,从0开始重新整理重新设计也是必要的。比如有时候你的用户发出这样的惊讶——“这个按钮竟然不是控制这个变化的?”这个问题真的仅仅只是按钮的位置、尺寸不对吗?具体问题还是需要具体分析之后才做出解决方案。最重要一点:不要怕辛苦!设计UI耗费大量时间和精力是必须的,因为设计UI,就是你在教你的游戏如何跟玩家畅快地交流,甚至对他们讲述游戏的故事。

发表于 2018-3-26 16:27:36 | 显示全部楼层
大佬,可以加我Q吗?咨询点事情,18666356,谢谢
发表于 3 天前 | 显示全部楼层
厉害,看了感触很多
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|稿件投递|广告合作|关于本站|GameRes游资网 ( 闽ICP备05005107-1 )

GMT+8, 2018-8-20 17:09

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