近10个版本的设计优化过程,美搭

/ / 2015-10-25
作者介绍: kaka是菜心星球里非常踏实的一位设计师,能静下心来磨一些细节。 今天是他在近期某组图标复盘优化时...

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个图标的特征造型,在角度上也做了优化,中间经历很多稿最后选了这个。

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

换个造型看看

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

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

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

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

最后

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

      
      1
      联系我们