今天是 搜索
我要找人设计

设计排版如何打造节奏感?高手告诉你啥是节奏

2019-12-06 12:18 发布 

加入专辑
设计文章资讯 / 举报
本作品由会员 DO22G 发布,如侵犯了您的版权请与设友网官方联系
[作者 DO22G 的] 广告
[comiis_subject]
  • [comiis_views]人浏览[comiis_user] 发布于[comiis_time]

我们在做设计的时候总是会听到,要注意「节奏感」。关于节奏感这个词,大多数人似懂非懂,可能明白它是什么意思,但是在设计中都应该注意哪些节奏感,却还没有一个比较清晰的思路。我们都知道音乐是有不同种类的,有古典音乐,有摇滚音乐等,它们之间的不同,很多时候是节奏给我们带来的感受不同。在设计上也是一样的,掌握节奏感就能控制画面的变化和气质的传达。

什么是节奏感

先理解什么是节奏感。

144G25b2-0.gif.jpg

我们常说的生活节奏,可以理解为,假如你在规定时间里,你只需要上班和回家两点一线的生活。

144G21357-1.gif.jpg

但是当你有了孩子还要去幼儿园接送,晚上还要去健身等,这样就是生活节奏加快了。

144G23R3-2.gif.jpg

我们常听到的节奏感其实是来源于音乐的。

不同节奏感的音乐会给人不同的感受,就像音乐1这种,会给你一种平静舒缓的感觉。音乐2这种就会有种比较喧闹、比较活泼的感觉。

144G244H-3.jpg.jpg

说到设计的中的节奏感,从绘画里也可以看出,这是吴冠中的绘画作品,看似很简单的画面,但是这种水流的蜿蜒的感觉让这个画面变得灵动起来。

144G22308-4.jpg.jpg

去掉这些流动的线之后,整个画面就变得很平静了。失去了那种蜿蜒流潺的感觉。

144G24S0-5.gif.jpg

在我们很多图像网站里都用了这种瀑布流的方式,不仅是为了方便不同尺寸的图片的载入,在很多时候这种方式,相对于平铺的图片放置会更让人舒服而不枯燥。

节奏与韵律

在平面设计里,我们在学习平面构成的时候节奏与韵律是常常放在一起说的。

144G250B-6.jpg.jpg

我们可以看海报去理解,第一张海报那几条鱼摆放的位置是没什么规律的,但是它却能形成节奏感。那么在第二张海报,我们能清晰地感受到它的节奏与韵律的变化。所以节奏是有规律或者无规律的变化的,韵律是有规律的变化的。

144G2O59-7.jpg.jpg

包括去百度百科查找相关信息也是表达类似这样的意思。

144G26443-8.jpg.jpg

一个版面里的节奏影响是多方向面的,有文字编排、色彩搭配、图像处理等。

文字编排

今天我们要讲的是文字编排里的节奏感。在文字编排上我们为什么要掌握节奏感呢?

144G22430-9.jpg.jpg

我们在看一些纯文字的书籍的时候,很容易犯困。

144G25120-10.jpg.jpg

这就是因为书籍的文字编排几乎没有节奏感,所以相对来说是枯燥的。

144G22309-11.jpg.jpg

有一些不同的书籍设计或者杂志会在里面加入图片、对文字与版式进行处理,使它们变得有变化性,就会调节这种节奏感。让画面阅读不再枯燥。当然了,画面左边是因为大量的信息的传达不适合做过多的变化,否则阅读过程会有阻碍。这也是根据不同种类的信息从而把握不同节奏感的结果。

144G244J-12.jpg.jpg

所以在这个画面里标题是节奏感比较强的,在保证阅读性的同时也做到了装饰性。那么由于下方信息量比较多,这些文字又需要被快速传达,所以这些文字的编排就会趋向于阅读性。

144G2D18-13.jpg.jpg

掌握文字编排的节奏感对画面传达的气质的影响是非常大的。就像这两张海报,它们的背景图片气质是很像的,都是天空的大留白,但是,完全不同的文字编排,就让第一张海报表现出活泼可爱的感觉,第二张海报表现出平静安静的感觉。

144G23108-14.gif.jpg

我们可以理解为,随着几乎没有节奏感到节奏感比较弱再到节奏感强,它的画面是可以呈现出由静止到舒缓再到动感的。

144G22A2-15.jpg.jpg

在文字编排中有非常多的对比,是一个非常大的系统,今天我们主要去梳理一下文字编排时的一些影响因素,以及在文字编排上一些需要注意的细节。(我们今天会讲这些影响我们文字编排的节奏感,字体种类、大小、长短、位置、疏密、颜色、组合形状和方向。)

1. 字体种类

144G251N-16.jpg.jpg

文字种类就是我们对文字的类别进行分类,在字体种类里一般分成了衬线体与非衬线体,但是在中文里,我觉得主要由这五大类组成,分别是黑体,宋体,楷体,圆体与书法体。

144G22Q7-17.jpg.jpg

包括字体家族里的不同字重。

144G2F21-18.jpg.jpg

不仅是这样,对于同一个字体我们还分常规体、窄体、扁体。

144G23192-19.jpg.jpg

一段文字只选择上面的所说的变化就已经可以有很多种了。我拿了一段数学公式装❌。这里我们算出有 105 种。所以文字编排时稍微不注意就会有太多的变化性。

144G24b7-20.jpg.jpg

更何况我们经常在版面里加入其他国家语言的文字,这些都会影响文字的节奏感。

144G21033-21.jpg.jpg

所以我们要学会控制这种节奏感,一般来说我们日常比较常用的就是黑体配无衬线体,宋体配衬线体。并且在字重上我们都要注意协调。尽量使它们看一起是一样的粗细度。

144G22951-22.jpg.jpg

不同的字体搭配起来是有一定难度的。这种节奏感就好像不同风格的音乐的结合,它们之间的衔接与融合会比单纯的某一种风格的音乐制作起来更难。

144G21414-23.jpg.jpg

这种不同类型的文字的搭配,对于排版和运用的能力有一定要求,运用不好就会传达不了画面的气质与信息。在电商里的反例是比较多的。在我看到的这张图里,它同时用了无衬线体与衬线体的结合,画面没有清晰呈现出准确的气质。大家可能会说它是简约高贵风,但是这是一个大范围,在简约高贵里有现代的高贵,有复古的高贵,还有一些与众不同的高贵等。

144G2H55-24.jpg.jpg

我们尝试把左边的衬线体换成无衬线看看。是不是有种现代都市的气质?

144G244L-25.jpg.jpg

如果都统一成衬线的话,是不是一种精致的时尚感就出来了呢。统一这种文字的种类能更加精准地传达画面的气质。

144G25O1-26.jpg.jpg

刚刚我们也说到字体的混搭会产生混乱和怪异感,要慎用,但是如果我们的画画就需要这种感觉呢,当然就可以用这种特性来故意营造一种怪异感,当画面的字体种类越多的时候,所营造出来的节奏感会更强烈。

144G2N95-27.jpg.jpg

我们看这个画面也是这样的,周围的很多图形和各种各种样的字体类型让这个画面变得搞怪活泼。

144G2L45-28.jpg.jpg

就算去掉了周围的图形,文字这传达出来的搞怪感觉也依然存在。

144G24419-29.jpg.jpg

接下来我们用这个文案来做一个案例演示下,由于平时很多都是用同一种类型字体搭配,那么这一次就挑战一下,我就打算做一稿用不同类型字体的版面。看看会有什么样的效果。

144G26112-30.gif.jpg

首先我在版面中划分版块,填上相应的文字,在这里可以看到,我同时用了衬线与无衬线的字体,还用了具有手写性质的字体。不仅如此, 所有的文字我都用了窄体而不是常见的常规体来增强这种怪异的节奏感。

144G24603-31.jpg.jpg

最后加上一些图形处理一下负空间,这个案例就完成了。

144G223D-32.jpg.jpg

为了减少影响,我把图片遮住单看文字组,我把这些字体都变成黑体了,对比可以发现,还是原来的文字组更有搞怪奇异的节奏感。右边这个因为板式与图形的完整性使得它看起来并没有很大的问题,但是它的确是缺少了像左边这种古典与现代结合的节奏感。

2. 大小

144G24a3-33.jpg.jpg

文字的大小节奏可能会有人理解为这样,但是我们一般不会这么做。

144G23336-34.jpg.jpg

我们更多地是用在标题与内文的对比。

144G21453-35.jpg.jpg

节奏变化比较大的文字组会给人一种冲击力,让人无法忽视标题的存在,就好像我在大声告诉你一句话的感觉,会比较强硬与喧闹。

144G223X-36.jpg.jpg

节奏比较平缓的文字组表现出一种精致、安静的感觉。

144G2J35-37.jpg.jpg

我们把它们放到画面里看下,这个标题与内文的对比很大,并且在这个版面中占据一定的大小,这种时候有没有觉得这个画面呈现出一种,好像在播放新闻的感觉,好像在说这个小岛有什么重大新闻一样。

144G24093-38.jpg.jpg

但是当标题变小时,整个画面呈现出比较平缓的节奏感,很符合画面传达出来的安静舒缓的感觉。

144G24O4-39.jpg.jpg

这种方式很多作品都有,这种标题和内文的对比,或者说是文字在版面的占比比较大时,就可以体现出这种很强烈的节奏,让人很难忽视这些文字内容。同时画面也更容易传达出一种力量感。

144G25104-40.jpg.jpg

往往想要营造这种安静感的时候,比较注重画面整体的感觉,就不需要太多的文字变化,甚至为了区别文字层级而需要有的文字大小,也尽量地在减少对比。

3. 长短

144G2L58-41.jpg.jpg

我们都知道音频都是这种长短不一的声波图,因为这种长短不一的变化感受会给人带来节奏感。

144G21392-42.jpg.jpg

所以也有以这种形式来编排文字,表现节奏感的系列广告作品。

144G242c-43.jpg.jpg

它比较经常出现在居中对齐的文字组上。

144G25R2-44.jpg.jpg

但是我们要注意的是,你会发现很少情况在两个极端之间直接过度,比如说一长一短。

144G23153-45.jpg.jpg

在没有文字大小的对比情况下,如果文字的长短对比太小,我们先不说节奏感,我们可能会有种疑问,它到底是想两端对齐还是居中对齐的呢?所以这种两端模棱两可的情况最好避免。不能模棱两可,对比太大又会不够美观,所以我们去创造节奏感的时候要注意这些问题。

144G21G3-46.jpg.jpg

毕竟它不是让人阅读时间很长的文字,所以我们就需要调节这种节奏让它看起来美观而且不枯燥。

144G23A2-47.jpg.jpg

这是我随便在购物网站截图的,你会发现它们的文字编排都很注意我刚刚说的短长短的节奏感。

4. 位置

144G2K40-48.jpg.jpg

我找了两张都是黑色背景并且配图比例也差不多的海报作对比说明这个问题。

144G21950-49.jpg.jpg

因为图像的干扰我就同时去掉了图片,还有也把右边红色的字变成了白色,它们之间的对比变得清晰了,左边的文字规划在版面中显得更有活力,右边版面的文字集中在一块,就像我们前面提到的小说书籍内页一样。这样的文字编排在阅读上会比左边的缺少节奏感。但是我在这里要说的一点是,左边海报本身的图像没有右边的有冲击力与活力,所以我们如果要真正做对比的话。

144G22W8-50.jpg.jpg

用左边的图像放置在两个不同的版面来作对比,这样大家应该能感觉到差别。左边的版面虽然没有表现特别强的节奏感觉,但是至少版面不是特别压抑的。至于右边的我们会觉得很沉静,配合这种黑色的背景比左边更压抑。这就是文字编排在版面的影响。

144G2L39-51.jpg.jpg

不仅是文字组之间,标题的有意放置不同的位置就可以营造这种节奏感,是因为它依然可以使得我们的阅读视线发生变化。

144G24449-52.jpg.jpg

比较随意编排的文字组也会比,比较拘谨正式的文字组看起来更有节奏、更活泼。

144G25443-53.jpg.jpg

接下来我们用案例来演示。

144G2DY-54.jpg.jpg

首先选择纤细的宋体会比较符合这个画面的气质,很多人可能把文字组放在画面四个角就算大功告成了,但是这个画面既没有一个亮点吸引我们,而且画面里的元素都非常得散,没有体现出一点活泼的味道。

144G2NY-55.gif.jpg

这个时候我们可以效仿刚刚我们看到的标题的做法,拉开距离,调整位置让它有上下浮动的节奏感,包括文字上我都做了一些切割移动让它们活泼,再加上线条让它们更有联系感。这个画面就会比刚刚活泼多了。

144G210E-56.jpg.jpg

案例完成。

5. 疏密

144G24L1-57.jpg.jpg

左边紧凑的文字字距会呈现出一种张力,一种急促的节奏,营造一种紧张感。右边宽松的字距画面会更缓和,不同的字距在版面中有宽松对比,也营造出了一种节奏对比。不会感到枯燥。

144G210V-58.jpg.jpg

144G22B1-59.jpg.jpg

很多人可能没太去注意这些文字编排的小细节,这两版里哪一个更符合平缓的节奏感呢?答案是下面这个。第一张这样做也没错的,但是我们想让文字也能相应地呈现出一种透气感的话,第二张的会更加符合。

6. 颜色

144G24361-60.jpg.jpg

颜色的问题大家应该了解了很多了,这里就简单提一下,就像我们在营造一种氛围的时候选择的气球颜色都是非常重要的,我们选择饱和度比较高,颜色种类比较多的气球的时候,是想营造一种热闹活泼的感觉的。但是如果想营造一种浪漫安静的氛围时就用了很多白色或者淡色调的颜色。

144G21b8-61.jpg.jpg

就像这个 banner 一样,中间不同颜色的文字为这个画面增加了很强的节奏感。变得很活泼。

144G2I33-62.jpg.jpg

很多时候我们不需要太强的节奏感,所以我们经常给文字做一点的颜色变化,来让画面更鲜活。就像这个 banner,如果它没有了左边那个粉色的颜色的跳跃。

144G25W9-63.jpg.jpg

这个画面就会变得很沉静。

144G21300-64.jpg.jpg

如果,画面文字的粉色变多,它的节奏感又会变得更强。

144G260I-65.jpg.jpg

不仅是因为这个颜色本身的跳跃性比较高,而且也是因为颜色的不停切换导致这种节奏感的增强。所以不同颜色的占比也是需要考虑的。在这里主要是因为模特身上没有玫红色,所以左边不适合用过多的玫红色,用全黑都会显得很沉闷,所以这里选择用一次玫红色让这个画面鲜活。

6. 组合形状

144G23L8-66.gif.jpg

我们在这些变化的图形中替换两个不同形状的图形,我们可以感觉到替换后的图形里的变化会更多,呈现出来的活泼性更强了。当画面中的不同形状更多,就会趋向于一种混乱。

144G23322-67.jpg.jpg

144G24953-68.jpg.jpg

用不同的图形在版面里,有区分不同信息的作用,但是这种方式也是增加版面节奏感的一种方式。在很多促销的传单会经常看到。

144G2BI-69.jpg.jpg

这个画面没有人物图片,仅仅是通过文字的编排就能传达出这种热闹的节奏感。

144G250H-70.jpg.jpg

除了颜色本身的热闹性,其中比较大的影响因素。就是文字在各种不同形状里的编排,让这个画面呈现出热闹的氛围。

7. 方向

144G2H57-71.jpg.jpg

144G24U9-72.jpg.jpg

144G23343-73.jpg.jpg

随着方向变化越来越多,画面会趋向于更有动感的的节奏。但是节奏感觉也是有度的,一旦变化性很多,那么这个版面就会显得杂乱。我们也可以简单理解为乱的元素的占比决定着你画面呈现出来的节奏感的强烈。

144G2A36-74.jpg.jpg

像第一张海报一样,这种有点古老的作品我们一般会认为是比较正式和比较严肃的,但是这些方向不一的文字编排,向我们说明了这不是一个严肃的展览,而是具有活泼的属性,从而吸引不同的观看群体。包括右边这个海报的文字编排都让这个画面的节奏感变得更强了,与人物夸张的肢体语言也相呼应。

144G23259-75.jpg.jpg

倾斜的文字编排在电商里是出现得比较多的,微微倾斜文字就可以强调这种活泼的节奏感。

144G23630-76.jpg.jpg

我们来看一个比较明显的例子,画面只有一个黄色的色块和文字编排以及一个不规则的图形,但是这个画面呈现出来的感觉却很活泼。

144G25526-77.jpg.jpg

其实去掉这图形,也并没有影响原有的气质,是因为文字的编排的方向性的对比让它的节奏感增强了。

7. 案例演示

144G239C-78.jpg.jpg

那么说到这里其实今天的内容也就结束了,这次的案例就给大家演示下怎么用这些知识去做一张海报。

144G21436-79.jpg.jpg

首先我们要分析这个画面,图片本身是比较具有节奏感的,因为不是我们平常看的袜子的视角,而且人物有一种运动过程的动势。

144G2N22-80.jpg.jpg

这个负空间非常不规则,如果文字在这个画面负空间上直接加字的话,可能就会显得比较乱,但是我们又要做出迎合这个图片的节奏但是不乱的画面,应该怎么做呢?

144G23J6-81.gif.jpg

首先不采取直接在图上加字的方式,把图片缩小,再添加一个深色的底色,这样这张图片和这个画面里就是一个整体了。

144G2ND-82.jpg.jpg

由于我们要压住图片的节奏感,不让它太乱,所以我在周围的空间编排文字是呈现一个既有文字层级关系,但是整体是呈现矩形的文字组。现在这个画面看起来的确不会乱,但是文字还是少了和图片活泼气质契合的节奏感。

144G25141-83.jpg.jpg

分析一下这个画面,是宇宙系列的感觉,所以我就加入了环形的文字,然后再加一点与图片呼应的颜色。这个画面就会比之前更和谐。在做的过程通过减少变化与增加变化让画面逐渐接近自己的预期。

总结一下今天我们讲的,我们今天讲的是文字编排中的节奏感,在一开始,我分别给大家讲了从生活节奏、音乐节奏、再到设计的节奏去理解什么是节奏感,然后我还讲了关于文字节奏感对于画面的重要性,无论是对信息的传达还是对气质的表现,它的影响是非常大的。最主要的部分,我讲了影响文字编排的节奏都有哪些因素,比如文字类型、大小、方向、长短、文字组合形态等。把握自己要传达的节奏,才能正确传达信息。大家也可以用这种方式去看作品,分析它的节奏感是通过什么方式形成的。久而久之,对节奏感的掌握就会更加熟练与精准。

B Color Smilies
设友网
[5推广币/天] 购买
设计师论坛
[2推广币/天] 购买
设计师联盟
[2推广币/天] 购买
设计排版如何打造节奏感?高手告诉你啥是节奏 
[2推广币/天] 购买
快速回复 返回顶部 返回列表