赞助商
立即赞助

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

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

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

亲密性

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

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

按照亲密性原则,信息内容应该是一个整体,他们之间的关系更加亲密,所以它们之间的内间距(蓝色),应该是小于它们与卡片的外间距(红色):

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

如果,我们把间距颠倒,效果就会变成这样:

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

是不是有点奇怪!

其实在做图标的时候,有时也会用到这个知识点,比如之前看到一位星友做的删除图标,效果如下:

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

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

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

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

如果这个案例不够明显,咱们再整一个更明显的,我们在做“笔记本“、“目录“图标的时候,有时候会做成一个矩形,然后里面加几条线:

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

这几条线的内间距是不是应该小于它们与矩形的外间距,比如这样:

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

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

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

这回很明显了吧!内部东西太散,导致整体不够精致。

其实仔细观察,这个图标例子和刚才那个排版的例子完全是一回事:

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

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

很重要,大家一定要多多理解实践!

密集节奏

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

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

但是当星友临摹后,效果如下:

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

我们抛开饱满度不谈,就在密集度这一块,这个地方离的太近:

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

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

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

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

是不是这两个地方都太密集了:

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

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

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

人家这节奏感就好很多。

再举个例子,这组图标:

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

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

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

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

这就是大家经常犯的一个密集节奏的问题,大家多多注意。

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

欢迎关注作者的微信公众号:「菜心设计铺」

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

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

相关文章

重复图案在我们的大自然中可以说是很常见了,比如说蜜蜂的蜂巢、斑马的纹路再或者是蟒蛇的鳞片。多年以来,很多的设计师们也...
图案
前一篇文章《从零开始学!B 端产品图标绘制指南(创意篇)》跟大家分享了图标设计的创意阶段,今天继续第二篇,总结营造高级...
B端产品
在业务迭代周期内,产品经理和设计师对要做的产品需求和功能点进行需求分析和设计讨论的过程中,有时会出现一些拿捏不定的设...
可用性测试
本文从面的定义、面的形态、面的作用 3 个方面为你详细解析面的构成,附一个实战案例让你理解更深入。 欢迎关...
平面构成
对于每个网页设计师而言,在设计过程中总会碰到需要作出设计决策的时候。也许你的公司并没有全职设计师,而需求上则要求设计...
ui设计
从少年到大叔,只用了5年,还记得我刚入职的第一份工作的导师和我说:「设计没有什么捷径,有的只是多看、多想、多做,逻辑思...
ui设计
“几何构图”是版面设计元素根据几何形态来组织视觉语言、构建画面,形成一个人为的视觉空间,让视觉元素布局更有章法,传达出...
几何构图
编者按:一套 UI 界面当中,核心的 APP 图标是用户每天都要接触、经常使用的视觉组件和交互对象。设计图标的时候,要用到大家...
Tubik Studio