UI設(shè)計(jì)（或稱界面設(shè)計(jì)）是指對軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。
放在游戲行業(yè)里，就是游戲的人機(jī)交互、操作邏輯、界面設(shè)計(jì)。
我們把這三點(diǎn)鋪開來講：
首先是人機(jī)交互
它可能是扭轉(zhuǎn)戰(zhàn)局的技能釋放：按下技能，釋放技能，獲得團(tuán)戰(zhàn)勝利。
它可能是某個讓你腎上腺素飆升的抽獎畫面：哇哦，金色傳說！
通過你的操作，計(jì)算機(jī)給予你的響應(yīng)，交互充滿在游戲的各個層面。
其次是操作邏輯
它是硬件、軟件的底層邏輯。
它是游戲的底層邏輯：你的游戲用什么引擎開發(fā)？它是什么游戲類型？
它是人類的基本操作邏輯：你是左撇子還是視覺障礙人士？
最后是界面美觀
為什么把它放在最后，因?yàn)槲艺J(rèn)為在UI制作流程里，界面美觀一定是放在開發(fā)的最末尾！
界面美觀的通常要求，不外乎幾點(diǎn)：層次清晰、風(fēng)格適配、視覺吸睛。
以上是游戲UI的一些常識，你理解了上述邏輯后，下面我們開始具體的制作流程。
游戲不只是單個環(huán)節(jié)，而是一套整體的工業(yè)流程，因此UI只是游戲中的一環(huán)，這里我不列舉一些包含策劃工作，例如：系統(tǒng)功能策劃、世界觀策劃等；美術(shù)也會有美術(shù)概念設(shè)計(jì)的內(nèi)容，整體內(nèi)容我盡量限制于UI。
游戲UI制作流程我整理為4個步驟：關(guān)鍵界面框架-關(guān)鍵界面UX-關(guān)鍵界面風(fēng)格產(chǎn)出-全界面真圖。
首先游戲立項(xiàng)后，作為UI設(shè)計(jì)師，要根據(jù)游戲類型設(shè)計(jì)原型初稿。
舉個例子，一款開放世界動作游戲，策劃給到功能文檔，美術(shù)給定游戲風(fēng)格圖，那ui就可以開始第一步的關(guān)鍵界面框架設(shè)計(jì)。
關(guān)鍵界面是游戲主界面和重要一級跳轉(zhuǎn)頁（通常為屬性、裝備、背包、地圖、設(shè)置）。
首先是主界面：一款動作類型游戲，核心玩法為動作戰(zhàn)斗，需要玩家長時間停留在這個界面進(jìn)行游玩，因此戰(zhàn)斗界面即為游戲的主界面。
例如游戲的操作系統(tǒng)為手機(jī)，因此我們設(shè)計(jì)符合手機(jī)規(guī)范的操作邏輯；
例如針對手機(jī)不同的尺寸定義不同的以1334x750或2560x1480的的尺寸規(guī)范；
例如按照調(diào)查顯示大拇指的最佳移動范圍去做框架設(shè)計(jì)圖，用的左移動、右攻擊的方案定位基礎(chǔ)操作位置，符合人體工程學(xué)。
我們按照策劃功能設(shè)定條條列出需要的內(nèi)容快速擺放。
動作控件：移動、技能、攻擊。
人物屬性：頭像、名字、等級、血條、經(jīng)驗(yàn)條、buff。
怪物：血條、怒氣條、buff。
地圖：小地圖、人物位置、人物朝向、地圖朝向、地理圖。
任務(wù)目標(biāo)：任務(wù)標(biāo)題、文本、數(shù)量，指針。
這些內(nèi)容需要去定義優(yōu)先級，分布排開。
然后完成一級跳轉(zhuǎn)頁的功能模塊，即屬性、裝備、背包、地圖、設(shè)置的功能位置。
按照上述內(nèi)容設(shè)計(jì)關(guān)鍵界面框架，完成游戲基本的功能邏輯。
關(guān)鍵界面UX一般是指關(guān)鍵界面框架的導(dǎo)向圖、控件的交互反饋圖。
我們的關(guān)鍵UX設(shè)計(jì)會依據(jù)五個準(zhǔn)則：示能，意符，映射，反饋，概念模型。（交互/設(shè)計(jì)心理學(xué)基礎(chǔ)）
下面我用一張圖讓你快速get到5個準(zhǔn)則是什么意思。
圖片來自網(wǎng)絡(luò)
示能：是指一個物理對象與人之間的關(guān)系。例如做成按鈕就是想讓人明白可以點(diǎn)擊。
意符：是表達(dá)提示。例如“go”文字提示你按鈕的功能，我理解他是需要跳轉(zhuǎn)。
映射：表示多組要素之間的關(guān)系。例如畫面中出現(xiàn)的正方形圖標(biāo)回歸類為可獲得道具。
反饋：你執(zhí)行了命令，就應(yīng)該給你反饋。例如你點(diǎn)擊了“go按鈕“這個行為，會有一個按下狀態(tài)然后跳轉(zhuǎn)至活動界面這樣的結(jié)果。
概念模型：快速告知產(chǎn)品的模型。例如你已經(jīng)理解了這個活動的模型：簽到獲取道具！
但在實(shí)際制作過程中界面的復(fù)雜程度遠(yuǎn)比想象的要困難許多，還需要其他設(shè)計(jì)準(zhǔn)則作為補(bǔ)充。
比如我們可以引入《尼爾森十大設(shè)計(jì)原則》、《交互設(shè)計(jì)的7大定律》，有興趣可以搜索。
理論知識作為重要的邏輯參考，也是最終從結(jié)果反推過程的驗(yàn)證，越加復(fù)雜的系統(tǒng)會通過理論的取舍達(dá)到體驗(yàn)最優(yōu)解。
根據(jù)5個準(zhǔn)則，制作出我們的關(guān)鍵UX界面圖：
有了清晰的關(guān)鍵界面框架和關(guān)鍵界面UX圖，下一步我們開始關(guān)鍵界面的包裝。
在這里我要做個小提醒。
一般在實(shí)際工作中，我們會需要各部門對效果圖。就是拿我們制作的圖和制作人、策劃、程序、美術(shù)共同考慮每個部分的優(yōu)先級、實(shí)現(xiàn)功能的可行性、核心玩法的方向性、動效鏡頭配合邏輯、界面美術(shù)的包裝方向等等一系列未來會出問題去做預(yù)設(shè)，這就需要大量的經(jīng)驗(yàn)（犯的錯越多越好）。
策劃考慮玩法是否有意思，UI考慮這個玩法體驗(yàn)的更舒服，拼接考慮資源如何處理、美術(shù)考慮怎么包裝更牛逼，程序考慮怎么實(shí)現(xiàn)玩法更合理，我們需要共同去解決優(yōu)先級最高的問題。
說人話就是開會，開會，開會，開不完的會。但是這一步也是必不可少的，為后續(xù)工作避坑。
1.理論依據(jù)
界面風(fēng)格的尋找有很多種方法，比如從游戲體驗(yàn)?zāi)Ｐ汀a(chǎn)品定位、受眾群體等方面找靈感。
主要作用是為了去尋找到能夠支撐我們設(shè)計(jì)方向的理論依據(jù)，稍后我會著重講解游戲體驗(yàn)?zāi)Ｐ停℅ame Experience Model）的設(shè)計(jì)方案。
舉個著重于游戲的主色調(diào)方案的例子，主色調(diào)方向并非完全根據(jù)原畫圖來作為參考，更重要的是考慮游戲模型、游戲定位、受眾群體等去定位游戲的主色調(diào)。
例如提到科幻游戲類型，大部分的科幻類的主色調(diào)會偏向藍(lán)色，這是因?yàn)橛钪嫘强諏τ谝曈X效果的映射，主基調(diào)會是藍(lán)色，而色相范圍會根據(jù)受眾群體的不同做出調(diào)整：硬核玩家的藍(lán)色，受眾是年輕人的藍(lán)色偏向感知上會明顯不同，這里會用到色彩心理的知識內(nèi)容。
2.快速風(fēng)格稿
回到我們的主界面，我們開始用顏色填充我們的UI層。
假設(shè)我通過以上理論依據(jù)完成了我的設(shè)計(jì)方向，那我在原有的交互功能稿上快速出草稿方案，為進(jìn)一步的細(xì)化做鋪墊。
這個過程我會建議大家使用色塊法來制作，用色塊法的原因是這個階段只是需要看整體效果，不會去關(guān)注過多的細(xì)節(jié)，做的越細(xì)對設(shè)計(jì)師來講只會越發(fā)限制你的發(fā)揮。用大色塊去覆蓋，我們看成套的小圖能更快速的發(fā)現(xiàn)界面上的問題。 然后處理好黑白灰的關(guān)系和文字的排版，以最快速度出效果為目的。
文字的排版我會用到四個原則：親密性、對齊、重復(fù)、對比；
黑白灰關(guān)系的原則：素描中主要運(yùn)用黑白灰來表達(dá)物體的質(zhì)感、量感、層次感；我們通過黑白灰關(guān)系確定層次。
以上，基本上完成了我們的關(guān)鍵界面假圖。接下來就是細(xì)化假圖，讓原來的色塊看起來更加工整舒適，滿足基本可以使用的程度即可。
涉及到如此多的知識內(nèi)容還能堅(jiān)持住嗎，接下來更是重量級的內(nèi)容。
3.貼合游戲體驗(yàn)?zāi)Ｐ?/strong>
我們完成了一套基礎(chǔ)UI設(shè)計(jì)，但是莫得靈魂，沒有靈魂的UI即使套用在不同游戲上也不會奇怪。
那么UI的靈魂是什么？或者說游戲美術(shù)的靈魂是什么？
是屬于我們這個游戲獨(dú)有的世界觀和游戲機(jī)制。
這個階段我要把界面去貼合游戲世界觀，UI的風(fēng)格走向、細(xì)節(jié)提煉、風(fēng)格產(chǎn)出都來源于這一步。 這需要很多人共同去思考、腦暴、尋找、構(gòu)建在這套世界觀下合理的美術(shù)表現(xiàn)。
例如《王者榮耀》最開始的UI是沒有調(diào)性和方向的，后來他們通過設(shè)計(jì)世界觀、游戲機(jī)制的探索找到了他們的方向，智械飛升新國風(fēng)（我的定義）
新版和舊版對比
這個方法我需要運(yùn)用到游戲體驗(yàn)?zāi)Ｐ停℅ame Experience Model）的知識。
游戲體驗(yàn)?zāi)Ｐ停℅ame Experience Model）
游戲體驗(yàn)的六個要素以及它們之間的關(guān)系：
•機(jī)制 - 行為：機(jī)制包括游戲中可能發(fā)生的所有動作和所有游戲?qū)ο?- 由游戲規(guī)則定義的所有內(nèi)容。動作是機(jī)制在每種情況下的運(yùn)作方式。
•美學(xué)-感官刺激：美學(xué)包括旨在喚起玩家情緒的所有感官和認(rèn)知設(shè)計(jì)。呈現(xiàn)給玩家的美感稱為感官刺激。
•故事世界-敘事：故事世界為游戲提供了實(shí)質(zhì)性的內(nèi)容。那些沒有的世界，是因?yàn)樗鼈儧]有被放入游戲中，只是由游戲設(shè)計(jì)者想象出來的，或者由于所包含的情況而在邏輯上變得必要或可能。 敘述是游戲過程中發(fā)生的故事世界中的故事片段。
故事世界通常是游戲設(shè)計(jì)師設(shè)想的一個無限的宇宙。 敘事是玩家在游戲中體驗(yàn)的故事世界的片段，他們以情節(jié)、文字描述、動作場景、聲音、藝術(shù)等形式對這個宇宙的一部分進(jìn)行了美學(xué)再現(xiàn)，并在游戲過程中作為故事世界中的敘述呈現(xiàn)給玩家。
如果能理解故事敘事，那就能推導(dǎo)美學(xué)的藝術(shù)形式；游戲的機(jī)制所表現(xiàn)的玩家行為，能夠起到限制/提高美學(xué)的效果；優(yōu)秀的故事會回饋給設(shè)計(jì)者如何制作核心體驗(yàn)設(shè)計(jì)；以此達(dá)到三者能夠互推的良性循環(huán)。
我們回過頭來看王者這張圖，游戲機(jī)制為moba（多人在線戰(zhàn)術(shù)競技游戲），世界觀是智械飛升新國風(fēng)。
以游戲機(jī)制（MOBA）推導(dǎo)出美術(shù)形式，體現(xiàn)在游戲的美術(shù)設(shè)計(jì)上，如游戲logo，UI的對立設(shè)計(jì)，平衡設(shè)計(jì)。
通過獨(dú)屬于他的國風(fēng)世界觀推導(dǎo)出的藝術(shù)表現(xiàn)形式，表達(dá)在最重要的皮膚表現(xiàn)，游戲的UI上如紋理、圓角處理和色彩走向、古風(fēng)表現(xiàn)。
而獨(dú)屬于智械飛升的設(shè)計(jì)，從logo的機(jī)關(guān)小細(xì)節(jié)、匹配界面的紋理圖所表達(dá)。
不同的游戲?qū)τ谟螒蝮w驗(yàn)?zāi)Ｐ偷氖褂梅秶煌?，例如《超級馬里奧》，交互與游戲機(jī)制結(jié)合。
而《刺客信條》的UI與故事結(jié)合得更加緊密。
提到紋理細(xì)節(jié)表達(dá)，例如《刺客信條英靈殿》中的UI細(xì)節(jié)，會遵循故事背景，本作背景設(shè)定在維京時代，因此從時代背景推敲出來許多的紋理：包含符合時代的凱爾特紋、維京紋和海盜紋。
這個內(nèi)容鋪開來講又是一個復(fù)雜的內(nèi)容，有機(jī)會可以細(xì)聊。推薦去看一些關(guān)于紋理設(shè)計(jì)的書籍。
當(dāng)然，把游戲體驗(yàn)?zāi)Ｐ屯娉龌?，這當(dāng)然不是一件輕松的工作。
回到我們的頁面，把我們的關(guān)鍵界面按照這個方式去貼合游戲獨(dú)有的世界觀，做出這樣的方案。
或者是這樣的
我們完成關(guān)鍵界面設(shè)計(jì)以后，再一次通過開會、修改、分析、結(jié)果收集等進(jìn)行合理判斷。在此基礎(chǔ)上確定最終的UI風(fēng)格。
之后就是建立規(guī)范，再去延展設(shè)計(jì)，最后全方位落地。如何建立規(guī)范，完成一套規(guī)范，建立控件庫、建立組件庫、建立素材庫、設(shè)計(jì)手冊（不細(xì)說）。
管線思維導(dǎo)圖
在規(guī)范下，開始內(nèi)容延展：不同UI不同分工，劃分不同功能管線，管理者需要把控每一條管線的執(zhí)行和推進(jìn)，以此完成我們長線開發(fā)的全界面真圖（即一個游戲的所有界面）。
完成UI后，交付給動效、特效、程序，然后恭喜你，完成了游戲設(shè)計(jì)的UI部分。
寫在最后
通過完成后的游戲成品，作為游戲UI仍要把控后續(xù)每一個界面?zhèn)鬟_(dá)的實(shí)際效果，是否達(dá)到預(yù)期；每一個動效反饋、每一個抽獎動畫、打擊感的震動，排版的舒適性等細(xì)節(jié)，都需要反復(fù)打磨達(dá)到讓玩家最為舒服的水準(zhǔn)。
畢竟，同一個動作不同的細(xì)節(jié)表達(dá)，最終的玩家的體驗(yàn)會完全不同。
鏡頭語言也非常重要，電影游戲畫的視覺震撼和共鳴，能結(jié)合實(shí)際制作中，達(dá)到類似的效果。
例如《蜘蛛俠邁爾斯》各種QTE的鏡頭動作呈現(xiàn)，電影感拉滿。
作者：佳大大丶
鏈接：https://www.zcool.com.cn/article/ZMTU5NDEyNA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
