對(duì)很多人來(lái)說(shuō)，用戶(hù)體驗(yàn)（UX）和用戶(hù)界面（UI）很容易被混淆，你很難說(shuō)清楚兩者之間的差別是什么。

在此前的GDC演講中，EA公司DICE洛杉磯工作室首席圖形設(shè)計(jì)師Omer Younas指出，UI實(shí)際上只是UX的游戲內(nèi)部分，他在分享中提到了3A游戲UI的設(shè)計(jì)理念，并根據(jù)具體案例介紹了UI設(shè)計(jì)的很多方法。

以下是GameLook聽(tīng)譯的完整內(nèi)容：

Omer Younas：

今天我們有很多東西要說(shuō)，這是主要的內(nèi)容列表，但我也希望今天的分享是互動(dòng)的。我們今天不會(huì)提到移動(dòng)應(yīng)用研發(fā)，而是聚焦于3A游戲領(lǐng)域，主要是在PC和主機(jī)設(shè)備。

開(kāi)始之前，做一個(gè)簡(jiǎn)單的自我介紹，我在倫敦出生并長(zhǎng)大，是四兄弟當(dāng)中最小的一個(gè)，我的父親是做電腦的，所以玩游戲是我兒時(shí)最主要的娛樂(lè)活動(dòng)之一。多年之后，我移居到了5500英里之外的洛杉磯，并且自此之后都在游戲行業(yè)工作，已經(jīng)超過(guò)了10年。

左側(cè)是剛?cè)胄袝r(shí)候的我，年輕、熱情、有絡(luò)腮胡，右側(cè)是在小島工作室與小島秀夫的合照。

這些是我從事過(guò)的一些游戲、就職過(guò)的一些工作室，第一張是在DICE洛杉磯工作室做的《戰(zhàn)地1》，中間是在小島工作室做的《合金裝備5》，在此之前，我在英國(guó)的Crytek參與過(guò)《孤島危機(jī)》系列的研發(fā)。

很多人認(rèn)為UX和UI是同一件事，但它們并不是同一件事，UX是很大的一個(gè)概念，實(shí)際上從用戶(hù)在商店購(gòu)買(mǎi)你的游戲開(kāi)始，到真正進(jìn)入游戲體驗(yàn)，是一系列不斷的互動(dòng)。UI只是UX的一部分，從用戶(hù)體驗(yàn)來(lái)說(shuō)，UI影響的是游戲內(nèi)的東西。

很多人聽(tīng)到UI可能都會(huì)想到菜單分布，但UI還是游戲的視覺(jué)識(shí)別符，傳遞游戲風(fēng)格、調(diào)性以及每一個(gè)細(xì)節(jié)，通過(guò)聲音、視覺(jué)、震動(dòng)等多種方式向玩家展現(xiàn)信息，所以也相當(dāng)于用戶(hù)反饋，你想在游戲里向用戶(hù)表達(dá)的任何東西，基本都要通過(guò)UI來(lái)實(shí)現(xiàn)。

通常來(lái)說(shuō)，人們想到UI，往往會(huì)想到HUD，也就是實(shí)際體驗(yàn)中的核心玩法，但我傾向于把它看作兩件事，因?yàn)槲覀冞€有前端和菜單。如果說(shuō)HUD屬于上下文環(huán)境式的內(nèi)容，那么前端就像是游戲的具體結(jié)構(gòu)。

我們都知道策劃不是線(xiàn)性的，它就像是一團(tuán)亂麻，你要不斷迭代、調(diào)整，還有時(shí)候完全放棄之前做的東西。不過(guò)，我們?cè)噲D讓它更簡(jiǎn)單一些，通過(guò)對(duì)藝術(shù)方向和認(rèn)知設(shè)計(jì)兩個(gè)方面來(lái)看待，看我們是否能夠讓它更流暢、引領(lǐng)我們走出困境。

當(dāng)我們談到游戲的時(shí)候，并不希望讓玩家只看到UI，你既要讓它看起來(lái)很好看，卻又不能成為最前端和最中心的東西，因?yàn)槟悴⒉皇窍胱屓藗兺鎁I，而是讓他們玩游戲，UI是用來(lái)支持這些行為的。

如果沒(méi)有藝術(shù)方向，你可能會(huì)做出這樣的畫(huà)面，所有東西都在屏幕上出現(xiàn)，也沒(méi)有連貫的風(fēng)格，只是在同一個(gè)場(chǎng)景增加了數(shù)百樣?xùn)|西。當(dāng)你想要提醒玩家健康值很低的時(shí)候，他們可能很難看到對(duì)應(yīng)的提示，你要把重要的信息放在屏幕中間，并且讓他們忽略其他干擾信息。

一、了解你的情況

我們既要讓UI具有視覺(jué)吸引力，又要保證它具有獨(dú)特性。在之前的一個(gè)演講中，有位知名設(shè)計(jì)師說(shuō)要針對(duì)人的五種官能進(jìn)行設(shè)計(jì)，包括觸覺(jué)、聽(tīng)覺(jué)、視覺(jué)、味覺(jué)和嗅覺(jué)，當(dāng)然這不是針對(duì)游戲行業(yè)，而且后兩樣在游戲設(shè)計(jì)過(guò)程中還不是主流，所以我們主要針對(duì)前三種。

觸覺(jué)指的是互動(dòng)，這是游戲區(qū)別于其他媒體形式最重要的特點(diǎn)。

我們從平臺(tái)的變化來(lái)理解游戲的輸入方式，要知道這些手柄的輸入方式會(huì)怎樣影響游戲UI，知道我們的游戲可以做怎樣的操作方式、以及它在屏幕上是如何呈現(xiàn)的。

PC平臺(tái)的鍵鼠操作也是一樣，不過(guò)還要照顧到玩家對(duì)鍵盤(pán)和鼠標(biāo)的掌握度，確保你的游戲盡可能做到包容更多人。

聲音占了用戶(hù)體驗(yàn)的50%，你在看最喜歡的電影時(shí)，可以把聲音調(diào)到0也不會(huì)有很大的影響，但游戲卻不行。只不過(guò)，我不擅長(zhǎng)聲音領(lǐng)域的設(shè)計(jì)，所以今天我們不會(huì)提及。

我們聚焦的是視覺(jué)，這里需要了解一些關(guān)鍵領(lǐng)域的一些理論，我們?nèi)绾巫屵@些與游戲設(shè)計(jì)關(guān)聯(lián)起來(lái)、如何讓我們的圖形具有吸引力？

這是《2049》當(dāng)中的一個(gè)場(chǎng)景，對(duì)人的眼睛非常友好，顏色、明暗以及內(nèi)容量設(shè)計(jì)都非常好，角色正好在屏幕中間，你看到之后就能注意到發(fā)生了什么。

在黑白模式下，這個(gè)場(chǎng)景也很不錯(cuò)，你要確保所有的內(nèi)容都能起到各自的作用，UI設(shè)計(jì)也是如此，你可以把視覺(jué)設(shè)計(jì)的這些理論直接用到游戲UI設(shè)計(jì)上。

同樣，這張圖可能就不那么好，雖然飽和度、光暗都不錯(cuò)，但對(duì)于你的眼睛來(lái)說(shuō)，屏幕上有太多的東西，你要知道人們是如何認(rèn)知這些信息和視覺(jué)因素的，為此，我們需要了解人類(lèi)的眼睛是如何工作的。

光照到我們眼球，進(jìn)入視神經(jīng)，它是由很多桿狀和錐狀體組成，信號(hào)被傳輸?shù)轿覀兊拇竽X，錐狀體有特定的顏色，并基于紅綠藍(lán)反映看到的顏色，我們可以從圖形中看到大量的紅綠顏色，藍(lán)色則比較少。因此，我們的眼球?qū)t色是非常敏感的，因此在UI設(shè)計(jì)的時(shí)候我們也需要注意，用紅色引起用戶(hù)的注意，比如危險(xiǎn)或者重要的事情、信息。

簡(jiǎn)單來(lái)說(shuō)，人們眼球聚焦的是中間紅綠色的區(qū)域，向外是藍(lán)色、黃色和亮度，這在設(shè)計(jì)UI的時(shí)候是很重要的，生物學(xué)已經(jīng)告訴我們?cè)谠O(shè)計(jì)UI的時(shí)候該如何分布顏色。

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

接下來(lái)我們來(lái)看大腦對(duì)信息的理解方式，最初我們的大腦選擇的是形狀，因此，有特點(diǎn)的剪影、很大的形狀容易給人留下印象；第二是顏色，這和情感以及品牌聯(lián)系相關(guān)；第三是格式，這需要很長(zhǎng)時(shí)間才能形成，這就是我們的大腦對(duì)看到東西的理解。

在UI設(shè)計(jì)的時(shí)候，（心理學(xué)的）格式塔原理（Gestalt Theory）是非常重要的，對(duì)整個(gè)設(shè)計(jì)領(lǐng)域也很有影響力，我們可以遵循其中的一些規(guī)則來(lái)設(shè)計(jì)我們想展現(xiàn)的東西。

閉合定律（Closure），我們看到的只是一些點(diǎn)，但大腦很容易把它理解成一個(gè)圓；接近法（Proximity），當(dāng)一些東西在一起的時(shí)候，我們的大腦傾向于認(rèn)為它們是一個(gè)群組的；連續(xù)性（Continuity），雖然這條線(xiàn)被橫線(xiàn)隔斷，但依然給人的感覺(jué)是上下流通的；相似性（Similarity），這里有很多灰色的方形和圓形，大腦會(huì)認(rèn)為他們可能是一組的。

圖形背景關(guān)系（Figure-Ground），盡管這張圖是2D，但你會(huì)看到3D形狀，只是不知道哪里是前景、哪里是背景；外殼（Enclosure），你用這些灰色的圓圈將它們圍繞起來(lái)，大腦就會(huì)傾向于認(rèn)為即使被隔斷，這些圓圈依然是一組的；還有就是對(duì)稱(chēng)性（Symmetry）遠(yuǎn)離。

我們通過(guò)游戲案例來(lái)理解這些規(guī)則是如何被使用的：

這是《戰(zhàn)地1》的一個(gè)截圖，用的是觀察者模式，我們可以看到截圖中的內(nèi)容形成了閉合的場(chǎng)景接近的東西都在同一片地方，包括icon也很接近。然后是連續(xù)性，你可以連續(xù)看到不同的功能，相似性表現(xiàn)在強(qiáng)調(diào)內(nèi)容都使用了同樣的顏色并加粗。圖形背景，這些框內(nèi)的大小實(shí)際上可以變化，沒(méi)有誰(shuí)是背景；外殼，我們都使用盒子一樣的形狀將不同的功能包含在里面。

對(duì)稱(chēng)性可以沖中軸線(xiàn)看出來(lái)。

還有一些適用性方面的規(guī)則我們也應(yīng)該注意，在你設(shè)計(jì)任何屏幕的時(shí)候，都不要同時(shí)出現(xiàn)7個(gè)以上的獨(dú)特物品，這會(huì)讓用戶(hù)覺(jué)得信息量太大。菜單的設(shè)計(jì)不要超過(guò)3層，功能可視性指的是一些功能要符合用戶(hù)預(yù)期；你的UI還需要有一個(gè)聚焦區(qū)域，讓人們知道他們?cè)诳吹氖鞘裁础?/span>

你要讓狀態(tài)變化非常清晰，讓用戶(hù)點(diǎn)了按鈕之后就可以看到明顯改變；還要有頁(yè)面流，讓不同的內(nèi)容成等級(jí)分布，還要提供幫助以及提示選擇。

這是《合金裝備》里的定制化，你可以看到屏幕里有7個(gè)物品，我們不希望增加更多，因?yàn)榕伦層脩?hù)覺(jué)得困惑。這些菜單只有3層，你只需要點(diǎn)擊三次就可以實(shí)現(xiàn)定制化，每個(gè)按鈕都有對(duì)應(yīng)的功能，還有聚焦區(qū)域，狀態(tài)變化也非常明顯，內(nèi)容分布也比較有序，我們還提供了幫助與提示。

本質(zhì)上來(lái)說(shuō)，我們?cè)O(shè)計(jì)是為了被用戶(hù)高效率理解，但同時(shí)還希望視覺(jué)和諧，不能讓不同的物品彼此沖突。

這時(shí)候我們就需要收集數(shù)據(jù)，最好是了解你的游戲，創(chuàng)意方向、藝術(shù)方向、目標(biāo)市場(chǎng)，要將這些規(guī)律與藝術(shù)、代碼、策劃結(jié)合起來(lái)，確保所有人對(duì)游戲的目標(biāo)一致。你需要問(wèn)的是，什么是對(duì)玩家最好的？

你做的是一款游戲，但它會(huì)給玩家?guī)?lái)體驗(yàn)感，你還要了解游戲的特點(diǎn)，調(diào)性是什么、風(fēng)格是什么？主題處于什么時(shí)代？這些都會(huì)影響UI設(shè)計(jì)。

你還可以尋找參照物，比如視頻、電影、書(shū)籍、移動(dòng)平臺(tái)等等，因?yàn)槟愕膮⒄瘴镌蕉啵蜁?huì)對(duì)你的決策帶來(lái)更多的信息。

你還要意識(shí)到設(shè)計(jì)趨勢(shì)，業(yè)內(nèi)有很多的趨勢(shì)，你不希望自己的設(shè)計(jì)被看作是PS2時(shí)代的產(chǎn)物，而是為新主機(jī)世代或者最新的設(shè)計(jì)方向。即便是系列游戲，也要確保每一款游戲看起來(lái)以及給人的感覺(jué)都是獨(dú)特的。

二、UI處理過(guò)程

這部分覆蓋的內(nèi)容很多，但我們要從網(wǎng)格說(shuō)起，它可以用于游戲里的很多方面，我們說(shuō)的是20×13的網(wǎng)格。

黃金比例網(wǎng)格，你們都有手機(jī)，如果對(duì)照這個(gè)網(wǎng)格，就會(huì)發(fā)現(xiàn)它可以呈現(xiàn)非常令人舒適的布局。

還要注意長(zhǎng)寬比，目前我們關(guān)注的是16：9的比例，但你也要注意4：3，如果人們沒(méi)有最新科技的設(shè)備，你依舊要確保他們能夠體驗(yàn)游戲，而不會(huì)看到很多東西重疊在一塊。未來(lái)可能還有更先進(jìn)的科技，也不排除21：9的比例，所以你要對(duì)此保持關(guān)注。

另外，把所有重要的信息都保持在90%的屏幕之內(nèi)，這個(gè)區(qū)域也被稱(chēng)為安全框架，比如文字、icon以及對(duì)UI非常重要的東西。

不要用信息填滿(mǎn)屏幕的每一個(gè)地方，留一些空間作為內(nèi)容緩沖帶。

要保持UI的一致性和協(xié)調(diào)性，即使是右邊的情況實(shí)際上也有提升的空間，要盡量讓UI布局盡量有連貫性，加入盡可能多的錨定點(diǎn)。

這是《BF1》的截圖，如果把它分成9塊，我們可以看到9個(gè)錨定點(diǎn)。做UI的時(shí)候，很多信息容易重疊，你要確保這些區(qū)域能夠精準(zhǔn)表達(dá)某些信息。這還意味著，當(dāng)你的長(zhǎng)寬比變化的時(shí)候，可以對(duì)應(yīng)把這些錨定點(diǎn)和對(duì)應(yīng)的信息轉(zhuǎn)移。

排版

你們可以看到為什么選擇對(duì)的字體很重要，我們需要看更多的信息，比如是否有法律問(wèn)題、是否具有可讀性，字體的風(fēng)格、本地化方面的考量、預(yù)算等等。

這是《孤島危機(jī)》的一個(gè)畫(huà)面，實(shí)際上是實(shí)驗(yàn)中的，但因?yàn)槭褂玫淖煮w不適合游戲風(fēng)格，我們不得不重新選擇。

6英尺規(guī)則

這條規(guī)則指的是，當(dāng)玩家使用主機(jī)玩游戲的時(shí)候，他們離電視屏幕的距離是6英尺左右，這不僅意味著你要留意字體大小，還要確保所選字體在這個(gè)距離范圍內(nèi)能夠清晰地被玩家看到。

設(shè)計(jì)字體是有規(guī)則的，但我們最關(guān)注的事情是x-height，也就是o、p、b等字母同一個(gè)區(qū)域的高度。

比如這里的b和e在不同字體下的比例也是不一樣的，字體越小越難看清，因此你要確保在更遠(yuǎn)的距離下，游戲里的文字能夠被玩家讀懂。

不要只是簡(jiǎn)單下載免費(fèi)字體使用，這在3A游戲里是行不通的，要確保你的字體支持外語(yǔ)字母，包括數(shù)學(xué)符號(hào)、特殊字符等等。

通常來(lái)說(shuō)，你要買(mǎi)下整個(gè)字體族，因?yàn)檫@對(duì)你會(huì)非常有用，專(zhuān)業(yè)的字體會(huì)有大量不同的表現(xiàn)形式，對(duì)于比較大的文字，使用正常字體，要保證字體不會(huì)太薄，以至于在屏幕上看不到，所以粗一些的字體適合用于比較小的文字。

在同一個(gè)句子里，不要使用2種以上的字體變化，最后一行顯然是個(gè)反面教材。

如果你對(duì)字體不了解，不知道該選哪一個(gè)，這個(gè)列表可以幫你開(kāi)始，這些字體都是可以從主流字體網(wǎng)站獲得的，雖然不夠完美，但是不錯(cuò)的開(kāi)始。

另外，請(qǐng)不要拉伸字體，因?yàn)檫@就像把圖片中的人臉拉伸一樣，人們不會(huì)喜歡這樣，如果要伸縮，保持比例。

在使用文本的時(shí)候，不要在同一行排太多字，最好的范圍是每行60-120個(gè)字母，左對(duì)齊以便閱讀。

本地化的時(shí)候，要留40%的空間用于不同語(yǔ)言的字符超標(biāo)（德語(yǔ)、土耳其語(yǔ)）。另外要注意的是，阿拉伯語(yǔ)和希伯來(lái)語(yǔ)都是從右到左排列的。

這是《BF：Operation》英文版UI，右下角的箱子我們不得不重做，因?yàn)樗L(zhǎng)了，所以在設(shè)計(jì)的時(shí)候要考慮不同語(yǔ)言的UI布局。

可能很多人不知道這是什么，這是游戲標(biāo)簽長(zhǎng)度的上限，比如在一句話(huà)當(dāng)中，如果有很多內(nèi)容組成，你就要考慮隨機(jī)部分的長(zhǎng)度，比如在玩家看到的對(duì)話(huà)中，如果要加入玩家名字，就要保證這個(gè)長(zhǎng)度能夠適合。

這是技術(shù)是游戲標(biāo)簽設(shè)計(jì)最糟糕的場(chǎng)景，有的是用了別的形式，比如WMWM，但用這樣標(biāo)簽是有問(wèn)題的。

接下來(lái)我們要說(shuō)的是形狀語(yǔ)言，它可以支撐你游戲的認(rèn)知理解的部分，尤其是具有連貫性的形狀，可以幫你的游戲形成特定的外觀和感覺(jué)，比如節(jié)奏、紋理、標(biāo)志元素等等。

我們還需要確保形狀具有連貫性，比如你在游戲里做打擊動(dòng)作，如果開(kāi)始是上面的形狀，結(jié)束是底部的形狀，在UI當(dāng)中就會(huì)給人很奇怪的感覺(jué)，看起來(lái)是不連貫的，角度和圓角也是一樣，這些東西也要具有連續(xù)性。

這是《合金裝備》里的截圖，當(dāng)你定制化的時(shí)候，這些元素給人感覺(jué)是它們?cè)揪褪且惑w的，沒(méi)有什么形狀給人的感覺(jué)是比較奇怪的，它們都比較適合軍事主題。

這是游戲里不同區(qū)域的一些東西，它們都是用了相似的形狀語(yǔ)言，顏色也比較一致。

這是《孤島危機(jī)3》的截圖，來(lái)自不同位置的截屏，我們可以看到不管是在哪個(gè)地方，給人的感覺(jué)都是在一個(gè)產(chǎn)品之內(nèi)，讓游戲體驗(yàn)具有連貫性。

圖像學(xué)

要確保它們?cè)谧钚』钠聊怀叽缦乱材芎芎玫卣故荆龅胶?jiǎn)單又不失多樣化，確保斜視情況下也能準(zhǔn)確地看到形狀，這才是好的icon，屏幕上的icon最大尺寸為1英尺 X 1英尺。

要得到出色的icon設(shè)計(jì)，你首先要有構(gòu)造網(wǎng)格，以便讓你的icon在UI當(dāng)中顯得自然而具有連續(xù)性。

你還需要設(shè)計(jì)icon參數(shù)，以便讓人們?yōu)槟阍O(shè)計(jì)icon，或者理解你的icon設(shè)計(jì)。

對(duì)于icon，我們還要做平衡，盡管三角形和圓形沒(méi)有占那么大的空間，但我們依然要對(duì)它的大小進(jìn)行調(diào)整，讓我們的icon看起來(lái)是連貫的。

比如這些icon，它們雖然占據(jù)的空間不同，但尺寸都在同樣大小的正方形內(nèi)，盡管在數(shù)學(xué)上并不完全相等，但至少它們給人的感覺(jué)是一致的，你在UI設(shè)計(jì)的時(shí)候應(yīng)該注意，這樣做可以確保視覺(jué)和諧。

輪廓與可讀性：測(cè)試icon不同視角的感覺(jué)，因?yàn)檫@會(huì)影響不同距離下的icon效果，盡管由于玩法的原因它們之間的差別很小，如果不能第一眼就看出icon是什么，那么玩家很可能會(huì)錯(cuò)過(guò)一些重要的功能。所以，你要在游戲里測(cè)試不同的效果，看哪些有用，哪些不好用。

有時(shí)候icon給人的感覺(jué)還可能是模棱兩可的，所以有時(shí)候可能需要用文字標(biāo)注其含義，如果你沒(méi)有看到這些解釋的文字，可能很多人不知道這些icon是什么意思。

這張圖當(dāng)中，有些icon可能會(huì)模棱兩可，但有了注釋之后，所有人都知道它們代表什么。

確保你的每一個(gè)icon都有連貫的風(fēng)格，這不僅與形狀語(yǔ)言有關(guān)，還和游戲的視覺(jué)識(shí)別度有關(guān)，也就是把你的藝術(shù)方向展示到每一個(gè)icon當(dāng)中，有時(shí)候它們甚至可以取代文字，有了識(shí)別度較高的icon，你可以節(jié)省大量的UI空間。

比如這些icon，它可以擁有不止一個(gè)意義，所以這類(lèi)屬于模棱兩可的。

顏色心理學(xué)

顏色在情感表達(dá)和品牌方面扮演很多的角色，我總體來(lái)說(shuō)，我希望你們不要依賴(lài)于顏色，盡管它對(duì)品牌推廣有用，但顏色可能會(huì)被以不同的方式解讀。

很多人可能都知道顏色理論，如果不知道，你們可以專(zhuān)門(mén)去搜索（Color Theory），很容易理解。

但是，在不同的文化背景下，每個(gè)顏色都可能有不同的意義，所以在使用顏色的時(shí)候，你要注意不讓它冒犯特定用戶(hù)的文化習(xí)俗。由于你的游戲是3A，所以將會(huì)被全球玩家體驗(yàn)，所以在設(shè)計(jì)顏色之前要考慮顏色在不同文化當(dāng)中的意義。

總體來(lái)說(shuō)，我們還要限制使用的顏色數(shù)量，最好是5個(gè)以?xún)?nèi)，當(dāng)然，每一個(gè)顏色最好都有其目的，避免完全飽和的顏色。

這是《孤島危機(jī)》的另一個(gè)案例，我們使用不同顏色表示按鈕的不同狀態(tài)，這些顏色非常適合軍事主題，我們并不完全依賴(lài)顏色，但它們的確可以帶來(lái)視覺(jué)理解上的幫助。

這張圖的右側(cè)我們可以看到，不同的背景色也會(huì)對(duì)形狀帶來(lái)很大的影響，所以在設(shè)計(jì)UI的時(shí)候要考慮到，設(shè)計(jì)獨(dú)特形狀的時(shí)候，不同背景下它們可能被用不同的方式解讀，你最初的設(shè)計(jì)可能會(huì)行不通。

《孤島驚魂4》截圖

這是《最終幻想15》，他們?cè)谄聊恢行氖褂昧思t色，很容易引起玩家注意。

色盲現(xiàn)象也是游戲不能過(guò)于依賴(lài)顏色的另一個(gè)原因，所以我們?cè)谶x擇顏色的時(shí)候需要注意。

這些是不同的色盲，包括紅、綠和藍(lán)色盲。

很多的3A游戲都會(huì)關(guān)注色盲，不過(guò)你也不希望只為一小部分用戶(hù)設(shè)計(jì)，所以最好是給用戶(hù)自定義顏色的功能，讓他們選擇自己覺(jué)得舒適的顏色。

UI呈現(xiàn)

這些看起來(lái)是非常高層次設(shè)定的東西，比如non-diegetic、diegetic，Spatial、Meta，前兩個(gè)是與電影有關(guān)，它們的呈現(xiàn)方式和劇情相關(guān)。

通常來(lái)說(shuō)，大多數(shù)游戲看到的是Non-Diegetic式UI，它與玩法關(guān)聯(lián)不大，用戶(hù)實(shí)際上不需要和UI互動(dòng)，就像是游戲世界上重疊了一層UI。

Diegetic是和游戲玩法互動(dòng)的，它們被設(shè)計(jì)在游戲世界之內(nèi)、玩家們可以看到甚至能直接互動(dòng)，我個(gè)人比較喜歡這類(lèi)UI。

Spatial UI通常與文字、角色輪廓等方面聯(lián)系在一起，更多與效果有關(guān)，比如《最后生還者》和《神秘海域4》都有角色輪廓。

Meta UI并不是要特意告訴你什么事情，只是表達(dá)一種屏幕效果。

不過(guò)，很多游戲里使用的標(biāo)準(zhǔn)UI風(fēng)格并不意味著它就是最好的，比如這張圖中的香蕉（因?yàn)橥庑魏芟瘢皇怯?D素材呈現(xiàn)了3D效果，當(dāng)我體驗(yàn)FPS或者TPS的時(shí)候，這些東西是2D的，你不知道某些東西是在你的上方或者下方，這些東西可以告訴你方向，但無(wú)法呈現(xiàn)空間感，比如上下前后。

如果你要用2D方式表達(dá)3D信息，不要照搬所有人都在用的方法，最好是尋找其他方式來(lái)呈現(xiàn)，因?yàn)檫@可能無(wú)法被玩家準(zhǔn)確解讀，比如《合金裝備4》的方式就很不錯(cuò)。

2D美術(shù):2D似乎與UI的所有方面都有關(guān)系，比如具有識(shí)別性的東西，我們?nèi)绾纬尸F(xiàn)給玩家,包括一些屏幕截圖和加載界面。

引擎知識(shí)

了解我們的局限，做UI的時(shí)候我們需要知道引擎的限制，你需要什么樣的技術(shù)、如何充分利用系統(tǒng)、如何做文檔以及測(cè)試等等。

引擎方面比較好的一點(diǎn)是，我們可以使用著色器。

比如從最左側(cè)的基礎(chǔ)UI美術(shù)，逐漸加入陰影、模糊效果，到最右側(cè)對(duì)眼睛越來(lái)越舒適。

這是加了扭曲效果的另一個(gè)案例。

我們?cè)凇豆聧u危機(jī)》當(dāng)中就做了類(lèi)似的事情。

我們的UI被映射到了多邊形中，我們將著色器效果應(yīng)用到這些多邊形中。

你還可以用引擎做更多3D方面的事情，比如場(chǎng)景，將你的UI與環(huán)境組合在一起。

在嘗試的時(shí)候會(huì)比較有趣，你可以將UI與玩法聯(lián)系起來(lái)，可以經(jīng)常測(cè)試，因?yàn)槟悴幌Ｍ鸘I與游戲無(wú)關(guān)。

三、執(zhí)行

通常來(lái)說(shuō)，執(zhí)行UI主要使用PS、AI和AE三個(gè)軟件，我非常喜歡用Illustrator。

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

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

做數(shù)據(jù)模型的時(shí)候，你希望搞清楚UI的不同部分，確定你的風(fēng)格、主題，通過(guò)Illustrator你可以嘗試很多東西。

通過(guò)不同icon的效果，你可以讓人們理解游戲里發(fā)生了什么，選擇按鈕的時(shí)候讓它們具有連貫性。

UI總要盡可能簡(jiǎn)單，這是前端截圖，包括形狀語(yǔ)言、字體、顏色等。

服務(wù)器界面看起來(lái)比較擁擠，但你需要讓這些信息被用戶(hù)很容易理解。

定制化比較復(fù)雜，但這里你可以增加很多的diegetic元素，將UI與玩法融合在一起。

最后是回合結(jié)束。

這是《戰(zhàn)地1》觀戰(zhàn)模式早期的UI，界面展示的東西太多了。

動(dòng)態(tài)模型也是很容易引起玩家注意力的一個(gè)元素，只需要簡(jiǎn)單的動(dòng)畫(huà)就好，它需要與你的美術(shù)風(fēng)格一致，我們可以通過(guò)示例看到，動(dòng)態(tài)UI對(duì)你傳遞的信息有很大的影響。

這是很簡(jiǎn)單的動(dòng)畫(huà)，但展示了你可以用很整潔的動(dòng)畫(huà)，也可以用夸張的動(dòng)畫(huà)，或者用科技感的動(dòng)畫(huà)。

有時(shí)候，展示動(dòng)畫(huà)比很多的描述都更容易被玩家理解，比如這個(gè)案例。

即便是游戲發(fā)布之后，你的UI也是可以一直提升的。

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

四、隱藏因素

最后我們需要了解的是隱藏的因素，這些東西是會(huì)影響UI的，因此你需要注意。

比如本地化，你需要給有些語(yǔ)言版本留出40%的文本空間，不同顏色在不同文化中的意義，以及一些可能在某些文化里比較具有冒犯性的標(biāo)志。

技術(shù)要求，這與游戲要上架的平臺(tái)相關(guān)，在研發(fā)主機(jī)游戲的時(shí)候，你需要清楚這些要求，但還需要了解屏幕尺寸、輸入操作、加載時(shí)間等等。

最后要說(shuō)的是，UI也可以做到?jīng)]有UI，比如粒子效果、角色動(dòng)畫(huà)、音頻提示等等，這些都可以替代UI。

設(shè)計(jì)UI的時(shí)候我們不能做令人困惑的布局設(shè)計(jì)，也不能直接從其他游戲里抄襲，你需要為自己的游戲設(shè)計(jì)獨(dú)特的風(fēng)格。

五、總結(jié)

首先是研究，你需要對(duì)設(shè)計(jì)有整體的了解，然后為你的游戲有針對(duì)性地設(shè)計(jì)風(fēng)格、主題，在做任何工作之前，確保你了解這些設(shè)計(jì)理念。

視覺(jué)辨識(shí)度，排版、形狀與icon以及顏色等多種元素的組合，可以讓你的游戲擁有自己的風(fēng)格，找到一些獨(dú)特的東西，選擇好的字體。

執(zhí)行，在了解以上理論之后，你需要做不同的嘗試，讓人們更容易理解游戲的體驗(yàn)流程和UI布局。

考慮到一些隱藏因素，比如平臺(tái)限制、本地化可能帶來(lái)的問(wèn)題。

UI就像是個(gè)忍者，這是玩家們注意不到的，但當(dāng)被人們看到的時(shí)候，意味著你執(zhí)行的很不錯(cuò)。