今天讲的是一个很细的细节,但我觉得对很多人应该还是有用的,所以分享一下。
今天的案例是下面这萌新福利图标:
看似没什么大问题,但如果细抠,还是可以更好的,今天我们主要来优化图标上半部分的彩带。
问题一:每一个单体的形状
我们看下面这个“呕吐”的表情:
是不是有个规律,就是越往外,面积最大?
我这个彩带的设定是从那个矩形里喷出来的,所以他的形状就应该符合越往外,面积越大。而我们之前的形状是反的,不符合生活中的真实场景。
所以每一个单体的形状是可以优化的:
问题二:每一个单体的气质
我们下整体的感觉都是圆润可爱的:
但是我们的彩带元素四个角有点太尖锐了,这样整体看起来就会有点不精致,所以我们可以把每个元素加一点点的圆角:
这样就不会太尖锐了。
问题三:单体的样式
本来我想从矩形中冒出来多种元素,但是现在有两个彩带,一个圆形,会让人感觉,有点不一样,但是又不一样的不够彻底,所以还不如直接全部统一成彩带就好了:
问题四:单体的节奏
现在我们单体形状的大小是大、中、小,让人感觉完全没有以外,规律感太强烈:
如何增加节奏感呢,增加以外感呢,我们可以再加一个元素,比如大、中、小、中,没有那么规律:
然后我们还可以在距离上做一些节奏,距离中心点的距离为近、远、更近、远:
这样整体看起来就会舒服很多了。
我们看下优化前后的对比:
是不是精致了很多。
除此之外,我们再看下其他内容的优化,其实最开始是长这个样子的:
因为图标尺寸很小,所以这样显得有些复杂,而且没有体现出萌新的感觉,不够可爱,所以才有了直接把盒盖去掉,然后把表情放大的结果。
当然,少不了动效加持,效果如下:
精致的东西都是无数个细节堆出来了,不小小瞧任何一个小细节,也不要把每个细节当作理所当然,咱们就稳稳当当的做好每一步,结果一定不会太差,加油。
(本文来源于微信公众号 @菜心设计铺)
下一篇 提升UI界面排版的7个实用小技巧
热门课程
专业讲师指导 快速摆脱技能困惑相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题,火星帮你解答深入探讨火星3D动画培训课程,解析3D动画制作的技术要素,助力学员成为专业的动画制作者。
深入解析网页UI设计培训的优劣,并对火星时代教育进行初步介绍。
探索并深度理解Unreal Engine培训机构的优势,包括课程内容,教学方法,以及如何选择最适合你的培训机构。
本文讨论了UE设计的重要性,以及如何选择一门UE设计的网络培训课程,其中,火星时代教育是一个值得考虑的选项
探索UE5设计全日制课程的奥秘,并了解火星时代教育如何通过专业的教学内容和独有的教学方法,帮助学员提升设计技能
探索游戏开发培训课程的重要性,是如何为真正热爱游戏开发的人打开新的职业机会的门.
1. 打开微信扫一扫,扫描左侧二维码
2. 添加老师微信,马上领取免费课程资源
同学您好!