网页设计中留白的重要性

什么是设计中的白色空间？

您的空白网页是您的主要空白区域，即所有其他内容和设计元素汇集在一起​​的画布：图标，全彩色图像，线条和几何形状以及文本。一旦这些元素填满你的画布，你将留下有意留空的区域：阴沟或胡同（列之间的空白区域），线高，句子和段落之间的空格，顶部，底部，左右边距，填充 – 都是白色空间。请注意，它们位于设计元素之间或单个设计元素之间，例如您选择的排版字形之间的空格。

在技​​术方面，设计师将白色空间称为负空间。这个技术定义消除了对白色空间的常见误解：尽管有这个术语，但白色空间不一定是白色的。它可以是黑色，棕色，黄色，红色 – 您选择的任何颜色 – 甚至任何图案或纹理和背景图像，满足您为网页添加电源的要求。

为什么白色空间很重要

白色空间在设计中有多种用途。它可以用于：

1. 美学。当您考虑如何设计着陆页以在移动屏幕上精美显示时，空白区域至关重要。
2. 有效的沟通。空白区域是一个重要的工具，可以平衡您在页面上展示许多项目的需求，以及为内容提供有效的视觉交流体验的需求。
3. 引导眼睛。我们的视觉能力只能集中在那么多，直到它被轰击我们的感官的太多元素拉紧。白色空间是平静因素，是允许读者消化您想要呈现给他们的东西的秘诀。

不同类型的白色空间

如果您想通过移动屏幕优化页面的视觉效果，您需要了解空白区域在与内容元素达成恰当平衡时所起的作用。如果您的读者对于阅读并犹豫不决，寻找更具视觉吸引力的网站，您就无法出售。您需要了解微观或宏观空间以及主动或被动白色空间如何协同工作，以使您的读者决定坚持使用您的页面或继续前进。

微白空间
微白空间是内容元素之间的小空间：线条和段落之间的空间以及网格图像之间的空间，以便分离菜单链接。微白空间直接影响您的内容易读性，用户的阅读速度和理解力。

宏白色空间
宏白色空间是您的大图片白色空间，所有页面内容元素的画布和容器。这是您的设计布局周围的空间。您可以在网站的右侧和左侧以及内容块之间找到它。

“如果您想通过移动屏幕优化页面的视觉效果，您需要了解空白区域在与内容元素达成恰当平衡方面所起的作用。”

大多数设计师都会向您指出Google在实现宏空白空间方面的教训。它标志性的主页非常简单，消除了用户的注意力，因此更容易关注用户为什么在那里：做一些搜索。由于丢失了任何大块内容，网页可以轻松快速地加载 – 即使在远程过去，当互联网速度通常令人沮丧地缓慢爬行时。

设计师还将白色空间视为主动或被动：

1. 活动空白区：应用空白区域以改善页面结构的布局，同时引导用户浏览内容。
2. 被动白色空间：白色空间为布局增添了优雅，而不会引导读者。

7移动白色空间设计的最佳实践

不可否认，需要在移动显示屏上挤入如此多的内容，这限制了您可以使用的空白区域。由于大量的空白空间不受影响，因此智能，平衡的方法是唯一的方法。使用白色空间，同时牢记该领域的一些最佳实践。

1.手指设计

在设计优化移动观看时，您首先需要考虑的是将点击目标限制在最小30到40像素，这是MIT Touch Lab（PDF）研究的触摸目标尺寸的理想范围。当然，除了大小之外，您还需要在触摸目标之间添加空白区域，以便用户达到他们所要达到的目标。

2.技术性：分配≤15分的用户注意力

当您感到有兴趣在页面上推送更多内容时，设计师Paul Boag建议为自己分配15点用户注意力。让你添加到步伐的每个项目花费1点。

如果一个屏幕比另一个屏幕更重要，您需要为其分配额外的点以使其脱颖而出。只有有限的点可供您使用，很明显您不能将空白推出等式。

3.创造性地使用空白区域

您可以考虑使用对比色，形状，字体大小和不对称负空间来为您的布局提供更多动力。作为一个活跃的设计元素，白色空间与周围元素的感知相关。

4.重新排列导航菜单

当您处理响应式设计时，您需要为您的空白区域设置不同的断点，以便为您的客户提供持续无缝的体验。

如果您的网站偏好多个链接，您别无选择，只能使用三栏汉堡图标查看隐藏菜单。不喜欢汉堡图标，觉得看不见的东西不在乎？然后去找一个标签栏，就像Facebook一样，摆脱了汉堡包而偏向于标签。请记住，Facebook的内容比许多网站更多，所以你很可能也不会失去那个。