这个小元素都做不好，我哪有脸下班！

今天给大家分享小元素技巧，技巧有助于我们添加更多细节，使得小元素更加生动。会从形状、气质、样式、节奏四个方面进行优化。这个小技巧对很多人应该还是有用的，所以分享一下。

今天的案例是下面这萌新福利图标：

看似没什么大问题，但如果细抠，还是可以更好的，今天我们主要来优化图标上半部分的彩带。

 

问题一：每一个单体的形状

我们看下面这个“呕吐”的表情：

是不是有个规律，就是越往外，面积最大？

我这个彩带的设定是从那个矩形里喷出来的，所以他的形状就应该符合越往外，面积越大。而我们之前的形状是反的，不符合生活中的真实场景。

所以每一个单体的形状是可以优化的：

 

问题二：每一个单体的气质

我们下整体的感觉都是圆润可爱的：

但是我们的彩带元素四个角有点太尖锐了，这样整体看起来就会有点不精致，所以我们可以把每个元素加一点点的圆角：

这样就不会太尖锐了。

 

问题三：单体的样式

本来我想从矩形中冒出来多种元素，但是现在有两个彩带，一个圆形，会让人感觉，有点不一样，但是又不一样的不够彻底，所以还不如直接全部统一成彩带就好了：

 

现在我们单体形状的大小是大、中、小，让人感觉完全没有以外，规律感太强烈：

如何增加节奏感呢，增加以外感呢，我们可以再加一个元素，比如大、中、小、中，没有那么规律：

然后我们还可以在距离上做一些节奏，距离中心点的距离为近、远、更近、远：

这样整体看起来就会舒服很多了。

我们看下优化前后的对比：

是不是精致了很多。

除此之外，我们再看下其他内容的优化，其实最开始是张这个样子的：

因为图标尺寸很小，所以这样显得有些复杂，而且没有体现出萌新的感觉，不够可爱，所以才有了直接把盒盖去掉，然后把表情放大的结果。

当然，少不了动效加持，效果如下：

精致的东西都是无数个细节堆出来了，不小小瞧任何一个小细节，也不要把每个细节当作理所当然，咱们就稳稳当当的做好每一步，结果一定不会太差，加油。

 

原文地址：
菜心设计铺（公众号）

作者：菜心设计铺