由浅入深学留白！教你如何在网页设计中运用负空间

推荐：留白的意义是为了实现产品的目标，而大空间和小空间的区别也让留白更加细致，细致的结果也变成高品质的极简主义。

由于屏幕是有限的，因此网页设计也是有限的。可以这么说，在屏幕这个小小的盒子中，每个像素都是一块不动产。

就算是菜鸟，也懂得一个页面不能加载过多的内容，但涉及到究竟应该规划多少留白，包括经验老道的设计师或许也很茫然。

留白，另一说为“负空间”，这两个词常常互换使用。它们共同所指的都是屏幕中出现的元素之间的一种关系。所谓留白不一定是要白色，或黑色。就算是图案、色彩或纹理背景都可以被称为留白。负空间是在内容外创造一个空白的环境，好让观者将注意力更加集中于内容。

这篇文章中，我们将讨论，怎样运用设计师的锦囊妙招中的超强致胜工具：留白。

留白的原因

就像已经被大家所讨论过的，负空间一开始是作为审美而不可或缺的一部分。

在网页设计中，在哪里留白显得更加重要。可以这么说，它决不仅仅处于视觉审美的需要，它得肩负更重要的角色，即在视觉审美与引导用户之间达成完美平衡。而且，如果现在有一段文字，留白还需在此基础上让文字清晰，创造具有可读性的环境。

总的来说，留白直接的影响如下。

1、眼球扫描

在网页中，两块较大内容元素之间的空间（在此称大空间），这类留白能吸引并引导用户的眼球扫描页面的方式。当运用得当，就能引导用户的视线去注意那些你想突显的元素。这在品牌标识展示或增加用户交互行为的时候最为有效。

2、清晰度

在两个较小的内容元素之间的空间（在此称小空间）诸如一个文字，或一行文字，列表，图标等，恰当的留白也能让这些元素更加易于辨认。

3、视觉审美

当你看到一张大图片，留白在视觉审美中发挥了很大的作用。举例来说，如果内容乱七八糟绝不会是一张好看的图片。

4、高品位

丰富的留白将为你的页面灌注一种精致优雅的氛围。

为了更好的理解和运用它，我们将要梳理不同类型的留白（大空间和小空间），以及运用它们的不同的方法（被动和主动）。

大空间和小空间

网页设计中，在哪里运用以及怎样运用负空间将取决于它们的角色。简言之，我们把这些角色大致分为大元素和小元素。

1、大元素的留白

大元素的留白是涉及到两个大型元素之间的留白。主要运用于：

总体内容

独立的不同元素

文本分列

Margin

Padding

图片之间的距离

译者注：这里的Margin和Padding指的是网页设计中元素标签外部范围的区域。参考下图可以帮助理解。

这类型的留白空间很大程度影响用户的视觉流，不管是潜在引导或者强势推动都可以让注意力引导到你想要他们停留的地方。但在此要强调的一个法则即是距离越大动力越强。想要打破平衡，然而，由于太多的留白违反了格式塔原则，其结果就是消弱了对象间的关系。

让我们看看下面这个网站，以此作为例子来说明留白是如何诱发用户交互行为。

大多数用户首先都会注意到页面标题，也就是“Digital art&Experiments”这句话，而在它外围的则是大面积的留白，这样就使得用户的注意力完全集中于此。

尽管页面的顶部和底部只有一侧留白，但它们也同样可以引起注意。总而言之，在此，留白的区域很好发挥了吸引注意力的作用，而设计也就似乎看上去不可思议的简洁起来。

设计师实际上是采用留白区域作为一个空白幕布，以便给观众留下惊喜，好让我们可以看到他的作品的丰富细节。一旦鼠标移动到底部导航的任一栏目时，幕布上就会出现作品的图片作为背景全屏展示。这种效果创造出类似年幼时的一种探索和发现的乐趣：无意间闯入一片空白的场所，发现了每个抽屉都藏匿着丰富多彩的视觉盛宴。

你可以试试鼠标滑过时屏幕上发生的戏剧性效果。

通过留白区域作为工具来诱导用户注意到他的作品，设计师创造出了一种新鲜奇特的体验。在第一个作品出现后，我们就很想看看他还有哪些佳作。这感觉蛮吸引的，因为你将会抑制不住地想要找到最为重要的内容。但这都要建立在一个完美的点燃你好奇的切入点基础上。

2、小元素的留白

另一方面来说，当设计师们谈到小元素留白，他们通常是指的较小的元素或是较大元素中的次级元素的留白。他们包括：

• 字体
• 行距
• 段落
• 列表
• 按钮
• 图标

小元素的留白最多被用在强调网站整体的清晰度上面，尤其是在排版的清晰度上。当你试图利用文字间的留白打破平衡，保持清晰易读的同时又能不至于太过而让它偏离了重要的内容。我在这里，仅仅是一个提议，建议将英文行距设置为1.5px最为完美。（译者按：这里的作者没有考虑中文字体的行距）

就像格式塔规律中谈到的，让距离较近的元素视觉上更为接近，这将暗示它们具有相同的功能。小元素的留白将会让用户知道按钮与链接之间的关系，而同样的留白将强化这种机制，这在用户使用过程中进一步增强认知度。

尽管留白被分为了大元素和小元素两种类型，每一种类型也有主动与被动两种用法。

1 2 下一页 查看全文