如何快速高效地完成UI界面设计？这五种主要的解决方案你应该知道

本文首发“腾讯GWB游戏无界”
作者：W

在游戏制作时，UI界面设计是非常重要的工作，不仅仅是考虑排版布局、美术风格，还要考虑到玩家的交互行为。另外，采取哪种实现方案也是需要慎重考虑的，一个好方案让我们在保质保量的前提下，能快速高效地完成。笔者将为大家介绍业界常用的UI解决方案，并对它们做简单地分析对比。同时，也欢迎大家留言，分享你在UI设计时所积累的经验，或是遇到的困难，咱们共同成长进步。

一、UI方案选择时参考点有哪些

笔者自14年毕业参加工作以来，一直使用Unity引擎来开发各种项目，如儿童启蒙教育类绘本、大型3D网络海战、三消、视频VR以及NBA体育竞技等，大部分工作内容是与UI界面相关。使用过的UI系统插件包括Unity原始的GUI、第3方插件NGUI、Unity进阶版的UGUI以及第3方的UI编辑器FairyGUI。另外，经网上了解还有EZ GUI、IGUI等第3方插件，以及Unity近推出的高阶版UIToolkit。这些偏冷门的或者新出炉的，笔者暂没在公司项目中使用过。你知道的，公司项目对稳定性有较高的要求，不会一味地追求新技术。读者不用惊讶，有公司还在使用Unity 4.x或者5.x旧版本的呢，哈哈！

经前面介绍，这么多种实现方案，我们在实际项目中应该如何做选择呢？有木有最佳方案？通吃的那种？答案是否定的。每种方案都有其适用性，需要结合项目本身以及开发者自身情况综合来考量。那在选择方案时，有木有一些具体的参考点呢？这个是有的，笔者归结为以下2点：

1）可视化程度：Unity原始的UI系统，需要在运行时才能显示，这给我们搭建UI界面时带来很多不便。正因为此，许多像NGUI一样的高度可视化的插件陆续诞生。搭建UI界面时，只需将对应组件拖入场景即可显示和调整，达到所见即所得的目的。另外，像是否支持图文混排、虚拟列表等组件以及对策划美术是否友好等问题，也都可以归结为插件的可视化程度高不高的体现。

2）性能：DrawCall，每次CPU准备数据并通知GPU的过程。这个操作是比较好性能的，原则上我们是希望它越少越好的。影响它的因素：一方面表现为UI资源的管理方式，这主要与程序猿技术能力有关，知道啥时候加载，又啥时候卸载，什么类型资源共享，什么类型资源进行九宫格。另一方面表现为与UI系统本身的渲染原理相关，这是UI方案的“硬伤”，关于UI方案的硬伤，对于熟知该UI渲染原理的程序猿来说，他知道该怎么去做，一定程度“规避”产生太多DrawCall。嘻嘻，这很考验咱程序猿功底咯！如果UI方案本身这方面就做的很好，那岂不是更好，哈哈。

二、常用UI方案介绍

限于篇幅，我不能对这些UI方案深入展开，希望简短的介绍能讲清楚它们各自特点。至于具体怎么使用，我会附上官网或学习地址，那里通常配有技术文档、教程帮助上手。

2.1 Unity原始GUI

因性能和可视化方面都不足，自打好用的如NGUI等第3方插件问世后，Unity的原始GUI系统，基本不会用于游戏运行模式时的UI设计中；一般只是在编辑器工具扩展时使用。但现如今Unity又推出新的UIElement框架，可用于编辑器工具的扩展，原生GUI系统会越来越失宠，究其最终原因就是性能差且不好用。目前来看，原始GUI在编辑器工具扩展领域的地位应该不太可能迅速被UIElement取代，因为扩展工具时，原始GUI还是可以胜任的，且很多开发者应该已经习惯用它来编写工具和扩展。其实，程序猿也是有情怀的，哈哈！


2.2 NGUI

资源地址：

https://assetstore.unity.com/packages/tools/gui/ngui-next-gen-ui-2413#description

其特点如下：

图集：需要自己规划好后，手动打图集。

渲染原理：先根据Panel的Depth排序，Panel面板内部再根据Depth排序。将相同材质的Widget进行Mesh合并。

支持图文混排。

支持循环列表组件。


2.3 Unity进阶版UGUI

学习地址：

http://c.biancheng.net/view/2712.html

UGUI是在NGUI之后Unity官方推出的，一定程度上借鉴了NGUI的设计理念，在某些方面做了改进优化，如自适应、图集等。其特点如下：

图集：图集概念不重，会自动打包成图集。要注意的是，放在Resources文件夹下的贴图不会被打入图集；

渲染原理：根据Hierarchy的顺序来排序，越下面渲染在越顶层。Canvas与NGUI的UIPanel类似，每个Canvas将优化合并为1个Mesh或多个SubMesh；

不支持图文混排，需要自己实现；

不支持循环列表组件，需要自己实现；

有锚点，方便屏幕自适应。


2.4 FairyGUI

官网地址：

https://www.fairygui.com/download

它是独立的UI编辑器，且对美术、策划都友好。其特点如下：

目前主流的游戏开发引擎都支持；

渲染原理：没有采取Mesh合并的策略，而是基于类似于Unity的Dynamic Batching技术，对DrawCall进行优化。它在不改变显示效果的前提下，尽可能的把相同材质的物体调整到连续的RenderingOrder值上，以促使它们能够被Unity DynamicBatching优化；

支持图文混排；

支持虚拟列表，即使数量巨大的列表也不会感觉太卡顿。



2.5 其他方案

因为笔者未在实际项目中使用过，所以这里不做评述了，读者可以根据贴出的链接跳转过去瞅一瞅哈！

1）Unity高阶版UIToolkit

学习地址：

https://docs.unity3d.com/cn/2020.1/Manual/UIElements.html

是Unity新推出的新一代UI系统，既支持游戏编辑模式也支持运行时模式。但目前还不够完善。读者可以尝尝鲜，试用一下。


2）EZGUI

资源地址：

https://assetstore.unity.com/packages/tools/ez-gui-32

【注：官方资源下架 已购买可以继续使用】


3）IGUI

资源地址：

https://assetstore.unity.com/packages/tools/gui/igui-basic-1946

【注：官方资源下架 已购买可以继续使用】


结语

本篇主要介绍了Unity项目比较流行的UI解决方案，笔者在这里只是做一个汇总概述，并没有去深究。至于读者该如何选择，仁者见仁，智者见智。一句话总结：没有最好的，只有最适合的！

参考资料
1、Unity官网：https://unity.cn/
2、Siki学院：
http://www.sikiedu.com/course/explore/unity?subCategory=&selectedthirdLevelCategory=&filter%5Btype%5D=all&filter%5Bprice%5D=all&filter%5BcurrentLevelId%5D=all&orderBy=hotSeq&from_flag=baidu_unity


来源：腾讯GWB游戏无界