总监说你的平面作品太散？这篇深度干货来帮你！

在本期中，我们继续学习格式塔系列的原则，所以在本课中，我选择了两个相互关联的原则，它们分别是「相似原则」以及「共同命运的原则」，当然，这也是平面设计中广泛使用的规则。如果你仍然被导演说你的作品没有相关性？还是觉得你的布局中所有的元素都在战斗？那么这门课程可能会帮助你解决这些问题。

上期回顾：

相似原则

接下来，让我们先了解一下 相似的原则是什么？相似的原则告诉我们，具有相同属性的元素比看起来完全不同的元素更相关。

如图所示，我们下意识地认为圆与圆之间有一定的联系，它们具有相同的轮廓特征，当然方形也是如此。视觉上的相似性有助于我们简化眼前看到的信息，也有助于大脑的理解。与其他方法相比，相似的颜色更容易与我们联系在一起。即使形状不同，它们也将被视为相关的整体。

类似于上一节提到的接近原则，相似原则也起着相关性和区分性的作用。然而，类似的原则不会受到位置的影响。即使距离很远，它们仍然可以创建相关性，这与接近原则完全不同。

尺寸是另一种有效的工具，我们可以用来创建相似的性质。即使所有的形状特征都是相同的，大小的相似性也会使更大的形状变得突出，并相互形成一个组合，更小的形状自然会成为另一个组合。此外，相似的方向也可以创建相关性。我们只需要有意识地创建相似性来相互关联元素。

事实上，类似原则的应用非常普遍。举个简单的例子，像连续观看这样的游戏利用了人们视觉中的生理现象来区分相关性。我们更容易找到轮廓和颜色相同的图标，即使它们很远，也很容易引起我们的注意。

在球场上，无论球员的位置如何变化，我们都可以通过衣服的颜色来确定他们是哪支球队。

另一方面，类似的原则当然可以帮助我们区分不相关的内容。让我们一起玩游戏。你能在短时间内找到徐锦江先生吗？

当然，如果你觉得太简单，我们可以增加难度...

然后，在这里，我们可以初步总结类似原则的内容。它是指人眼在认知周围环境时，会下意识地将相似的视觉元素归类为一类，这种认知过程不会受到距离的限制。那么，在理解了这些之后，我们如何将这一视觉原理应用到设计中呢？接下来，我将带领你一起找到答案。

类似原则在设计中的应用

1. 建立关联

不要低估类似的原则。了解这种视觉组织机制可以有效地帮助我们改进我们的设计。通过总结和总结，我们试图进一步划分类似的原则。我也希望你能更快地吸收它，并理解它在设计中的功能和作用。

类似的原则在设计和应用中有四个主要的功能属性。那么它们是什么呢？首先，第一个功能是建立联系，也就是说，我们可以很容易地利用类似原则的特征在布局中建立相关属性。

让我们举个例子。想象一下，如何在人群中快速区分同一个团队？事实上，答案也很简单，我们可以使用类似的原则，在团队成员之间添加类似的属性，以便联系他们。所以，例如，我们可以让团队成员戴上相同的帽子，这样它就达到了相关性的目的吗？

同样，面对眼前的文本，我们如何区分段落？想想人群的例子，也许你已经知道答案了。是的，只要在每个段落的开头添加类似的属性，我们就可以很容易地区分段落。

例如，在每一段的前面添加项目符号，就像人群中的帽子一样，将每一段的首相联系在一起。正是因为项目符号的添加，我们才能在第一时间区分它们的位置。

更有趣的是，这种共同的属性可以是文本编排中的任何外观。例如，它可以是一个带有颜色的数字。

或者一个完全看不见的空间，我们只需要向内缩进所有的段首都，就能创造出相同的属性。

当然，这也是日常安排中使用频率较高的段落区分手法。

另一种形式是增加每个段落上方的距离，这也是一种相对常见的做法。它不仅采用了上一节提到的接近原则，而且具有相似的属性。

页码是书籍设计中不可缺少的元素之一。它的主要功能不仅便于参考，而且具有相关页面的功能。页眉或页码通常出现在每个页面的相同位置。因此，无论布局中的内容如何变化，它们似乎都是相关的整体。

就像之前段落的区别一样，看不见的空间在布局中也非常重要。例如，如果我们想在布局中心放置一个方形元素，它的大小和位置必然会影响周围的空白形状。在这种情况下，我们可以通过重复空间的大小来建立联系。通过将布局划分为更小的空间，我们可以更准确地控制空白。目视检查显示，方形的大小与页面的九分之一非常相似，而且不是中间的。所以，因为它非常接近，我们只是把它标准化成与周围空间相同的比例。调整后，布局中的正形和负形呈现出相同的比例关系，即它们之间有一定的视觉关系。

这种空间上的类似技术将用于布局安排和标志规范来规范布局。处理后的布局将更简单、更容易理解，当你发现布局中的可见元素和可见元素看起来相关时。所以毫无疑问，类似的原则必须工作。

布局中元素的联系也是这些细节的关键作用。相同的元素会让人感到统一，相似的属性也会让布局中的变化更加和谐。

2. 秩序/规律

那么，除了帮助我们建立联系之外，类似的原则还有什么作用呢？接下来，我们将继续学习第二个功能属性，即创建秩序和规则。

这并不难理解。举个简单的例子，如果我们把凌乱的房间和整洁的房间进行比较，它们之间会有什么区别？显然，整洁房间内相同的物品会分类摆放，增强了整个空间的共同特征。

士兵的队伍也是另一个显著的例子。人们穿着相同的制服，甚至动作也是如此。结果形成了一种规则和秩序。这就是类似原则的作用。

由于重复图案没有边缘概念，因此我们经常可以在不确定页面边缘大小的设计场景中看到类似的设计。例如，我们家的壁纸就是一个典型的例子。制造商无法估计每个房间的墙壁尺寸，因此他们只需使用重复的图片进行平铺。这样，问题就会得到解决。

秩序感的构成在日常生活中也很常见，如背包、包装、枕头等。它会给人一种华丽而复杂的视觉印象。

当然，我们也可以在秩序中创造「不同」。除了这种画面「逼死强迫症」除了功能，我们还可以很容易地建立焦点。当大多数布局都是相似或相同的元素时，这种差异将被无限放大，我们很容易注意到它们。因此，这种技术在平面设计中的应用也相当普遍。

3. 节奏/韵律

在理解了相关性和秩序之后，让我们学习类似原则的第三个特征。这就是节奏和节奏，你可以把它理解为一个有层次变化的规律。

一成不变的重复，虽然有秩序感，但有时会让人疲劳。如果你添加太多的变化，它会显得特别凌乱和烦人。人们很难理解复杂的图形。有没有办法同时改变和秩序？答案是肯定的。我们可以介于两者之间，并在变化的基础上增强元素之间的相似性。这个过程是产生节奏和节奏的关键。

让我们回忆一下音乐的节拍，它是否会在变化的同时有一个重复的循环？

如果你听到一成不变的声音，那就不是音乐了。就像图中一样。隔着屏幕好像听到一阵噪音吗？

节奏和节奏在布局设计中也非常重要。对于内容本身，不同层次的信息需要在视觉上反映足够的差异，同一层次的信息应该有相同的外观。

让我们以这本书的布局为例，分析它的组成是什么规则和变化。首先是重要的信息，我们可以看到图片中所有的绿色标志都是相同级别的内容。由于它很重要，它应该是布局中最引人注目的，因此更大的视觉区域是必不可少的。其次，它是一个相对重要的信息，即图片中标记的蓝色内容。最后剩下的自然是其他信息。线条不仅起到装饰的目的，而且提供了分割的作用。底部页码不仅作为信息补充，还具有装饰布局的功能。

让我们再来看看这个版本在表面上，所有主要标题的大小和颜色都是一致的，类似的特征可以帮助人们快速识别下一个标题。图片的视觉区域也采用了相同的原则，主次分明，同一层次的图片区域几乎相同。

4. 视觉引导

所以在这里，我们还没有谈到最后一个特征。它是视觉指导，与接近原则相同，相似的原则也具有指导属性。

就像街上的路灯一样，当具有相同属性的元素以渐变的形式出现时，就会产生方向性。把我们的眼睛引向更远或更近的地方。

这两张海报利用了这一点。我们可以清楚地看到，左边的重复图形逐渐变小，并将视线引向标题；同样，右边的海报也指出了内容的主题，通过从小到大地改变文本，将视线引向底部的海浪绘画。

当然，类似原则中的指导方法不仅如此，我们还有四辆摩托车和相应的介绍。在图像和文本之间水平添加五条相似的线，形成四个平行通道，视线在线条的划分下水平移动。

当然，你也可以使用接近的原则，让内容相关的元素相互接近，不相关的内容相互远离，以达到引导视线的目的。在每辆车的底部都添加了文本，这也是一种相似之处，就像人群中的帽子一样，它们被有效地组织起来。

还记得类似的原则不受位置的限制吗？我们只需要在摩托车附近添加一个号码，并在下面相应的内容上添加一个相同的号码。这样，两组内容就很容易联系在一起，实现了指导的目的。

看不见的空间也是建立关联的有效方法。顶部空间的位置可以直接用图形标记，也可以直观地建立关联。

当然，我们也可以使用颜色的相关功能。诀窍是找到可以作为共同特征使用的属性，然后根据相似的原则在相关元素上来回移动视线。

让我们做一个案例，我们虚拟一个案例「莲花摄影展」以上项目是照片和文案信息。首先，我们确定布局中的元素结构，并根据视觉重心安排元素之间的位置关系。接下来，更换图片，并将照片中的主题安排在相应的位置。其次，我们将文本信息分为主要和次要，并根据重要性替换预期的草图。

接下来，我们将文本组放置一条装饰线，使信息更加突出，但也使文本组合看起来更加饱满。在组合上方添加一个花图标，可以使文本组与主体之间的相关性更强。在组合中添加一种颜色，使花瓣与文本组合之间的联系更加紧密。所以在这里，这个布局就完成了。

以上介绍了与相似原则相关的四个属性，即相关性、秩序、节奏和指导。然后，我们将继续介绍另一个与相似原则相关的视觉特征，即知觉恒常性。什么是知觉恒常性？它指的是我们的大脑在认知过程中保持相对稳定的状态。即使客观条件在一定范围内发生变化，我们仍然可以清楚地识别事物。

让我们举几个例子。例如，当你在图片中看到梦露的照片时，你会对图片有一定的印象。

无论这张照片发生了什么变化，我们对它的认知都会保持不变。正是因为我们的视觉认知是恒定的，它们不会被视为其他新事物。

再举一个例子，当你看到你面前的门时，你会发现每个门都有一个相同的按钮。当你点击其中一个按钮时，答案是门打开了。然后我们将根据经验关联其他三个按钮，认为只要我们点击红色按钮就可以打开门，即使我们看到相同的门很长一段时间。

同样，通过学习，我们意识到一种蘑菇是可以食用的，所以蘑菇的印象会留在我们的脑海中。当你再次看到相似的蘑菇时，我们会将其与印象中的蘑菇进行比较。即使它们的角度、形状和其他外观不同，它们也是由于感知恒常性的存在。

我们可以自然地区分它们属于同一类，可食用的蘑菇。

知觉恒常可分为不同的性质变化，如尺寸恒常、形状恒常、颜色恒常、距离恒常、速度恒常等。

但事实上，你只需要知道，我们的大脑有能力识别相同的物体。例如，我们现在看到的图形。无论它发生了什么变化，我们都能识别出它们是一样的。

你可能会问，我们学习这些知识有什么用？事实上，所有的设计原则都是对各种现象的总结。只有了解它们的操作模式，我们才能在设计中注意到它们的存在。

当然，我们也可以有意识地打破这种意识的恒定性。例如，在图片中，从第一个角度看，它看起来像一辆自行车，但从另一个角度看，它变成了另一个外观。

我们仍然可以在设计中使用它。当我们需要让两张图片相互关联时，我们不需要选择一张完全相同的照片。由于知觉恒常性的存在，我们不会将其视为新事物，无论是形状还是特征的变化。

因此，即使另一张照片的角度不同，我们也可以将其视为同一个产品。这不仅增加了布局的变化，而且丰富了产品之间的显示形式。

让我们再做一个简单的案例，这是一个无人机介绍界面。我们将图片信息和文本信息丢失在布局中。为了使图片更加引人注目，我们在这里添加了象征天空的蓝色图片。然后将图片出血，安排在布局类似于黄金分割的位置；文本信息也分层，最后安排在右侧的空白区域。

在布局的其他区域添加相关的次要信息和装饰元素，以提高元素之间的跳跃率，使布局看起来更加丰富和有趣。吸收图片的颜色，并填充在装饰线上，形成图片和文本之间的回声。因为这是一个解释电源系统，我们也可以单独提取机翼。当人们看到右边的图形时，他们自然会将细节与左边的照片联系起来。

由于知觉恒常的存在，我们不需要使用完全相同的图像，只需要让人们看到它是相同的部分。然后这个布局就完成了。

5. 案例

在这里，我相信你已经理解了类似的原则。人们将相互关联具有相似特征的元素，以便更容易地理解信息。颜色的相似性将比形状和大小更强。相似原则所反映的相关性不受距离的影响，但也具有秩序、节奏和指导的作用。事实上，类似的原则离我们并不远，相反，它在设计中的应用相当普遍，所以让我们来看看它在设计中的一些应用案例。

让我们来看看这组海报。颜色的相似性贯穿整个布局。它将关闭不同的海报 键信息相互关联。

这个布局也使用了颜色的相关性。白色添加线框、黄色添加线框和纯黑色文本，三组元素相互穿插，形成了我们看到的布局效果。

这个布局呢？由于相同的颜色，底部文本主体与主标题之间建立了联系和回声。

在这个布局中，虽然文本信息在位置上并不接近，但它使用了相同的形状和大小。这使他们之间产生了相同的共同特征。因此，这两段文本自然地联系在一起。

同样的图标出现在布局和产品上，这样的图形关联也很常见。

在这个布局中，虽然椅子的形状不同，但由于感知的恒定性，我们仍然可以把它看作是同一把椅子。

这组布局呢？当人们看到布局中心的大圆形图标时，他们自然会看到类似但更小的图形。这形成了一个有趣的视觉指导过程。

这个布局也使用了颜色的关联。

所有的文本都添加了相同的倾斜角度，因为即使倾斜也不会显得凌乱。这是类似原则产生的秩序感，使每个元素都具有相同的属性。

它很实用吗？只要你理解了类似的原则，它就会成为我们设计中的指导方针。当你想在设计过程中与某些元素相关时，你不需要冥想。那么，你认为这篇文章已经结束了吗？看看进度条，对吧？我们在一开始就提到了「共同命运的原则」没有讲呢。

共同命运

它与类似的原则密切相关，但它们是不同的。接下来，让我们了解共同命运的原则。

共同命运原则的名称看起来很奇怪，对吧？它到底是什么意思？共同命运原则的主要特征仍然是相关性和区分性。这类似于我们之前提到的两个原则。但不同之处在于，接近原则实现相关性和区分的主要条件是位置关系。我们今天主要谈论的相似原则是元素之间的共同特征。那么共同命运的原则呢？，主要依赖于运动和方向。

它主要是指当其他条件相同时，向同一方移动并以相同速度移动的元素将被大脑识别为一组元素。无论这些元素有多远，或者它们看起来有多不同，如果它们一起移动或改变，它们都被认为是相关的视觉单元。

这种现象在自然界中也很常见，无论是蚂蚁、鹅还是海里的鱼。当这些个体朝着同样的方向和速度移动时，我们会下意识地把它们视为一个完整的组合。

运动也是一种比较方式。相对而言，不同外观的汽车只需要向同一方向移动，速度相似，就会被视为一组完整的视觉元素。

为了更容易理解，我们一起来看一部短片。

这是一个典型的例子，用于图形界面中共同命运原则的应用，也是我们几乎每天都使用的群组功能。

还有哪些例子？众所周知，网页的浏览方向是上下滚动的，所以有些元素在滚动的同时保持不动，有些元素会随着滚动移动。这也是一种区分内容的方法，也采用了共同命运的原则。

我们在手机上 app 在里面，我们也将使用共同命运的原则。通过动态效果的加入，我们可以很容易地区分哪些部分是同一组，哪些部分属于另一个结构。

在这个时代，人们每天面对的最多的是手机屏幕。事实上，屏幕上每组图标的移动都是一个典型的共同命运。

两个原则应用案例

今天，我们将向您介绍两个知识点，即相似原则和共同命运原则。所以为了让你更容易理解我们今天谈论的内容，我将带领你一起做一个实际的案例。在这个过程中，我也希望你能带着我们今天谈论的内容来思考问题，并从一个新的角度来观察布局。所以让我们首先看看它们是什么。

这是一个介绍这个安全系列机器人的网页。 SQ2。

首先，我们计划页面的比例，确定第一个屏幕 16：9 屏幕又宽又高，然后添加垂直网格线。你可能会在这里问？为什么只有垂直网格？这是因为网页设计不同于传统印刷，其高度不确定，所以我们只需要规范垂直网格线。网页的第一个屏幕自然是用来介绍机器人模型的。我们可以从品牌标志中吸收灵感，这里我们选择了一个基础 45 角度拉长的六边形作为实施 视觉线索始终如一。

这是下拉网页的第二张图片。主标题仍然继承了六边形的倾斜线，呼应了主视觉，也起到了强调层次的作用。

在这里，我们提取三个关键点，仍然使用六边形设置，将图标和信息组合成三个独立的图片。

面对抽象的数据，人们往往会感到厌恶。因此，数据的可视化处理变得尤为重要。它将更有利于人们理解信息。同样的蓝色也是创建相关性的关键元素。

总的来说，我们可以安排三个链接按钮，方便人们进一步了解其他内容。

下一步，我们将安排一张真实的照片，以反映机器人在文案中对人口短缺的补充作用。

最后，公司简介，标题部分仍采用相同的风格外观，其余信息只需安排在同一网格系统下，信息之间的位置就会产生整体的统一感和相关性。

在这里，网页设计基本完成。六边形斜线在标题之间建立了相关性，呼应了上面的主要视觉。那么，让我们来看看元素是如何在共同命运的作用下组成的呢？当所有元素向同一方向移动时，图片中的所有元素都是相关的。这就是共同命运的原则。

最后，让我们总结一下今天的内容。我们的大脑将看起来相同的元素分为一类，它们相互关联，只需要在不同的元素上添加相似的属性，我们可以很容易地创建联系；同时，这些相似的共同属性可以形成规则，规则和秩序是设计的基础，只有秩序上的变化才能更加突出；此外，不变的重复会导致视觉疲劳，所以在保持共性的基础上，我们需要做出相应的变化，在文本安排中，层次是这种节奏感的典型体现；建立联系也意味着它具有引导视线的功能。这个问题的内容就在这里，下次见。

欢迎关注研究社微信微信官方账号:「Yanxishe2017年」