游戲UI 第2章　游戲UI設(shè)計基本元素學(xué)習(xí)課件

2.1.1色彩元素

2.1游戲UI設(shè)計中的基本視覺元素游戲UI設(shè)計是指對游戲的人機交互、操作邏輯、界面美觀的整體設(shè)計。一些比較出色的游戲UI設(shè)計不僅讓游戲獨具特色，還可以讓游戲操作變得簡單、易學(xué)，大大的增加了游戲的上手度。由于大部分游戲本身都是通過圖形與用戶進行人機交互，所以一個漂亮的游戲UI的風格、合現(xiàn)的界面操作流程都可以給用戶留下非常好的第一印象。這些因素對于游戲產(chǎn)品爭取、引導(dǎo)用戶有著決定性的作用。人們對于視覺傳達的第一印象往往是通過色彩得到的，色彩與公眾的生理和心理反應(yīng)密切相關(guān)。因此，在某種意義上說，色彩是游戲UI設(shè)計中最重要的元素。不同的色彩會給人帶來不同的心理暗示，影響玩家對游戲的注意力。在游戲UI設(shè)計中，色彩的搭配是靈活多變的，主要是由游戲的主題所決定。色彩有著更豐富的表現(xiàn)力，它帶給玩家對游戲的第一感覺，引導(dǎo)玩家體會色彩的用意，色彩成為游戲界面中傳遞信息、表達情感的重要角色。在游戲界面中色彩依附于圖形，增強了圖形的表達能力。2.1.2圖形元素圖形是游戲UI設(shè)計中重要的視覺傳達要素，它直觀、形象、生活感強、富有美感。圖形元素在游戲UI設(shè)計中的主要功能是充分表述游戲主題、渲染游戲氛圍、吸引玩家的注意。在日常生活中人們對圖片的感受非常敏感，可以直觀地傳達信息，有強烈的視覺吸引力。2.1.3文字元素文字是信息傳遞的基本符號，在游戲UI設(shè)計中占有非常重要的地位，文字被廣泛地應(yīng)用在游戲Logo、標題、廣告語、信息提示、正文中，在強化玩家對游戲的視覺印象和引導(dǎo)玩家順利的進行游戲操作方面能起到事半功倍的作用。

2.2圖形元素設(shè)計在游戲界面中，圖形元素主要是由發(fā)揮裝飾性功能的圖案、圖像以及發(fā)揮信息傳達功能的圖標組成。圖形是游戲界面中最直觀、占據(jù)空間最多的設(shè)計元素，圖形元素的使用得當直接關(guān)系到游戲界面的成敗。2.2.1圖形元素的功能圖形元素是以“看”而非“讀”為主的元素形式，因此，圖形元素的視覺裝飾性功能是其主要的功能。比起文字的功能，圖形存在更寬泛的信息傳遞意義。文字的表達是線性的，而圖形的表達更加直觀，有文字所無法達到意義的表達功能。2.2.2圖形元素的作用界面中恰當?shù)膱D形應(yīng)用可以激發(fā)玩家的游戲體驗，并能夠增強游戲信息傳遞的效果，甚至可以讓玩家在感覺不到同這一層面的前提下順利完成游戲任務(wù)。這在近幾年以第一人稱為主的射擊類和競速類游戲中的抬頭顯示界面和儀表盤界面中體現(xiàn)得最為明顯。為了給玩家置身其中的游戲感覺，這兩類游戲的界面在圖形設(shè)計上通常會模擬真實世界中的機械儀表盤，在游戲世界中再現(xiàn)虛擬現(xiàn)現(xiàn)實功能。2.2.3圖標設(shè)計的重要性圖標在游戲界面中應(yīng)用非常頻繁，也是游戲界面中圖形的一種重要表現(xiàn)形式。很多游戲公司發(fā)布一款新的游戲通常面向全球范圍，不得不考慮游戲在不同國家使用不同的語言版本，并且由于各國語言文字書寫的巨大差異，同樣意思對于不同語言文字來說占用的空間是不同的，設(shè)計者在設(shè)計文字界面時要預(yù)留足夠的空間，這給設(shè)計師帶來不少的難度。這時如果能將文字轉(zhuǎn)換為圖標，就會省去不少麻煩。特別是在策略類游戲中，因為功能非常繁多，如果全部以文字進行說明則會使玩家看到滿屏幕的文字導(dǎo)致游戲無法進行，而將對應(yīng)的功能配以相應(yīng)的圖標，情況就會好很多，例如貨幣圖標、軍隊圖標、各種物資的圖標等，因為日常事物的結(jié)構(gòu)形態(tài)在全球范圍內(nèi)幾乎相同，不論語言多么無法溝通，圖形總能讓人快速理解所要表達的意思。動手實踐——設(shè)計游戲圖標動手實踐：設(shè)計游戲圖標源文件：光盤\源文件\第2章\游戲圖標.psd視頻：光盤\視頻\第2章\游戲圖標.swf動手實踐——設(shè)計游戲啟動圖標動手實踐：設(shè)計游戲啟動圖標源文件：光盤\源文件\第2章\游戲啟動圖標.psd視頻：光盤\視頻\第2章\游戲啟動圖標.swf

2.3文字元素設(shè)計在信息的傳播過程中，文字作為信息傳遞的基本元素僅次于口語成為比圖形更直接更清晰，表達更準確的傳播工具，也與圖形元素并列成為游戲UI設(shè)計元素中不可缺少的部分。2.3.1文字在游戲界面中的作用文字的出現(xiàn)彌補了圖形在信息傳遞過程中的模糊性，有著其他設(shè)計元素無法替代的功能。在游戲界面中，文字的作用主要集中于兩個方面。一是作為文字最原始的功能性元素，進行信息和情感的傳遞；二是作為視覺圖形元素減弱信息傳遞功能，增強文字字形的審美價值。2.3.2文字是信息傳遞的媒介作為信息傳遞的媒介，文字在游戲界面中主要發(fā)揮了解釋說明的功能，例如玩家在面對一款新的游戲時所需要的游戲規(guī)則說明性界面中，文字可以清晰地表達出游戲的玩法，當然，很多游戲規(guī)則說明界面中使用了文字與圖形相結(jié)合的方式，增添了說明的生動性。2.3.3文字作為視覺圖形元素文字作為圖形元素在游戲界面中還起到審美與情感傳遞的功能。文字是在原始圖形的基礎(chǔ)上演變而來的，是一種抽象的符號、靜態(tài)的語言，其本身就具有圖形之美。將文字用為視覺圖形元素進行處理時，文字的易讀性和清晰性并不重要，文字會作為圖形或背景起到渲染游戲氣氛的作用，文字的這一功能通常體現(xiàn)在根據(jù)游戲的主題內(nèi)容進行設(shè)計的游戲標題上，傳遞給玩家符合游戲體驗的情感。動手實踐——設(shè)計游戲文字動手實踐：設(shè)計游戲文字源文件：光盤\源文件\第2章\游戲文字.psd視頻：光盤\視頻\第2章\游戲文字.swf

2.4動態(tài)控制元素設(shè)計在游戲界面中有許多動態(tài)控制元素，通過對這些元素的操作可以控制游戲的進程，常見的游戲控制元素包括按鈕、列表菜單、文本輸入控件、滾動條等。2.4.1按鈕元素軟件界面中使用最多的交互設(shè)計元素，不僅僅在游戲的界面中，在計算機系統(tǒng)界面、其他軟件界面中按鈕也非常多見，可以說游戲中按鈕的設(shè)置與應(yīng)用大都是借鑒于計算機系統(tǒng)界面。在游戲界面中按鈕一般分為選擇按鈕和事件激發(fā)按鈕。不同的按鈕選擇方式適用于不同的信息傳遞。動手實踐——設(shè)計游戲按鈕動手實踐：設(shè)計游戲按鈕源文件：光盤\源文件\第2章\游戲按鈕.psd視頻：光盤\視頻\第2章\游戲按鈕.swf2.4.2進度條元素進度條是游戲界面中常見的元素，用戶在啟動游戲時，游戲需要一定的啟動時間，為了避免用戶在等待的過程中退出，通常輔以進度條告知用戶大概還有多久，但等待總是讓人不耐煩的，所以設(shè)計師就需要通過更加人性化的方式來表現(xiàn)游戲的加載進度，通常將進度條設(shè)計成各種極具創(chuàng)意與美觀的形態(tài)，讓玩家更樂意欣賞進度條的滾動。動手實踐——設(shè)計游戲加載進度條動手實踐：設(shè)計游戲加載進度條源文件：光盤\源文件\第2章\游戲加載進度條.psd視頻：光盤\視頻\第2章\游戲加載進度條.swf2.4.3滾動條元素滾動香條出現(xiàn)在屏幕空間有限且列表信息較多的情況中，雖然這樣可以無限為玩家提供大量的信息選擇，但是卻要玩家進行多一步操作，玩家必須滾動列表尋找自己想要的選項，選項的增多無疑會為玩家?guī)韺ふ疑系姆奖?。因此，在游戲界面的設(shè)計過程中，可以在必要的情況下使用滾動條設(shè)計，但需要注意的是，通常僅為相應(yīng)的信息內(nèi)容設(shè)計垂直滾動條，而不會設(shè)計橫向滾動條，因為橫向滾動條不便于用戶的操作。2.4.4列表選項元素在游戲界面中，列表選項多數(shù)是以圖形的方式表現(xiàn)的，例如游戲中的道具選擇、角色選擇、場景選擇等，并且選項的數(shù)量多于三個少于八個。動手實踐——設(shè)計游戲選項面板動手實踐：設(shè)計游戲選項面板源文件：光盤\源文件\第2章\游戲選項面板.psd視頻：光盤\視頻\第2章\游戲選項面板.swf2.4.5文本輸入元素文本輸入信息除了在游戲的開始界面中出現(xiàn)，在游戲過程中的界面也經(jīng)常使用，特別是在大型網(wǎng)絡(luò)游戲中。開始界面的文本輸入通常是輸入玩家角色的名稱，或者玩家自己名稱。這樣做的目的其一允許玩家定義自己的游戲角色特征；其二在很多追求分數(shù)記錄的游戲中，玩家可以在未來的高分排行榜上看到自己的名字，也為玩家創(chuàng)造一種成就感。視覺形象是人類感知世界、傳遞信息的主要方式。雖然在人類文明發(fā)展過程中，文字、圖形等視覺符號的傳播方式隨著傳播媒介的發(fā)展變化幾經(jīng)變異，但視覺形象在人類認知世界過程中的地位從未動搖。

2.5其他元素設(shè)計2.5.1視聽元素的重要性人們對于視覺形象的感知與欣賞能力提高，對視覺審美提出了更高的要求，聽覺感知元素與視覺形象的結(jié)合為人們帶來了更廣泛的視聽體驗，媒體的集成性將視聽元素統(tǒng)一轉(zhuǎn)化為數(shù)字語言，使得數(shù)字媒介本身的表現(xiàn)力更加豐富、更加人性化。音效是每個游戲不可缺少的部分，游戲設(shè)計者會根據(jù)游戲本身的特點、故事情節(jié)、游戲體驗等為其創(chuàng)作獨創(chuàng)音樂與音效。在音效上，游戲開發(fā)者也追求極度逼真夸張的效果，以期達到視聽的完美結(jié)合。音效作為一種“隱形”的界面形式，它對玩家產(chǎn)生的作用主要表現(xiàn)在4個方面。1．消除歧義通過不同的音效，可以讓玩家區(qū)分游戲中的操作或游戲世界中發(fā)生事情的成功與失敗。這一點視覺回饋便不如聲音那樣明顯，即使沒有任何文字、圖形的提示，玩家也會馬上意識到并進行查看。2．及時提供反饋在緊張的游戲過程中，視覺的信息反饋有時會因為太隱蔽而被玩家忽視，或者出現(xiàn)得太直接而導(dǎo)致玩家從緊張的游戲世界中分神。聲音并不是游戲玩法的核心部分，因此，在提示的音效響起時，反而讓玩家感覺很貼切自然，同時也能夠從音效中判斷將要發(fā)生的事情，并沒有任何視覺元素打斷游戲的進度。3．強化視覺效果結(jié)合視覺效果，聲音可以反饋游戲中新發(fā)生的事件。4．增強游戲氛圍這是聲音元素最基本的作用，就是結(jié)合整個游戲界面的視覺效果，幫助玩家盡快沉浸在游戲世界中，讓整個游戲世界更加聲情并茂。2.5.2聲音元素的作用2.5.3合理配色的重要性人們的日常生活中每時每刻都充斥著各種各樣的色彩。玩家在第一眼看到一款游戲時，就會首先根據(jù)色彩判斷這款游戲所渲染的氛圍。這也是設(shè)計師在設(shè)計游戲界面時需要非常注意的部分，因為一旦玩家第一感覺失敗，將會使玩家對游戲產(chǎn)生歧義。動手實踐——設(shè)計游戲背景動手實踐：設(shè)計游戲背景源文件：光盤\源文件\第2章\游戲背景.psd視頻：光盤\視頻\第2章\游戲背景.swf

2.6專家支招一款成功的游戲，并不是越復(fù)雜越好，簡單的小游戲要比大作更有優(yōu)勢。在游戲的UI設(shè)計上，設(shè)計師要想做的很出彩，游戲中各個要素的設(shè)計和功能鍵的擺放也是有講究的，如何讓用戶體驗更舒適，同樣也很重要。在了解了游戲界面中各種要素的設(shè)計方法和要點，在設(shè)計過程中需要注意細節(jié)效果的表現(xiàn)。2.6.1為什么說游戲界面設(shè)計對游戲是至關(guān)重要的？答：隨著數(shù)字技術(shù)的發(fā)展，許多數(shù)字產(chǎn)品一旦涉及到人機交互，設(shè)計者就不得不重視用戶界面，沒有有效的用戶界面，用戶與產(chǎn)品的交流就不存在，那么許多數(shù)字產(chǎn)品也就失去了自身的意義，劣質(zhì)的用戶界面將意味著產(chǎn)品的失敗，不管該產(chǎn)品的創(chuàng)意有多么新奇。所以為數(shù)字產(chǎn)品創(chuàng)建精美易用的用戶界面是非常重要的。2.6.2游戲界面中的交互設(shè)計是什么？答：游戲界面中的交互是一種“你來我往”的動態(tài)行為，因此，交互設(shè)計就是一種動態(tài)