如何利用空白来改进你的设计

当听到这个术语时空白你的思维可能会跳跃到白边栏将内容夹在中间。然而,空白(或负空间)也指除了标题和文本中的字母间距之外,页面上图像或其他元素周围的空白区域。

几乎每个网站的设计都需要一些空白(不包括像Million Dollar主页这样的网站)。如果处理得当,它会给你的网站一个更优雅的外观,而不会牺牲太多宝贵的屏幕空间。

不相信吗?"我不花钱请人留空:“你说什么?好吧,这里有四个你可能想要改变主意的理由。

# 1:吸引注意力

让我们从最简单的开始。虽然网上最有效的吸引眼球的策略值得商榷,但我们都同意什么都不吸引眼球——什么都不吸引。这就是为什么留白是一种有效的吸引注意力的方法,因为你可以用它来更快地把注意力吸引到感兴趣的地方。

例如,您可以用文本和图像使页面混乱,并突出显示重要的页面元素。或者你可以在关键图片周围留出更多的空间,或者让字体变大(增加字母和行间距的空白),让它们以更整洁的方式在观众面前脱颖而出。Arfa在她的文章中谈到了联络点的重要性Hocus焦点:焦点的重要性和有用的网页设计技巧

你可以用各种各样的页面来实现,比如你的主页,登陆页面,转换漏斗,作品集页面等等。一定要看看Nataly的帖子处理空白:网站设计与开放的感觉更多网站设计的例子。

关键的原则很简单:关键对象周围的空白会吸引观众的注意力,因为周围没有分散注意力的元素或杂物。

2 .建立视觉秩序

你如何知道标识和网站主页之间的区别?首先想到的是元素的大小。可能不太明显,但从设计的角度来看非常重要的是元素周围的空白空间的大小。高优先级的元素周围有更多的空白空间,这就是它们突出并吸引观众注意力的原因。

这里有一个简洁的设计,展示了视觉层次。

注意到没有任何线、颜色或分隔符来分隔不同的部分吗?然而,你仍然能够区分导航元素与屏幕选项、标题、社交分享按钮和联系信息。如何?一个词:空白

通过实现这种视觉优先级的层次结构和利用空白,您的设计将显示出消除歧义的平滑视觉流。观众知道什么是重要的,下一步去哪里。

登录页面通常就是一个很好的例子。您有一个大标题,其中包含的空白比后面的文本更多。而这一文本进一步继续扩大现在就订阅!按钮周围有最多的空白。这是一个很常见的例子,可以在日常的浏览体验中看到。

让我们来看看GTmetrix。

GTmetrix的主页利用空白来建立强大的视觉秩序。当你登陆网站时,你会立刻被它的标题所吸引分析按钮。它的对称布局和大字体大小鼓励访问者使用网站速度分析工具。

3 .把团队分开

如果你还这么想的话空白浪费的空间是同义词,那么让我来告诉你如何使用它来节省空间。

如果你发现你的屏幕空间快用完了,而你的产品、服务或任何你想让你的观众关注的东西还在不断堆积,那么你就有可能把它们排在一起,把东西放得太近。这导致该部分中的项看起来很相似或很少受到注意,因为它们与噪声混合在了一起。

解决方案可以是不突出你的产品,而只是改变它们的大小,改变它们的布局和方向,或两者的任何组合。这将在对象之间创建一些空白,将它们彼此分开,并使您的查看者更容易注意到这一点。

让我们看看CoSchedule是如何设计它们的特性部分的。

CoSchedule的特性部分遵循了允许一次显示一个特性的布局。单独地,它由一个简短的描述和一个图像组成。由于一次只能看到一个特性,所以它会吸引您的注意力并将其保持在那里。

您还可以通过利用空白将类似的字段分组在表单上。它使表单更容易阅读,并鼓励访问者填写表单。几乎没有空白的表单看起来很拥挤,似乎很难填写。更重要的是,他们还会给人留下这样的印象:表单要求的信息太多,而实际上它可能只要求最基本的信息。

这里有两个表单的例子——一个有空白,另一个没有。查看带有分隔符的表单如何拥有更多空白并将表单字段分组在一起?

# 4:更好的可读性

最后但并非最不重要的是,空白是文本可读性的支柱。如果这篇文章的行距很小,你就无法通读全文。

空白太少会使文本看起来很拥挤,很难阅读。如果留空太多,除了可能会使文本看起来脱节之外,还会浪费空间。这就是为什么世界顶级设计师如此重视字体和排版的原因。

上面的谷歌字体示例描述了两种字体-BioRhyme扩大饼干。BioRhyme Expanded使用了太多的空格,而Cookie则难以阅读,因为它的单个字符没有足够的空格。

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

不同的字体根据样式使用不同数量的空白。然而,另一个主要因素是字体大小。标题更大,利用更多的空间,以突出的观众。其他一些使用空白来改善和增强阅读体验的领域包括行间距和段落边距。

结论

总之,设计中的白色空间是艺术与科学相遇的场所之一。这种艺术的科学应用是有效设计的必要条件。它是通过简化走向美化的一步;提供更多通过更少。

让我们快速回顾一下利用留白来改进设计的主要好处:

  • 白色空间可以让你的设计更加简洁吸引用户的注意力去你想去的地方。
  • 集视觉秩序使访问者能够很容易地立即识别出重要的页面元素,如call to action按钮。
  • 使用留白可以让你的设计看起来更整洁,更少的凌乱分组在一起
  • 字体和版式中的空白提高网站的可读性

我希望我已经能够说服你,留白不是浪费屏幕空间。如果有什么不同的话,那就是它和你网站上的实际内容一样有价值,如果不是对形成其结构和提高可访问性更有价值的话。

你认为你可以利用留白来改善网站的设计吗?如果是这样,如何?我们很高兴收到你的来信,请在下方留言告诉我们!

2019-12-31 16:59
相关热门