一套ICON系统的定义，是需要很多的步骤和方法论的支撑的，这样做出来的ICON才是有灵魂的。本教程谨代表个人观点，不做企业宣传用途。
一、图标的作用
图标是一种抽象的，跨语言的符号，它不仅是一种图形，更是一种标识，它具有高度浓缩并快捷传达信息、便于记忆的特性。随着信息传播速度和载体的快速增长，图标的使用频率也在不断提高。在设计图标之前，你有没有想过图标的作用何在？通过反复思考，有助于我们设计水平的提升。
经过设计师的总结和提炼，把图标的作用归结为4个点：装饰、表意、趣味和品宣。
1、装饰
是指通过图标对页面进行润色，使页面看上去更加饱满。同时，通过图标增加页面的层次感，使页面各部分内容得以区分。装饰作为图标的基础作用，大多数图标都满足装饰的作用。
例如下图中左侧ENJOY的首页中，icon作为页面的亮点装饰元素出现，在表意的基础上，提高了页面的识别性，在产品品牌推广上功不可没。右侧的饿了么也是一个很好的案例。
左侧：ENJOY 右侧：饿了么
2、表意
图标的第二大功能就是表意，在装饰的基础上有所升华。直白来说，图标的表意体现在对于功能的解释上。互联网经过这几年的快速发展，用户对于一些图标形成了一些约定俗成的认知。我们在进行产品设计时要做到心中有数，使用的时候切忌打破常规。
例如网易云音乐里的分享、下载、播放等icon，和站酷里的阅读、点赞、留言、收藏等icon，对于这些在用户心智中形成固有模式的图标，我们使用的时候可以在此基础上做变形、创新，但如果要打破用户的习惯认知，一定要谨慎。
左侧：网易云音乐 右侧：站酷
3、趣味
能带给人愉悦感受的图标可以称得上很好的图标了，这也就是图标的第三大功能。如果愉悦的同时有很好的表意性，无疑是一个极棒的图标了。
我们来看看QQ下面标签栏的icon是我们很熟悉的一组icon，在不同页面进行切换时，不仅icon有相对应的小动效，而且当选中不同的页面时，中间小人的眼睛也会随之变化，一个微妙的小细节往往是打动用户的关键之所在。
QQ app的标签栏icon
4、品牌宣传
随着互联网ui趋势概念的增强，市面上的产品同质化也越来越严重。那么如何能让自家的产品脱颖而出？其中很重要的因素之一就是品牌塑造。通过icon来进行品牌传达是一种简单有效的方法。
例如咸鱼app很好的将icon结合品牌色，打造了个性化的视觉体验。大众点评的V10改版更是通过整体的品牌升级，重新对UI进行了定义，通过全新的icon展示，传达了年轻化、娱乐化、社交化的产品理念。
左侧：咸鱼 右侧：大众点评
二、背景介绍
本次图标优化的需求来源于积木盒子app的redesign。
图标位置：位于积木盒子app一级页面“发现页”顶部的4个常驻活动入口。
由于本次优化时间有限，仅对这4个icon进行优化。如果优化效果好，会考虑在后期继续优化运营活动页的整体ui。
原有图标样式：
在app中的应用：
结合前面讲到的图标的作用，我们对原有图标进行分析。
我们从标签栏看出，整个app分为4部分，有首页、投资、发现、我的四个一级页面，而我们优化的图标位于发现页的一级页面中。根据图标的4个作用我们来逐个进行分析。
1、装饰
原有图标起到了较强的装饰性作用，细节上非常到位，颜色也很丰富，但仍然存在一定的问题。
与pc相比，app的界面空间很有限，在如此小的空间里，图标大小仅有50pt左右，因此与丰富的细节相比，更看重其识别性。这组icon为面性icon，要求每一个色块清晰可识别，尽可能避免含糊不清的阴影或颜色，使其即使在小屏也能迅速被用户所识别。
统一性欠缺，1、2、4的icon均为圆形icon中主要元素进行破形处理，第3个icon圆形即主元素，点缀的箭头进行破形处理。1、2、3的icon破形部分均有阴影，而第4个icon破形部分没有阴影。
2、表意
表意上基本明确。
“邀好友”为伸出的友谊之手。
“招财奖”利用招财猫为原型，如果再加入抽奖的元素则表意更佳。
“转转赢”利用转轮的元素，很好的表达了转盘抽奖的意思。
“周周乐”用宝箱来表意，虽不是特别贴切，但也不出错。如果结合实际的双色球活动，则表意效果更佳。
3、趣味
本组icon有较高的趣味性，希望改版优化能给用户带来同等程度的愉悦感受。
4、品牌宣传
由于改版对品牌及产品定位进行了全新升级，因此新版icon希望更多的体现出年轻化，色彩上有更高的饱和度，与品牌logo风格更贴近。
另外由于运营活动的更新，希望icon在风格上能有更好的延展性，便于后期相同风格的icon绘制。
总结：
通过以上分析，我们对新版icon提出了4个设计要点，对图标优化的风格定位起到指导性作用：高识别性、表意清晰、贴近品牌、易于扩展
