留白能使版面的编排清晰有序，流畅悦目，还能使观者产生丰富的联想。在版面中留白具有十分重要的作用。

设计就是在有限的空间里表达完整信息的传达，巧用留白首先你就要意识到它和学会去观察它，学会巧妙的运用留白更好地烘托主题，这部分将会展示做为设计师要了解的一些基本原理。

图形背景的关系

格式塔原理应用于许多基于图形背景关系的留白上，我们自然而然地观察到的经验，都带有格式塔的特点，有些对象突现出来形成图形，有些对象退居到衬托地位而成为背景。一般来说，图形与背景的区分度越大，图形就越可突出而成为我们的知觉对象。如绿叶中较容易发现红花。反之，图形与背景的区分度越小，就越是难以把图形与背景分开，如军事上的伪装便是如此。

图左：黑线与白线的空间相等，看上去是一种稳定的关系；

图中：黑色与白色空间形成了一个灰色区域，空间的消失，个体元素变为了单一元素。

图右：两根黑线被移走，使最上面的灰色区域成了活动区域，这个背景变为了图形和增加深度的设计。

 图左：很清楚什么是图形什么是背景，一个或其他通常主导这个位置。

 图中：图形与背景相等引起了观者的注意，创造了一种紧张感，给人以动态的设计感。

 图右：同时出现了图形与背景，这种有趣的形状，给观者留下了发现它们的进入点到这个位置。

以上2个例子中，哪种关系的建立取决于你怎么样平衡图形与背景的关系，你的直接观众看设计的不同部分，想像他们看到不同的文本想到了什么，图形背景也是格式塔原理，要使图形成为知觉对象，不仅要具备突出的特点，而且应具有明确的轮廓。明暗度和统一性。格式塔原理包括了以下2个关键点：

接近性和连续性   距离较短或相互接近的部分，容易组成整体，如下图，距离较近而相邻的三个图形，自然而然地组合起来成为一个整体。连续性指对图形的一种知觉倾向，如图，尽管线条受到阻断，却仍像未阻断或仍然连续着一样为人们所经验到。

闭合  知觉印象随环境而呈现最为完善的形式，彼此相属的部分，容易组合成整体。反之，彼此不相属的部分则容易被隔离开来，如下图的3个图形，尽管按照接近性原则，把3个图形作为一个完整的整体来知觉，而把单独的一个图形作为另一个整体来知觉。这种完整倾向说明知觉者心理的一种推论倾向，即把一种不连贯的有缺口的图形尽可能在心理上使之趋合，那便是闭合倾向。如下图，观者总会将此视为整体图形，而不会视作其他分别独立的图形。闭合倾向在所有感觉中都起作用，它为知觉图形提供完善的定界，对称和形式。

空白作为设计元素

想想此刻的音乐，如果每个和旋和音符被演奏在同一时间，你将不会听到音乐，不同的有声和无声创建出了节奏和旋律，总之，恰当的留白在设计中充当着调节空间的角色，拥有呼吸的空间才能让受众更顺畅的得到信息的有效传递，也可理解为不同元素对于人眼具有不同的吸引力引发人的注意，而无间歇的信息的呈现同样也可能导致了人眼接受信息的疲劳，这同时也影响着信息接收的效果。所传递的信息并不是用信息将版面塞满尽可能多的表现信息，因为信息的多少并不能与接收的效果成正比，更不能保证受众对最重要信息的成功接收。

留白有以下好处：

－加强虚实对比，营造空间感，突出主题；

－增加画面意境，突出气氛意蕴，传递精神情感；

－减轻视觉疲劳。

作为图形，得有足够的留白，预先加入图形，留白是不确定的，基于图形与背景关系的建立，留白存在了，交流开始了，一个最重要的留白功能是提高可读性和易读性，宏观的留白会使文字更吸引人，微观留白使文本更易读。

宏观留白：一组元素间的留白，留白在字母，文本和段落间。

微观留白：主要元素间的留白，它分开了元素或一组元素使眼睛在扫视元素间时得到了休息。

正确的留白产生了质量，更多空间细节和极少的元素，对比高端与一般的零售店，哪一个类型的留白更多？哪一种包装产品提供了留白？留白和你交流了什么？

留白还能传达其它属性，如：精致，简洁，奢华，干净，开放。

当你设计失败时，是否需要考虑下留白，不要害怕去用留白，要方眼让重要的设计元素在你的控制下。

一些网站中留白的运用

要更好的用留白，首先要对它有意识，学会识别留白在不同设计中的运用，注意形状的形成，考虑交流的空间是什么，为此，让我们看一些网站设计，注意下留白的运用。

－old guard

这个网站由Tom Johnson’s设计，运用了大量白色的留白，给文本和其它元素很好的呼吸，不会弄错什么是图形，什么是背景，信息包括分离留白（称为就近原则），区分元素组，很容易明白哪里是结尾以及下个开始在哪里，它们之间有各自的留白，主要的文本偏离页面的中心，用两侧宽大的空间，这个留白被元素间断，激活留白和断开元素，留白帮助了注意这个区域和这个元素。

－heroku's staus page

 上面这个网站展示了很多留白，我刚好赶上在网站上这么好的一天，因为增加了积极的元素就意味着平台上有更多的报道事件，在那里，有更多留白标志着有更好的服务。

注意留白不一定是白色的，当这个页面有了过多慷慨的留白，你就不会有太多的抱怨，仅仅是重要的信息－在这个例子中，仅是状态更新和事件报道—被留白打断。

－introducing the novel

这个页面的顶部留白是 非对称的和活跃的，注意左边大块的留白使你的双眼直接看内容，如果你拖拽网页的滚轴，从上往下浏览内容，你将会看到留白也同样被用来分开每组信息。

细线也同样被用来分组和隔离这些内容块，当你浏览网站时，注意怎样这个线不总是接触，允许留白围绕在它周围并连接其它留白，这防止了留白的陷阱。

－elliot jay stocks

这个网站大家应该都很熟悉，在这个设计的背后，不对称导致了活动空间，这个在顶部的大图潜在的作为连接下面的内容，一大块的留白为图片提供了充足而温馨的空间，可以让眼睛随意移动，如果左边的侧边栏有着同样的背景色作为主要内容，那么它可能很容易地让眼睛在图片周围活动，但如果改变了颜色就很难达到这个效果。

在上面的网站中，留白被用来分开不同的信息，使得每组都可以让眼睛找到想要的和休息之地。

－Phil coffman

文本在这种单一的形状上，周围有很多留白，许多正面元素的存在增加了当前的重要性，即使在彩色背景上，文本也有易读的足够空间，不会被誤认为时其它类别页面上的文字。正面形状（图形的留白）响应的调节适应不同的浏览器宽度，但一个单独的大的形状的空间所包围的图案仍然存在。

－new adventures in web design

像许多网站一样，这个网站围绕会议留下的大的房间，区分这组信息的是留白，这个留白是活动的，通过它来设计。

值得注意的是在左上和右主要内容的图像之间灰色的圆形箭头。

这些箭头挡住了留白？它们没有接触到，因为被虚线的地方中断了留白，这个留白可以通过，虽然它受到限制。

灰色帮助箭头重分配，不难想像留白穿过这条线。

凭心而论，浏览器看内容更广泛，当我抓了截屏时，箭头不会重叠在主要内容上，围绕在1280像素下的设计为一例，总体而言，根据它们的工作原理，不知空间是否会更好的流动而忽视了箭头的存在。

一些logo的例子

一些标志与留白的结合作为设计的一个组成部分，每个留白的运用，都会有意义，然后让自己去探索这些留白。

请注意下面的标志如何利用图形与背景的关系，慢慢地，直到你看到这个图形与背景，看不到完整的标识，这两者都是要传达些信息。

这些标志都依赖封闭的原则，你的意思是什么，看是否真的存在。这些标志围绕着背景与图形展开。什么是图形？当你把整个logo针对其背景变为留白在一个较小的图形里，这种图形与背景的关系的核心是什么被传达。

以上各种logo很好的用了留白。

总结：

－希望从这篇文章中你可以拿走2个主要的东西。

－首先，是在设计中使用图形和留白的格式塔原理，做为设计师要了解格式塔原理的运用。

－其次，也是最重要的是，尽量花时间观察留白在设计中的运用，不要让留白成为你积极因素的副产品，尽可能的学着去设计留    白，如果不是，积极的元素更多，任何页面的布局最终是留白的组织。

   有意识地分析留白，并用它来创建一个更好的设计，认为这是一个非常重要的设计元素，然后查看留白和你塑造的积极元素间    的关系。

－下次，我们将添加更多的格式塔原理的组合，探索重点，继续带领我们进入我们的想法，如视觉重量和成分的平衡。