为了描述不同元素之间的差别，使用相似性、对比度、连接、分离、分组和取消分组来区分。根据它们携带的信息可以看到一些元素似乎很相识并表明他们是以某种形式之间存在相关性，我们也希望在不同的组中突出不同的内容。
而这两个关键之处是，显示的视觉元素以及其主要特征之间的关系。如果两个元素是以某种方式相关的，那么就应该表现出相似的视觉特性。如果内容不同，那么它们就是不同的。
基本特征
如何使元素显示彼此的差异和共性，答案就在其基本特征。基本特征是元素的内在特征或是内在属性。例如，元素是什么？它有多大？应该长的是什么样子的？
所有的元素都会从基本特征上传达一些信息。如果一个标题大于另一个，那么我们就可以想到大标题更加重要，我们还可以从有锯齿和锐利的形状作为危险的元素。
有时，元素的属性与另一个元素具有相同的特性才有更多的意义。例如前一段的标题，只有当标题大于另一个标题时才会显得更加重要，正是这样才能通过相似性和对比来进行比较。
通过多个元素给予视觉上的相似特征，我们就能获得相似的有关内容。如果在网页上有两个元素都是红色的圆圈，很自然观众机会好奇为什么？为什么是红色的？为什么是两个圆圈，可能的结论就是元素会以某种方式超出其外观的相关性，该元素的相似性表明他们携带一种类似的消息。
同样，通过应用元素在视觉中的不同特性，相比较于其他元素，就可以看到其他东西的不同元素的携带不同的信息。
任何一个元素的特性都可以通过转变，使得彼此看起来是相同或者是存在差异的，下面的一些特征是最常见用于显示对比度和相似性，排名不分先后，它们是：
（1）尺寸
（2）形状
（3）颜色
（4）值
（5）质感
（6）位置
（7）方向
一个矩形和圆在形状的对比，两个红色物体在颜色的相近。红色长方形和形状，并显示相似的红色圆圈的对比色。如何通过他们的视觉特性来平衡元素之间的相似性和对比度，将会很大的程度上取决于要传达什么样的元素给观众。
注意：虽然原始的特性最主要是直观显示对比度和相似性，但是还是可以使用其他的方式来显示，这要根据元素的实际传达的内容。词语“停止”和“走出去”是对比。而“停止”和“禁止”就是相似的。还有图像与文字的对比；长段和小段的对比等等。
对比
人们都会有意注意区别，这是一种生存本能机制，以便迅速从敌人中区分哪些是自己人。还能够快速准确的安全返回到洞穴，这在夜间是至关重要的。
我们也拥有可以迅速的预断出差异的能力。其中，对比是那么的容易吸引眼球以及容易发现。通过给那些从直接围绕其周围的元素比较元素之间在视觉上的不同特点，我们可以自己寻找侧重感兴趣的元素。事实上，由于与周围元素的对比就能更加的吸引我们的注意力，这种方法也是在设计中为了增加兴趣和兴奋感最有效的方式。
对比不仅仅可以吸引人的注意力，还可以在元素之间建立边界。例如，主要内容的背景颜色对比，并且边界以另一种颜色来显示，从开始到结束。
脱颖而出的差异可以突出重要的内容信息。差异越大对比就越是强烈，就更加突显重要元素。例如，用两种方式来衬托文字的粗体和斜体，使用粗体会形成更加强烈的对比来突显。这很简单，滴几滴血在粗体的文字上，相比较于斑点斜体从更远处看，也是更加容易识别的。
如果两个元素是为了消除这种对比，那就去除反差。并且确定观众不会认为这是故意虚假的，因为存在这种反差显然是故意为之的，会导致一些不必要的误解。字体15px和16px的大小中的差别人们通常不是那么容易发现的，如果观众察觉到了，那就会做出更多错误的理解。
要谨慎使用对比，而不要过度。如果都使用对比，就需要自己注意一些地方，不至于最后没有突出自己想突出的东西，最终会导致视觉噪点引起混乱的情况。
对于反差太大又会打破设计中和谐统一，出现混乱和困惑，这也会导致自己想设计的是什么，可是最后展现出来的又不是那样，这就需要我们仔细判断哪些元素是要使用对比以突显出来的。
格式塔原则：对比
每个格式塔原则都会适合用于显示有关某方面的相似性和对比度。我想之处两点。对比度是确定背景与图形之间的关系，并显示重点突出的和节点。
（1）图形和背景：对于一件事物确定其主要构成，会第一时间确定主要元素和背景。这种关系有助于结合上下文来理解，图形和背景之间需要确定彼此之间哪些是难以辨认哪些又是可以确定的。
（2）节点：这些地方是重点突出的区域，使得被设计元素与周围环境有些不同。对比度就可以帮助它们很好区分开来，并吸引注意力。突出的元素会在组合元素中占据主要因素，这些脱颖而出的元素将会是相对于不明显元素的节点。
相似度
同样，迫于生存机制使我们也能很快看到差异，也同样使我们很快看到相同点。这点可以知道什么是值得信任的，什么又是危险的事情。人类有天生的优势可以发现那些相似的地方。这种模式能够帮助我们理解和认识周围的环境，使得学习更加快速高效，最终变成一种直觉或本能。
当我们设计了看似很相似的两个或多个元素，就表明什么是真正的对等关系。如果一个元素很重要，那么另一种相似的元素也是重要的。如果这个元素在视觉上是可以点击的，那么另一个相似的元素也就是可以点击的，这样就可以快速识别哪些是文本链接。从视觉角度看，链接上的文本和其他的不同就是它们之间存在一种联系，告诉我们可以点击，一旦发现一个这样，那么其他的都会有类似的效果。
相似度就是显示的元素和显示的连接在多个项目中存在某种程度的相关性，它会给我们带来熟悉度和一致性的设计。
相似度补充了我们对于自然信息处理策略能力。当我们试图在视觉环境中理解和感知时，就会对自然信息进行成分类的储存其详细信息。这样就会形成我们的长久记忆的一部分。
越来越多的元素看起来是相似的就会使得用户认为它们之间更加的相似，甚至是相同的。并且也会随着更加深入的了解，根据某种方式进行分组，哪拍只有一个特性相同。另外就是相同的特性越多就越被认为是相同的。
我们会使用相似的模式构建结构，在组合元素之间进行相似性的区分和等同的结构。附加一些信息填写在结构模型中，例如图案、纹理和疏密关系。
当然并非所有相似的显示就是相等的，在下面的图片中，你会按照形状还是颜色划分？是把圆形和方形作为区分还是把一组红色与蓝色进行区分？
首先你可能会注意到颜色，元素分组是红色和蓝色。这就表明颜色之间的比形状的区别更加容易识别划分，当然这也不是绝对的。例如，有人使用红、绿色盲就在第一次划分的不大可能注意到颜色之间的区别，而是优先考虑到形状的差异。
格式塔原则：相似度
同样，每个格式塔原则也是关于我们如何感知对象之间的相似性或差异。他们中许多人可以读作提示来作为显示的相似处。
（1）闭合：不同的元素其可以类似于整体的一部分；
（2）对称性：反应元素是否处于一起；
（3）统一的连贯性：通过连接使得视觉上相似；
（4）常见的区域：类似的元素在一起；
（5）接近：通过外观感觉类似；
（6）连续：通过一种节奏保存相似；
（7）共同趋势：运动趋势一致；
（8）平行：并列定向的相似；
相似和对比之间的关系
每个网站上都可以找到对比度和相似性的应用，两者必须存在。想象一下没有对比的网站，如果它的背景是一样的颜色，那么我们将会很难阅读文本。正如很难将具有不同风格单词或短语区分开。
我会在下面的网站中，每一个例子会指出更多的差异和共性。这是希望能提供足够的例子来让你思考，然后让你灵活运用。并且在看看和学习不同的设计，以便真正提高你在平衡对比度和相似性操作中的技能。
David Simon
我们注意到David Simon网站的第一点是背景颜色之间的对比度，这使得它很容易区分不同的页面。标志也是引人注目，因为对空间使用浅色的元素与黑色的背景。
图像之间的对比是吸引眼球的根本。在这篇文章中的日期就使用了黑色的背景，日期数字使用大写，在当前的页面中就通过对比绘制出视觉与连贯性。
菜单中最近的帖子的链接样式都是一样的，帖子之间使用浅色的水平线进行分割，与其他的菜单显得很弱。字体始终保持一致性。标题和正文部分的字体采用了对比，但是却保持了网站整体的一致性。
在内部的链接样式就更加突出了，以明确之间的关系，虽然设计者可能有意使得浏览数不太明显。另外标题是额外的一部分，使它们不是正文的一部分。
Mike Kus
Mike Kus的工作侧重于不同的项目。页面中大部分是空白的，但是又要注意如何使得每个元素能够突出，与背景的文字形成对比，所以就使用墙面的纹理来显现。
这个截屏中的画面只有中间的使用不同的颜色，其他的留白处是相同的浅灰色。另外注意画的框架相同，这也表明它们的共同之处。在这种情况下，它们各自代表着一个项目。另外请注意，后面的背景都是相似性的，并通过砖的图案来区别彼此，还有画框的阴影，这样就很容易区分什么是背景了。
下面是Mike Kus的“关于”页面，是迈克孤独的形象形成唯一的对比。蓝色的按钮“取得联系”是唯一的彩色元素，你可能不会接触迈克，而不知道该怎么使用它，其实在页面之间跳转的按钮也是蓝色的。
迈克的名字被作为商标一样重复的显示在主标题上，标题和背景之间的对比也是其他网页各个部分的背景。分享菜单的按钮都使用了同一个圆形的造型。在最顶部的导航栏，都使用粗线条状作为底部使用，并在菜单之间来回切换。字体也是一致的，和正文一样都使用了serif无衬线字体，并且相互形成对比。
Electric Pulp
Electric Pulp的logo使用了中等大小的红色圆圈。它能在整个页面中形成很好的对比，值得注意的是顶部导航栏在指示当前页面时颜色的相似。
整个网站的标题是最大的，粗体和全部大写。标题与正文部分形成对比，前者使用非衬线，后者是衬线字体。
点击进入“注意事项”这一页面，会看到页面的背景色和主背景色对比于上一页和下一页的链接，使用背景颜色来区分不同的页面。
这个网站上大多数的按钮使用对比鲜明的红色，当悬停状态时是蓝色。但是在“工作”页面，第一个按钮却反转为由蓝色，悬停时变味红色。这是否是设计师故意为之就不清楚了，但是这种对比度得到了很好的保持。
Lowdi
最后一个网站要考虑的是Lowdi，下面是主页的截图，请注意同时使用对比度和一致性的颜色变化。
颜色可以清楚表明开始和结束的位置。和颜色的重复的地方造成整个页面的节奏感。请注意如何通过黄色背景来突出元素，同时向下访问者能集中看到产品的图片。
总结
对比度和相似性具有不同的功能，它们被用在不同程度的组合中。总会看到一些其他但是又并不存在的，这样更改一个也意味着改变其他。
有些东西显示是相同的，有些也是不同的，在视觉传达中的第一眼时，是观众获得主要意义的基本方式。
对比度和相似的线索设计元素之间的差异会引起我们的注意，同理相似性的元素也会在其他元素上传达相似的功能。
最终的目标是识别对比和类似层级关系：使得在一组中的元素看起来彼此相似，但不同于另一类似的元素。对比和类似的元素会使我们创建层次结构、规模和组合之间的平衡，这一主题我们会在接下来的文章中提到。
作者：Steven Bradley
https://www.smashingmagazine.com/2014/09/design-principles-connecting-and-separating-elements-through-contrast-and-similarity/
