网站网页设计中留白的细节

  人气:2183   发布时间:2017-11-09 18:04:41 【

留白是指版面中没有编排任何元素的空白区域。本期我们所讲的留白并非指的是某种特定风格的设计形式,而是在任何设计中都存在的,大到版心小到字间距的那些留白细节。恰恰是这些不起眼的细节部分,决定的一个设计的品质高低。只要认真掌握好这些基本原则,也就可以做出与之前完全不同的优秀版面。




网站设计中留白有哪些作用:

1.区分与链接,均等的留白能够将元素链接在一起,会传递出统一感和平稳感,通过控制留白的面积大小关系,则可以将不相关的元素区分开来。接下来我们以生活中常见的手机图标为例,来解释留白中区分与链接的应用。

2.突出强调,通过改变花瓶的位置,让放置在大面积留白中的花瓶得到了强调,即使不需要放大也会显得格外醒目。四周的大面积留白让焦点更加突出,从而提高了元素的识别度。


留白在版面中无处不在,小到文字之间的距离,大到整个版面与版心的大小,把控好每个部分的留白,是版式设计中非常重要的部分,这里我们将依次讲解留白在不同情况下的应用与注意事项。


文字间距的留白:

无论元素如何放大与缩小,人眼能够识别到的最小比例是不会跟着改变的。上图中方块间的距离在大比例的情况下不会显得有什么问题,当等比缩小后方块间几乎黏在了一起,这种情况下我们需要重新调整方块之间的距离。


汉字是在虚拟的方框中设计出来的,字库中字体的间距是针对常规正文字号下设置的,当我们把文字缩小后,出现了与上面方块同样的情况,文字产生了黏连,这时我们需要加大文字间的留白,而将文字放大后也是同样的道理,需要减小文字间的留白距离。


拉丁字母与汉字不同,字体的字面是不等宽的,所以我们需要单独设置每个文字之间的留白距离,分别比对字体默认的字偶间距与软件自带的视觉间距(这里为了不被字意干扰,我们将字体镜像显示),两种设置均不是特别理想。


默认的字偶间距需要顾及到与不同字母的搭配情况,而针对特定文字组合的单词来说,我们可以更精确的调整文字间的留白距离。诀窍在于视觉上的均衡,千万不要死记数据。


留白在版式设计的各个环节中都扮演着重要角色,我们本期学习了留白的作用与注意事项,了解了从字距的设置到整个版面的布局中的留白细节,相信大家已经掌握了比例与留白之间的关系,并能够在今后的设计当中加以运用。
理论知识并非刻板绝对的,优秀的版面是建立在成熟的审美基础之上,灵活运用才是关键所在。

[返回]

免费咨询

  • 张小姐: QQ
  • 姚经理: QQ
  • 赵先生: QQ
  • 16602060624