3种方法创建视觉层次结构（一）

1、颜色和对比度

好的视觉设计使用颜色或对比度（或两者）在页面上创建视觉层次。在设计中应用颜色会使某些元素看起来更靠前，而另一

些元素则退后，从而确定了吸引我们注意力的内容以及我们赋予各种设计元素的重要性。

不是创建层次结构的元素的实际颜色，而是元素和它所出现的上下文（包括背景和其他附近元素）之间的值和饱和度的对

比。

设计师通常还使用类型对比来指示层次结构，并通过特殊的字体处理来表示重要性。粗体字体会比细体或常规字体更引人注

目。与周围文本样式不同的单词（例如，斜体或下划线）也会引起注意。

MoMA.org使用颜色来传达层次结构-右上角的绿色链接与徽标下方的黑色链接形成鲜明对比。

TheNounProject.com：眼睛首先被吸引到搜索领域，不仅是因为它的尺寸很大，还因为它的白色与黑色背

景形成对比。该字段提示用户开始搜索。然后，将视线对准搜索字段下方的白色图标，以预见可能的结果。

使用颜色和对比度的最佳做法：

• 考虑高饱和度的色彩。鲜艳的色彩自然会脱颖而出，因此可用于重要物品。低饱和的颜色可用于重要性较低的项目。保留

温暖的明亮颜色（例如红色）以警告或错误。

• 不要使用太多颜色。尽管有些复杂的配色方案看起来很漂亮，但它们可能会让你感到不知所措。当使用太多具有相似值或

饱和度的颜色时，人们对元素之间层次结构的感知通常会降低。在一般设计中，将颜色使用限制为2种主要色和2种辅助色即

可。

• 不要使用太多的对比变化。对于复杂的设计，请使用不超过3个对比度变化。如果一切都有对比，那么什么都不会脱颖而

出。有效的设计通常对标题，子标题和正文使用不同的处理方式。

• 不要仅仅依靠颜色来传达视觉层次。色盲人士可能无法感知某些颜色组合之间的差异。