對很多人來說 用戶體驗（UX）和用戶界麵（UI）很容易被混淆 DICE首席圖形設計師：如何做好3A遊戲的UI？ - 趣味新聞網

對很多人來說，用戶體驗（UX）和用戶界麵（UI）很容易被混淆，你很難說清楚兩者之間的差彆是什麼。

在此前的GDC演講中，EA公司DICE洛杉磯工作室首席圖形設計師Omer Younas指齣，UI實際上隻是UX的遊戲內部分，他在分享中提到瞭3A遊戲UI的設計理念，並根據具體案例介紹瞭UI設計的很多方法。

以下是GameLook聽譯的完整內容：

Omer Younas：

今天我們有很多東西要說，這是主要的內容列錶，但我也希望今天的分享是互動的。我們今天不會提到移動應用研發，而是聚焦於3A遊戲領域，主要是在PC和主機設備。

開始之前，做一個簡單的自我介紹，我在倫敦齣生並長大，是四兄弟當中最小的一個，我的父親是做電腦的，所以玩遊戲是我兒時最主要的娛樂活動之一。多年之後，我移居到瞭5500英裏之外的洛杉磯，並且自此之後都在遊戲行業工作，已經超過瞭10年。

左側是剛入行時候的我，年輕、熱情、有絡腮鬍，右側是在小島工作室與小島秀夫的閤照。

這些是我從事過的一些遊戲、就職過的一些工作室，第一張是在DICE洛杉磯工作室做的《戰地1》，中間是在小島工作室做的《閤金裝備5》，在此之前，我在英國的Crytek參與過《孤島危機》係列的研發。

很多人認為UX和UI是同一件事，但它們並不是同一件事，UX是很大的一個概念，實際上從用戶在商店購買你的遊戲開始，到真正進入遊戲體驗，是一係列不斷的互動。UI隻是UX的一部分，從用戶體驗來說，UI影響的是遊戲內的東西。

很多人聽到UI可能都會想到菜單分布，但UI還是遊戲的視覺識彆符，傳遞遊戲風格、調性以及每一個細節，通過聲音、視覺、震動等多種方式嚮玩傢展現信息，所以也相當於用戶反饋，你想在遊戲裏嚮用戶錶達的任何東西，基本都要通過UI來實現。

通常來說，人們想到UI，往往會想到HUD，也就是實際體驗中的核心玩法，但我傾嚮於把它看作兩件事，因為我們還有前端和菜單。如果說HUD屬於上下文環境式的內容，那麼前端就像是遊戲的具體結構。

我們都知道策劃不是綫性的，它就像是一團亂麻，你要不斷迭代、調整，還有時候完全放棄之前做的東西。不過，我們試圖讓它更簡單一些，通過對藝術方嚮和認知設計兩個方麵來看待，看我們是否能夠讓它更流暢、引領我們走齣睏境。

當我們談到遊戲的時候，並不希望讓玩傢隻看到UI，你既要讓它看起來很好看，卻又不能成為最前端和最中心的東西，因為你並不是想讓人們玩UI，而是讓他們玩遊戲，UI是用來支持這些行為的。

如果沒有藝術方嚮，你可能會做齣這樣的畫麵，所有東西都在屏幕上齣現，也沒有連貫的風格，隻是在同一個場景增加瞭數百樣東西。當你想要提醒玩傢健康值很低的時候，他們可能很難看到對應的提示，你要把重要的信息放在屏幕中間，並且讓他們忽略其他乾擾信息。

一、瞭解你的情況

我們既要讓UI具有視覺吸引力，又要保證它具有獨特性。在之前的一個演講中，有位知名設計師說要針對人的五種官能進行設計，包括觸覺、聽覺、視覺、味覺和嗅覺，當然這不是針對遊戲行業，而且後兩樣在遊戲設計過程中還不是主流，所以我們主要針對前三種。

觸覺指的是互動，這是遊戲區彆於其他媒體形式最重要的特點。

我們從平台的變化來理解遊戲的輸入方式，要知道這些手柄的輸入方式會怎樣影響遊戲UI，知道我們的遊戲可以做怎樣的操作方式、以及它在屏幕上是如何呈現的。

PC平台的鍵鼠操作也是一樣，不過還要照顧到玩傢對鍵盤和鼠標的掌握度，確保你的遊戲盡可能做到包容更多人。

聲音占瞭用戶體驗的50%，你在看最喜歡的電影時，可以把聲音調到0也不會有很大的影響，但遊戲卻不行。隻不過，我不擅長聲音領域的設計，所以今天我們不會提及。

我們聚焦的是視覺，這裏需要瞭解一些關鍵領域的一些理論，我們如何讓這些與遊戲設計關聯起來、如何讓我們的圖形具有吸引力？

這是《2049》當中的一個場景，對人的眼睛非常友好，顔色、明暗以及內容量設計都非常好，角色正好在屏幕中間，你看到之後就能注意到發生瞭什麼。

在黑白模式下，這個場景也很不錯，你要確保所有的內容都能起到各自的作用，UI設計也是如此，你可以把視覺設計的這些理論直接用到遊戲UI設計上。

同樣，這張圖可能就不那麼好，雖然飽和度、光暗都不錯，但對於你的眼睛來說，屏幕上有太多的東西，你要知道人們是如何認知這些信息和視覺因素的，為此，我們需要瞭解人類的眼睛是如何工作的。

光照到我們眼球，進入視神經，它是由很多杆狀和錐狀體組成，信號被傳輸到我們的大腦，錐狀體有特定的顔色，並基於紅綠藍反映看到的顔色，我們可以從圖形中看到大量的紅綠顔色，藍色則比較少。因此，我們的眼球對紅色是非常敏感的，因此在UI設計的時候我們也需要注意，用紅色引起用戶的注意，比如危險或者重要的事情、信息。

簡單來說，人們眼球聚焦的是中間紅綠色的區域，嚮外是藍色、黃色和亮度，這在設計UI的時候是很重要的，生物學已經告訴我們在設計UI的時候該如何分布顔色。

我們將最重要的信息放在中間，次要信息放在外圍。

接下來我們來看大腦對信息的理解方式，最初我們的大腦選擇的是形狀，因此，有特點的剪影、很大的形狀容易給人留下印象；第二是顔色，這和情感以及品牌聯係相關；第三是格式，這需要很長時間纔能形成，這就是我們的大腦對看到東西的理解。

在UI設計的時候，（心理學的）格式塔原理（Gestalt Theory）是非常重要的，對整個設計領域也很有影響力，我們可以遵循其中的一些規則來設計我們想展現的東西。

閉閤定律（Closure），我們看到的隻是一些點，但大腦很容易把它理解成一個圓；接近法（Proximity），當一些東西在一起的時候，我們的大腦傾嚮於認為它們是一個群組的；連續性（Continuity），雖然這條綫被橫綫隔斷，但依然給人的感覺是上下流通的；相似性（Similarity），這裏有很多灰色的方形和圓形，大腦會認為他們可能是一組的。

圖形背景關係（Figure-Ground），盡管這張圖是2D，但你會看到3D形狀，隻是不知道哪裏是前景、哪裏是背景；外殼（Enclosure），你用這些灰色的圓圈將它們圍繞起來，大腦就會傾嚮於認為即使被隔斷，這些圓圈依然是一組的；還有就是對稱性（Symmetry）遠離。

我們通過遊戲案例來理解這些規則是如何被使用的：

這是《戰地1》的一個截圖，用的是觀察者模式，我們可以看到截圖中的內容形成瞭閉閤的場景接近的東西都在同一片地方，包括icon也很接近。然後是連續性，你可以連續看到不同的功能，相似性錶現在強調內容都使用瞭同樣的顔色並加粗。圖形背景，這些框內的大小實際上可以變化，沒有誰是背景；外殼，我們都使用盒子一樣的形狀將不同的功能包含在裏麵。

對稱性可以衝中軸綫看齣來。

還有一些適用性方麵的規則我們也應該注意，在你設計任何屏幕的時候，都不要同時齣現7個以上的獨特物品，這會讓用戶覺得信息量太大。菜單的設計不要超過3層，功能可視性指的是一些功能要符閤用戶預期；你的UI還需要有一個聚焦區域，讓人們知道他們在看的是什麼。

你要讓狀態變化非常清晰，讓用戶點瞭按鈕之後就可以看到明顯改變；還要有頁麵流，讓不同的內容成等級分布，還要提供幫助以及提示選擇。

這是《閤金裝備》裏的定製化，你可以看到屏幕裏有7個物品，我們不希望增加更多，因為怕讓用戶覺得睏惑。這些菜單隻有3層，你隻需要點擊三次就可以實現定製化，每個按鈕都有對應的功能，還有聚焦區域，狀態變化也非常明顯，內容分布也比較有序，我們還提供瞭幫助與提示。

本質上來說，我們設計是為瞭被用戶高效率理解，但同時還希望視覺和諧，不能讓不同的物品彼此衝突。

這時候我們就需要收集數據，最好是瞭解你的遊戲，創意方嚮、藝術方嚮、目標市場，要將這些規律與藝術、代碼、策劃結閤起來，確保所有人對遊戲的目標一緻。你需要問的是，什麼是對玩傢最好的？

你做的是一款遊戲，但它會給玩傢帶來體驗感，你還要瞭解遊戲的特點，調性是什麼、風格是什麼？主題處於什麼時代？這些都會影響UI設計。

你還可以尋找參照物，比如視頻、電影、書籍、移動平台等等，因為你的參照物越多，就會對你的決策帶來更多的信息。

你還要意識到設計趨勢，業內有很多的趨勢，你不希望自己的設計被看作是PS2時代的産物，而是為新主機世代或者最新的設計方嚮。即便是係列遊戲，也要確保每一款遊戲看起來以及給人的感覺都是獨特的。

二、UI處理過程

這部分覆蓋的內容很多，但我們要從網格說起，它可以用於遊戲裏的很多方麵，我們說的是20×13的網格。

黃金比例網格，你們都有手機，如果對照這個網格，就會發現它可以呈現非常令人舒適的布局。

還要注意長寬比，目前我們關注的是16：9的比例，但你也要注意4：3，如果人們沒有最新科技的設備，你依舊要確保他們能夠體驗遊戲，而不會看到很多東西重疊在一塊。未來可能還有更先進的科技，也不排除21：9的比例，所以你要對此保持關注。

另外，把所有重要的信息都保持在90%的屏幕之內，這個區域也被稱為安全框架，比如文字、icon以及對UI非常重要的東西。

不要用信息填滿屏幕的每一個地方，留一些空間作為內容緩衝帶。

要保持UI的一緻性和協調性，即使是右邊的情況實際上也有提升的空間，要盡量讓UI布局盡量有連貫性，加入盡可能多的錨定點。

這是《BF1》的截圖，如果把它分成9塊，我們可以看到9個錨定點。做UI的時候，很多信息容易重疊，你要確保這些區域能夠精準錶達某些信息。這還意味著，當你的長寬比變化的時候，可以對應把這些錨定點和對應的信息轉移。

排版

你們可以看到為什麼選擇對的字體很重要，我們需要看更多的信息，比如是否有法律問題、是否具有可讀性，字體的風格、本地化方麵的考量、預算等等。

這是《孤島危機》的一個畫麵，實際上是實驗中的，但因為使用的字體不適閤遊戲風格，我們不得不重新選擇。

6英尺規則

這條規則指的是，當玩傢使用主機玩遊戲的時候，他們離電視屏幕的距離是6英尺左右，這不僅意味著你要留意字體大小，還要確保所選字體在這個距離範圍內能夠清晰地被玩傢看到。

設計字體是有規則的，但我們最關注的事情是x-height，也就是o、p、b等字母同一個區域的高度。

比如這裏的b和e在不同字體下的比例也是不一樣的，字體越小越難看清，因此你要確保在更遠的距離下，遊戲裏的文字能夠被玩傢讀懂。

不要隻是簡單下載免費字體使用，這在3A遊戲裏是行不通的，要確保你的字體支持外語字母，包括數學符號、特殊字符等等。

通常來說，你要買下整個字體族，因為這對你會非常有用，專業的字體會有大量不同的錶現形式，對於比較大的文字，使用正常字體，要保證字體不會太薄，以至於在屏幕上看不到，所以粗一些的字體適閤用於比較小的文字。

在同一個句子裏，不要使用2種以上的字體變化，最後一行顯然是個反麵教材。

如果你對字體不瞭解，不知道該選哪一個，這個列錶可以幫你開始，這些字體都是可以從主流字體網站獲得的，雖然不夠完美，但是不錯的開始。

另外，請不要拉伸字體，因為這就像把圖片中的人臉拉伸一樣，人們不會喜歡這樣，如果要伸縮，保持比例。

在使用文本的時候，不要在同一行排太多字，最好的範圍是每行60-120個字母，左對齊以便閱讀。

本地化的時候，要留40%的空間用於不同語言的字符超標（德語、土耳其語）。另外要注意的是，阿拉伯語和希伯來語都是從右到左排列的。

這是《BF：Operation》英文版UI，右下角的箱子我們不得不重做，因為它太長瞭，所以在設計的時候要考慮不同語言的UI布局。

可能很多人不知道這是什麼，這是遊戲標簽長度的上限，比如在一句話當中，如果有很多內容組成，你就要考慮隨機部分的長度，比如在玩傢看到的對話中，如果要加入玩傢名字，就要保證這個長度能夠適閤。

這是技術是遊戲標簽設計最糟糕的場景，有的是用瞭彆的形式，比如WMWM，但用這樣標簽是有問題的。

接下來我們要說的是形狀語言，它可以支撐你遊戲的認知理解的部分，尤其是具有連貫性的形狀，可以幫你的遊戲形成特定的外觀和感覺，比如節奏、紋理、標誌元素等等。

我們還需要確保形狀具有連貫性，比如你在遊戲裏做打擊動作，如果開始是上麵的形狀，結束是底部的形狀，在UI當中就會給人很奇怪的感覺，看起來是不連貫的，角度和圓角也是一樣，這些東西也要具有連續性。

這是《閤金裝備》裏的截圖，當你定製化的時候，這些元素給人感覺是它們原本就是一體的，沒有什麼形狀給人的感覺是比較奇怪的，它們都比較適閤軍事主題。

這是遊戲裏不同區域的一些東西，它們都是用瞭相似的形狀語言，顔色也比較一緻。

這是《孤島危機3》的截圖，來自不同位置的截屏，我們可以看到不管是在哪個地方，給人的感覺都是在一個産品之內，讓遊戲體驗具有連貫性。

圖像學

要確保它們在最小化的屏幕尺寸下也能很好地展示，做到簡單又不失多樣化，確保斜視情況下也能準確地看到形狀，這纔是好的icon，屏幕上的icon最大尺寸為1英尺 X 1英尺。

要得到齣色的icon設計，你首先要有構造網格，以便讓你的icon在UI當中顯得自然而具有連續性。

你還需要設計icon參數，以便讓人們為你設計icon，或者理解你的icon設計。

對於icon，我們還要做平衡，盡管三角形和圓形沒有占那麼大的空間，但我們依然要對它的大小進行調整，讓我們的icon看起來是連貫的。

比如這些icon，它們雖然占據的空間不同，但尺寸都在同樣大小的正方形內，盡管在數學上並不完全相等，但至少它們給人的感覺是一緻的，你在UI設計的時候應該注意，這樣做可以確保視覺和諧。

輪廓與可讀性：測試icon不同視角的感覺，因為這會影響不同距離下的icon效果，盡管由於玩法的原因它們之間的差彆很小，如果不能第一眼就看齣icon是什麼，那麼玩傢很可能會錯過一些重要的功能。所以，你要在遊戲裏測試不同的效果，看哪些有用，哪些不好用。

有時候icon給人的感覺還可能是模棱兩可的，所以有時候可能需要用文字標注其含義，如果你沒有看到這些解釋的文字，可能很多人不知道這些icon是什麼意思。

這張圖當中，有些icon可能會模棱兩可，但有瞭注釋之後，所有人都知道它們代錶什麼。

確保你的每一個icon都有連貫的風格，這不僅與形狀語言有關，還和遊戲的視覺識彆度有關，也就是把你的藝術方嚮展示到每一個icon當中，有時候它們甚至可以取代文字，有瞭識彆度較高的icon，你可以節省大量的UI空間。

比如這些icon，它可以擁有不止一個意義，所以這類屬於模棱兩可的。

顔色心理學

顔色在情感錶達和品牌方麵扮演很多的角色，我總體來說，我希望你們不要依賴於顔色，盡管它對品牌推廣有用，但顔色可能會被以不同的方式解讀。

很多人可能都知道顔色理論，如果不知道，你們可以專門去搜索（Color Theory），很容易理解。

但是，在不同的文化背景下，每個顔色都可能有不同的意義，所以在使用顔色的時候，你要注意不讓它冒犯特定用戶的文化習俗。由於你的遊戲是3A，所以將會被全球玩傢體驗，所以在設計顔色之前要考慮顔色在不同文化當中的意義。

總體來說，我們還要限製使用的顔色數量，最好是5個以內，當然，每一個顔色最好都有其目的，避免完全飽和的顔色。

這是《孤島危機》的另一個案例，我們使用不同顔色錶示按鈕的不同狀態，這些顔色非常適閤軍事主題，我們並不完全依賴顔色，但它們的確可以帶來視覺理解上的幫助。

這張圖的右側我們可以看到，不同的背景色也會對形狀帶來很大的影響，所以在設計UI的時候要考慮到，設計獨特形狀的時候，不同背景下它們可能被用不同的方式解讀，你最初的設計可能會行不通。

《孤島驚魂4》截圖

這是《最終幻想15》，他們在屏幕中心使用瞭紅色，很容易引起玩傢注意。

色盲現象也是遊戲不能過於依賴顔色的另一個原因，所以我們在選擇顔色的時候需要注意。

這些是不同的色盲，包括紅、綠和藍色盲。

很多的3A遊戲都會關注色盲，不過你也不希望隻為一小部分用戶設計，所以最好是給用戶自定義顔色的功能，讓他們選擇自己覺得舒適的顔色。

UI呈現

這些看起來是非常高層次設定的東西，比如non-diegetic、diegetic，Spatial、Meta，前兩個是與電影有關，它們的呈現方式和劇情相關。

通常來說，大多數遊戲看到的是Non-Diegetic式UI，它與玩法關聯不大，用戶實際上不需要和UI互動，就像是遊戲世界上重疊瞭一層UI。

Diegetic是和遊戲玩法互動的，它們被設計在遊戲世界之內、玩傢們可以看到甚至能直接互動，我個人比較喜歡這類UI。

Spatial UI通常與文字、角色輪廓等方麵聯係在一起，更多與效果有關，比如《最後生還者》和《神秘海域4》都有角色輪廓。

Meta UI並不是要特意告訴你什麼事情，隻是錶達一種屏幕效果。

不過，很多遊戲裏使用的標準UI風格並不意味著它就是最好的，比如這張圖中的香蕉（因為外形很像），它隻是用2D素材呈現瞭3D效果，當我體驗FPS或者TPS的時候，這些東西是2D的，你不知道某些東西是在你的上方或者下方，這些東西可以告訴你方嚮，但無法呈現空間感，比如上下前後。

如果你要用2D方式錶達3D信息，不要照搬所有人都在用的方法，最好是尋找其他方式來呈現，因為這可能無法被玩傢準確解讀，比如《閤金裝備4》的方式就很不錯。

2D美術: 2D似乎與UI的所有方麵都有關係，比如具有識彆性的東西，我們如何呈現給玩傢,包括一些屏幕截圖和加載界麵。

引擎知識

瞭解我們的局限，做UI的時候我們需要知道引擎的限製，你需要什麼樣的技術、如何充分利用係統、如何做文檔以及測試等等。

引擎方麵比較好的一點是，我們可以使用著色器。

比如從最左側的基礎UI美術，逐漸加入陰影、模糊效果，到最右側對眼睛越來越舒適。

這是加瞭扭麯效果的另一個案例。

我們在《孤島危機》當中就做瞭類似的事情。

我們的UI被映射到瞭多邊形中，我們將著色器效果應用到這些多邊形中。

你還可以用引擎做更多3D方麵的事情，比如場景，將你的UI與環境組閤在一起。

在嘗試的時候會比較有趣，你可以將UI與玩法聯係起來，可以經常測試，因為你不希望UI與遊戲無關。

三、執行

通常來說，執行UI主要使用PS、AI和AE三個軟件，我非常喜歡用Illustrator。

光柵有它自己的局限，但你可以用vector甚至用Polygon。

而且你還可以用Illustrator做很多的模型。

做數據模型的時候，你希望搞清楚UI的不同部分，確定你的風格、主題，通過Illustrator你可以嘗試很多東西。

通過不同icon的效果，你可以讓人們理解遊戲裏發生瞭什麼，選擇按鈕的時候讓它們具有連貫性。

UI總要盡可能簡單，這是前端截圖，包括形狀語言、字體、顔色等。

服務器界麵看起來比較擁擠，但你需要讓這些信息被用戶很容易理解。

定製化比較復雜，但這裏你可以增加很多的diegetic元素，將UI與玩法融閤在一起。

最後是迴閤結束。

這是《戰地1》觀戰模式早期的UI，界麵展示的東西太多瞭。

動態模型也是很容易引起玩傢注意力的一個元素，隻需要簡單的動畫就好，它需要與你的美術風格一緻，我們可以通過示例看到，動態UI對你傳遞的信息有很大的影響。

這是很簡單的動畫，但展示瞭你可以用很整潔的動畫，也可以用誇張的動畫，或者用科技感的動畫。

有時候，展示動畫比很多的描述都更容易被玩傢理解，比如這個案例。

即便是遊戲發布之後，你的UI也是可以一直提升的。

比如這是《孤島危機3》的多人玩法UI，我們可以看到它的持續變化，最終版本與最初有很大的差彆。

四、隱藏因素

最後我們需要瞭解的是隱藏的因素，這些東西是會影響UI的，因此你需要注意。

比如本地化，你需要給有些語言版本留齣40%的文本空間，不同顔色在不同文化中的意義，以及一些可能在某些文化裏比較具有冒犯性的標誌。

技術要求，這與遊戲要上架的平台相關，在研發主機遊戲的時候，你需要清楚這些要求，但還需要瞭解屏幕尺寸、輸入操作、加載時間等等。

最後要說的是，UI也可以做到沒有UI，比如粒子效果、角色動畫、音頻提示等等，這些都可以替代UI。

設計UI的時候我們不能做令人睏惑的布局設計，也不能直接從其他遊戲裏抄襲，你需要為自己的遊戲設計獨特的風格。

五、總結

首先是研究，你需要對設計有整體的瞭解，然後為你的遊戲有針對性地設計風格、主題，在做任何工作之前，確保你瞭解這些設計理念。

視覺辨識度，排版、形狀與icon以及顔色等多種元素的組閤，可以讓你的遊戲擁有自己的風格，找到一些獨特的東西，選擇好的字體。

執行，在瞭解以上理論之後，你需要做不同的嘗試，讓人們更容易理解遊戲的體驗流程和UI布局。

考慮到一些隱藏因素，比如平台限製、本地化可能帶來的問題。

UI就像是個忍者，這是玩傢們注意不到的，但當被人們看到的時候，意味著你執行的很不錯。

・・・・・ End ・・・・・

GameLook每日遊戲産業報道

全球視野 / 深度有料