留白

1、留白可以更好地突出页面主体
少即是多，在一个界面当中元素越少，用户的视线就越不会被各种繁复的元素所干扰，就能够更好地让用户的视线聚焦主体。
例如：谷歌搜索主页，页面大部分的留白是为了让用户聚焦在视觉中心的搜索上。

2、留白可以更好地增强信息层次感
文字太密、图形元素太多，会让整个界面显得凌乱，降低用户体验。在界面中，使用留白可以增加区块或元素的呼吸空间、增强信息的层次感，用户更容易找到自己想要读取的关键信息。

3、留白可以更好地提升用户阅读和理解
在界面中，太紧密的字间距、段间距，没有明显的区分隔断容易降低用户阅读的体验。合理的留白可以让段落文字更有明确的界线区分，让页面更加有逻辑和调理，也可以让用户更好地阅读和理解，提升用户体验。

4、留白赋予界面更多想象空间
留白可以跟讲故事一样，给人留以想象的空间。在界面设计当中，采用留白可以让画面达到一种均衡的视觉效果，以达到一种“此时无声胜有声”的感觉。
例如：无印良品和苹果的网站都采用留白，但这两者给用户营造的想象空间却不一样。

信息密度高，想让用户更聚焦在某些内容上的时候。

留白常被用于各种设计当中，在网页设计中，常在幻灯片、区块边距、布局、行距、图表等地方使用。具体使用方法如下：

###### 1、 图片留白
网站的banner图常用留白来抓取用户眼球。主图在选取的时候尽量选择简约的图片，图片上切勿使用过多设计元素。再来，给图片的主体尽量留出足够多的独立空间。

有些时候，一张简约的主图上只加一个标题和一个按钮就可以营造出一种高级感，例如苹果官网的banner图就有这一特点。

下图是原研哉为无印良品设计的系列海报中的其中一张，利用地平线的透视对视觉产生强烈的冲击力，加上“无印良品”文字LOGO。没有其他多余的元素，但足以体现了以“人”为中心的设计思想，也很好的凸显了无印良品的主题。图中没有过多的元素，也没有过多的解释性文字，但是无印良品的品牌特点反而得到体现。

###### 2、 文本留白
文本留白不难理解，指的是网页中区块的文字段落要留适当的空白。一个网页内的段落可以通过CSS样式设置 Margin和Padding（ Margin和Padding指的是网页设计中元素标签外部范围的区域，参考下图），也可设置段落的行距来达到留白的效果。标题和段落之间，行与行之间，适当的留白可以让文字有一定的呼吸感，也有助于用户阅读。

可以从下图看出，文字段落之间不留白可读性不高。右边的标题和段落之间、行与行之间和段落与段落之间都留了一定的距离，所以整体会显得更为整洁和可读性高，这些在网站当中用 Margin 、 Padding 和Line-height可以来调整留白的大小。

切记，行距大小不是越大越好，一定要适当。一般给设置的段落行距都是 1.5倍，标题与段落之间的留白大约在20px，可以作为参考。

###### 3、 区块留白
在网页当中，每个区块与区块之间也要适当的留白，而这个留白主要还是体现在 Margin和Padding 上。如果取消两个区块的 Margin和Padding ，那两个区块的内容会聚集在一起，这样不利于观者去区分区块之间的关系，也不利于阅读。
无印良品官网红色部分就是区块间的留白。

区块的留白可以区分区块之间的关系。区块周围留白越多，越能醒目突出。

###### 注意事项
误区一：留白就是留出白色
留白最常见的误区，就是认为是留出白色，事实上并非如此。留白的真正含义是留出空间，背景可以是白色，可以是黑色亦或是其他颜色，也可以是没有过度装饰的，整体看来是简洁的设计风格。

误区二：留白能适用任何场景
都知道留白留得好，容易出效果，但不是所有场景都适用的。比如一些促销、热闹的节日，过度使用留白就不合适了。促销界面的设计更多要传递热闹与实惠的调性，而留白更多传递的是高格调与安静的气质，两者如果结合会造成一定的冲突。