2

进了大厂后,我才知道原来我的细节差这么多!

 1 year ago
source link: https://www.ui.cn/detail/625870.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

进了大厂后,我才知道原来我的细节差这么多!-经验/观点-UICN用户体验设计平台

进了大厂后,我才知道原来我的细节差这么多!
35.7°

昨天 | 原创文章 / 经验/观点 / | 举报

|

6276 79 154 3

今天再来分享几个比较干货的知识点,直接上才艺!

01 这个叠加是假的

我看钉钉群里有人问下面这种风格的图标是用的什么模式叠加的:

4126808.png

我之前有做过类似的,其实这个叠加的效果是假的,和毛玻璃一样的原理,中间叠在一起的地方,其实是一个单独的图形:

4126809.png

我们把这个单独的图形加上一个渐变色,放在最上面,效果就出来了:

4126810.png

这个渐变的是可以任意更换颜色的:

4126811.png

所以,这个叠加效果,并不是我们想象中那样用叠加模式调出来的。

反正我是这样做的,供大家参考。

02 包装的问题

下面这组练习,单从图标来看其实是没有啥问题的:

4126812.png

统一性啥的都还ok,但是毁在包装上了,比如黑色方块下面尽量就不用加投影了,太脏了:

4126813.png

其次就是黑色下面的背景色用了一块浅紫色,毫无关联性,不如直接用灰色,或者如果色块是深紫色,背景是浅紫色,那也ok:

4126815.png

总之就是要有一定的关联性,不然就会比较奇怪。

03 关于圆角的和谐性

其实我们在看圆角的时候,并不仅仅只是一组图标之间的统一,单个图标的圆角统一也要注意。

比如之前有一次优化的图标,就是因为图标顶部和底部的圆角大小不一:

4126816.png

今天看的这个是优惠券的:

4126817.png

也是感觉有点难受,但是如果是下面这个优惠券就精致很多:

4126818.png

其实也是因为图标内部圆角统一的问题,都是直角就会舒服很多,但外轮廓是大圆角,里面是尖角就会比较难受。

04 为什么这组半原创没有原版耐看

有一位星友做了一组半原创练习,原版是这组:

4126819.png

半原创是这组:

4126820.png

我们会发现,原创的图标没有原版耐看,为什么呢?

因为原版的细节足够丰富,但是半原创的细节就很单薄,比如我们看原版的奖杯,底座加了两侧矩形,如果只是一条横线就会相对非常单薄普通:

4126821.png

再比如这个放大镜,把手也并不只是一条竖线,而是分了两段,加了细节:

4126822.png

按照这个理念来分析,我们可以发现半原创的几个图标,只有第四个看起来比较耐看,因为它的细节相对比较丰富,可以跟得上原作,其他都相对单薄一些。

4126823.png

虽然第二个钱包纽扣那里也加了两层,但是疏密度有点问题,而且也比较常规。

05 看几组星友精选的练习

最后再看几位同学的精选打卡,非常用心:

第一组是Donna的!

融合很多细节,也有很多自己的想法,变得更加丰富、精致、统一,非常优秀:

4126824.png

第二组是小7的统一性做了很好的优化,又加入了自己的断线想法:

4126825.png

第二组是小7的统一性做了很好的优化,又加入了自己的断线想法:

4126827.png

第三组是慢格调的:

很精致,疏密度、大小、长短高矮,用色比例全都进行了统一性调整,非常优秀。

也融入了很多自己的想法,继续加油:

4126828.jpg

总结

今天就先分享这么多了,每天进步一点点,现在开始,永远不晚!


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK