關於遊戲 UI 設計的中西討論

indienova 有話說

indienova 老朋友們應該對於董晶暉有所了解，作為 Sledgehammer Games, Activision 的 Associate UI Engineer，董晶暉參與了 CoD:WWII 的大量 UI 程序工作，在 UI 方面積累了不少經驗，因此也非常關注國內 UI 的發展，對此我們曾有過簡短的討論。恰逢師維《遊戲 UI 設計：修鍊之道》出版，我很欣喜地向景暉介紹了這本書，他也很有興趣，在閱讀書稿之後，景暉與師維針對本書內容與遊戲 UI 設計進行了討論，在此為大家做一分享。

討論

Hi 師維, 很高興能第一時間讀到這本書籍，在此感謝！

關於這本書的內容，我大致有以下幾點聯想：

1. 設計初期的區別

從書中的內容，我了解到國內很多遊戲項目，會在項目初期進行大量的市場調研，並同時研究其他相同類型產品的設計。

這一點在國內的商業遊戲領域確實是一種現象，這多少與國內研發環境有一定關係。比如大廠中有時候同一個品類的產品，會出現多個工作室競爭。我所在的公司的創新項目和一些獨立遊戲團隊與國外有相同的地方。

而在接觸國外的項目過程中，我發現國外的團隊更多地是把 UI 設計和遊戲設計等同。UI 核心理念的確定，是先從遊戲體驗的核心目標觸發，再逐漸細化。這個過程中，我們會參考其他同等類型遊戲的設計。

比較好的兩個例子是：《爐石》和《死亡空間》（GDC 講座分別是：Crafting Destruction: The Evolution of the Dead Space User Interface 和 Hearthstone: How to create an immersive user interface）

這方面暴雪始終是我們學習的榜樣！希望國內更多的項目回歸遊戲的本質。

另外非常感謝視頻分享，這是兩個超級棒的遊戲並且在 UI 方面也是時代引領者的地位，是值得我們不斷學習的。

2. 多方向人員的參與

因為我自身是 UI 程序，因此對於多方向人員參與感受比較深刻。相比於 UI 團隊和前端人員合作，將程序直接納入 UI 團隊，無疑能增加團隊合作的緊密度。同時，UI 程序需要具備基本的 UI/UX 設計知識以及基本 UI 審美。這能增強產出價值。

這一點真的非常棒！國內互聯網的 UED 團隊不少也採取這種方式，有了解到可以在很多方面提升用戶體驗，甚至做開發預研。而遊戲公司還沒有聽到這樣的工作方式，很多小型團隊甚至連 UI 設計師都是很稀缺的。

在我個人看來，UI 方面的程序實現具有自己的特點。另外，UI 方面的 bug 也會比較繁瑣且困難。如果沒有專門的技術團隊去開發和維護，很難保證 UI 的品質。

這一點非常贊同！在國內很多時候 UI 設計師的設計工作完成後，需要不斷在遊戲內查看效果還原度，找到各種體驗方面的 bug，整理成文檔發給程序，甚至有的設計師就搬到程序座位旁邊直到版本完成。

而面對具有高度審美的程序人員，這一切就是非常簡單和高效的了。我想根據不同的公司情況出發，但是設計師懂些開發原理，程序員懂得審美基礎都是非常必要的。

除此之外，多方向人員的參與，能保證 UI 設計在初期階段就能儘可能多地驗證可行性。

以《爐石》的開發流程為例，他們的流程大致如下：

1. UI + Design + Programming ( 手繪 mock up ）
2. UI + Design + 2D
3. UI + 2D + 3D
4. UI + 2D + 3D + Programming
5. UI + 2D + 3D + Tech art + Programming

當然，每個團隊的流程都有自己的特點，我們不可能一一照搬。團隊合作流程的敲定以及不同職位角色的確定，前提應該是對 UI/UX 需求的明確化，以及遊戲項目對於 UI/UX 有一個比較明確的定位。這需要團隊的磨合以及項目開發經驗的積累。

非常贊同！還是回到前面您說過的，先從遊戲體驗的核心目標出發，看怎樣的設計理念和人員配置更符合實際情況。每家公司甚至每個團隊都會有自己不同的風格，設計師是其中一個環節還是貫穿整個流程，還需要團隊的磨合以及經驗的積累。

3. 聯想到的書籍

閱讀過程中，我非常喜歡下列關於界面布局的知識：

「Fatts Law 菲茨定律 大而近的目標用戶更容易達到，小而遠的目標更容易消耗時間。頻繁眼動時，向下看優於向上看。所以頻繁操作的部分放在屏幕下方，重要信息但低頻操作的部分放在上方。「

這讓我聯想到書籍《點線面》 。該書對於抽象視覺元素有著非常獨到的分析。我還推薦《超越平凡的平面設計》。我非常喜歡書中關於文字的分析和字體的設計。

非常感謝您！都是非常棒的設計書籍！

點線面是設計的基礎，至關重要，大師也曾在《藝術中的精神》中將黑色喻為死，白色為生，水平線代表承載，垂直線代表生長……這些都是存在於人類潛意識中的，設計師用設計說話的基礎認知。

《超越平凡的平面設計》也是非常棒！通過通俗易懂的演示和循環漸進的方法幫助設計師訓練對藝術的直覺。 之所以在書的第二章基礎知識中，簡略提到版式設計這些知識，就是希望設計師能夠飲水思源，遊戲 UI 需要從各個領域吸收養分，很多決策都是根據多種領域經驗結合實際場景來進行設計的。

另外，我還有幾個問題想請教一下，還望能得到你的解答：

電影中的 FUI，尤其是科幻電影中的很多 UI 設計，它們的流程和設計方式，和遊戲 UI 的設計方式相比，有什麼值得借鑒的地方嗎？

因為我個人沒有參與過影視中的 FUI 設計，只能從以往了解到的信息來做猜測。

一次 Create Change 概念設計論壇中 Nathan Fowkes 老師分享過好萊塢的影視製作流程，在劇本確定後，場景、故事、動畫和建模等方面都是需要先從草圖和低模階段開始，在這幾方面進展到尾聲階段前，開始進行動效、遮景、光線和調和方面的工作。

概念藝術家 Tyler West 有說過他認為工業設計理念可以貫穿整個設計過程，即使是電影娛樂中也要符合人的認知，這樣才能被認為更真實。在做設計之前要先了解來龍去脈，設計過程就是在各種限制下解決問題，好的設計能夠可持續迭代和歷久彌新。

電影《鋼鐵俠》的 FUI 設計師有在網站分享團隊的設計過程，首先紙上畫概念草圖，也是同樣需要考慮不同的使用狀態，如常用模式、戰鬥模式、破損耗盡模式以及它們的不同的動態效果。然後在 AI 中做更加標準和精細的刻畫，最後在 C4D 中實現動畫。

以上這些工作方法來看都是相通的，多考慮故事背景，主要驅動是什麼？表現重點是什麼？否則設計再好也不一定適合。前期需要把細節始終都是非常重要的，但是不要在過早就陷入到細節之中。

是否有什麼有效的開發方式，能保證 UI 風格在開發過程中的整體性？隨著遊戲體量的增大以及遊戲版本的迭代，我發現如何保證 UI 風格的整體性是一件非常困難的事情。我們要考慮和遊戲本身風格的融合，同時還要考慮後期增添的組件風格要契合當前的美術風格。相比於開發後期再重新調整藝術風格和布局的成本，如果能有方法儘可能確保藝術風格的統一，無疑會節省大量的成本。

隨著遊戲體量的增大以及遊戲版本的迭代， UI 風格的整體性始終是個難題。因為原因是多方面的，首先遊戲體量的增大，會出現更多的玩法，策劃總會想出不可思議的點子，而我們需要保證新加入的元素一致性的情況下又不至於顯得單調；另一方面團隊成員的加入離開和版本的迭代，人們總是希望 UI 提供給項目新鮮的視覺感受。而他們通常認為 UI 的內容只有屏幕常見的內容，所以不能理解換風格帶來的工作量是怎樣的，也只有在頻繁出現兩種風格 UI 切換的時候才能感受到那種衝突的感覺。

這一點我特別喜歡《輻射》的做法，幾代內容都能保持延續下來。寫實、扁平、漫畫、場景式多種表現手法，你中有我我中有你，並且出現在合適的時間，感覺既豐富又統一的感覺。這應該是不斷換 UI 風格的項目永遠不能達到的高度吧。

我們工作的項目，UI 通常在前期確定風格指南，儘可能將設計內容寫的更加詳細。並且為後去的玩法和運營類系統也提供一些設計標準。這樣臨時調配到項目的設計師也能很快上手，如果需要重新設計也會根據其使用相同的配色、質感和圖形節奏。而給程序的另一份文檔標註著字體配色、常用通用控制項在伺服器的位置，這樣減少一部分溝通成本。

你最喜歡哪些遊戲的 UI 設計？能在此分享一下嗎？

暴雪的遊戲 UI 都超級喜歡：），另外主機遊戲的也有好多，《輻射》、《怪物獵人》、《死亡空間》、《光環》等等，這些都是值得不斷研究和學習的 w

不得不說，《遊戲 UI 設計：修鍊之路》涵蓋了 UI 設計中的太多內容。每一點拿出來都可以再出一本書。非常感謝你為我們帶來了這樣一本書籍，我相信會有越來越多的人在這本書的指導和啟發之下，加入遊戲 UI 設計的行列。同時，我們也將會看見更多的遊戲 UI 書籍。

寫書過程中深刻體會到，遊戲類型和風格、不同遊戲公司也有各自不同的經驗。自己的能力和視野有限，不能夠在一本書的章節中表述完整，只希望能夠梳理脈絡和拋磚引玉，讓越來越多的人了解遊戲 UI。 我也是非常期待能夠看到更多國內外關於遊戲 UI 的書籍，也非常感激有機會與您交流學習！

推薦閱讀：