《游戲界面設(shè)計(jì)》03 多平臺(tái)游戲UI設(shè)計(jì)

YOUXIJIEMIANSHEJI68%[F:]25.1GB17.0GBFreeYOUXIJIEMIANSHEJIYOUXIJIEMIANSHEJI一、網(wǎng)絡(luò)游戲概述 網(wǎng)絡(luò)游戲（onlinegame）也稱(chēng)在線游戲，簡(jiǎn)稱(chēng)“網(wǎng)游”，是指以互聯(lián)網(wǎng)為傳輸媒介，以游戲運(yùn)營(yíng)商服務(wù)器和用戶(hù)計(jì)算機(jī)為處理終端，以游戲客戶(hù)端軟件為信息交換窗口，旨在實(shí)現(xiàn)娛樂(lè)、休閑、交流目的的具有可持續(xù)性的個(gè)體性多人在線游戲。YOUXIJIEMIANSHEJI網(wǎng)絡(luò)游戲與獨(dú)立游戲的區(qū)別在于，網(wǎng)絡(luò)游戲玩家必須通過(guò)網(wǎng)絡(luò)連接，從而在線玩多人游戲。一般來(lái)說(shuō)，它是指在虛擬環(huán)境中由多個(gè)玩家按照一定的規(guī)則進(jìn)行操作，通過(guò)計(jì)算機(jī)網(wǎng)絡(luò)達(dá)到娛樂(lè)和交互目的的游戲產(chǎn)品的集合，如圖所示。經(jīng)典網(wǎng)絡(luò)游戲《英雄聯(lián)盟》截圖YOUXIJIEMIANSHEJI同一主題的反復(fù)開(kāi)發(fā)我國(guó)網(wǎng)絡(luò)游戲產(chǎn)業(yè)呈現(xiàn)多元化發(fā)展趨勢(shì)我國(guó)網(wǎng)絡(luò)游戲市場(chǎng)不斷擴(kuò)大我國(guó)網(wǎng)絡(luò)游戲自主研發(fā)向海外出口▼我國(guó)游戲市場(chǎng)分析YOUXIJIEMIANSHEJI二、網(wǎng)絡(luò)游戲產(chǎn)品分類(lèi)及UI設(shè)計(jì)（一）在線游戲在線游戲主要是玩家與玩家的互動(dòng)。大多數(shù)在線游戲需要讓玩家明白3件事：我是誰(shuí)、我要消滅誰(shuí)、誰(shuí)要消滅我。本文主要把在線游戲分為網(wǎng)絡(luò)客戶(hù)端游戲和網(wǎng)頁(yè)游戲。YOUXIJIEMIANSHEJI1.網(wǎng)絡(luò)客戶(hù)端游戲網(wǎng)絡(luò)客戶(hù)端游戲是網(wǎng)絡(luò)游戲和客戶(hù)端游戲兩個(gè)概念的合體?？蛻?hù)端游戲簡(jiǎn)稱(chēng)“端游”。網(wǎng)絡(luò)游戲和客戶(hù)端游戲兩個(gè)名詞的合體不是隨意組合而成的。隨著網(wǎng)絡(luò)的飛速發(fā)展與普及，客戶(hù)端游戲發(fā)展迅速?！妒姑賳綩nline》畫(huà)面截圖YOUXIJIEMIANSHEJI網(wǎng)絡(luò)客戶(hù)端游戲針對(duì)的平臺(tái)主要是PC端，因此在游戲UI設(shè)計(jì)中要注意以下原則：簡(jiǎn)易性用戶(hù)語(yǔ)言盡量減少記憶負(fù)擔(dān)一致性人性化安全性和靈活性排列從用戶(hù)的角度考慮YOUXIJIEMIANSHEJI例如，第三人稱(chēng)射擊類(lèi)游戲《湯姆克蘭西：全境封鎖》的整體UI較扁平化，更簡(jiǎn)潔、大方，可謂簡(jiǎn)約而不簡(jiǎn)單。經(jīng)典第三人稱(chēng)射擊類(lèi)游戲《湯姆克蘭西：全境封鎖》截圖①經(jīng)典第三人稱(chēng)射擊類(lèi)游戲《湯姆克蘭西：全境封鎖》截圖②YOUXIJIEMIANSHEJI2.網(wǎng)頁(yè)游戲網(wǎng)頁(yè)游戲簡(jiǎn)稱(chēng)“頁(yè)游”，是指無(wú)須下載和安裝客戶(hù)端程序，基于Web瀏覽器，使用PHP/ASP/Perl等解釋語(yǔ)言建設(shè)的虛擬社區(qū)或者使用Flash/JAVA技術(shù)制作的游戲。經(jīng)典網(wǎng)頁(yè)游戲《九州志》截圖YOUXIJIEMIANSHEJI網(wǎng)頁(yè)游戲的平臺(tái)固定為PC端，但是近年來(lái)隨著技術(shù)發(fā)展，也出現(xiàn)了一些手機(jī)上的網(wǎng)頁(yè)游戲。根據(jù)不同平臺(tái)的需求，網(wǎng)頁(yè)游戲的UI尺寸和分辨率也要適當(dāng)調(diào)整。不同分辨率的游戲頁(yè)面尺寸如表所示。屏幕分辨率和顯示尺寸的對(duì)應(yīng)關(guān)系表YOUXIJIEMIANSHEJI網(wǎng)頁(yè)游戲UI設(shè)計(jì)中應(yīng)注意以下內(nèi)容：01由于其煩瑣的界面，許多玩家在游戲過(guò)程中會(huì)碰到圖標(biāo)不好找、操作不能快速進(jìn)行等問(wèn)題。因此，不同類(lèi)型的UI需要有較為明顯的區(qū)別，并且在圖標(biāo)和操作等方面要有較強(qiáng)的指引性，能夠讓玩家得到更好的操作體驗(yàn)。由于其本身的特性，游戲類(lèi)型相對(duì)于其他平臺(tái)來(lái)說(shuō)較少且較為固定。一般網(wǎng)頁(yè)游戲的圖標(biāo)較多且密集，因?yàn)樗枰墓δ茌^為煩瑣。因此在設(shè)計(jì)網(wǎng)頁(yè)游戲UI時(shí)，除了要實(shí)現(xiàn)其基本需求外，還要盡可能地簡(jiǎn)化。02YOUXIJIEMIANSHEJI單機(jī)游戲一般是指僅使用一臺(tái)計(jì)算機(jī)即可運(yùn)作的電子游戲。隨著網(wǎng)絡(luò)的普及，許多單機(jī)游戲已經(jīng)支持互聯(lián)網(wǎng)功能。（二）單機(jī)游戲單機(jī)游戲YOUXIJIEMIANSHEJI單機(jī)游戲的傳輸媒介主要包括局域網(wǎng)、IP網(wǎng)絡(luò)、本地服務(wù)器、游戲平臺(tái)，因此也就有了一種新的說(shuō)法——平臺(tái)聯(lián)機(jī)游戲?！娥嚮摹酚螒蚪貓DYOUXIJIEMIANSHEJI

《俠盜獵車(chē)手》游戲截圖《怪物獵人》游戲截圖YOUXIJIEMIANSHEJI三、原創(chuàng)PC端角色扮演游戲UI設(shè)計(jì)案例（一）案例簡(jiǎn)介此案例主要為大家講解設(shè)計(jì)思路與該角色展示界面的所有元素，具體繪制過(guò)程可參考微課視頻。該游戲UI設(shè)計(jì)的最終效果如圖所示。【微課視頻】原創(chuàng)PC端角色扮演游戲UI設(shè)計(jì)案例原創(chuàng)PC端角色扮演游戲UI設(shè)計(jì)的最終效果YOUXIJIEMIANSHEJI（二）案例制作過(guò)程在開(kāi)始進(jìn)行游戲UI設(shè)計(jì)之前，應(yīng)該先弄清楚一個(gè)最基本的概念：游戲UI設(shè)計(jì)不是把自己關(guān)在一個(gè)小黑屋里，拍一下腦袋，想怎么畫(huà)就怎么畫(huà)，必須先看游戲計(jì)劃，了解要設(shè)計(jì)的是什么游戲、玩什么、給誰(shuí)玩、怎么玩。這幾點(diǎn)確定后才能確定游戲的藝術(shù)風(fēng)格。1.項(xiàng)目需求分析YOUXIJIEMIANSHEJI2.設(shè)計(jì)定位分析在構(gòu)建框架這部分，需要特別注意4個(gè)方面：根據(jù)要求進(jìn)行風(fēng)格設(shè)定，根據(jù)游戲類(lèi)型進(jìn)行框架構(gòu)建；01先將界面模塊的設(shè)計(jì)開(kāi)發(fā)進(jìn)行優(yōu)先分級(jí)，讓設(shè)計(jì)團(tuán)隊(duì)成員可以根據(jù)工作量和時(shí)間差安排好設(shè)計(jì)工作；02優(yōu)先確定設(shè)計(jì)規(guī)范，否則等開(kāi)工了再進(jìn)行修改會(huì)導(dǎo)致工作進(jìn)度緩慢；03菜單層控制在3級(jí)，不要超過(guò)4級(jí)。04YOUXIJIEMIANSHEJI3.草圖設(shè)計(jì)與制作根據(jù)游戲風(fēng)格制作界面草圖，如圖所示。要根據(jù)市場(chǎng)確認(rèn)用戶(hù)操作習(xí)慣，規(guī)劃好顯示區(qū)域、操作區(qū)域、執(zhí)行按鈕區(qū)域等。從主界面開(kāi)始逐層深入設(shè)計(jì)，如一些常用的界面、彈出框、功能按鈕、道具圖標(biāo)、技能圖標(biāo)等。對(duì)每個(gè)元素進(jìn)行布局和草圖設(shè)計(jì)YOUXIJIEMIANSHEJI（1）對(duì)設(shè)置按鈕進(jìn)行草圖繪制，繪制時(shí)一定要注意造型、風(fēng)格的統(tǒng)一，如圖所示。4.局部細(xì)節(jié)的處理與展示設(shè)置按鈕草圖制作YOUXIJIEMIANSHEJI（2）選中設(shè)置按鈕圖層，對(duì)設(shè)置按鈕草圖進(jìn)行線稿細(xì)化，然后用選框工具勾選出設(shè)置按鈕最上面的造型部分，如圖所示。用選框工具勾選出來(lái)YOUXIJIEMIANSHEJI（3）對(duì)選框工具勾選出來(lái)的造型部分進(jìn)行固有色填充，如圖所示。填色YOUXIJIEMIANSHEJI（4）對(duì)設(shè)置按鈕進(jìn)行全部固有色填充以及細(xì)節(jié)的繪制，注意要把設(shè)置按鈕中的金屬材質(zhì)表現(xiàn)出來(lái)，如圖所示。用選框工具勾選出來(lái)YOUXIJIEMIANSHEJI（5）對(duì)繪制好的設(shè)置按鈕進(jìn)行文字添加。為了與整體界面風(fēng)格保持一致，這里的文字采用了手寫(xiě)，如圖所示。配上文字YOUXIJIEMIANSHEJI（6）在界面中擺放好底座。這里的界面主要是選人界面，有一個(gè)角色的展示T臺(tái)。因此，界面中的底座采用了T臺(tái)展示的效果設(shè)計(jì)，并擺放在界面的最中心位置，如圖所示。底座擺放YOUXIJIEMIANSHEJI（7）擺放好底座之后，對(duì)底座的整體進(jìn)行完整的草圖設(shè)計(jì)，如圖所示。底座草圖設(shè)計(jì)YOUXIJIEMIANSHEJI（8）基于整體界面的風(fēng)格，給底座也填充一個(gè)深灰色的固有色，如圖所示。底座填色YOUXIJIEMIANSHEJI（9）填充好固有色之后，對(duì)底座的細(xì)節(jié)進(jìn)行草圖繪制，如圖所示。底座細(xì)節(jié)草圖繪制YOUXIJIEMIANSHEJI（10）對(duì)繪制好的底座細(xì)節(jié)部分進(jìn)行線稿優(yōu)化與色彩填充。這里對(duì)底座細(xì)節(jié)部分的材質(zhì)質(zhì)感的表現(xiàn)與設(shè)置按鈕保持一致，如圖所示。底座細(xì)節(jié)的材質(zhì)質(zhì)感表現(xiàn)YOUXIJIEMIANSHEJI（11）在繪制好的底座箭頭上面繪制錨點(diǎn)，處理好細(xì)節(jié)之后進(jìn)行復(fù)制并水平翻轉(zhuǎn)，如圖所示。使用工具翻轉(zhuǎn)、復(fù)制YOUXIJIEMIANSHEJI（12）用綠色對(duì)底座箭頭的中間部分進(jìn)行固有色填充，再對(duì)底座進(jìn)行描邊，如圖所示。描邊YOUXIJIEMIANSHEJI（13）對(duì)底座箭頭中間部分填充的綠色進(jìn)行色彩飽和度的調(diào)整，讓整體看上去更加有光澤，如圖所示。調(diào)整色彩飽和度YOUXIJIEMIANSHEJI（14）對(duì)所有的元素進(jìn)行細(xì)節(jié)的調(diào)整并優(yōu)化，最終效果如圖所示。最終效果YOUXIJIEMIANSHEJI一、移動(dòng)端游戲概述移動(dòng)是一切事物的未來(lái)趨勢(shì)。移動(dòng)端游戲主要是指針對(duì)移動(dòng)端平臺(tái)的游戲產(chǎn)品。這里所說(shuō)的移動(dòng)端平臺(tái)主要是能隨身移動(dòng)、體量小、輕便的設(shè)備，如手機(jī)、平板電腦、掌機(jī)（掌上游戲機(jī)）等。典型的移動(dòng)端游戲有《陰陽(yáng)師》《開(kāi)心消消樂(lè)》，如圖所示?！蛾庩?yáng)師》游戲截圖YOUXIJIEMIANSHEJI（一）手機(jī)游戲和平板電腦游戲二、移動(dòng)端游戲產(chǎn)品分類(lèi)及UI設(shè)計(jì)手機(jī)是集通信、辦公、娛樂(lè)等多樣功能于一體的移動(dòng)設(shè)備，全球的手機(jī)用戶(hù)已超過(guò)10億，并逐年增長(zhǎng)。在生活節(jié)奏越來(lái)越快的當(dāng)下，許多人其實(shí)并沒(méi)有太多的空余時(shí)間和穩(wěn)定的游戲場(chǎng)所去玩游戲。PixelHeroGames旗下作品《艾森霍恩：異形審判官》截圖YOUXIJIEMIANSHEJI作為移動(dòng)設(shè)備，手機(jī)的容量比計(jì)算機(jī)要小，因此游戲畫(huà)面質(zhì)量肯定不如一些主機(jī)游戲和單機(jī)游戲。而且手機(jī)的屏幕大小對(duì)游戲體驗(yàn)也有較大影響。韓國(guó)藍(lán)洞工作室開(kāi)發(fā)的手機(jī)游戲《絕地求生》截圖YOUXIJIEMIANSHEJI移動(dòng)游戲中始終有著較高用戶(hù)人數(shù)和游戲時(shí)長(zhǎng)的休閑益智類(lèi)游戲，具有隨開(kāi)隨玩、毫無(wú)心理負(fù)擔(dān)的特點(diǎn)，正好滿(mǎn)足了用戶(hù)對(duì)移動(dòng)游戲的要求。但隨著一些重度游戲的發(fā)展，近幾年也出現(xiàn)從端游轉(zhuǎn)到手游的情況。網(wǎng)易游戲研發(fā)的手機(jī)游戲《荒野行動(dòng)》截圖YOUXIJIEMIANSHEJI基于以上需求，在手機(jī)游戲UI設(shè)計(jì)中需要掌握以下原則：01

在引導(dǎo)性這方面多花費(fèi)功夫，因?yàn)橐苿?dòng)手機(jī)屏幕較小，引導(dǎo)性按鈕和文字應(yīng)該更具有辨識(shí)度。在保證整體布局的基礎(chǔ)上，盡量以圖標(biāo)代替文字，而且圖標(biāo)的引導(dǎo)性要強(qiáng)。02

移動(dòng)端設(shè)備的屏幕尺寸非常多，考慮到用戶(hù)的操作體驗(yàn)等，針對(duì)不同尺寸的移動(dòng)設(shè)備設(shè)計(jì)的游戲UI的尺寸也應(yīng)有所區(qū)別，如表所示。YOUXIJIEMIANSHEJI表3-2Android系統(tǒng)UI大小YOUXIJIEMIANSHEJI與其他設(shè)備相比，手機(jī)會(huì)有很大的操作局限，如怎么在一小塊區(qū)域內(nèi)實(shí)現(xiàn)移動(dòng)以及轉(zhuǎn)換視角。由于操作和屏幕大小的局限，某些手機(jī)游戲的操控類(lèi)UI就需要更加精簡(jiǎn)、實(shí)用。騰訊開(kāi)發(fā)并運(yùn)營(yíng)的多人在線戰(zhàn)術(shù)競(jìng)技類(lèi)手機(jī)游戲《王者榮耀》截圖YOUXIJIEMIANSHEJI平板電腦作為大屏移動(dòng)設(shè)備，其尺寸、分辨率與手機(jī)有較為明顯的區(qū)別。為平板電腦開(kāi)發(fā)游戲（非完全移植）時(shí)，用戶(hù)操作體驗(yàn)是重要的考慮因素。在UI交互上，平板電腦其實(shí)與手機(jī)有共通之處（點(diǎn)擊、滑動(dòng)、拖拽等）。日本KLab公司開(kāi)發(fā)的音樂(lè)節(jié)奏類(lèi)與卡牌養(yǎng)成類(lèi)游戲《LoveLive！學(xué)園偶像祭》YOUXIJIEMIANSHEJI表3-3所示為移動(dòng)端游戲和網(wǎng)頁(yè)游戲的區(qū)別。在了解移動(dòng)端游戲和網(wǎng)頁(yè)游戲的區(qū)別之后，還需要了解移動(dòng)端游戲的系統(tǒng)，目前主要是Android和iOS。表3-3移動(dòng)端游戲與網(wǎng)頁(yè)游戲的區(qū)別YOUXIJIEMIANSHEJI僅以物理硬鍵控制操作的機(jī)型（以下簡(jiǎn)稱(chēng)按鍵機(jī)）；主要以觸摸方式操作的機(jī)型（通常包括主頁(yè)、掛機(jī)等物理鍵）；物理硬鍵齊全，但是支持觸摸操作的機(jī)型（外形與按鍵機(jī)相同）。根據(jù)硬件來(lái)區(qū)分，移動(dòng)電話(huà)的類(lèi)型有：YOUXIJIEMIANSHEJI主流的可安裝第三方應(yīng)用的軟件平臺(tái)有：WindowsPhone、Android、iOS及其他。現(xiàn)如今，智能手機(jī)的主要交互方式為觸控，手機(jī)游戲的UI設(shè)計(jì)需要在這一基礎(chǔ)上向前延展，并且要充分考慮用戶(hù)的實(shí)際操作體驗(yàn)，以及怎樣的布局才能讓用戶(hù)使用起來(lái)更加順手、便捷，如圖所示。iPhone不同尺寸的界面展示YOUXIJIEMIANSHEJI

iPhone不同顯示環(huán)境下的適應(yīng)性布局YOUXIJIEMIANSHEJI從設(shè)計(jì)第三方應(yīng)用程序的角度來(lái)看，大致可以歸納出以下設(shè)計(jì)規(guī)范：iOS的出現(xiàn)打破了以往平臺(tái)固有的設(shè)計(jì)模式，大大簡(jiǎn)化了硬鍵和操作模式。然而，它缺乏一個(gè)固定的菜單模型，這對(duì)于第三方軟件的設(shè)計(jì)是一個(gè)巨大的挑戰(zhàn)，要么需要很大程度上脫離iPhone本身的設(shè)計(jì)規(guī)范系統(tǒng)，要么需要極其精簡(jiǎn)的功能。Android遵循iPhone中的一些經(jīng)典手勢(shì)，操作風(fēng)格和頁(yè)面布局相對(duì)保守，保留了菜單和返回兩個(gè)硬鍵，雖然不夠獨(dú)特，但是功能和設(shè)計(jì)之間有很好的平衡，如下圖所示。YOUXIJIEMIANSHEJI

Android系統(tǒng)的傳統(tǒng)菜單YOUXIJIEMIANSHEJIiPhone打破了傳統(tǒng)的觸摸屏手機(jī)的交互模式，充分模擬了普通人操作物體的固有習(xí)慣和思維方式。如圖所示，它運(yùn)用了推、拉、按壓和撥動(dòng)等日常生活中操作物體的基本動(dòng)作，使人們享受到愉悅的交互體驗(yàn)。游戲UI設(shè)計(jì)師必須掌握這些設(shè)備的基本交互方式，這樣有助于游戲和玩家的互動(dòng)，從而提升用戶(hù)體驗(yàn)。界面布局的手勢(shì)展示01YOUXIJIEMIANSHEJI界面布局的手勢(shì)展示02YOUXIJIEMIANSHEJI（二）掌機(jī)游戲與手機(jī)、平板電腦相比，掌機(jī)的游戲機(jī)能（圖形處理器、內(nèi)存、按鍵等）是專(zhuān)業(yè)針對(duì)游戲性能而研發(fā)的。因此，玩家在使用掌機(jī)玩游戲時(shí)的體驗(yàn)會(huì)更好。任天堂公司推出的游戲《塞爾達(dá)傳說(shuō)：曠野之息》操作說(shuō)明界面YOUXIJIEMIANSHEJI在掌機(jī)發(fā)展的幾十年中，其根本交互方式是不變的，即都是以按鍵為基礎(chǔ)，即便是搖桿，也可以說(shuō)是按鍵的一種進(jìn)化。當(dāng)然，在近年觸屏技術(shù)的沖擊下，掌機(jī)也增加了觸屏的操控方式，如索尼公司的PSV、任天堂公司的Switch。YOUXIJIEMIANSHEJI絕大多數(shù)掌機(jī)游戲的基本操作仍然依靠按鍵實(shí)現(xiàn)，既可以是單擊按鍵，也可以是長(zhǎng)按按鍵。在有些游戲中，搖桿也能有與鼠標(biāo)類(lèi)似的作用。在掌機(jī)中，不同的按鍵對(duì)應(yīng)不同的功能或操作方式。隨著掌機(jī)按鍵的增多，游戲內(nèi)的部分界面甚至可以不用做出對(duì)應(yīng)的UI圖標(biāo)，只需對(duì)應(yīng)一個(gè)特殊的按鍵即可，具體引導(dǎo)也可以在游戲中實(shí)現(xiàn)。