易懂好用的UI界面，都建立在良好的视觉层次之上

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

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

视觉层次是什么？

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

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

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

排版层次

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

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

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

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

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

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

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

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

视觉层级构建的基础

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

尺寸大小

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

色彩

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

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

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

对比

创建层次结构依靠的核心就是制造对比。一个元素和另外一个元素构成对比，让用户看到不同内容和元素之间的差异。通过视觉上的差异（大小、颜色、样式）营造出对比度，但是在对比的时候还要确保整体上的均衡，尽量不要因为对比而让某些元素被用户忽略掉。

留白

用户界面当中会有许多元素和组件，想要它们被用户注意到，那么设计师需要让这些元素周围有足够的留白。留白同时也常常被称为负空间，元素和元素之间的空白区域就是留白。许多设计师常常会忽略留白，但是留白应该被视作为构造设计的重要组成部分。正是因为留白和元素本身之间的构成的疏密对比，才让用户注意到留白包围下的内容。

靠近

正如同我之前所说的，视觉层次的建立很大程度上是基于格式塔原理，所以设计师对于UI元素之间的靠近度会非常注意。人们倾向于将视觉上比较靠近的元素视为一组，而设计师也正是基于这种认知，将不同的元素分为不同的组。让相关的相似的元素更靠近一点，让不同和无关的元素隔得远一些，不同的靠近度让元素称为了不同的类别和分组。

重复

同样的，即使是在不同的地方出现，用户还会很轻松地注意到相同的元素。这就是重复的元素发挥作用的工作原理。不断重复的元素、样式、色彩、文本会被用户注意到，它们会被识别为一种固定的模式，或者说规律，这样也就构成了统一的推则。比如，设计师会在文章中引用重要的句子，这些句子会用单独的样式和色彩高亮突出，当你下一次在另一篇文章当中看到类似的色彩和文本，会迅速明白你看到的是一句引用。

视觉层次是搭建有效信息架构的基础。当用户界面的元素需要结构化和组织化的时候，视觉层次的构建能够有效地帮你达成这个目标。清晰的视觉层级是整个导航体系中不可分割的一部分，它们让用户更快了解产品的特征。

【这些文章同样来自Tubik Studio】

1. 《游戏化设计中，任务和挑战是怎么发挥作用的》
2. 《游戏化设计的精髓是结合用户历程进行UX设计》
3. 《帮你理清创意的情绪板，是设计项目前期的利器》
4. 《超详细解读：UI导航设计不仅仅指的是导航栏》
5. 《在设计流程中，通过这6种方式来运用信息架构》
6. 《看似简单的几个动效，在APP中实现过程并不简单》

本文由优设网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。

================明星栏目推荐================

优优教程网： UiiiUiii.com 是优设旗下优质中文教程网站，分享了大量PS、AE、AI、C4D等中文教程，为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。

设计导航：国内人气最高的设计网址导航，设计师必备：http://hao.uisdc.com