對很多人來說，用戶體驗（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就像是個忍者，這是玩家們注意不到的，但當被人們看到的時候，意味着你執行的很不錯。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!