UED学习笔记
越努力越开森

游戏-重构英雄界面

今天拿以前工作中的一个例子,总结以下自己的设计方法和流程

-----------------------------------------------------------------------------------------------

项目简介:

横版RPG类重度手游

网页游戏重构为移动端游戏,需保留全部功能

重新梳理信息内容、操作流程,保证符合移动端交互特性

 

系统说明:

游戏核心功能之一

玩家在这里查看英雄信息、装备信息、进行装备的穿戴和替换

具体用户目标和功能如下:

 

重构问题:

1.信息过多:

最重要的问题。英雄的属性和装备属性非常多,在WEB端已经很拥挤,移动端放置不下这么多信息。过多的内容也会影响用户的感受

2.交互成本:

WEB端查看装备详情使用的是鼠标OVER+TIPS弹窗形式,但是移动端不支持鼠标悬浮操作,交互成本会相应增加

 

解决方式:

1.把信息进行优先级排序,低优先级的内容进行隐藏

2.根据使用情景,适时出现不同的功能,而不是全部呈现出来

3.使用滚动,增加界面的扩展性

4.把影响玩家决策性的关键信息直接展示,降低交互成本

5.采用移动端习惯的手势操作

6.多使用小图标而不是文字,提高识别度的同时增加界面空间

 

设计思路:

1.功能逻辑

英雄系统提供两个功能,即:查看英雄详情和装备

玩家点选一个英雄可查看详情和装备,点选另一个则页面切换

所以一级显示应该包括英雄的属性和它身上有哪些装备

玩家还有查看装备详情的需求,和查看英雄的逻辑一致,点击装备图标显示装备属性,这时候英雄的属性就没必要显示了,所以装备的属性和英雄属性应该是替换显示的关系

那么若英雄没有穿戴装备怎么办?这里分为两种情况,第一种是有可穿戴装备,这时候ICON上需要一个提示,点击后可直接让用户穿戴;另一种是没有可穿戴装备,那么这里需要提示玩家如何获得装备

总结来说:英雄属性与装备属性是替换关系;根据玩家点击ICON不同的情况,装备属性、装备列表、游戏提示三者是替换关系

2.关键流程图

3.页面流

根据上面的流程绘制页面流

 

详细设计:

1.结构布局:首先确定界面的整体布局,我把按照优先级划分为3大块,如下

说明:移动设备布局要简洁明了;符合用户的视觉流(图中箭头);可以引导用户操作

2.信息划分:根据功能,展现可实现功能的控件和信息,并按照功能重要性和使用频率进行优先级排序

说明:本次设计中功能已经确定了,直接列出信息内容即可。但在其他设计中,需要经过分析用户实际需求→列出满足需求所需要提供的功能→支持功能的控件/信息→优先级4步

(PS:穿戴装备这里多少二级,因为在主界面加入了“一键穿装“的快捷方式,所以这里才都是二级)

3.按优先级把信息填入大结构中,大致如下图:

4.开始细化,并加入说明标注

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

评论
热度 ( 1 )

©  ̄靑。 | Powered by LOFTER