欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

掌握图标设计密集聚拢技巧1:亲密性原则详解

最编程 2024-02-20 11:13:28
...

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

avatar

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

avatar

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

avatar

是不是有点奇怪!

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

avatar

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

avatar

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

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

avatar

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

avatar

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

avatar

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

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

avatar

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

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