[手游] [原创]《萌江湖》显示布局与操作

mctr10

《萌江湖》的界面和操作设计是根据《大掌门》的界面布局做了针对性的归纳和重新调整，根据我之前做的大侠传拆解分析，感觉游族在系统脉络的规划上做的很棒。在《萌江湖》的操作和界面切换上又感受到了这种组织力。
这里做一个小小的分析。
操作的定义：点击: 大部分的功能操作都是点击作用
左右移动：只有在首页界面起作用，用处较少。
上下移动：在需要看到多样信息或者一次性选择多样对象的情况下用到。
先看一下首页界面布局：




如图所示：根据相应的内容模块重整合，归纳对应区域。在主页面上展现了：目前成长信息，资源情况，队伍信息，各样玩法，主要内容。

因为主要内容承载和主要属性信息经常需要查看的关系，放在了屏幕两端，并设定为尽量不可变化区域。可变化内容区域为中间部分。

来看一下萌江湖设定的几种显示信息的布局：

8 分钟前 上传
下载附件 (838.71 KB)



最左边的布局为常用布局方式，需要快速返回，以及看到承载这样界面的内容有：阵容，强化，夺宝，江湖，比武，包裹，商城。操作上以点击功能图标和拖动结合使用。

中间的布局一般为介绍对象的详细属性，以及对对象的操作。如：卡牌信息，装备信息，账号详细属性信息。操作上为点击功能图标。

右边为了为突出强化显示某些成长变化，如：升级，强化，技能获得，战斗画面。操作上为任意触摸即可返回。

由上所述，手机的屏幕大小，以及手机的特殊操作。影响了显示布局。某些显示和需要多样操作的功能要尽量适应手机的特殊性。如下面：


5 分钟前 上传
下载附件 (444.26 KB)



这两图在布局上一直的，左图阵容队伍的属性和数值要明确显示，而且人数的多样必须采用上下移动的操作方式，右图因为是单一功能，操作单一性采用点击的操作方式。
下面看一下界面切换流程


3 分钟前 上传
下载附件 (289.9 KB)



因为图片大小的问题，装备的介绍页面之前有叙述就直接忽略掉。

红色表示直接切换到当前页面，绿色表示返回页面。

可以看出尽量在功能切换到玩法页面上做到2个页面就可以切换。最多3个。

在图片2的界面中如果没有装备点击界面直接可以转换到夺宝页面。

萌江湖的页面转换逻辑做的很有条理和以及相似功能模块的组织。是值得学习的地方

我的博客地址：
http://blog.sina.com.cn/shouhuzhedelang

互勉努力！一起成长！

北漂的鸟

图挂了。。。