设计中的“留白”有什么用?

都是自己总结的,不喜勿喷!!

在平时的工作中,有人也许听到过这样的声音:“这块太空了,我再给你写点文案加上去!”又或者:“你空这么多给我做的?”那么今天的重点就是探讨一下空的这块区域,为什么要空?什么时候应该空?空与不空会产生怎样不同的效果?

(清明上河图)

(寒江独钓图)

这两幅作品相信很多都见过,第一幅是北宋时期来自张择端前辈的《清明上河图》,他所描绘的是:清明时节北宋汴梁以及汴河两岸的繁华景象和自然风光;而第二幅是南宋马远前辈的《寒江独钓图》,他描绘的是:漂浮于水面的一叶扁舟和一个在船只上独坐垂钓的渔翁;这两幅名作带给我们视觉感受是截然不同的!《清明上河图》我们几乎可以看到作者想表达的一切繁荣景象;而《寒江独钓图》,我们在欣赏的时候会多出很多想象的空间;这也牵扯出今天的主题《设计中的留白有什么用?》

顾名思义,留白就是在作品中留下相应的空白;在设计中,留白的目的有哪些?接下来我们还是通过案例分析一下:

留白的作用之一就是突出主题;其实原理很简单:降低次要元素对于主题的影响,在视觉上给与主题充分的主导地位;例如:

当我们看到这张图的时候,你会被画面中的哪个区域所吸引呢?比基尼还是红裤衩?但是如果选定一个主题后,把周围元素以留白的形式弱化,在视觉上呈现的效果是这样的:

再看这张图,整体画面没有其他元素分散你的视觉注意力,用户的视觉焦点最终会聚集在左上方,而不是一直在画面上游离;这里留白的目的就是为了突出主题!

但是在日常工作中,我们很少会做这么极简的风格,下面再引出一个理论,叫做“少即是多”,相信很多人都听过这个理论,是由建筑大师路德维希·密斯·凡德罗提出的:“Less is more”(具体的可度娘),在设计中如何理解呢?很多人在做产品海报时,会把几乎所有的功能效果都加上去,认为每个都是必不可少的重要信息,但是当你在有限的画面里无处不在的充斥着你认为各种重要的信息时,所有的信息都会变得无关紧要,例如这张图:

给你20秒钟的时间,回答我的问题

问:你看到带有根茎的蔬菜有哪几类?

是不是很多人一下懵了,我怎么知道你要问什么问题;那么问题来了,如果你做的是一个产品的海报图,充斥个各种你认为很重要的信息,用户看到的时候会懂哪些是你想表达的重点吗?用户会去猜你的心理吗?显然不会!再看一张图:

同样给你20秒的时间,你能捕捉多少信息?是不是产品的特性都能说出来了!这就是设计中的“少即是多”的理论!看似很多的信息,能被用户捕捉记忆到的却很少;反过来,看似很少的信息,却能给用户留下极其深刻的印象,同时更利于传播!而这些留白同样也起到了强调主题的作用,因为没有大量的辅助元素去分散用户的视觉注意力,我们的视觉焦点只会停留在文案及产品之上。

我在网上找了几个网络搜索引擎的主页,简单的大家看一下:

不管是国内还是国外,这些搜索引擎的主页都采用了这么简洁的方式,目的不仅仅只是为了突出主题这么简单,留白的作用还有哪些?我们继续看:

相信很多上班族都经历过早高峰和晚高峰的公交车或者地铁,回想一下,说下你的感受?

人满为患,无处下足,挤的喘不上气!设计亦是如此,如果在有限的空间不注重留白的话,会给人一种压抑感,甚至会使得心情烦躁!例如:

假如你看到这么一个公众号二维码,你还会吗?是不是感觉很压抑,像一堵密不透风的墙,不想再看第二眼,简单改一下:

差异感很显然,并没有做很特殊的处理,相对而言主题部分还缩小了一下,但是给人的感觉是很舒服的、很通透,主题信息也更加明确!适当的留白可以提升作品整体的通透性、空间感,而这样的作品更易于用户接受,给人的感觉也更加舒适!再比如我们平时看的书,书中字与字之间、行与行之间、段与段之间都存在着大小不等的留白空间,这些留白目的就是增加整体的通透性,进而提升整体的可阅读性!

在电商发展前期,对视觉要求并不高的时候,有很多公司要求有图有文字就行,于是出现过这样的海报:

如果是现在,你看到这样的海报还会选择他们的产品吗?为什么呢?其实最重要的一点是没有带给用户安全感,给用户的感觉是产品很没档次!在设计的角度上来说就是整体太乱、信息太多,没能让用户感受到产品所带来的品质感;而再看现在的产品海报:

整体充斥着大量的留白,没有很多次要元素,更没有那么多功能介绍,难道他们不怕用户因为不了解产品功能而选择不消费吗?这即体现了“少即是多”的理论,又能体现出产品的品质感、有逼格、自信!

有句话是这么说的:“艺术大师往往都是留白的大师”,在很多充满艺术气息的页面或海报中,留白会占很大一部分,比如我们经常说的中国风:

很多富有艺术感的作品都会用到适量的留白区域加以衬托!

说了这么多,不要产生一个误区:留白是万能的!其实并不是所有的作品都需要大面积的留白,比如:有气氛类的活动、节日、功能性很强的详情页等,如果还采用大面积留白的方式做,反而会适得其反;留白固然重要,但是不能盲目的追求一种形式,掌握好留白的比例很重要;灵活运用才是王道!

还有个误区:留白就是留下空余的空间,并不是必须白色,这个空间可以是天空,可以是虚化的景物,也可以是干净的地面,总之留白处要干净、简洁,不能误导读者的视线,应该很自然地引导读者把目光引向主体。

留白的目的很多情况下不仅仅是一个,它们之间都互有关联;要掌握好留白的比例关系,明白自己产品的定位,根据产品定位、市场需求、消费群体等制定好风格走向,进而判断留白的比例关系!

美工美邦(公众号)

作者:张家彬

(0)

相关推荐

  • 如何在界面设计中使用留白

    留白是一个活跃的元素,而不是被动的背景.它是界面设计中最宝贵的资源,页面上的留白,虽然经常被忽视,但它跟UI元素所占用的空间一样重要. 01 .认识留白 在介绍如何使用留白提升用户体验之前,我们需要先 ...

  • 正确理解设计中简约、留白、空三者关系!

    小编:@梦尽笑兮简约.留白.空三者关系就像三角恋. 所谓的留白就是简约的设计吗?留白就是空着不去设计吗? 不是只有简约风格才有留白,留白在设计中无处不在, 文字与文字之间,段落与段落之间.图形与文字之 ...

  • 设计沉思录|UI设计中的『小套路』

    如果你还在为界面不精致,层次乱糟糟,反复修改浪费时间,开发还原度很差等问题而烦恼,不妨静下心来听我唠叨几句. UI设计是一个年轻的职业,起步较晚变化飞快.新的创意和玩法层出不穷,去年流行的风格,今年可 ...

  • 界面设计中的那些版式-图版篇

    小编话:界面美不美,除了构图之外,另一个重要手段的就是如何处理留白,也可以理解成版率.留白就是为了凸显层次.突出内容.当然除了留白还有什么方法让界面高大上和达到一定的视觉效果呢?让我们跟着作者@王铎( ...

  • 设计中的10个禁忌!你踏了雷区没?

    在设计过程中,我们都会犯错误,有些我们可以归结为设计草率或者太年轻,有些错误你想把他永远藏起来.有一个好消息是其实你完全可以避免这些错误,坏消息是每一个设计师在他的设计生涯中这些错误至少都犯过一回. ...

  • 设计中你该遵守的20条规则

    在设计中,我们常被允许.鼓励打破设计规则,这时你至少需要知道这些规则,才能正确的打破它们. 本文列出了一些基本的规则和技巧,从字体.排版到色彩.样式,涵盖了大部分设计中常见的错误,帮助你在设计中避免它 ...

  • 网页设计中的极简风格—无的力量

    小编:首先感谢@飞屋睿UIdesign为我们分享讲解什么是极简设计以及如何做到极简并配上很优秀的图来帮助我们讲解.不久前刚看到一句话来和大家分享下,感觉可以用来提升逼格.这句话是这样写的"U ...

  • 电商设计中的极简设计

    小编:本篇来和大家讨论讨论关于电商设计中的"极简设计",首先感谢作者@蒸个馒头详尽的讲解,举例分析.我认为的"极简设计"就是去掉不是必要的,留下重要的,让用户可 ...

  • UI设计中的布局编排原理

    @IOI.@麦子如果说色彩和图片是人的外在,那么版式编排就是人的骨骼,从基础上决定了一个人的内在.今天就带着大家一起从以下六个方面来探究下UI设计中的版式编排. UI界面设计中,信息能被有效的传达,离 ...