痞子格

@十萬個為什麽 ：所谓留白，有时也称作负空间，两者是同一个概念。尽管这个术语尤其指留“白”，但它所指的区域并不一定要是白色的。它只是网页布局中环绕各元素的空白空间。

这样的空间体现为多种不同形式，例如图片、图表、缝隙、外边距、列甚至一行行文字之间的空间。尽管它似乎“空无一物”，里面没有任何其他设计元素占据一席之地，但我们不应该如此看待它。视之为“无物”，也许打造美感与表现力的机会就流失了。

处理得当的话，留白确实可以为网页设计带来大量的益处。不应减少网页设计中的留白，相反，应该增加网页中的负空间。一些知名的大众品牌已经在朝这个方向前进，更多的设计师们也在追随他们的脚步。

更多的留白，等同于更奢华的品牌与网站

客户往往要求设计师尽可能用尽网页里的空间，因为网页中的空间是昂贵的，只有有限的屏幕来展示信息。无论如何，反其道而行之——增加留白——促使设计师在更严格约束的空间中，打造更加光鲜的品牌信息。

另外，大家会觉得，留白更多的网站，它的内容比屏幕空间更重要。所以，品牌也显得更尽奢华，因为它牺牲了更多屏幕空间，反而将焦点汇聚在内容信息上。

奢华的品牌了解这层隐喻，通常都使用更多留白来达到这一确切效果。PotteryBarn是个知名的高档家具零售商，它的网站很聪明地使用了留白，恰恰反映了这一点。留白支配了主页，页面旁边大片的留白，更好地将访问者的注意力集中在页面中间的交易与促销信息上。甚至页面顶部的品牌名称本身，也在字符之间慷慨地运用了留白。

PotteryBarn

留白提升搜索流畅度

两大搜索引擎Google和Yahoo Search，诠释了留白简洁有效，这个简单的例子再适合不过了。

Google准确地理解了一点，正在搜索某个话题的用户，不想被嘈杂的背景和广告分散注意力。因此，留白支配了整个Google搜索引擎页面，实际搜索框只占据页面中央窄窄一丝空间。类似的，Yahoo搜索也体现了使用留白的妙处。虽然这个页面顶部有长长一条菜单栏，理念还是相同的：大量的留白，使用户专注于搜索，别无他物。

可读性和易读性得到应有的大幅提升

用好留白，任何网站的可读性与易读性都会得到改善。如果一个页面上的文字过于拥挤，它就会妨碍舒适的阅读体验，从而阻碍整体用户体验。更多的留白使文字更易浏览，从而提升阅读体验，也更易理解。

Information Highwayman是个掌握这项原则的个人站点，是D Bnonn Tennant——一名文案和市场专员的个人网站。擅长夸耀的他，知道什么样的网页内容对任何小本经营管用，令人欣慰的是，Tennant在他自己的网站上实践了他所宣扬的东西。标题的字间距、文字段落和菜单栏间距，有利于确保可读性和易读性。

Information Highwayman

留白也可以用于不同内容区块之间，不只是为了提升阅读体验，也为了将内容分隔成不同部分，使得信息的吸收更加专注。Andrew
Lucas的网站很好地展示了这一点。他是名伦敦的设计师，留白在他个人主页上运用得行之有效。

AndrewLucas

它让颜色更鲜明

也许留白最直接，尽管也是最简单的益处，就是突出网页中的其他色彩，使它们更加鲜艳。这点对于吸引访客目光大有帮助，因为颜色深浅、饱和度甚至浓度都更加突出。

I Am Dan背后的设计师处理得非常棒，他在主页上使用稀疏的色彩，成为了这个概念的典范。他的网站简直就是零星几片红色分割开的留白。通过这种手段，红色突显了他作品集的链接，吸引访客浏览他的站点，有效地突出了他的网站，因此提高了访客响应召唤的几率。

I Am Dan

Zurb是家网页设计公司，他们网站也体现了留白如何能突出色彩。它的特点是主页顶部单一的纯色和不同页面的彩色图标（就在虚线附近）。除了极少的颜色使用外，首页的整体设计以留白为主。

Zurb

像绿色、橙色和红色这种简单的颜色，能够创造出令人愉快同时吸引注意的外观。上面提到两个网站，都采用了极简的用色方案，因为有如此大面积的留白。因此，用色非常机智得当，使用户赞赏有加。

留白不是浪费空间

网页设计师们越来越多抛弃之前的误解——认为设计页面时应该尽可能在屏幕内填塞每个元素、每种颜色。正如上面例子解释过的，留白被用于突出品牌内容、提升可读性与易读性、突显极简色彩时，展现出了强大的影响力。

俗话说“少即是多”，不论你怎么看，它的确适用于关于留白的一切观点。广义上讲，网页设计中的这种极简处理方式，如今正越来越盛行，这项趋势肯定能持续下去。

BrightByte

Who’s your Santa

Cory Gibbons

Metta Skincare

Webydo

Bookshelf

Plainwhite

Barley

Brad Hogan

Musio

Hop.in

CycleLux

Suki

Wholedesignstudios

Connectmania

Junlu

留白和负空间的术语近年来被交替使用，它们指画布（或数码设备屏幕）上不包含任何内容的空间。简而言之，留白就是空白。

但是留白空间不一定要是白色的。这个术语指的是任何与背景相同的空间。所以它可以是白色、黑色，甚至包含微妙的纹理。

空间是所有设计的重要组成。字间距和行间距决定了文字的易读性。如果文字靠的太近或太松散，就很难阅读。关键是找到平衡点。

留白也能把图片和其他元素区分开。回想一下你见到过的杂乱无章的网站。通常问题就在于元素间没有足够的空间。记得在元素和文字间留下足够的边距，为了更加专业的外观，应该进一步使用统一的边距。在设计多列网站时也是同样的道理（即使只有主栏和边栏），在垂直元素间加入适当的空隙，就创造出了明显的划分。

留白还有助于引导视线，为设计建立层次，区分什么是重点和关键点。视线会立即移动到被留白包围的元素上。留白为其中的元素增添了冲击力。

留白是创造平衡、协调的工具，也是组织网站内容的基础。没有留白，如何为元素分组？如何找到导航？你又怎么知道滚动有更多内容，或是应该从左上往右下浏览？所有这些视觉线索，都来自于设计中留白的合理运用。

重点使用留白的地方

虽然有效使用留白是任何设计的重要部分，还是有些地方值得注意。

请看以下清单：

• logo周围
• 每个导航按钮或图标周围，并围绕这些元素的“容器”
• 在两列文字间，在主体部分与边栏之间
• 当你使用视觉差效果时，在每页“滚屏”之间
• 在所有不同的元素之间，比如照片和文字之间，或是主体内容与页尾之间

—————————— 12例留白的有效运用 ——————————

Adhara

看看左侧的边栏和主体内容的距离。此处的留白确实在元素之间创造了很棒的区分，并使彼此通过自己独有的方式突出展示。

BeoPlay A9

背景与中央物体形成简洁的对比，创造了独特的视觉焦点。与优秀的对齐排布结合时，留白还有助于将注意力从图片引导至文字段落。

Fixate

在一个像这样丰富的设计中，留白告诉你的眼睛应该看哪里（还有点击哪里）。

Google

这个搜索引擎已经使用留白很长时间了，白色的海洋中，它只有一个简单的数据入口和一个logo。

Jac in a Box

留白在此处的运用是如此抢眼，因为它真的很大面积。将的视线从logo（本身的留白就运用非常完美）吸引到另一个角落的主体文字上。

Lapka

这家公司用了一种独具创意的方式，通过阴阳式的留白，将视线吸引到这些小物件上。

Leah Haggar

白色字体在黑色空间上很突出。精妙的底纹为整体效果增色不少。

Medium

这是一个使用非白色留白的绝佳案例。

Metta Skincare

通过对图片进行设计，留白为文字提供了绝佳的展现位置。

PandaWeb

留白直接将注意力转移至这家公司的业务上。

Square

这个网站将元素间的留白运用得很棒，作为图片和按钮的视觉焦点，也作为分栏的间隙。每个细节处的留白都精心处理过，创造了视觉冲击。

The Mealings

简洁、美观、舒适。留白——在设计与logo中——成就了这些特点，看起来简洁得不可思议。