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

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

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

亲密性

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

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

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

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

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

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

是不是有点奇怪!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

密集节奏

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

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

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

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

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

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

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

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

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

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

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

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

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

家这节奏感好很多。

举个例子,组图标:

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

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

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

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

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

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

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

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

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

相关文章

QQ-自习室是一款以学习为特色,基于手机QQ平台的陪伴型多人直播产品,简单来说就是一个线上的自习室。作为疫情期间诞生的创新...
QQ自习室
编者按:这篇文章来自资深 UI设计师 Danny Sapio,他总结了日常设计过程中,使用 Figma 的一些非常快速的设计技巧,希望能帮...
Figma
目前我主要深耕于B端设计中,深知B端图标设计与C端有很大的不同,无论是应用的场景、设计的理念,都有非常大的差异,而现在网...
B端产品
写在前面 你们在日常工作中是否会有这样的思考,设计能给业务带来多大的价值?或者你从现在的工作中能够感受到多少价值?难道...
ui设计
最近发现有很多童鞋关心如何从UI进阶到UX的问题。那么我以一个非科班出身的UI到大厂资深UX的经历,不带黑话用4k字作文给大家...
ui设计
为iPhone X进行UI设计的时候,和以往截然不同的屏幕和交互方式,会使得UI设计师面临一些全新的挑战。当然,全新的设计,在很...
iPhone
很高兴你能打开标题,进来阅读这篇关于桌面应用设计的文章。 阅读过我前两篇文章的朋友可以看出那两篇其实分享的是交互设计...
GUI
图标在产品中的应用非常重要,不同位置的图标有不同的设计思路。本文将从产品和设计两个角度对底部导航栏的图标进行分析。阅...
ui设计