概念体系的整理（简单原则的概念与应用）

文章：设计中的超整理术，和凌乱说再见

来自公众号：研习设

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在一个版面中，最少有一个组合。最多虽然没有绝对的上限，但常规情况下，九个组合就已经足够了，它是相对来说比较常见的数量。

那么另一个问题呢？距离多近才算是一个组合呢？多远才能区分成独立个体呢？

接下来我们通过一个实验来进一步梳理一下这个问题。首先，画面中的四个台灯紧紧挨着彼此，也就是说，它们从主观上看一定是一个组合。那么接下来我们调整间距，让台灯之间相互距离半个台灯的距离。现在重新看待这个画面，它依然是一个组合的形式。

那么我们把台灯之间的距离预留出一个台灯的间距呢？由于台灯与台灯之间的距离小于台灯与边界的距离，所以即便他们离的很远，我们依然可以认定它们是属于一个组的元素。

将距离设置成一个半台灯那么远，又会发生什么呢？这时水平方向上，台灯与页面边缘的距离已经近乎等同于台灯与台灯之间的距离了。这时成组的倾向开始消失，台灯逐渐成为了单独的个体。

我们在加大这个距离，预留出两个台灯的宽度。现在看这个画面，台灯之间的关联已经消失，距离页面的空间已经小于台灯与台灯之间的距离，此时页面中的四个元素成了绝对独立的存在。

如果在这个页面中在加入一个台灯，那么就变成了，左侧两个独立的台灯再加上右侧的一组台灯。

一切都是相对而言的。相对于页面来说，所有台灯加在一块可以被看成一个整体，而进一步观察，页面中可以分成四个独立的个体，而第三排台灯之间的距离明显小于与其他台灯的距离，所以这三个台灯会被看成是一个组合。

在版式设计中，这种相对的概念依然存在，无论字间距、行间距怎样变化，只要他们整体的比例不变，版面就不会出现阅读上的障碍。

我们来看几个例子，可以明显看出，版面中字距是最小单位，而页边距是整个页面中距离最大的空间。无论是画册设计还是报纸杂志，甚至网页和UI设计，这些都只是载体不同罢了。文字编排的根本性规则是不会变的。只要保证各个间距组合之间的相对性比例，就能更好的控制版面，让信息更高效的传达。

为了方便大家对于本期内容的理解，接下来我们一起运用接近原则去完成一个设计案例。希望大家能够举一反三，更好的吸收与理解。

首先介绍一下我们虚构的项目背景，这是一版超级英雄的电影海报，主要投放地点是商场的走廊以及街区路边的灯箱海报。这就意味着，版面中的内容编排方向应该尽量精简，在很短的时间里让人记住它。

电影的出品方通常会把相关宣传物料下发给负责相关内容的公司制作，这里我们主要收集到这些信息。首先就是确定版面中主视觉的大小，我们将蜘蛛侠的图片安排在版面的中心位置。

接下来我们把蜘蛛侠的标准字放置在图像下方，根据阅读逻辑，当人们的视线被照片吸引之后，自然会向下阅读主标题文字。紧接着是英雄远征的副标题。在标题字的顶部，我们加入漫威公司的标志，那么到这里，下方的标题部分就已经初步形成了一个简单的视觉单元。

其余信息我们继续沿着中轴线去安排它们的位置，同样的，我们将元素相互聚集到一起，形成一个更大的组合。在版面下方的左右角落里，我们加入日期与宣传语，让版面内部的元素支撑起版心结构。同时这两个小元素也可以理解成更小的元素组。

那么到这里这个版面中的信息就安排好了，通过对信息的布局，我们创建出了一个更大的版心面积。

页面总共被划分成了五栏，主体与标题占据了3栏的宽度，与页面呈现2 ：3的分割比例，非常接近黄金分割。

到这里你可能会觉得主体难免显得有些单调，不要急，还记得我们之前说过的组合方法吗？我们可以选择一个与主体相关的元素去和它形成组合。只要仔细思考，我们总能找出有趣的组合方式，比如这里我们就选择了蜘蛛侠胸前的这个标志图形作为切入点。

当然这也是一种很常见的组合手法，把电影里面那些具有象征含义的图形和人物进行一个结合。在抽象的图形与具象的人物的对比之下，视觉效果一般都会比较具有冲击力。

那不仅仅是电影海报会用到这种手法，在类似的商业视觉领域，也能够看到这种处理技巧。

好像有点跑题，那我们回到刚刚的案例上，接下来我们为版面着色，选择同色系搭配通常是最保险的做法了，它能让背景与主形象建立起视觉关联。接下来是图形的颜色，我们继续吸取蜘蛛侠战衣的配色。同时为了突出质感，我们在这之上在加入一层光感。

我们在周围添加影片中的无人机，作为整个画面中的点缀元素出现在版面中。最后，在背景部分添加一些对应的场景，那么到这里这个版面就基本完成了。

是不是没过瘾呢？我们再来一版不一样的。这一次我们将传播类型修改成杂志的封底广告，媒介的变化，也意味着编排风格的改变，对于杂志这种既能够近距离观看，读者又有充足时间阅读的情况，信息的编排可以变得更加饱满一些。

这里我选择将蜘蛛侠的英文放大，成为版面中的主要框架。将标题置于版面顶端，紧接着，我们加入副标题“英雄远征”。那从剧情中可以知道，这次远征其实属于秘密行动，所以在标题的处理上，我们也让它显得比较低调一些。

接下来为了视觉的平衡，我们从版面底部加入主题口号。我们可以将文本看作是图形，裁切处理会让它看起来更加特别。当然这里我们还可以做一个有趣的处理，让圆点替换成蜘蛛侠的插画。因为版面中文字量预计会比较多，所以为了差异化的处理，这里我们也把这段话处理成描边的样式。

接着，我们将其余信息划分好层级后依次安排到版面中。文字之前通过空间的划分，形成了一个个视觉单元，而这些视觉单元也因为彼此靠近，又形成了一个整体。那么到这里这个版面的架构就基本完成了

接下来我们选择一张蜘蛛侠的照片，置入到组合里面。这一次我们选择黑底色，因为黑色也是这部电影里面首次出现的战衣颜色。

当然啦，我们也可以在背景中添加一些层次变化，让它看起来更有细节。最后，在其中添加一些人物腾空时的阴影，那么这个杂志的封底广告就设计完成了。

最后我们再来看一下最终效果。

以上便是本期的全部内容了。我们一起来总结一下今天的内容吧，接近原则在日常生活中随处可见，我们可以运用贴近与远离操作去达到区分与分类的目的。在文字编排与版式设计中，接近原则具有重要的指导地位。当元素与元素相互靠近，他们就会被看成一个整体，作为版面中的主体来说，组合的方式能够进一步增大视觉面积。最后贴近与远离是相对的概念，只要保证相对性，文字编排就不会有大问题。

,