返回
南京学码思教育
置顶
该校与厚学网暂未合作,平台不保证课程的真实有效性,如有侵权等争议,请及时与厚学网联系处理
招生热线:400-800-2178

学校地址:南京市秦淮区科巷10号三楼301室

网页设计中留白的重要性

1042 2018-07-26 09:05:09

学习笔记

  空白空间的体现有多种不同形式,例如图片、段落文字、图标信息、缝隙、外边距、列甚至一行行文字之间字间距,这些都可以留有一定的空间。尽管它似乎“空无一物”,里面没有任何其他设计元素,但我们不能如此看待它。视之为“无物”,因为正是这些空白空间,给以网页设计整体一种得体的布局,有呼吸感的美感与表现力。处理得当的话,留白确实可以为网页设计带来大量的益处。下面苏州学码思小编就具体说说留白在网页设计中的作用。

  一、空白不代表无用

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

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

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

  所以页面需要充分的留白,给与用户视觉上的呼吸感,这样才能留住用户,进一步引导用户进行浏览。当然过多留白也不好,页面空无一物就放一个很小的元素,也是对网页空间的一种浪费,所以网页设计关于留白,需要找到一个平衡点,既能有效将信息合理布局又能保留呼吸感。

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

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

  二、清晰的层级关系

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

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

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

  三、控制文本可读性和易读性用好留白,任何网站的可读性与易读性都会得到改善。

  如果一个页面上的文字过于拥挤,它就会妨碍舒适的阅读体验,从而阻碍整体用户体验。更多的留白使文字更易浏览,从而提升阅读体验,也更易理解。

  标题字号要大,标题下的文本要紧跟着标题以示与标题有关联。段落要有段间距,否则文本显得冗长难读。页面底部要适当留白。

  四、平衡页面布局

  做出一个平衡的布局需要敏锐的眼光。

  通过留白和文案位置的摆放,可以使整个页面非常均衡,文案层级清楚,位置和产品搭配也显得非常有序。

  五、留白提升搜索流畅度

  百度和必应搜索引擎,诠释了留白简洁有效,这个简单的例子再适合不过了。

  百度准确地理解了一点,正在搜索某个话题的用户,不想被嘈杂的背景和广告分散注意力。因此,留白支配了整个百度搜索引擎页面,没有过多的东西去干扰用户的注意力,实际搜索框只占据页面中央窄窄一丝空间。

  类似的,必应搜索也体现了使用留白的妙处。也是采用大留白,不过是左上的位置有一个搜索框,页面中也没有过多的元素,不同的是,必应每天会更新首页的背景,但一般也都以大色块的图案为背景,虽然这个页面有背景图,理念还是相同的:大量的留白,使用户专注于搜索,别无他物。

  小结

  留白,留给了字体和设计作品足够的空间。保持层次感,留白区域能够很好的指引用户,如果元素过多,那么用户的注意力会分散。留白能够让用户尽快的寻找到所需要的信息,提高用户体验。可以把留白当做睡眠和空气,两者是生活不可或缺的元素。没必要把留白当做必须遵守的规则,不如把它做可爱的设计帮手。

  


文中图片素材来源网络,如有侵权请联系删除
来源:南京学码思教育
热门课程 全部课程

热门动态

申请免费试听

只要一个电话

我们为您免费回电

立即申请
刷新
图形验证
关闭
>>
拖动左边滑块完成上方拼图