佛山做网站：通过对比和相似性连接和分离元素

相似性和对比度，连接和分离，分组和未分组都是描述元素之间变化的相同性和差异的方法。根据它们携带的信息，我们希望某些元素看起来相似，以表明它们在某种程度上是相关的。我们还想表明一些元素是不同的，属于不同的组。

显示两者的关键是元素的视觉特征及其关系。如果两个元素以某种方式相关，那么它们应该显示相似的视觉特征。如果元素不同，那么它们应该看起来不同。佛山做网站

原始特征

如何显示元素之间的对比度和相似度？答案在于元素的原始特征。

原始特征是元素可能具有的固有特征或属性。例如，元素是什么颜色的？它有多大？它是什么形状？

这些元素具有不同的原始特征 - 在这种情况下，具有形状，颜色和纹理。这些东西中的每一个都传达了关于元素的信息 如果一个标题比另一个大，那么我们假设更大的标题更重要。我们可能会看到一个具有锯齿状和尖锐形状的元素是危险的。有时，元素的属性需要与另一个元素的相同属性进行比较才能具有意义。前一段的标题就是一个很好的例子。标题应该只大于另一个标题或另一个文本。比较对于更大的意义来说是必要的。通过这些比较，我们可以传达相似性和对比度。通过为多个元素提供视觉上相似的特征，我们传达了关于元素的类似内容。如果网页上的两个元素都是红色圆圈，则查看者自然会问为什么。为什么都是红色的？为什么两个圈子？可能的结论是，元素在某种程度上与它们的外观有关。元素的相似性意味着它们带有类似的信息。同样，通过将视觉上不同的特征应用于多个元素，我们传达了关于元素和它们携带的消息的不同之处。可以改变的任何[元素的特征]

可以用于使元素看起来相同或不同。然而，一些特征通常用于显示相似性和对比度。没有特别的顺序，这些是：*大小，*形状，*颜色，*值，*纹理，*位置，*方向。形状为矩形和圆形对比。两个红色项目的颜色相似。红色矩形和红色圆圈形状对比，颜色相似。如何通过视觉特性来平衡元素的相似性和对比度将决定这些元素与观众的沟通方式。**注意：**虽然原始特征是可视化显示对比度和相似性的主要方式，但我们还有其他方式来显示两者 - 例如，元素所携带的实际内容。单词“停止”和“去”对比。“停止”和“停止”这两个词是相似的。图像与文本形成对比; 长段与短段形成鲜明对比; 等等。**虽然原始特征是视觉上显示对比度和相似性的主要方式，但我们还有其他方法来显示两者 - 例如，元素所携带的实际内容。单词“停止”和“去”对比。“停止”和“停止”这两个词是相似的。图像与文本形成对比; 长段与短段形成鲜明对比; 等等。**虽然原始特征是视觉上显示对比度和相似性的主要方式，但我们还有其他方法来显示两者 - 例如，元素所携带的实际内容。单词“停止”和“去”对比。“停止”和“停止”这两个词是相似的。图像与文本形成对比; 长段与短段形成鲜明对比; 等等。

对比

人类有信息注意到差异。这是一种快速区分朋友和想吃我们的东西的生存机制。能够快速确定对于晚上安全返回洞穴至关重要。

我们快速发现差异的能力使对比度如此强大。对比度引起了人们的注意。它引人注目。它被注意到了。通过提供与直接围绕它的元素在视觉上不同的元素特征，我们可以创建兴趣点和重点。事实上，因为元素与周围环境的对比非常有利于引起对元素的注意，所以它可能是为设计增加兴趣和兴奋的最有效方式。

对比不仅仅是吸引注意力。它也建立了元素之间的界限。例如，对比主要内容的背景颜色和侧边栏的背景颜色是显示一个结束而另一个结束的开始的一种方式。

突出的差异可以强调重点，突出重要的元素和信息。差异越大，对比度越大。对比度越大，元素就越重要。

例如，两种设置文本的方法是粗体和斜体。大胆通常表现出更多的对比度，因此更加突出。一眼或远距离观察粗体文本比发现斜体文本更容易。

如果两个元素的意思不同，那么就要大胆对比。你不希望观众想知道差异是否是故意的。确保对比度明显且明确有意。不要误会。不要将16像素的文本与15像素的文本进行对比。人们不会立即注意到这种差异，一旦他们这样做，这似乎比有意识的决定更像是一个错误。

小心不要过度。谨慎使用对比。如果一切形成对比并试图引起人们的注意，那么没有什么能够脱颖而出。你最终会得到引起混乱的视觉噪音。

太多的对比会破坏设计中的和谐与统一，导致混乱和混乱。这可能是你在某个设计中所追求的，但往往不是。决定哪些元素需要突出，并使它们与其他所有元素看起来非常不同。

对比和格式塔

虽然每个格式塔原则都是以某种方式显示相似性和对比度，但我想指出其中两个。对比度对于确定地形关系并显示优势和焦点至关重要。

• 图 - 地面
  查看构图时我们要做的第一件事就是确定图形是什么以及背景是什么。此关系有助于为合成中的其他所有内容设置上下文。图形和地面需要相互对比，否则观察者将难以确定哪个是哪个。

• 焦点
  这些是吸引力和兴趣的元素。它们的设计与周围环境不同。对比是帮助他们脱颖而出并吸引注意力的因素。在构图中最突出的元素是主导元素。在构图中脱颖而出但在较小程度上突出的元素是焦点。

工作中的对比度和相似度：绿色圆圈和橙色条纹与其他绿色圆圈和橙色条纹相似，但它们相互对比。

相似

同样的生存机制使我们能够快速看到差异，这也有助于我们了解事情何时相同。它指出了我们可以信任的人或者什么，以及可能存在的危险。能够识别相似性是人类在寻找模式方面表现出色的原因。模式帮助我们理解我们周围的世界，提供背景并使学习更快，达到变得直觉或本能的程度。

当我们设计两个或多个看起来相似的元素时，我们表明关于另一个元素的真实情况是正确的。如果其中一个元素很重要，那么另一个元素也很重要。如果一个元素是可点击的，那么视觉上相似的其他元素也可能是可点击的。这就是我们如何快速识别文本块中的链接。视觉对比显示链接与文本的其余部分不同，而链接之间的视觉相似性告诉我们，一旦我们发现了所做的事情，所有链接都是可点击的。

相似性是关于显示连接并显示多个项目以某种方式相关。它为设计带来了熟悉性和一致性。

相似性补充了我们处理信息的自然策略。当我们接受我们的视觉环境并尝试理解它时，我们自然地将对象分组为块，以便在我们的工作记忆中保存更多信息。在它成为我们长期记忆的一部分之前，我们进一步分组，组织和构建一切。

设计类似的视觉相似信息有助于用户处理和理解信息，这是设计的两个关键目标。

元素的原始特征看起来越相似，它们看起来越相似，观众就越认为它们是相同的。即使只共享一个特征，它们也会以某种方式出现分组和相关 ; 它们在视觉上看起来越相同，它们被认为是相同的越多。

我们使用相似性来构建结构和模式。组合物中两个元素之间的任何相似性意味着结构。额外的相似性填补了结构并导致图案，纹理和节奏。

并非所有显示相似性的信号都是相同的。在下图中，您会按形状或颜色对对象进行分组吗？你看到一组圆圈和一个正方形，或者你看到一个红色组和一个蓝色组？

您可能首先注意到颜色，将元素分组为红色和蓝色。这表明颜色是一种比形状更强的相似性传播者。然而，这不是绝对的。例如，具有红绿色盲的人在注意到这些对象的形状之前不会注意到红色和绿色对象之间的差异。

相似性和格式塔

同样，每个格式塔原则都是关于我们如何感知对象之间的相似性或差异。其中许多可以作为显示相似性的提示阅读。

• 关闭
  可能属于类似整体的不同元素

• 对称和顺序
  镜像元素似乎属于一起

• 
  通过视觉连接元素实现统一的连通性相似

• 共同地区
  类似的物品封在一起

• 
  通过空间封闭的邻近相似性

• 
  通过空间节奏延续相似性

• 
  通过运动的共同命运相似性

• 
  通过方向的并行性相似性

相似性与对比度的关系

对比度和相似度显示了元素之间的关系。没有什么是孤立的意义。元素需要与其他元素一起显示在上下文中。

一个大元素转向设计中较小元素意味着什么？与浅灰色的其他文本相比，一个文本块缩进的含义是什么？

一个大圆圈转过一个小圆圈

对比度和相似度实际上只是规模的两端。在比例尺的一端，物体看起来完全不同; 另一方面，它们看起来完全一样。

大多数时候，我们处于极端之间，我们设计的东西将分享一些但并非所有特征。相似性和对比度是沿着比例物体相对于彼此的位置的表达。

即使我没有明确说明，我所说的关于相似性或对比度的一切都适用于另一个。没有另一个是不可能的。对比度缺乏相似性，相似性缺乏对比度。这完全取决于它在规模上的位置。

一起思考它们会使它们更具影响力。您可以使用单个要素（如颜色）来显示多个元素相关，然后使用不同的颜色来显示其他几个元素相关但与第一个组不同。只有两种颜色，我们可以创建两组不同的连接元素。

以这种方式进行颜色编码是对信息进行分类的有效方式，以便观看者可以一目了然地发现和理解。

当一切都相同时，你会感到乏味。当一切都不同时，你会发出噪音。最好的设计具有相似性和对比度的健康组合，并清楚地了解他们正在尝试沟通的内容。

对比和相似的例子

每个网站都可以找到对比度和相似度。两者都需要存在。想象一个没有对比的网站。如果它和背景颜色相同，我们都很难阅读文字。同样困难的是每个单词或短语都有不同的风格。

我将在下面的网站上指出一些对比和相似之处。每个都比我提到的更多。我想提供足够的例子让你思考，然后让你接管。查看并研究不同的设计，并努力提高您平衡对比度和相似性的技能。

大卫西蒙

您将在David Simon的网站上注意到的第一件事就是背景颜色之间的对比，这使得可以轻松区分页面的一部分与另一部分。徽标在明亮的空间背景下是一个黑暗的物体。

图像与所有东西形成对比以吸引眼球。帖子日期的背景，用于评论的元数据的完整大写，以及当前页面的菜单项的背景颜色也是绘制眼睛和传达有意义的事物的对比的示例。

菜单中的链接都具有相同的风格，以及最近帖子的链接。两者都用水平线分开。每个菜单与另一个菜单形成鲜明对比，以表示差异 字体始终一致。标题和正文文字在字体上形成对比，但它们的差异在整个网站上是一致的。

虽然设计师可能故意让它们不那么明显，以便不中断阅读流程，但身体中的链接可以更突出地表明它们是链接。标题也可以更好地脱颖而出，尽管很明显它们不是主要文本的一部分。

迈克库斯

的主页迈克·库什网站的重点是Mike的工作在不同的项目。大多数页面都是空的，但请注意这是如何使每个元素脱颖而出。文本与背景形成对比，背景墙纹理的绘画也是如此。

注意：自从我写这篇文章以来，Mike已经改变了主页。您在下面的屏幕截图中看到的是以前的版本。

 这些画作还包含页面上唯一的颜色。所有其他信息都是相同的深灰色。此外，请注意绘画是如何构图的，表明它们有共同之处。在这种情况下，它们代表项目。还要注意，背景通过其砖块图案显示出相似性。很清楚什么是数字，什么是地面。在迈克的“关于”页面下面，迈克的唯一形象与其他所有内容形成鲜明对比。“Get in touch”的蓝色按钮是唯一带有颜色的元素。你可能不会联系迈克，但这不会是因为你不知道如何。整个网站的按钮都是蓝色的。Mike的名称作为徽标重复作为页面上的主标题。标题与背景形成鲜明对比，下面页面各部分的背景也是如此。菜单中的链接共享相同的大写样式。顶部的社交图标沿底部重复。字体也一致地使用，标题为无衬线字体和正文文本的衬线，相互对比。

电浆

Electric Pulp网站上的标识是一个中等大小的红色圆圈。它与其他一切立即可见的形成鲜明对比。注意主导航中如何重复颜色以指示当前页面。

整个网站的标题都很大，很大胆并且全部上限。标题和正文在整个网站上也是一致的，前者采用无衬线，后者采用衬线。

单击“注释”部分，您将看到具有与主背景形成对比的背景颜色的上一个和下一个链接。背景颜色也用于区分页面的不同部分。

网站上的大多数按钮都是对比的红色（一种常用于引导元素的颜色），并在悬停时变为蓝色。但是，在“工作”页面上，第一个按钮会反转它（它是蓝色，并在悬停时变为红色）。无论是故意的还是偶然的都很难说清楚。然而，维持对比原则。

LOWDI

最后一个需要考虑的网站是Lowdi's。下面的屏幕截图是主页。注意颜色如何用于对比度和一致性。

颜色清楚地描绘了部分的开始和结束。重复的颜色在整个页面中创造出一种节奏。请注意价格的黄色背景如何突出，同时还将访客的注意力吸引到产品的图片上。

摘要

对比度和相似度具有不同的功能。它们以不同程度和组合使用。你总会看到其中的一些，因为没有另一个都不存在。改变一个也意味着改变另一个。

显示某些东西是相同的，有些是不同的是视觉传达的第一步。这是观众获得意义的主要方式。

对比度和相似度是设计元素的线索。差异引起我们的注意，相似性将我们对一个元素的了解传递给另一个元素。

最终，目标是对比相似的层：使一组中的元素看起来彼此相似，但不同于另一组中的元素。我们构建对比和类似元素的方式创建了层次结构，流程和组合平衡，我们将在本系列的后面部分介绍这些主题。

佛山做网站