如何规范UI设计

资源制作标准设定建议

1.所有的UI资源全部采用PNG导出，因为无论使用PNG还是JPG，只要尺寸相同，资源量在引擎中都会是一样大，所以，可以大胆的采用PNG进行输出，以保留和实现更好的色彩效果。 2.设定好一个客户端的标准分辨率，这个需要提前约定好，这样方便美术同事制作图片，确定好大小，例如是19201080，还是1280720 3.提前确定是否要跨平台，因为如果要跨平台的话，那么不同设备就是之前讲的多分辨率适配就有用了，制作上就有区别了。 4.和美术人员确定非常大的图片尽可能采用九宫格。 5.会用作Sprite的UI元件尽量以最小尺寸切，对于大量的UI小元件，例如图标按钮等，尽量让美术人员以最小尺寸切。最小尺寸就是图片刚好包围下这个UI元件。因为在NGUI中，它会以UI元件在打包前的源文件尺寸作为控件的尺寸，这意味着，如果将一个明明只有100x100像素的图片放置在一张500x500的UI图片中的话，除了按钮图片部分，其他地方都透明掉，这样制作成图集之后，NGUI调用这个Sprite的时候，则它会被识别为500x500 6.对于用作texture的UI图片尽量保持长宽都为2的N次方，在Unity中，如果图片的长宽都不为2的N次方，那么将无法使用自带的压缩格式会导致资源量变大，而且加载和处理效率都会慢上许多。所以如果一个UI图片将会被当做texture来使用的话，尽量让美术人员将图片做成2的N次方. 7.和设计人员沟通一下，将UI原件尽量分类整理避免重复使用，一个游戏涉及太多的界面，各种UI元件特别多，但是，其实有大量的UI元件是重复的，所以我们需要和美术设计人员沟通，建议他们尽量将UI元件分类整理一下。这个可以节省很多开销和复用很多资源。

如何保证UI资源不失真呢？

在UI资源到入到引擎中的时候，可能有时候会遇上美术人员在PS中设计制作时的尺寸刚好，但是放到客户端上的时候就出现匹配不上的情况，这个首先需要保证就是项目中Game视窗的分辨率设置是我们之前统一好的分辨率，并且美术的同事也是按这个分辨率来进行制作的，这个时候如果是2D的UI，那么我们只需要点击控件的snap即可让UI控件的图片尺寸恢复到原始大小。如果是3DUI的话，那么我们点击了snap之后，还需要看一下UICamer的Filed of view的值是否是60，只有在60的时候控件的视觉大小会和资源文件的大小保持一致。

制作UI的结构应该怎么样来放置呢？

我们在制作UI的时候，会涉及大量的UI控件，它们每一个控件都是一个独立的GameObject.并且大家都知道其实我们的一个场景的UI内容及其复杂，做到后期的时候GameObject的结构更加的复杂，所以我们必须要有一个好的UI结构设计，以此来方便对UI体系进行修改、添加和维护。

那究竟我们的UI结构应该怎么样来制作呢？

1.尽量不要让UI作为Camera的子物体，因为UI和摄像机其实是有关系的，我们需要避免直接放到相机下面，这样可以避免由于3DUI导致的一些透视造成的BUG 2.整理ui，做节点来分类管理，据实际案例给大家说吧。这样可以便于管理和维护。 3.合理利用Panel和并且管理好深度，我们都知道其实界面上的显示次序都是根据深度来的，这个深度的话主要是指Panel的深度和每一个控件的深度，其中Panel的深度是优先的，只要是深度更大的Panel，它下面的所有子物体基本都是显示在更上层的，那么利用这个我们可以很轻松的处理一些层次错乱的问题，就是我们把对应的UI放到对应的Panel下面这样，就永远不会出现层级混乱的情况了。 4.合理命名，这个是所有的编程语言都会有要求和规范的，当然虽然我们Unity3D里面操作引擎，但是我们在对于物体的命名上面还是不能马虎，很多同学喜欢拼音，其实这个没有问题，但是只要项目组的同事都能明白就好，所以提前大家要有一个统一的规范，个人还是建议大家使用英文来命名，还是要避免一些，毕竟拼音的话没有音调，也是一个不好的习惯，努力的练习好英文吧，实在不行就查查字典。例如你做的是一个捕鱼的游戏，如果用拼音，buyu，你觉得是捕鱼？还是不育呢？ 5.合理的划分场景，这个也是我实际项目中遇到的问题，就是我制作了很多的图集，然后几乎前面的页面我只有一个scene，然后所有的UI都在这个scene上面通过隐藏和显示来进行处理的，包括页面跳转等等，但是这样的结果就是导致，图集全部加载到内存中，在PC上还好，在一些中低端的手机上面，加上一些背景的图片，会导致内存开销很大，卡顿现象很严重，其实大家完全可以划分一些场景，因为Untiy不同场景之间的切换时会清除掉之前的内存的，可以减轻内存负担。

预防UI事件监听的击穿

什么是UI事件的监听击穿呢？就是我们在游戏的视图中，有两个UI界面叠加在一起的时候，我们单击一个空白处，却触发了一个被覆盖在UI下层的UI界面中的点击事件，这个就是我们说的UI单击击穿了上层界面。我在Unity中给大家做一个演示。还有例如我们的3D模型也是可以点击的，那么恰好这个UI在物体上面那么我们也不希望我们点击UI的时候点击到后面的模型触发事件。

1.我们给上层的UI添加一个BoxCollider覆盖，进行遮挡，这样我们之前的按钮就会因为射线触发了碰撞就无法点击到下面的UI了。 2.使用EventMask，我们知道Unity的Camera有一个CullingMask来设定渲染的层，对于NGUI的时间监听核心组件UICamera来说，也有一个EventMask的设置，我们可以先将下层物体和上层物体设置为不同的层，单后在UICamera中设定这个摄像机只接收特定层的事件即可了。