淘宝美工/电商设计课堂：网站中留白的运用

网站中留白的运用

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

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

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

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

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

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

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

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

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

像许多网站一样，这个网站围绕会议留下的大的房间，区分这组信息的是留白，这个留白是活动的，通过它来设计。凭心而论，浏览器看内容更广泛，箭头不会重叠在主要内容上。

总体而言，根据它们的工作原理，不知空间是否会更好的流动而忽视了箭头的存在。有意识地分析留白，并用它来创建一个更好的设计，认为这是一个非常重要的设计元素，然后查看留白和你塑造的积极元素间的关系。怎么样，你有没有学会呢？今天的淘宝美工/电商设计课堂：网站中留白的运用就到这里啦，更多精彩请持续关注环球网校~