什么是UI？

 

UI設(shè)計(jì)（或稱界面設(shè)計(jì)）是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。

放在游戲行業(yè)里，就是游戲的人機(jī)交互、操作邏輯、界面設(shè)計(jì)。

 

我們把這三點(diǎn)鋪開來(lái)講：

 

首先是人機(jī)交互

它可能是扭轉(zhuǎn)戰(zhàn)局的技能釋放：按下技能，釋放技能，獲得團(tuán)戰(zhàn)勝利。

它可能是某個(gè)讓你腎上腺素飆升的抽獎(jiǎng)畫面：哇哦，金色傳說(shuō)！

通過(guò)你的操作，計(jì)算機(jī)給予你的響應(yīng)，交互充滿在游戲的各個(gè)層面。

 

其次是操作邏輯

它是硬件、軟件的底層邏輯。

它是游戲的底層邏輯：你的游戲用什么引擎開發(fā)？它是什么游戲類型？

它是人類的基本操作邏輯：你是左撇子還是視覺(jué)障礙人士？

 

最后是界面美觀

為什么把它放在最后，因?yàn)槲艺J(rèn)為在UI制作流程里，界面美觀一定是放在開發(fā)的最末尾！

界面美觀的通常要求，不外乎幾點(diǎn)：層次清晰、風(fēng)格適配、視覺(jué)吸睛。

 

 

 

以上是游戲UI的一些常識(shí)，你理解了上述邏輯后，下面我們開始具體的制作流程。

 

游戲不只是單個(gè)環(huán)節(jié)，而是一套整體的工業(yè)流程，因此UI只是游戲中的一環(huán)，這里我不列舉一些包含策劃工作，例如：系統(tǒng)功能策劃、世界觀策劃等；美術(shù)也會(huì)有美術(shù)概念設(shè)計(jì)的內(nèi)容，整體內(nèi)容我盡量限制于UI。

 

游戲UI制作流程我整理為4個(gè)步驟：關(guān)鍵界面框架-關(guān)鍵界面UX-關(guān)鍵界面風(fēng)格產(chǎn)出-全界面真圖。

 

 

 

一、設(shè)計(jì)關(guān)鍵界面框架

 

首先游戲立項(xiàng)后，作為UI設(shè)計(jì)師，要根據(jù)游戲類型設(shè)計(jì)原型初稿。

 

舉個(gè)例子，一款開放世界動(dòng)作游戲，策劃給到功能文檔，美術(shù)給定游戲風(fēng)格圖，那ui就可以開始第一步的關(guān)鍵界面框架設(shè)計(jì)。

關(guān)鍵界面是游戲主界面和重要一級(jí)跳轉(zhuǎn)頁(yè)（通常為屬性、裝備、背包、地圖、設(shè)置）。

 

 

首先是主界面：一款動(dòng)作類型游戲，核心玩法為動(dòng)作戰(zhàn)斗，需要玩家長(zhǎng)時(shí)間停留在這個(gè)界面進(jìn)行游玩，因此戰(zhàn)斗界面即為游戲的主界面。

 

例如游戲的操作系統(tǒng)為手機(jī)，因此我們?cè)O(shè)計(jì)符合手機(jī)規(guī)范的操作邏輯；

例如針對(duì)手機(jī)不同的尺寸定義不同的以1334x750或2560x1480的的尺寸規(guī)范；

 

 

例如按照調(diào)查顯示大拇指的最佳移動(dòng)范圍去做框架設(shè)計(jì)圖，用的左移動(dòng)、右攻擊的方案定位基礎(chǔ)操作位置，符合人體工程學(xué)。

 

我們按照策劃功能設(shè)定條條列出需要的內(nèi)容快速擺放。

動(dòng)作控件：移動(dòng)、技能、攻擊。

人物屬性：頭像、名字、等級(jí)、血條、經(jīng)驗(yàn)條、buff。

怪物：血條、怒氣條、buff。

地圖：小地圖、人物位置、人物朝向、地圖朝向、地理圖。

任務(wù)目標(biāo)：任務(wù)標(biāo)題、文本、數(shù)量，指針。

 

這些內(nèi)容需要去定義優(yōu)先級(jí)，分布排開。

 

 

然后完成一級(jí)跳轉(zhuǎn)頁(yè)的功能模塊，即屬性、裝備、背包、地圖、設(shè)置的功能位置。

 

 

按照上述內(nèi)容設(shè)計(jì)關(guān)鍵界面框架，完成游戲基本的功能邏輯。

 

 

 

 

二、設(shè)計(jì)關(guān)鍵界面UX（交互圖）

 

關(guān)鍵界面UX一般是指關(guān)鍵界面框架的導(dǎo)向圖、控件的交互反饋圖。

我們的關(guān)鍵UX設(shè)計(jì)會(huì)依據(jù)五個(gè)準(zhǔn)則：示能，意符，映射，反饋，概念模型。（交互/設(shè)計(jì)心理學(xué)基礎(chǔ)）

 

下面我用一張圖讓你快速get到5個(gè)準(zhǔn)則是什么意思。

 

圖片來(lái)自網(wǎng)絡(luò)

 

 

示能：是指一個(gè)物理對(duì)象與人之間的關(guān)系。例如做成按鈕就是想讓人明白可以點(diǎn)擊。

 

意符：是表達(dá)提示。例如“go”文字提示你按鈕的功能，我理解他是需要跳轉(zhuǎn)。

 

映射：表示多組要素之間的關(guān)系。例如畫面中出現(xiàn)的正方形圖標(biāo)回歸類為可獲得道具。

 

反饋：你執(zhí)行了命令，就應(yīng)該給你反饋。例如你點(diǎn)擊了“go按鈕“這個(gè)行為，會(huì)有一個(gè)按下狀態(tài)然后跳轉(zhuǎn)至活動(dòng)界面這樣的結(jié)果。

 

概念模型：快速告知產(chǎn)品的模型。例如你已經(jīng)理解了這個(gè)活動(dòng)的模型：簽到獲取道具！

 

但在實(shí)際制作過(guò)程中界面的復(fù)雜程度遠(yuǎn)比想象的要困難許多，還需要其他設(shè)計(jì)準(zhǔn)則作為補(bǔ)充。

比如我們可以引入《尼爾森十大設(shè)計(jì)原則》、《交互設(shè)計(jì)的7大定律》，有興趣可以搜索。

理論知識(shí)作為重要的邏輯參考，也是最終從結(jié)果反推過(guò)程的驗(yàn)證，越加復(fù)雜的系統(tǒng)會(huì)通過(guò)理論的取舍達(dá)到體驗(yàn)最優(yōu)解。

 

根據(jù)5個(gè)準(zhǔn)則，制作出我們的關(guān)鍵UX界面圖：

 

有了清晰的關(guān)鍵界面框架和關(guān)鍵界面UX圖，下一步我們開始關(guān)鍵界面的包裝。

 

在這里我要做個(gè)小提醒。

一般在實(shí)際工作中，我們會(huì)需要各部門對(duì)效果圖。就是拿我們制作的圖和制作人、策劃、程序、美術(shù)共同考慮每個(gè)部分的優(yōu)先級(jí)、實(shí)現(xiàn)功能的可行性、核心玩法的方向性、動(dòng)效鏡頭配合邏輯、界面美術(shù)的包裝方向等等一系列未來(lái)會(huì)出問(wèn)題去做預(yù)設(shè)，這就需要大量的經(jīng)驗(yàn)（犯的錯(cuò)越多越好）。

策劃考慮玩法是否有意思，UI考慮這個(gè)玩法體驗(yàn)的更舒服，拼接考慮資源如何處理、美術(shù)考慮怎么包裝更牛逼，程序考慮怎么實(shí)現(xiàn)玩法更合理，我們需要共同去解決優(yōu)先級(jí)最高的問(wèn)題。

 

說(shuō)人話就是開會(huì)，開會(huì)，開會(huì)，開不完的會(huì)。但是這一步也是必不可少的，為后續(xù)工作避坑。

 

 

 

 

 

三、關(guān)鍵界面風(fēng)格產(chǎn)出

 

 

1.理論依據(jù)

 

界面風(fēng)格的尋找有很多種方法，比如從游戲體驗(yàn)?zāi)Ｐ汀a(chǎn)品定位、受眾群體等方面找靈感。

主要作用是為了去尋找到能夠支撐我們?cè)O(shè)計(jì)方向的理論依據(jù)，稍后我會(huì)著重講解游戲體驗(yàn)?zāi)Ｐ停℅ame Experience Model）的設(shè)計(jì)方案。

 

舉個(gè)著重于游戲的主色調(diào)方案的例子，主色調(diào)方向并非完全根據(jù)原畫圖來(lái)作為參考，更重要的是考慮游戲模型、游戲定位、受眾群體等去定位游戲的主色調(diào)。

 

例如提到科幻游戲類型，大部分的科幻類的主色調(diào)會(huì)偏向藍(lán)色，這是因?yàn)橛钪嫘强諏?duì)于視覺(jué)效果的映射，主基調(diào)會(huì)是藍(lán)色，而色相范圍會(huì)根據(jù)受眾群體的不同做出調(diào)整：硬核玩家的藍(lán)色，受眾是年輕人的藍(lán)色偏向感知上會(huì)明顯不同，這里會(huì)用到色彩心理的知識(shí)內(nèi)容。

 

 

 

 

2.快速風(fēng)格稿

 

回到我們的主界面，我們開始用顏色填充我們的UI層。

 

 

假設(shè)我通過(guò)以上理論依據(jù)完成了我的設(shè)計(jì)方向，那我在原有的交互功能稿上快速出草稿方案，為進(jìn)一步的細(xì)化做鋪墊。

 

這個(gè)過(guò)程我會(huì)建議大家使用色塊法來(lái)制作，用色塊法的原因是這個(gè)階段只是需要看整體效果，不會(huì)去關(guān)注過(guò)多的細(xì)節(jié)，做的越細(xì)對(duì)設(shè)計(jì)師來(lái)講只會(huì)越發(fā)限制你的發(fā)揮。用大色塊去覆蓋，我們看成套的小圖能更快速的發(fā)現(xiàn)界面上的問(wèn)題。 然后處理好黑白灰的關(guān)系和文字的排版，以最快速度出效果為目的。

文字的排版我會(huì)用到四個(gè)原則：親密性、對(duì)齊、重復(fù)、對(duì)比；

黑白灰關(guān)系的原則：素描中主要運(yùn)用黑白灰來(lái)表達(dá)物體的質(zhì)感、量感、層次感；我們通過(guò)黑白灰關(guān)系確定層次。

 

 

以上，基本上完成了我們的關(guān)鍵界面假圖。接下來(lái)就是細(xì)化假圖，讓原來(lái)的色塊看起來(lái)更加工整舒適，滿足基本可以使用的程度即可。

 

涉及到如此多的知識(shí)內(nèi)容還能堅(jiān)持住嗎，接下來(lái)更是重量級(jí)的內(nèi)容。

 

 

3.貼合游戲體驗(yàn)?zāi)Ｐ?/strong>

 

我們完成了一套基礎(chǔ)UI設(shè)計(jì)，但是莫得靈魂，沒(méi)有靈魂的UI即使套用在不同游戲上也不會(huì)奇怪。

那么UI的靈魂是什么？或者說(shuō)游戲美術(shù)的靈魂是什么？

 

是屬于我們這個(gè)游戲獨(dú)有的世界觀和游戲機(jī)制。

 

這個(gè)階段我要把界面去貼合游戲世界觀，UI的風(fēng)格走向、細(xì)節(jié)提煉、風(fēng)格產(chǎn)出都來(lái)源于這一步。 這需要很多人共同去思考、腦暴、尋找、構(gòu)建在這套世界觀下合理的美術(shù)表現(xiàn)。

 

例如《王者榮耀》最開始的UI是沒(méi)有調(diào)性和方向的，后來(lái)他們通過(guò)設(shè)計(jì)世界觀、游戲機(jī)制的探索找到了他們的方向，智械飛升新國(guó)風(fēng)（我的定義）

 

 

新版和舊版對(duì)比

 

 

這個(gè)方法我需要運(yùn)用到游戲體驗(yàn)?zāi)Ｐ停℅ame Experience Model）的知識(shí)。

 

 

游戲體驗(yàn)?zāi)Ｐ停℅ame Experience Model）

 

 

游戲體驗(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ā)生的故事世界中的故事片段。

 

 

故事世界通常是游戲設(shè)計(jì)師設(shè)想的一個(gè)無(wú)限的宇宙。 敘事是玩家在游戲中體驗(yàn)的故事世界的片段，他們以情節(jié)、文字描述、動(dòng)作場(chǎng)景、聲音、藝術(shù)等形式對(duì)這個(gè)宇宙的一部分進(jìn)行了美學(xué)再現(xiàn)，并在游戲過(guò)程中作為故事世界中的敘述呈現(xiàn)給玩家。

 

如果能理解故事敘事，那就能推導(dǎo)美學(xué)的藝術(shù)形式；游戲的機(jī)制所表現(xiàn)的玩家行為，能夠起到限制/提高美學(xué)的效果；優(yōu)秀的故事會(huì)回饋給設(shè)計(jì)者如何制作核心體驗(yàn)設(shè)計(jì)；以此達(dá)到三者能夠互推的良性循環(huán)。

 

 

我們回過(guò)頭來(lái)看王者這張圖，游戲機(jī)制為moba（多人在線戰(zhàn)術(shù)競(jìng)技游戲），世界觀是智械飛升新國(guó)風(fēng)。

以游戲機(jī)制（MOBA）推導(dǎo)出美術(shù)形式，體現(xiàn)在游戲的美術(shù)設(shè)計(jì)上，如游戲logo，UI的對(duì)立設(shè)計(jì)，平衡設(shè)計(jì)。

 

通過(guò)獨(dú)屬于他的國(guó)風(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í)馬里奧》，交互與游戲機(jī)制結(jié)合。

 

 

而《刺客信條》的UI與故事結(jié)合得更加緊密。

 

提到紋理細(xì)節(jié)表達(dá)，例如《刺客信條英靈殿》中的UI細(xì)節(jié)，會(huì)遵循故事背景，本作背景設(shè)定在維京時(shí)代，因此從時(shí)代背景推敲出來(lái)許多的紋理：包含符合時(shí)代的凱爾特紋、維京紋和海盜紋。

 

這個(gè)內(nèi)容鋪開來(lái)講又是一個(gè)復(fù)雜的內(nèi)容，有機(jī)會(huì)可以細(xì)聊。推薦去看一些關(guān)于紋理設(shè)計(jì)的書籍。

 

 

當(dāng)然，把游戲體驗(yàn)?zāi)Ｐ屯娉龌ǎ@當(dāng)然不是一件輕松的工作。

 

 

回到我們的頁(yè)面，把我們的關(guān)鍵界面按照這個(gè)方式去貼合游戲獨(dú)有的世界觀，做出這樣的方案。

 

 

或者是這樣的

 

 

 

 

四、全界面真圖

 

我們完成關(guān)鍵界面設(shè)計(jì)以后，再一次通過(guò)開會(huì)、修改、分析、結(jié)果收集等進(jìn)行合理判斷。在此基礎(chǔ)上確定最終的UI風(fēng)格。

之后就是建立規(guī)范，再去延展設(shè)計(jì)，最后全方位落地。如何建立規(guī)范，完成一套規(guī)范，建立控件庫(kù)、建立組件庫(kù)、建立素材庫(kù)、設(shè)計(jì)手冊(cè)（不細(xì)說(shuō)）。

 

 

管線思維導(dǎo)圖

 

在規(guī)范下，開始內(nèi)容延展：不同UI不同分工，劃分不同功能管線，管理者需要把控每一條管線的執(zhí)行和推進(jìn)，以此完成我們長(zhǎng)線開發(fā)的全界面真圖（即一個(gè)游戲的所有界面）。

 

完成UI后，交付給動(dòng)效、特效、程序，然后恭喜你，完成了游戲設(shè)計(jì)的UI部分。

 

 

寫在最后

 

通過(guò)完成后的游戲成品，作為游戲UI仍要把控后續(xù)每一個(gè)界面?zhèn)鬟_(dá)的實(shí)際效果，是否達(dá)到預(yù)期；每一個(gè)動(dòng)效反饋、每一個(gè)抽獎(jiǎng)動(dòng)畫、打擊感的震動(dòng)，排版的舒適性等細(xì)節(jié)，都需要反復(fù)打磨達(dá)到讓玩家最為舒服的水準(zhǔn)。

 

畢竟，同一個(gè)動(dòng)作不同的細(xì)節(jié)表達(dá)，最終的玩家的體驗(yàn)會(huì)完全不同。

 

鏡頭語(yǔ)言也非常重要，電影游戲畫的視覺(jué)震撼和共鳴，能結(jié)合實(shí)際制作中，達(dá)到類似的效果。

 

例如《蜘蛛俠邁爾斯》各種QTE的鏡頭動(dòng)作呈現(xiàn)，電影感拉滿。

 

作者：佳大大丶
鏈接：https://www.zcool.com.cn/article/ZMTU5NDEyNA==.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。