游戏图标的分类与设计【下篇】
道具图标、功能图标，技能图标......还是傻傻分不清吗，让我们来捋捋吧
上篇说到图标的的分类和作用，还有讲述了功能图标和启动图标的设计核心和设计方法，接下来会把还没有说到的图标一一细说
4.3 道具图标
道具图标包含消耗品、物品、装备、武器和任务道具等，用于展示游戏内道具的缩略图示信息，帮助玩家在游戏世界观中产生联想与共鸣。
装备图标
角色相关的：装备图标（服饰：上衣，裤子，鞋子，套装，首饰，头饰，脸饰）（武器：中国风：刀枪剑弩等....科幻风：枪炮...欧美风：剑盾铠甲....）
核心设计：装备的核心是提升角色属性、外观，而属性有等级的提升，外观有稀有度的不同，通过装备造型的递增性设计，让玩家获得反馈，从而才能提高购买欲
①在设计与角色相关的装备图标时，首先要确认游戏背景，毕竟不同的背景，设计的元素大不相同
②装备系统的两大特点，一是提升数据，添加装备-获得属性加成，消耗养成材料帮助数值提升，二是装扮，主要是好看和稀有度，卖点是“卖皮肤”
但是不论是数值升级，还是装扮稀有度，都需要图标元素的递增，显得“华丽”“稀有”“已升级”等给玩家带来的反馈，所以在绘制装备的时候，不妨从中间档开始，后期通过减少和增加元素来表达等级的递增性
提升品质的方法
图标的造型、构图决定了美术风格——称之为形
方法一：同样的造型，通过增加整体的细节、花纹，即可达到提升等级和品质
方法二：让外形更加复杂（ 结构越复杂，我们做的设计就越来越多） 通过添加色彩，纹理，材质等，来提升到我们所需的品质
设计方法
设计方法1：通常角色与套装，原画都已经设计好了，主要是制作“缩略图”
注意事项：
①注意同类型的装备透视要进行统一
②缩略图会将元素进行一定的简化，因为物品框比较小，过多的元素和细节会造成“花”，容易大图精致，小图糊出天际
③存在多套装备设计，所以图标的风格、尺寸、样式都要保持一致
设计方法2：让装备与角色产生关联性（从角色身上提取元素）
因为不同于”缩略图“的直接复刻，所以在设计与角色相关的装备图标的时候， 起码看起来能够让玩家联想到物品与角色之间的联系
①思考设计的方向：人物性格、元素（角色的背景设定）、关键词
②角色背景：例如森林、海洋，山川.......技能有什么标志性元素，例如火焰，雷电等等，都可以作为提取元素
③角色的风格：例如：来自森林，整体造型是否偏原始些，可以用于的的轮廓和结构
④人物的特征：衣服的材料，颜色，皮质的绑带等等，作为物品的元素，颜色和材质
消耗材料图标
材料相关的：升级/合成材料、货币图标、资源图标
当一个人对某样物品有拥有感时，自然会想要提升该物品的各项性能。这一驱动力是人类积累财富的主要欲望来源，也是玩家积累虚拟货币的主要驱动力。
虚拟货币系统、装备强化系统等，目的是为了强调用户对虚拟物品的拥有感，不断追求更多、更好、更强。
设计核心：① 为了满足玩家对更好更强的追求，衍生出能够让装备得到提升的材料图标
② 和能够获得更好装备/角色的货币图标
材料图标的设计方法
①符合认知模型
人面对不同的环境，会产生不同的认知模型。当我们在设计的时候，一定要注意其设计不要和玩家的心智模型产生偏差。
例如：锤子更容易被玩家当作武器。即使锤子在游戏中被当作工具，但是玩家基于现实中对于锤子的认知，依旧会将其当作武器
②符合游戏背景设定
毕竟不同的故事背景，设定和能用的元素大不相同
③符合功能需求
有的材料用于升级，有的材料用于突破，有的材料针对法术攻击提升，有的针对物理攻击提升，根据不同的需求，突出需求点
（升级） （突破）
货币图标的设计方法
作用：货币，相当于现实世界的“钱”，作为虚拟世界的游戏，货币让游戏开发商，有能力对游戏的产出消耗、通货膨胀及价值瞄定去做调整。形成一个良好的产出与消耗模型
设计核心：货币从功能上来说，用于满足游戏的产出、交易和消耗
产出：玩家参与活动，关卡等获得的资源
交易：“摆摊系统”与玩家资源交换，或售卖资源
消耗：打造装备，个人属性养成等
从美术层面来说，需要符合认知，不管怎么设计，能够让玩家认可这个图标作为“货币”的属性
设计方法
①货币，不外乎稀有矿产和宝石，当然还有现代的纸币，所以根据游戏背景，绘画出符合背景的货币即可
例如：中国的：金诛，元宝，玉石，白银，铜钱等
欧美的：金币、红橙黄绿青蓝紫宝石、钻石等
②当然货币的功能也是具有多样性的，所以美术上也需要设计多种样式作为区分：
例如：以王者荣耀为例子
付费货币：点券
高级活跃货币：金币
普通货币：钻石
在做设计的时候，设计货币的造型需要外轮廓要有辨识度，要有记忆点。外轮廓越整体，辨识度越高；外轮廓越复杂，辨识度越低
③通常货币图标在系统里面的三种状态，和需求
一是作为“缩略图”出现，让玩家能够知道自己所拥有的的货币和资源，或者完成任务能获得多少资源，因为作为“缩略图”，所以要求我们在设计图标的时候，需要做到缩小后具有的识别性（不能大图精致，小图因为元素过多造成花）
二是显示获得多少资源，图标正常尺寸大小既可以（注意：可以先设计正常尺寸大小，再考虑缩小会不会造成识别性的问题，通过修改，与“缩略图”公用一个资源）
三是商店购买付费货币，类似于对标现实中“在银行兑换其他国家的货币”兑换的越多，获得的量也就越多，所以货币的设计：需要突出量，例如：先是数量的递增，到需要东西（例如：布袋/宝箱）作为承载
运营相关图标
运营相关的：节日活动图标、月卡、宝箱，盒子.......
游戏运营活动就是指短期拉升一个或多个数据指标。
主要的目的就是：拉新（提升新增用户注册）、促活（提升活跃度）、留存（提升DAU）、付费转化（提高付费率、提升ARPU）即充值与消费。
而一个完整的活动策划的框架包括：
主题
目的
时间节奏
规则
奖励
核心设计：而单单说图标的话，主要的核心设计在于主题和奖励
例如：以节日活动为主题，会有主题相关的物品掉落作为奖励，这时候图标的设计，需要体现主题，烘托氛围
设计方法
以中秋活动为例，在设计图标的时候，根据主题提取元素：得出花灯、月饼、桂花酒..等风俗元素，再将元素设计成图标
例如：以充值为主题，图标不仅仅局限于物品框里面，而是作为活动的主体展示，达到烘托氛围，让玩家产生联想和共鸣的效果
设计方法
主要是对主题物品的刻画，例如：月卡，超值宝箱，翻倍卡.....设计的时候
①对物品的主体刻画：月卡主体是：卡，超值宝箱主体是：宝箱
②设计符合游戏背景设定（用花纹装饰点缀，增加细节）
③通过货币图标作为点缀，让玩家知道月卡与货币的关联性
头像图标/头像框的设计方法
头像图标用于展示角色或怪物或宠物等单位的缩略信息，能在游戏内较快速地定位到该单位的基本特征
头像
设计方法一：将设计好的原画，裁剪成头像，获得“缩略图”，方便我们在游戏里面识别和选择
设计方法二：将头像设计成卡通形象，能够让我们快速通过角色特征识别角色
因为我们内在的视觉处理系统会在每个物体周围画出线条，我们意识不到这些线条，但是通过线条我们能感觉出场景中哪些东西是独立的物品，而线条构成的画摆在我们的面前，这幅画就相当于已经由人代为简化。与我们内在的认知模型直接契合，而卡通漫画不仅通过线条处理显得更简化，而且放大了角色特征，让大脑理解画面更省力。
头像框
设计方法：头像框的获取条件通常与运营活动有关联，所以头像框的元素需要根据运营的活动主题设定，
例如：以角色姑获鸟为主题的投票活动，通过提取角色身上的特征作为设计元素，设计头像框，将主题和获得的奖励紧密的联系在一起
徽章/成就图标设计方法
关联系统：玩家通过练习，提高技术水平，从而提高自己游戏里的能力，通过玩家努力后，游戏反馈是有效的，那么游戏就可以给玩家带来一种成就感，而这时候，玩家自我突破时的这种快乐，很需要有一个分享的出口，希望朋友和他人能发现这种快乐。，所以也就延伸出成就系统和分享系统，同时玩家为了追求更高的的评价时，开发人员增加了游戏的挑战难度，让游戏的可玩性更强，同时产生心流（俗称沉浸感），延伸出排位赛系统
设计核心：主要是对玩家能力的认可，让玩家产生成就感，同时能够与好友分享这种快乐，为了符合玩家的认知模型，通常会在现实中提取具有代表且具象的元素
例如：奖杯 、徽章、奖旗，军事体系的军衔（仅用于枪战军事主题的游戏）......
徽章
奖杯
设计方法：
①选择合适的认知模型作为载体（就是奖杯、徽章....选一个作为主体）
②添加游戏背景元素（是中国武侠风，还是欧美魔幻风........）
③添加主题元素（就是获得成就的限制条件是什么）
④提升品质(限制条件越高，获得的时候，反馈越强烈，所以就有了美术品质的提升，品质提升设计方法参考：道具图标的设计方法)
角色技能图标的设计方法
按绘画风格分类：手绘、矢量
按功能分类：主动技能，被动技能
按职业分类：以战士为主的物理攻击技能、以法师为主的魔法攻击技能，以辅助为主的 buff/debuff技能
设计核心：技能图标主要是游戏角色的技能示意图。设计方式需要与技能表现形式或描述内容保持一致
效果说明
物理攻击：是以拿着钝器、锐器类的器攻击，一切都以力量为主（具有武器）
魔法攻击：简称魔攻是运用自然界的元素给予敌人打击称作魔法攻击（具有属性）
buff：主要指给某一角色或友方增加一种可以增强自身能力的魔法（增益魔法）
debuff：意思是给敌方实施的各种减益的魔法效果，减少角色的属性和能力。（减益魔法）
主动技能：玩家操控释放，有即时反馈的技能
被动技能：满足一定条件或者概率的情况下才会出现的技能
被动技能大致分两大类:
①一类是永久性增加角色某种属性的，如生命提升10%、魔法回复提升200%等，（属性提升）
②一类是赋予角色因某种条件触发效果的功能，比如“被攻击时30%的几率反击对方”这种技能。（被动效果）
设计方法
1.需求与设计元素
通常在设计前，我们会收到策划的技能需求表，内容包括：角色的技能定位，技能描述，以及表现形式
2.构图
技能图标的特点，往往表达的是角色一种行为、场景（攻击之后的场景反馈）
①物理攻击：角色拿着钝器、锐器类的器进行攻击，设计要素有：角色、武器、技能的表现形态，敌人受击时的状态
（物理攻击）
②魔法攻击：运用自然界的元素给予敌人打击，设计要素有：角色，自然元素（例如：风火雷电土，花草树木，光、影.........）敌人受击时的状态
（魔法攻击）
buff：增强自身/友方能力的增益魔法,设计要素有：色调明亮，能够让玩家联想到正面情绪的颜色，以及自身/友方受到增益效果时的表现状态
（buff）
debuff：给敌方实施的各种减益的魔法效果,设计要素有：色调暗沉， 能够让玩家联想到负面情绪的颜色，以及敌方受到减益效果时的表现状态
（debuff）
温馨提示：介于颜色所表达的情绪有双面性，所以增益还是减益取决于角色受到时候的状态效果
例如：增益效果： 绿色的回血，红色的增加攻击等等....减益效果： 绿色的毒液造成持续掉血，红色的血液，受到30%的伤害等，相同颜色的产生的不同效果
3.常见问题
①技能图标表达的内容非常丰富，但是，技能图标本身在游戏里的空间占比非常有限，所以我们要有一个元素作为视觉中心，突出视觉中心，以免造成元素过多，造成表达不明确
②主体结构不要画的太复杂，否则整个图标会显得花，实际进到游戏里缩小后表现并不好，识别度并不高
建议： 着重突出了主体的特征，这样就会让画面主次分明，主体物展现的结构不宜过多
4.透视
透视的构图，能使够图标更具有画面冲击力和吸引力的，并且能够强化角色的这个行为
常用构图通常有：
①直线（常用于单个主体的运动轨迹，突出打击感，更适合物理攻击的设定）
(直线构图)
②发散透视（常用于多个主体运动轨迹，或者通过主体元素与多个辅助元素形成对比，突出主体元素）
（发散构图）
③旋转（适合魔法攻击为设定的自然元素表现）
（旋转构图）
当然这只是常规构图，不绝对，具体的还需要根据技能的表现形式去设计哦
5.颜色
通常技能图标都是搭配相应角色出现，所以技能的主体色调跟角色的主色调息息相关，不是说技能图标主要是体现技能的表现形式吗？是的！但是无论是技能还是技能图标都是角色的从属资源，所以看上去应该是一体的，特别是图标多个的时候，图标的颜色对界面的整体性有着很大的影响
图标篇就先写到这里啦，希望你有所收获
觉得写得不错的点个赞吧
个人QQ：1160316437 (如果你有不一样的观点，欢迎来交流哦 )
全栈行业交流群：807048135（如果同为UI的你，欢迎一起交流，和全栈的小伙伴一起做练习，平时还会有作业点评和主题比赛哦）
