接到梦幻城这个项目,内心其实是比较兴奋的,因为游戏的交互设计变化多样挑战大,自己一直想探索。但另一方面,初做游戏交互心里也有些紧张,摆在眼前的问题马上浮现: 1.游戏设计的交互与web交互有何区别,应该怎样进行? 2.各个环节应该拿出怎样的交付物呢? 第一反应是在网上查阅相关资料,看看别人是怎么做的。但是很遗憾的是,网上对游戏交互设计的资料很少,很多是点到为止,并没有哪个案例可供拿来研究的。 但问题总不会憋死人,何况事物万变不离其宗,揣着问题摸索着开干吧!(本文意在还原梦幻城游戏的交互设计过程,倾向于总结sns游戏的设计流程和产出物,不成熟之处还请同行多提建议。) 1.起步 小L:"恩,我想我已大体了解了项目的主要玩法和框架,可是对着密密麻麻的说明文档,每次都需要想半天才能清楚。" 小A:"我很想知道用户会看到的是哪些?" PM:"不知道我的产品方案大家都完全理解了没有?有没有哪些地方漏掉了?" 交互设计的第一步,自然是要与PM一起,对产品提出的功能和各种想法进行了解。在这个过程中,PM的主要努力会放在我们要有怎样的功能,以及为何要有这样的功能上面。此时最可能产生的问题是,游戏里功能复杂,即使对于某单一操作,会有各种各样的状态,一眼望去似有无限可能(如下面的图片),从哪里入手呢? 回顾一下人机界面设计的主要工作是,1.如何将界面信息明白无误地传达给用户 2.帮助用户更方便地进行正确操作 信息传达是主题,那么做为交互设计师,需要了解如何将信息可视化。信息可视化的第一步是信息结构化,结构化的前提是我们有怎样的信息。 再多的信息,也可以进行归类,在梦幻城的项目里,我划定了自己最关心的几个序列,分别是:操作(对自己、对别人)、房子状态、动画、界面框架。在这里,可以看到并没有按PM文档里的功能分,而选择了操作,是因为操作跟用户紧密相关,在设计界面时最需要关注。在对操作梳理的同时,因为每个操作可想到的流程比较简单,顺便也画了上去。(点击小图查看大图) 对信息一拆分,似乎在无边的项目文档里来回反复的过程不存在了,因为摆在自己面前的项目问题变得很清晰简单。 信息架构的过程让我们一开始就能把握整个界面的设计容量,结构化的结果是更清晰地从全局把握设计问题。 这个过程我又找PM仔细核实,是否符合他之前的想法,这个沟通确认的过程是很必要的。 将纷繁冗杂的信息拆解归类,复杂归为简单。 1.2 交互模式确定 流程确定了,但是需要抽离出其中共性的部分。这也就是我们之前说的交互规范,或者是总结的交互设计模式。在梦幻城里的模式很简单,对话框/错误信息提示/各种类型的tips等等,因为之前有过对搜狐博客和白社会交互规范定义的基础,所以基础元素上不会有大的偏差。自己也想游戏不需要像web设计那样的死板,所以出于探索尝试的心态,这里采取的是边做边定义的方法。 1.3界面布局是怎样的? 小V:"我想知道操作是怎样定义布局的?这样我就可以开始工作了。" 小L:"恩,我明白用户都有怎样的操作了,我很急切地想知道我们的游戏是什么样子了。" 这个过程,交互设计师实际上是抛出想法,然后大家讨论的过程。设计本身就是一个在矛盾中寻求平衡的过程,不论哪种方案都有利弊。拿出方案进行讨论再确定,在集体思维中会让这个结果显得更加完善。还好的是,在梦幻城项目中,这个过程似乎并没有花多长时间。 在设计过程中,针对界面布局及信息识别,界面设计的轻重缓急对比强调,信息相似性的表达等都是交互和视觉设计需要考虑的问题,以后专门写篇文章跟大家一起探讨。 1.4 出Demo 由于前几步在整体上进行了定义和梳理。很快,示意性Demo就出来了。不论高低保真,最重要是需要让大家感受到整个操作的过程,以便于及早发现问题。在这个过程中,可以省去一些细节。 工具当然是用的axure和PS,为了演示方便,对其中各操作做了些动态效果。 我的城市示意图 城市规划及公共设施示意图 在这时,产品玩法上进行了重新的调整。之前的方案,房子建成后,需要将其卖掉才能赚钱。这种玩法的破坏性太大,用户无法享受拥有漂亮城市的美好感受,讨论一度陷入僵局。但没多久,投资收租金和装扮的玩法理念,立即得到了所有人的认同。 你知道的,无论视觉交互还是产品设计师,就是要这样自己折磨自己。 还好的是,由于前期定义较清楚,即使玩法变了,整个交互模式上变化并不大。修改也相对更容易,经过1,2..n次的迭代,基本上设计方案才能成形。 简单总结一下交互设计的过程,将信息拆解、打散、定义规则再归类聚合,很简单不是么? Oops~设计过程进展还算顺利。慢着!这仅仅是刚刚开始,后面要做的还很多。进入项目开发阶段了,遇到新的问题:仅对于一个操作,可能有5种甚至10种可能,如何跟前端工程师进行合作呢?怎样的交付物能够将各种界面信息无误地传达给工程师利于开发?如何保证这个过程顺利的推进,而且效果能跟自己的预期相符呢?