张生博

【摘 要】智能移动设备普及且性能大幅提升的今天，在移动平台进行多人在线战术竞技游戏已经不会受一些硬件的制约，节奏快、打击感强、画面炫酷，这些虽然在游戏性上满足了玩家，但很多游戏却忽略了游戏UI的重要性。本篇论文通过产品构思、美术风格、交互设计、界面设计等几个方面，阐述了IPad MOBA游戏《Battle Glory》的UI设计过程，以及设计过程中带给我的心得和感悟。

【关键词】UI设计；交互；界面设计；用户体验

中图分类号：J524 文献标志码：A 文章编号：1007-0125（2016）08-0179-02

智能设备性能的不断提升，让手机游戏的类型变得更加多样化，以前只能在PC端游戏的多人在线战术竞技游戏（Multiplayer Online Battle Arena，以下简称MOBA游戏），现在也被搬上了移动平台，让大家可以方便快捷地享受竞技游戏的乐趣。跟随移动端MOBA游戏的流行风潮，我结合已有的角色素材，并参考市面上已有的MOBA游戏美术风格，创作了一套力求功能与美观并存的游戏UI。

一、《Battle Glory》UI的构思与美术风格

近几年，MOBA类游戏终于不再被限制在PC平台上，在移动平台也打得火热。不同于PC端，在移动端进行游戏，每局时间短、节奏快，手指直接控制人物跑动和施放技能，操作感强。不过正因为游戏本身可玩性很高，所以大家往往都忘了在游戏UI上花费功夫。我自己也玩了一些手机和平板电脑平台的MOBA游戏，发现大部分游戏的UI在功能性和交互性上都不够清晰，新人经常出现找不到所需功能的情况，导致用户体验很差。而且UI的界面设计也做的很简单，没有内容和细节。因此，我决定设计一套功能明了易懂且具有美观性的游戏UI。

一般MOBA类游戏的人物、场景都是3D写实的，且这类游戏又属于战斗类的游戏，这就决定了它配套的UI不能太过华丽复杂。我参考了市面上的一些MOBA游戏，证明确实如此，因此我的设计也会遵循这一原则。在我的设想中，我要做的是一款欧美未来架空背景下的MOBA游戏，我认为符合这个背景的特点有：欧美风、科技感、简洁、蓝色、绿色、光芒等。通过查阅资料、观察真实游戏，我发现欧美风的UI，除了超写实的风格以外，基本都以简洁大气为主，不会太过于突出，却也有存在感，会有细节与质感在其中，这样的设计会给人精致细腻的感觉。游戏背景设定在未来，那个时候的科技肯定已经非常发达，所以我认为科技感的元素是必不可少的。在颜色上，我会联想到蓝色、绿色，质感上，我联想到的是金属、发光等等，这些都比较符合我所构想的美术风格元素。

二、《Battle Glory》的UI设计

交互设计是产品UI设计中的第一步，它的目的是提高用户体验，使产品更好用，功能更符合人性化逻辑。交互设计是界面设计的内在框架，只有先确定好UI的交互设计，才能进行后续的界面设计。一个没有经过交互设计的产品，很可能为了解决一个问题而创造出更多的问题。因此，交互设计是产品UI设计过程中不可或缺的一环。在交互设计上，我为了将功能集中统一，选择了顶部通用信息栏的形式，将主界面、英雄选择界面、英雄购买界面、皮肤购买界面、编辑天赋界面以及资源信息和个人信息整合在一起。信息栏是固定的，需要哪一个功能，直接点击，画面即可跳转到相应的功能界面。在作品的皮肤购买界面中，左侧为英雄选择，此处是将英雄选择界面的英雄头像部分拿来，改为纵向弧形排列，依然是“近大远小”的原则，创造空间感，通过手指上下滑动进行选择。右侧信息栏，显示所选的皮肤名称、文字介绍、属性加成，以及同一英雄不同皮肤之间的切换和购买按钮。相关信息集中展示，可以有效减少玩家的无用阅读。

战斗界面不属于单纯的功能性界面，但它的交互却需要考虑玩家操作习惯、信息整合、不能影响战斗等多种因素。我把一些必要的信息：敌友方头像、比赛用时、杀敌数、死亡数、快捷语、金钱、小地图等都放在最明显的上方。下方中央则是5个技能按键，点击即可。技能按键的布局是根据游戏玩法而定的，大部分战斗类游戏的布局是左下角虚拟方向摇杆，右下方普攻键和技能键，这是最符合人们使用手机的习惯的布局。我的设定是直接点击屏幕移动和普通攻击，省略掉了方向摇杆和普攻键，将技能键居中摆放至下方，技能右侧则为发送信号、比赛信息、商店按钮，方便用户使用。

界面设计是交互设计的外在表现，它与交互设计紧密结合才组成了UI设计。成功的界面设计，就是能让用户一眼就看到最重要的东西，而不重要的、不应该被注意到的部分，结合交互设计，可以将其弱化，甚至是直接删掉。从根本上讲，界面设计的工作重点，在于如何处理和组织好视觉元素，从而有效传达出行为和信息。视觉组成中的每一个元素都有一些基本的属性，比如形状和颜色等等，但是几乎没有哪个属性具备与生俱来的意义，是各种视觉元素、各个属性的不同和相同搭配组合，才让界面具备了意义。

界面设计中的面板我采用了半透明毛玻璃质感，并添加了内部细节，包括花纹、纹理等，让它更加丰富。选用毛玻璃质感，是因为它的朦胧感，容易营造空间气氛，同时也具备了不抢主体又体现质感的特质。按钮我采用的是金属质感长方形按钮，更加突出，让按钮成为界面中最重要的存在。

UI中的功能图标我采用扁平化图形的处理方式，配以淡淡的外发光，让其融入整体，这种方式不仅不会增加玩家的思考成本，在制作方面也可以以最快的速度达到最好的效果。战斗界面的功能图标与其他界面的相比略有不同，杀敌数、死亡数、金钱这三个比较重要的图标，要清晰明显，因此纯色的效果就很好。作为不是很重要的按钮，快捷语、发送信号、比赛信息、商店按钮我都做了降低透明度的弱化处理，这样让其存在且不影响视线。

三、《Battle Glory》 UI设计中的设计规范

UI设计需要创意与创新，但不是天马行空，想怎么做就怎么做，而是要遵循一定的硬性规范。因此在制作初期，我查阅了很多资料，并玩了一些游戏进行参考。移动设备机型众多，屏幕大小也是各不相同，因此移动端UI的设计，首先最需要考虑的就是适配问题，其次就是控件的比例、间距的问题。关于分辨率，一定要便于屏幕适配。常用的适配方法是按照960*640px的尺寸，等比放大或缩小，用图案填充左右或上下多出的部分。因为MOBA类游戏在大一些的屏幕上才会有更佳的体验，因此UI设计定位为IPad版本，分辨率直接采用IPad分辨率，2048*1536px。

UI中的控件，遵循了所有切图资源均为偶数像素的原则，并考虑到了界面中同类功能资源复用的问题。这里要特别注意的控件是按钮，其大小颜色等属性应与重要程度挂钩。我的作品中首要按钮最大，为120px，且颜色为最鲜亮的金黄色，普通大按钮90px，往下依次是中按钮70px、小按钮60px，最小按钮也按照规范不小于44px。间隔是非常重要的界面构成要素，各控件之间的间隔类型不要太多，这样就可以做出秩序井然的界面效果。当然，在此基础上进行适当的变化，可以营造出活泼有趣的效果。我在选择英雄界面和皮肤购买界面中英雄头像的处理，就是受到了这点的启发。

在UI设计的前期，我遇到的最大问题就是比例问题，比例失调让界面怎么样都漂亮不起来。创作的过程是个很奇妙的过程，在自己陷入瓶颈的时候，与他人进行讨论通常都会让事情出现转机，毕竟设计就是为了方便大家的，集思广益才更容易解决问题。在自己的能力还不足以独担大任时，闭门造车无疑是错误的选择。

参考文献：

[1]周陟.UI进化论：移动设备人机交互界面设计[M].北京：清华大学出版社，2010.

[2]Garrett，J.J.用户体验的要素[M].北京：机械工业出版社，2007.

[3]Cooper，A.About Face 3 交互设计精髓[M].北京：电子工业出版社，2008.

[4]佐佐木刚士.版式设计原理[M].北京：中国青年出版社，2007.

[5]Saffer，D.交互设计指南[M].北京：机械工业出版社，2010.