长城上的猫

俄文艺理论家车尔尼雪夫斯基在《艺术对现实的审美关系》中说到:“艺术来源于生活,却又高于生活”,那么现在不禁会有人提出问题:设计中会不会也存在节奏感?又是怎么体现和运用的?

希望今天这边文章,能帮你弄清楚这些。

 

图片

首先明确一点:小到元素使用,大到页面布局,设计中同样也是存在节奏感的,在说设计中的节奏感如何体现之前,我们先来回顾以下对比。

图片

 

对于节奏定义是这样的:自然界或人文艺术界因变化而丰富进化,在包括高度、宽度、深度、时间等多维空间内的有规律或无规律的阶段性变化简称节奏。

 

比如我们学生时代写作文时,先扬后抑或先抑后扬的手法都很实用,一篇好的作文要有叙述、有例子、有感触、有抒情。

通篇抒情或通篇叙事都不太好,这其实就是在强调一种写作上的节奏感。

图片

 

我们都知道过于统一的画面会给人无趣、缺少层次、甚至呆板的视觉感受,所以这时候我们就需要打破呆板、营造层次感,让画面富有律动、有变化。

设计中的节奏感,很大程度上是可以通过对比的方式来体现,但这两者也是有一定区别的,节奏感大多数情况下更加强调整体,而对比则更偏向局部。

那么如何运用到设计中呢?

 

图片

在设计中节奏感可以理解为感官上规律或不规律的变化。所以想要做出优秀的设计作品,我们需要去营造视觉上的节奏变化,否则就会有过于统一的问题就会再次出现。

好了,接下来我们就说说节奏感是如何体现在文字排版中的。

 

说到节奏感,我们首先想到的就是音乐,听觉感官上最直观的感受就是动次打次~动次打次~快与慢、轻与重之间的变化,这就形成了听觉上的节奏。

下面再说回设计。

文字编排能力是设计师的必修课,文字既是商业设计中不可或缺的信息元素,它是用户最直观获取关键信息的方式;又是画面中非常重要的设计元素,提升画面整体的设计感。

看似简单的文字,不同的排版形式会改变作品给人的视觉感受,往往一些整体不错的作品,最终会毁在了文字排版上。

想要做好文字排版,其节奏感也是很重要的,下面我们举个例子:

图片

 

如果把上图中的线条看做简单的文字编排的话,这两者给你最直观的视觉感受是什么?

左侧给人的感受就是是工整、严谨,但这在设计中很容易就会让画面显得枯燥乏味、缺少层次感;而右侧则在视觉上相对富有跳跃性、节奏感。

提问:在文字排版中,为什么我们经常会用到点线面的知识?

结合今天的所说的,答案很明显:为了让文字编排在视觉上更丰富有层次、提升作品的出彩度,避免因排版过于简单、统一使得作品整体枯燥乏味。

下面我们看个案例,能更助于大家理解:

图片

如上图案例所示,很显然左侧是不可取的,在设计工作中我们都不会这么做。

而右侧在我们工作中是用到最多的,在兼顾可读性的前提下文案主次分明,视觉上更有逻辑和节奏感、并且在点线面知识理论的加持下,让简单的文字编排变得更有设计感、也更吸引眼球。

 

所以说文字编排也是有节奏感而言的,当我们清楚这一点之后,文字排版就不会那么难了,现在我们趁热打铁,再分析几个案例:

图片图片
图片

 

我将案例中的文字排版部分单独抽离出来,将文案替换成线条,就做成了如上的示意图。

通过上图我们不难发现,每个作品中的文字排版在视觉表现上都很丰富、有层次感,通过区别文字的大小、粗细、字体形态、文案长短等等,使得文案有主有次,视觉上有轻重之分,这就是排版中的节奏感。

有节奏感的排版既能起到传达信息的作用,又能丰富整个画面,提升设计感,所以设计中不要一味的追求统一感,越是统一就越难把控,在视觉表现上就越容易犯错。

接下来我们再说说页面设计! 

 

图片

页面设计相对来说篇幅更长,比如我们工作中常做的:首页、详情页、H5页面、活动页等等,都属于页面设计的范畴。

相比而言,网页设计对整体性要求更高。

这一点区别于海报设计,拿电商详情页来说,我们可以将每一屏都当做一张海报来制作,但这并不意味着每张都出彩的海报组合起来就是一款优秀的详情页。

其中还要考虑每一屏之间的衔接、串联、区别、视觉层次、主次等等,这就是为什么有些人做海报还不错,一做页面就出问题的原因。

那么在网页设计中,有没有所谓的节奏感而言呢?下面我们看个案例:

图片
图片
图片
图片
图片
图片

图片

 

我们做了一个简易的示意图,将详情页中的模块用色块对应起来,通过色块颜色的深浅来对应详情页中每个模块的视觉轻重,而色块高度对应模块高度。

下面做个简单的整理,看的更直观一些:

图片

 

通过示意图我们不难发现:色块有深有浅、有长有短,不是完全统一的。

这就等于在视觉上形成了一定的变化和反差,而色块之间的变化也对应了详情页模块之间不同的视觉权重,那么整体的层次感就有了。

 

趁热打铁,再分析个案例:

图片
图片
图片
图片
图片

图片

 

上图示意图也是通过色彩属性的差异一一对应的,为了看的更直观,整理了一个如下竖型图:

图片

 

所以你会发现,类似上述布局的页面在视觉上丝毫没有枯燥、乏味的感觉,这就是页面设计中的节奏感。

缺少节奏感的页面,就如同水平如镜的海面,过于单调平淡很容易造成视觉疲劳,所以我们需要适当的给海面加点浪花,从而避免这种现象出现。

图片

 

这时候该有人问了:如果页面整体都是黑色、或者重色、轻色,那是不是就没有节奏感而言了?

当然不是!

页面布局的节奏和色彩没有必然关系,而是跟视觉感受有关系,上面案例中最直观的视觉反差是轻重色的区别,我们就依此为出发点,但这只是衡量视觉变化的一个因素而已。

影响页面视觉节奏变化的因素有很多种,哪个因素最直观的影响视觉感受,我们就以它为衡量标准。

最常用的就是利用色彩属性划分,比如:轻色与重色、有彩色与无彩色、不同色相等等。

而当色彩属性相似时,我们依然可通过其他因素划分,比如:模块的高矮、画面的简易和复杂、视觉停留时间长短等等。

页面视觉节奏的变化在一定程度可以理解为模块之间的对比,营造视觉反差。只不过这里更要兼顾整体、全局化考虑。

 

这里需要强调一个误区:就是过于有规律反而会让整体丧失节奏感,举个简单的例子:

图片

如图所示,过于规律的变化反而容易视觉疲劳,让人感觉单调无趣,这一点对于页面设计来说非常重要。

这时候再去看一些优秀的网页作品时,尝试分析他们的结构布局:

图片

 

现在你能看懂这两个页面整体布局的用意吗?

 

图片

所以在设计中也是需要有节奏感的,小到文字编排,大到网页布局,节奏感总是在无形中影响着我们的作品。

正如文章中说到的一样:对于页面设计来说,每一个模块单独做的很出彩,串联成一个页面未必就是优秀作品,这就是忽略节奏感所导致的,总结一句话:局部看细节,整体看节奏!

现在你可以找些优秀的案例自己验证一下,更能加深记忆和理解。

 

原文地址:美工美邦(公众号)

作者:张家彬

图片

 

转载请注明:学UI网 » 缺少节奏感的设计,真的很“呆”!

登录收藏
 
你可能喜欢的:
单色配色你真的会用吗?(实操篇)单色配色你真的会用吗?(实操篇)
不做素材搬运工,一样能做好中秋海报设计!!不做素材搬运工,一样能做好中秋海报设计!!
中秋节排版设计这样做,真出效果!!中秋节排版设计这样做,真出效果!!
海报标题设计没思路?这样搭配元素真出效果!!海报标题设计没思路?这样搭配元素真出效果!!
文本设计的小诀窍文本设计的小诀窍
插画欣赏:前路漫漫插画欣赏:前路漫漫
这些“圆体”排版方法真不错!拿来吧你!这些“圆体”排版方法真不错!拿来吧你!
每天都在用的“黑体”,原来这么排版才好看!每天都在用的“黑体”,原来这么排版才好看!
如何排版更高级?带你重新认识宋体字排版!如何排版更高级?带你重新认识宋体字排版!
没想到学会这套方法论,定义视觉风格能这么快没想到学会这套方法论,定义视觉风格能这么快