《游戲界面設(shè)計(jì)專題實(shí)踐》課件-知識(shí)點(diǎn)1：游戲圖標(biāo)設(shè)計(jì)定義、分類與設(shè)計(jì)原則

游戲圖標(biāo)設(shè)計(jì)01PART游戲圖標(biāo)概述游戲圖標(biāo)的定義游戲圖標(biāo)設(shè)計(jì)原則游戲圖標(biāo)的分類游戲圖標(biāo)的定義

游戲圖標(biāo)的定義廣義的圖標(biāo)是指計(jì)算機(jī)圖形交互界面中的一種象形圖（Pictogram）或者表意字(ideogram)。能夠幫助用戶更好、更方便的熟悉和使用復(fù)雜的計(jì)算機(jī)系統(tǒng)。游戲圖標(biāo)是游戲用戶與游戲交互的工具，用以執(zhí)行游戲命令、任務(wù)或傳遞信息。觸發(fā)圖標(biāo)可以使游戲中某功能開啟、關(guān)閉、消失、使窗口縮小或在屏幕上同時(shí)排列多個(gè)窗口。當(dāng)用戶需要暫時(shí)關(guān)閉對話的某個(gè)線程，可以將含有該對話的窗口圖標(biāo)化，從而收起該對話，起到節(jié)省屏幕空間，并提醒用戶隨時(shí)打開窗口，重新執(zhí)行對話的作用。各種風(fēng)格的游戲圖標(biāo)游戲圖標(biāo)的分類

游戲界面的分類（風(fēng)格分類）游戲圖標(biāo)分類多樣，按照表現(xiàn)風(fēng)格可以大致分為以下幾類：1.擬物風(fēng)格（寫實(shí)）2.扁平風(fēng)格3.像素風(fēng)格

游戲界面的分類（制作方法分類）游戲圖標(biāo)分類多樣，按照制作方法可以分為以下兩大類：1.手繪圖標(biāo)2.矢量圖標(biāo)

游戲界面的分類（功能分類）游戲圖標(biāo)分類多樣，按照其功能性可以分為以下四類：1.功能圖標(biāo)2.圖像類圖標(biāo)3.指示類圖標(biāo)4.標(biāo)志類圖標(biāo)按鈕圖標(biāo)系統(tǒng)圖標(biāo)物品圖標(biāo)技能圖標(biāo)提示圖標(biāo)鼠標(biāo)指針圖標(biāo)職業(yè)種族圖標(biāo)成就符號(hào)圖標(biāo)應(yīng)用程序入口圖標(biāo)商城商品圖標(biāo)裝備圖標(biāo)消耗圖標(biāo)活動(dòng)圖標(biāo)道具圖標(biāo)

游戲界面的分類（功能分類）功能圖標(biāo)

游戲圖標(biāo)的分類（功能分類）主菜單界面商城按鈕開始游戲按鈕設(shè)置游戲按鈕游戲獎(jiǎng)勵(lì)按鈕游戲角色選取按鈕游戲選項(xiàng)按鈕和幫助按鈕功能圖標(biāo)按鈕圖標(biāo)需要與用戶發(fā)生高頻次交互，設(shè)計(jì)時(shí)在不影響界面整體效果的前提下盡量醒目并注意權(quán)重區(qū)分。能圖標(biāo)提問：下面畢業(yè)生面試測試題，哪個(gè)按鈕設(shè)計(jì)更好？

游戲圖標(biāo)的分類（功能分類）主菜單界面功能圖標(biāo)正面案例反面案例

游戲圖標(biāo)的分類（功能分類）功能圖標(biāo)系統(tǒng)圖標(biāo)游戲系統(tǒng)功能的展現(xiàn)與設(shè)置，如關(guān)閉、返回、暫停等，必須具有強(qiáng)識(shí)別性，因此一般設(shè)計(jì)為偏扁平風(fēng)格的約定俗成的視覺符號(hào)，如果圖標(biāo)圖形太過抽象，則需要附文字注解，幫助用戶理解。

游戲圖標(biāo)的分類（功能分類）圖像類圖標(biāo)物品圖標(biāo)之消耗圖標(biāo)游戲世界會(huì)模擬或借鑒現(xiàn)實(shí)世界，游戲角色也需要生存的消耗品。這些消耗品根據(jù)游戲題材、背景的不同而有所區(qū)別。常見的消耗圖標(biāo)如食品、藥品、開啟特殊任務(wù)的卷軸、或完成一個(gè)劇情人物需要積攢的物品道具、以及游戲中用以交易的金幣、銅錢等圖標(biāo)，設(shè)計(jì)時(shí)考慮時(shí)代背景且美術(shù)風(fēng)格要與整個(gè)游戲風(fēng)格一致。

游戲圖標(biāo)的分類（功能分類）圖像類圖標(biāo)物品圖標(biāo)之商城商品圖標(biāo)游戲世界除了玩家日常交易的一般物品外，還設(shè)置游戲商城，包含各種奇珍異寶、個(gè)性服飾等。由于這類物品多需要充值購買，為了區(qū)別于普通物品，圖標(biāo)設(shè)計(jì)時(shí)表現(xiàn)的強(qiáng)度和繪制精度高于普通物品圖標(biāo)。這類圖標(biāo)通過增加絢麗的色彩、優(yōu)異的質(zhì)感、獨(dú)特的造型和一些特效來突出其高級的品質(zhì)從而喚起用戶購買欲。設(shè)計(jì)時(shí)，還需要考慮相同系統(tǒng)和不同系統(tǒng)之間色彩和造型的區(qū)別以及給人的品質(zhì)印象。

游戲圖標(biāo)的分類（功能分類）圖像類圖標(biāo)物品圖標(biāo)之裝備圖標(biāo)裝備圖標(biāo)主要指角色能夠佩戴并具有一定功能的物品（防御、攻擊功能等），如頭盔、護(hù)肩、甲胄、鞋靴、護(hù)腕護(hù)膝、綁腿、戰(zhàn)甲、權(quán)杖等。裝備類圖標(biāo)設(shè)計(jì)盡量表現(xiàn)出其對戰(zhàn)或功能方面的特質(zhì)，相同屬性的裝備在細(xì)節(jié)與配色上也應(yīng)劃分系列，以免令玩家難以區(qū)別。

游戲圖標(biāo)的分類（功能分類）圖像類圖標(biāo)物品圖標(biāo)之活動(dòng)圖標(biāo)活動(dòng)圖標(biāo)又分為活動(dòng)入口和特定活動(dòng)圖標(biāo)，活動(dòng)入口圖標(biāo)一般設(shè)定為帶有集結(jié)性質(zhì)的圖標(biāo)，如鼓、號(hào)角等（上圖）；特定活動(dòng)圖標(biāo)一般定義為具有時(shí)效性的道具圖標(biāo)，通常會(huì)出現(xiàn)在一定時(shí)期的某主題活動(dòng)中。如本圖中左上選中的第1個(gè)圖標(biāo)，在屬性中即說明了此圖標(biāo)為活動(dòng)道具、僅限裝扮圣誕樹使用，而此鈴鐺的造型也確實(shí)是圣誕樹的組成元素。因此，設(shè)計(jì)此類圖標(biāo)需要契合活動(dòng)主題，如果是元宵節(jié)活動(dòng)此圖標(biāo)可以設(shè)計(jì)為燈籠。

游戲圖標(biāo)的分類（功能分類）圖像類圖標(biāo)技能圖標(biāo)技能圖標(biāo)主要體現(xiàn)角色的招數(shù)?？煞譃楣纛?、防御類、輔助類等；攻擊類的技能圖標(biāo)一般會(huì)設(shè)計(jì)具有強(qiáng)烈光效質(zhì)感的效果，如發(fā)光、爆炸、火焰等，多使用特殊筆刷或表現(xiàn)具有攻擊性的事物；防御類技能圖標(biāo)設(shè)計(jì)應(yīng)突出其防御與保護(hù)屬性，但需要區(qū)別于裝備類圖標(biāo)，以能夠發(fā)光的盾牌等剪影圖形為主；輔助類技能圖標(biāo)的設(shè)計(jì)應(yīng)選用讓人感覺具有溫暖的治愈力，如愛心、凈瓶、蓮花等圖形，散發(fā)柔和的光芒。總體來說，技能圖標(biāo)設(shè)計(jì)要點(diǎn)應(yīng)注重光效而非細(xì)節(jié)。

游戲圖標(biāo)的分類（功能分類）指示類圖標(biāo)提示圖標(biāo)提示圖標(biāo)通常出現(xiàn)在屬性列表、地圖、標(biāo)題、搜索、NPC等情況下。為了不破壞地圖整體感，通常不會(huì)設(shè)計(jì)為過于顯著的按鈕，而通過色彩的飽和度與明度區(qū)分于地圖背景。繪制此類圖標(biāo)，盡量提取主要視覺元素，舍棄多余的細(xì)節(jié)、注意每個(gè)圖標(biāo)的大小、圓角的統(tǒng)一，使用簡潔的輪廓與清晰的線條，整體風(fēng)格應(yīng)偏扁平、簡約。（藍(lán)框）

游戲圖標(biāo)的分類（功能分類）指示類圖標(biāo)鼠標(biāo)指針圖標(biāo)鼠標(biāo)指針圖標(biāo)通常帶有自解釋性。如需要點(diǎn)擊、攻擊等操作時(shí)鼠標(biāo)指針就會(huì)變成此類形態(tài)，通常以斜角45度放置，設(shè)計(jì)師應(yīng)考慮形狀和功能的統(tǒng)一。

游戲圖標(biāo)的分類（功能分類）標(biāo)志類圖標(biāo)職業(yè)種族圖標(biāo)通常象征玩家的身份。一般需要繪制較大尺寸，其美術(shù)特點(diǎn)是寫實(shí)、精致、華麗，品質(zhì)感強(qiáng)，具有裝飾性且可以加入少許抽象形。光影、質(zhì)感的表現(xiàn)較為突出，多由原畫師設(shè)計(jì)繪制，制作時(shí)應(yīng)注意表現(xiàn)其背后國家、部落、家族等機(jī)構(gòu)的不同特點(diǎn)和象征圖騰。

游戲圖標(biāo)的分類（功能分類）標(biāo)志類圖標(biāo)成就符號(hào)圖標(biāo)象征玩家的榮譽(yù)。如VIP等級、成就徽章、軍銜稱號(hào)等，設(shè)計(jì)制作時(shí)應(yīng)注意多等級的可延展性，以應(yīng)對不斷增加的等級。如左圖是《守望先鋒》的等級頭像邊框(此處只列了鐵和銅），通過色調(diào)先區(qū)分鐵、銅、銀、金大類。每一大類圖形設(shè)計(jì)由簡到繁，從銅開始每增加10級加入1顆星，直到滿5星跳到銀色大類。設(shè)計(jì)師通過一定規(guī)律進(jìn)行設(shè)計(jì)保證了成就符號(hào)的統(tǒng)一性也節(jié)約了時(shí)間成本。

游戲圖標(biāo)的分類（功能分類）應(yīng)用程序入口圖標(biāo)歸屬于標(biāo)志類圖標(biāo)，象征某個(gè)游戲。有端游和手游的區(qū)分。端游形式更隨意，手游則需要嵌套進(jìn)圓角矩形框。應(yīng)用程序入口圖標(biāo)由于要吸引用戶體驗(yàn)，故而非常重要，設(shè)計(jì)時(shí)可以選用游戲中的重要角色或者典型標(biāo)識(shí)，并突出游戲特點(diǎn)，要求制作精美、效果突出。設(shè)計(jì)時(shí)還需考慮不同平臺(tái)的尺寸規(guī)范和風(fēng)格。標(biāo)志類圖標(biāo)游戲圖標(biāo)設(shè)計(jì)原則它們既要遵循既定的設(shè)計(jì)規(guī)范（美學(xué)程度上的和開發(fā)環(huán)境規(guī)范上的），還要符合產(chǎn)品本身的價(jià)值所在

游戲圖標(biāo)設(shè)計(jì)原則游戲圖標(biāo)設(shè)計(jì)既要遵循既定的設(shè)計(jì)規(guī)范（美學(xué)意義的和開發(fā)環(huán)境規(guī)范），還要符合產(chǎn)品本身的價(jià)值所在。下面分別介紹應(yīng)用程序圖標(biāo)與交互界面圖標(biāo)（除應(yīng)用程序圖標(biāo)外其他類型圖標(biāo)）的設(shè)計(jì)原則。它們既要遵循既定的設(shè)計(jì)規(guī)范（美學(xué)程度上的和開發(fā)環(huán)境規(guī)范上的），還要符合產(chǎn)品本身的價(jià)值所在

游戲圖標(biāo)設(shè)計(jì)原則應(yīng)用程序圖標(biāo)設(shè)計(jì)原則：1.需和產(chǎn)品內(nèi)容相輔相成互不分離，內(nèi)容的體驗(yàn)會(huì)反饋至圖標(biāo)，圖標(biāo)的視覺內(nèi)容進(jìn)一步加強(qiáng)了用戶/玩家對于產(chǎn)品/游戲的認(rèn)知和記憶（形成閉合反饋環(huán)）；2.

需注重于自身的情感訴求表達(dá)或者感受，基本不會(huì)受到外界的影響（如商業(yè)設(shè)計(jì)或視覺設(shè)計(jì)風(fēng)潮）；3.盡量營造輕松活潑的氣氛，少一些嚴(yán)肅性，以吸引潛在用戶群體；它們既要遵循既定的設(shè)計(jì)規(guī)范（美學(xué)程度上的和開發(fā)環(huán)境規(guī)范上的），還要符合產(chǎn)品本身的價(jià)值所在

游戲圖標(biāo)設(shè)計(jì)原則脫離了內(nèi)容而盲目跟風(fēng)的應(yīng)用程序入口圖標(biāo)COC（部落沖突）策略類游戲圖標(biāo)，大胡子蠻兵成為經(jīng)典它們既要遵循既定的設(shè)計(jì)規(guī)范（美學(xué)程度上的和開發(fā)環(huán)境規(guī)范上的），還要符合產(chǎn)品本身的價(jià)值所在

游戲圖標(biāo)設(shè)計(jì)原則游戲軟件相比普通商業(yè)化軟件的應(yīng)用程序入口圖標(biāo)表達(dá)方式更多樣（pc端游）它們既要遵循既定的設(shè)計(jì)規(guī)范（美學(xué)程度上的和開發(fā)環(huán)境規(guī)范上的），還要符合產(chǎn)品本身的價(jià)值所在

游戲圖標(biāo)設(shè)計(jì)原則游戲軟件相比普通商業(yè)化軟件的應(yīng)用程序入口圖標(biāo)表達(dá)方式更多樣（手游）它們既要遵循既定的設(shè)計(jì)規(guī)范（美學(xué)程度上的和開發(fā)環(huán)境規(guī)范上的），還要符合產(chǎn)品本身的價(jià)值所在

游戲圖標(biāo)設(shè)計(jì)原則游戲軟件相比普通商業(yè)化軟件的應(yīng)用程序入口圖標(biāo)更迭形式隨意、靈活它們既要遵循既定的設(shè)計(jì)規(guī)范（美學(xué)程度上的和開發(fā)環(huán)境規(guī)范上的），還要符合產(chǎn)品本身的價(jià)值所在

游戲圖標(biāo)設(shè)計(jì)原則交互界面圖標(biāo)（適用于除應(yīng)用程序圖標(biāo)外其他類型圖標(biāo)）設(shè)計(jì)原則：1.一致性:是指相同功能類型的圖標(biāo)都要遵循既定的設(shè)計(jì)規(guī)則。這個(gè)規(guī)則包含但不限于造型風(fēng)格、用色、布局大小以及類型劃分。2.易識(shí)別性:是指圖標(biāo)要盡量抽象概括出所要擔(dān)任的功能職責(zé)，最好能讓用戶做到“看到即聯(lián)想，聯(lián)想即預(yù)期”。

游戲圖標(biāo)設(shè)計(jì)原則魔獸世界（WorldofWarCraft）宏編輯器圖標(biāo)選擇頁面的截圖合集。玩過魔獸的童鞋應(yīng)該能做到看圖標(biāo)識(shí)技能/道具了，看似復(fù)雜的游戲圖標(biāo)其實(shí)規(guī)則定義十分的明確嚴(yán)謹(jǐn)，譬如奧術(shù)紫，邪能綠，冰霜藍(lán)、圣光黃等等，而且圖標(biāo)用色幅度適中：即使圖標(biāo)排列凌亂，整體看上去用色范圍不會(huì)跳躍太多一致性

游戲圖標(biāo)設(shè)計(jì)原則老羅為了追求操作系統(tǒng)內(nèi)的圖標(biāo)的一致性，“發(fā)揮”了極值的工匠精神，將一大批第三方APP應(yīng)用入口圖標(biāo)重制，與自身系統(tǒng)的圖標(biāo)進(jìn)行強(qiáng)制風(fēng)格匹配。一致性

游戲圖標(biāo)設(shè)計(jì)原則恐怖游戲《層層恐懼》（LayersofFear）的游戲界面截圖。從左到右，分別展示了可打開物件/正在打開物件/物件可調(diào)查三種狀態(tài)的圖標(biāo)變化。中間沒有任何文字說明和動(dòng)畫，玩家僅僅靠圖標(biāo)造型變化，就很容易的意識(shí)到自己正在執(zhí)行什么操作，