响应式网页设计中疏密板式的应用

我们常常听到响应式网页设计中一些老师或设计大神在点评某个作品时会说到画面缺少疏密关系或是缺少节奏感。那么疏密关系或节奏感是怎样在设计中体现的呢？

一．什么是疏密

“疏密”顾名思义就是稀疏、密集，在设计中它们就是一组对比。“密”给人一种紧张感、窒息感和厚度感，如下图：

而“疏”则给人一种空间感、轻松感和秩序感。如下图：

这两种关系相互互动才能产生和谐的气氛，如画面中仅存在一种形式就很容易形成过于单调而缺乏变化的作品了。

一．疏密关系在网页中的应用

A.banner中文字的疏密关系。初学者在疏密对比上常犯的错误就是给的字符间距不宽不窄，给人感觉很松垮，这是不妨收紧一些字间距，放大另一段文字的字间距。

如上图中文字部分，作者缩小了主标题的字间距，而放大副标题的字间距，这样就有了疏密关系的对比，疏的更疏，密的更密，显得画面更加和谐。反之，如果副标题的字间距缩小和主标题一样呢:

以上可以看出文字之间的疏密关系对比对整个画面的影响，太过拥挤的文字使得画面层级关系凌乱，且不利于文字的阅读。

如果把主标题的字间距放大又是什么结果呢：

过于松散的文字又不利于观众的阅读。所以，把握好文字的疏密关系会给你的画面带来稳定感。

B.网页版式中的疏密关系。版式的疏密关系其实就是板块之间的疏密关系对比，一个板块排得密集，下一个板块就相对于上一个板块显得松散点。

如下图所示，banner的内容较少，显得稀疏，那么下一个板块文字多，图片大就显得密集。

再到下一板块，图小，文字少又显得稀疏。

以此类推，整个版面都是稀疏、密集、稀疏、密集来搭建的。整个页面就像一首歌曲有平缓又有高潮，从而形成了我们常说的节奏感。所以疏密关系贯穿于整个设计之中，有疏就有密，有密就有疏，它们是相互影响，相互搭配的。而疏密关系也是在同一画面中相对而言的，必须根据具体画面具体应用。

在设计中，大家可以找一些好的设计进行疏密关系的分析，并在自己的设计中有目的的进行训练，掌握好疏密关系你的作品才能具有可看性，具有真正的节奏感。现在有很多的培训机构只将设计软件作为教学的重点而忽略了设计的理论培养，使得很多同学只知软件应用而不知设计其根本。做的东西都是一些效果的堆砌，缺乏设计感。所以大家在学习设计的时候，要更深入的了解设计的本质，没有设计理论做支撑，不管软件再熟练都不能做出成熟的设计。