• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 无论趋势怎么变,掌握这些设计节奏就不怕过时!

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

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含经验分享,设计方法等相关知识,希望在学习及工作中可以帮助到您

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

鉴于本文干货太多,梳理的目录如下:

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

项目中的节奏

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

前言

“有freestyle吗?”“你们一人来一段freestyle”“你有freestyle吗?”……

“开门呐!开门呐!开门开门开门呐!”…….

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

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

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

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

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

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

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

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

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

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

结构的节奏

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

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

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

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

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

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

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

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

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

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

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

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

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

形状的节奏

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

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

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

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

颜色的节奏

您可能想查找下面的文章:

  • 该有的视觉元素全都有,设计不好到底差在哪里?
  • 为什么几个人的小团队更加高效更加靠谱?
  • 对于「以人为中心」的设计,你的理解可能太浅显了
  • 为什么大家都想学服务设计?来看CEO 的亲身经历!
  • 想为iPhone X设计UI?给你这11个设计小贴士
  • 疯传谷歌走All-White风?假的!其实只是合作伙伴的重设计
  • 在做产品设计的时候,预期和现实到底有多大的差别?
  • 设计出了错?很有可能是你没有问对问题
  • 为什么不要再问用户「你们到底想要什么」?
  • 想紧跟流行风尚?这5种平面设计趋势了解一下

相关文章

  • 2017-08-06禁用IE10的密码明文显示和快速清除功能的方法
  • 2018-08-23超全面!移动端响应式的7种UI布局解析
  • 2018-08-23想做好字体设计,先掌握这3个字体结构法则
  • 2017-08-06站长应该注意的9个提高网站易用性的代码优化技巧
  • 2018-08-23互联网「秃顶大会」,思聪都不敢这么玩!
  • 2017-08-06关于各类HTTP 返回状态代码详解
  • 2018-08-23新人想要入场视频类H5 设计?你需要了解这些
  • 2018-08-23世界顶级的设计师就能一稿过么?
  • 2018-08-23想要做好用户调研,你要学会这九种定量用户研究的方法
  • 2018-08-23如何掌握设计的节奏?来看这份全面的总结!

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 一个完整的react router 4.0嵌套路由的例子
    • Blog设计 网页设计之处女作
    • 超全面!移动端响应式的7种UI布局解析
    • 几乎适用于任何领域的万能创意公式,今天免费教给你!
    • 基础知识学起来!如何科学提高UI界面的文本易读性?
    • Web开发中盒子居中的几种方法
    • 亲历者说!Evernote 产品设计师的改版案例经验
    • XML与CSS样式结合
    • 2013年网页设计UI最热趋势 最流行的UI设计
    • 用实战案例,带你解读经典书籍《用户体验要素》

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有