图标优化小总结

深圳/UI设计师/4年前/702浏览
图标优化小总结

这是一篇图标优化的小复盘。持续练习图标,依旧会持续探索,希望对你们有用。在此感谢菜心和各位星球友的建议和指导!

2021年,继续输出第二篇原创文章


想说下自己一个月的线性图标练习心得:


将近一个月对线性图标进行临摹练习,再落地到项目,经历过很多次纠结和打击,总会觉得造型还可以把捏的再准点,半原创还是不够差异化。


这次练习给我带来2个变化:

 

思维的变化

对临摹图能分析好坏,也试着将生活实景的小细节去融入设计,真想说一句设计真的是来源于生活


眼力的变化

会注意页面元素的节奏性变化和平衡,这取决于线性图标的练习,加强了对造型的把控能力



我复盘下图标优化的整个思路吧


这阵子练习图标后,总结出适合自己辨别图标好坏的方法





因为上一篇图标总结其他5点,我这里就简单说下,详细说另外的2点吧。

之前写过5点方法:

1、设计风格

2、视觉大小

3、描边大小

4、圆角大小

5、角度大小


新增的2点方法:

6、识别度


图标需要重视的一点就是得让用户理解信息,提高设别度。如果让用户增加困惑,那问题可能会很大了,用户可能直接弃用这个软件。



我们不认识韩文,但是都知道它代表什么。


 7、品牌基因

现在很多公司会在图标、海报、app等突出品牌感,这样便会体现出差异化,避免同质化。


图形的造型可以从logo提取出来。


直接提取logo上的叠加效果,将其做成图标



直接提取logo上断点形式,将其做成图标


不过这只是个人的办法,目前比较单一,分析还不全面,随着对图标的深入探究,后续会丰富图标知识点。






拿一组图标实践下,这组图标来自一个瑜伽的app。



遵循前面说的方法,在脑海过了一遍


大概有了3点优化思路:

1、图标造型比较复杂,不够简洁,第一个图标识别性低

2、辅助形状比较单调,且不自然

3、一组图标有两个图标有重复性



可以说这组图标花了很多时间去优化,直接推倒重来了,总体来说挺有收获的。





首页这是比较重要的内容模块,所以想这个图标能做出识别度高且带点差异化的造型


我想顺着app的产品调性去优化第一个图标


*第一步搜图*



画出来的第一次真的是笑死我了


接下来开始把轮廓勾勒出来



图标问题:

1、整体造型很尖锐不好看;

2、脚的造型很不好;

3、上本身造型很不好;


优化思路:


结合app的产品和logo去定义圆角还是刚正形




将直角改为圆角,最大的改动就是将身体改为圆角





提取实体图的脚造型,实际上交叉在一起



盘脚的角度不宜很大浮动,最好在同一平衡点



确定好第一个图标后,完成了其他4个图标



个人总觉得第一个和其他不搭


图标问题:

1、图标外轮廓和其他图标不同;

2、造型比例问题



优化思路:

顺着问题1去优化,分析出


三个部分组成,不能再复杂,暂时放弃这个想法。


进行问题2优化,分析图标造型


图1上面部分的头图形太小也窄,比例不对


在原来基础就是增大头部比例




其实中间也经历过几个图形,但都不满意,但只留下这个设计图标,其他删了。



这个看起来太复杂,分了三层,还有不同形态





反复看了几次,又有新的思路



优化思路:

1、图标能不能再简化点

2、能不能加入表情,让其更加活泼;


最后选了最后两个图标进行优化:




感觉比之前好很多,但还可以进一步优化



图标问题:

1、第一个图标造型与其他不搭


优化思路:

1、能否再简化这个造型,弄为一个图形;


没思路的时候,我都会进行头脑风暴,这真的是个打开思路的好方法





其实衍生出了很多词语,最后只选择了这4个词,又因为yoga有很多种姿势,所以以这两个关键词去搜参考图。



个人觉得这三种姿势出现率最多,也不一定对,个人印象中是这样。


排除图三,可以开始画图啦。我的画图步骤:


*1、提取结构: 形态  (瑜伽是形态表现为主)*




*2、提取连接处: 头、手、脚*




*3、去杂从简*


将手的形式直接去掉,整个圆当做是身子



*4、再观察*


如果感觉不对,那就在观察图片,观察到头和脚是有空隙的,然后给图标做断点



感觉姿态还是不对,比较生硬,不够形象,那就再看一次参考图



还是要加入手,姿态会更形象,有个关键点,2只手都处于一个水平线上



感觉比较生硬,不够形象



这时无从下手,再一次又去找参考,这次换个方式,找图标。



最后选中了第五个图标



有了新思路,又可以动手改了



感觉还是生硬,把手弄得圆润,基于其他4个图标的特征造型,在角度上也做了优化,中间经历很多稿最后选了这个。





看了几次,觉得这个“我的”有点普通了,点缀比例似乎小了点。



换个造型看看




重新看了这组图标的造型,最后两个图标端点位置重复,为了追求多样化,再优化下断点




因为这两图标变为表情,也试着给这两个图标带上交互效果


点击后的效果更可爱了,根据眼珠子做变化



点击后的效果,嘴的轮廓明显变大,情绪变化了





最后

这次图标的最终版还是不够有差异化,但是目前个人能力只能做到这份上了。


这次图标的优化直接让我的思维发生了一丝的变化,多留意生活的细节,多打磨小细节是真的可以一步步让设计变得更好,图标的学问是真的很深奥,接下来需要好好积累造型,打造出差异化的图标。


以上是最近优化一组图标的复盘,会继续在图标领域探索,一步步提升自己的能力和思维,同时也希望这个分享对你们有用。



37
Report
|
22
Share
相关推荐
B端作品合集
Homepage recommendation
作品集
Recommanded by editor
磨砂图标练习心得
Recommanded by editor
文章
转正答辩PPT
转正答辩PPT
转正答辩PPT
转正答辩PPT
作品收藏夹
AI可视化动效设计合集
Homepage recommendation
内容含视频
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
小猫咪插画合集
Homepage recommendation
字体设计
Homepage recommendation
相关收藏夹
转正答辩PPT
转正答辩PPT
转正答辩PPT
转正答辩PPT
作品收藏夹
图标设计
图标设计
图标设计
图标设计
作品收藏夹
图标
图标
图标
图标
作品收藏夹
icon
icon
icon
icon
作品收藏夹
ip形象设计+表情包
ip形象设计+表情包
ip形象设计+表情包
ip形象设计+表情包
精选收藏夹
作品收藏夹
企业展厅/文化墙 参考
企业展厅/文化墙 参考
企业展厅/文化墙 参考
企业展厅/文化墙 参考
精选收藏夹
作品收藏夹
大家都在看
Log in