留白不仅是空白！99%的人在做网站设计时都用错了留白！

时间：2023-09-05 10:06:01 | 来源：网站运营

时间：2023-09-05 10:06:01 来源：网站运营

留白不仅是空白！99%的人在做网站设计时都用错了留白！：一提起留白，很多人都觉得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、缓解用户的阅读疲倦




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







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




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