火星网校
UI图标优化时这个细节你应该注意！
今天讲的是一个很细的细节，但我觉得对很多人应该还是有用的，所以分享一下。
今天的案例是下面这萌新福利图标：
看似没什么大问题，但如果细抠，还是可以更好的，今天我们主要来优化图标上半部分的彩带。
问题一：每一个单体的形状
我们看下面这个“呕吐”的表情：
是不是有个规律，就是越往外，面积最大？
我这个彩带的设定是从那个矩形里喷出来的，所以他的形状就应该符合越往外，面积越大。而我们之前的形状是反的，不符合生活中的真实场景。
所以每一个单体的形状是可以优化的：
问题二：每一个单体的气质
我们下整体的感觉都是圆润可爱的：
但是我们的彩带元素四个角有点太尖锐了，这样整体看起来就会有点不精致，所以我们可以把每个元素加一点点的圆角：
这样就不会太尖锐了。
问题三：单体的样式
本来我想从矩形中冒出来多种元素，但是现在有两个彩带，一个圆形，会让人感觉，有点不一样，但是又不一样的不够彻底，所以还不如直接全部统一成彩带就好了：
问题四：单体的节奏
现在我们单体形状的大小是大、中、小，让人感觉完全没有以外，规律感太强烈：
如何增加节奏感呢，增加以外感呢，我们可以再加一个元素，比如大、中、小、中，没有那么规律：
然后我们还可以在距离上做一些节奏，距离中心点的距离为近、远、更近、远：
这样整体看起来就会舒服很多了。
我们看下优化前后的对比：
是不是精致了很多。
除此之外，我们再看下其他内容的优化，其实最开始是长这个样子的：
因为图标尺寸很小，所以这样显得有些复杂，而且没有体现出萌新的感觉，不够可爱，所以才有了直接把盒盖去掉，然后把表情放大的结果。
当然，少不了动效加持，效果如下：
精致的东西都是无数个细节堆出来了，不小小瞧任何一个小细节，也不要把每个细节当作理所当然，咱们就稳稳当当的做好每一步，结果一定不会太差，加油。
（本文来源于微信公众号 @菜心设计铺）
下一篇 提升UI界面排版的7个实用小技巧
-
2101期学员李思庭作品
-
2104期学员林雪茹作品
-
2107期学员赵凌作品
-
2107期学员赵燃作品
-
2106期学员徐正浩作品
-
2106期学员弓莉作品
-
2105期学员白羽新作品
-
2107期学员王佳蕊作品
热门课程
专业讲师指导 快速摆脱技能困惑
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题，火星帮你解答-
Blender确实不是那么容易上手的软件，尤其是如果你之前用的是像Maya或Max这样的传统软件。但当你终于掌握了它，那种成就......
-
《哪吒之魔童闹海》幕后纪录片《不破不立》上线，揭秘制作艰辛与匠心。哪吒冲破穿心咒场景灵感源自防盗玻璃，导演饺子分享角色塑造心得......
-
你还在苦苦寻觅今年的挣钱新风口吗？这里为大家盘点了一些今年乃至明年会有增长点的新风口。大家可以结合自己的优势和特长做一下拼接，......
-
从学舞蹈到做开发再到做动画，这位《哪吒2》动画师都经历了什么
吴同学从舞蹈转软件开发，再转行学动画，在火星时代教育学习后入职制作公司，参与《哪吒2》动画制作获成就感，强调打好基础对工作和职......
-
大学生跨专业求职，应找兴趣方向，分析职业能力并提升，利用人脉资源公开求职意愿，尝试私信招聘方，保持开放心态降低要求，耐心投简历......
-
伴随着《哪吒2》火爆全网，它所带来的不仅仅是电影票房的一路飙升，更是让动画公司和动画创作者群体，再一次走进大众视野。
