网页设计中空白的十大用途

每周都有令人惊叹的免费文件Istock.com

虽然客户经常要求您尽可能多地将信息塞进页面,但经验丰富的网页设计师知道这会导致可用性噩梦。

相比之下,自信而小心地使用空白就是为内容提供呼吸空间。

此处列出的示例有效,因为访问者需要的所有内容仍然存在于页面上;所有那些缺席只会是混乱的。通过空白有助于创建一个平衡,易于导航的界面,您可以找到所需的内容而不会被淹没。

01. 沙发制造

This restrained design grabs attention through its measured use of whitespace

这种受限制的设计通过测量空白的使用来吸引注意力

这个软件和交互设计公司在其主页上使用了一个面对面的,丰富多彩的英雄形象,试图吸引你的注意力是多么诱人。具有讽刺意味的是,通过保持简单的东西,它采用了最小的设计,实际上更引人注目。测量到的空白空间传达了一种可靠性和可靠性的感觉,而沙发图标中的一个微妙的负空间片段则增添了额外的一瞥。

02. 苹果

Apple uses whitespace to focus attention on its gorgeous products

Apple使用空白将注意力集中在其华丽的产品上

如果Apple代表任何东西,那就是设计在科技中的重要性,而它自己的网站则表现得非常巧妙。当你拥有像这样华丽的产品时,你想要把注意力集中在它们身上,并且围绕它们的空白区域实现了这一点。

03. 由布法罗建造

The relatively complexity of Buffalo’s nav system is offset by generous amounts of whitespace

布法罗导航系统的相对复杂性被大量的空白所抵消

空白不仅适用于超小型布局,这是一个很好的例子。布莱顿机构布法罗的主页以五颜六色的六边形呈现其主要的导航元素,聚集在一起形成一个格子,并被大量平静的空白所包围。这是一个惊人的原始布局,既包含万花筒般的色彩和链接,同时为滚动体验提供悠闲,无压力的感觉。

04. Dropbox的

Dropbox uses child-like illustrations and calming whitespace to soothe the fears of the technophobic

Dropbox使用类似孩子的插图和平静的空白来缓解技术恐惧症的恐惧

作为科技世界的重要人物之一,Dropbox将儿童般的插图与在其主页上自信地使用空白结合起来,效果极佳。整体感觉是悠闲和平易近人的,对于初学者来说,一个可怕的复杂命题似乎是一个有趣和有用的尝试。

05. 摔倒了

This Seattle agency uses whitespace to add a touch of sophistication to its site

这家西雅图机构使用空白为其网站增添了一丝精致

Whitespace一直是杂志设计中常用的工具,西雅图咨询公司Fell Swoop的网站设计也体现了这种敏感性。略大于通常的字体和限制使用的空白为一些相当标准的公司网站提供了一些罕见的复杂性。

06. 用户体验神话

UX Myths practises what it preaches with this minimalist homepage design

UX Myths通过这种简约的主页设计实践它所宣扬的内容

教你如何提供良好用户体验的网站需要练习它所宣扬的内容。而UX Myths,一个收集最常见的用户体验误解的网站,肯定会这样做。其鲜明的,以文本为中心的主页立即回归互联网的早期,同时避免了那个时代的屏幕丑陋。在这个主页上实际上有大量的信息,但巧妙地使用空格意味着它根本不会那样。

07. 好奇的东西

This site for an extinct agency uses whitespace to draw attention to important information in the header

这个已经灭绝的机构的网站使用空格来引起对标题中重要信息的注意

Something Splendid是一家澳大利亚设计工作室,在2013年与另一家代理商Liquorice合并后不再存在。但是,互联网的本质意味着人们仍然会点击旧链接到他们之前的网址。现在迎接他们的是他们以前作品的可爱收藏。标题充分利用空白来提供距离感,并传达这是一个爱的致敬而不是“工作”的网站。比404页面好多少,或者对新公司的原因无法转移。

08. 香奈儿

Chanel harnesses whitespace to fashion a fabulous-looking website

香奈儿利用空白来塑造一个神话般的网站

时尚界一切都看起来很好,它完全理解空白的潜力,营造出一种精致复杂的氛围。香奈儿已经有107年的经营历史并且不计其数,其优雅的网站就是任何想要在电子商务中取得成功的人的榜样。

09. Lionel Durimel

Whitespace is central to making Lionel Durimel’s experimental portfolio site work

Whitespace是Lionel Durimel实验性投资组合工作的核心

正如我们之前所说,不仅仅是采用空白的极简主义设计。但如果你正在试验超极简主义,它确实非常方便。巴黎艺术总监莱昂内尔·杜梅尔(Lionel Durimel)令人惊叹的投资组合网站结合了透明文字,滚动效果和引人注目的色彩来真正推销他的服务,大胆冒险使用空白有助于将它们完美地融合在一起。

10. 谷歌

Google has kept its homepage design largely unchanged for two decades and counting

二十年来,谷歌的主页设计基本保持不变

Google.com是网络上空白的伟大爷爷。只是这个主页的一个小方块将吸引几乎难以想象的货币价值。但这家搜索巨头坚持自己的枪支,其设计自20世纪90年代以来基本保持不变。如果有人批评你在网页设计中使用空白作为“浪费的空间”,请指出他们是否认为世界上最成功的公司知道它在做什么......



翻译字数超限