新闻动态

掌握这些设计节奏,趋势在变也不怕过时!


  设计中有很多共同特性,如:孟菲斯设计、鬼畜视频、神曲电音、魔性画风、freestyle等等看似毫无关联,但其中有很多共同点,我们称为——节奏。其中包括:

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

  项目中的节奏
  项目1巨幕广告
  项目2如意贴

  要想在变化多端的设计行业中,突显自身特点,并长时间不过时,就需要对设计节奏有一定的掌握了解,才能运用得当,让自己的设计受人喜爱而且不会过时。为此,今天天津网站设计小编就让你知道,掌握这些设计节奏,趋势在变也不怕过时!

  现在的世界是一个多元的包容的世界,重复几遍就会形成一种流行节奏。每个人style不同,就需要将节奏相悖的人进行磨合。同一个事物见仁见智,但我们都习惯用自己的经历和经验去看待事物,学院派也好,野路子也好,雅俗共赏,我想寻找的是一种相对理性的设计理论,属于我们共有的经历和经验,那些潜移默化对我们的影响,暂时定义为节奏。

天津网站设计

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

天津网站建设

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

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

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

掌握这些设计节奏,趋势在变也不怕过时!

  可见不同的节奏传达的含义也会完全不同。

天津网站设计

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

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

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

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

  结构的节奏

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

天津网站设计

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

掌握这些设计节奏,趋势在变也不怕过时!

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

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

天津网站设计

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

掌握这些设计节奏,趋势在变也不怕过时!

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

天津网站设计

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

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

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

天津网站建设

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

掌握这些设计节奏,趋势在变也不怕过时!

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

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

掌握这些设计节奏,趋势在变也不怕过时!

  形状的节奏

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

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

掌握这些设计节奏,趋势在变也不怕过时!

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

天津网站设计

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

  颜色的节奏

掌握这些设计节奏,趋势在变也不怕过时!

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

天津网站建设

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

掌握这些设计节奏,趋势在变也不怕过时!

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

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

  动静的节奏

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

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

掌握这些设计节奏,趋势在变也不怕过时!

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

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

  留白的节奏

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

掌握这些设计节奏,趋势在变也不怕过时!

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

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

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

掌握这些设计节奏,趋势在变也不怕过时!

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

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

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

  项目1巨幕广告

掌握这些设计节奏,趋势在变也不怕过时!

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

  构图节奏

天津网站建设

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

  动静节奏

天津网站建设

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

  颜色节奏

掌握这些设计节奏,趋势在变也不怕过时!

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

  普适性

掌握这些设计节奏,趋势在变也不怕过时!

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

  项目2如意贴角标

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

  大小、位置、颜色的节奏

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

掌握这些设计节奏,趋势在变也不怕过时!

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

  动态节奏

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

掌握这些设计节奏,趋势在变也不怕过时!

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

  天津网站设计小编温馨提示:对于设计节奏的概念:为了不同设计目的,进行具有规律性、阶段性、秩序性变化的设计称之为设计节奏。从五个方面讲述了设计节奏:

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

  设计节奏不仅仅是我上面说的部分,可以说这还只一个开始,是一个概述,总之,把握好设计节奏,就能够快速抓住用户的眼球,让用户能够段时间内获取重要信息,并且有兴趣花时间停留在此欣赏更多、挖掘更多。要知道设计也有节奏可循的。

新闻动态 News