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

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

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

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

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

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

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