线性图标优化思路小总结

Recommanded by editor
深圳/UI设计师/4年前/5290浏览
线性图标优化思路小总结Recommanded by editor

这是一篇线性图标的小总结。但目前对图标认识还比较肤浅,后续会持续探索,希望对你们有用。在此感谢菜心的指导!@菜心设计铺

今天来一篇线性图标的原创文章。



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、减少重复性






最后优化的图标






最后

线性图标看起来简单,但实际上是最讲究造型能力的,我这份总结只是冰山一角,它还可以很多方式去打造差异化,比如品牌打造法的方式、我这里用的特别浅,所以也没细说。




以上就是最近对线性图标的一些心得。但目前对图标认识还比较肤浅,后续会持续探索,希望对你们有用。

106
Report
|
201
Share
相关推荐
B端作品合集
Homepage recommendation
作品集
Recommanded by editor
磨砂图标练习心得
Recommanded by editor
文章
思维文章
思维文章
思维文章
思维文章
作品收藏夹
AI可视化动效设计合集
Homepage recommendation
内容含视频
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
相关收藏夹
思维文章
思维文章
思维文章
思维文章
作品收藏夹
文字教程
文字教程
文字教程
文字教程
作品收藏夹
UI
UI
UI
UI
作品收藏夹
分享
分享
分享
分享
作品收藏夹
班组图标设计
班组图标设计
班组图标设计
班组图标设计
作品收藏夹
icon-Design
icon-Design
icon-Design
icon-Design
作品收藏夹
大家都在看
Log in