UI視覺設(shè)計(jì)(適用培訓(xùn)、教學(xué))-第6章-游戲界面設(shè)計(jì)

第6章

游戲界面設(shè)計(jì)SummaryOfMacaronsColorMatchingWork章前導(dǎo)讀02

隨著科學(xué)技術(shù)的發(fā)展和人們對精神生活的追求不斷提高，我國已進(jìn)入了游戲產(chǎn)業(yè)的蓬勃發(fā)展時(shí)期，各種界面美觀、功能清晰的端游、頁游和手游都如雨后春筍般涌現(xiàn)出來。那么如何設(shè)計(jì)出優(yōu)秀的游戲界面呢？本章首先介紹游戲界面設(shè)計(jì)的基礎(chǔ)知識(shí)和規(guī)范，通過實(shí)戰(zhàn)案例講解游戲界面的一般設(shè)計(jì)方法和技巧。學(xué)習(xí)目標(biāo)ReviewOfWorkContent·了解游戲的基本界面·了解游戲界面的布局·了解游戲界面的風(fēng)格·掌握游戲界面設(shè)計(jì)的要點(diǎn)·了解游戲界面設(shè)計(jì)的規(guī)范·掌握游戲界面的一般制作方法6.2界面設(shè)計(jì)規(guī)范6.3

案例實(shí)戰(zhàn)6.1基礎(chǔ)知識(shí)第6章游戲界面設(shè)計(jì)6.1游戲界面設(shè)計(jì)的基礎(chǔ)知識(shí)6.1.1游戲的基本界面

常見游戲的基本界面有啟動(dòng)界面、主菜單界面、關(guān)卡界面、操作界面、勝利/失敗界面、商店界面和背包界面等。啟動(dòng)界面：玩家啟動(dòng)游戲時(shí)第一眼看到的畫面，常用于展示游戲人物或游戲場景等。主菜單界面：玩家進(jìn)入游戲后看到的第一個(gè)畫面，游戲的活動(dòng)、玩法、設(shè)置、公告、資源等內(nèi)容集中展示于此。設(shè)計(jì)時(shí)要分清主次。關(guān)卡界面：是玩家開始游戲前展示游戲進(jìn)度的界面，可以讓玩家清楚地了解當(dāng)前的游戲進(jìn)度。操作界面：是游戲的核心界面，玩家可以在該界面體驗(yàn)游戲的樂趣。設(shè)計(jì)時(shí)應(yīng)盡可能地滿足玩家的心理預(yù)期。勝利/失敗界面：勝利頁面應(yīng)該能讓玩家產(chǎn)生愉悅感；失敗界面最好能提供幾種提升思路，幫助玩家快速成長。商店界面：主要作用是羅列商品，方便玩家挑選和購買。設(shè)計(jì)時(shí)，可根據(jù)商品特點(diǎn)分類展示，不同類別的商品界面，布局應(yīng)當(dāng)一致。背包界面：用來整合玩家道具的界面。設(shè)計(jì)時(shí)，除了要安排物品展示區(qū)域和物品介紹區(qū)域外，還應(yīng)根據(jù)物品的類別在合適位置添加縱向或橫向?qū)Ш綑?，將物品分門別類整理清楚，以便玩家快速查看6.1.2游戲界面的布局

可將游戲界面劃分為主要視覺區(qū)域、次要視覺區(qū)域和弱視區(qū)域。主要視覺區(qū)域集中在界面中心，次要視覺區(qū)域集中在界面的左側(cè)和右側(cè)，弱視區(qū)域集中在界面的頂部和底部，如圖6-8所示。圖6-8《崩壞3》主菜單界面6.1.3游戲界面的風(fēng)格寫實(shí)風(fēng)格：游戲畫質(zhì)細(xì)膩、精美，從人物到場景都貼近現(xiàn)實(shí)，能給予玩家極強(qiáng)的代入感，更容易讓玩家沉浸其中。卡通風(fēng)格：將游戲人物和場景等內(nèi)容卡通化處理，游戲中的人物多為Q版，游戲場景則可能是一幅插畫或均勻排列的幾何圖形。日韓風(fēng)格：UI設(shè)計(jì)師在設(shè)計(jì)這類風(fēng)格的游戲界面時(shí)，交互按鈕的配色可首選淺色，外形要盡量避免帶有尖角。歐美風(fēng)格：該風(fēng)格的游戲角色表情豐富，體型一般非?？鋸?，擁有強(qiáng)健的肌肉或健美的身材，游戲場景偏寫實(shí)，標(biāo)題字體一般用粗體。像素風(fēng)格：設(shè)計(jì)這類風(fēng)格的游戲界面時(shí)，需要將圖標(biāo)、血條等一并設(shè)計(jì)為像素風(fēng)格，以呼應(yīng)主題，但用于解釋說明的文案不可像素化。6.1.4游戲界面的設(shè)計(jì)要點(diǎn)1．界面風(fēng)格契合游戲主題。

游戲界面的整體風(fēng)格應(yīng)該與游戲主題相契合?！讹L(fēng)暴英雄》游戲界面2．突出界面主體內(nèi)容。

UI設(shè)計(jì)師應(yīng)明確界面內(nèi)容的主次，并站在玩家的角度考慮界面內(nèi)容的實(shí)用性和可操作性?！锻跽邩s耀》結(jié)算界面3．界面效果簡潔易操作

UI設(shè)計(jì)師可通過輪廓對比、色相對比、明度對比、虛實(shí)對比、主次對比、疏密對比等手法提高界面的視覺清晰度，通過隱藏或刪除可有可無的功能，讓界面更加清爽、整潔、便于操作?！痘囊皝y斗》主界面

優(yōu)秀的游戲界面設(shè)計(jì)會(huì)通過易理解、表意準(zhǔn)確的按鈕將功能清晰地表達(dá)出來。4．按鈕表意明確《戰(zhàn)雙帕彌什》戰(zhàn)斗界面5．轉(zhuǎn)化需求，為界面效果加分

一般由游戲策劃統(tǒng)籌并給UI設(shè)計(jì)師分配任務(wù)，由于他們不參與界面的制作，其給出的需求有時(shí)會(huì)不符合界面的視覺美感?！妒赝蠕h》結(jié)算界面6．增強(qiáng)同類物品的連續(xù)性

設(shè)計(jì)一組有關(guān)聯(lián)的物品時(shí)，可在原有物品的基礎(chǔ)上加強(qiáng)質(zhì)感、完善造型和豐富色彩。6.2游戲界面的設(shè)計(jì)規(guī)范游戲主要可分為手機(jī)游戲、平板游戲、網(wǎng)頁游戲和電腦游戲等。不同種類的游戲，其界面尺寸及單位與其對應(yīng)的載體相同，而App、網(wǎng)頁和軟件等尺寸前面均已介紹，讀者可參考前面的內(nèi)容決定游戲界面的尺寸。6.2.1尺寸規(guī)范

游戲界面中，正文可根據(jù)應(yīng)用平臺(tái)（如iOS、Android、PC端等）的規(guī)定選擇對應(yīng)的字體和字號(hào)，而標(biāo)題可根據(jù)需要選擇特殊字體或單獨(dú)設(shè)計(jì)字體，字號(hào)可適當(dāng)夸張放大。6.2.2字體運(yùn)用本案例通過制作主菜單界面和關(guān)卡詳情界面，介紹PC端游戲界面的一般制作方法。作品展示6.3案例實(shí)戰(zhàn)—設(shè)計(jì)《吃雞小分隊(duì)》游戲界面設(shè)計(jì)思路1.分析基本結(jié)構(gòu)圖。以主菜單界面為起點(diǎn)。2.確定風(fēng)格。游戲采用卡通風(fēng)格。3.確定配色。界面的主色以藍(lán)色和綠色（冷色）為主，提示功能以黃色和紅色（暖色）為主。4.確定布局。據(jù)玩家對界面中不同區(qū)域注意力的不同，可將界面劃分為主要視覺區(qū)域和次要視覺區(qū)域。設(shè)計(jì)頁首區(qū)設(shè)計(jì)內(nèi)容區(qū)設(shè)計(jì)頁尾區(qū)設(shè)計(jì)關(guān)卡詳情界面本章總結(jié)1.常見游戲的基本界面有啟動(dòng)界面、主菜單界面、關(guān)卡界面、操作界面、勝利/失敗界面、商店界面和背包界面等。2.游戲界面劃分為主要視覺區(qū)域、次要視覺區(qū)域和弱視區(qū)域。3.常見的游戲界面風(fēng)格有寫實(shí)風(fēng)格、卡通風(fēng)格、日韓風(fēng)格、歐美風(fēng)格和像素風(fēng)格等。4.界面風(fēng)格契合游戲主題、突出界面主體內(nèi)容、界面效果簡潔易操作、按鈕表意明確、轉(zhuǎn)化需求，為界面效果加分和增強(qiáng)同類物品的連續(xù)性。5.游戲界面中，正文可根據(jù)應(yīng)用平臺(tái)（如iOS、Android、PC端等）的規(guī)定選擇對應(yīng)的字體和字號(hào)，而標(biāo)題可根據(jù)需要選擇特殊字體或單獨(dú)設(shè)計(jì)字體，字號(hào)可適當(dāng)夸張放大。設(shè)計(jì)思路2.確定配色。采用比較鮮艷、具有活力的顏色，如將主色設(shè)為藍(lán)色，按鈕和圖標(biāo)顏色設(shè)為黃色。3.頁面布局。主要功能按鈕都安排在頁面底部，用戶在雙手持機(jī)時(shí)可以便捷地操作；頁面頂部不易觸碰的區(qū)域安排金幣和鉆石版塊，既可以時(shí)刻提醒用戶代幣數(shù)量，又不影響操作。2131.分析基本結(jié)構(gòu)圖本章實(shí)訓(xùn)——設(shè)計(jì)《酷玩小萌獸》游戲頁面