首页 > 网站建设 >

建网站在设计布局时怎样合理使用留空白?

发布时间:2018-06-01 作者:福田网站建设公司

 建网站前端设计一提起留白,很多人都觉得SO EASY,这留白谁不会呢?留出一块白色,腾出空间不就是了么?

在回答这个问题之前,先来看看以下 4 个案例,你觉得哪个案例才是运用了留白的手法呢?

A图:

B图:

C图:

D图:

正确答案是……全选,以上 4 个案例都有留白的应用。如果对“留白”只是望文生义,认为留白就是留出白色,就很有可能单选A误答了。


由此可见,留白指代的含义其实远比我们想象中的更广泛,也有多种不同形式的体现,以下结合案例总结出几种常见的的留白应用。
事实上,留白并不能从字面意思地进行解读,它不局限于白色。所谓留白,指的是“没有被使用的空间”,无物,无信息,无装饰,处于空白的状态,所以留白也被称作“负空间”,不仅是一片白,也可以是任意一种颜色,甚至连非纯色的纹理都能算作留白。

1、为视觉主体增加留白

以下是来自“福田建站”的服装行业网站模板,你的视觉很容易就集中到模特身上,除了因为模特的配色比较鲜艳抢镜,环绕模特周围的留白也起到了很好的作用,花瓣剪影的装饰也是点到即止。没有了多余的东西分散了你的注意力,视觉主体自然就突显出来了。

2、元素与元素间的缝隙

留白,是不是就只能保留主体,其他一律删去?其实不一定,像以下这个来自“福田建站”的饰品行业网站模板,虽然内含元素很多,却不会给你一种很拥挤很凌乱的感觉,因为元素与元素之间都留有了适度的距离,呈现出一种呼吸感。


元素的多与少并不影响留白的应用,关键是看你想传达怎样的调性。以上的网站我们再拿另一幅BANNER图对比,多元素的留白显得更活泼亲和,而少元素的留白则显得更大气逼格,两种设计并没有优劣之分,抓准了产品定位和目标人群就是对的设计。

3、放大图片中的无装饰部分

很多时候我们会需要在图片上插入文字,当图片没有足够的适合排版文字的空间,而你又不想把字体缩小,那么可以把图片中的无装饰部分放大。像以下这个例子,原图的近景和远景接近了五五比例,近景部分明显不太适合排版文字,所以我们放大图片的远景部分,这样一来就能顺利地进行文字排版了,留白给了文字理想的展现空间。

4、文字间距的调节

文字间的行距、字距也属于很重要的一种留白元素。像以下这个来自“福田建站”的蔬果行业网站模板,中间的文案采用了不同的字体、颜色、大小、间距拉开了对比,让文案变得更容易阅读。

5、增加边框

增加边框,划分出留白空间。这种留白形式常用于网站BANNER,在居中位置划出边框围绕文本,诸如以下这个来自“深圳福田建站”的日用品行业网站模板,边框配以卡通元素的点缀,小清新的感觉立马出来了。


对!你没看错!过度模糊的图片也是一种留白,虽然图片里含有信息元素,但由于被虚化得看不真切,相当于被藏起来了,所以也能看作是留白。背景虚化在摄影上用得尤为广泛,像以下这幅图片,将景深变浅,视觉聚焦在帆船瓶子,也让画面看起来通透纯净。
6、背景虚化

从以上的案例,我们不难看出留白应用在网站设计的好处。

1、平衡页面布局

像以下这个来自“福田网站建设”的餐饮行业网站模板,从BANNER到通栏,都有充分而均衡的留白,显得宽敞而舒适。

2、让版块层次区分得更鲜明

像以下这个来自“福田建站”的礼品行业网站模板,我们很容易就区分出“关于我们”和“新品上架”这两个不同的版块,留白在这里就充当了一条分割线,让不同版块之间的层次更鲜明易见,不会让内容糅杂在一起。

3、焦点元素的突出呈现

这个相信大家都深有体会了,再用以下两幅简单的图片来举例子,和A图相比,B图肯定更容易让你抓准重点的心型元素,这就是留白的功劳。

A图:

B图:

4、缓解用户的阅读疲倦

这对于信息量大的网站来说特别重要,密集的内容显得冗长难读,会让用户感到透不过气来,从而放弃了浏览。所以要留白,要有行距、间距、边宽,给予用户“喘息”的机会。以下两种文本排版,相信右图会让你更有阅读的欲望。

我们总是在想,要把设计做得有多么的“大包围”,有多么的鹤立鸡群,有多么的另类怪诞,才能让阅物无数的用户停下来多看一眼,事实上都是在钻牛角尖。舍弃繁杂的留白并不是削弱存在感的做法,相反,其实是突出美感的妙方。少即是多,无物胜有物,正因为是简单的东西,反而能让用户一眼就看出你的美。

从今天开始,试试留白,不仅是在设计上,生活上也给自己留白,腾出空间,允许自己发呆,允许自己浪费时间。不用把所有的格子都填满,人生也可以很圆满。深圳网站制作公司博纳网络编辑整理。

文章标题:建网站在设计布局时怎样合理使用留空白?
本文地址:https://www.198bona.com/news/1018.html
如果您觉得案例还不错请帮忙分享:

网站建设

网络推广

解决方案

域名主机

建站行业资讯