留白能为你做什么

WebFX总统。Bill在互联网营销行业有超过25年的经验,擅长SEO, UX,信息架构,营销自动化等。William在希彭斯堡和麻省理工学院的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研发项目提供了基础。

留白是一个强大的工具,可以把你的设计提升到一个新的水平。也就是说,如果使用得当的话。

揭秘:留白是浪费的空间

早在1930年,开创性的瑞士设计师和印刷师Jan Tschichold就写道,留白“被视为一种活跃的元素,而不是被动的背景。”很久以前,Tschichold就发现留白空间不仅仅是死空间或浪费空间,它本身就是一个设计元素。让我们谈谈利用留白可以改进的一些东西。

可读性

互联网用户不要阅读,他们扫描.这只是意味着扫描比逐字逐句阅读要多得多。因为浏览内容是人们的天性,我们希望确保尽可能让他们轻松浏览。

利用好留白可以帮助读者浏览页面和信息,找到最重要的关键点。威奇托州立大学进行的一项研究表明,拥有最佳的行距和页边距(文本之间和周围的留白)理解能力提高。这项研究从根本上证明了留白会影响阅读体验。

许多设计可以简单地通过增加文本的前导来改进。类似于领先的网页设计是行高CSS属性。对于网页设计来说,很受欢迎行高与字体大小的比率为150%。

例如,如果字体大小是20px,那么行高30 px。150%的比例取决于你使用的字体,但这是一个很好的起点。比较下面两个段落。

文本内容和字体大小是一样的,但是行高而且填充属性是不同的。哪个版本读起来更容易、更愉快?版本1的CSS属性:

字体大小:16 px行高:16 pxpadding-left:3 pxpadding-right:3 px

版本2的CSS属性:

字体大小:16 px行高:24像素padding-left:15个像素padding-right:15个像素

有足够的空白行高而且填充,我们可以大大提高可读性。

安慰

留白可以使设计看起来更赏心悦目。查看下面的示例一篇关于留白的文章在A List Apart:来源:alistapart.com两个版本的文本内容相同。然而,右边的那张有更多的留白,因此阅读起来更舒服。

相比之下,左边的版本在视觉上显得突兀而繁忙。

眼睛流

留白是引导用户浏览的好工具焦点在一个设计。看看留白是如何有效地在苹果iMac网页即使在它的右边有一个巨大的、彩色的iMac竞争图像,你的眼睛仍然会停留在产品名称和标语上,因为它周围留白的策略使用。

强调

在每一个设计上,总会有更重要的元素比其他人。使用留白是让你的主要元素获得更多关注的最简单方法之一。从本质上来说,这是由于在它们之间有更少的竞争性视觉效果。

例如,你的行动号召很重要。即使页面上有大量其他信息,为了让它们脱颖而出,你可以用留白将它们包围起来。以下面Marketcircle网站截图上的呼吁行动按钮为例。

由于按钮的视觉重量和周围的空白,即使页面有很多其他元素,按钮也很难被忽略。

分组

让我们看一下下面的例子。通过简单地在列表项之间添加空白,我们立即在列表中创建逻辑分组,而不需要消耗我们的大脑:我们对列表所做的只是添加了一些空白;我们没有改变颜色、字体大小、添加文本效果或任何复杂的东西。

总结

正如我们在例子中所看到的,留白在我们的设计中是一个非常有效的工具。可读性、舒适度、眼神流动、强调和分组只是一些如果我们使用可以增强的东西留白是一个积极的元素。

关于留白的额外阅读

这些将帮助你学习如何更有效地使用留白:

相关内容

关于作者

约翰·麦克弗森在媒体外科工作,提供ExpressionEngine发展服务。他经营着一个关于网络开发的播客和视频系列网络负载

WebFX职业

加入我们的使命,为全球的企业提供业界领先的数字营销服务,同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!