浅析原创动漫作品手游Battle Glory中UI设计.docVIP

浅析原创动漫作品手游Battle Glory中UI设计 　　【摘 要】智能移动设备普及且性能大幅提升的今天，在移动平台进行多人在线战术竞技游戏已经不会受一些硬件的制约，节奏快、打击感强、画面炫酷，这些虽然在游戏性上满足了玩家，但很多游戏却忽略了游戏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设计。成功的界面设计，就是能让用户一眼就看到最重要的东西，而不重要的、不应该被注意到的部分，结合交互设计，可以将其弱化，甚至是直接删掉。从根本上讲，界面设计的工作重点，在于如何处理和组织好视觉元素，从而有效传达出行为和信息。视觉组成中的每一个元素都有一些基本的属