如何快速高效地完成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遊戲無界