网站建设巧用留白

网站建设巧用留白

　　一提起留白，很多人都觉得SO EASY，这留白谁不会呢？留出一块白色，腾出虚拟空间不就是了么？

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

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

　　事实上，留白并不能从字面意思地进行解读，它不局限于白色。所谓留白，指的是“没有被使用的虚拟空间”，无物，无信息，无装饰，处于空白的状态，所以留白也被称作“负虚拟空间”，不仅是一片白，也可以是任意一种颜色，甚至连非纯色的纹理都能算作留白。

　　由此可见，留白指代的含义其实远比我们想象中的更广泛，也有多种不同形式的体现，以下结合case案例总结出几种常见的的留白应用。

　　1、为视觉主体提升增加留白

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

　　2、元素与元素间的缝隙

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

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

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

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

　　

　　4、纯文本文字间距的调节

　　纯文本文字间的行距、字距也属于很重要的一种留白元素。像以下这个来自“美兔科技”的蔬果业内行业站点网站的模版，中间的文案采用了不同的字体、颜色、大小、间距拉开了对比，让文案变得更容易阅读。

　　5、提升增加边框

　　提升增加边框，划分出留白虚拟空间。这种留白形式常用于网站站点BANNER，在居中位置划出边框围绕文本信息，诸如以下这个来自“美兔科技”的日用品业内行业站点网站的模版，边框配以卡通元素的点缀，小清新的感觉立马出来了。

　　6、背景虚化

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

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

　　1、平衡网站页面部署布局

　　像以下这个来自“美兔科技”的餐饮业内行业站点网站的模版，从BANNER到通栏，都有充分而均衡的留白，显得宽敞而舒适。

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

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

　　3、焦点元素的突出呈现

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

　　4、缓解用户使用者的阅读疲倦

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

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

　　从今天开始，试试留白，不仅是在设计规划上，生活上也给自己留白，腾出虚拟空间，允许自己发呆，允许自己浪费时间。不用把所有的格子都填满，人生也可以很圆满。

　　看完这些，记得使用小技巧，为你的网站站点锦上添花

　　想了解更多资讯可以关注微信公众号：成都美兔（cdmnto）,或关注微博：美兔科技的大美

　　美兔科技官方网站站点：www.mnto.net

转载自：网站建设巧用留白

网站建设服务

悉知科技是一个有着12年经验的网站建设开发公司，品牌建站/外贸网站建设/谷歌营销推广/品牌营销策划，这些我们都能帮您搞定！

在线咨询

网站建设制作方案是什么 ? 报价多少钱 ?

获取建站报价