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

作為游戲 UI 來講，我們需要掌握這一棵技能樹：

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

一、理解你的游戲

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

①機制 - 行為：機制包括游戲中可能發(fā)生的所有動作和所有游戲?qū)ο螅捎螒蛞?guī)則定義的所有內(nèi)容。

動作是機制在每種情況下的運作方式。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二、抓住用戶畫像

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

當(dāng)然有！

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

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

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

如何有效的抓住用戶畫像？

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

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

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

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

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

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

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

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

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

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

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

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

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

所以我在這里提供一個版本，是我在剛開始學(xué)習(xí)交互的時候用上的簡裝版：

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

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

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

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

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

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

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

三、把控視覺設(shè)計

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

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

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

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

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

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

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

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

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

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

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

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

四、平衡不可能三角

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

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

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

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

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

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

在一個人的腦子里面，交互和視覺的制作已經(jīng)是兩套思考方式了，我們再把交互和視覺分到兩個人身上，那思考方式又是成倍的疊加；

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

總結(jié)：

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

五、多玩游戲

夠多的體驗，帶有邏輯的體驗不同類型游戲。

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

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

涉獵的游戲類型廣、體驗時間長，對不同風(fēng)格游戲有自己的體會和感悟，這是我沒辦法教你的。

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

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

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

ron