一般来说，“对比”这个词用来描述彼此显著不同的物体。说到视觉知觉，对比基本上与颜色或光线的差异有关，这种差异使物体能够被清楚地分辨出来。

为什么对比很重要?因为人类的眼睛自然地倾向于捕捉对比。图像的最高对比度被称为对比度比或动态范围。更重要的是，对于视力较差的人，如色盲，对比度成为他们看到的物体的核心特征，使他们能够区分它们。

在学术艺术中，对比处理相反的元素和效果的安排，如明暗的颜色，大小的形状，粗糙或光滑的纹理。在这种情况下，对比不仅可以用来吸引注意力，还可以设置情绪和气氛，创造多样性，视觉兴趣和艺术作品的戏剧性。

在设计中，对比是影响网页或移动屏幕的可扫描性和视觉层次的关键因素之一。它使设计者能够以一种告知用户哪些交互点是重要的，哪些是次要的方式来呈现布局。对比可以有效地吸引用户的注意力，并将其吸引到特定的元素上，因此它在支持数字产品的直观导航和可用性方面起着很大的作用。

Pass-On 应用程序登录页面的设计展示了有效的颜色和尺寸对比示例，为页面构建了坚实的视觉层次结构。

Eco-bottles 品牌网站使用背景颜色对比来分隔网页的不同逻辑部分。

对比可以基于 UI 元素的不同特性，包括：

• 颜色：这种类型是人眼最自然和最明显的颜色之一；它适用于颜色明显不同的情况，例如，通过互补、分裂互补或三元方案组合（在我们的色彩理论评论）。这种类型的对比最广泛地用于制作CTA 按钮 和其他关键 导航元素 在网页布局或应用程序屏幕中立即看到，支持清晰直观的导航。

• 大小：这种类型的对比是基于使首先引起注意的元素明显大于其他元素

• 形状：在这里，通过使一个元素的形状与其他元素不同来吸引用户的眼球

• 位置：在这种类型中，设计师以这种方式更改行中一个元素的位置，使其看起来不同，例如，文本片段的新段落以缩进开头。

• 纹理：这里的差异是由于使用彼此明显区分的纹理而建立的

• 方向：在这里，你改变元素的物理位置，使其使用其他或意想不到的方向，这样以不寻常的方式吸引用户的注意力。

在他的文章《对比与意义》中，Andy Rutledge将对比设计师经常使用的类型用一个简单但有信息的方案来描述，如下图所示，将每种类型可视化。

关于对比，我们首先想到的是黑白的东西。在没有阴影和多种颜色的情况下，单色图像使用对比作为表达潜力的主要助推器。在用户界面中也是如此。更重要的是，与艺术或摄影作品相比，对比不仅影响审美，而且对布局的可用性和导航性也有重大影响。因此，精心设计的对比用法是使网站和应用程序更加友好和易于使用的强大方法。

在Exotic Fruit 应用程序的结帐屏幕上，颜色对比有助于立即定义号召性用语按钮，并有助于区分活动时段和非活动时段。

当然，这并不意味着只有黑白UI才是最有效的。当全球用户呈现出如此多样化的愿望和需求时，限制这么多是不明智的。然而，“黑白”测试是非常有用的。设计师应该记住，彩色界面在不同的屏幕和分辨率上看起来是不同的。此外，低对比度会使色盲用户难以使用该界面。

另一种特定类型的对比是排版对比，它基于设计作品文本部分所用字体的区别特征的差异。

加拿大字体设计师Carl Dair定义了 7 种核心类型的排版对比：

1. 尺寸对比：它是关于由表格创建的基本图案的物理放大和用于文本的类型的重量。这里最常见的情况是使标题或标题明显大于文本。

2. 重量对比：粗体在同款较轻的中间突出。它有助于将注意力吸引到文本的特定部分，并让用户了解它们的重要性。

3. 形式对比：这里的形式是指大写字母和小写字母之间的区别，或者罗马字母和它的斜体变体，压缩和扩展版本，与标准类型协调的脚本类型——所有提到的都可以用于戏剧性的形式的改变。然而，Carl Dair 警告不要同时使用脚本和斜体，因为它们都是手写字母的版本。他们更可能发生冲突而不是对比。

4. 结构对比：结构意味着不同类型字体的不同字母形式，例如单线无衬线与高对比度现代，或斜体与黑体。

5. 纹理对比：这是关于字体的线条如何作为一个整体看起来的，这部分取决于字体本身，部分取决于它们的排列方式。

6. 颜色对比：在这里，Dair 提到第二种颜色通常不如基本的白底黑字（或黑底白字）强调，因此必须仔细考虑需要强调的元素并注意色调值使用的颜色。

7. 方向对比：这种类型是关于垂直和水平之间的对立以及它们之间的角度。同样，Dair 指出文本块也有它们的垂直或水平方面，将宽的长线块与高的短线列混合可以产生对比。

另外，还有一些不太流行的对比，比如所谓的孤立对比，就是把一个词或词组放在远离其他元素的地方，这样就从人群中脱颖而出，以及对比按节奏（空间间隔）——破碎的部分形成对比并吸引注意力。

艺术学院博客概念展示了不同类型的排版对比，作为设计方法的一个令人印象深刻的特征。

阅读上面提到的所有内容，很容易假设这里的经验法则是对比度越高，设计越好。然而，事实并非如此：以及任何其他设计方面太多并不意味着更好。虽然低对比度会使内容难以感知和阅读，但过高的对比度会引起眼睛疲劳，使交互更加困难。所以，又到了寻找黄金媒介的时候了。

文字的视觉呈现和文字的图像应该坚持至少 7:1的对比度，以下情况除外：

大文本：大文本和大文本图像的对比度至少为 4.5:1；

附带条件：作为非活动用户界面组件的一部分的文本或文本图像，纯装饰，对任何人都不可见，或者是包含重要其他视觉内容的图片的一部分，没有对比度要求。

标识类型:作为标识或品牌名称的一部分的文本没有最低对比度要求。

芭蕾舞团网站概念使用颜色对比来区分页面的基于文本的部分和基于图像的部分，并使用明亮的口音，例如，使网站标题中的 CTA 按钮立即被注意到。此外，基于大小和字体差异的排版对比使各种文本元素清晰区分并易于浏览。

在色彩和对比度方面，设计师通常首先要回答的一个问题是，一般应该选择什么样的配色方案:是光对暗，还是暗对光?这一观点应考虑到几个重要方面。

清晰度：这方面应该包括用户能够清楚地看到和区分屏幕或页面上的所有必要细节的能力。配色方案和组合应支持简单直观的导航，并使布局中最具功能性的元素有效地脱颖而出。如果这方面没有考虑或没有正确测试，它可能会导致产品在屏幕上一团糟，用户看不到他们真正应该看到的东西。检查它的方法之一是当您在模糊模式下查看屏幕或页面并检查是否可以轻松快速地观察到所有重要内容时，广泛使用的“模糊效果”。

可读性：用户轻松阅读文本的能力。如果应用程序或网站是文本驱动的，这方面尤其重要：差可读性级别会导致用户丢失关键数据或在使用产品时感到莫名的紧张，因为他们一直在与副本斗争，这需要相当大的努力才能阅读。缺乏可读性可能是即使有有吸引力的产品也无法留住用户的一个重要原因。

可访问性：产品覆盖尽可能多的人的能力。这意味着“使用或不使用”的决定应该主要基于用户的需求和愿望，而不是他们的身体能力。配色方案问题是影响这方面的主要因素之一。设计师应该考虑不同年龄、特殊需求、残疾的用户，这也可以决定背景和布局元素的颜色选择。

响应性：产品根据使用的设备灵活变换布局的能力。这会对可用性产生至关重要的影响。在高分辨率专业显示器上看起来时尚、有吸引力和清晰的东西，在低分辨率的小屏幕上可能会变成脏污。配色方案和对比度水平肯定会首先影响这个问题。

环境：为用户经常和频繁使用的潜在环境选择合适的配色方案和背景类型。就在自然光下持续使用而言，深色背景确实会产生反射效果，尤其是在平板电脑和智能手机的典型光泽屏幕上。相反，在光线不足的环境中经常使用时，深色背景会使光线远离屏幕，从而对导航和可读性产生负面影响。因此，颜色组合、对比度和阴影的问题在这里引起了极大的关注。

不同类型的对比使 Habit Builder 应用程序界面不仅美观而且易于使用。

在应用于网页或应用程序屏幕设计的对比度方面，还有一些需要考虑的事情。

如果文本覆盖在图像上，请注意高对比度

背景 图片由于图片覆盖多种功能的强大能力，在网页和移动设计中呈现出稳定的趋势。这种方法使屏幕在视觉上和情感上都具有吸引力以及信息量，因为图像以这种方式立即吸引用户的注意力要快得多。此外，它还支持所有布局元素的完整性。然而，找到正确的对比并整合导航和导航需要很多技巧和努力。文字内容正确地使页面不会变成难以辨认的混乱，这通常在对比度太低时发生。介意推荐的对比度至少为 4.5:1（或 3:1 表示大字符，定义为 18 磅字体或 14 磅粗体）。试试对比度工具 检查不同的颜色组合如何工作。

地理博客应用全屏背景照片

对比度太高会让人感到疲惫又和焦虑

另一方面，重要的是要记住，过度对比也没有好处，甚至可能对用户体验设计的某些方面有害。有效地将注意力暂时吸引到按钮或方向提示的口音可能会在旨在长时间阅读的页面上引起真正的问题，并且必须关心保持读者的眼睛不会过度疲劳。有时，应用程序用户或网站访问者甚至无法清楚地定义出了什么问题，但过于鲜明的对比会让他们感到紧张和疲倦，并阻止他们使用数字产品。

对比度太强意味着没有对比度

在他的书中 为情感而设计，Aarron Walter在用户界面对比度方面分享了一个非常宝贵的想法：“随着页面上高对比度元素的数量增加，执行任务、学习系统和记住路径所需的时间也会成比例地增加。添加东西会将人脑推向极限。你有没有参加过一个派对，每个人都大喊大叫要和旁边的人说话？随着音量的增加，每个人都必须大声说话才能被听到，但这使得谈话变得更加困难。设计以同样的方式工作。如果一切都在引起观众的注意，那就什么也听不见。” 因此，如果您在这方面使页面或屏幕变得复杂并填充各种相互对比的元素，则风险很高，交互流程将变得更加困难，变得更烦人且更不可用。

注意负空间

负空间（又名空白）是留空的布局区域，不仅在对象周围，还包括对象之间和内部。负空间是页面或屏幕上所有对象的一种呼吸空间，因此它极大地影响了 UI 中应用的不同类型对比度的有效性。

总结上面提到和显示的所有内容，让我们定义对比度的几个关键优势，作为良好用户友好设计的强大功能：

• 更强的视觉层次

• 更好的专注

• 创意氛围

• 增强可读性

• 对应于自然的人类感知和反应

生活充满了对比，无论你会采取什么方面。对于所有的生命，我们必须学会如何接受这一点，并尝试享受如此多样化和不可预测的生活。与现实相呼应，设计也充满对比，并尽可能多地借鉴。

作者：by Marina Yalanska