李思晓又一个WordPress站点

浏览: 201

游戏UI的五个基本设计原则,你做到了吗?-didalldesign关于UI设计的一些原则《万象物语》2、相似相近原则相似相近,就是“风格统一,同类相近”。风??


游戏UI的五个基本设计原则,你做到了吗?-didalldesign


关于UI设计的一些原则


《万象物语》
2、相似相近原则
相似相近,就是“风格统一,同类相近”。
风格统一,要保证同一类图标外形上的一致,即使按钮因为字体长短而变得长短不一,但是至少从外形看起来是同一类的。如果按钮从外形上看不出来是同一类,可以参考《恋与制作人》(下文简称:恋与)主页面右侧图标群的做法,在每一个图标的文字下方增加同样的灰色渐变半透底图,这种由部分到整体的做法很好的保证了这些功能图标的一致性。如果你的游戏走的是3D真实风格,那么游戏里就一定不能出现一个二次元妹子,可以考虑增加异次元元素,但是一定要经过美术的专业处理,让整个游戏的画风不至于那么奇怪。《奇迹暖暖》里面有很多不同的服装风格,有古风的,现代的,西方的,中式的愈堕落愈英雄,日式的等等等等,但是做过统一化处理之后,一点违和感都没有。
同类相近,同一类型控件的位置要离的近一些,即使没有图案的框选,也能知道它们属于同一类按钮。《恋与》的主界面上的功能也很多,但并不让人觉得杂乱无章,同类功能的按钮都摆在一起任一宁,不同类型的按钮之间也没有出现相互干扰。最忌讳没有规律的乱摆控件,会造成玩家找不到可点击控件的困惑,还会对功能产生迷茫,不知道该干什么。

《恋与制作人》
3、色彩偏向和色彩层次
色彩偏向,在界面设计中,都应该有一个色彩的偏向,也就是主色调。在任何一个画面中,色彩都不宜过多,不同色系最好不要超过3种。这就好像穿衣服一样,除非是高级设计师,拥有很好的配色驾驭能力,很少犯错那种,一般人拍在身上的颜色越多越花哨,整个档次就越low二后生挖眼睛。分享一个小技巧:在游戏界面中,可以使用黄金分割率来做出划分,主色调约占60%,辅助色占30%,突出色占10%。
色彩层次天字号小白脸,在UI制作中三国寻娇,因为精确度要求很高,色彩的亮度和面积有个反比应用关系,这很重要,因为它直接决定了UI原色的主次关系问题。越亮的、纯度越高的颜色在使用面积上慎之又慎,否则就会造成喧宾夺主以及对玩家视觉上的折磨,为了达到视觉上的等同效应,亮度、冷暖不同的颜色也要在面积上进行微调。背景色经常表现为无彩色(黑、白、灰),或者低饱和度的色彩。总的来说,面积越小的颜色要越亮越纯,面积越大颜色就要增加灰度或者降低亮度,色彩的层次出来了整个界面的信息传递就会很舒服王子凌。《王者荣耀》的界面中色彩的层次感很明确,主色调是灰度很高的蓝色,辅助色分别是紫色青色黄色等,从色相上就把功能模块做出了划分谢秋萍,并且可点击区域的颜色有很高的亮度,这样的设计让玩家很容易识别功能。

《王者荣耀》
4、字体节奏
很多人会觉得游戏中画面最重要,字体是信息传递的辅助角色,李美熹这就错了,内容的可读性永远是排在首位的。我们在看图标的时候会发现很多图标的可辨识度并不是很高,但是一旦添加了字体,马上就可以理解功能。好的字体设计,形状和大小都会直接影响到玩家接收信息的速度明智左马介。为什么说是字体节奏?同一个页面中,使用同一字号,同一类型的字体,会让信息的传达变得冗杂而费力。但是如果给字体在信息重要度的基础上增加点变化,马上节奏感就出来了金·富力士,信息的层级也一目了然。所以根据不同的功能场景,使用不同的字体样式也是极为重要的季逸超。下图为《梦幻家园》里面的一个活动页面的字体设计,文字的节奏感做得很好,不同的功能文字大小不同,设计也有区分,甚至有数字的地方又会有加粗的强调。关于字体设计,笔者给一个小小的技巧:比如可以都是4的倍数,你的界面里面会出现12px,16px,20px,24px几种字号的字体。(说到这里,忍不住要吐槽一下,真的不是说给字体勾个边,加个斜体就是设计!)

《梦幻家园》
5、目标导向原则(这里只讲逻辑一等贱妃,没图)
目标导向,在游戏中,每一个界面都是具有相应目标功能的,玩法也好养成也罢,界面展示的信息必须是这个功能需要让玩家获的信息。要明确自己的目的,尽量不要为了目的以外的原因影响你的设计星际猎宝生活。除了这个界面功能最原始的目的,你每想要加一个东西的时候都要反复的问自己:加了额外的东西有什么好处顾剑桥?会不会引发某些问题?如果不加会有什么坏处?多个维度好好想想,优秀的设计都经得起反复推敲。比如,充值界面的左侧为什么一定要加个白无常?玩家会在充值的时候抽个空来欣赏你的立绘吗?另外同一张立绘在多个界面中反复使用魏嗣,你是有多缺乏设计想法,一定要在每个页面中都加一张立绘来体现你有进行过设计。这样做的后果是:不仅降低了立绘本身的价值,也减慢了游戏资源的加载速度,并且让界面变得复杂不易识别,造成玩家的审美疲劳。
功能可视化,寸土寸金的界面里面,为什么要有几个完全相同的东西存在,既占地方又影响玩家理解。如果表示不同的功能,那么就应该在图标上也作出区分。举个我自己遇到的小例子,游戏的生产界面,所有物品摆在那里,同一个图案的图标在同一个页面里面摆了三次,并且没有相关图案和文字说明的引导,会让玩家很迷茫,完全不知道要怎么操作,其实我一个“所谓”的策划自己也搞了好久才明白是个什么操作。最后的调优方案是:增加指向箭头,对原料进行框选,对目标物品的显示进行排版上的调整。总结反思:策划制作好了游戏逻辑,不能把逻辑直接摆到玩家面前卡车风暴,这里面需要有一个功能可视化的过程。玩家并不关心你的生产过程是什么,他也并不能理解界面里面同一个图案的3个图标,为什么一个是配方,一个是图样,另一个是物品。你只需要告诉玩家我点击目标物品,凑够了原料和金钱,点制作能不能得到就可以了。
单一页面精简功能,同一个页面上可实现的功能最好不要超过三个,功能太多,玩家到了这个页面潜意识会特别烦躁。因为原本我到了一个页面得到想要的功能就可以了周梓倩,你这样设计,让我对目标功能的需求产生了游离,于是我要想一下到底要做什么,也就是说你成功调动了玩家的选择困难症。
策划和美术的沟通
主要是提需求,美术最怕听到的一句话就是:没有要求,随便画。这看似策划对美术放低了要求,觉得我都不限制你了你还画不出来?但其实是策划把自己的工作量转交给了美术,因为策划每提出一份需求,都是有自己的使用场景的,这个使用场景不跟美术表达到位,美术是很难随便画一个出来的丁文婷,因为很容易会发生策划不满意最后成品的车祸现场。比如我想要个塔的大背景图,那么这是什么样的塔,在哪里用,需要突出哪些部分,偏西式、中式还是日式,颜色是鲜艳一些还是沉稳一些,需要画几层?这些都是要事先考虑的。或者你可以给出一些关键词,收集相应的图片素材,让美术更好具象化,理解你的美术需求,使界面设计更加符合你的预期。
分享个我自己工作中的小例子,游戏内需要增加树洞生命力排行榜的三个图形称号,根据游戏的世界观,对树洞生命力提取相关关键词:树洞、生命力、历史名树、日本,最后找到了日本历史上有名的盆景,从中选出了三个名字:羽衣(800年)、吾妻松籁(200年)、小真弓(80年)鳄冰鱼。之后找到每种盆景相关的图片作为形状参考,又根据游戏内已有色彩找了好看的图片作为配色参考,最后提需求。

需求表格及成品对比
这里面还有个小插曲,当我把这三个名字拿给我们这边的任务策划(代号ZS)看,ZS说这玩家根本看不明白是什么,直接甩过来了三个名字:世界之树、智慧之树、生命之树。后来测试妹子跟我吐槽说“太难听了,不会有人想要去刷这些称号”,我拿给妹子我之前准备好的名字,妹子表示很喜欢。
(声明下,在这里只是个人的一个工作方法分享,游戏也不是完全架空的世界,很多设计也是来源于现实的,这样可以使玩家更便于接近游戏世界并对其产生亲近感,增加虚拟世界的习惯真实性,并且这样也可以降低玩家的学习成本,不过版权问题另说。)
总结
一个简洁高效的操作流程对于用户体验的提升,尤其是新手的留存,是非常明显的。如果一个界面能让玩家很容易GET到你的点金舒春,那么这个UI界面就是成功的。经典摄影作品如果这个界面的操作还很简洁优雅李玟阳,那么这个界面就是相当成功的。如果这个界面还很漂亮,那么这个界面就是非常成功的。
建议制作界面的策划都去学习一下动画制作,或者动效制作的基础知识,最简单的,在制作界面的时候,怎么样能让两个拥有相同页签的页面,在相互切换的时候,相同部分的按钮位置保持不变,让操作变得不那么奇怪,让界面易于理解。
全文详见:https://p66p.cn/29944.html

TOP