游戲UI 第1章　關(guān)于游戲UI設(shè)計(jì)學(xué)習(xí)課件

1.1.1什么是UI設(shè)計(jì)

1.1

UI設(shè)計(jì)與GUI設(shè)計(jì)UI（用戶界面）是廣義概念，包含軟硬件設(shè)計(jì)，囊括了UE（用戶體驗(yàn)）、GUI（用戶圖形界面）以及ID（交互設(shè)計(jì)）。UE（用戶體驗(yàn)）關(guān)注的是用戶的行為習(xí)慣和心理感受，就是琢磨人會(huì)怎么使用軟件或硬件才覺得順心如意。GUI（用戶圖形界面）就是界面設(shè)計(jì)，只負(fù)責(zé)應(yīng)用的視覺界面，目前國內(nèi)大部分的UI設(shè)計(jì)師其實(shí)做的就是GUI。ID（交互設(shè)計(jì)）簡(jiǎn)單來講是指人和應(yīng)用之間的互動(dòng)過程，一般是交互工程師來做。

UI設(shè)計(jì)是指對(duì)應(yīng)用的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。好的UI設(shè)計(jì)不僅是讓應(yīng)用變得有個(gè)性有別于其他產(chǎn)品，還要讓用戶便捷、高效、舒適、愉悅的使用。在人們交互中，有一個(gè)層面叫界面。按照心理學(xué)的角度來講，我們可以把它分為兩個(gè)層次：感覺（視覺、觸覺、聽覺）和情感。人們?cè)谑褂媚钞a(chǎn)品時(shí)，第一時(shí)間直觀感受到的是屏幕上的界面，它傳遞給人們?cè)谑褂卯a(chǎn)品前的第一印象。一個(gè)友好的美觀的界面能給人帶來愉悅的感受，增加用戶的產(chǎn)品粘度，為產(chǎn)品增加附加值。通常，很多人會(huì)覺得界面設(shè)計(jì)僅僅是視覺層面的東西，這是錯(cuò)誤的理解。設(shè)計(jì)師需要定位用戶群體、使用環(huán)境、使用方法，最后根據(jù)這些數(shù)據(jù)進(jìn)行科學(xué)的設(shè)計(jì)。1.1.2什么是GUI設(shè)計(jì)GUI英文全稱為GraphicalUserInterface，中文稱為圖形用戶界面，是指使用圖形方式顯示的計(jì)算機(jī)操作用戶界面。GUI設(shè)計(jì)的廣泛應(yīng)用是當(dāng)今計(jì)算機(jī)發(fā)展的重大成就之一，它極大地方便了非專業(yè)用戶的使用。人們從此不需要死記硬背大量的命令，取而代之的是可以通過窗口、菜單、按鍵等方式來方便地進(jìn)行操作。1.1.3關(guān)于用戶體驗(yàn)近幾年來，計(jì)算機(jī)技術(shù)發(fā)展日新月異。用戶體驗(yàn)設(shè)計(jì)越來越被眾多游戲設(shè)計(jì)開發(fā)企業(yè)所重視，這也使得所設(shè)計(jì)的游戲與玩家的行為特點(diǎn)越來越匹配。用戶體驗(yàn)（UserExperience，簡(jiǎn)稱UE）是一種純主觀的在用戶在使用一個(gè)產(chǎn)品（服務(wù)）的過程中建立起來的心理感受。因?yàn)樗羌冎饔^的，就帶有不確定因素。因?yàn)槊總€(gè)個(gè)體在使用同一個(gè)產(chǎn)品的時(shí)候都有自身的感受，這個(gè)差異化也決定了這種體驗(yàn)沒法一一再現(xiàn)。但是設(shè)計(jì)師可以根據(jù)某個(gè)特定的使用群體做一個(gè)概括性的總結(jié)分析。1.1.4認(rèn)知心理學(xué)與UI設(shè)計(jì)的關(guān)系通常在設(shè)計(jì)UI過程中，會(huì)把UI與認(rèn)知心理學(xué)結(jié)合起來進(jìn)行思考?；谟脩粜袨榛A(chǔ)做設(shè)計(jì)，在用戶預(yù)期和UI設(shè)計(jì)實(shí)現(xiàn)之間實(shí)現(xiàn)兼容，這樣才能保證所設(shè)計(jì)的UI不是“殘品”，而是美觀、易用、友好的。1.1.5游戲UI與UI設(shè)計(jì)的區(qū)別UI設(shè)計(jì)承載的是其內(nèi)容，而游戲UI設(shè)計(jì)承載的是其內(nèi)容與玩法，性質(zhì)上都是引導(dǎo)用戶或玩家進(jìn)行更流暢的操作。游戲UI設(shè)計(jì)與其他類型UI設(shè)計(jì)有許多相似的地方，但由于游戲本身的特點(diǎn)也決定了游戲UI設(shè)計(jì)與其他類型UI設(shè)計(jì)的不同。1．視覺風(fēng)格不同其他類型UI設(shè)計(jì)的視覺風(fēng)格可以獨(dú)立于其內(nèi)容，而游戲UI必須結(jié)合游戲本身的風(fēng)格進(jìn)行設(shè)計(jì)，所以在視覺層面上其他類型的UI設(shè)計(jì)自由度相對(duì)比較高一些。2．表現(xiàn)形式不同UI設(shè)計(jì)僅僅只是考慮視覺層面的效果，更多的還需要兼顧到邏輯層面的交互與功能。與其他類型UI相比游戲UI需要多考慮玩法的表現(xiàn)，不僅僅是需要一個(gè)美觀、表意明確的游戲界面，還必須考慮到表現(xiàn)形式與游戲玩法的相互結(jié)合。3．復(fù)雜程度不同因?yàn)橛螒虮旧磉壿嫷膹?fù)雜性，一般大型游戲的界面數(shù)量都會(huì)多達(dá)上百個(gè)，因此無論在視覺、邏輯和數(shù)量上都比其他類型UI設(shè)計(jì)要復(fù)雜得多，是UI設(shè)計(jì)領(lǐng)域中一個(gè)非常重要的一部分。

1.2理解游戲UI設(shè)計(jì)游戲UI就是游戲的用戶界面，包括游戲中和游戲前兩個(gè)部分的界面。游戲UI設(shè)計(jì)師相對(duì)而言更受重視一些，程序員一般都會(huì)尊重設(shè)計(jì)師的想法。這是因?yàn)橐话丬浖脩舾⒅毓δ軐?shí)現(xiàn)的快捷與否。而游戲玩家除此以外，還更多地希望能夠獲得感官上的享受，因此對(duì)視覺和創(chuàng)意的要求比一般軟件用戶更為挑剔。1.2.1什么是游戲UI設(shè)計(jì)在計(jì)算機(jī)科學(xué)領(lǐng)域，界面是人與機(jī)器交流的一個(gè)“層面”，通過這一層面，人可以對(duì)計(jì)算機(jī)發(fā)出指令，并且計(jì)算機(jī)可以將指令的接收、執(zhí)行結(jié)果通過界面即時(shí)反饋給使用者，如此循環(huán)往復(fù)，便形成了人與機(jī)器的交互過程，這個(gè)承載信息接收與反饋的層面就是人機(jī)界面。1.2.2游戲UI設(shè)計(jì)的重要性游戲界面存在的主要意義就是為了實(shí)現(xiàn)游戲參與者與游戲之間的交流，這里的交流包括玩家對(duì)游戲的控制以及游戲給玩家提供的信息反饋，簡(jiǎn)而言之，游戲界面的首要目的是實(shí)現(xiàn)控制與反饋。

1.3游戲UI設(shè)計(jì)的準(zhǔn)備工作游戲UI承載的不僅僅是單純的內(nèi)容（例如游戲地圖、任務(wù)等），它還需要傳遞游戲的基因、世界觀。在開始對(duì)游戲UI進(jìn)行設(shè)計(jì)之前，首先需要了解該款游戲的世界觀，以及該款游戲UI的設(shè)計(jì)風(fēng)格，這樣設(shè)計(jì)出來的游戲UI才能夠與該款游戲相契合。1.3.1了解游戲的世界觀判斷一款游戲UI好壞與否不僅僅依據(jù)表現(xiàn)上的視覺，而是根據(jù)游戲UI元素與游戲世界觀是否貼切來判斷的。什么是游戲的世界觀呢？游戲世界觀告訴我們這個(gè)游戲是什么樣式，游戲矛盾是企么，發(fā)生的背景是什么。在一個(gè)游戲中幾乎所有的元素都是世界觀的組成部分。1.3.2確定游戲UI的設(shè)計(jì)風(fēng)格游戲UI的設(shè)計(jì)風(fēng)格并不是UI設(shè)計(jì)師來決定的，它取決于這個(gè)游戲的原畫設(shè)定。UI設(shè)計(jì)師基本上按照已有的游戲原畫風(fēng)格去設(shè)計(jì)游戲UI。多變的風(fēng)格就要求游戲UI設(shè)計(jì)師需要有扎實(shí)的設(shè)計(jì)能力和應(yīng)變的能力。從游戲風(fēng)格來講可以將游戲分為以下幾種風(fēng)格類型。1．超寫實(shí)風(fēng)格畫面真實(shí)感很強(qiáng)，這類游戲場(chǎng)景人們的細(xì)節(jié)表現(xiàn)都很細(xì)膩，為了防止過多的視覺信息干擾，通常會(huì)把游戲界面設(shè)計(jì)的簡(jiǎn)潔通透，幾乎讓玩家感受不到游戲界面的存在，仿佛置身于游戲場(chǎng)景之中。2．涂鴉風(fēng)格游戲畫面以涂鴉的感覺為主，畫面輕松而自然，讓玩家在游戲中回味童年。這類游戲的UI設(shè)計(jì)，通常采取看似笨拙的涂鴉風(fēng)格與游戲的內(nèi)容保持一致。3．暗黑風(fēng)格西方魔幻類游戲，畫面色調(diào)較暗，局部有絢麗的光線，給玩家一個(gè)真實(shí)的魔幻世界。這類游戲UI通常用大花紋裝飾、厚重的金屬框體、破舊的木板和羊皮紙作為設(shè)計(jì)元素，增加游戲的帶入感。4．卡通風(fēng)格畫面輕松活潑，常常使用比較鮮艷亮麗的色彩進(jìn)行搭配。在符合輕松活潑的氣氛下，這種風(fēng)格的游戲UI設(shè)計(jì)的形式和顏色相對(duì)比較自由，設(shè)計(jì)師可以更自由的進(jìn)行發(fā)揮。1.3.3游戲UI設(shè)計(jì)的流程一個(gè)游戲UI界面的設(shè)計(jì)大體可以分為需求階段、分析設(shè)計(jì)、調(diào)研驗(yàn)證、方案改進(jìn)、用戶驗(yàn)證反饋5個(gè)階段。1．需求階段游戲UI界面依然屬于工業(yè)設(shè)計(jì)的范疇。依然離不開3W的考慮（Who、Where、Why），也就是使用者、使用環(huán)境、使用方式的需求分析。所以在設(shè)計(jì)一個(gè)游戲產(chǎn)品的UI部分之前同樣應(yīng)該明確什么人用什么地方用。2．分析設(shè)計(jì)階段通過分析上面的需求后進(jìn)入設(shè)計(jì)階段，也就是方案形成階段。可以設(shè)計(jì)出幾套不同風(fēng)格的界面用于備選。首先制作一個(gè)體現(xiàn)用戶定位的詞坐標(biāo)，例如以18歲左右的男性玩家為游戲的主要用戶，對(duì)于這類用戶分析得到的詞匯有：刺激、精美、娛樂、趣味、交流、時(shí)尚、酷、個(gè)性、品質(zhì)、放松等。3．調(diào)研驗(yàn)證階段幾套風(fēng)格必須保證在同等的設(shè)計(jì)制作水平上，不能明顯看出差異，這樣才能得到用戶客觀的反饋。4．方案改進(jìn)階段經(jīng)過用戶調(diào)研，得到目標(biāo)用戶最喜歡的方案，而且了解到用戶為什么喜歡，還有什么遺憾等，這樣就可以進(jìn)行下一步修改了。這時(shí)可以把精力投入到一個(gè)方案上，將該UI設(shè)計(jì)方案做到細(xì)致精美。5．用戶驗(yàn)證反饋階段改正以后的方案就可以推向市場(chǎng)了，但是設(shè)計(jì)并沒有結(jié)束，設(shè)計(jì)者還需要用戶反饋，好的設(shè)計(jì)師應(yīng)該在產(chǎn)品上市以后多與用戶接觸，了解用戶真正使用時(shí)的感想，為以后的升級(jí)版本積累經(jīng)驗(yàn)資料。

1.4游戲UI設(shè)計(jì)原則任何設(shè)計(jì)可以說都是沒有固定的規(guī)則用來遵循的，不過設(shè)計(jì)師們?cè)陂L(zhǎng)期進(jìn)行游戲UI設(shè)計(jì)的過程中通過研究與經(jīng)驗(yàn)的積累探尋出了一些適用于游戲UI設(shè)計(jì)的原則，以下的幾條原則是設(shè)計(jì)師們?cè)谶M(jìn)行設(shè)計(jì)時(shí)應(yīng)該遵循的。1.4.1設(shè)計(jì)要簡(jiǎn)潔游戲UI設(shè)計(jì)要盡量簡(jiǎn)潔，目的是便于游戲玩家使用，減少在操作上出現(xiàn)錯(cuò)誤。這種簡(jiǎn)潔性的設(shè)計(jì)和人機(jī)工程學(xué)非常相似，也可以說就是同一個(gè)方向，都是為了方便人的行為而產(chǎn)生的。1.4.2為玩家著想游戲UI設(shè)計(jì)的語言要能夠代表游戲玩家說話而不是設(shè)計(jì)者。這里所說的代表，就是把大部分玩家的想法實(shí)體化表現(xiàn)出來，主要通過造型、色彩、布局等幾個(gè)主要方面表達(dá)，不同的變化會(huì)產(chǎn)生不同的心理感受，例如尖銳、紅色、交錯(cuò)帶來了血腥、暴力、激動(dòng)、刺激、張揚(yáng)等情緒，適合打擊感和比較暴力的游戲，而平滑、黑色、屈曲帶來了詭異、怪誕、恐怖的氣息，又如分散、粉紅、嫩綠、圓鈍，則帶給我們可愛、迷你、浪漫的感覺，如此多的搭配會(huì)系統(tǒng)的引導(dǎo)玩家的游戲體驗(yàn)，為玩家的各種新奇想法助力。1.4.3

統(tǒng)一性游戲UI設(shè)計(jì)的風(fēng)格、結(jié)構(gòu)必須要與游戲的主題和內(nèi)容相一致，優(yōu)秀的游戲界面設(shè)計(jì)都具備這個(gè)特點(diǎn)。這一點(diǎn)看上去簡(jiǎn)單，實(shí)則還是比較復(fù)雜的，想要統(tǒng)一起來，并不是一件簡(jiǎn)單的事情，就拿顏色這點(diǎn)來說，就算我只用幾個(gè)顏色搭配設(shè)計(jì)界面，也不容易使之統(tǒng)一，因?yàn)轭伾谋戎貢?huì)對(duì)畫面產(chǎn)生不同的影響，所以我們會(huì)對(duì)統(tǒng)一性做出多種統(tǒng)一方式方法。1.4.4

清晰性視覺效果的清晰有助于游戲玩家對(duì)游戲的理解，方便游戲玩家對(duì)功能的使用。對(duì)于移動(dòng)設(shè)備上的游戲來說，為了達(dá)到更高的效率和清晰度，需要制作不同的界面美術(shù)資源，以達(dá)到目的，這也是目前無法解決的硬件與軟件間的問題。1.4.5

習(xí)慣與認(rèn)知游戲界面設(shè)計(jì)在操作上的難易程度盡量不要超出大部分游戲玩家的認(rèn)知范圍，并且要考慮大部分游戲玩家在與游戲互動(dòng)時(shí)的習(xí)慣。這個(gè)部分就要提到游戲人群了，不同的人群擁有不同的年齡特點(diǎn)和時(shí)代背景，所接觸的游戲也大不相同，這就要游戲設(shè)計(jì)師提前定位目標(biāo)人群，把他們可能玩過的游戲做統(tǒng)一整理，分析并制定符合他們習(xí)慣的界面認(rèn)知系統(tǒng)。1.4.6

自由度游戲玩家在與游戲進(jìn)行互動(dòng)時(shí)的方式具有多重性，自由度很高，例如操作的工具不單單局限于鼠標(biāo)和鍵盤，也可以是游戲手柄、體感游戲設(shè)備。這一點(diǎn)對(duì)于高端玩家來說，是非常重要的，因?yàn)檫@群人不會(huì)停留在基礎(chǔ)的玩法之上，他們會(huì)利用游戲中各種細(xì)微的空間，來表現(xiàn)出自身的不同和優(yōu)勢(shì)，所以游戲UI設(shè)計(jì)師需要在界面的部分為這類人群提供自由度較高的設(shè)計(jì)。通過游戲界面的合理設(shè)計(jì)傳遞給用戶一種情感，是界面設(shè)計(jì)的藝術(shù)核心思想所在。玩家在與游戲進(jìn)行交互時(shí)，使玩家在情感上產(chǎn)生共鳴，利用情感進(jìn)行表達(dá)，能夠真正的反映玩家與游戲之間的情感關(guān)系。游戲界面設(shè)計(jì)按照形式主要可以分為3類，一是以功能實(shí)現(xiàn)為基礎(chǔ)的界面設(shè)計(jì)，二是以情感表達(dá)為重點(diǎn)的界面設(shè)計(jì)，三是以環(huán)境因素為前提的界面設(shè)計(jì)。

1.5游戲界面設(shè)計(jì)的3種形式1.5.1以功能性和使用性為核心游戲界面設(shè)計(jì)具有界面設(shè)計(jì)最為基本的性能，即功能性與使用性。通過游戲界面的合理設(shè)計(jì)，充分體現(xiàn)游戲的功能性，將產(chǎn)品信息傳遞給游戲玩家，因?yàn)橛螒蛲婕沂枪δ苄越缑娲嬖诘囊饬x所在，但由于游戲玩家的文化層次具有差異性，因此界面在設(shè)計(jì)上更應(yīng)該以客觀的體現(xiàn)作品信息為前提。1.5.2以情感表達(dá)為核心通過對(duì)游戲界面的合理設(shè)計(jì)使游戲玩家與游戲之間產(chǎn)生一種情感互動(dòng)，是界面設(shè)計(jì)的核心精神所在。游戲玩家在操作游戲時(shí)，通過游戲界面進(jìn)行交互，利用情感表達(dá)，將游戲玩家與游戲之間的虛擬關(guān)系變得真實(shí)。情感在傳遞的過程中是確定性與不確定性的結(jié)合體，所以游戲玩家在玩游戲時(shí)的情感體驗(yàn)是設(shè)計(jì)師們進(jìn)行設(shè)計(jì)時(shí)更為強(qiáng)調(diào)的內(nèi)容。1.5.3以營造環(huán)境為前提作品的設(shè)計(jì)離不開環(huán)境，環(huán)境氛圍的營造本身就是一種情感信息的表達(dá)，對(duì)游戲想傳遞給玩家的信息有著特殊