人们总希望能够通过规则让事情变得更容易理解。对于平面设计是如此，对于数字化的UI界面也同样是如此。经过仔细地组织和整理之后的UI界面，无论是APP还是网站，都能够被用户更好地了解，使用和吸收，这也真正让用户满意的产品的必由之路。

　　为了更好地组织UI中的内容，设计师需要具备让视觉内容层次化的设计技能。今天的文章，我们就全面地探讨一下如何真正有效地组织视觉内容。

　　视觉层次是什么?

　　构建视觉层次是设计师在设计过程中最核心的设计技术之一。最初心理学家基于格式塔原理来检测用户对于元素之间关系的视觉感知，发现人们倾向于将视觉关系靠近的元素群视作为有关系的一组。

　　通过将内容按照一定的视觉层次进行构建，从而让用户在看到APP和网站内容的时候，能够轻松理解各个元素之间的关系，明白他们的重要程度差异。通过控制不同视觉元素本身的视觉差异(大小、色彩、对比度、风格等)，让它们可以区分彼此。

　　UI元素的视觉呈现方式对于用户体验有着极大的影响。如果UI中的元素组织性很差，看起来会是一团糟，最终用户也无法有效地获得导航指引，也难以正确地交互了。此外，非结构化的内容，可读性也较低，用户无法一目了然地获取信息，需要花费大量的气力区分内容，从中找到自己想要的信息，这样很容易招致用户不满，甚至导致产品失败。

　　排版层次

　　文本内容是绝大多数UI设计中需要处理的主要组成部分。这也是为什么视觉层次的构建很大程度上依赖排版。所以，视觉设计专家会将排版层次从视觉层次中单独提取出来作为一个独立分支来进行探讨。

　　设计师通过排版系统将文本内容以最适宜用户感知的方式组织起来。通过合理的选择字体的样式和排版布局，设计师让最重要、最迫切需要被用户关注到的内容突出显示。字体的大小、色彩和字体家族都在样式调整的范围内。

　　排版层次中，包含着不同的排版元素，包括标题、副标题、正文内容、CTA元素、说明以及其他内容。为了建立层次感，这些内容和元素会被分割成为不同层级。通常，为了保证层次分明又不会让信息的呈现过于复杂，会将层次划分为3个层级。

　　第一层级。诸如头条标题，这些元素旨在为用户提供核心的信息，并且引起访客能够立刻注意到它们。

　　第二层级。诸如普通标题和副标题，它们应该能够让用户快速扫视阅读，尽快了解到其中的主要内容。

　　第三层级。正文和一些额外的信息(比如引用)构成了第三个层级。在这个部分设计师通常需要使用较小的字体，并且确保内容的可读性。

　　由于正文内容通常是UI中内容信息的主要载体，而大量的信息和内容需要逐步的呈现，所以设计师和编辑会将内容切割为不同的段落，让用户可以轻松的一段一段地、按照顺序来感知并吸收信息。

　　还有一件值得一提的事情，在为移动端设备进行排版设计的时候，设计师要尽量将其中的层级控制在两个层级以内。移动端设备的屏幕尺寸有限，无力承载3个层级的信息，所以，诸如副标题这样的第二层级的内容需要去掉，以防层级太多。

　　视觉层级构建的基础

　　当设计师已经确定了基本的内容和组件之后，就需要为它们制定呈现的层级和顺序了。帮助设计师为这些UI组件和元素制定顺序和层级的，主要是下面的属性：

　　尺寸大小

　　区分层次最有效的手段是通过尺寸大小差异化。大的比小的更重要，这种认知是根深蒂固的。用户会自然而然地关注到尺寸较大的文本和尺寸较大的图。设计师可以根据元素的重要性，在尺寸上做文章。

　　色彩

　　色彩对于用户的感知有着巨大的影响。所以在进行视觉层次构建的时候，色彩的合理运用会产生更为明显的效果。

　　不同的色彩本身就可以轻松构成层次结构的，强烈的色彩诸如红色、橙色、黑色都很容易引人注意。诸如白色和浅灰通常可以用来作为大面积的背景色，和其他的色彩构成对比。

　　不同的色彩加持在UI元素上能够构成微妙的层次结构。设计师在设计CTA按钮的时候，通常会选用和背景颜色差异明显的、大胆而扎眼的色彩。

　　对比