《英魂之刃》游戏界面UI设计总结分享

版权申明：本文原创作者“灰炭”，感谢“灰炭”的原创经验分享！

首先自我介绍下，80后从小就喜欢玩游戏，看动漫，游戏从黑白俄罗斯方块开始，到今天手游满街都经历了。02年开始自学FLASH，04年进入设计公司，从事网页设计，平面，软件APP,动画等设计相关工作，直到08年进入网龙公司，开始设计网页游戏，目前在网龙公司，负者英魂之刃主UI设计，项目初期至今5年了。今天想和大家分享下，游戏UI设计经验；希望大家可以看的懂，很少写，望多多包含！

项目背景

英魂之刃是由网龙公司开发，由腾讯公司独家代理的全球首款微端类DOTA对战网游，改编的手机端英魂之刃。

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/

UI设计流程

上图从左到右就UI设计流程，由策划提出需求-交互设计-再到UI，一步步直到最后程序完成。

以我的了解，很多公司不设专门的交互设计师，而由策划完成相关工作。在我的团队里，初期也没有交互设计师，主要交互是由UI这边主要负责。

我认为设计师在工作中需要清楚了解设计的目的，尤其是你做的不是大众化产品，不能以个人认知、很强的主题性风格来确定目标，比如主界面设计，界面需要什么样的形式(主城形式)(平台形式)？不同的形式会产生是干扰的效果还是更好的体验感？按钮要多大才合适？在这种产品的UI设计时，设计师需要从头参与，而且到了设计环节时，设计师基本上已经心里有数了。

在视觉设计开始之前，界面的的交互策划与设计是很重要的前置步骤，对最终的用户体验有很大的影响。

初期主风格讨论

游戏初期与策划，项目负责人讨论游戏主界面以什么样的形式来设计，初期大家是想以DOTA传奇的方式设计游戏主界面，又希望在主界面上可以有最新英雄推送展示，根据需求，我提出了几个方案：

1. 3D主城（早期主流游戏，通过与NPC对话，接受对应的任务，进行战斗体验，）在单机游戏到网游戏传奇，也有长期的用户体验，证实了这样的方式玩家可以接受

2. 2D主城（在手机上这种方式的游戏进期比较多）在PC上，早期的网页游戏或FLASH小游戏都有类似的做法，也有长期的用户体验，证实了这样的方式玩家可以接受

3. 平台主界面（早期的对站平台，如浩方平台）英雄联盟就以(浩方平台+游戏元素，设计出独立的游戏对战平台）英雄联盟已这样的设计形式，也在市场上玩家也得到了认可。英雄联盟也不是最早的，只是这款游戏比较多人知道。

各平台的优点

1. 图1.3D主城:它向我们展示了游戏角色设计，游戏场景设计，玩家可以直观的了解游戏风格，优点：游戏带入感强，缺点是需要找到对应的NPC，接受任务，（这里缺点是指，时间上没有直接点击来的快速）（缺点当玩家同时在线人数多时，机器配的差的朋友，也许会很卡，同时多人在线出线卡顿等不好的效果）。

2. 图3.2D主城：十分有趣的设计方式展示。优点：游戏带入感强，少了3D主城寻找NPC接任务的过程，可直接快速找到入口，进入游戏战斗。（要说缺点的话，就是不可以直接快速找到对应的入口）

3. 图3.平台界面：可在屏幕上快速找到入口，体验游戏。（缺点少了游戏带入感）

讨论结果

取舍，最终决定以第三个方案设计，（突出推送英雄，导航清晰，以平台式搭建，浩方平台）

游戏设计

初期确定界面布局分布，然后在确定主色调，之后就可以开始设计风格

上面的图是完成后的效果图

游戏功能：上图从1到5，重要程度来分，（需求游戏主界面，以推送英雄为主，）

1. 游戏英雄占满整屏，作为主视觉；

2. 玩家手拿着手机，左右两边上下滑动与点击，大拇指是最舒适的感觉，这里把主功能入在屏幕右手边；

3. 至于导航为什么放下面，（从PC开始，很多早期游戏如：暗黑破坏神2，魔兽世界等RPG游戏，大多数技能，背包，等等功能放在屏幕下方）（大家可以想想把金币放到屏幕下方，大家会不会觉得怪怪的，一些习惯我们不需要去创新）再说界面上也没有更好的地方摆放了，功能较多；

4. 人物信息，与金币等信息，放在左上，（这些从街机游戏开始，就是放在左上)

5. 排行榜上下滑动，这里没想太多，很多游戏都这样放，也没有更好的地方就放到这里。

完成以上的分析后，界面布局就也定下来了，之后就是界面风格设计了。

题外话

怎么做交互是对的？

只要了解一个事物为什么而来，在去分析它是否合理，这里我的经验是找到游戏的原点，在针对在市场上的效果，来判断游戏交互设计是否合理，如果习惯已经养成，在合理的条件下，不需要去挑战。

这里打个比方，键盘上的按键分布，用户都是需要学习成本，一旦用户习惯了，我们需要去改变按键的分布，那用户学习成本就会增加，这样是不合理的，要是你的创意可以得到更好的体验，也有足够的实力让市场接受，那可以去尝试创新。

风格设计

英魂之刃在PC上已经运营有一段时间了，为了让英魂之刃的玩家对英魂手游不会产生陌生感，这里颜色上还是采用了英魂之刃的蓝色系。（由于手机很多玩家，把屏幕亮度调的比较暗，所以手游上的色调，会比PC亮）

题外话

这里说说PC这里，PC这边是比较早期设计的交互，由于玩家已经习惯了交互体验，在后期改版上，交互上没有做太大的改动，主要改变了模板（当然要做大的改动，需要最少一年到二年时间，各方面考虑周全，再预热，要是直接改动，玩家又要新的学习成本，这里会导致玩家不习惯（小部分功能，优化到是可以））