《游戏界面设计专题实践》课件-知识点1：游戏图标设计定义、分类与设计原则

游戏图标设计01PART游戏图标概述游戏图标的定义游戏图标设计原则游戏图标的分类游戏图标的定义

游戏图标的定义广义的图标是指计算机图形交互界面中的一种象形图（Pictogram）或者表意字(ideogram)。能够帮助用户更好、更方便的熟悉和使用复杂的计算机系统。游戏图标是游戏用户与游戏交互的工具，用以执行游戏命令、任务或传递信息。触发图标可以使游戏中某功能开启、关闭、消失、使窗口缩小或在屏幕上同时排列多个窗口。当用户需要暂时关闭对话的某个线程，可以将含有该对话的窗口图标化，从而收起该对话，起到节省屏幕空间，并提醒用户随时打开窗口，重新执行对话的作用。各种风格的游戏图标游戏图标的分类

游戏界面的分类（风格分类）游戏图标分类多样，按照表现风格可以大致分为以下几类：1.拟物风格（写实）2.扁平风格3.像素风格

游戏界面的分类（制作方法分类）游戏图标分类多样，按照制作方法可以分为以下两大类：1.手绘图标2.矢量图标

游戏界面的分类（功能分类）游戏图标分类多样，按照其功能性可以分为以下四类：1.功能图标2.图像类图标3.指示类图标4.标志类图标按钮图标系统图标物品图标技能图标提示图标鼠标指针图标职业种族图标成就符号图标应用程序入口图标商城商品图标装备图标消耗图标活动图标道具图标

游戏界面的分类（功能分类）功能图标

游戏图标的分类（功能分类）主菜单界面商城按钮开始游戏按钮设置游戏按钮游戏奖励按钮游戏角色选取按钮游戏选项按钮和帮助按钮功能图标按钮图标需要与用户发生高频次交互，设计时在不影响界面整体效果的前提下尽量醒目并注意权重区分。能图标提问：下面毕业生面试测试题，哪个按钮设计更好？

游戏图标的分类（功能分类）主菜单界面功能图标正面案例反面案例

游戏图标的分类（功能分类）功能图标系统图标游戏系统功能的展现与设置，如关闭、返回、暂停等，必须具有强识别性，因此一般设计为偏扁平风格的约定俗成的视觉符号，如果图标图形太过抽象，则需要附文字注解，帮助用户理解。

游戏图标的分类（功能分类）图像类图标物品图标之消耗图标游戏世界会模拟或借鉴现实世界，游戏角色也需要生存的消耗品。这些消耗品根据游戏题材、背景的不同而有所区别。常见的消耗图标如食品、药品、开启特殊任务的卷轴、或完成一个剧情人物需要积攒的物品道具、以及游戏中用以交易的金币、铜钱等图标，设计时考虑时代背景且美术风格要与整个游戏风格一致。

游戏图标的分类（功能分类）图像类图标物品图标之商城商品图标游戏世界除了玩家日常交易的一般物品外，还设置游戏商城，包含各种奇珍异宝、个性服饰等。由于这类物品多需要充值购买，为了区别于普通物品，图标设计时表现的强度和绘制精度高于普通物品图标。这类图标通过增加绚丽的色彩、优异的质感、独特的造型和一些特效来突出其高级的品质从而唤起用户购买欲。设计时，还需要考虑相同系统和不同系统之间色彩和造型的区别以及给人的品质印象。

游戏图标的分类（功能分类）图像类图标物品图标之装备图标装备图标主要指角色能够佩戴并具有一定功能的物品（防御、攻击功能等），如头盔、护肩、甲胄、鞋靴、护腕护膝、绑腿、战甲、权杖等。装备类图标设计尽量表现出其对战或功能方面的特质，相同属性的装备在细节与配色上也应划分系列，以免令玩家难以区别。

游戏图标的分类（功能分类）图像类图标物品图标之活动图标活动图标又分为活动入口和特定活动图标，活动入口图标一般设定为带有集结性质的图标，如鼓、号角等（上图）；特定活动图标一般定义为具有时效性的道具图标，通常会出现在一定时期的某主题活动中。如本图中左上选中的第1个图标，在属性中即说明了此图标为活动道具、仅限装扮圣诞树使用，而此铃铛的造型也确实是圣诞树的组成元素。因此，设计此类图标需要契合活动主题，如果是元宵节活动此图标可以设计为灯笼。

游戏图标的分类（功能分类）图像类图标技能图标技能图标主要体现角色的招数。可分为攻击类、防御类、辅助类等；攻击类的技能图标一般会设计具有强烈光效质感的效果，如发光、爆炸、火焰等，多使用特殊笔刷或表现具有攻击性的事物；防御类技能图标设计应突出其防御与保护属性，但需要区别于装备类图标，以能够发光的盾牌等剪影图形为主；辅助类技能图标的设计应选用让人感觉具有温暖的治愈力，如爱心、净瓶、莲花等图形，散发柔和的光芒。总体来说，技能图标设计要点应注重光效而非细节。

游戏图标的分类（功能分类）指示类图标提示图标提示图标通常出现在属性列表、地图、标题、搜索、NPC等情况下。为了不破坏地图整体感，通常不会设计为过于显著的按钮，而通过色彩的饱和度与明度区分于地图背景。绘制此类图标，尽量提取主要视觉元素，舍弃多余的细节、注意每个图标的大小、圆角的统一，使用简洁的轮廓与清晰的线条，整体风格应偏扁平、简约。（蓝框）

游戏图标的分类（功能分类）指示类图标鼠标指针图标鼠标指针图标通常带有自解释性。如需要点击、攻击等操作时鼠标指针就会变成此类形态，通常以斜角45度放置，设计师应考虑形状和功能的统一。

游戏图标的分类（功能分类）标志类图标职业种族图标通常象征玩家的身份。一般需要绘制较大尺寸，其美术特点是写实、精致、华丽，品质感强，具有装饰性且可以加入少许抽象形。光影、质感的表现较为突出，多由原画师设计绘制，制作时应注意表现其背后国家、部落、家族等机构的不同特点和象征图腾。

游戏图标的分类（功能分类）标志类图标成就符号图标象征玩家的荣誉。如VIP等级、成就徽章、军衔称号等，设计制作时应注意多等级的可延展性，以应对不断增加的等级。如左图是《守望先锋》的等级头像边框(此处只列了铁和铜），通过色调先区分铁、铜、银、金大类。每一大类图形设计由简到繁，从铜开始每增加10级加入1颗星，直到满5星跳到银色大类。设计师通过一定规律进行设计保证了成就符号的统一性也节约了时间成本。

游戏图标的分类（功能分类）应用程序入口图标归属于标志类图标，象征某个游戏。有端游和手游的区分。端游形式更随意，手游则需要嵌套进圆角矩形框。应用程序入口图标由于要吸引用户体验，故而非常重要，设计时可以选用游戏中的重要角色或者典型标识，并突出游戏特点，要求制作精美、效果突出。设计时还需考虑不同平台的尺寸规范和风格。标志类图标游戏图标设计原则它们既要遵循既定的设计规范（美学程度上的和开发环境规范上的），还要符合产品本身的价值所在

游戏图标设计原则游戏图标设计既要遵循既定的设计规范（美学意义的和开发环境规范），还要符合产品本身的价值所在。下面分别介绍应用程序图标与交互界面图标（除应用程序图标外其他类型图标）的设计原则。它们既要遵循既定的设计规范（美学程度上的和开发环境规范上的），还要符合产品本身的价值所在

游戏图标设计原则应用程序图标设计原则：1.需和产品内容相辅相成互不分离，内容的体验会反馈至图标，图标的视觉内容进一步加强了用户/玩家对于产品/游戏的认知和记忆（形成闭合反馈环）；2.

需注重于自身的情感诉求表达或者感受，基本不会受到外界的影响（如商业设计或视觉设计风潮）；3.尽量营造轻松活泼的气氛，少一些严肃性，以吸引潜在用户群体；它们既要遵循既定的设计规范（美学程度上的和开发环境规范上的），还要符合产品本身的价值所在

游戏图标设计原则脱离了内容而盲目跟风的应用程序入口图标COC（部落冲突）策略类游戏图标，大胡子蛮兵成为经典它们既要遵循既定的设计规范（美学程度上的和开发环境规范上的），还要符合产品本身的价值所在

游戏图标设计原则游戏软件相比普通商业化软件的应用程序入口图标表达方式更多样（pc端游）它们既要遵循既定的设计规范（美学程度上的和开发环境规范上的），还要符合产品本身的价值所在

游戏图标设计原则游戏软件相比普通商业化软件的应用程序入口图标表达方式更多样（手游）它们既要遵循既定的设计规范（美学程度上的和开发环境规范上的），还要符合产品本身的价值所在

游戏图标设计原则游戏软件相比普通商业化软件的应用程序入口图标更迭形式随意、灵活它们既要遵循既定的设计规范（美学程度上的和开发环境规范上的），还要符合产品本身的价值所在

游戏图标设计原则交互界面图标（适用于除应用程序图标外其他类型图标）设计原则：1.一致性:是指相同功能类型的图标都要遵循既定的设计规则。这个规则包含但不限于造型风格、用色、布局大小以及类型划分。2.易识别性:是指图标要尽量抽象概括出所要担任的功能职责，最好能让用户做到“看到即联想，联想即预期”。

游戏图标设计原则魔兽世界（WorldofWarCraft）宏编辑器图标选择页面的截图合集。玩过魔兽的童鞋应该能做到看图标识技能/道具了，看似复杂的游戏图标其实规则定义十分的明确严谨，譬如奥术紫，邪能绿，冰霜蓝、圣光黄等等，而且图标用色幅度适中：即使图标排列凌乱，整体看上去用色范围不会跳跃太多一致性

游戏图标设计原则老罗为了追求操作系统内的图标的一致性，“发挥”了极值的工匠精神，将一大批第三方APP应用入口图标重制，与自身系统的图标进行强制风格匹配。一致性

游戏图标设计原则恐怖游戏《层层恐惧》（LayersofFear）的游戏界面截图。从左到右，分别展示了可打开物件/正在打开物件/物件可调查三种状态的图标变化。中间没有任何文字说明和动画，玩家仅仅靠图标造型变化，就很容易的意识到自己正在执行什么操作，