线性图标优化思路小总结
这是一篇线性图标的小总结。但目前对图标认识还比较肤浅,后续会持续探索,希望对你们有用。在此感谢菜心的指导!@菜心设计铺
今天来一篇线性图标的原创文章。
2021年,先来局贺词吧 设计友友新年快乐啊!
花了一周多的时间对之前项目中一组线性图标进行优化,真心觉得越简单的设计是越难做,但阻碍不了探索的心,越难越要去吃透它。
这是最终优化的图标

我复盘下图标优化的整个思路吧。
1.找优秀的参考图

2.设计分析
通过上面2个案例,总结出图标的设计原则:
1、设计风格
图标一般都有它的品牌基调,有相同的共性,有图标圆形的外轮廓,保持了一致性,而且都是极简风格,识别度高。
刚正形

圆润形

2、描边、圆角
颜色、形状的粗细和圆角大小都保持一致。

3、角度
角度也是图标组成的一部分,也需要去统一规范
就跟我们平时做界面设计的时候会以倍数定出几个边距数值
图标也不例外,会按照一定的倍数来制定规范,这里是15°的倍数:

4、视觉大小
图标大小从视觉上看起来都保持一致,不会有太大的偏差。

图标它也有尺寸规范。这个比例由长与宽构成,有圆形 、 竖形 、方形 、横形 。

提醒一下,由于感官视觉的关系,这些大小都是可以微调的,以整体协调性为主。
这里的分析还不全面,跟着后面的深入,会进一步优化知识点。
2.优化图标
基操就是要动起来,一直给自己挑刺,一直去优化,没有最好,只有更好。
我这期间花了4天的时间只优化这组图标,一共经历了5个版本的迭代优化。
前期尺寸规范这些我就不细说了,直接上图了。

图标问题:
1、不够圆润,圆角不统一
2、辅助圆形比较单调,都同一形状
3、风格可以再统一

优化思路:
1、圆角增大,调整比例,元素之间更紧凑
2、辅助图形可以根据造型去做适当的改变
3、保持统一性,形成简约风格
在2.0基础上也优化了2版,但是还是不满意,展开说太长,我就简单说下吧

点缀的造型有点不自然,没有那种很舒服的感觉

中规中矩,没什么差异性,图标风格不统一。
没思路的时候就停下来去看看别人的优秀案例,去寻找灵感,靠自己挤脑子是很难有结论,而且还费时间。
重新比较优化的3个版本,我个人而言最喜欢2.0版本,于是又开始撸起袖子干了。

图标问题:
1、图标不够饱满
2、图标比较普通,没有差异性
优化思路:
在2.0基础上增加断点,增大描边线条

描边大小从4px改为6px,变得更饱满
色块点缀,并占据一定的比例关系

色块作为识别标示,目的就是提高视觉识别性。
整体优化:
1、统一断点的距离
2、调整断点的位置

我们尝试往复杂程度低的区域做断点

这样视觉上是不是更平衡了点
3、减少重复性

最后优化的图标

最后
线性图标看起来简单,但实际上是最讲究造型能力的,我这份总结只是冰山一角,它还可以很多方式去打造差异化,比如品牌打造法的方式、我这里用的特别浅,所以也没细说。
以上就是最近对线性图标的一些心得。但目前对图标认识还比较肤浅,后续会持续探索,希望对你们有用。



















































































