导语:孟菲斯设计、鬼畜视频、神曲电音、魔性画风、freestyle……看似毫无关联,在我看来却有一个共同的特性——那就是节奏。接下来我就来聊聊节奏,有不当之处还望指正~
鉴于本文干货太多,梳理的目录如下:
- 结构的节奏
- 形状的节奏
- 颜色的节奏
- 动静的节奏
- 留白的节奏
项目中的节奏
- 项目1巨幕广告
- 项目2如意贴
前言
“有freestyle吗?”“你们一人来一段freestyle”“你有freestyle吗?”……
“开门呐!开门呐!开门开门开门呐!”…….
重复几遍,就形成了一种流行节奏,现在的世界是一个多元的包容的世界。每个人都有不同的style,就像你说“睡什么睡出来high”,他却喜欢静静地宅着玩一把王者……跟节奏一致的人相处会很愉悦,而节奏相悖的人需要磨合。同一个事物见仁见智,但我们都习惯用自己的经历和经验去看待事物,学院派也好,野路子也好,雅俗共赏,我想寻找的是一种相对理性的设计理论,属于我们共有的经历和经验,那些潜移默化对我们的影响,暂时定义为节奏。
从进化论的角度而言,人们对节奏的认知,最初来源于大自然的规律,以及新陈代谢的生物作息。随着人类模仿大自然、劳作协调动作的声音、发展了音乐、诗歌、卦象、绘画…所以广义上而言,节奏包含世间万事万物,但狭义上大家理解的节奏可能是一个节拍、一首歌的曲调。
就像耳熟能详的节奏有“嘣恰恰、嘣恰恰”和“咚次哒次”,我将节奏用图形化的语言来说明一下,图中从黑到灰色代表声音渐弱,竖线分割每个小节,重复小节形成一段简单的节奏,形成“强弱弱”“强弱次弱”的有规律变化,而简单的重复让人可预知、可掌控,自然而然的产生舒适感。
中国古代的《礼乐记》中说:“节奏,谓或作或止。作则奏之,止则节之。”
节奏的断连顿挫也会表达出不同的含义,如下图:
此句读来源于一段故事,有一教书先生很体谅穷苦人家,想免去穷孩子学费,但富人家则不能免,则给出同样的一段句子,只是断句不一样,便有了两种截然不同的含义,穷孩子只要青菜足矣交学费,而富人家则需要鸡/鸭、鱼/肉和青菜,可见不同的节奏传达的含义也会完全不同。
“节奏是一件艺术品所包含的各种不同要素的有秩序、有拍节的变化。”?——美国.理查德列斯拉夫斯基
我寻来莫奈的《日出印象》和梵高的《星夜》,发现日出时倒映在水平面上的平行波纹井然有序,让人瞬间感受到日出平静的氛围;星空纠结的漩涡气流,体现了动荡不安的心,而事实证明梵高当时确实已经在精神病院接受精神治疗。
不同的节奏会有完全不同的含义,也表达了不同氛围和心情,因此,我大胆给设计节奏定义为:
“为了不同设计目的,进行具有规律性、阶段性、秩序性变化的设计称之为设计节奏。”
结构的节奏
什么是有规律性、阶段性、秩序性变化的节奏呢?继续观察《日出印象》《星夜》则会发现他们都有共同的规律——结构中的疏密、大小、视觉轨迹都是设计节奏。
莫奈的《日出.印象》就是一副节奏很明显的绘画作品,太阳、船只形成稳固的三角形布局。
阳光倒影在水中的波纹,远处树林房屋的倒映,平行的从上到下、从密到疏的排列,都给人平静安详的感觉。咋看一眼可能会被太阳吸引,视线随着橙色倒影到水面(红色1~3轨迹),看到出行捕鱼的船只(黄色1~3轨迹),紧随其后的小船,引申到远处的树林(蓝色1~3轨迹),平移视线看到一大片树林。最终形成一圈连贯的视觉轨迹,营造出一副日出平静中透着欣欣向荣生生不息的景象。
与莫奈不同,梵高是公认的疯子,但也是天才,因为他在绘画的时候无比认真,从他作品中可以看出严谨的规律。天空中的黄色星星如果用线连起来,会发现它如浪花一样此起彼伏,流动的笔触按照顺时针方向有规律的排列,前景树影与后景连绵的山脉形成近大远小的连续空间感,将视野从近处树影往远处山丘无限延伸。
因此,结构中的疏密、大小、视觉轨迹等变化,可以让让画面更具张力与空间感。
设计上也通常会改变构图中物体的大小、间隔、方向渐变等的节奏来实现,从以上对比图中,可以明显看出来左图的方块、球体大小变化更有节奏,营造出一种近大远小的空间感。
例如上图骰子的大小变化,营造了空间活跃感,让物体具有魔法般的“腾空”起来。通过主题物(人)与辅助物(粉球)之间的穿插错位来产生“和旋”一样的“交响乐”,丰富画面的节奏,产生了纵深空间感,而不会误以为比例不对。
应用到网页上,最明显的就是页面结构布局设计,适当穿插的左右排列,打造起伏流畅的曲线观赏路径,仿佛细细流淌的小溪,吸引用户追本溯源不断向下滑动,同时也避免了所有信息累积在一起的压迫感。
首尾错位叠加的布局,给人一种故事开头结尾和丰富过程的完整阅读体验。可见,构图节奏能增加舒适感、缓解视觉疲劳,让画面更有起伏感。
但需要注意的是,错位构图带来的节奏是较慢的浏览式体验,并不适合快速获取信息的信息流。
信息流中过于跳跃的界面设计,让用户上下浏览的时候,很难快速定位店名、位置等信息。所以像新闻、快报等资讯类app设计都是一致的图文方向,这样更符合用户快速阅读的惯性。继续深思下去,如果要一致的图文为什么又要增加与图文不一致的三小图和大图信息呢?这不就打断了节奏吗?没错,就是故意打断阅读节奏的,为了让用户不至于长期阅读相同结构而产生视觉疲劳,但怎样的频次和节奏才是最好的呢?
构图中文字的排版也可以运用设计节奏,例如通过字体、字号、颜色、深浅、字间距、段落等的节奏变化来体现。如图将普通的文字段落,先按主次区别,改变一成不变的阅读体验,将标题与内容相呼应,将文字与背景构图融合,倾斜对齐体现文字的力度。
可见,文字的节奏能突出主次、避免大段文字的阅读压力、横纵向的阅读呼应也能有不一样的阅读体验。
形状的节奏
如果说结构的节奏是整体布局的把控,那形状的节奏就是通过形状的变化对画面所传达信息的扩展,其中最为突出的是表现在“渐变”和“聚散”两种形式。
渐变是指以类似的基本形或骨格,渐次地、循序渐进地逐步变化,呈现一种有阶段性的、调和的秩序。包括:同一个形状的颜色、大小、间隔、方向、位置的变化,也有多个形状的关联性变化。
聚散是一种特殊的重复,是基本形或骨骼单位环绕一个或多个中心点向外散开或向内集中,即爆发式(外扩形)和聚焦式(内收型)。特点:具有很强的聚焦点,这个焦点通常位于画面的中央;具有一种深邃的空间感,使所有的图形向中心集中或者由中心向四周扩散。
对比上图广告宣传banner,有聚散效果的图片氛围更热闹、丰富,也更能调动用户的购买欲望。可见,形状的节奏可以聚焦中心,使画面更具冲击力,营造隆重活跃的氛围,适合电商活动页面和商品banner展示。
颜色的节奏