魔域UI设计过程

今天的整理作品时，发现之前设计魔域UI界面时，写了篇设计说明，在公司内部分享。

这里把这篇文章发出来，主要针前面针对英魂之刃开发流程里提到人，怎么做交互才是对的。

前几年的作品，文章也是那时候写的，上面提到的很多观点，也是那个时间时的看法，现在游戏有更好的更新的各种交互了。这篇文章有点老和大家分享交互过程的目的,也是希望大家可以更多了解我在设计是的想法。

通过对文章的理解，可以举一反三，当我们需要设计全新的游戏，市场上的竞品基本没有时怎么去设计，如何设计全新的体验。写的不好，多多包涵！

游戏分析

早期《暗黑破坏神》是最多玩家认识单机动作RPG游戏，也是游戏界面的经典。

暗黑界面主要功能由：人物信息、装备、背包、技能、经验条、地图、设置组成。

网游主要是以单机游戏演变成多人在线，功能也随着增加。(如传奇)

网络游戏主界面功能由，单机基础上添加了多人互动功能；

如聊天，公会，交易，都是多人模式下的功能，其它(人物信息，技能，经验条，地图，功能菜单)与单机差不多。

功能菜单：宠物、合成、天符、锻造、等各种功能，包括游戏设置界面，这些都与游戏本身需求改变单机部分基本保留。

暗黑类型的手机游戏网游目前市面上没有比较成功的案例，交互有各式各种的无法统一，都根据游戏而定。

手机游戏主要以手指触摸为主要操作，分为单手与双手操作。

单手操作的游戏，如回合制。(我叫ＭＴ等各式个样游戏)

 

【我叫MT】

双手操作游戏主要以动作类《永恒战士2》右手大拇指点击。也是目前大家右手操作习惯。

 

【永恒战士】

单机游戏功能等较少，在交互体验上，可以达到较好的操作体验(比如误点击，视觉体验等)

而对于网游来说，已经不是很好的体验，从以下画面可以看出：

 

到目前类似暗黑类型的手机网游，在市面上没有比较成功的案例(各式各样没有统一的玩家习惯规范)

而网游游戏，如魔兽世界类型的，功能布局等都比较统一了：如一下图

 

魔域初期需求案

游戏主要以PC魔域减化，再结合市面上的同类型游戏，进行布局设计。

主要功能由：人物头像、血条、蓝条、ＰＫ、状态、幻兽、地图、任务、技能条、经验条等功能(功能未确定处于讨论过程)。

初期概念布局：

 

细化

上图：在搭配部分修饰后，结合场景过多的功能让玩家眼花缭乱(按钮太小误点击等）

 

在后期界面还需要添加大量的功能时，界面问题扩展性不高。如：技能要求6到10个，除地图以及主界面外，增加商城、活动等相关界面按钮。 

在否定了以上人设计方案尝试一下新的交互设计。

新交互过程跳过....

魔域最终交互界面设计思路

(剖析目前所有暗黑类型动作ＲＰＧ游戏)

在通过对目前市面上的手游分析优点与缺点，单机游戏的主要核心功能，进行思考与设计。

１.网游信息量一般较多，ＵＩ设计必需考虑隐藏与结合(减少画面使用空间，保证合理的按键大小以达到最少的信息量)。

２.动作游戏，都经双手操作为主，左手主要移动角色操用，右手为打击与功能选择(操作习惯问题)。

下面是魔域界面布局

１．左上角以人物信息为主，与幻兽　(针对人物功能进行结合设计)

２．右手主要以技能与功能进行结合

３．右下角攻击键与经验条，技能气力结合

４．ＵＩ上左和右都设计了收缩按钮做为隐藏界面效果

5．屏幕资源匹配如：iPhone 4、iPhone 5、iPad、安卓手机等不同大小屏幕。

 

在考虑界面结合与隐藏效果，也必需考虑界面扩展与多平台匹配。

 

界面为左上角固定角，右侧上角固定，中间的技能圆环独立分开，可以试用任何比例的屏幕。

多平台资源扩展的灵活性，大幅度提高游戏开发时间。

   

之后设计根据需求方提供的需求，做出部分改动。

同类型游戏只要不改动主要规范（手指移动区，左右功能栏目摆放），

再进行创新设计，适当调整，就可以通用所有游戏

 

 

总结

界面交互，部分保证单机与网游戏的共同点(如左上角人物，右上角功能选择，底部经验)，在结合手机操作习惯(如左手移动，右手操作习惯)对本次设计进行了创新。

优点亮点：(同类型游戏)

１.资源可通用所有掌机触摸平台。

２.界面功能布局，通用所有同类型游戏。

３.同类界面交互在全球，无先例独一无二。（这里提到的独一无二是2012年前的，想在有更好的交互了：）

在此材料里准备了一份魔域ＦＬＡＳＨ动画概念演习，如一些手指直线滑动，自动奔跑功能，在同类产品上都是创新。