原版图标来自训记APP，是一款健身产品，也是UI40班学员作品集选中的项目之一。其底部Tabbar图标的设计风格老旧、视觉大小不统一、造型相似度较高（主要体现在“训练”、“历史”、“我的”这三个图标中）。
接下来，我们便针对这三点进行视觉优化。
02、重新定义设计风格
在阿多比的UI课程中我们说过，图标设计的着力点主要包括“风格”和“造型”两个层面。我们在拿到一组图标主题后，首先需要根据产品定位和改版目标确定情绪板关键词，然后推导设计风格。
此次改版我们希望产品能体现出年轻、力量、激情的感觉，原版的设计风格老旧，肯定不能继续沿用，主色的蓝色也无法满足需求。于是，我们便结合橙色的色彩情感，以及想要通过“橙+黑”来塑造强对比视觉效果，选定了最终的配色方案。当然，期间我们还做了以绿色为主色的设计，最终效果会在文末给大家呈现对比。
确定好颜色后，还需要确定图标的表现形式，这里可以参考一些优秀的设计作品。在参考时，需要注意Tabbar图标是有两种状态的，选中与未选中，所以我们也需要明确两种表现形式的参考。例如：选中前是单色线性、选中后彩色面性；选中前是灰色双色线性、选中后是彩色双色线性等等。下图中展示的部分参考截图就是4种不同的表现形式。
经过一番对比、思考、拆解，最初我们确定了上图三的表现形式，但觉得“橙色+黑色”视觉对比体现不强，便改为现在的“选中前灰色双色线性、选中后彩色双色线性”。
设计风格确定好了，就可以动手开干了，前面提到的“视觉大小不统一、造型相似度较高”也会在操作过程中进行优化。
03、训练和动作图标
首先确定图标的造型，我们通过关键词联想，将抽象的图标主题转换为具象的事物表现。
由训练我们会联想到运动的人、训练器械，由动作也会联想到运动的人和训练器械，这时就要尽量避免重复了。训练主要是用户开始训练，“人”是关键，而动作主要是罗列训练动作的库，单纯的训练动作“器械”是关键。所以它俩的图标造型便有了区分。
再来做个对比，一开始的方案并不是上图那样，而是这样：
和上图的区别在于，一开始的浅灰色线条和深灰色是同样粗细的，这样就导致图标缺少呼吸感，整体显得很笨重，于是我们才把浅灰色变细了一些。
动作的图标也经历了很多版本，过程稿如下：
方案1高度较小，和训练图标放一起时视觉大小难统一，淘汰；
方案2做了倾斜，但是其他图标是没有做倾斜的，训练图标也不便做倾斜，淘汰；
方案3加大了中间杠铃杆的高度，整体负空间小了，但是显得太笨重，也不符合杠铃的实物逻辑，淘汰；
方案4改成一条直线，符合杠铃的实物逻辑，但是上下负空间太大，造型的比例大小看着很奇怪，也淘汰。
所以大家可以看出，造型的细节差异，对图标的气质影响是很大的，大家在绘制图标时一定要多尝试。
04、记录图标
接下来是记录图标，由记录我们会联想到加号、纸笔、文字、文件夹等事物，他们都和记录有关，出于造型简洁的考虑，我们选了笔的造型，来看过程稿。
记录图标经历的过程稿不多，我们先说方案3，纸张、本子，是最容易想到的造型，方案3的整体轮廓完整度很好，四平八稳，但缺少个性，而且和第四个图标“历史”很容易雷同，所以被淘汰；
选择笔的造型，方案1只有一只笔，过于瘦高，视觉大小难以和训练平衡（这里强调一点：训练图标整体呈面性的大小是很大的，后面四个图标在绘制时都需要重点考虑和它放在一起时的平衡问题）；
方案2将笔做了倾斜，但是右下很空，于是加了一条横线平衡版面，但笔造型的中间显得太空，需要添加元素，于是也被淘汰。
最后的定稿见下图。
05、历史图标
在训记APP中，历史模块主要展示的是用户过往的训练历史记录，基本为一些数据图表展示，我们选择什么造型好呢？很多同学优先想到的就是类似下图这些造型：
可以看出，三个图标外部都存在一定的负空间。我们在造型的选择上，负空间肯定是越小越好的，这样可以让造型更加饱满。那结合历史模块展示的都是图表数据，由图表数据联想到“折线图”，便有了下图的最终效果。
06、我的图标
最后一个个人中心，这个图标的绘制很多设计师会采用下图这些样式去做：
这样的个人中心单调乏味，没有个性，并且外部轮廓不够整体性，负空间也较大。
我们绘制个人中心时的着力点可以放在品牌差异化的塑造上，如果APP是有IP形象的，可以结合IP形象去绘制，比如下面这些UI40班学生的作品：
当结合IP形象以后，自然就有了差异化和个性化。那如果产品没有可用的IP形象或者Logo辅助图形，我们就尽量选择一些造型比较稳、负空间较小的图标去做。
07、小结
再回顾一下改版前后的效果对比，以及其他配色方案的对比。
不同配色方案的效果对比，橙色+黑色，视觉效果最明显，蓝色虽然也可以，较为平淡。
那我们如何改版界面图标呢？大家可以按照以下步骤去做：
Step1-确定设计风格
方法就是大量的看和“刻意采集”，选出合适你产品定位和改版目标的风格。
Step2-绘制图标造型
根据图标主题，做关键词联想，将抽象的主题变成可绘制出来的具体事物，实在没有思路的时候，也可以在网上的开源图标库中去寻找造型参考。
Step3-做差异化设计
找到的或者联想到的图标造型，需要有属于设计师自己的变化，可以结合前面选定的设计风格和整套图标的观感，去做个性化的设计，尽可能地塑造出图标的差异化。
Step4-最终优化调整
所有图标画完后，需要检查图标的识别性、一致性、协调性、品牌调性、图标气质等，做出最后的优化调整。