线性图标优化思路小总结

用户头像
深圳/UI设计师/5年前/5717浏览
线性图标优化思路小总结

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

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



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






最后优化的图标






最后

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




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

111
举报
|
210
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
UI应用平面图标
新拟态风格 UI设计组件库
UI通用设计素材1
【新年UI图标】珠宝icon
智能家居中心 简约 UI设计组件库
UI_3D图标炮仗<新春促销>
盲盒APP UI设计
UI 登录界面设计模板包
我的钱包-UI界面设计-app
【新年UI图标】美食icon
UI界面 组件
【新年UI图标】游戏/娱乐icon
Security Camera UI kit
柠檬黄主题UI作品集模版
矢量立体简约UI蓝白图标
高级表盘系列UI源文件
【新年UI图标】影音icon
科技医疗透明柜UI界面设计
手表表盘UI系列
【新年UI图标】美妆icon
【新年UI图标】家具icon
新能源APP应用UIKit
UI_3D图标火箭炮<新春促销>
你可能喜欢
相关收藏夹
UI
UI
UI
UI
大家都在看
登录注册