从风格到量产 《全民精灵》UI设计实践
内容简介：
内容主要是总结这个项目UI相关环节遇到的问题，还有我是怎么解决的，哪些问题可以有更好的解决方案。以后如何优化和避免。
我在这个游戏中越过的4个坑
一、游戏风格定位问题
二、量产界面而产生的问题
三、分辨率问题
四、CocoStudioUI编辑器问题
一、游戏风格定位问题
全民精灵已经开发了1个半月后。美术和策划案都在概念阶段。同样，UI风格也在概念阶段。因为UI风格是紧紧围绕游戏美术风格的。随着项目定位和美术风格的定位的清晰，UI的风格也会越来越清晰。
项目组的风格定位：
早期定位：田园风格的经营游戏
中期定位：改游戏名：全民驯龙
希望游戏风格更中性，争取男性玩家和女性玩家之间寻找平衡点
最终定位：改游戏名：《全民精灵》，世界观不再局限在驯龙这个IP，而是扩展到一个架空世界观，让游戏的受众面更广。
解决方法建议：
新的美术风格扩展为架空世界背景，不再局限在驯龙这个IP上，时间跨度也不会局限于原始人或维京人时代。更偏向休闲战斗方向。因为这种定位，我在UI上使用了“弱主题化”的风格设计（”弱主题化”这个词是我自己造的，反向对应的是强主题化界面风格，比如暗黑界面风格，蒸汽朋克风格，水墨风格等等。在界面底板上不做太多具体装饰。力图简洁、交互清晰。）这种弱主题的化的设计，和软件应用界面风格的设计目的接近，就是最大限度让更多层面的用户不排斥游戏界面。因为我们的目标是上手Q/微信平台，面对的用户可能是很多从未玩过宠物经营类手游的男孩女孩，大叔大妈，老人小孩。既不偏向过重的卡通风格味道，也不偏向厚重的部落风格。这种去风格化的界面简化了主题的风格，简化了界面元素对用户使用体验的干扰。
二、量产界面而产生的问题
确定风格后经历过一次界面的量产。因为全民精灵是一款养成类的游戏。所以他的90%的玩法和交互行为都是在游戏界面上进行的。所以风格变化后也必须将前面版本的界面翻新一次。定位为架空世界观前，游戏基础功能已经做了很大部分。并且很少有重复的资源。
当时做完风格设计后，紧接着量产界面，包括我共四个同学过来支持新风格界面的翻新设计（coni，layla，xiaojian），并且要求在一周以内要完成之前1个月的UI工作量。听起来很完美。项目组很着急，但是却忽略了新风格很多地方还没完善，全民精灵没有特定的参照风格，而风格模板也是需要时间来完善的。所以在风格模板不完善时，4个同学在合作时都有自己对该风格的理解，自然风格也比较难控制。虽然当时都有把关，但是也非常消耗精力。我觉得新风格就像刚从蛋壳里出来的小孩，刚出来的时候它更需要一个妈妈，等成长的稍微稳定后再找4个老师。
解决方法建议：
应该在风格模板成熟完善后再进行量产。最终的结果：量产后虽然风格有偏差，但是每个小伙伴都是非常给力的。都是小问题，我们在后面的设计中，重新优化了部分的界面。
三、分辨率问题
在全民精灵最早的基础功能中，实际界面分辨率固定在960X640。不支持缩放和拉伸功能。界面交互是一个伪全屏的界面，所谓伪全屏就是不支持九宫拉伸，尽管第一版在交互和视觉都不是这样做，但是实际项目组为了快速迭代就没有处理这个问题。游戏的目标是在手游中的安卓和ios平台共同推出的，和所有的游戏一样。面对日新月异的安卓分辨率，不得不考虑分辨率的问题。因为有些界面很宽，有些界面很窄，这样界面在画面中必然会有上下空白。
解决方法建议：
由图可发现：
第一版采用全屏界面，在多分辨率下，只能通过填充黑色来处理。
第二版中，将其窗体化，解决了黑色填充的突兀，比例上，对应宽屏IPHONE5s中，显得上下没有空间。
第三版中，在版二的基础上整体界面缩小到92%，在这个尺寸下，如20号字体，被缩小后是18.5号字体，在手机屏幕上完全不影响。并且制定在更宽屏时，专门制定缩放比例。通过这个方法，既节省了UI拼接质量，又保证了产品进度。游戏代码也不受影响。
次的分辨率问题是游戏前期开发没有经验。分辨解决方案没有考虑进去。导致如果想使用一些高大上的实现方式，则返工量非常巨大，包括程序和UI的返工。用这个土方法解决问题也是无奈之举。但是也提供了一个思路。
希望在后续的产品中不会出现这种问题。
四、CocoStudioUI编辑器问题
拼UI的问题是所有游戏都会遇到的问题。到底该谁来拼？最早的UI是由策划同学来拼的。没错。万能的策划同学。3个策划同学平时忙完自己的工作额外时间还要拼UI。真的太辛苦了。闲聊的时候据说1小时写案子，剩余6个小时拼UI，最可怜的是还拼不好，他们不是美术，不会在乎那几个像素（甚至几十个像素）。也不关心字号和颜色。虽然有规范。对我们视觉设计师来说是完全不能忍。设计师都是多少有点强迫症的，讨伐之后。结果是UI来拼吧。
在UI拼接问题上，因为开发是迭代进行的，后面的版本会将前面版本的功能进行优化。有些会对交互方式，和界面结构进行优化。而这时候，会出现前台开发人员和UI设计师同时调整编辑器的情况。这就导致了UI冲突。必然会有一方的工作会被重置。原流程如下：
为了解决这个问题，我们改进流程。新的流程图如下：
解决方法建议：
改进流程后，只需要做新界面时需要UI来拼接，保证视觉稿和游戏实现效果一致。如果功能优化对原界面修改低于50的界面，则由前台来负责剩下的工作，好处是新界面有了保证，和前台的工作又不会重叠。优化后的拼接在美观上即使受影响，也只是小范围的不协调。