近10个版本的设计优化过程,美搭
kaka是菜心星球里非常踏实的一位设计师,能静下心来磨一些细节。
今天是他在近期某组图标复盘优化时候的整个记录过程,很详细,我觉得对很多设计师都会有启发作用。
正文开始:
想说下自己一个月的线性图标练习心得:
将近一个月对线性图标进行临摹练习,再落地到项目,经历过很多次纠结和打击,总会觉得造型还可以把捏的再准点,半原创还是不够差异化。
这次练习给我带来2个变化:
思维的变化
对临摹图能分析好坏,也试着将生活实景的小细节去融入设计,真想说一句设计真的是来源于生活
眼力的变化
会注意页面元素的节奏性变化和平衡,这取决于线性图标的练习,加强了对造型的把控能力
我复盘下图标优化的整个思路吧
分析自己之前的作品
拿一组图标实践下,这组图标来自一个瑜伽的app。
遵循这一阵子总结的方法,在脑海过了一遍
大概有了3点优化思路:
1、图标造型比较复杂,不够简洁,第一个图标识别性低
2、辅助形状比较单调,且不自然
3、一组图标有两个图标有重复性
可以说这组图标花了很多时间去优化,直接推倒重来了,总体来说挺有收获的。
开始优化图标
首页这是比较重要的内容模块,所以想这个图标能做出识别度高且带点差异化的造型
我想顺着app的产品调性去优化第一个图标
第一步搜图
画出来的第一次真的是笑死我了
接下来开始把轮廓勾勒出来
图标问题:
1、整体造型很尖锐不好看;
2、脚的造型很不好;
3、上本身造型很不好;
优化思路:
结合app的产品和logo去定义圆角还是刚正形
将直角改为圆角,最大的改动就是将身体改为圆角
提取实体图的脚造型,实际上交叉在一起
盘脚的角度不宜很大浮动,最好在同一平衡点
确定好第一个图标后,完成了其他4个图标
个人总觉得第一个和其他不搭
图标问题:
1、图标外轮廓和其他图标不同;
2、造型比例问题
优化思路:
顺着问题1去优化,分析出
三个部分组成,不能再复杂,暂时放弃这个想法。
进行问题2优化,分析图标造型
图1上面部分的头图形太小也窄,比例不对
在原来基础就是增大头部比例
其实中间也经历过几个图形,但都不满意,但只留下这个设计图标,其他删了。
这个看起来太复杂,分了三层,还有不同形态
反复看了几次,又有新的思路
优化思路:
1、图标能不能再简化点
2、能不能加入表情,让其更加活泼;
最后选了最后两个图标进行优化:
感觉比之前好很多,但还可以进一步优化
图标问题:
第一个图标造型与其他不搭;
优化思路:
能否再简化这个造型,弄为一个图形;
没思路的时候,我都会进行头脑风暴,这真的是个打开思路的好方法
其实衍生出了很多词语,最后只选择了这4个词,又因为yoga有很多种姿势,所以以这两个关键词去搜参考图。
个人觉得这三种姿势出现率最多,也不一定对,个人印象中是这样。
排除图三,可以开始画图啦。我的画图步骤:
1、提取结构:形态 (瑜伽是形态表现为主)
2、提取连接处:头、手、脚
3、去杂从简
将手的形式直接去掉,整个圆当做是身子
4、再观察
如果感觉不对,那就在观察图片,观察到头和脚是有空隙的,然后给图标做断点
感觉姿态还是不对,比较生硬,不够形象,那就再看一次参考图
还是要加入手,姿态会更形象,有个关键点,2只手都处于一个水平线上
感觉比较生硬,不够形象
这时无从下手,再一次又去找参考,这次换个方式,找图标。
最后选中了第五个图标
有了新思路,又可以动手改了
感觉还是生硬,把手弄得圆润,基于其他4个图标的特征造型,在角度上也做了优化,中间经历很多稿最后选了这个。
看了几次,觉得这个“我的”有点普通了,点缀比例似乎小了点。
换个造型看看
重新看了这组图标的造型,最后两个图标端点位置重复,为了追求多样化,再优化下断点
因为这两图标变为表情,也试着给这两个图标带上交互效果
点击后的效果更可爱了,根据眼珠子做变化
点击后的效果,嘴的轮廓明显变大,情绪变化了
最后
这次图标的最终版还是不够有差异化,但是目前个人能力只能做到这份上了。