《全民飞机大战》敏捷交互流程

发表于2015-05-01
评论2 5.6k浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏美术行业精英群

167422913

任务简述



接手《全民飞机大战》(下文简称《飞机》)前,我刚结束《WEB华夏》页游项目的交互设计工作,具体时间应该是9月底提到电话通知,当时《飞机》项目前期工作已经开始半个月了,现在需要交互接入项目组;然后,我与项目的制作人进行了短暂的沟通,了解了项目大致情况;《飞机》项目当时最大问题就在于研发时间极其有限,只有两个来月,而在这两个月里,要完成一个相对品质较高才能上线的项目来说,这是一个很大的挑战。对于如此敏捷的开发,这在IEG都是个未曾有过的事情。所以,这两个多月过程,有太多太多想说的,但是篇幅有限,这里还是捡一些我认为有必要的说说吧。


前期工作

  在接到《飞机》项目的交互工作后,我立即与策划童鞋沟通了游戏的所有功能,包括也咨询了后期版本的功能策划方向,如此便对游戏有了一个大致了解;此时并没有开始工作,而是再与前端程序童鞋沟通了游戏引擎相关的细节,当然,我只是去了解引擎能支持到的最大程度是怎样的;以便于我思考的交互细节及方向;

  在以上工作完成后,我仍然没有开始设计;而是在思考一个问题,手机游戏的交互设计我需要注意些什么,毕竟之前所负责的项目基本全是PC端项目(在之前的公司有负责过一款轻量组手游),对手游的设计工作几乎可以为零;那么我应该从哪里下手呢?最先闪入我脑海中的便是横向对比市面上的同类游戏;当时对比过的游戏大部分都是类《雷电》游戏,以及类韩国《龙骑士》的游戏,玩法及功能相差太大,可参考的东西有限;在这时,我转变了思路,我想知道当时的手机屏幕分辩率的数据,为什么对这个数据如此需求呢,其实,这也是从多年的PC端设计工作中所遵循的一个原则:“当你在小分辨下做到最好时,在其他更大的分辨率下肯定游刃有余”。那么,第一步,我找到了截止当时的手机分辩率的数据,如下图:




IOS设备屏幕分辩率




安卓设备屏幕分辨率


根据这份数据,我找到项目组程序,与他们进行沟通确认相关事宜中,发现一个问题因为《飞机》有IOS版本,所以,导致了很多的调试及开发工作都需要在苹果机上进行,且当时以IOS版本支持标准分辨率是640*960;所以,基于此原因,我们放弃了更小的安卓平台800*480的分辨率;因为我们时间有限,那在有限的时间内,哪个方案更方便我们就选择哪一个;因此,分辨率的事情我们确定下来为640*960;

然后,我需要知道人们在大多数场景下,是如何手持手机的,也就是握持姿势;但在网络上并没有找到相关的数据;因此,我在某天中午及晚上下班后去公交站台、地铁、公园观察;如下图所示(由于去公园及公交站台时,并未想起拍照,所以只留存有地铁里的照片)



我发现,竖屏时,大部分的手机握持姿势是单手持握,少数会双手持握;因为《飞机》属于竖屏游戏,所以,我更多的观察是竖屏使用对象;

 

设计方向及模式

根据前期工作的调查结果,我确定了设计的方向,如下图所示:



我认为,既然竖屏时,单手持握的人更多,那么,我必需要考虑在符合人机工程的情况做更舒适的交互;以保证在单手握持的情况下能舒适的完成绝大数的操作,这便是设计目的之一;如上图所示,单手持握手机时,最舒适的操作区域是绿色外沿区域,相对来说屏幕右下角区域操作起来不是很舒适;所此处需要慎重考虑;因为我把右下角规划为开始游戏的入口,并且给予足够的控件空间,以避免相对太难受的交互体验;把强化宠物与战机放在符合人机工程范围内的右侧;设置(主界面)/返回(功能界面)放在屏幕左下角;如下图所示:



另外,毕竟《飞机》是一款上微信平台的游戏,那么,平台上现有游戏的一些交互必定给玩家造成一些交互行为习惯。所以,这些让玩家形成习惯的设计《飞机》也必须遵行,因为在同一平台上,让玩家去适应另类的,同类功能的交互行为是愚蠢的行为;

所以,主界面上对于金币钻石的购买我保持玩家的交互习惯;包括排行榜界面也放置在了首页;其他的次要功能便规划至排行榜上方;如下图所示;



确定了设计模式及方向后,那后面的各功能模块的设计便相对轻松且能保证统一了。比如宠物升级及进化功能,比如战机的升级功能,对于需要操作的区域及功能按钮都根据既定的设计模式进行设计,如下图所示:


 

动效

  大家都知道,合适动效能带给玩家更好的体验,在相关的一些书籍及分享文章中都有所阐述;在《飞机》制作完成后,我也在组内做了一期分享,并且,也用在了其他项目中,这是非常好的。这里也再作一点点说明,我们为什么会大量的使用动效;

  动效用在两个方向;

  第一,特效用于与程序之间的沟通;

  在设计PC端游戏交互时,我们提供给程序童鞋看的设计案,几乎全为静态设计图,配上大量的说明文字用于说明各功能的交互说明,或者是对于一个动态效果的说明;但其实对于程序童鞋来说,这是不太直接或者说方便理解的方式。但由于PC端游戏的开发周期相对较长,也提供了程序较多的时间,也没什么问题;但对于一个开发周期非常短的项目来说,提供动态演示Demo,比起看文字说明来说,这中间便能节约大量的沟通成本;于项目来讲是非常有必要的。

第二,特效用于提升交互体验;
适合的动效可以为产品锦上添花,简要的可以从以下几点说明;
流畅过渡:通过动效诠释界面元素的出现与消失,大小、位置、透明度的变化,用户与产品间的交互会更加流畅;

高效反馈:良好的反馈设计可以让用户更好的了解到操作的结果;

帮助引导:动效作为一种生动的表现形式,往往可以起到很好的帮助引导效果;

升华体验:拥有良好的可用性还不够,融入动效往往可以带来更加愉悦的体验;
基于以上几点,我们在《飞机》中大量的使用了动效,比如购买金币、钻石、体力的动效反馈;在点击购买数量后,由动效完成购买成功的反馈,如下图所示:


 


大家可以看到,在点击购买金币或者体力后,对应的金币/体力Icon会从点击的位置飞向总量位置,而总量位置的数值也在同步翻滚;并同时带来悦耳的音效;这样的动效反馈方式比弹出一个对话框告知玩家购买成功来得更加舒适;而由游戏时大量的这样的动效组成,便给玩家带来更愉悦的体验; 

 

执行 

  对于开发周期如此有限的项目,执行则显得极其重要。如何在限的资源配置下,做到更好;这是一个非常伤脑筋的问题;想必做交互的童鞋都深有体会,我们经常会有一个非常好的设计或者创意,但时常被程序一句开发成本高直接打回原型;剩下的便是痛不欲生……咳咳~~ 夸张了。。。

这里我说一个当时开发中的小故事;当时《飞机》的交互原型出来后(完整的可操作的动态Demo),交给程序,基本所有程序童鞋都告诉我,他们做不了。而在我看来,这应该不是那么严重的,如果真的什么动态都做不了的话,那么,整个给产品加分的设计都被废了吗?于是我把所有的程序找到一起,沟通了这个问题,结论就两点:第一是他们对动效根本就没有任何概念,并不像我们对动效的理解那么透。所以,他们可能做不到我想要的效果;第二,开发时间有限,决定了他们没有时间来做这个事情;

问题摆到这里,如何想办法解决呢?我仔细的思考后,让程序去做他不善的事情,确实吃力不讨好。那么我想,我是否可以偿试去使用他们的界面编辑器呢?这个想法跟程序表露后,他们那是举双手同意;于是,在花了一些时间把编辑器的大致功能了解完后,便配合程序负责编排动画。

现在游戏中大家所能看到的动效,除了特效部分,全由我负责搞定,这样带来最直接结果就是,界面还原更高了,动效更符合我所设计的;并且大大本缩减了开发成本;让程序做他们更善常的事情,他们也乐意之至,以至于开发过程我所需要各个交互需求都能按时高品质的完成;所以,相互理解,共同协作,是非常值得遵循的八字方针,呵呵。

剩下便是开发过程的版本跟进了。由于目前又接手另一个项目,所以,便有直接的对比。我认为可以与大家分享一下;《飞机》在开发阶段,平均每天的版本多达10个;这么多版本带来直接好处就是可以更加迅速的核对版本中功能实现;能更加紧密的跟进每一个版本中的问题;而现在所负责的项目,基本每天就一个版本,而且还是在凌晨出来。

当我们交互设计的工作完成后,剩下的工作几乎是跟进,版本,那么如何跟进呢?我是这样做的,收集每一个版本中的问题,列表追踪;如下图所示:



并且详细到具体的负责人。如此一来,每一个问题都了然于胸,有些问题解决可能需要长时间,但有了一个具体的跟踪表格。也不至于遗忘;

用这种方式跟踪解决版本问题,虽然可能不是最好的,但至少是很有用的。

 

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

游戏学院公众号二维码
腾讯游戏学院
微信公众号

提供更专业的游戏知识学习平台