赞助商
立即赞助

既能用于排版还能用在图标的两个小技巧,快来收下!

UI设计3年前 (2021)更新 流光
4K 0 0

有时得做的图标有点奇怪,但又不道哪里奇怪,今天就来分析两个原理,看看有谁中招!

亲密性

排版有四大原则,其中有很重要的一项就是亲密,举个简单的例子,下图灰是背卡,白是信息内容:

既能用于排版还能用在图标的两个小技巧,快来收下!

按照亲密原则,信息内容应该是一个整,他们之间的关系更加亲密,所以它们之间的内间距(蓝),应该是小它们与卡的外间距(红):

既能用于排版还能用在图标的两个小技巧,快来收下!

果,我们把间距颠倒,效果就变成样:

既能用于排版还能用在图标的两个小技巧,快来收下!

是不是有点奇怪!

其实图标的时候,时也会用到这知识点,比如之看到一星友的删除图标,效果如下:

既能用于排版还能用在图标的两个小技巧,快来收下!

中间的两条竖线应该内部内,它们的内间距就应该小于外间距:

既能用于排版还能用在图标的两个小技巧,快来收下!

当然,这间距相同也 ok 的,咱们就别把内间距于外间距,然后的太离谱就好。

如果这个案例不够显,咱再整一个更显的,在做“笔记本“、“目录“图标的候,有候会做成一个矩形,然后面加条线:

既能用于排版还能用在图标的两个小技巧,快来收下!

这条线的内间距是不是应该于它矩形的外间距,比如这:

既能用于排版还能用在图标的两个小技巧,快来收下!

如果间距反过来,就会成这:

既能用于排版还能用在图标的两个小技巧,快来收下!

这回显了吧!内部西散,导致整体不够致。

实仔细观察,这个图标例子和才那个版的例子全是一事:

既能用于排版还能用在图标的两个小技巧,快来收下!

一个原,那就是——亲密性!

很要,大家定要多多理解实践!

密集节奏

密集节奏是我们很容易犯的错,如面这个图标的原作看起来密集节奏就较和谐:

既能用于排版还能用在图标的两个小技巧,快来收下!

但是当星友摹后,效果如:

既能用于排版还能用在图标的两个小技巧,快来收下!

我们抛开饱满谈,就在密集这一,这个地方离的太:

既能用于排版还能用在图标的两个小技巧,快来收下!

导致那里过于密集,两条线快合二为一了。

再比如,下这图标,我们先看临摹效:

既能用于排版还能用在图标的两个小技巧,快来收下!

是不是这两个地都太密了:

既能用于排版还能用在图标的两个小技巧,快来收下!

也是线条快合为了,我们再看看原作:

既能用于排版还能用在图标的两个小技巧,快来收下!

家这节奏感好很多。

举个例子,组图标:

既能用于排版还能用在图标的两个小技巧,快来收下!

整临摹优化的还不错,但是就是有一个比突兀,就是它:

既能用于排版还能用在图标的两个小技巧,快来收下!

我不说,大家应该也能看出来,灯泡下面里太密集,其他地方舒服,只有里有点难受。

这就家常犯的一密集节奏的问题,家多多注意。

好了,今就这多,大家可以好好消化下,尽量避坑!

注作者的微信公众号:「菜心设计铺」

既能用于排版还能用在图标的两个小技巧,快来收下!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

设计师的厉害之处不是设计方案有多么天马行空,而是是否有能将其落地的能力。 你们是否遇到过这种情况:自己做的设计方案在...
ui设计
编者按:一个合格的 UI 按钮到底需要具备什么样的素质?在很多设计师眼里似乎并不是一个太大的问题的,但是在实际设计的时候...
ui设计
@Daidai丶呆 :本篇文章写写近期看到的比较有趣的话题,「一款好产品,所需具备的条件」。 产品角度 早前有看到张小龙说 :一...
ui设计
@Mockplus原型设计 :如今,越来越多的优秀 iOS 应用程序、MacOS 工具和网站争相出现,用户对产品质量的要求也水涨船高。在用...
ui设计
写在前面 你们在日常工作中是否会有这样的思考,设计能给业务带来多大的价值?或者你从现在的工作中能够感受到多少价值?难道...
ui设计
Tubik Studio :配色是每个设计师的必修课。无论是插画师,UI 设计师还是网页设计师,配色是设计中绕不开的环节。随着Materia...
ui设计
编者按:完整的 UI 设计流程到底是怎样的?从需求到产品上线,要经历多少个阶段,每个阶段有哪些应该掌握的基础知识,本次优...
ui设计
作为一名在互联网行业摸爬滚打好多年的一位 UI 设计师,也在团队里带过众多 UI 设计师和实习生,所以深刻认识到无论于团队还...
UI