游戏开发论坛

 找回密码
 立即注册
搜索
查看: 7858|回复: 1

《欢乐西游》交互设计进化论

[复制链接]

1万

主题

1万

帖子

3万

积分

论坛元老

Rank: 8Rank: 8

积分
36572
发表于 2015-6-16 17:18:46 | 显示全部楼层 |阅读模式
sy_47953761749.jpg

  文 / monqiu

  UI概念设计阶段

  方案一 竖版(方案节选)

1.jpg

2.jpg

  系统结构

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

3.jpg

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

4.jpg

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

  导航设计

5.jpg

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

  方案二 横版(方案节选)

6.jpg

  系统结构

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

  界面场景化

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

  导航设计

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

7.jpg

  UI概念设计修订阶段

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

8.jpg

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

9.jpg

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

10.jpg

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

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

  UI设计阶段

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

11.jpg

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

12.jpg

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

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

13.jpg

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

14.jpg

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

15.jpg

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

16.jpg

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

  UI设计优化阶段

17.jpg

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

  导航再优化

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

  系统闭环体验

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

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

18.jpg

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

19.jpg

  新手引导

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

  动效设计

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

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

20.jpg

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

21.jpg

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

22.jpg

  空白设计

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

23.jpg

声明:游资网登载此文仅代表作者观点,不代表本站立场

0

主题

23

帖子

153

积分

注册会员

Rank: 2

积分
153
发表于 2015-6-24 16:47:28 | 显示全部楼层
好东西要赞一个!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

作品发布|文章投稿|广告合作|关于本站|游戏开发论坛 ( 闽ICP备17032699号-3 )

GMT+8, 2024-11-25 16:01

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表