留白是网站设计中一门重要的工具，它能给网站带来很多益处。恰当的留白可以有效突出网站的主题，传递核心理念，吸引访客的注意力，能够简化画面，使各种元素的呈现更有层次、更加清晰，提高网站内容的可读性和可用性，还能增加网站的质感，树立独特的形象。留白通常意味着在页面的不同区块之间找到一个平衡点，在网站中运用好留白并不容易，但在响应式布局中用好留白难度就更上一层楼了。这是因为响应式网站通常需要设置不同的断点适应电脑、平板、手机等多种设备，页面上的留白必须确保在不同的设备上都能给用户提供友好的浏览体验。不过不用担心，小飞今天就是来送福利的，给大家介绍一下什么是留白，以及怎样在响应式网页设计中留白。

　　

　　什么是留白?

　　

　　留白最早是中国艺术作品创作中常用的一种手法，一些艺术大师比如画家等往往是留白的高手。在他们看来，留白有很高的审美价值，能够给观众留下想象的空间，做到"以无胜有"、"此时无声胜有声"。在网站中使用留白也能产生相似的作用。网站中的留白，又称负空间，是指合理安排各种设计元素的空白空间，达到页面布局干净、精致的效果。但是，很多人经常会走进一个误区，认为留白就是将网站的某块区域设置成白色。留白的"白"并不是指颜色的"白"，而是指的是空白的"白"，代表的是一种无装饰、无额外元素的状态(下图灰色的区域也是一种留白)。它的表现形式多样，图片、图表、外边距、列甚至是文字之间的空间都是留白的一种。

　　

　　如何在响应式网站中留白?

　　

　　响应式网站最大的一个特征就是在适应电脑屏幕的同时在手机等小屏幕上呈现良好，网站上留白是否恰当也要看它是否能够满足不同设备的需求，主要还是针对手机而言，以下几点建议也是基于这一点展开的。

　　

　　重新设置导航菜单

　　

　　导航菜单是做网站时首先会遇到的一个设计难点，但很少有设计师会将导航菜单与留白结合在一起。事实上，导航菜单处也应该注意留白问题。这是因为如果导航菜单处没有足够的留白空间，网站在小屏幕上进行显示时，极有可能会出现菜单栏断行(特别是在水平导航菜单的情况下)，视觉体验较差的效果，另外，移动用户在点击菜单项时也容易出现点击错误的情况，会影响了用户的操作体验。

　　

　　如何做好导航菜单的留白?如果导航菜单栏上的选项太多，而它们确实又是不可获取的，我们可以使用隐藏式菜单，比如汉堡图标，给网站留足空间。不过在使用隐藏式菜单之前，我们可以给导航菜单做一些设置，让它在不同的设备上有以最适合的方式展现，下面小飞将通过两个栗子来具体分析如何使用。

　　

　　就FLA这个网站而言，如果在电脑桌面上显示时，它会以上图这种侧面的导航菜单形式出现，而在小屏幕设备上展现时，左侧的导航菜单会隐藏到汉堡图标中，给用户充足的空间。除此以外，你可以看见左侧的菜单选项之间是有一定距离的，这是设计师特意添加的，更方便用户在小屏幕设备上进行点击等手势操作。

　　

　　相对FLA的网站，Dorigati在导航菜单上的设置要更复杂一点。当用户通过电脑等大屏幕进行浏览时，导航菜单会水平排列在网站上;如果屏幕再小一点，导航菜单会以两行呈现在用户面前(如上图)，有点栅格系统的意味;而当网站需要适应960px的断点时，导航菜单的布局会从水平变成垂直的，出现在网站的侧面，Logo也会相应的改变位置;如果断点再小一点，导航菜单就会隐藏到汉堡图标中，出现在页面的上方。这种方法听上去比较繁琐，但是它确实是比较实用的一个解决方案，可以让网站在确保恰当的留白的同时给不同设备的用户提供自然、友好的浏览体验。

　　

　　更加关注垂直方向的留白

　　

　　过去在设计针对电脑桌面的网站时，我们常常会注意网站上不同元素在水平方向上的间距。但当我们开始安排响应式网站的留白时，我们应该将更多的注意力放在元素垂直方面上的距离。这是因为手机屏幕常常是竖直的。如果不注意元素在垂直方向的间距，会影响各种元素在手机等小屏幕上的显示，影响视觉效果的呈现。另外，垂直方向空白区域或留白的多少从某种程度上也决定着网站在手机等移动设备上的加载速度。下面还是让栗子来证明吧!

　　

　　下图是Jisc网站在手机屏幕上的显示，看上去比较舒服，这都归功于网站设计师在字体、图片等元素之间留足了一定的空间。Jisc网站在电脑桌面呈现时会有很多水平导向的区块，其实下图中的Shared services、sector deals是并列关系，在电脑屏幕上是以水平方向呈现的，但设计师并没有只关注水平方向的间距，同时也考虑到了网站在小屏幕上垂直呈现的习惯，让网站更清晰、可读性更高。

　　

　　网站上的留白还可以给不同的区块划分界限，给用户一些喘息的机会。Mashable的博客就利用负空间做到了这一点。Mashable在电脑上会显示为3列：小图+文本，中图+文本，大图+文本，如果在手机上也以这样的方式呈现的话，可能已经惨不忍睹了。不过设计师考虑到了手机的竖屏，在不同元素垂直方向留足了空间，让不同文本区块之间界限清晰可见，也让界面看上更加简洁。

　　

　　因此，在我们设计响应式网站的留白问题时，记得不要总是从元素的水平方向出发，也要多考虑不同元素、不同区块在垂直方向上的间隔、距离，毕竟所有元素在小屏幕上都是倾向于竖直展现的，这样才能真正发挥留白在响应式网站中的作用。

　　

　　字体和间距

　　

　　做好响应式网站中的留白还需要注重文本的字体。除了改变字体的大小，我们还可以调整字体的行高、字距、颜色甚至是两个文本区块之间的距离使文本更容易阅读，画面看上去更加和谐。

　　

　　The Next Web网页在电脑上显示时页眉和导航菜单之间留的空白区域比较大，但在移动设备上显示时，空白区域缩小了(见下图)，页眉TNW文本的字体有所减小，图片下方文本段落之间的间距有所拉大，这都是TNW根据自身特点合理运用留白的体现。