关于“节奏感”这个词,大家应该经常听说,不论是音乐,还是画面的设计,我们都喜欢用“要有节奏感”来形容,最近我发现图标设计也需要“节奏感”。

今天的大纲如下:

  • 什么是节奏感
  • 粗细的节奏感
  • 长短的节奏感
  • 疏密的节奏感
  • 总结

什么是节奏感

其实节奏感有很多种,比如大小的节奏,粗细的节奏,长短的节奏等等

举个例子:

用超简单的案例,聊聊图标设计的节奏感

这张图片,色块的宽度是 100px,A # o K E 2 I ! e而色块之间的间距也是 100px,这就使f a { l得整个画面很平均,没有节奏感!

而下图就不一样了:

用超简单的案例,聊聊图标设计的节奏感

色块的宽度是 100px,但色块之间的间距变成了 50px,这就使得整V H J个画面增加了一些节奏,变得稍微活泼一些。

其实不论人的视觉还是听觉,都一样,都需要刺激,而节奏感就能达到刺激的效果,接下来我们就用实际案例看看,图标设计是如# q & \ / \ ] x何利用这个设计细节的!

粗细的节奏感

在实际的图标设计上面,这个B b ` j c = –知识点是如何运用的呢?

我们来举个例子,如下图:

用超简单的案例,聊聊图标设计的节奏感

我们可以看出来,白z , m [ K { I ]色矩形的宽度是 19px,T Z @而白色矩形之间的间距是 3px,+ _ 4 V m 8 , a二者形成一定的对比、节奏感,使整个图标看着舒D D $ \ p服很多。

那如果两个粗P ^ U s细一样会Q N Z t 3 U & R J是什么} E \ v 0 z感觉呢?看下图:

用超简单的案例,聊聊图标设计的节奏感

是不是平庸很多,而且图标看着很散。

再看个例子,我们看下图:

用超简单的案例,聊聊图标设计的节奏感

左面的是国内一个知名 app 内的“更多”图标,右面是谷歌 inbox 内的“更多”图标,也不能说谁好谁坏,我们只能说客观来讲,右边的间距符合“节奏感”的规律,如果是3 m o 4 T我来执行这个图标,我会用右边的方法来做,让线条粗细和线条间距不一样) J = m g w T ;,形成对比、节奏感。

但是,我们也不能拿几个例e z ? L 9 ( | $子就覆盖所有场景,还是得具体情况具体分析哈。

长短的节奏感

长短的节奏感大家应该最熟悉,我们在看听音乐的时候,前面的音乐一半都很平,频率变化的就会很缓慢,一道高潮部分,变化就会很大,很有节奏感了。

例如苹果B y y Q A 7 * X手机中的语音备忘录图标:

用超简单的案例,聊聊图标设计的节奏感

高的线条很高,短的线条又很短,形成很强节奏感,如果二者区分不明显会是什么样子呢?

对,就是下面这样:

用超简单的案例,聊聊图标设计的节奏感

看起来对比不够,总感觉没伸展开,没有美感与设计感,也就是没做到位!

疏密的节奏感

图标疏密也一定要有节奏感,而且很重要,不然真的会很难看。

比如下面这几个从网上找到的图标,其他^ ) v – H S几个疏密的变化都还比较舒服,突然第四个中下部那里就比较拥挤,导致疏密的节奏感不够和谐统一:

用超简单的案例,聊聊图标设计的节奏感

疏密的节奏感是比较容易被大^ | 1 [ Z # /家忽视的,一旦忽视,就会看不清问题,总感觉整体不够舒服,但是又不知道问题出在哪里,所以这个点一定要重视。O \ L N

总结

当知道这种节奏、对比的原理之后,我们会发现,很多图标的设计当中有含有这个原理,随便举个最简单的( I t例子,比如手机导航栏上面的K t N [ ] R这两个图标:

用超简单的案例,聊聊图标设计的节奏感

都会多少带有节奏感的知识点,大家可以多多观察,发现更多新的感悟,互相交流。

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

用超简单的案例,聊聊图标设计的节奏感

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注