欢乐西游交互设计进化论

发表于2015-05-22
评论0 1.3k浏览
 

欢乐西游UI交互设计进化论

UI概念设计阶段

方案一 竖版(方案节选)

/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.001.png/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.002.png

/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.003.png/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.004.png

系统结构

以升级系统为例,市面主流卡牌游戏的成长体验流程多为:

/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.005.png

通过分析可以获知玩家对于卡牌能力的认知产生了卡牌成长需求,主流游戏体验在玩家产生需求后需要切换离开当前当前界面后在其他界面寻找升级系统的入口。这样的体验是否可以得到优化?思考发现可以通过绑定卡牌和成长各系统入口来串通玩家成长体验:

/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.006.png

伴随着功能入口的调整使得主界面呈现出来的更为简洁,系统体验更为有序。但是这样的设计会与主流系统平铺的系统结构设计有所区别,存在一定的新手学习成本。

导航设计

/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.007.png/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.008.png

收缩式导航能让全局导航所占空间缩小,便于贯穿几乎所有核心系统界面,从而发挥全局导航便于繁重系统之间频繁切换的优势,同时也能保持系统界面体验的沉浸感。

方案二 横版(方案节选)

/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.009.png/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.010.png

/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.011.png/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.012.png

系统结构

该版本继续沿用主流的卡牌成长交互体验流程。

界面场景化

考虑到一方面提升主界面功能拓展性;另一方面增强游戏的主题代入感。将主界面设计引入场景。

导航设计

通过尝试利用标题右侧空间来整合标题和导航,将界面的三层分区缩减至两层简化阅读的信息层级。这样的导航设计适合作为系统内部子系统的导航。

/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.013.png/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.014.png

UI概念设计修订阶段

通过概念设计阶段与项目频繁、深入地沟通后,对概念设计进行了修订。该版本系统架构通过主界面承载所有系统功能入口,希望通过各系统独占式界面带给玩家系统沉浸式体验,并且建立系统之间的互动关系。

/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.015.png

在主界面的设计考虑到出战队伍和战斗入口对玩家游戏行为形成直接影响,将其作为核心内容突出展示。

/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.016.png/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.017.png

对于强成长性的游戏而言,战斗模式会随着玩法开发不断的增加,在设计时应该着重关注功能区间的拓展性。所以这里将战斗入口区间设计成横向滑动。

/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.018.png/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.019.png

由于卡牌游戏系统复杂导航和返回时玩家进行系统界面切换最为频繁的按钮,来回上下的切换非常不方便,在二三级系统界面进行了返回按钮下移的尝试。

补充:该阶段制作了可操作式交互原型,让项目组快速了解设计的系统结构,并能亲自体验即时反馈,大大降低了沟通成本。

UI设计阶段

通过修订阶段的交流和讨论后,确定了系统结构,由于排行和队伍界面必须作为主界面的核心展示内容,于是调整了战斗入口显示方式,专设了两层导航。其中的“队伍”和“排行”整合成交替式按钮。做交替式按钮时一定要特别给予交替显示规则,否则对于游戏体验影响很大。导航设计方面肯定了返回下置的交互体验,结合考虑到卡牌游戏系统的深度,最终确定二三级系统界面使用“返回”+“主页”居两侧,系统功能按钮居中的设计规则(这样设计还能强化玩家对于当前所处系统功能的识别)。

/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.020.png/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.021.png/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.022.png

在完成主干系统设计的规则构思后,即可开始产出界面设计规范,明晰界面布局规则和区间内拓展规则。这样的规范对于后续系统界面设计和视觉界面资源的归纳都有着重要作用。

/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.023.png/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.024.png/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.025.png

作为体验不可或缺的提示部分,也需要在这一界面进行规范,提示内容主要包括:行为反馈,行为确认,系统引导,延迟说明

行为反馈:操作行为结果和信息强提示

/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.026.png/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.027.png

行为确认:货币消耗相关的消费行为二次确认

/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.028.png

系统引导:引导解决方案(背包满了,操作失败了等)

/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.029.png

延迟说明:前台行为与后台服务器交互时的延迟说明

/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.030.png

规范完成之后便全面开启系统界面设计。

UI设计优化阶段

/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.031.png/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.032.png

完成游戏核心系统设计并入版本后,界面优化并行与开发优化。优化内容主要包括如下几个方面:

导航再优化

通过测试我们察觉到由于系统繁多且层级较深,玩家需要在各系统界面频繁的切换,所以我们再次对于全局导航的的存在规则做了修订,全局导航在二级系统界面同时也会出现。

系统闭环体验

系统闭环设计可以有效的减少玩家不断退离当前界面返回系统入口集中界面切换系统功能:

1卡牌详情界面增加系统功能入口,让玩家能更好的围绕着卡牌完成一系列成长功能;

/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.033.png

2对于如“升级”和“进化”的相连界面属于玩家成长行为中不断关联触发的,直接引入横向滑动手势。

/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.034.png/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.035.png

新手引导

所谓的新手引导其实包括几部分的工作内容:玩法介绍,操作教学,失败引导


动效设计

界面动效已经成为界面设计举足轻重的部分,对于产品品质的提升成效非常明显。由于卡牌游戏系统繁多,需要为各级别界面建立动效规则并赋予共用元素,从而实现编辑器效果复用降低前台调试时间成本。

1建立规则需要对界面进行切片

/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.036.png

2为每个元素赋予运动动作,

/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.037.png

3具体切换动效设计需要在时间轴上表达各元素触发次序,下图为“排行榜”和“队伍”之间的切换

/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.038.png

空白设计

该设计阶段还应该考虑当功能界面信息内容主要为动态信息的时,可能存在一部分时间为空的情况下,面对空白的界面带给玩家愉悦的同时也能对行为产生引导。

/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.039.png/common/getfile?fileurl=server2/doc/663f903e-69ad-48a9-b04b-ee3748c417ab.040.png


 

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引