首页 文章 排行 更新 赞助VIP 自定义收藏 搜索狂魔 注册登录

在这一期内容中,我们会向大家介绍「接近原则」。

版式设计法则除了「接近原则(亲密性)」外,还有这 2 个原则也非常重要:

  1. 对比原则
  2. 对齐原则

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

在开始之前,我们首先需要解决一个关键性问题?那就是什么是接近原则?很明显对吧,我们从它的名字中就能看出来,这是一个跟距离有关的概念。更详细一点说,它是指物体与物体之间的相对距离会影响到我们的判断,人的大脑会下意识的将眼前相互靠近的物体建立关联性,它们会被视为你一个整体去看待,而相反的,距离较远的则会被自动区隔开。

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

我们再举个例子,画面中出现的圆点零零散散,我们会很自然的认为他们是一一个相互独立的单元,每个圆形都是单独存在的个体。可当它们的位置逐渐靠近后,画面中又会发生怎样的现象呢?当图形相互靠近时,它们也就很自然的被我们认定成了三个组合。这种现象虽然不起眼,可是含义却是重大的。

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

在现实生活中,我们会将大雁的飞行轨迹看成「人」字形或是「一」字形,也都是接近原则在起作用。

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

海洋中,那些体型较小的鱼类会相互靠近成群结队,这种相互接近的队形能够有效避免天敌的袭击。因为这样会让其他动物将它们误认为是一条更大的鱼。

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

抬头仰望天空中的星空,我们会看到北斗七星。我们之所以能够辨认出它,也多亏了星星之间相互靠近形成了一个勺子的形状。当然人们对于星座的辨认也是相同的原理。

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

一起来总结一下我们刚刚都学到了什么?眼睛在认知事物时具有自动分组的倾向。元素之间并不需要紧紧挨着,只需要相互靠近,大脑就会将其视为一个整体。通过对距离的修改,我们可以任意改变组合的数量。比如将它划分成一个大的组合与另一个较小的组合。现在呢?画面又变成了左边相互靠近的四条线与右边相互靠近的两条线。只要熟练掌握元素之间的距离,就可以随意的创建元素组。

通过对认知心理的学习,我们知道了人脑会更倾向于将那些相互靠近的物体看作一个完整的组合。那么根据这个原则,我们只需要改变物体与物体之间的距离,也就可以对元素的成组与否进行操控了。但问题真就这么简单吗?其实我们可以继续深度挖掘一下。既然成组只需要修改距离,那么我们又该去聚集哪些元素,和去疏远哪些元素呢?这也就引出了接近原则中的一个重要概念。

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

我们都知道有亮光的地方就必定会存在阴影。这是一个很客观的现象。中国人在很早之前就已经领悟到了这点,世间万物总会产生相生相克的属性。接近原则也是一样。有关联自然就会产生区分的概念。

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

元素之间相互靠近,也会下意识的暗示人们,它们之间一定具备某些共同的关联。而相互远离的元素,也自然会产生相互排斥或者是互不相关的印象。

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

中国的古语中,有这么一句话「物以类聚,人以群分」 也就是指朋友之间门当户对、志同道合的统称。当然它也可以用在版式设计里。

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

比如我们看画面中的抽屉非常乱,我们应该如何去整理它呢?接近原则中的分类属性就体现在这个整理的过程中。

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

通过对衣服的分类并成组就能很好的解决,将划分好的物品收纳在各个分区里,之前非常凌乱的抽屉也就变得整整齐齐了。

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

这是超市中蔬菜的货架,可以明显看到,相同品种的素菜被划分到了一块,它们看上去是不是也是一个个组合呢?

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

日常生活中分类与成组的例子非常多,比如厕所的门口会将人们划分成男人与女人。

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

那么回到设计当中,当你在电梯里看到这样的楼层按钮,它们之间相互靠近却毫无关联,是不是就会觉得它很反人类呢?

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

接近原则在版式设计中的应用相当广泛,当你在阅读一段文字时就会很清楚的发现,正是由于相关的文字相互靠近,而不相关的文字相互远离。我们才能正确的去阅读信息。

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

一旦这个规则被打破,字与字之间的阅读顺序就会被破坏。我们也就没有办法正确解读版面上的信息了。

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

在中文语境里,汉字有两种方向上的编排形式,一种是水平方向相互靠近,垂直方向相互远离的横排阅读模式,阅读的顺序是从左向右,从上到下去阅读。

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

而另一种编排形式是水平方向相互远离,而垂直方向相互靠近的竖向编排。这种编排下阅读顺序是从右往左,从上往下去阅读。

文字信息的出现顺序需要与编排形式相配合,我们才能正确的将信息正解的解读出来。一旦文字之间贴近与远离的规则出现问题,那就会产生出各种阅读上的障碍,那么接下来我们一起来看看那些有问题的设计案例都是什么样子吧。

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

当你路过一个饭店的窗口,看到画面中的文字信息。你会怎样去阅读?是小炒便饭?还是小便炒饭?

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

我们在看这个例子,那么应该怎么去阅读呢?难道是「餐粉炒宵,快炒小夜」这明显并不通顺。对于以汉字为母语的我们,经过脑补自然会知道它在讲什么,可如果是外国人去看,就肯定会晕菜的。

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

我在看这个例子,依然是相同的问题,文字竖向的距离太近,横向的距离太远。

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

如果说类似电话号码的文字信息,我们还可以参照日常经验去判断,那么在面对这个公交站牌中陌生的地名时,就真的不知道怎样去阅读了。

贴近与远离本身就是一种分类的过程,人们会将具有关联的事物摆放在一起,而相互没有关系的事物就会被区隔开。除此之外,接近原则也能辅助阅读,当文字之间彼此靠近时,视线便会从一个字跳到距它最近的另一个字上,因此相互靠近的文字也会形成视觉上的引导流程。接下来我们一起从实际出发,看一看接近原则在设计中的应用都有哪些。

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

我们手机中的设置界面,就是贴近和远离的经典案例。具有相似属性的功能会彼此靠近成为一个组合,而组与组之间又相互远离,形成了独立的单元。

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

接近原则在文字编排中充当着重要作用,具有相同层级的信息,只需要相互靠近,就能产生关联,不同的小组合再次靠近,也就形成了下一个层级之间的内容关联。他们整体看上去又是一个更大的组合。

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

我们看这个画面存在什么问题?文字组上下的空间是相等的,所以我们并没有办法有效区分出这段文字究竟是和上方图片是相关的,还是在指下方图片中的内容。同时图片与图片之间的距离又非常接近,给人一种图片是一组,文字是一组的错觉。那么解决这个问题的方法便是,让文字组与相关的图片相互靠近。

如果周围的空间允许,增大每个组合周围的空间距离,能够让信息的区分更明显。如果左右的距离有限,我们可以将图片相互错开。这样一来也就能很好的区分信息组了。

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

除了创建视觉条理外,接近原则还有突出强调的作用。我们看画面出现了四个同等配置的组合,如果我们想要强调其中一个要怎么办呢?改变其中一个组合周围的距离大小,将另外三个组合靠近配置,这样一来,版面顶部的组合就被凸显出来了。相较于之前均等的配置,这样的版式显然会更有重点。

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

你知道吗?几何上的宽高相等,实际看上去其实却并不一样大。我们把线条去掉,是不是就更加明显了。如果想得到视觉面积上的相等,就需要忽略几何上的大小,以视觉面积去判断它们。组合的技巧或许能帮助到你,相互靠近的元素会带来更大的视觉面积。在实际工作中,我们一定会遇到那些即使放大,视觉面积依然不理想的主形象。这时应该怎么办呢?

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

我们可以做一个分类,比如图像与图像之间的组合。

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

可以选择那些与主形象具有关联性质的图片,当它与主形象进行组合时,我们不仅可以得到更大的视觉面积,同时也能提高画面的表现力。

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

我们也可以将文字放大。形成图与字共同组成的全新视觉。

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

不同形式的组合,也会让版面变的更加丰富。文字与图形的搭配能够让原本单调的文字变的更加直观和有趣。

用一篇超全面的干货,帮你完全掌握「接近原则」知识点用一篇超全面的干货,帮你完全掌握「接近原则」知识点

标志本身的含义会与图像所表达的内容共同映入眼帘。当然随着内容的变化,你也可以选择那些通用的几何图形。

用一篇超全面的干货,帮你完全掌握「接近原则」知识点用一篇超全面的干货,帮你完全掌握「接近原则」知识点

当两种信息融合到一起时,总会给人一种陌生的视觉感受。巧妙运用这些会让你的版面变的更加出色。

以上我们得知,当元素之间的位置相互靠近时,它们不仅会成为一个组合,同时成组后的元素视觉面积也会得到增大。那么新的问题也就出现了,元素究竟贴多近才能算是一个组合呢?想要区分两个独立的元素,又应该离多远呢?当你从今天的视角去看版面时,你会发现,它们无非是由多个更小的组合所构成的整体。那么一个版面中最多可以容纳多少个信息组呢?这些问题接下来我们一起去寻找答案吧。

用一篇超全面的干货,帮你完全掌握「接近原则」知识点

首先我们来寻找第一个问题,一个版面中最多能够容纳多少组合呢?其实这个问题比较好解决,只要抽样调查就好了。那么经过我们耐心的解构之后,最终我们得出了一个结论。

你来打破0评论