前一段时间,新东方因为年会上的一首歌上了热搜,歌词写的网友们感同身受。里面有一句歌词就是,干的累死累活,有成果那又如何,到头来干不过写ppt的。一个ppt写的好不好,内容还是其次,首先是写的能不能让用户有良好的阅读体验。其实不光是ppt,宣传册,论文,网页设计,广告设计等等都需要排版。那么怎么才能让你的设计看上去更专业,更有条理,更统一,也更有趣呢?今天我来给大家简单讲一下四大基本原则,相信大家看过之后,会对自己的作品有更深层次的理解。
亲密性(proximity)
亲密性原则是:将相关的项组织在一起,移动这些项,使它们的物理位置相互靠近,这样一来,相关的项将被看作凝聚为一体的一个组,而不再是一堆彼此无关的片段。
看起来是不是很绕,其实用通俗的话讲,就是要把相关联的内容,放在一起,挨的近一些。就像很多人一起开一个party,你一眼看过去会发现有很多一坨一坨的人分散在各个角落,而那挨的近的一坨人肯定是比较亲近的关系了。排版也是一样,你要能先理解哪一部分是应该放在一起的,让它们之间的关系近一些,而一部分一部分的内容应该相对离的远一点,这样阅读的人就会知道,这是下一个部分了。
大家看看这张名片,是不是感觉看完这张名片的内容,需要很长时间。先看中间,然后再从左往右,从上往下的顺序观看,看完以后还会确认一遍自己是不是看完了全部的内容。名片上面的每一项看起来都像跟其他项没有关联,这样就不知道该从哪里开始哪里结束。如果我们把名片做一点调整,将相关的元素放在一起,使他们建立更近的亲密性,会怎么样。
从哪里开始阅读从哪里结束,是不是很轻松,阅读速度是不是也快了很多。仅仅利用这样简单一个概念,现在这张名片不论从理解上还是视觉上都更有条理,而且还能更清楚的表达信息。
亲密性原则不是说所有一切都要更靠近,大家看看这个页面,是不是有种不想看下去的感觉。虽然信息都是从上往下从左往右排列,符合人的阅读顺序,但是毫无阅读欲望。
现在关系是不是很清晰,我们可以一眼分辨出,哪些是属于哪个模块。阅读速度以及查找速度也变快了,更有条理更清晰。如果某些元素在理解上存在关联,或者相互之间存在某种关系,那么这些元素在视觉上也应当有关联。除此之外,其他孤立或元素组不应存在亲密关系。
小结
亲密性的根本目的是实现组织性。如果信息很有条理,将更容易阅读。也更容易被记住。
微微眯起眼睛,统计眼睛停顿的次数来数一数页面上的元素,如果页面上超过3-5个元素,就要先将要表达的内容进行一个分组,然后再表现出来,同一组的内容要亲密一些,组跟组之间要留有余地。
避免一个页面上有太多孤立的元素。
不要在元素之间留出同样大小的空白,除非各组同属于一个子集。
在有很近亲密性元素之间建立关系,不属于同一组的元素之间不要建立关系。
不要仅仅因为有空白就把元素放在角落或中央。
对齐(alignment)
对齐原则是指:任何元素都不能在页面上随意安放。每一项都应当与页面上的某个内容存在某种视觉联系。
对齐是一个很好理解的概念,从小时候开始,就被要求整理房间,所有的东西都要整整齐齐的摆放;在教室里面,要求把所有的桌子都要跟前面对齐;在操场做操,要求跟前面的同学对齐。比起乱糟糟的队伍,排成一列的队伍是不是在视觉上更舒服,比起一团糟的房间,整理过的房间是不是更容易让你找到你要找的东西。对齐可以制造出一个安静的中心,它的表达更清晰。
大家看这一张名片,在这个小小的空间里面,存在三种对齐方式,左对齐,右对齐和居中。上面两组没有沿基线对齐,下面两组也是。画基线是最好检验元素之间,是否缺少关联的方式。
现在我们将这张名片上面的元素按照亲密性原则进行区分以后,将所有的元素都移向左边,现在信息就看起来更有条理了。这些文本就有了一个共同的边界,这个边界把它们联系在了一起。
相信大家都记得在上一篇里面我们用了居中对齐,那么现在为什么又要左边对齐呢。居中对齐也是一种合法的对齐方式,但边界是软的,看不出对齐线的强度。尽管这是一条看不见的线,但是在左对齐里面,它很明确,你看到这张名片就可以脑补出一条这样分明的线。正是这个边界的强度为布局提供了力度。
居中对齐是初学者最常用的对齐方式,这种对齐看起来安全,更正式,更稳重,中规中矩,但通常会显得乏味。通过充分利用亲密性,并结合明确的右对齐或者左对齐,你会有不一样的感受。并不是一定不要居中,而是要留意这种对齐效果,是不是你想要表达的效果。
在进阶之前,最好坚持一个原则,只使用一种对齐方式,所有的文本都左对齐右对齐或者居中。如果你想要尝试在一个页面使用两种对齐方式,那么你就要让它们相互之间有某种联系。
尽管这两个元素用了两种不同的对齐方式,左对齐和右对齐。但是下面右边界跟上文的右边界,被一条看不见的线连接了起来。在页面上放其他项的时候,一定要确保每一项都与页面上的其他项存在某种对齐。如果文本行水平摆放,则按其基线对齐。如果有多个单独的文本块,则对齐其左边界或者右边界。如果有图片元素,将其与页面的其他边界对齐。绝对不要在页面上随意摆放元素。
小结
每个元素应当与页面上的另外一个元素存在某种视觉联系。对齐的根本目的就是使页面统一并且有条理。不论创建精美的、正式的、有趣的还是严肃的外观,通常都可以利用一种明确的对齐来达到目的。
要注意元素放在哪里,应当总能在页面上找出能跟它对齐的元素,尽管这两个元素的物理位置可能很远。
避免在页面上混合使用多种文本对齐方式。
尽力避免使用居中对齐,除非你有意识的想要创建一种比较正式、稳重的感觉。
参考书籍:写给大家看的设计书