江门做网站：如何使用白色空间改善您的设计

2019.08.09 mf_web

147

当听到白色空间一词时，你的思绪可能会跳到白色的空边栏，将内容夹在中间。但是，除了标题和文本中字母之间的间距外，空白区域（或负空格）也指图像周围的空白区域或页面上的其他元素。

江门做网站拥有一些空白区域对于几乎每个站点的设计都是必不可少的（不包括像The Million Dollar Homepage这样的网站）。正确完成后，它可以为您的网站提供更加精美的外观，而不会牺牲太多珍贵的屏幕空间。

不相信？“ 我不付钱来容纳空地，”你说？好吧，以下是您可能想改变主意的四个原因。

＃1：吸引注意力

让我们从最简单的一个开始。虽然最好的在线注意力攫取策略是一个备受争议的问题，但我们都同意什么不会引起注意 - 什么都没有。这就是使白色空间成为一种有效的驾驶方法和引人注目的方法，因为你可以用它来更快地引起人们对目标的关注。

例如，您可以使包含文本和图像的页面混乱，并突出显示重要的页面元素。或者你可以在关键图像周围留出更多空间，或者使字体更大（增加字母和行间距的空白区域），使它们以更加整洁的方式突出显示。Arfa在她的职位Hocus焦点：焦点的重要性和网页设计中的有用提示中谈到了焦点的重要性。

您可以使用各种页面执行此操作，例如您的主页，登录页面，转换渠道，投资组合页面等。请务必查看Nataly关于处理空白区域的帖子：网页设计以及更多网站设计示例。

关键原则很简单：关键物体周围的空白空间将观众的注意力集中在它上面，因为周围没有分散注意力的元素或杂乱。

您如何知道徽标与网站首页之间的差异？想到的显而易见的事情是元素的大小。从设计的角度来看，可能稍微不那么明显，就是元素周围的空白空间的大小。优先级较高的元素周围有更多的空白区域，这就是它们突然出现并吸引观众注意力的原因。

这是一个整洁的设计，展示了视觉层次结构。

注意没有任何线条，颜色或分隔线可以将不同的部分分开？然而，除了屏幕选项，标题，社交分享按钮和联系信息之外，您仍然能够分辨出导航元素。怎么样？一个字：白色空间。

通过实现视觉优先级的这种层次结构并利用空白区域，您的设计将呈现平滑的视觉流程，消除歧义。观众知道什么是重要的，以及接下来要去哪里。

登陆页面通常就是一个很好的例子。您有一个大标题，其中包含的空格比后面的文本多。而该文本进一步继续大订阅！周围有大量空白区域的按钮。这是一个相当通用的例子，可以在日常浏览体验中看到。

我们来看看GTmetrix。

GTmetrix主页利用空白区域建立强大的视觉秩序。当您登陆网站时，您会立即看到其标题和分析按钮。它的对称布局和大字体大小鼓励访问者使用网站速度分析工具。

如果您仍然认为空白和浪费空间是同义词，那么让我告诉您如何使用它来实际节省空间。

如果你发现自己的屏幕空间不足，但你的产品，服务或其他任何你希望观众注意的东西只是不断堆积，那么你就冒着在剩余的空间里将它们排成一行并将物品靠近放在一起的风险。这导致该部分中的项目看起来相似或很少受到关注，因为它们与噪声混合在一起。

一个解决方案可能是，不是突出显示您的产品，而只是改变它们的大小，改变它们的布局和方向，或两者的任意组合。这将在对象之间创建一些空白区域，将它们彼此分开，并使观看者更容易接受它。

让我们来看看CoSchedule如何设计他们的功能部分。

CoSchedule的功能部分遵循一种布局，允许它们一次显示一个功能。单独地，它包括简要描述和图像。由于您一次只能看到一个功能，它会引起您的注意并将其保留在那里。

您还可以通过利用空白区域在表单上将类似字段组合在一起。它使表单更容易阅读，并鼓励访问者填写它。几乎没有白色空间的表格看起来挤满了，看起来很难填写。更重要的是，他们还给人的印象是，表格要求提供太多信息，而实际上可能只是要求提供必需品。

这是两个形式的示例 - 一个带有空白，另一个没有。看看带有分隔符的表单如何有更多的空格并使表单的字段组合在一起？

最后但同样重要的是，空白是文本可读性的支柱。如果所有文本都以最小间距填充在一起，您将无法阅读此文本。

空白太少会使文本显得狭窄而难以阅读。留下太多空间，除了冒着看起来脱节的文字之外，你还浪费了空间。这就是世界顶级设计师如此重视字体和排版的原因。

上面的Google字体示例描述了两种字体--BioRhyme Expanded和Cookie。BioRhyme Expanded使用了太多的空白，而Cookie有点难以阅读，因为它的个别字符间距不够。

现在让我们将它们与两种均衡的字体进行比较：

根据风格的不同，不同的字体使用不同数量的空白区域。但是，另一个主要因素是字体大小。标题较大并且利用更多空间以便对观看者来说是突出的。使用空白区域来改善和增强阅读体验的其他一些领域包括行间距和段落边距。

总而言之，设计中的白色空间是艺术与科学相遇的场所之一。为了使设计有效，该技术的科学应用是必要的。它是通过简化美化方向的一步; 通过更少的提供更多。

让我们快速回顾利用空白区域改善设计的主要好处：

我希望我能够说服你，白色空间不会浪费屏幕空间。如果有的话，它与您网站上的实际内容一样有价值，如果不是更多的形成其结构和改善可访问性。

江门做网站