如何掌握设计的节奏?来看这份全面的总结! - 优设-UISDC

如何掌握设计的节奏?来看这份全面的总结!

2018/05/24 15578评论区

追根溯源,人类对于节奏的认知,最初来源于大自然的规律,太阳东升西落,月有阴晴圆缺,聪明的人类通过模仿这些规律,最后演变出来诗歌,音乐,绘画,乃至生存之道等,这些都是广义上的节奏,那么狭义上的节奏,我们可以理解为一个节拍、一段曲调。

△ 音乐节拍

那么狭义上的节奏,可以是一段音乐,就像耳熟能详的节奏有「噔恰恰、噔恰恰」和「咚次哒次」,我将节奏用图形化的语言来说明一下,图中从黑到灰色代表声音渐弱,竖线分割每个小节,重复小节形成一段简单的节奏,形成「强弱弱」「强弱次弱」的有规律变化,这样的节奏变化自然而然的就形成了对比。这些可视化的节奏将成为我们艺术设计中必不可少的理论依据。

设计发展至今,设计师们对设计节奏的认知已经非常具体了,例如运用元素的聚散、反复、重叠、转换,形成节奏和美感的变化,通过色彩的点、线、面等形式的不断重复,体现有规律、有秩序的美感。通过这些节奏变化,可以满足多场景,多维度的设计需求,把握节奏是设计师必备的技能。

带着这些对节奏的理解,我们会从视觉引导、元素排列、视觉平衡、留白、点线面关系、以及色彩这6个方面来分析美学中的节奏。

1. 有节奏的视觉引导

△ 《睡莲》 莫奈 99×93cm 1919年

我们来分析一下莫奈的代表作《睡莲》,《睡莲》是莫奈晚年的作品,当我们把这幅画中被莲花切割后的负型连接起来,我们可以看出是一条曲线,这条曲线就是莫奈的「演奏」方式,这条曲线从远到近,远处的幅度小一些,近处的幅度大一些,拉开画面的纵深感,将观者的视觉重心引导到前面那两朵黄色的莲花之上。他这种视觉引导让观者感觉到的是一种宁静,试想一下,倘若这是一条笔直的线至上而下,犹如瀑布飞流直下的壮阔,可能就是另外一种感受了,这就是节奏在画面中起到的作用。

油画中不同节奏的视觉引导,会带来情绪上、视觉焦点的变化,那么我们在设计中同样可以使用,控制节奏感也是重中之重。

△ 图片来自 Pinterest App

咱们来看看瀑布流的鼻祖 pinterest 的页面样式,瀑布流符合用户「Z」字型的阅读顺序,吸引用户不断向下滑动,相比规规矩矩的排版方式,瀑布流阅读起来比较有趣味性,读起来很轻松。错落有致的引导会使得阅读速度放慢,用户在浏览这样页面的时候,一定是慢条斯理,边看边思考的状态,这样瀑布流就发挥到了它的作用,用阴阳顿挫的节奏,营造出舒适的阅读体验。

2. 有节奏的元素排列

与莫奈不同,梵高是公认的疯子,但也是天才,他在绘画的时候无比认真,从他作品中可以看出严谨的规律。天空中的黄色星星如果用线连起来,会发现它如浪花一样此起彼伏,流动的笔触按照顺时针方向有规律的排列,让星空变得灵动,细腻的笔触摆放,仿佛画面在动。前景树影与后景连绵的山脉形成近大远小的连续空间感,将视野从近处树影往远处山丘无限延伸。往往画面就是被这样经营出来的,慢慢这些方式方法,就被人总结起来,学以致用。

△ 《星月夜》梵高 99×93cm 1919年

相比于梵高的油画,这个小小的 banner 可能不值一提,但是在这个 banner 中我们看到了元素排列的节奏。左边的这幅 banner,文案这么多的字没有主次,背景点缀的圆球也是一样大的,排列的方式也较为平均,使我们觉得没有视觉焦点,背景抢了主文案的风头,整个 banner 没有半点节奏可言。那么我们来进行简单的优化,右图文案上主要突出「产品」二字,点缀的元素用形状、大小进行了区分,看起来灵动了许多,画面中元素的疏密、大小、视觉轨迹等都做了调整,节奏分明,画面传递出的信息也更加突出,完成了需求的同时也不失美感。

△ 图片来自网络

3. 有节奏的视觉平衡

元素摆放的节奏会引导我们的视觉中心,好的画面是平衡的,是完整的。那么我们先来做个测试。

这两幅海报哪一个是官方海报呢?

△ 图片来自网络

第一幅图,挂在晾衣绳上的小黄人在右上角,下面两只小黄人看着它,将整个画面的视觉中心引导在右上角的位置,这个位置本身是没问题的,但是配上居中的文字,我们会发现,我们看整个海报的时候视觉焦点是散的,看起来有些别扭。

再来看第二幅海报,这张海报的视觉焦点是在中间的,挂在晾衣绳上的小黄人在正中间,下面两只小黄人的视觉中心也同样聚焦在正面小黄人的身上,从上半部分的文字,中心的小黄人以及下面的文字都是以中心为轴的,这样看起来视觉聚焦流畅,至上而下,结构清晰。这样的节奏是均衡的,是顺畅的,这就是有节奏的视觉平衡。

4. 有节奏的留白

留白的节奏也可称之为旋律的休止符,此处无声胜有声。老子在道德经中有这样一句话「埏埴以为器,当其无,有器之用」大意是陶土中空才能称之为器皿,这说明在早在2000多年前中国传统美学就对「空」有着深刻的认识。第一幅海报是福田繁雄的正负型海报,他是正负型的开创者,那么负型,就是留白。中间的电影海报,是《道士下山》的海报,通过正负型,设计整幅画面,负型既是山门也是禁锢的葫芦,道士打破禁忌,下山闯世界,使画面紧扣主题。第三幅海报是寻龙诀的海报,不用多说,正负型是一个骷髅头,营造出阴森恐怖的效果,两个空洞的眼眶既是探险的入口,也是活命的出口,暗处的危机重重与外部的晴空万里形成了鲜明的对比,虚实相生。古语评论画面的节奏感有这样一句话,疏可跑马,密不透风。不要一味的去添加,学会控制画面节奏,有松有紧的设计画面,往往会事半功倍。

△ 图片来自网络

5. 有节奏的排版

纯文字排版,最考验设计师的平面功底了,平面构成离不开点线面的节奏感。正所谓点动成线,线动成面,大片文字我们可以看成面,单独的元素看成是点。了解了各个部分的作用,我们来进行内容的拆分,主要内容我们用大字号并且加粗,加以颜色进行强调,再将次要信息用小字排版,形成了主次的对比,再用单个元素进行点缀,平衡画面,同时也要控制画面节奏,排出视觉舒适的海报。

△ 图片来自网络

6. 有节奏的色彩

颜色的节奏指的是画面中颜色明度、纯度、色相以及使用面积的变化规律。观察色盘,我们发现45度的色彩节奏是渐变色,色彩和色彩之间是递进的节奏关系,90度的色彩节奏已经产生了对比,是弱对比,180度的色彩节奏则是补色对比,是强对比。那么了解了不同色彩搭配产生的感受,我们就可以把握画面的色彩节奏了。

△ 色盘变化 图片来自网络

这些色彩理论也是伟大的画家们慢慢摸索出来的,右图是米勒所画的播种者,起初人们只是在观察模仿大自然的颜色,后人称之为写实派,随着绘画的不断发展,对于大自然的色彩意境不仅仅局限于模仿。左图就是梵高临摹的播种者,他踩着后印象派的车轮,把后印象派的理念融入了绘画之中,强调了色彩的冷暖对比,夸张的表达,主观的控制色彩的节奏,让画面不拘泥于写实 ,变得更加有趣。

△ 图片来自网络

了解了色彩节奏的发展史,我们再来看看现今的海报设计在用色上是否也有规律可循,这两张海报,我们可以理解为他是采取的写实风格,选用低饱和度的相近色,主色之间色彩夹角为45度左右,使画面变化缓和,避免色彩强烈的对比,他没有夸张的颜色,让别人第一眼看上去就是一张普通的照片,当人们去看细节的时候,才看出这幅广告的创意点,看上去真实又惊喜。

△ 图片来自网络

下面这幅是日本福岛核电站核泄漏事件的海报,这个海报的用色就与上一幅完全不同,他的创意点全部集中在用色上,为了强调视觉冲击力,他用了极少的颜色,用高纯度的红色与白色对比,基本上没有渐变,让画面更有冲击力。整幅海报的含义也是一目了然,形状上的节奏变化也恰到好处,准确的记录了当时的一切。如果说上一副海报给人的感受是「恍然大悟」,那这一幅海报则是「震撼人心」。

△ 图片来自网络

节奏的应用方式肯定远远不止这些,设计离不开节奏感,本次分享抛砖引玉,世界千变万化,万变不离其宗,做一名有「节奏」的设计师,让用户感受美妙动人的旋律。

欢迎关注作者的微信公众号:「融360RUX」

图片素材作者:Pavlov Visuals

「让作品有节奏的设计案例」

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

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

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

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/master-the-rhythm-of-design

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

UI sketch 转场动效 界面设计 平面设计 设计师 交互设计师 扁平化设计 排版布局 职场 设计师专访 素材下载 设计流程 用户体验设计 视觉设计 配色 web前端开发 AI教程 海报设计 设计理论 字体下载 神器下载 设计规范 动效设计 设计趋势 psd下载 产品设计 图标设计 logo设计 神器推荐 ICON 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里