最近在做app启动页的时候,做了2个不同的版本,一种的布局主要是在居中的位置并且所放置的信息也相对较多,另一种是页面底部只放置一个LOGO并且大面积留白。个人比较喜欢大面积留白的方案,2种方案排版类似下图,这里拿的是UC浏览器的不同版本的启动页做举例。
刚开始产品问我这样排版会不会太空了,我当时也没有更好的回答只是说这样比较有逼格.....后来产品自行查找了一些其他产品发现确实很多app采用这种排版形式。那么我们接下来探索一下,有没有什么理论来支撑这种大面积留白的布局形式呢?并且在我们面对他人质疑的时候如何有理有据的说服对方,说明我们的设计原由呢?而不是说这样就是好看,就是有逼格,到底谁更专业等站不住脚的解释。
当然启动页的作用是为了加载整个app,为app的呈现所预留时间。大量的留白也是带给用户遐想和期待。当然留白的情况也并非一定适用,具体还要根据产品策略来设计。
一、留白恐惧症的起源
中国清代的青花瓷
其实留白恐惧症从古至今是普遍存在的现象,最具有代表性的是清代的青花瓷的图案纹样。我从小就一直不能理解这样密集的图案有什么美感可言,对我来说倒不如是密集恐惧。
意大利时期的绘画代表
当然不止中国清代的青花瓷,欧洲维多利亚时期也一度出现了更为凌乱冗杂的艺术风格,甚至在平面设计领域出现了维多利亚风格。
当时意大利出生的著名文学和艺术评论家 Mario Praz 创造过一个拉丁语词汇,Horror Vacui,意为对留白的恐惧。其实就是针对维多利时期的绘画和设计风格的吐槽,绘画和设计上的矫揉造作,繁琐装饰,每一个细小的空间都需要被填充、塞满,推动这一“设计趋势”的,其实就是对留白的恐惧。
虽然当然由于在长期和平繁荣发展的前途下不可避免的现象,但是也体现了物质富足的人们的精神世界对空白空间的恐惧。
那么相反中国写意山水画为什么偏向于那么多留白呢?
古人看画和现代人不同,现代人由于互联网的普及,我们看到的画大多是一览众山小。而古人是拿到的画通常是很大的卷轴,一点点的展开细细品味浏览山河间的每一处景致。走到山林密集之间,就需要一些远山水景色交相呼应。这里的留白其实是山水的延伸,以无相表达意向,言有尽而意无穷。没有这些“留白”就无法烘托山水的壮阔。
那么这里的留白总结为两点:
一方面是缓解视觉疲劳,让画面更有节奏,张弛有度。
二是带给人对景色的无限遐想。
二、什么是留白?恐惧留白?
那么话说回来到底什么是留白呢?人们为什么会恐惧留白?
留白的定义:
百度百科解释为:比如画画,画画需要留白.艺术大师往往都是留白的大师,方寸之地亦显天地之宽。南宋马远的《寒江独钓图》,只见一幅画中,一只小舟,一个渔翁在垂钓,整幅画中没有一丝水,而让人感到烟波浩渺,满幅皆水。予人以想象之余地,如此以无胜有的留白艺术,具有很高的审美价值,正所谓“此处无物胜有物”。
想象一下上面这幅画如果整个画面画满了水波纹,效果是不是大打折扣呢?
很多人理解的留白就是空白,其实留白是空间的一个负值。它并不一定非得是白色,它相对于其他元素也同属于设计空间布局框架的一部分。留白的使用可以替代分割线将内容、文本、图形、图标等众多视觉元素进行合理的分割,让视觉更容易向内容聚焦。
那么在移动端我们对留白的定义可以理解为:
留白是同属于空间布局框架的一部分,小面积的留白可以起到分割、归纳信息的作用,大的留白可以使用户更专注于内容。
关于恐惧留白:
恐俱留白这句拉丁文,指的是渴望用资讯或物品将空白处填满。就风格而言,正好与极简主义相反。自亚里士多德以来,虽然这个词语在不同领域有不同的意义,但在今天,主要是用来形容不留白的艺术和设计风格。
三、留白的重要作用
恐俱留白越高,价值感就越低
我们可以看下上图的不同服装店的展示草图设计方案,最左边的橱窗摆放了模特并悬挂堆叠了很多衣服。中间的橱窗摆放了4个模特,最右边的只放了2个。那么相对的那家店给人感觉这家的衣服更贵呢?哪家感觉最便宜呢?显然是摆放最密集的最贵,摆放留白最多的最贵。
在绘画中留白,留白的主要作用是衬托主要景物以营造意境氛围,再者就是构图分布的需要了。那么我们套用到移动端留白的重要性有哪些呢?
·突出核心内容,使能容更益于阅读
·阐述视觉、信息元素间的关系
·对复杂性的信息归纳整理
·提升app的易用性,摒弃过多的视觉干扰元素
关于以上作用的理解,将在下篇结合关于留白的适用性和不适用性进行讲解方便理解。并探讨下如何回应客户留白太多的疑问。