联系我们 face+ 关于 服务 案例
首页 案例 服务 关于 face+

手游UI设计五大基本原则,让手游UI界面更和谐统一

Time: 2020-01-14


手游已经成为了目前游戏行业的主要市场之一,因为手游随时随地都可以玩,玩家群体也非常的庞大,因此手游的ui设计需求也非常大,下面我们跟随小编一起来了解一下手游UI设计的相关资料吧。


手游UI设计原则

原则一、视觉流的引导

  视觉流,就是我们在查看单个界面时的视觉流程。暂且先不考虑手势的热区范围,单从眼动轨迹来看,眼睛对于物体的关注本身是有一定的视觉规律的,比如最简单的从上到下从左到右的规律。一般而言,我们在设计页面的时候会尽量考虑人眼的视觉规律,比如最重要的功能不要放在视觉盲区范围内。但是在这里笔者要强调的是,眼睛的视觉流是可以通过对界面控件合理的层级罗列,恰当的布局来进行有效引导的。


1.jpg

(图片来自网络)


  原则二、相似相近原则

  相似相近,就是“风格统一,同类相近”。

  风格统一,要保证同一类图标外形上的一致,即使按钮因为字体长短而变得长短不一,但是至少从外形看起来是同一类的。如果按钮从外形上看不出来是同一类,在每一个图标的文字下方增加同样的灰色渐变半透底图,这种由部分到整体的做法很好的保证了这些功能图标的一致性。如果你的游戏走的是3D真实风格,那么游戏里就一定不能出现一个二次元妹子,可以考虑增加异次元元素,但是一定要经过美术的专业处理,让整个游戏的画风不至于那么奇怪。

  同类相近,同一类型控件的位置要离的近一些,即使没有图案的框选,也能知道它们属于同一类按钮。同类功能的按钮都摆在一起,不同类型的按钮之间也没有出现相互干扰。最忌讳没有规律的乱摆控件,会造成玩家找不到可点击控件的困惑,还会对功能产生迷茫,不知道该干什么。


4.png

(图片来自网络)


  原则三、色彩偏向和色彩层次

  色彩偏向,在ui界面设计中,都应该有一个色彩的偏向,也就是主色调。在任何一个画面中,色彩都不宜过多,不同色系最好不要超过3种。这就好像穿衣服一样,除非是高级设计师,拥有很好的配色驾驭能力,很少犯错那种,一般人拍在身上的颜色越多越花哨,整个档次就越low。分享一个小技巧:在游戏界面中,可以使用黄金分割率来做出划分,主色调约占60%,辅助色占30%,突出色占10%。

  色彩层次,在UI制作中,因为精确度要求很高,色彩的亮度和面积有个反比应用关系,这很重要,因为它直接决定了UI原色的主次关系问题。越亮的、纯度越高的颜色在使用面积上慎之又慎,否则就会造成喧宾夺主以及对玩家视觉上的折磨,为了达到视觉上的等同效应,亮度、冷暖不同的颜色也要在面积上进行微调。背景色经常表现为无彩色(黑、白、灰),或者低饱和度的色彩。总的来说,面积越小的颜色要越亮越纯,面积越大颜色就要增加灰度或者降低亮度,色彩的层次出来了整个界面的信息传递就会很舒服。


3.png

(图片来自网络)


  原则四、字体节奏

  很多人会觉得游戏中画面最重要,字体是信息传递的辅助角色,这就错了,内容的可读性永远是排在首位的。我们在看图标的时候会发现很多图标的可辨识度并不是很高,但是一旦添加了字体,马上就可以理解功能。好的字体设计,形状和大小都会直接影响到玩家接收信息的速度。为什么说是字体节奏?同一个页面中,使用同一字号,同一类型的字体,会让信息的传达变得冗杂而费力。但是如果给字体在信息重要度的基础上增加点变化,马上节奏感就出来了,信息的层级也一目了然。所以根据不同的功能场景,使用不同的字体样式也是极为重要的。字体设计小编给一个小小的技巧:比如可以都是4的倍数,你的界面里面会出现12px,16px,20px,24px几种字号的字体。


2.jpg

(图片来自网络)


  原则五、目标导向原则

  目标导向,在游戏中,每一个界面都是具有相应目标功能的,玩法也好养成也罢,界面展示的信息必须是这个功能需要让玩家获的信息。要明确自己的目的,尽量不要为了目的以外的原因影响你的设计。除了这个界面功能最原始的目的,你每想要加一个东西的时候都要反复的问自己:加了额外的东西有什么好处?会不会引发某些问题?如果不加会有什么坏处?多个维度好好想想,优秀的设计都经得起反复推敲。比如,充值界面的左侧为什么一定要加个白无常?玩家会在充值的时候抽个空来欣赏你的立绘吗?另外同一张立绘在多个界面中反复使用,你是有多缺乏设计想法,一定要在每个页面中都加一张立绘来体现你有进行过设计。这样做的后果是:不仅降低了立绘本身的价值,也减慢了游戏资源的加载速度,并且让界面变得复杂不易识别,造成玩家的审美疲劳。

  功能可视化,寸土寸金的界面里面,为什么要有几个完全相同的东西存在,既占地方又影响玩家理解。如果表示不同的功能,那么就应该在图标上也作出区分。

最后的调优方案是:增加指向箭头,对原料进行框选,对目标物品的显示进行排版上的调整。总结反思:策划制作好了游戏逻辑,不能把逻辑直接摆到玩家面前,这里面需要有一个功能可视化的过程。玩家并不关心你的生产过程是什么,他也并不能理解界面里面同一个图案的3个图标,为什么一个是配方,一个是图样,另一个是物品。你只需要告诉玩家我点击目标物品,凑够了原料和金钱,点制作能不能得到就可以了。

  单一页面精简功能,同一个页面上可实现的功能最好不要超过三个,功能太多,玩家到了这个页面潜意识会特别烦躁。


小编相信只要掌握了手游UI设计的以上这五大原则之后,一定可以帮助你更好的找准手游的ui设计的定位,让你的设计更出彩哦!


合作咨询

上海(总部)

上海市浦东新区郭守敬路498号22号楼
021-61057328
service@faceui.com

办公地址地图

北京

北京市东城区后永康17号A座
010-64015620
service@faceui.com

办公地址地图

成都

四川省成都市锦江区东大街牛王庙段100号
028-62790929
service@faceui.com

办公地址地图
首页 | 案例 | 服务 | 关于 | face+ | 智见

Copyright © 2009-2022 FaceUI design. All rights reserved


沪ICP备13044459号-5

上海办公地点地图
北京办公地点地图
深圳办公地点地图
在微信中搜索faceui
或保存二维码在微信中打开