赞助商
立即赞助

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

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

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

亲密性

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

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

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

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

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

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

是不是有点奇怪!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

密集节奏

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

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

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

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

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

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

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

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

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

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

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

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

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

家这节奏感好很多。

举个例子,组图标:

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

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

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

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

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

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

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

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

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

相关文章

@途家UED :如何把控图标设计的风格,在什么场景该如何应用,本篇文章就为大家解决这些问题。 什么是图标 图标的功能分类 ...
入门
现如今,我们的日常生活和各种各样的APP密不可分。常用的诸如日历、计算器、待办事项列表辅助我们管理生活中的各种事物,不同...
APP UI
今天又带来一篇十足的干货,安全无毒,放心食用! 今个儿,咱来唠嗑唠嗑「图版率」! 下面俩海报,哪个更有亲和力? 这还...
图版率
上回,咱说完了文字跳跃率,今个儿,咱就来说道说道图片跳跃率。 说道之前,咱照例还是先来看俩问题。 下面俩版式,哪个给人...
图片跳跃率
2020年过去了,有很多事情都停滞不前,不过设计工具和软件依然在研发人员的努力之下,照常稳定推进更新。对于整个 UI/UX 行业...
ui设计
风筝KK:列表想必大家都不陌生,那么小按钮列表有什么值得研究的?比如按钮该如何摆放?列表图片尺寸如何设定?产品信息和图...
ui设计
本文总结了纸张的8个实用知识点,包括纸张原材料种类、特性、白度、光泽度、油墨吸收性、平滑度、定量和基重、以及印刷适性等...
印刷设计
橙子的橙子:记得刚开始学美术的时候,都是从临摹开始的,等到一定的阶段才开始写生,照着实物画。这个过程根据个人能力有长...
ui设计