开发学院图形图像心得技巧 视觉和交互设计实例:3D社区游戏QQ阳光牧场 阅读

视觉和交互设计实例:3D社区游戏QQ阳光牧场

 2011-07-01 21:17:10 来源:WEB开发网   
核心提示:QQ 阳光牧场,作为腾讯首款3D社区游戏,视觉和交互设计实例:3D社区游戏QQ阳光牧场,如今总算守得云开见月明,在 Android 平台发布后,阳光牧场3D 即将正式在 iOS 平台发布,也期待它能再创佳绩,即将登陆 iOS 平台, 在这欢乐的时刻

QQ 阳光牧场,作为腾讯首款3D社区游戏,如今总算守得云开见月明,在 Android 平台发布后,即将登陆 iOS 平台。  在这欢乐的时刻,要特别感谢一下参与项目的 CDC 无线组同学们。

阳光牧场想要传达的感受,单纯而直白:阳光,清新与快乐。

一份久违的宁静,清爽与快乐,也是忙碌在都市生活中一点小小的慰籍。

这是一块让玩家暂时远离喧嚣的净土。 这里有可爱的动物和宜人的旷野,这里飘溢着清新的阿尔卑斯田园气息。 不使用繁复奢华的画风,不使用密腻逼真的造型。朴实而简单,就像清晨的阳光一样煦, 让人见之挂起一丝清爽的笑。这就是 QQ 阳光牧场想要传达的感受。

Smurfs,Trade Nations,Zombie Farm,这些大获成功的牧场游戏都透露着一个核心: 游戏的核心,不仅是留于表面的特效Show,也不只是单纯的数字堆积带来的快感。一个好的游戏,必然会在某种程度上与用户内心的某处产生共鸣。阳光般的快乐,就是阳光牧场试图激起的共鸣。

QQ 阳光牧场的画风采用极简路线。

将现实中的景物,动物抽象画,保持少量细节,籍此稀释界面元素的细节密度,可以使界面更加透气,达成清爽,一目了然的目的。同时,布偶化,火柴盒化的动物与场景也增加了游戏“萌”的元素。

牧场的画风更多借鉴了小品类 2D 游戏轻快简洁的画风。 在这样的游戏中,简单并略带幽默感的走形,能给人带来更独特的体验。  平实简洁的画风也大大降低引擎在各平台上表现力的压力,同时也保证了产品实现效果与设定稿的高相似度。

阳光牧场的配色特点很明显。场景界面中,环境色明亮而鲜艳,使整个场景显现出阳光充足灿烂的特征,建筑物上则出现纯度,明度较低的色彩,凸显重量感和近距离感。  UI界面中背景部分纯度偏低,而信息载体的颜色鲜艳夺目,凸显了信息物体的重要性。  整个界面出现了大量的补色及接近补色的配色,跳跃的色彩感弥补了模型细节的补足,也带来了新鲜的视觉体验。

牧场游戏的信息量较多,结构相对复杂。

交互设计阶段,我们尝试了多套交互框架,并把原型导入手机,模拟真实的使用环境,测试操作流程的通畅性、界面布局的合理性。测试过程中,产品、视觉、开发都参与进来,全方位评估设计,敏捷调整。

上图中左侧是最初接手项目时由CP完成的 个人信息界面,右侧则是改版后的个人信息。可以看到针对小屏移动设备的特点,界面做了全屏,以及信息整合的处理。一方面直白的展现了对用户最有效的信息,一方面也简化了操作。

为了让内容的展示和主风格一样轻快简洁,在设计时,需要让重点更突出,次要的信息可放在更深一级页面展示。改版的喂食界面中,饲料选择就被安排到了三级页面,同时增加了重要的一键加满操作。

QQ农场属于浸入式游戏,即在全屏模式下能使玩家沉浸在游戏营造的气氛中。因此在设计时界面与游戏场景的糅合非常重要。

游戏不同于工具类软件,界面本身不单纯作为操作控件的载体,同时也作为场景的一个部分存在。让界面和场景融合在一起的最好的方法,就是从场景里取来材料搭建起界面了。 

动物才是这个游戏的“阳光”所在。  作为一个牧场游戏,场景只是一种装饰;而最重要的,是玩家每天照料的动物们。它们才是阳光牧场核心理念,快乐的载体。因此,如何去设定动物比起场景或 3D 特效更加重要。

在牧场项目的动物设计上,一方面对真实动物的体貌做抽象处理,另一方面则是把握“神情”,即这些动物为人锁熟知的性情特征(如绵羊的天然呆),而后者相对体貌更为重要。

在实现的过程中,有时会出现一些在设计初期未能预料到的状况。如何针对这些问题做出调整,甚至利用之达成一些特殊的亮点,iPad 版牧场仓库界面中的微创新点是一个不错的例子。

仓库里冒老鼠引发的打地鼠游戏:将这样的问题加如牧场内,解决了iPad版本仓库界面实现时空间过多的尴尬,同时可爱的猫咪和打地鼠游戏也成为了 iPad 版本中一个独特的萌点。

QQ 阳光牧场,在 Android 平台发布后,一举获得四星的好评,在同类产品中也相当的成功,在阳光牧场的论坛中,视觉和交互的设计部分受到了玩家的一致认可,可算是我们最受鼓舞的成果了。现在,阳光牧场3D 即将正式在 iOS 平台发布,也期待它能再创佳绩。  再次感谢所有参与项目的同学们所付出的辛勤努力。

Tags:视觉 交互 设计

编辑录入:coldstar [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
更多精彩
    赞助商链接

    热点阅读
      焦点图片
        最新推荐
          精彩阅读