天天和遊戲打交道，到底什麼是遊戲UI？

大家平時所說的UI，就是“User Interface ”的簡稱，指對軟件的人機交互、操作邏輯、界麵美觀的整體設計。

那今天我們要聊的遊戲UI所指的自然就是遊戲的用戶界麵設計了，遊戲界麵設計是根據遊戲特性，把必要的信息展現在遊戲主界麵、操控界麵和彈出界麵上，通過合理的設計，引導用戶進行簡單的人機交互操作。

簡單來講，遊戲中除了遊戲畫麵外的內容都屬於遊戲UI的範疇。

比如，進入遊戲時會有遊戲登錄界麵——

▲《王者榮耀》界麵

登陸之後來到遊戲的主界麵——

 ▲《王者榮耀》界麵

可以看到，遊戲主界麵上一般會有角色立繪，界麵的四周排列遊戲的主要功能和其他元素。

而點擊主界麵上的功能圖標，就會進入到相應的二級界麵——

▲《王者榮耀》界麵

遊戲開始後，就是遊戲操作界麵——

▲《王者榮耀》界麵

一款好遊戲，優秀的遊戲UI設計功不可沒。接下來，星仔將圍繞遊戲UI設計的流程、遊戲UI設計的原則、遊戲UI的風格、學習遊戲UI的兩大方向這4個方麵和大家聊一聊。

遊戲UI設計流程

遊戲界麵一般是策劃把係統設計完成後，呈現的視覺交互模型，大致有這樣五個流程。

★核心設計：根據玩家需求確定界麵設計方向，界麵規範確保界麵穩定產出。

★結構設計：界麵劃分區域來影響信息秩序的感知。

★信息設計：界麵信息的分類、排布、優化與反饋。

★體驗設計：操作負擔、便捷度與容錯率。

★表現設計：主題表達、個性化、美觀度與溝通。

遊戲UI設計原則

一般來講，遊戲UI設計需要注意以下幾個方麵：

1.視覺流的引導

視覺流，就是我們在查看單個界麵時的視覺流程。暫且先不考慮手勢的熱區範圍，單從眼動軌跡來看，眼睛對於物體的關注本身是有一定的視覺規律的，比如最簡單的從上到下、從左到右的規律。

但眼睛的視覺流是可以通過對界麵控件合理的層級羅列、恰當的布局來進行有效引導的。

舉個例子，《萬象物語》的主界麵除了把按鈕擺放在四周外，還專門把旅途按鈕擺到了右側中間位置，並加了閃動的特效。玩家的眼睛會不自覺的被吸引到這個特殊的按鈕上，並會忍不住想點擊，這樣就可以達到把玩家拉到遊戲功能的目的。

▲《萬象物語》界麵

2.界麵簡潔，方便操作

遊戲界麵要簡潔美觀，避免雜亂，這樣更便於玩家操作，減少使用上的錯誤。

這裏可以看一下《原神》的處理，界麵中大部分功能都收納進二級菜單，在界麵布局上更簡潔美觀，給人更清爽的感覺。

▲《原神》界麵

3.色彩偏向和色彩層次

界麵設計中都有一個色彩的偏向，也就是主色調。畫麵中的色彩不宜過多，不同色係最好不要超過3種。

同時，色彩偏向還可以調動玩家的情緒。比如，黑色可以營造詭異、恐怖的氛圍，生存恐怖類遊戲《生化危機》係列就是這種基調。

▲《生化危機7》界麵

而色彩層次則可以對界麵中的功能模塊進行劃分。還是拿《王者榮耀》的主界麵來說，界麵主色調是灰度很高的藍色，輔助色是黃色，從色相上對功能模塊做出了劃分，並且可點擊區域的顏色有很高的亮度，這樣的設計讓玩家很容易識別功能。

▲《王者榮耀》界麵

4.風格統一性

界麵設計的風格、結構要與遊戲的主題和內容保持一致，優秀的遊戲界麵設計大都具備這個特點。

舉個例子，《全麵戰爭：三國》這款中國題材戰爭遊戲在UI設計上下足了功夫，滿屏的中國風。其中的改革界麵以黑色水墨版麵為背景，升級節點是用白色工筆畫的圖標，每完成一次升級，梅花就會在節點上綻放。

▲《全麵戰爭：三國》界麵

再比如，同係列遊戲《全麵戰爭傳奇：特洛伊》中，選擇界麵暗黃的色調下，人物銅像與真人轉換，帶來強烈的古希臘的史詩感。

▲《全麵戰爭傳奇：特洛伊》界麵

5.習慣和認知

關於界麵設計在操作上的難易程度，盡量不要超出大部分遊戲玩家的認知範圍，並且要考慮大部分遊戲玩家在與遊戲互動時的習慣。

以《英雄聯盟》客戶端為例，整個界麵非常簡單，左側是文字說明，右側是一個圓環動效和按鈕。

圓環和“接受”按鈕在顏色和動效上都做了突出設計，當動效開始播放時，會有類似時間倒計時的效果，對用戶進行點擊下方“接受”按鈕的心理暗示。

▲《英雄聯盟》界麵

遊戲UI的風格

遊戲UI設計風格非常多，類型劃分並沒有非常明確的界定，從不同的角度出發都可以進行不同的風格分類。例如按照美術風格劃分可以分為寫實風格、像素風格、水晶風格、扁平風格等。按照地域行業劃分還可以分為歐美風、中國風、日韓風等。

這裏就不對所有的風格進行分類了，主要列舉市麵上比較常見的5種風格。

1.魔幻風格

魔幻風格的遊戲界麵設計結合了中世紀歐洲和幻想的一些元素，如盔甲、城堡、騎士、羊皮紙、哥特字體、魔法、吸血鬼等。整體給人以奇幻的感受，細分下來有厚重、扁平等不同類型。

▲《上古卷軸5：天際》界麵

2.科技風格

科技風格的遊戲界麵設計常應用在帶有高科技、未來感等元素的遊戲中，細分下來有科幻、賽博朋克等不同類型。

該類風格的遊戲界麵設計以現實為基礎，並在具體設計中融入了很多超現實的元素，如細密的線條、數據流、代碼、熒光等，給人新奇、有趣的感受。

▲《精英：危險》界麵

3.東方風格

東方風格的遊戲界麵細分下來有中國風、和風及中國式和風這3種類型。同時，這些類型的界麵有著一些共用的視覺元素，並且伴隨不同地域行業有著完全不同的發展路徑。

常見的國產網絡遊戲題材有金庸題材、三國題材、西遊題材、創新IP題材、網絡文學IP衍生的玄幻題材，以及部分經典文學衍生的魔幻題材等。

同時，從界麵設計風格上來說，手遊時代的武俠類遊戲的界麵設計都比較追求輕量化。

▲《逆水寒》界麵

4.休閑風格

休閑風格的遊戲界麵設計大都偏輕鬆和可愛，我們也習慣將這類風格所表現出的設計風格稱為可愛風格、卡通風格（具體劃分包括日韓卡通風格和美式卡通風格）或Q萌風格。

休閑風格的遊戲界麵整體呈現出色調明快、細節概括、造型圓潤及塊麵區分明顯的設計特點，給玩家輕鬆、愉悅和有趣的感受。

▲《開心消消樂》界麵

5.二次元風格

二次元風格的遊戲是近幾年來比較火的一種遊戲類型，原生國為日本。從界麵風格上講，它並沒有嚴格意義上且單一維度上的定義。

從廣義上講，二次元是二維世界的虛擬存在。所有使用了二維作畫方式或用三維方式去實現二維視覺風格的美術化表現都可以被稱為二次元風格。

▲《戀與製作人》界麵

現階段還衍生出中國二次元風格的遊戲界麵設計，具體的風格表現與日式二次元有相似之處，但又融入了中國元素。

▲《陰陽師》界麵

遊戲UI的學習方向

通過前文的介紹，大家對遊戲UI設計應該有所了解了。觀察上述舉例的遊戲UI界麵，可以發現遊戲UI設計既要具備整體設計思路，又要處理好各種小細節

學習遊戲UI設計，一般從遊戲UI界麵設計和遊戲UI圖標設計兩個方麵入手，這是遊戲UI設計應用最廣的兩類。

1.遊戲UI圖標

在遊戲界麵上我們可以看到各種圖標，配有“商城”、“技能”、“排行”、“挑戰”等文字，這些就是遊戲UI圖標，是遊戲中必不可少的部分。

設計遊戲UI圖標要根據遊戲的設定和整體風格來定，但不管是什麼遊戲，一般都會有物品圖標、技能圖標和功能圖標，因此這三個類型的圖標是學習遊戲UI圖標的重點。

★遊戲UI物品圖標設計：

▲遊戲原畫大師班學員作業-吳*鳳

▲遊戲原畫大師班學員作業-嚴*圓

▲遊戲原畫大師班學員作業-李*妹

★遊戲UI技能圖標設計：

▲遊戲原畫大師班學員作業-劉*星

▲遊戲原畫大師班學員作業-吳*鳳

▲遊戲原畫大師班學員作業-趙*奇

★遊戲UI功能圖標設計：

▲遊戲原畫大師班學員作業-董*昕

▲遊戲原畫大師班學員作業-紀*越

▲遊戲原畫大師班學員作業-馬*慧

2.遊戲UI界麵

學完遊戲UI圖標之後，就要開始學習整體的遊戲界麵設計了。通過對市場上主流遊戲風格的了解，學習遊戲界麵設計的應用和設計特征，設計不同風格類型的作品，輸出完整的遊戲UI作品。

從現在市場上的遊戲界麵來看，學習遊戲UI界麵設計最起碼要學會遊戲主界麵設計、二級界麵設計、活動界麵設計，這些都是一款遊戲必備的。

★遊戲UI主界麵設計：

▲遊戲原畫大師班學員作業-顏*鬆

▲遊戲原畫大師班學員作業-陳*寶

▲遊戲原畫大師班學員作業-虞*家

★遊戲UI二級界麵設計：

▲遊戲原畫大師班學員作業-馬*慧

▲遊戲原畫大師班學員作業-鄭*棟

▲遊戲原畫大師班學員作業-胡*

★遊戲UI活動界麵設計：

▲遊戲原畫大師班學員作業-方*

▲遊戲原畫大師班學員作業-趙*奇

▲遊戲原畫大師班學員作業-潘*偉

如果想看更多更優秀的學員作業，指路花瓣網，關注【Mars遊戲星球】，裏麵有各類火星時代遊戲學員優秀作業和超詳細的教程，入股不虧！

▲火星時代學員優秀作業

▲火星時代課堂案例-教程

關於遊戲UI設計，本文進行了整體上的介紹，當然，其中還有很多細節值得關注。不論是對市場上遊戲UI設計感興趣，還是想進一步了解有關遊戲UI設計的學習內容，都可以和星仔聊聊哇（悄悄告訴你，遊戲行業急缺遊戲UI設計師噢！）