图标优化小总结

用户头像
深圳/UI设计师/5年前/786浏览
图标优化小总结

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

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