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