作为游戏UI设计师，我们平时最主要的工作无非就是界面与图标，对比界面，图标确实可以说是种类繁多了，所以今天来捋捋这么多种图标的分类和他们的作用吧

1、图标的分类

按画风分类： 图标分为Q版&写实&像素、矢量&手绘

按照图标的用途：图标可以分为：功能图标、道具图标、技能图标、头像图标、启动图标、徽章等

1.1功能图标

      各个系统的入口图标，又称菜单图标，最常见的功能图标常驻于主界面，方便玩家与各个系统进行交互

（主界面最为常见）

1.2道具图标

      道具图标包含物品图标、装备图标、武器和任务道具等，以缩略图的形式，让玩家迅速理解其意思，同时帮助玩家通过世界观的元素，建立起代入感并产生共鸣   

1.3技能图标

       技能图标主要是游戏角色的技能缩略图，其表现形式需要与技能特效的效果保持一致，方便玩家在对战中能够快速识别和操作，从功能上划分的话有：物理攻击，魔法攻击，buff，debuff,同时又分为主动技能和被动技能..

1.4启动图标

      启动图标是玩家在平台端口点击进入游戏的图标，属于玩家对游戏的第一印象，具有展现了游戏品质以及游戏特性的作用

1.5头像图标

       通常是角色、boss、宠物等缩略图，方便玩家在游戏里面快速找到并识别角色，还有一个就是作为玩家头像，增强代入感，识别不同玩家之间的身份，增强玩家的个性

（角色头像缩略图）

（玩家头像）

1.6游戏LOGO

       游戏的logo是一个游戏综合信息传递的媒介，广泛曝光，形成品牌效应（产品形象，视觉符号）,通常放置在 网站，展会，周边，户外广告，视频演译

1.7段位徽章图标/成就图标

       具有展示功能，表现玩家能力的勋章，从低到高分段（品质）的一个进阶过程，是所有图标中最华丽也最复杂，让玩家能够获得挑战带来的成就感、以及向朋友或者社区炫耀，增加额外的乐趣

（成就图标）

（段位徽章）

2、图标的作用

作用：通过可视化符号传达信息，相对文字更加便捷，便于记忆

优势：形式比文字更美观，会有提升视觉的作用，对比文字直观性更强

劣势：因为是将文字内容转换成符号，所以在表达上会不如文字直接

3、图标的设计思维

核心思想

 符合世界观的引导，让玩家更易产生代入感，同时比文字更易理解和记忆           

图标设计原则：

功能：需要根据游戏的需求性设计，例如这是一个怎么样的图标？有什么功能作用，需要传递给玩家哪一种情绪

美观：造型是否好看，角度光源是否且统一，颜色是否会灰或焦？元素是否会过多造成难识别，缩小之后是否清晰

创意：元素与元素的结合是否具有趣味性 

一个好的图标应该做到：识别性强、直观、具有自己独特的差异化又与其他图标统一。

图标规范

①同一功能的图标做到：

风格统一（画风）

尺寸统一（视觉区域大小、内容感知区域等）；

样式统一（角度、光源、描边等）；

②不同功能图标

样式和尺寸可以不相同，但在整体游戏风格上要统一（例如在：底框，颜色，画风..做贴合）

4、图标的设计方法

4.1功能图标（功能入口图标）

     01. 设计核心

       让玩家或玩家角色与存在于游戏世界当中的（场景、物品、人）产生交互作用，而图标就是把这种交互行为设计成可视化符号

例如：

任务系统-从身上掏出地图或任务册，查看当前需要完成的任务进度，已完成的任务.....

主机设计：以真实世界的方式感知

优点：又被称为沉浸式 UI，能够有效地传递信息，让游戏世界变得更加真实，为玩家带来更好的游戏体验，能让玩家专注于游戏互动“

缺点：实现成本高，要求硬件配置高

手游/端游设计：让这种互动行为，设计成可视化元素，让玩家在游戏世界观中产生联想与共鸣。

优点：实现方便，方便查找，点击即可进行交互

缺点：代入感不够

为什么会形成这种差异呢？

      主机开发资金、时间充裕，有主机（swich\ps）作为硬件支持，就算登录客户端，也要求电脑配置相对较好

而手游的开发周期往往也就1年左右（精品游戏也会打磨到2年左右），所以时间不够，资金不足，硬件多是以安卓机为主（配置一般），显示屏限制了交互方式，设备限制可显示的内容，同时还会被受众群体，以及引擎编辑器限制等

      但是手游市场竞争日渐激烈，玩家对于手游质量的要求也越来越高。然而许多手游的界面设计仅仅停留在满足功能阶段，缺乏高水平的界面质量。发展时间更长，更注重叙事性和沉浸感体验的主机游戏成为手游设计的设计标杆和灵感库

例如：

第五人格也采用的沉浸式交互，将核心功能与场景联合设计，大大加强了沉浸感，至于悬浮的功能图标：

①相对不那么重要的系统，点击率较小，通过扁平的图标设计，弱化图标对核心区域的影响

②需要经常交互的功能，做成拟物是让他显眼，方便查找，方便点击

总结：举这些例子，只是想说明，图标只是解决方法之一，并不是唯一的方案，或最优解，在理解核心需求之后，是让创造新的交互方式的UI成为可能

     02.图标定位

      通常在主界面常见的图标分两种矢量图标和手绘图标，而他们的功能都是让玩家方便点击，进行交互行为

矢量图标：扁平风，通过黑白块面去表达人/物的特征，特点：表现力相对较弱，对核心系统的影响较少，适合不经常点击的系统

手绘图标：将交互行为具象化，带有强烈的世界观元素，和趣味性，特点：具象，方便理解，快速传达信息，表现力较强，适合较为重要玩法系统/养成系统之类

       当然，这些都不绝对，因为有两个最重要的影响因素

美术定位和优势：①场景和角色无优势的情况下，需要精致的拟物图标让整体的界面变得丰富，②在场景角色优势很大的情况下，弱化图标的影响，凸显优势

（场景和角色没有过多优势）

（场景角色优势很大）

功能设定和玩法优势：例如即时战斗的动作游戏，玩家的主要集中在战斗上，拟物的图标则会分散玩家的注意力，而简洁的矢量图标更适合

      所以每个游戏的界面都会根据自身产品的优势，在设计上发生一些变化，有的产品甚至为了突出自身产品优势，牺牲了界面的操作便捷程度，就是为了强化自身的竞争优势

03.图标设计

 确定美术风格与题材

确认美术绘画风格：写实、Q版、像素.......

确认美术题材：中国风、欧美式、科幻风、日风（二次元）......

、

（不同题材下的货币设计）

确定世界观：例如：是中国武侠，中国神话，奇幻修真.......还是西方奇幻的希腊，北欧，古代神话

（世界观 ：就是处于什么时期什么背景，什么生存规则下的人物设定、力量体系和主线故事等。）

提取元素

从交互行为中提取元素，设计成可视化符号，常用元素有：场景（建筑）、人物（角色）、物品

例如：商店系统

       交互行为：去商店进行购物或售卖，例子的这些元素都有指代商城的意思，能够让玩家产生联想与共鸣，但是元素会受世界观（游戏背景）的影响，毕竟购物车不可能出现在以中国修仙为背景的游戏内

（不同背景下的商店元素）

      温馨提示：设计图标，需要遵循的图标的规范哦（忘记的话，划上去再去看看）

图标绘制

①构图将提取符合游戏背景的元素通过确定的美术风格绘制出来

②配色加光影，配色、光影受绘画风格的影响，例如Q版的色彩鲜艳丰富，而写实饱和度不会那么高，会更有层次感

③加上材质，质感的表现手法多种多样的，取决于确定的风格，有卡通风格的，有重金属风格的，有史诗沧桑感，有残旧碎裂感的，......等等

总结：如何使用何种色彩、形态、肌理，表现某个特定时期的特定风格。

没有具体描写图标绘制过程，是因为这个不涉及到设计，主要是能力，技巧，需要不停的重复性练习，而且花瓣上一搜就有很多类似的教程

04.矢量图标设计

采用视觉图形符号，唤起人们对某一个抽象意义、观念或情绪的记忆

精通手绘图标的绘画设计，再将手绘图标的点线面通过正负形概括成矢量图标

                                                         (块面概括法)                    (线面提取法)                 (线面结合法)

方法一：块面概括法：通过黑白色块来表达元素的特征（即用正形来表达图形中的面，负表达线条，看起来图标由块面构成）

方法二：线面提取法：将块面提取法反向操作，即可，看起来图标由线条构成

方法三：线面结合法：将正负形结合，看起来图标既有线又有面

4.2 启动图标

设计核心：启动图标是玩家第一眼能接收到一个游戏的信息，主要是体现了游戏特性，和游戏品质

游戏特性：游戏特性的展示，看完logo篇的应该有印象，其设计方法差不多，不过logo是简化元素，主要突

出游戏名字，而ICON是具象，让人第一时间能够对游戏玩法进行联想

设计方法

方法1：突出标志性元素，让玩家瞬间产生联想，并且知道是什么类型的游戏

（突出标志性元素）

方法2：突出核心角色，以角色为主的，常常会有眼神表情的传达，或者夸张的透视，达到游戏与玩家沟通、交流的状态，吸引玩家点击、让其了解

（突出核心角色）

方法3：突出玩法，能够让玩家瞬间了解游戏玩法，以及与其他同类型玩法的区别

（突出玩法）

方法4：突出文字，而突出文字的主要原因是有IP加持，玩家对这个文字认知很熟悉，文字比元素更能传达信息

（突出文字）

游戏品质：启动图标是玩家第一眼能接收到一个游戏的信息，而启动图标的品质也就决定了玩家对这个游戏的品质的第一印象，也就是美术优劣，所以：

常见问题

①图标的构图是否突出视觉中心

②颜色是否符合游戏传达的情绪以及美术定位，

③材质是否有层次有细节，能够凸显游戏游戏特性（其实就是基础要好）

④游戏是否具有识别度，能够区别于同类型游戏

⑤背景是否有营造氛围，是否会造成花（元素过多，没层次）的现象

⑥信息是否具有传达性，所用的元素是否让玩家一眼即可识别游戏特性

⑦画核心角色类型的启动图标时，是否有考虑到角色的性格，眼神的表达

温馨提示：画核心角色类型的启动图标时，考虑到设计人体结构，可以让原画同学支援，有特殊需求，可以让建模同学再建模

因为篇幅原因，我们下篇接着说

个人QQ：1160316437  (如果你有不一样的观点，欢迎来交流哦   ) 

全栈行业交流群：807048135（如果同为UI的你，欢迎一起交流，和全栈的小伙伴一起做练习，平时还会有作业点评和主题比赛哦）