作者最大原文链接
如果你常听到产品设计师和工程师之间的设计QA会话，你可能会听到产品设计师的看法如下：
“你可以在这里和那里增加8个像素吗？就是说，我需要16像素的留白。“
在Wayfair，我们很幸运地能与工程师一起工作，同时我们的工程师对设计师的不断追问特别善解人意。不过，我相信有些工程师认为我们是“像素狂魔”。为了公平起见，我承认我们中的几个人是这样。但是相信我，还有让我们疯狂的方法。
那么，为什么产品设计师对间距这么挑剔呢？
间距，也称为空白空间，是页面布局的单个元素之间的空白空间；这些元素可以是复件，图像，卡片，按钮，图标等的部分。当正确使用时，空白区域可以使布局具有视觉清晰度和平衡感。
把空白想像成呼吸新鲜空气。正如人类需要空气呼吸一样，设计需要空白的空间来呼吸。是的，这可能听起来老生常谈。但我还是要强调这一点。
那么Wayfair如何处理白色空间？
正如我之前所说的，有一种师我们疯狂的方法。在Wayfair，我们的产品设计团队遵循严格的间距规则，以确保站点的一致性和易于维护。该规则嵌入到我们的设计工具包中，这是一组用户界面设计元素，它是我们所有网站设计的基石。规则规定，每个设计元素之间的间距应该是8像素的倍数；就是说间距可以是8,16,24,32,40像素等等。这一规则为我们使用空白空间带来了意向，并在我们的网站体验中创造了视觉一致性。
留白如何优化用户体验？
有助于聚焦
空白空间是一个有助于指导用户体验的工具。我们使用空白区域为我们的用户创造焦点，吸引他们注意某些元素。页面上特定元素周围的留白越大，该元素的重点越突出。在下面的示例中，通过聚焦保证了CTA按钮和主要消息的清晰度。
不幸的是，有时候这种留白被认为是种奢侈。这是罕见的，所以当持续留白时，享受留白。在典型的电子商务页面上，产品设计师面临着平衡多个CTA，次要链接，图像，副本以及列表带来的挑战。下面的例子展示了我们的产品详细信息页面（PDP），这个页面承载了大量的用户需求。策略性放置的空白空间有助于降低用户浏览此页面上的视觉噪音，有可能增加转化率。
改善视觉组织
除了突出重点，留白空间在组织一个页面的视觉中起着巨大的作用。留白空间对于明确不同关系和不同目的分割起着至关重要；它也是格式塔原理背后的动力，其中规定：
彼此接近的对象或形状似乎形成组。
明确定义页面的不同部分会增加用户对网站体验的信心；让我们的用户在一个混乱的布局中思考，是每个产品设计师想要避免的。以下示例展示了Wayfair的主页，如果留白空间未正确使用，页面可能会很容易出现压倒性的。
增加可读性
除了定义页面的组织之外，留白可以大大提高页面的可读性。重要的是要注意复分割线之间的间距和甚至字母之间的间距，因为深思熟虑的间距让用户更容易消化。更多的间距通常更好，但是太多可能会导致复制线条断开连接。关键在于找到正确的平衡。
Medium（是的，这个网站）在考虑复制设置中的留白空间做得很好。如果您在较大的屏幕上阅读这篇文章，请查看边缘空白的巨大空间。Medium知道是什么。
留白的常见问题？
1.“留白是在浪费空间！”
这是一个神话。留白空间不是浪费空间。当留白没那么必要的时候，一些股东会要求用内容填充这些空间。每人都听过“少是多”。这适用于任何给定页面上的内容，较少的视觉噪声使得更好的用户体验。在Wayfair的结帐流程（见下文），主要CTA之下的留白空间可能很大，但是它可以平衡和支持本页面上的元素。
2.“留白空间将内容推入折层中，用户不会看到这个内容！”
用了留白，用户会滚动更多的，相信我。有这个神话，用户不会总是滚动查看页面上的所有内容。因此，我们的一些股东要求一个页面的大部分内容都不要折叠。
用户已经演变并变得更加适应滚动。绝对有些元素更适合折叠，但重要的是不要限制使用留白空间以适应折叠。
结论
每个产品设计师都希望设计出最佳的用户体验；考虑到这一点，留白空间是一个强大的工具，可以从用户界面的角度帮助实现这一点。它应该大量整合到设计过程中。
认为你使用的留白太大了？是不是有一个很好的机会。如果有什么，你可能没有充分利用。当有疑问时，添加更多的留白空间...
