上海交通大学教育集团旗下机构|湖畔国际艺术与设计教研基地

中国A股上市 股票代码600661
您当前位置:交大南洋媒体专业 >> 行业新闻 >> 网页设计的留白艺术

网页设计的留白艺术

来源:上海交大教育集团媒体学院  作者:Linda   2018-11-23

最新资讯 更多

留白,另一说为“负空间”,这两个词常常互换使用。它们共同所指的都是屏幕中出现的元素之间的一种关系作为艺术设计中重要的视觉标准之一,网页设计中留白也是极为重要的——设计师们往往会围绕设计元素,如图像、文本的空间,使布局排版显得干净和精致。

 

为什么需要留白?

设计的话讲究很多,比如设计的魂、内涵、情绪。而留白的话是为了让设计拥有透气感,若是没有留白就会感觉很是拥挤,对于用户体验是很不利的,让用户没有心情读下去。可以理解为现在的设计会使用很多图片一样。譬如一篇两三千字的文章,从上到下读下来,利用留白的体量感来使页面布局平衡,在一种不平衡中营造平衡,这样就会使页面生动起来。我们应该在网页中通过留白的作用,使整个内容排布得松紧有度,给人以跌宕起伏之感。


说白了,现在越来越注重用户体验,人们喜欢看图片胜过文字,而内容全是文字的话恐怕只有学者或者某种正式文档了吧。

 

apple公司为例,Apple就是典型的以简洁风格,大留白的布局方式进行设计的网站,看似留白的空间里什么都没有,但实际上留白区域的作用相当大。

给予设计呼吸的空间,提供了布局上的平衡,给予用户视觉上很大的扩展性,视线能迅速的集中在Apple的主要产品上,极简的风格也凸显品牌的国际化。

 


留白有哪些作用?

不难发现很多知名的大品牌,网站设计都是以大留白,负空间来设计的。很明显,我们看到的留白运用的多的网页设计,在视觉上确实比紧凑的网页设计更具有美感和高级感,下面就具体说说留白在网页设计中的作用。

 

 1.空白不代表无用

刚接触网页设计的设计师往往容易出现一个误区,一些人可能认为页面上的空白越少越好,为了放尽可能多的文字,或者为了展现更多的图片等信息内容,或整体缩小版面。

毕竟互联网的发展飞快,用户的阅读习惯也越来来越懒惰,很多人不愿意进行过多的操作,于是网页设计师就容易为了迎合用户的阅读习惯,把尽可能多的内容一下子放到一个页面中,以为这样用户就可以一眼获取到很多内容。

但其实不然,页面上元素越多越容易混乱。

 

让人找不到正确的阅读顺序,没有正确的视觉流线,不能引导用户进行浏览,越多的内容就会越快引起读者的厌倦,会导致用户直接关闭页面,从而流失掉网页的浏览量。

所以页面需要充分的留白,给与用户视觉上的呼吸感。这样才能留住用户,进一步引导用户进行浏览。

 

当然过多留白也不好,页面空无一物就放一个很小的元素,也是对网页空间的一种浪费,所以网页设计关于留白,需要找到一个平衡点,既能有效将信息合理布局又能保留呼吸感。

一般来讲留白过多比留白过少要好一些。所以设计时多调整,看哪一种比较舒服。

 

斯柯达汽车车型网站,的留白使用的很利索,突出了品牌信息,展现了主要产品。我们应该视留白为布局的最重要手段,多给元素点呼吸空间,这样信息的层次感将更加明确,用户指引效果也更好。

 

 2. 清晰的层级关系

 

不同的留白可以区分不同的版块以及同一版块的不同层次。留白能够增加或者降低元素的易见性。元素周围留白越多,显得越醒目突出。字间距和行间距决定了文字的易读性。

留白还有助于引导视线,为设计建立层次,区分什么是重点和关键点。视线会立即移动到被留白包围的元素上。留白为其中的元素增添了冲击力。

jestina韩国购物网站

通过适当的留白把同类信息有效的分类布局,产品和对应的文案间距较近,视线会自动将他们分为一组,不同产品间的间距稍大,能看出是分别是该品牌几款不同的产品。并且适当的留白能有效区分的不同的页面区域。

3. 保持导航和内容的清晰流畅

留白不代表一定要用白色或黑色。就算是图案、色彩或纹理背景都可以被称为留白譬如组织页面中的细节: 导航、页眉页脚、图像、文字、列表、LOGO、图片等在内容外创造一个空白的环境,好让观者将注意力更加集中于内容。

图所示:拿google首页和google产品做一个对比,同一个空间下的logo、导航、文字的清晰元素布局

 

相关新闻 NEWS

课程推荐