用网站帮助客户实现商业目标
用设计驱动企业的持续发展

白色空间在网页设计中的应用

来源:纵天 / 时间:2017-05-04 / 浏览:264 / 知识库

我想,每当你想到有关空白利用的网页设计中时,Apple或者Google这样的“先驱”可能是你首先会考虑到的范例。虽然这些公司在它们的设计中使用白色空间这一点做得很好,但还有很多其他方法可以充分利用空间,而且它并不总是白色的。

可以毫不夸张的说,白色空间是你的网站设计计划的重要组成部分。现在由纵天做网站公司来看看空间作为一种设计工具的重要性,以及通过列举五个充分利用空白的网站作为说明案例,以帮助你更全面和直观的认识空间(你会发现,有些根本就不是白色的)。


Ⅰ.初识白色空间

白色空间是指那些在网页设计中不受设计元素影响的任何部分。这包括图形或图像之间,文本行之间的空间以及边距等。设计元素内的开放空间,例如FedEx标志内“隐藏”的箭头被称为负空间,尽管交换术语变得相当常见。
白色空间很之所以如此重要,是因为它在促进网站设计整体可读性和组织方面发挥着重要的作用。

· 使用户更容易浏览和阅读文本内容;

· 帮助创建类似元素的自然分组;

· 优先考虑设计中的元素,例如号召性用语,搜索或导航;

· 创造和谐与复杂的感觉;

· 建立平衡和视觉层次;

· 有助于使大块文本更容易消化(更有可能被阅读);

· 以合乎逻辑的方式引导用户浏览和查看整体设计。


Ⅱ.空间不必非得是“白”的

在网页设计中,可能对于空白需要被重新定义一下,简单的说:白色的空间不一定是白色的(听起来是不是很拗口)。

白色空间可以是任何的纯色,或背景模糊,甚至有点动效。它们之间的共同因素是空间还是那个空间。它不包含其他的内容或设计元素。这样,如果用户看过去或远离它,则不会丢失任何信息。

关键在于,所有的空白实际上都可以是白色的,但是设计者选择以另一种方式创建视觉效果,同时仍然使用空间的原理。

白色空间可以出现在网站设计中的任何部分,并且应该作为一种工具来提高从页面顶部到底部和整个辅助页面的可用性和视觉规划。一些优秀的设计模式会一直使用白色空间来帮助用户更容易地将视觉效果消化掉。


示例1:U+Design

U+Design在其网站设计的文本元素中,通过在黑色画布上字面上颠倒空间的概念,营造出大量的开放性元素。图像位居于较轻的空间中,产生阴阳效应,虽然空间在技术上都不是采用白色的,但它们都是空白的。
空间的应用在滚动效果的配合下同样好用,对于那些拥有足够的元素和几何的空间和设计元素,我们鼓励滚动。
如果你正在寻找如何创建可读性文本的课程,请查看此网页设计。虽然使用了多种文本样式和颜色,但一切都是可读的,文本放置的方式和大小提供了良好的层次结构。


示例2:Emark

Emark在其网站设计中,使用剪切和几何图案来创建空白并增加图像和文字的视觉感。空间是白色和彩色的混合形状和线条,有助于提供视觉流动和间接的起到引导作用。
该网页设计还使用包含大量白色空间的白色背景色块。明亮的颜色和空间组合创建了独特的文本容器,将其作为可点击的动作调用可以有效的提高转化率。彩色的空白区域,用户可以很快知道这些块中的每一个都被设计为点击。
整个设计使用大量填充,并且在文本元素的行间距周围强调了空白,以增强可读性(这是目前的网页设计趋势之一,我们可能会看到移动文本间距概念开始更多的进入基于桌面的网站设计中)。


例3:Joke de Winter

Joke de Winter在他的网站背景中使用模糊的黑白照片作为白色空间的基础。在外观上,通过一种更现代化的分层设计,是的整体的设计具有独特和流畅的感觉。
鼠标滚动到下面,文本元素周围使用更多的空白区域,具有超大的边距,以强调特定的文本元素。设计中的白色空间在白色和灰色之间交替,就像前面的例子,这些包括我们经常在文字之间看到的更多的间距。
在整个网站设计中,所有的边缘都有不对称的风格,空间充足。在不平衡中创建“平衡”是和谐的视觉体验,并能创造用户浏览的兴趣点。


例4:Astronauts Wanted

Astronauts Wanted在对其网页设计规划时想要的快节奏的动作可能不是在考虑空白时首先想到的。但是,注意看视频上的标志、文字和其他元素,它们就使用了空间,并且能够有效的工作。重要的是,上面的滚动信息很容易被阅读,它的中心两边是充足的空间和(用负空间制作的标志有助于注意整体效果)。
在静止图像之上,带有文本块的滚动使用相同的概念。该空间设计精美,设计中唯一实际的白色元素是文本本身。


示例5:Le Farfalle

Le Farfalle在主视觉图中使用了一个很简单的切口,跟前面的例子一样,但是当你滚动页面的时候,通过用大的交替空间更换图像时,会出现最令人印象深刻的空间变化。
这种风格使用户可以轻松地从图像转移到文本上,然后通过所有内容向后移动页面。什么可以使一个沉重的设计变得轻巧,易于阅读呢?无外乎上面的这种形式了。
此外,设计使用广泛的空白和填充,使每个元素都有自己的空间。这种空间的使用创造出与餐厅氛围相匹配的复杂美学。


总结

白色的空间不一定是白色的,不要让自己陷入陷阱。你完全可以通过一些例子,使用空间与颜色和图像和视频作为一个起始点,开始你的创造力。


本文来自广州品牌网站建设网站设计制作公司-纵天科技

标签:纵天,做网站公司, 企业网页制作, 专业网站制作, 网页设计

电话咨询
业务咨询
返回顶部

输入您的电话,我们即刻给您回电

您也可以咨询我们的在线客服

关闭