无论趋势怎么变，掌握这些设计节奏就不怕过时！

孟菲斯设计、鬼畜视频、神曲电音、魔性画风、freestyle......看似毫无关联，在我看来却有一个共同的特性——那就是节奏。接下来我就来聊聊节奏，有不当之处还望指正～

鉴于本文干货太多，梳理的目录如下：

• 结构的节奏
• 形状的节奏
• 颜色的节奏
• 动静的节奏
• 留白的节奏

项目中的节奏

• 项目1巨幕广告
• 项目2如意贴

前言

“有freestyle吗？”“你们一人来一段freestyle”“你有freestyle吗？”......

“开门呐！开门呐！开门开门开门呐！”.......

重复几遍，就形成了一种流行节奏，现在的世界是一个多元的包容的世界。每个人都有不同的style，就像你说“睡什么睡出来high”，他却喜欢静静地宅着玩一把王者......跟节奏一致的人相处会很愉悦，而节奏相悖的人需要磨合。同一个事物见仁见智，但我们都习惯用自己的经历和经验去看待事物，学院派也好，野路子也好，雅俗共赏，我想寻找的是一种相对理性的设计理论，属于我们共有的经历和经验，那些潜移默化对我们的影响，暂时定义为节奏。

从进化论的角度而言，人们对节奏的认知，最初来源于大自然的规律，以及新陈代谢的生物作息。随着人类模仿大自然、劳作协调动作的声音、发展了音乐、诗歌、卦象、绘画…所以广义上而言，节奏包含世间万事万物，但狭义上大家理解的节奏可能是一个节拍、一首歌的曲调。

就像耳熟能详的节奏有“嘣恰恰、嘣恰恰”和“咚次哒次”，我将节奏用图形化的语言来说明一下，图中从黑到灰色代表声音渐弱，竖线分割每个小节，重复小节形成一段简单的节奏，形成“强弱弱”“强弱次弱”的有规律变化，而简单的重复让人可预知、可掌控，自然而然的产生舒适感。

中国古代的《礼乐记》中说：“节奏，谓或作或止。作则奏之，止则节之。”

节奏的断连顿挫也会表达出不同的含义，如下图：

此句读来源于一段故事，有一教书先生很体谅穷苦人家，想免去穷孩子学费，但富人家则不能免，则给出同样的一段句子，只是断句不一样，便有了两种截然不同的含义，穷孩子只要青菜足矣交学费，而富人家则需要鸡／鸭、鱼／肉和青菜，可见不同的节奏传达的含义也会完全不同。

“节奏是一件艺术品所包含的各种不同要素的有秩序、有拍节的变化。” ——美国.理查德列斯拉夫斯基

我寻来莫奈的《日出印象》和梵高的《星夜》，发现日出时倒映在水平面上的平行波纹井然有序，让人瞬间感受到日出平静的氛围；星空纠结的漩涡气流，体现了动荡不安的心，而事实证明梵高当时确实已经在精神病院接受精神治疗。

不同的节奏会有完全不同的含义，也表达了不同氛围和心情，因此，我大胆给设计节奏定义为：

“为了不同设计目的，进行具有规律性、阶段性、秩序性变化的设计称之为设计节奏。”

结构的节奏

什么是有规律性、阶段性、秩序性变化的节奏呢？继续观察《日出印象》《星夜》则会发现他们都有共同的规律——结构中的疏密、大小、视觉轨迹都是设计节奏。

莫奈的《日出.印象》就是一副节奏很明显的绘画作品，太阳、船只形成稳固的三角形布局。

阳光倒影在水中的波纹，远处树林房屋的倒映，平行的从上到下、从密到疏的排列，都给人平静安详的感觉。咋看一眼可能会被太阳吸引，视线随着橙色倒影到水面（红色1～3轨迹），看到出行捕鱼的船只（黄色1～3轨迹），紧随其后的小船，引申到远处的树林（蓝色1～3轨迹），平移视线看到一大片树林。最终形成一圈连贯的视觉轨迹，营造出一副日出平静中透着欣欣向荣生生不息的景象。

与莫奈不同，梵高是公认的疯子，但也是天才，因为他在绘画的时候无比认真，从他作品中可以看出严谨的规律。天空中的黄色星星如果用线连起来，会发现它如浪花一样此起彼伏，流动的笔触按照顺时针方向有规律的排列，前景树影与后景连绵的山脉形成近大远小的连续空间感，将视野从近处树影往远处山丘无限延伸。

因此，结构中的疏密、大小、视觉轨迹等变化，可以让让画面更具张力与空间感。

设计上也通常会改变构图中物体的大小、间隔、方向渐变等的节奏来实现，从以上对比图中，可以明显看出来左图的方块、球体大小变化更有节奏，营造出一种近大远小的空间感。

例如上图骰子的大小变化，营造了空间活跃感，让物体具有魔法般的“腾空”起来。通过主题物（人）与辅助物（粉球）之间的穿插错位来产生“和旋”一样的“交响乐”，丰富画面的节奏，产生了纵深空间感，而不会误以为比例不对。

应用到网页上，最明显的就是页面结构布局设计，适当穿插的左右排列，打造起伏流畅的曲线观赏路径，仿佛细细流淌的小溪，吸引用户追本溯源不断向下滑动，同时也避免了所有信息累积在一起的压迫感。

首尾错位叠加的布局，给人一种故事开头结尾和丰富过程的完整阅读体验。可见，构图节奏能增加舒适感、缓解视觉疲劳，让画面更有起伏感。

但需要注意的是，错位构图带来的节奏是较慢的浏览式体验，并不适合快速获取信息的信息流。

信息流中过于跳跃的界面设计，让用户上下浏览的时候，很难快速定位店名、位置等信息。所以像新闻、快报等资讯类app设计都是一致的图文方向，这样更符合用户快速阅读的惯性。继续深思下去，如果要一致的图文为什么又要增加与图文不一致的三小图和大图信息呢？这不就打断了节奏吗？没错，就是故意打断阅读节奏的，为了让用户不至于长期阅读相同结构而产生视觉疲劳，但怎样的频次和节奏才是最好的呢？

构图中文字的排版也可以运用设计节奏，例如通过字体、字号、颜色、深浅、字间距、段落等的节奏变化来体现。如图将普通的文字段落，先按主次区别，改变一成不变的阅读体验，将标题与内容相呼应，将文字与背景构图融合，倾斜对齐体现文字的力度。

可见，文字的节奏能突出主次、避免大段文字的阅读压力、横纵向的阅读呼应也能有不一样的阅读体验。

形状的节奏

如果说结构的节奏是整体布局的把控，那形状的节奏就是通过形状的变化对画面所传达信息的扩展，其中最为突出的是表现在“渐变”和“聚散”两种形式。

渐变是指以类似的基本形或骨格，渐次地、循序渐进地逐步变化，呈现一种有阶段性的、调和的秩序。包括：同一个形状的颜色、大小、间隔、方向、位置的变化，也有多个形状的关联性变化。

聚散是一种特殊的重复，是基本形或骨骼单位环绕一个或多个中心点向外散开或向内集中，即爆发式（外扩形）和聚焦式（内收型）。特点：具有很强的聚焦点，这个焦点通常位于画面的中央；具有一种深邃的空间感，使所有的图形向中心集中或者由中心向四周扩散。

对比上图广告宣传banner，有聚散效果的图片氛围更热闹、丰富，也更能调动用户的购买欲望。可见，形状的节奏可以聚焦中心，使画面更具冲击力，营造隆重活跃的氛围，适合电商活动页面和商品banner展示。

颜色的节奏

颜色的节奏指的是画面中颜色明度、纯度和色相的有规律变化。提取图中背景色，通过左图纯度轴来显示色块位置，会发现它们按照一条连贯起伏的曲线渐变，这样可以让颜色的变化更自然舒适，高高低低的纯度变化营造出微妙的色彩空间感，利用红色吸引用户注意力的同时，避免高纯度的红色，增加低纯度的用色比例，控制颜色的比重让红色更显沉稳。第二张则明度上做了跳跃式选色处理，“高低低-高低”的节奏感仿佛一首欢快的歌，营造出一种青春活力氛围。

颜色的节奏不仅仅是单一颜色的节奏变化，多色的节奏更需要对颜色比重有更深刻的理解，图左就是选用了深紫色作为占比超过60%的基调色，再配上任何颜色都不会比重失调，小块几何形对比色就像酒吧的彩灯，让画面更绚丽。图右则是选用渐变色旋转过渡，由于色相本身就有不同波长，赤橙黄绿青蓝紫逐渐延伸，就像幻想空间无限循环。

提取图中颜色会发现，颜色奇妙的成为了五星型，通过互补色+对比色叠加取色的方式结合归纳的一种取色方法，它可以让画面丰富多彩，也可以让不知道用什么颜色的小伙伴，很快选择颜色。但需要注意的是一定要基调色稳住场面，上图就是深紫色“压住”全场，让其他亮色尽显活力。放射型则通过颜色的深浅变化，过渡到不同色相，让原本“突兀”的颜色也能和谐相处。

可见，颜色的节奏能够增强画面乐趣，通过颜色五星型、放射型等规律渐变，丰富视觉感官，营造画面活力。

动静的节奏

动静的节奏大家第一感觉会想到动画或者gif，除了上图中微动态照片，仅仅通过一张静态的画面能表现动态吗？

当然，只要运用“常识”和“认知”就可以让观看者联想到动态，例如：速度很快，看不清物体，只留下残影，会让人们觉得物体动起来了，并且速度很快。

运用这样的常识，我们用PS中的速度模糊就可以在静态的图片上表现动态效果。同样的模糊效果可以加快速度，是否也可以减缓速度呢？细细观察生活，发现浴室里的磨砂玻璃可以隔离浴室空间，浴室内水声沥沥，室外安静祥和；同样酒吧也会用磨砂玻璃隔离空间，在模糊的背景后，你可以安静下来，哪怕外面high翻天，你也可以静静着。

可见，动静节奏把握好，哪怕一张静态图也能做出动态效果，渲染亦静亦动的氛围。巧妙的运用生活中的细节与“常识”总会有意料之外，情理之中的惊喜～

留白的节奏

留白的节奏也可称之为节奏的间歇停顿。

我们先做一个小测试，以上4张海报，那张是阿甘正传的官方海报？

只有一张是原版，其他三张都是我PS处理，去掉或者移动局部得到的图。

从图中看每张都有留白，似乎看起来都不错，但为什么原版图是这样而不是那样呢？因为一个词“平衡”。

分解上面4张图，如果把长椅看成跷跷板，长椅下的文字信息“July 6”作为支点，长椅上的文字就是稳定轴心的巨石。手提包与文字形成一个稳定的直角三角形，人在里面非常稳定平衡。而第二张把长椅上的文字移到左边之后，“巨石”让整个翘翘板向左倾斜。同理，第三四张都缺少支点。

留白除了使画面平衡之外，还可使画面透气，产生强烈对比，就像全都是重点就没有重点，全都画的很细致也无法抓住重点。虚实结合才能塑造出一个比较平衡的画面，有节奏的画面。

了解结构、形状、颜色、动静和留白的节奏之后，看看我之前在工作项目中的应用吧～

项目1 巨幕广告

项目背景：巨幕广告也称原生落地页广告，是点击广告之后打开的详情页面，与常规的外链落地页不同，巨幕广告是原生制作，提供图片、视频、文字、颜色等模版，将广告详情快速、完整的展现，以迪奥唇膏为例，为了更好说明，将原本纵向页面横向展示。

构图节奏

通过迪奥广告图片的大小变化与文字的大小、间距的变化，增加画面的节奏感，营造“强弱弱、强弱弱”的秩序感，最后“弱弱弱”合理收尾。

动静节奏

运用图片、视频、微动态图片和文字的动静交替变化，增加画面的节奏感，避免动态连续出现的疲劳感，让眼睛得以休息的同时，将更多精力集中在重要的部分，例如将视频区域放在中间，就像一首歌的高潮，传递核心思想，让用户留下深刻印象。

颜色节奏

虽然广告主具体会用什么图片和视频我无法控制，但设计demo的时候，我可以选择更适合基调颜色的广告宣传图，通过画面图片的颜色纯度的变化，增加画面的节奏感，营造氛围。

普适性

同理运用到以可口可乐demo中，按照设计节奏，打造基础结构，确保阅读的舒适性与丰富性。

项目2 如意贴角标

项目概述：如意贴角标广告是剧集播放过程中，左下角／右下角展现的广告，如意贴一般剧情播放到特定时间触发，广告内容与剧情相关；全程角标一般在右下角，一直存在，以动态mov形式呈现。

大小、位置、颜色的节奏

以角标广告为例，按照设计节奏，多方面呈现产品效果，丰富视觉效果。

如图分解了角标展现效果，大小：按照从小到大再渐渐变大的节奏。位置：形成波浪般的起伏。颜色：从浅到深再浅，最后强调品牌色展示产品。

动态节奏

以如意贴广告demo为例，按三个维度的设计节奏，打造多方面呈现效果，丰富视觉效果。

如图分解了如意贴展现效果，X代表横向变化的星空背景，Y代表纵向排列的文字；Z代表从小到大变化的手机。小红点代表动态变化路径及视觉焦点。从小红点的轨迹可以看到，最先是X轴上条纹背景横向穿插出现，然后是Z轴上手机倾斜翻转出现，等到X轴背景填满，再是Y轴上文字从上到下依次排列，之后又从上到下依次消失，再依次Z轴手机，最后背景消失，遵循着从始到终又从终到始的设计节奏。

总结

回顾一下上面说的内容，对于设计节奏的概念我定义为：为了不同设计目的，进行具有规律性、阶段性、秩序性变化的设计称之为设计节奏。

从以下五个方面讲述了设计节奏：

• 结构：疏密、大小、视觉轨迹的变化，可以让画面更具张力与空间感。网页错位排版能增加舒适感、缓解视觉疲劳，让画面更有起伏感。文字的节奏能突出主次、避免大段文字的阅读压力。
• 形状：包括聚散和渐变，可以聚焦中心，使画面更具冲击力，营造隆重活跃的氛围，适合电商活动页面和商品banner展示。
• 颜色：能够增强画面乐趣，通过颜色五星型、放射型等规律变化，丰富视觉感官，营造画面活力。
• 动静：动静节奏把握好，哪怕一张静态图也能做出动态效果，渲染亦静亦动的氛围。
• 留白：适当留白、虚实结合才能塑造出一个平衡的画面，有节奏的画面。

设计节奏不仅仅是我上面说的部分，可以说这还只一个开始，是一个概述，关于设计节奏每一个拆分开来都可以写成一篇文章，我想写成一个系列文，也许需要更多时间、精力和经验去总结。在此我想先分享给大家，有兴趣的小伙伴可以一起讨论。

总之，把握好设计节奏，就能够快速抓住用户的眼球，让用户能够段时间内获取重要信息，并且有兴趣花时间停留在此欣赏更多、挖掘更多。让看似freestyle的设计也有节奏可循。

欢迎关注作者的微信公众号：

「想掌握排版四原则？3个海报设计教程满足你！」

1. 《设计易容术！如何设计一张高品位高水准的海报？》
2. 《设计易容术！如何设计一张高品位高水准的海报（二）》
3. 《设计易容术！如何设计一张高品位高水准的海报？（三）》

【优设网 原创文章 投稿邮箱：yuan@uisdc.com】

================明星栏目推荐================

优优教程网： UiiiUiii.com 是优设旗下优质中文教程网站，分享了大量PS、AE、AI、C4D等中文教程，为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。

设计导航：国内人气最高的设计网址导航，设计师必备：http://hao.uisdc.com