UI设计中的视觉层次结构

页面的可视层次结构控制信息从系统到最终用户的传递-它让用户知道将注意力集中在何处。

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

考虑颜色饱和度。鲜艳的颜色自然而然地突出，因此请将其用于重要项目;饱和度较低的颜色可用于重要性较低的项目。保留暖亮颜色（如红色），以备警告或错误使用。

不要使用太多的颜色。虽然一些复杂的配色方案看起来很漂亮，但它们在网页上可能会让人感到不知所措。当使用太多具有相似值或饱和度的颜色时，人们对元素之间层次结构的感知通常会降低。在常见的简单设计中，请将颜色使用限制为2种主色和2种辅助色。

不要使用太多的对比度变化。对于复杂设计，使用不超过3种对比度变体。如果一切都是对比鲜明的，那么没有什么是突出的。有效的设计通常对标题、副标题和正文文本使用不同的处理方式。

不要仅仅依靠颜色来传达视觉层次。色盲患者可能无法察觉到某些颜色组合之间的差异。

缩放原则是在设计中创建视觉层次结构的关键。较大的元素更突出并吸引用户的注意力，因此大小可以用作重要性的标记。

使用体重秤时的最佳做法：

使用不超过3种尺寸-小号、中号和大号。三种大小提供了足够的多样性来使用-想想标题，副标题和正文副本的类型大小-但仍然要保持明确定义和清晰的层次结构关系。在网页设计上，正文副本的大小范围可以从14px到16px，副标题的大小可以从18px到22px不等，标题的大小可以从32px到32px不等。

使最重要的元素最大。强调设计中最重要的方面，使其成为最大的方面。同样，使不太重要的元素变小。将元素的数量限制为最多2个，以便它们脱颖而出并加强层次结构。

分组的最佳做法：

请考虑使用容器。如果仅更改空格不足以作为创建层次结构的视觉提示，请添加额外的元素，如边框或背景。这些附加元素可能会造成视觉混乱，因此请谨慎使用它们。

在开始设计之前，请从视觉对象退后一步，定义内容的层次结构以及您希望用户带走的关键点。建立该层次结构后，请专注于应用颜色和对比度、比例或分组的变化。在设计时考虑了视觉层次结构之后，退后一步，通过与目标用户进行测试来查看设计是否按预期运行。

当页面的视觉层次结构准确反映不同设计元素的重要性时，用户很容易理解它，并可以成功完成任务，从而获得对设计和品牌的信任。

5PLUS职业设计学院于2015年创于北京，三位联合创始人设计行业经历总计超过40年。坚守以“倾囊式教学”为中心的教学理念，知无不言言无不尽。希望借助自身行业背景及经验，打造国内最优秀的职业设计师培训学院，为设计师提供职业化进阶指导，提高设计师行业价值，为中国设计行业尽一份微薄之力。