本章主要聚焦于游戲 UI 的思維和能力。

作為游戲 UI 來(lái)講，我們需要掌握這一棵技能樹(shù)：

1. 理解你的游戲
2. 抓住用戶畫(huà)像
3. 掌握交互設(shè)計(jì)理論
4. 把控視覺(jué)設(shè)計(jì)
5. 多玩游戲

推薦閱讀

一、理解你的游戲

理解游戲，還是老朋友，理解體驗(yàn)的六個(gè)要素以及它們之間的關(guān)系：

①機(jī)制 - 行為：機(jī)制包括游戲中可能發(fā)生的所有動(dòng)作和所有游戲?qū)ο?，由游戲?guī)則定義的所有內(nèi)容。

動(dòng)作是機(jī)制在每種情況下的運(yùn)作方式。

②美學(xué)-感官刺激：美學(xué)包括旨在喚起玩家情緒的所有感官和認(rèn)知設(shè)計(jì)。

呈現(xiàn)給玩家的美感稱為感官刺激。

③故事世界-敘事：故事世界為游戲提供了實(shí)質(zhì)性的內(nèi)容。那些沒(méi)有的世界，是因?yàn)樗鼈儧](méi)有被放入游戲中，只是由游戲設(shè)計(jì)者想象出來(lái)的，或者由于所包含的情況而在邏輯上變得必要或可能。

敘述是游戲過(guò)程中發(fā)生的故事世界中的故事片段。

游戲的本質(zhì)是由規(guī)則創(chuàng)造的一種體驗(yàn)。

游戲規(guī)則屬于游戲機(jī)制，而游戲機(jī)制是一款游戲的真正核心，是剝離了美術(shù)、程序技術(shù)和敘事后的互動(dòng)關(guān)系。核心機(jī)制包含：物理、內(nèi)部經(jīng)濟(jì)、漸進(jìn)、戰(zhàn)術(shù)、社交，任選一款游戲，都會(huì)出現(xiàn)以上內(nèi)容的身影；游戲的核心機(jī)制是幫助我們?nèi)ニ伎己侠淼捏w驗(yàn)設(shè)計(jì)理論。

故事世界為游戲提供了實(shí)質(zhì)性的內(nèi)容，結(jié)合故事去推敲時(shí)代背景、國(guó)籍、風(fēng)格等設(shè)計(jì)方向。

游戲美學(xué)即我們所見(jiàn)所感的美術(shù)設(shè)計(jì)，UI 基于游戲美學(xué)本身或不影響美學(xué)本身去做沉浸式的設(shè)計(jì)。

UI 要理解游戲的機(jī)制、游戲的故事和美學(xué)才能開(kāi)始做設(shè)計(jì)，基于機(jī)制、故事、美學(xué)的不同，我們的設(shè)計(jì)不斷變化而達(dá)到合適這款游戲。

例如在制作《明日之后-半感染者》資料片的 UI 設(shè)計(jì)中，所有 UI 拿到感染者的故事簡(jiǎn)介和部分美術(shù)概念圖，以此需要我們來(lái)做針對(duì)新感染者的一套 UI 設(shè)計(jì)。

很明顯每個(gè)人對(duì)于感染者、半感染者的理解參差不齊，如果就這樣開(kāi)始，我們所有人的設(shè)計(jì)一定是風(fēng)格各異。而我們要做的是并聯(lián)所有人的想法，達(dá)到一個(gè)共識(shí)的目標(biāo)。

1. 基于我們對(duì)于游戲引擎的理解，又有 TA（技術(shù)美術(shù)）實(shí)現(xiàn)我們的想法，我們想要做更加順滑和流暢的動(dòng)畫(huà)式體驗(yàn)設(shè)計(jì)。
2. 通過(guò)對(duì)美術(shù)的理解，半感染者生活的地方以植物串聯(lián)，涵蓋孢子、花朵、藤條、戰(zhàn)爭(zhēng)為主要線索；
3. 通過(guò)故事對(duì)人物的解讀，半感染者不是人類(lèi)更像是感染者，和人類(lèi)共用一套 UI 資源是否合理？

分析以上種種，得出了我們制作半感染者 UI 框架的色卡、風(fēng)格紋理、主視覺(jué) seed、圖標(biāo)類(lèi)型等。

因此游戲 UI 的制作離不開(kāi)你對(duì)游戲整體的理解，這是最純粹、直接的思維能力；理解了游戲、下一步就是需要去理解玩這款游戲的人。

二、抓住用戶畫(huà)像

參與游戲的體驗(yàn)或多或少都會(huì)有對(duì)于游戲用戶的分析報(bào)告，這種分析報(bào)告是最客觀的數(shù)據(jù)，并非我們臆想的主觀內(nèi)容，這樣的數(shù)據(jù)對(duì) UI 來(lái)說(shuō)有什么實(shí)際意義嗎？

當(dāng)然有！

一個(gè)正確、完整的用戶畫(huà)像幫助你全面了解目標(biāo)用戶，用戶群體是誰(shuí)？什么年齡段？他們喜歡什么？他們的痛點(diǎn)是什么？

了解目標(biāo)玩家的偏好、習(xí)慣和需求，會(huì)影響最終的設(shè)計(jì)決策。

用戶畫(huà)像的意義：團(tuán)隊(duì)成員在體驗(yàn)設(shè)計(jì)的過(guò)程中能夠拋開(kāi)個(gè)人喜好，將焦點(diǎn)關(guān)注在目標(biāo)用戶的動(dòng)機(jī)和行為上進(jìn)行產(chǎn)品設(shè)計(jì)；現(xiàn)代化的設(shè)計(jì)，都強(qiáng)調(diào)以用戶為中心的設(shè)計(jì)思想。（和下面要講的：交互設(shè)計(jì)理論以用戶為中心一致）

如何有效的抓住用戶畫(huà)像？

舉個(gè)例子，假設(shè)：

1. 王者榮耀是 90% 的女性玩家玩的第一款 MOBA 游戲。而吸引女性玩家更為重要的動(dòng)力，是后期規(guī)?；纳缃粚傩?。
2. 暗區(qū)突圍是一款戰(zhàn)術(shù)博弈品類(lèi)的 FPS 射擊游戲，融合了經(jīng)濟(jì)系統(tǒng)，非常受硬核軍事愛(ài)好者喜歡。

從上面的用戶畫(huà)像挖掘關(guān)鍵詞：

王者榮耀：女性向、社交、帶妹、皮膚等。

暗區(qū)突圍：硬核、男性向、槍械、戰(zhàn)略性等。

根據(jù)這些對(duì)于用戶的側(cè)寫(xiě)，我們的設(shè)計(jì)決策就會(huì)隨著用戶畫(huà)像偏向不同范圍。

例如從色彩方面，王者在后續(xù) UI 設(shè)計(jì)中可能會(huì)更偏向女性喜歡的顏色，暗區(qū)則是偏男性、低飽和的方向。（非官方分析，只是我的片面分析，實(shí)際的方向是復(fù)雜的用戶行為，僅僅幫助如何理解用戶畫(huà)像）

以上兩點(diǎn)是游戲 UI 設(shè)計(jì)師應(yīng)該具備的思維能力，這是一種有目的性且?guī)н壿嫷乃伎挤绞剑?qǐng)不要像藝術(shù)家一樣去思考。

三、掌握交互設(shè)計(jì)理論

交互的內(nèi)容一搜一大把，從理論到實(shí)操都有，但是會(huì)相對(duì)沒(méi)有那么系統(tǒng)。交互設(shè)計(jì)不是純粹的設(shè)計(jì)專業(yè)，它是一門(mén)完整且系統(tǒng)交叉的學(xué)科。如何系統(tǒng)性的學(xué)習(xí)交互設(shè)計(jì)理論和實(shí)踐，可以看看這一套學(xué)習(xí)方法。

1. 設(shè)計(jì)思維與方法

1. 以用戶為中心的設(shè)計(jì)思想與流程；
2. 設(shè)計(jì)思維及其發(fā)展歷程與思維模型，理解設(shè)計(jì)思維的五個(gè)步驟；
3. 用戶可用性設(shè)計(jì)原則和設(shè)計(jì)心理學(xué)；
4. 用戶體驗(yàn)設(shè)計(jì)和用戶研究；需求分級(jí)理論，kano 模型，馬斯洛需求層次理論，用戶體驗(yàn)五要素；
5. 情感化設(shè)計(jì)，以用戶的情感和情緒作為設(shè)計(jì)出發(fā)點(diǎn)；
6. 服務(wù)設(shè)計(jì)思想；
7. 視覺(jué)設(shè)計(jì)風(fēng)格原理。

作為一個(gè)游戲 UI 設(shè)計(jì)師，學(xué)習(xí)交互理論是必然的過(guò)程，然而交互的知識(shí)不僅龐大，并且必須要結(jié)合實(shí)際情況反復(fù)錘煉，才能夠真正的學(xué)以致用，短時(shí)間也不可能完全掌握。

所以我在這里提供一個(gè)版本，是我在剛開(kāi)始學(xué)習(xí)交互的時(shí)候用上的簡(jiǎn)裝版：

1. 理解設(shè)計(jì)思維的 5 個(gè)步驟，明確需要解決的核心目標(biāo)！
2. 謹(jǐn)記用戶可用性原則；
3. 背下基礎(chǔ)理論知識(shí)示能，意符、映射、反饋、概念模型交互 5 要素；
4. 記下用戶可用性十大交互原則（尼爾森十大交互原則）

我的意思當(dāng)然不只是記下名稱，而是這些關(guān)鍵詞背后的實(shí)際意義。

簡(jiǎn)裝版能夠處理大部分的普通情況，如果是需要進(jìn)階到資深版本還是需要系統(tǒng)性的學(xué)習(xí)，因?yàn)楹?jiǎn)裝版能解決的問(wèn)題是有限的，我使用簡(jiǎn)裝版的意義是因?yàn)槲夷芰Σ粡?qiáng)，但需要跟上其他大佬的節(jié)奏，盡可能的拉平認(rèn)知，一個(gè)取巧的辦法罷了。

之前在網(wǎng)易的時(shí)候，看過(guò)一篇關(guān)于 FPS 游戲槍械擊中反饋的交互層文章：是將一個(gè)準(zhǔn)星的五要素都分析了，甚至是不同槍械的開(kāi)火反饋?zhàn)隽朔浅＜?xì)致的講解，看完之后以為自己又懂了，升華了，牛逼了。

而當(dāng)自己在《明日之后》做“BOSS 血條受槍械擊中反饋設(shè)計(jì)”的時(shí)候，才理解這個(gè)東西做起來(lái)有多復(fù)雜，理論是理論，實(shí)際是實(shí)際，發(fā)現(xiàn)自己又不行了，菜成狗了。理論能幫助你指明目標(biāo)，實(shí)踐才能解決實(shí)際問(wèn)題，反過(guò)來(lái)亦然，二者缺一不可。

以上是快速學(xué)習(xí)交互的方式，還有許多米勒定律、奧卡姆剃刀原理、格式塔心理學(xué)等很多內(nèi)容是可以學(xué)習(xí)的，推薦幾本比較好的書(shū)籍《UX for beginners》，《心流：最有體驗(yàn)心理學(xué)》，《認(rèn)知與設(shè)計(jì)：理解 UI 設(shè)計(jì)準(zhǔn)則》，《設(shè)計(jì)心理學(xué) 1234》神中神。

如何高效學(xué)習(xí)交互設(shè)計(jì)知識(shí)：堅(jiān)持理論學(xué)習(xí)（多讀書(shū)）、實(shí)操積累（多思考）、跟著大佬走（多學(xué)習(xí)）。

三、把控視覺(jué)設(shè)計(jì)

游戲原畫(huà)、場(chǎng)景是游戲視覺(jué)呈現(xiàn)的重要組成部分，而游戲 UI 是玩家與游戲世界直接連接的橋梁。

UI 一方面是引導(dǎo)，讓玩家理解游戲機(jī)制；另一方面是貼合游戲美術(shù)，讓玩家沉侵在游戲中。

我們需要的能力：億點(diǎn)繪畫(huà)能力+億點(diǎn)平面能力+億點(diǎn)色彩搭配能力+億點(diǎn)創(chuàng)意。

①繪畫(huà)：想法創(chuàng)造術(shù)，創(chuàng)造貼合游戲美術(shù)的場(chǎng)景、seed、構(gòu)圖、圖標(biāo)等基礎(chǔ)設(shè)計(jì)。

當(dāng)然不是要你的繪畫(huà)能力達(dá)到那些原畫(huà)大佬的程度，那就真隔著一個(gè)宇宙了，至少要達(dá)到通過(guò)繪畫(huà)能讓人理解的程度吧，這樣的基礎(chǔ)上越往上走越好，讓別人更全面的理解你所繪畫(huà)的東西。例如：能畫(huà)一個(gè)圖標(biāo)，畫(huà)出一個(gè)場(chǎng)景概念這樣的能力。

②平面：排版、結(jié)構(gòu)、構(gòu)成的合理運(yùn)用，對(duì)于界面的布局、系統(tǒng)的排版、功能信息的分類(lèi)有著重要意義。

而排版則是對(duì)親密性、對(duì)齊、重復(fù)、對(duì)比四項(xiàng)基本原則的運(yùn)用（《寫(xiě)給大家看的設(shè)計(jì)書(shū)》）；

結(jié)構(gòu)是界面的整體信息的分布組成。構(gòu)成中，包含點(diǎn)線面、紋理、形狀、材質(zhì)的運(yùn)用，其中紋理又是可以寫(xiě)一篇文章的內(nèi)容，包含中國(guó)，歐洲，日本，埃及等不同階段的文化圖形組成。

③色彩：配色，不用多說(shuō)了，色彩心理學(xué)看起來(lái)。

④創(chuàng)意：創(chuàng)造脫離現(xiàn)實(shí)的設(shè)計(jì)能力，解決相應(yīng)的問(wèn)題使之更加合理。

⑤創(chuàng)造能力：基于游戲整體的理解+功能的理解+繪畫(huà)能力=創(chuàng)造性的設(shè)計(jì)

所以說(shuō)為什么是億點(diǎn)點(diǎn)能力了吧，如果你有雕塑制作、三維制作、工業(yè)制圖、家裝、美術(shù)創(chuàng)作等其他經(jīng)驗(yàn)也是加分項(xiàng)。

四、平衡不可能三角

我們有了以上的能力，能力之間自然就會(huì)產(chǎn)生沖突--不可能三角，我們要如何平衡這樣三角關(guān)系；當(dāng)然這只是理論狀態(tài)，有時(shí)又何止是三角，甚至還需要加入時(shí)間、資源、人力等等因素，這個(gè)時(shí)刻才是真正考驗(yàn)綜合能力的時(shí)候。

舉一個(gè)經(jīng)常發(fā)生的示例：

1. 交互設(shè)計(jì)是有目的性、有邏輯性的規(guī)范化設(shè)計(jì)；
2. 視覺(jué)設(shè)計(jì)是相對(duì)比較主觀的創(chuàng)作型工作，因?yàn)閷徝佬枰?jīng)常破壞已經(jīng)被制定好的視覺(jué)結(jié)構(gòu)；
3. 兩者在進(jìn)行平衡的時(shí)候，容易造成反復(fù)修改的結(jié)果并影響最終體驗(yàn)或規(guī)范。

這種事情也會(huì)發(fā)生在我身上，自己做完 UX，規(guī)范、結(jié)構(gòu)我已經(jīng)定好了；再去做視覺(jué)設(shè)計(jì)就開(kāi)始主觀創(chuàng)作了，會(huì)覺(jué)得怎樣更有表現(xiàn)力，畫(huà)面更有張力，這個(gè)配色超叼，于是不得不破壞之前的一些結(jié)構(gòu)，做一些小范圍或是功能的調(diào)整。

初期的時(shí)候容易改動(dòng)過(guò)大，導(dǎo)致功能位置的改變，后來(lái)只要秉持一個(gè)原則：UI 一方面是引導(dǎo)，讓玩家理解游戲機(jī)制；另一方面是貼合游戲美術(shù)，讓玩家沉浸在游戲中。

在平衡功能和視覺(jué)的時(shí)候，功能肯定是第一優(yōu)先級(jí)，然后才是視覺(jué)；好看很重要，但體驗(yàn)更重要，游戲視覺(jué)的目的：引導(dǎo)+沉浸感，核心是良好的游戲體驗(yàn)。

在一個(gè)人的腦子里面，交互和視覺(jué)的制作已經(jīng)是兩套思考方式了，我們?cè)侔呀换ズ鸵曈X(jué)分到兩個(gè)人身上，那思考方式又是成倍的疊加；

因此，在實(shí)際工作中，交互和視覺(jué)在溝通上需要充分的信任和團(tuán)結(jié)，而不是相互扣鍋（別問(wèn)我為什么知道）。

總結(jié)：

1. 當(dāng)你不知所措的時(shí)候，請(qǐng)記住你做這個(gè)功能的核心目標(biāo)！
2. 游戲的制作不只是單個(gè)環(huán)節(jié)，而是一套整體的工業(yè)流程，因此游戲 UI 只是游戲制作中的一環(huán)，要多部門(mén)甚至跨部門(mén)多溝通才能解決許多問(wèn)題，簡(jiǎn)稱：靠隊(duì)友！靠領(lǐng)導(dǎo)！靠大佬！
3. 做完之后在實(shí)際 QA 階段去感受、去驗(yàn)證、去修改，好東西都是磨出來(lái)的！
4. 并在這個(gè)重復(fù)的過(guò)程中不斷完善和優(yōu)化你的設(shè)計(jì)。

五、多玩游戲

夠多的體驗(yàn)，帶有邏輯的體驗(yàn)不同類(lèi)型游戲。

這樣做的理由：成品的 UI 是通過(guò)不斷取舍不可能三角的最終結(jié)果，許多你以為的簡(jiǎn)單其實(shí)是反復(fù)修改的最終結(jié)果，我們要理解最淺層次他這樣做怎么好看，而更深層次的思維是理解他為什么這樣做。

玩游戲后應(yīng)該問(wèn)自己它好不好用？不好用那問(wèn)題出在哪里？有沒(méi)有更好的表現(xiàn)方式？如果沒(méi)有他為什么要這樣做？

涉獵的游戲類(lèi)型廣、體驗(yàn)時(shí)間長(zhǎng)，對(duì)不同風(fēng)格游戲有自己的體會(huì)和感悟，這是我沒(méi)辦法教你的。

我所提到的是游戲 UI 設(shè)計(jì)的技能框架，每個(gè)人有每個(gè)人不同的方法論，甚至說(shuō)我這個(gè)方法不一定適合你，但是游戲 UI 設(shè)計(jì)師一定要具備這樣全局觀的視野，才能在漫長(zhǎng)的研發(fā)周期中把握項(xiàng)目核心目標(biāo)，并在不斷的迭代優(yōu)化探索的過(guò)程中，成就優(yōu)秀的自己！

最后一個(gè)問(wèn)題：我們做游戲，是做玩家喜歡的設(shè)計(jì)，還是做我們喜歡的設(shè)計(jì)？

評(píng)論區(qū)留下你的答案