背景和目的

　　本文的背景是《独立防线》（Killer）项目已进行到了一定阶段。虽然之前定下了UI制作规范，但中途也更新了规范，但程序和美术没有具体面对面沟通，也没有阐述规范的原因和落地方法。

　　所以，本文目的是为UI美术同事介绍：1.手游性能相关的标准是什么；2.具体制作时需要注意什么；3.什么样的UI流程是高效的。

　　注，以下内容并非要求UI美术同学都掌握、或者要求UI美术单独去处理。而是希望UI美术同学能知道有这些一回事需要考虑。最重要的是：在设计之初，能意识到可能有问题，需要找程序去沟通。

　　体验和性能

　　极端的体验和极端的性能都不现实。



极端的体验


极端的性能（从2015年的标准来看）

　　在手游平台上，我们应该追求的是体验和性能平衡。

更多精彩图片 请登录

体验和性能的平衡

　　性能评估标准

　　游戏中，任一元素（UI图片、特效、模型等）对性能的影响都可以拆分为以下4种影响：CPU消耗、GPU消耗、外存消耗和内存消耗。

　　现就UI相关的影响进行举例如下。

　　CPU消耗

　　CPU负责把UI界面的逻辑结构进行更新、汇总，并负责把这些数据准备好。最后把这些信息传给GPU。

　　UI一般影响CPU的因素包括：

　　界面结构复杂度

　　界面结构变化频率

　　动画复杂度

更多精彩图片 请登录

复杂的界面结构

　　GPU消耗

　　GPU负责最终画面的绘制、渲染。因为渲染是复杂的流程、且运算量巨大、且手机GPU固有的硬件限制（核心数少、浮点运算速度慢），手游的性能瓶颈往往都发生在GPU。

　　也就是说，GPU消耗是性能优化的重中之重。

　　UI一般影响GPU的因素包括：

　　绘制次数（drawcall），和单张图片的数量等因素相关

　　图片最终在屏幕所展现的面积

　　图片是否透明

　　shader的复杂度

　　重绘度（overrdraw，单位像素的重新绘制次数）

　　其中，特别值得注意的是drawcall和重绘复杂度。

　　drawcall

　　每一个不同“材质”的东西都需要占用一个drawcall。每多一个drawcall必然带来额外的CPU消耗和GPU消耗。

更多精彩图片 请登录

UI界面的drawcall次数为125次

　　可以简单认为，当两个东西的材质的shader相同，且纹理相同，则它们是同一个材质，在渲染它们的时候，引擎会进行优化，会合并drawcall为1个。

　　overdraw

更多精彩图片 请登录

overdraw健康的UI界面

更多精彩图片 请登录

overdraw不健康的UI界面

　　overdraw表示单位像素的重新绘制次数。

　　右部表示overdraw的程度，越“亮”的区域表示overdraw的程度越高，也就越消耗GPU。

　　外存消耗

　　外存消耗指的是资源在用户“硬盘里占用了多少多少M”。

　　如果外存过大，可能导致用户不愿意下载，或者下载安装后，硬盘空间不够，安装不成功。

　　一般影响外存的因素包括：

　　图片数目

　　图片的分辨率大小

　　图片是否压缩

　　另外，优化了外存，内存往往也会从中受益。

　　内存消耗

　　内存消耗指的是“游戏在实际运行时，占用多少M”。

　　如果内存过大，可能会导致用户游戏体验不流畅，甚至crash。

　　一般影响内存的因素包括：

　　图片数目

　　图片的分辨率大小

　　图片的分辨率是否是2的N次方，

　　图片是否压缩

　　UI制作要点

　　UI输出的图片，可在Unity里设置为新的等比缩放分辨率。

　　正因如此，UI美术同学在输出UI贴图时，一般情况下按美术示意图的原分辨率输出即可。

更多精彩图片 请登录

输出图原本的分辨率为788x488

更多精彩图片 请登录

想要成大触，天天上元素！

{:1_144:}  感谢科普！

学到了些。

资源甚好，发帖艰辛，且阅且珍惜！

此帖必火！鉴定完毕！

想要成大触，天天上元素！

说的挺好的~做美术同时也要兼顾到性能才是好美术

想要成大触，天天上元素！

给力~马上下载

元素帖子强，满满正能量！

立刻提起了精神。

资源发布哪家强？元素首发称大王！

{:1_146:}

楼主这么屌，你家里人知道啊吗？

师傅求带！

楼主还有吗？再来点！谢谢分享！！

带你赚币带你飞，元素里面有正妹！

不错 学习了 哈哈

立刻提起了精神。