全国免费咨询热线:400-611-9921
 
白色空间在网页设计中的应用

2017-05-04

1157

我想,每当你想到有关空白利用的网页设计中时,Apple或者Google这样的“先驱”可能是你首先会考虑到的范例。虽然这些公司在它们的设计中使用白色空间这一点做得很好,但还有很多其他方法可以充分利用空间,而且它并不总是白色的。
我想,每当你想到有关空白利用的网页设计中时,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在主视觉图中使用了一个很简单的切口,跟前面的例子一样,但是当你滚动页面的时候,通过用大的交替空间更换图像时,会出现最令人印象深刻的空间变化。
这种风格使用户可以轻松地从图像转移到文本上,然后通过所有内容向后移动页面。什么可以使一个沉重的设计变得轻巧,易于阅读呢?无外乎上面的这种形式了。
此外,设计使用广泛的空白和填充,使每个元素都有自己的空间。这种空间的使用创造出与餐厅氛围相匹配的复杂美学。


总结

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


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

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

标签:
热门标签
营销型网站建设柏洪集团网站集团网站建设新元素网站教育网站德胜教育集团德国商会网站建设德国商会品牌网站建设福美控股赛立信网站建设智能家居网站运动网站建设贸易网站建设玩具网站建设化工网站建设日化网站建设家电网站建设音响网站建设物流网站建设旅游网站建设网站建酒店网站建母婴网站建设珠宝网站建设钟表网站建设培训网站建设教育网站建设建材网站建设装饰网站建设机械网站建设美妆网站建设展览网站建设皮具网站建设五金网站建设仪器网站建设照明网站建设水电网站建设咨询网站建设法律网站建设家具网站建设家居网站建设服装网站建设服务网站建设食品网站建设金融网站建设餐饮网站建设环保网站建设政府网站建设科技网站建设地产网站建设医药网站建设数码网站建设营销型网站广州网站制作广州网站建设公司建网站广州网站设计公司建站优必思官网英文版网站定制网站广州网站建设中服装网站设计服装网站制作防火板网站大数据网站科技网站制作三盟科技物联网网站人工智能网站防火板网站制作家居网站制作枕头网站电器网站制作电器网站家具网站家居网站斯帝罗兰网站建设公司​手机网站建设响应式网站企业官方网站网站策划官网改版企业网站建设网站制作网站设计建站公司网站建设公司企业网站网站建设费用网站建设广州企业网站建设企业建站官网建设公司网站制作拉链官网广州建站广州网站建设纵天科技
立即致电纵天品牌顾问:
400-611-9921
联系我们:

地址1:广州市天河区珠江新城邦华环球广场16F

地址2:杭州市滨江区滨安路1190号智汇中心B308

业务 QQ: 3561401262

E-mail: sales@zomsky.com

电话咨询 在线咨询 QQ咨询 官方微信
官方微信
TOP

立即与纵天项目顾问通话

400-611-9921

您也可以咨询我们的在线客服或预约资深顾问

信息保护中,请放心填写
关闭