网易游戏学院：3分钟了解图标设计

本文选自网易游戏内部研发系列丛书——《大巧不工：用户体验设计法则》

图标，一个具有指代意义和标识性质的图形，具有高度浓缩并快捷传达信息、便于记忆的特性。相比于文字，它具有以下优缺点：

优点：

a.代替文字，形式比文字直观，提高可用性；

b.比文字漂亮，提升视觉效果；

缺点：含义表达上，不如文字直接；

A.用途分类

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

• 功能图标

功能图标是游戏界面中可以产生交互功能（如点按、长按等手势操作）的图标，如菜单图标、带指向性的功能入口图标等。

《阴阳师》系统入口图标

• 道具图标

道具图标包含消耗品、物品、装备、武器和任务道具等，用于展示游戏内道具的缩略图示信息，帮助玩家在游戏世界观中产生联想与共鸣。 

《终结者2：审判日》时装道具图标

• 技能图标

技能图标主要是游戏角色的技能示意图。设计方式需要与技能表现形式或描述内容保持一致，便于玩家在激烈的操作中依旧能够快速地判断该图标所传达的技能含义。 

《楚留香》主界面右下角的技能图标

• 头像图标

头像图标用于展示角色或怪物或宠物等单位的缩略信息，能在游戏内较快速地定位到该单位的基本特征。

《乱斗西游2》头像图标

• 启动图标

启动图标是玩家在平台端口（手机、PC或其他平台）第一眼能接收到一个游戏的信息。通过点击它可以进入相应的游戏世界。

启动图标

B.风格分类

按照图标的风格，图标分为Q版&写实、扁平&拟物，或者国风、欧风、科幻、二次元、军事等。

C.绘制手法分类

按照图标的绘制手法，图标可分为矢量图标和手绘图标。

图标设计的核心思想，就是尽可能地发挥图标的优点——比文字直观、比文字漂亮；减少图标的缺点——不如文字表达准确。

图标设计遵循以下三个原则，即可用性、美观性和原创性。

重点说明可用性，可用性是图标非常重要的一个属性。失去了可用性，再漂亮的图标也失去了在游戏功能中的存在地位。通常我们可以用以下几个常用原则去判定一个图标的可用性好与坏，即易识别、直观、差异化以及统一。

A.绘制技巧

a)创意——源于生活、提取创意，多看优秀作品;

b)细节——优秀的图标也同样注重细节，一下细小的设计会增添图片的差异化；

c)整体——一套图标要有同样的风格设计，便于识别。 

B.常见问题

当绘制完图标后，可以通过问自己以下问题来避免踩坑：

a)是否无明显差异化，太相似、难辨识？

b)图标是否太多元素？或着加入了不必要元素？

c)一整套图标是否不够统一？

d)过度设计，但表意不足？

e)是否存在大图精致，小图糊出天际的情况？

f)有放到手机里看过了么？

如果存在以上问题，则需要重新调整设计，细致打磨直到满意为止。

C.图标规范

在一个游戏中，图标往往不是单独出现的，而是大量的、一套一套的，因此需要设定一些规范来统一游戏内的图标，让其保持一致性。

a)同一功能的图标需要做到：

• 风格统一
• 尺寸统一（视觉区域大小、内容感知区域等）；
• 样式统一（角度、光源、描边等）；

同一功能图标

b)不同功能图标

样式和尺寸可以不相同，但在整体游戏风格上要统一和谐，不能脱离游戏风格做设计。

在实际的操作中，不同特征的图标以不同目的为首要判断，不同形式可以用不同的方法来实现。以上，就是图标的大体介绍，希望能给大家一点启发。