《游戲界面設計專題實踐》課件-知識點1：游戲圖標設計定義、分類與設計原則

游戲圖標設計01PART游戲圖標概述游戲圖標的定義游戲圖標設計原則游戲圖標的分類游戲圖標的定義

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

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

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

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

游戲界面的分類（功能分類）功能圖標

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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