当提到网页设计中的空白时,苹果或谷歌等例子可能是你第一个想到的。虽然这些公司在他们的设计中使用白色空间做得很好,但是还有很多其他方法可以充分利用负空间,即使它不一定白色的。
空白空间是您的设计计划的重要组成部分。在这篇
网站设计建设教程中,尚略
上海网站设计公司将带大家看看网站留白空间作为设计工具的重要性,以及五个充分利用空白的网站的例子(这根本不是白色的)。
白色空间
白色空间是指设计元素未被触及的任何设计部分。这包括图形或图像之间,文本之间以及边距和页面之间的空间。设计元素内部的开放空间,例如FedEx徽标内的“隐藏”箭头,被称为负空间,尽管交换术语已变得相当普遍。
白色空间很重要,因为白色空间在促进设计的整体可读性和组织性方面起着重要作用。
1)使文字更易于用户扫描。
2)帮助创建类似元素的自然分组。
3)优先考虑设计中的元素,例如号召性用语,搜索或导航。
4)创造和谐和复杂的感觉。
5)建立平衡和视觉层次结构。
6)有助于使更多的文本块更容易被消化(更可能被读取)
7)引导用户以合理的方式完成设计。
空间不必是“白色”
有关空白的这个神话需要揭穿:空白不一定是白色的。
白色空间可以是一个纯色,或模糊的背景,甚至有点运动。共同的因素是空间就是这个空间。它不包含其他内容或设计元素。如果用户看过去或远离它,却不会有任何信息丢失。
门槛是所有的白色空间实际上可能是白色的,但是设计师选择以另一种方式创造视觉,同时仍然使用空间的原则。
空白空间可以出现在设计的任何部分,应该作为一个工具来提高从页面顶部到底部和整个二级页面的可用性。一个好的设计模式将一直使用白色空间来帮助用户更容易地消化视觉效果。
例1:U +设计网站设计
网址:http://design.u.plus/
U + Design从字面上颠倒了白色空间的概念,在文字元素的黑色画布上大量开放。图像生活在一个较轻的空间,创造了阴阳效果,而没有任何一个空间在技术上是白色的,它全部是空白的。
空间在滚动下方也使用得非常好,有足够的空间容纳元素,空间和设计元素几乎是移动的模式,鼓励用户滚动。
如果您正在寻找如何创建可读文本的教训,请查看此设计。尽管使用了多种文本样式和颜色,但所有内容都是可读的,文本的位置和大小提供了一个很好的层次结构。
例2:Emark网站设计
网址:https://emark.com/en/
Emark使用剪贴画和几何图案来创建空白空间,并为图像和文字增添视觉趣味。空间是白色和颜色的混合,形状和线条有助于视觉流动。
该设计还使用包含大量白色空间的白色背景的颜色块。明亮的颜色和空间组合创造出独特的文字容器,加倍高度可点击的号召性用语。由于彩色空白,用户知道这些块中的每一个都被设计为点击。
整个设计在文本元素周围使用放大的空白区域,大量填充和行间距以提高可读性。(随着移动文本间距概念开始渗入更多基于桌面的网站设计,我们可能会看到更多的趋势之一。)
例3:Joke de Winter网站设计
Joke de Winter在他的网站的背景中使用模糊的黑白照片作为白色空间的模板。外观是一个现代,分层的设计,有一个独特的感觉和流畅。
在滚动的下方,更多的空白用于边距过大的文本元素,以强调特定的文本元素。在设计中的白色空间在白色和灰色之间交替,并且像前面的例子一样,包括比我们在文本之间经常看到的更多的间隔。
在整个设计中,所有的边缘都有不对称的风格,空间充足。失衡的“平衡”是和谐和视觉上的有趣。
例4: Astronauts Wanted网站设计
网址:https://www.astronautswanted.com/
思考宇宙空间时宇航员快节奏的行动可能不是首先想到的。但是视频顶部的标志,文字和元素就是这样工作的。重要的滚动信息很容易阅读和看到,尽管在后台的行动。它的中心是两边都有足够的空间。(而这个用负面空间做的标志有助于提高整体效果。)
在静止图像顶部的文本块的滚动下使用相同的概念。空间设计精美,设计中唯一真正的白色元素是文字本身。
例5:Le Farfalle
网址:http://lefarfallecharleston.com/
Le Farfalle在英雄形象中使用了一个简单的剪裁,比如前面的例子之一,但是最让人印象深刻的使用空间出现在你的大幅交替空间的图像上,这些图像与包含文字的超大空白相平衡。
这种风格使用户可以轻松地从图像移动到文本,然后通过所有内容向后翻页。使一个沉重的设计变得轻量级和易于阅读。
此外,设计使用了大量的边距和填充,使每个元素都有自己的空间。这种空间的使用创造了一个复杂的审美,与餐厅的氛围相匹配。
结论
今天的重点 - 白色空间不一定是白色的。不要让自己陷入陷阱。你有一些使用空间的方法,用颜色,图像和视频作为启动你创造力的地方。
现在轮到你展示一些负空间的例子了!