在我们工作中经常会遇到很多排版方面的问题,有些时候界面的信息过于多,会造成界面拥挤不堪,有时界面的信息过于少,也会显得画面过于简单平淡。那么这个时候画面的构图就尤为重要
我们今天谈一谈构图时应该如何“留白”。
01·什么是留白
留白是中国艺术作品的创作手法,指书画艺术创作中 使整个画面更协调精美而有意留下的空白,留有想象空间,这是百度里对“留白”的解释。简单的说就是,中国水墨画有很多意境表达,是用“留白”的手法实现的,素有“计白当黑”一说。


中国画的最高境界,不在于笔墨画的部分,而在于“留白”没有画的部分,画中常用一些空白,来表现画面需要表现的水、云雾、风等镜像,无即是有,留白不空,留白不白,以无胜有。留白的表达更含蓄,也可以使画面更协调,减少构图太满给人的压抑感。“疏可走马,密不透风”是中国画常用的节奏。
我们看一下这幅画:

这是有名的《清明上河图》局部,我把街道上的人流复制了一层。铺满之后的效果,可以看出,这条街就如春节的火车站,密密麻麻,整个画面拥堵不堪,看久了使人产生烦躁感。

张择端原图是这样的,S形的对角线构图,用留白的手法作为视觉导向,让整幅画有了他的故事性。我们看到的是整个江南车水马龙、富饶有序的盛况。
以上是国画中留白的形式,那设计中的留白是怎么表现的呢?
02·设计中的留白
从心理学上讲留白能够满足人们的联想,丰富人们的情感;从平面设计上讲留白是让设计有“呼吸”空间,是洁净、纯美和包容。留白不仅独特,更能容纳设计的简约和质感。


• 留白的部分可以展开想象空间,让设计不拘束与画布,让设计画面有更开阔的视野
• 将留白手法运用在设计中,可以减少压抑感,并将观者的视线固定重点,从而彰显留白整个画面的审美价值
那么总结一下设计时的留白方式——
1.整体—局部—整体
首先构图的时候要考虑整个画面的布局
设计师在设计过程中应该从整体出发,把握留白与画面黑成分的比例关系,宏观把握整个版面。
另外还要考虑平面构成中的形式美,比如虚实、比例、点线面的穿插关系,用心设计留白位置追求画面平衡。

设计大师-原研哉的作品
2.把留白看作要素进行设计
元素放置要合理,并且不可堆积,否则让人感觉凌乱。
设计师在设计之前,要把各要素的大小、形状、面积、负形都考虑进去,并将这些元素巧妙组合,包括留白的位置、多少。

3.变换构图形式
对称和不对称是排版中两个主要表现形式。
对称的形式在视觉上有自然、安定、均衡、典雅、庄重的朴素美感,符合人们视觉习惯。
在中国建筑中就常见这种对称美的设计形式。但是过于对称,就会缺少变化,或有一种单调感。
因此,我们在构图上大胆创新,让表现更灵活、自由,留白恰到好处的给人以想象空间和艺术的美感,方寸之地亦显天地之宽

故宫
对称结构

03·留白在设计中的作用
1.突出主题
留白的作用之一就是突出主题,很简单:就是降低次要元素对主题的影响,在视觉上给与主题充分的主导地位,我们看一张图——

当我们看到这张图的时候,你最先被画面中那个部分吸引呢?美邦还是茂昌?还是熙熙攘攘的人群,是一个纸醉金迷、灯红酒绿的世界,当画面的元素过多,用户就很难一眼提取想要获得的内容。
但是如果我们选定一个主题后,把他周围元素以留白的形式弱化,视觉呈现效果就如同下图的“中国馆”,雄伟壮观主题明确。

我们看一张有趣的图:如果我问下图有几个戴眼镜的姑娘?

小伙伴肯定被问的一脸懵逼。
在日常生活中我们很少做极简的风格,很多人再做设计的时候,不管视觉层次,会把几乎所有的功能效果都加上,认为每个都是必不可少的重要信息,当你在有限的画面里无处不在的充斥各种信息时,所有的信息都变得无关紧要,下面引出一个理论“少即是多”。

上图是电影《月球》的宣传海报,同样再看这张图,你能注意到什么,是不是主题可以清晰可见,这就是“少即是多”的道理,看似铺了很多信息,但能被用户捕获的信息却很少,反过来,看似很少的信息,却能给用户留下极深的印象。而这些留白同样起到了强调主题的作用,因为没有大量的辅助元素去分散用户注意力,我们的视觉焦点只会停留在产品本身上。
2.透气性

这是一张地铁站早高峰的照片,相信很多小伙伴都经历过,左侧这个局面,人满为患,无处下足,让人喘不上气。
设计也是如此,如果在有限空间内不注意留白的话会给人一种压抑感,甚至使人心情烦躁,如下图:

我们会感觉密密麻麻的排版,看起来非常吃力,时间久了可能有些烦躁不堪。
再看下图的排版:

距离产生美,大面积的留空处理,段落被分的更清晰,文字加入了图片点缀,整个排版看着清爽很多。
那么我们游戏内界面迭代的时候也运用了留白的手法去处理文字较多的排版问题,留白使信息的视觉单元更清晰,界面整体更透气,提高了信息可读性。
优化前:

优化后:

我们之前在画素描头像的时候,老师肯定都有讲过不要顶天立地,要给画面足够的空间,这样构图会更舒服,这种留有足够的空间,就是留白中的透气性。


那么同理,我们看下图,上面是我们为了保持界面饱满 突显宝箱展示位,强行将控件铺满后的效果,沉闷不透气,下面是我们留白之后的效果,主题依然清晰,但界面更舒适透气,不会给人压抑的感觉。


3.品质感
我们以广告海报举例,在世纪初期,对视觉要求并不高的时候,很多公司要求信息传达面面俱到,于是:


如果是现在看到这样的海报,还会选择买吗?总感觉透漏出一股城乡结合部的气息,很没有档次,没有一点点品味。
我们再看几个奢侈品大牌的设计,留白手法的运用,彰显了奢侈品高级的审美趣味。



这些奢侈品留白的设计,简单而不简约,处处彰显这一种“买不起”的感觉。
04·总结
• 留白在我们设计排版中占有很大的地位,画面比较闷、拥挤,可以尝试调整排版的空间、间距、构图来适当留白。
• 但是,留白不是万能的,并不是所有界面排版都需要去做大面积留白,比如有气氛类的活动、节日。留白会让画面更安逸平静,如果采用大量留白会适得其反。
• 还有留白并不是留下的就是白色,这是一个空间的概念,可以是虚化的背景,也可以是干净的地面,总而言之留白处要干净、简洁,不能误导读者视线,降低视觉层级,应该很自然把读者的目光引向主题。