从风格到量产 《全民精灵》UI设计实践

发表于2015-05-03
评论0 5.3k浏览

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

167422913

内容简介:

     内容主要是总结这个项目UI相关环节遇到的问题,还有我是怎么解决的,哪些问题可以有更好的解决方案。以后如何优化和避免。

我在这个游戏中越过的4个坑

一、游戏风格定位问题

二、量产界面而产生的问题                                    

三、分辨率问题

四、CocoStudioUI编辑器问题

 

一、游戏风格定位问题

     全民精灵已经开发了1个半月后。美术和策划案都在概念阶段。同样,UI风格也在概念阶段。因为UI风格是紧紧围绕游戏美术风格的。随着项目定位和美术风格的定位的清晰,UI的风格也会越来越清晰。

项目组的风格定位:

http://km.oa.com/files/post_photo/307/213307/62be1606185752a7070143a4a7816b6f.png

早期定位:田园风格的经营游戏

http://top.oa.com/pictures/201409/1409719715_15.png 

中期定位:改游戏名:全民驯龙

希望游戏风格更中性,争取男性玩家和女性玩家之间寻找平衡点
http://top.oa.com/pictures/201409/1409719769_87.png 

最终定位:改游戏名:《全民精灵》,世界观不再局限在驯龙这个IP,而是扩展到一个架空世界观,让游戏的受众面更广。
http://top.oa.com/pictures/201409/1409719805_34.png 

    

解决方法建议:

新的美术风格扩展为架空世界背景,不再局限在驯龙这个IP上,时间跨度也不会局限于原始人或维京人时代。更偏向休闲战斗方向。因为这种定位,我在UI上使用了“弱主题化”的风格设计”弱主题这个词是我自己造的,反向对应的是强主题化界面风格,比如暗黑界面风格,蒸汽朋克风格,水墨风格等等。在界面底板上不做太多具体装饰。力图简洁、交互清晰。)这种弱主题的化的设计,和软件应用界面风格的设计目的接近,就是最大限度让更多层面的用户不排斥游戏界面。因为我们的目标是上手Q/微信平台,面对的用户可能是很多从未玩过宠物经营类手游的男孩女孩,大叔大妈,老人小孩。既不偏向过重的卡通风格味道,也不偏向厚重的部落风格。这种去风格化的界面简化了主题的风格,简化了界面元素对用户使用体验的干扰。

 

二、量产界面而产生的问题

     确定风格后经历过一次界面的量产。因为全民精灵是一款养成类的游戏。所以他的90%的玩法和交互行为都是在游戏界面上进行的。所以风格变化后也必须将前面版本的界面翻新一次。定位为架空世界观前,游戏基础功能已经做了很大部分。并且很少有重复的资源。

当时做完风格设计后,紧接着量产界面,包括我共四个同学过来支持新风格界面的翻新设计(conilaylaxiaojian),并且要求在一周以内要完成之前1个月的UI工作量。听起来很完美。项目组很着急,但是却忽略了新风格很多地方还没完善,全民精灵没有特定的参照风格,而风格模板也是需要时间来完善的。所以在风格模板不完善时,4个同学在合作时都有自己对该风格的理解,自然风格也比较难控制。虽然当时都有把关,但是也非常消耗精力。我觉得新风格就像刚从蛋壳里出来的小孩,刚出来的时候它更需要一个妈妈,等成长的稍微稳定后再找4个老师。
http://top.oa.com/pictures/201409/1409720263_38.png 

 

解决方法建议:        

     应该在风格模板成熟完善后再进行量产。最终的结果:量产后虽然风格有偏差,但是每个小伙伴都是非常给力的。都是小问题,我们在后面的设计中,重新优化了部分的界面。

 

三、分辨率问题

   在全民精灵最早的基础功能中,实际界面分辨率固定在960X640。不支持缩放和拉伸功能。界面交互是一个伪全屏的界面,所谓伪全屏就是不支持九宫拉伸,尽管第一版在交互和视觉都不是这样做,但是实际项目组为了快速迭代就没有处理这个问题。游戏的目标是在手游中的安卓和ios平台共同推出的,和所有的游戏一样。面对日新月异的安卓分辨率,不得不考虑分辨率的问题。因为有些界面很宽,有些界面很窄,这样界面在画面中必然会有上下空白。

http://top.oa.com/pictures/201409/1409720322_3.png 

解决方法建议:

由图可发现:

第一版采用全屏界面,在多分辨率下,只能通过填充黑色来处理。

第二版中,将其窗体化,解决了黑色填充的突兀,比例上,对应宽屏IPHONE5s中,显得上下没有空间。

第三版中,在版二的基础上整体界面缩小到92%,在这个尺寸下,如20号字体,被缩小后是18.5号字体,在手机屏幕上完全不影响。并且制定在更宽屏时,专门制定缩放比例。通过这个方法,既节省了UI拼接质量,又保证了产品进度。游戏代码也不受影响

次的分辨率问题是游戏前期开发没有经验。分辨解决方案没有考虑进去。导致如果想使用一些高大上的实现方式,则返工量非常巨大,包括程序和UI的返工。用这个土方法解决问题也是无奈之举。但是也提供了一个思路。

希望在后续的产品中不会出现这种问题。

 

四、CocoStudioUI编辑器问题

     拼UI的问题是所有游戏都会遇到的问题。到底该谁来拼?最早的UI是由策划同学来拼的。没错。万能的策划同学。3个策划同学平时忙完自己的工作额外时间还要拼UI。真的太辛苦了。闲聊的时候据说1小时写案子,剩余6个小时拼UI,最可怜的是还拼不好,他们不是美术,不会在乎那几个像素(甚至几十个像素)。也不关心字号和颜色。虽然有规范。对我们视觉设计师来说是完全不能忍。设计师都是多少有点强迫症的,讨伐之后。结果是UI来拼吧。

 

 

在UI拼接问题上,因为开发是迭代进行的,后面的版本会将前面版本的功能进行优化。有些会对交互方式,和界面结构进行优化。而这时候,会出现前台开发人员和UI设计师同时调整编辑器的情况。这就导致了UI冲突。必然会有一方的工作会被重置。原流程如下:

http://avocado.oa.com/fconv/files/201409/b53bd0ea7c0011d3595530d0dc7ad89a.files/image007.png

 

 

 

 

 

为了解决这个问题,我们改进流程。新的流程图如下:

http://avocado.oa.com/fconv/files/201409/b53bd0ea7c0011d3595530d0dc7ad89a.files/image008.png

 

解决方法建议:

改进流程后,只需要做新界面时需要UI来拼接,保证视觉稿和游戏实现效果一致。如果功能优化对原界面修改低于50的界面,则由前台来负责剩下的工作,好处是新界面有了保证,和前台的工作又不会重叠。优化后的拼接在美观上即使受影响,也只是小范围的不协调。

 

 

长按二维码收听Gad微信平台

国内业界首家专业独立游戏开发者平台Gad(http://gad.qq.com/)正式上线运营。Gad面向游戏从业者,打造开放、互联、回馈、分享的专业游戏人社区,提供免费组件下载、专业知识学习、组队游戏制作、项目孵化渠道等服务。平台沉淀了腾讯游戏近十年游戏策划、美术、程序、运营经验,通过组件工具开源、专业技能培训、经验案例分享帮助游戏初学者快速掌握游戏制作技能,帮助有经验者提升开发能力和效率,回馈并促进行业发展。同时通过用户组队创作游戏孵化高潜力、高价值项目,打造良好的开发生态圈。

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

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

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