很多初学设计,或者设计基础一般的朋友,面对诸多元素不知道该如何排版,并且有的朋友会任何一处空白都不忍放过。其实排版也是有门道的,大体来说有四大法则:亲密性原则、对比、重复、对齐,只要熟练掌握了这四大法则,排版基本是就不会出问题了。如果有条件的朋友(其实大家都有条件,这本书不贵,不行就找我要电子版)可以买《写给大家看的设计书》。本文章就是参考的该书。好了废话不多说了,直接来把!
亲密性
亲密性原则就是将相关的项目组织在一起,将不相关的项目分开。简单来说就是将同一类元素距离近一些,紧密亲切一些。不是同一类的离得远远的。
举一个简单的栗子🌰:
仔细看,左图就是没有利用亲密性原则,而是尽可能的把他们都罗列在一起。这样的结果会让人很难高效的找到自己想吃的,用户体验不友好。而右图就只是把四个汤往下放了放,汤和饭就可以明显的区分出来了。当然这里还用了对齐的原则,下一篇文章在讲。
我们来看看下面的这张又问题的名片,这是一个很典型的布局,很多人一般都会这样的布局,把四个边都填满,放上自己喜欢的东西,可是这样你会读起来很费力,眼睛需要转动好几圈才能读完所有信息并处理。
那如果多个信息之间存在某种关联,那他们就可以被放在一起。当然如果两个元素距离很近,就很容易把他们当成一个视觉单元,就像实际生活中一样:两个人总是走在一起,这俩人绝对有猫腻。亲密性(即紧密性)意味着存在关联。
来让我们一起来看看名片中有哪些可以归纳在一起:其实这张名片共两大分类,一类是个人信息,也就是电话地址微信这三个都是指的十里先生的个人信息。另一类是十里先生的名称和称谓,这可以归为一类。好,根据这个我们来进行一下排版。
是不是读起来很容易了,也很容易被理解。仅仅只是简单的利用了这样的概念,这个名片不论从理论上还是从视觉上都很有条理。它还能准确的传达信息。
亲密性的使用很微妙,不过相当重要。布局的时候一定明确元素和其他元素是否在一起,留意无关元素。但是亲密性原则并不是说所有的一切的都要更靠近,比如上面的名片,也是先理解他们的性质是什么样的,同一性质的联系在一起,不同的就要区分。也就是说如果两个元素,在理解上存在关联或者两者之间存在某种联系,那就应该在一起,反之滚远点。(这是第二次强调)
但我们来看看,在下面的这个栗子中,从左图里,你能准确的得知活动涉及的主要知识吗?
我们在看看右图,我们一眼就能看到上面罗列了几个知识点,因为每一个知识点都拉开了一定的距离,虽然六个都是知识要点,但是每一个都个顶个的凑在一起也会影响阅读,所以靠的近并不是合体,就像是恋爱一样,两个人恋爱了当然是要靠近一些了,但是彼此也应该给对方留有一些空间,这样才是正确的相处关系,彼此才不会因为距离过近产生厌烦,也不会因为没有距离而感到压抑。(当然右图我还运用了对比原则,也是后面的文章会讲给大家的)
最后再举一个栗子本章就结束了,还是以菜单为栗,这次升级了
上述问题就不多阐述了,让我们利用亲密性原则给他升级一下:
依旧是不同对类别进行了简单对区分,效果就立竿见影了。但是价格信息还是很乱,虽然价格理论上是对齐了,跟着菜名,但是视觉上,所有的价格完全没有亲密关系,这样我们在升级一下:
我们把价格全部右对齐,同时在增加一些点,让价格和菜名连接起来方便阅读。这样看是不是就好多了,其实市面上大多数的菜单都已经做到这点了,我们只是以这个作为栗子来学习亲密性原则。凡是所有需要排版的设计,包括平面、app、web等等的一切都要熟练运用这四大原则,这样我们的设计才是一个合格没有阅读障碍甚至看上去颜值颇高的作品。
好了今天初十,小编也是一个人留守空房写文章,希望大家能多多支持(甚至我还拿谈对象为栗子,哎)