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

文章描述:阳光般的快乐——QQ阳光牧场3D 设计分享.

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 平台发布,也期待它能再创佳绩。  再次感谢所有参与项目的同学们所付出的辛勤努力。

时间: 2025-01-20 17:04:46

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

网站交互设计实例:正确的引导赢得用户的忠诚

文章描述:网站交互设计实例:正确的引导赢得用户的忠诚. 网站上,用和主色调对比很强的颜色或质感很强的按钮吸引用户进行操作,从而促成交易,或浏览相关重要信息. 正确的引导,符合了人机工程原理,优化了用户体验,给用户以易用.互动性.从而使网站给用户留下了美好印象,用户倍感温暖,加大了第二次访问的可能性. 那么反之,不正确的引导--误导,会是一种什么情况.笔者上周曾去南京一趟,便在沪宁城际高铁常州站站台遇到了误导. 笔者是高铁5号车厢,可是在其旁边不远却有一个有明显的动车13号车厢,该标志很明显很清晰

产品交互设计实例:首都机场的点烟器

文章描述:产品交互设计实例:首都机场的点烟器. 首都机场的吸烟室里并不像其他机场那样放几个固定的打火机,而是点烟器,和车载点烟器基本是一样的:先按下加热,加热好后,它会自动弹起,拔出来,里面的电阻丝已经是红红的了,就可以点烟了.上图为车载点烟器,与首都机场的点烟器一样,加热过程中只是被按下去了,未显示进度,也未能形象的表现出"正在加热"的含义. 我走到点烟器的近前,按下,让它加热,然后等待,等了一会儿还不见动静,不知是仍在加热还是出了故障.吸烟室里很多人,感觉自己被别人看着,不会用这玩

QQ阳光牧场3D 设计分享

QQ 阳光牧场,作为腾讯首款3D社区游戏,如今总算守得云开见月明,在 Android 平台发布后,即将登陆 iOS 平台.&http://www.aliyun.com/zixun/aggregation/37954.html">nbsp; 在这欢乐的时刻,要特别感谢一下参与项目的 CDC 无线组同学们. 阳光牧场想要传达的感受,单纯而直白:阳光,清新与快乐. 一份久违的宁静,清爽与快乐,也是忙碌在都市生活中一点小小的慰籍. 这是一块让玩家暂时远离喧嚣的净土. 这里有17811.ht

移动交互设计实例:触摸屏手机输入交互设计

文章描述:触摸屏输入的交互设计. 触摸屏手机输入时会在界面绘制虚拟键盘,用于输入字符,可以使用在所有应用程序中.特别是在短信和邮箱等需要频繁输入文字时,其输入速度直接影响用户操作效率. 缺点 但是同样全键盘输入,触摸屏没有物理按键效率高,原因在于: 1.输入法需要定位手指的位置,比如双手操作电脑键盘时,左手食指中指定位在F键,右手中指定位在J键,而触摸屏无法像按键的凸点或者输入感觉定位,难以形成高效的盲打. 2.触摸屏本身点击没有物理按键精准,触摸屏点击目标区域没有真正点击到目标区域,偏向目标正

交互设计实例:手机界面中常用的导航方式

文章描述:手机界面常用导航设计分析. 所谓的交互设计,其实设计的就是人如何向机器发送指令,机器如何向人传达信息,一来一往是为交互.当要传达的信息量很少时,好办,就像Google的搜索框那样,往白底上一放就行了.但当等到信息是海量的.在一屏上难以全部呈现时,就需要有效地组织信息,将部分信息先隐藏起来,待到用户需要时再将用户引导到那里.在界面设计中,广义地来讲,从一组信息向另一组信息转移的的过程,就称之为导航. 明确了定义,我们就该知道,一个好的导航设计应该让用户明白: 现在在哪儿 以前去过哪儿 将

交互设计实例:网易邮箱极速3.5版本设计

网易邮箱极速3.5版本历时半年多时间终于与大家见面了. 极速3.5有哪些新特性: 整齐,简洁的首页,能够自适应屏幕的大小提供最佳的显示方式. 一体化侧栏设计,功能更加集中,查找使用更方便. 全新的图标设计,读信时信头信息可以最小化,让你获得更大的阅读空间. 我们做了些什么: 无数次的交互,视觉的讨论和用研的验证. 产出效果图,超过200张. 制定了1套"视觉设计规范",和1套"交互控件规范". 简略讲讲各阶段所做的一些事情: 用研阶段: 极速3.5用研主要做的工作有

视觉与交互设计:从iOS 7谈起

我喜欢iOS 7,但许多设计者不喜欢,先不说这个.我想说的是视觉设计与交互设计的分歧. 我们都同意视觉与交互珠联璧合才能带来真正卓越的产品.但如果二选一呢?你更喜欢视觉华丽而功能难用,还是视觉一般但有实际价值?没有人喜欢这个问题,人们不觉得自己需要做这样的选择,实际却是需要的.软件设计从来都是无止境的折中,而更好的交互总是胜过更好的图形设计.对于一款产品,人们更多是在使用,而不是挂起来欣赏. 讨厌iOS 7("丑陋的扁平化")的设计师过去也讨厌过iOS 6("丑陋的仿真效果&

交互设计实例:电商B2C优惠券选择需求

文章描述:B2C站购物流程中优惠券的交互设计优化方案. 我们在互联网上经常买东西,也会经常收到优惠券,最近有空做了一个小调研,在一个网站上,有30%的用户拥有超过10张的生效优惠券,但是,当我们使用优惠券的时候,我们发现一个问题,很多网站在购物结算页面只能显示10张优惠券,那么,如果多于10张优惠券后,我们怎么选择使用呢? 我模拟一个用户,当我去一家超市,我购买了很多或者单件商品后,我发现我包包里有N张优惠券,我开始纠结了,我该使用那张呢?于是,我开始翻包里的优惠券,看看哪张快过期了,哪张是我这

交互设计实例:触摸屏手机信息连接和翻页的设计

文章描述:触屏手机网站-炫版交互设计. 触屏手机网站和非触屏手机网站区别在于,前者使用手指点击注重点击体验, 而后者是使用手机物理按键注重选取规则,触屏手机屏幕增大,可以显示更多的内容,但内容密度不宜过大否则不便点击,一般人的食指点击的区域约为7*7 mm 拇指点击区域约为8*8 mm,各大门户也分别推出适应触屏手机的高端版本,下面将会从手机网站最常使用的二个交互功能来分析3G门户炫版和其他门户的区别. 手机网站常用交互功能之一"信息连接": 竖屏状态:(图1) (图1)可见 3G门户