ui设计层次是什么？怎么正确使用？【萧蕊冰】

哈喽大家好~今天萧蕊冰分享的是有关UI设计层次的内容，主要是偏向于视觉层次的介绍。为了清晰的向用户展现UI中的内容，我们就用了一个方法来展现，这就是UI设计层次，你的设计有层次，才能让用户清晰你的界面内容，提高用户体验感。要想了解更多接着往下看吧。

视觉层次是设计过程的核心方法之一。它最初是建立在格式塔原理的基础上，考察了用户对相互关联元素的视觉感知，并展示了人们如何将视觉元素归为一类。

视觉层次致力于以一种用户能够理解的方式呈现产品内容。用它来组织UI内容，可以使大脑根据物理差异（如大小、颜色、对比度、风格等）来区分对象。

UI元素的视觉呈现对产品的用户体验有很大影响。如果内容看起来一团糟，用户就无法在产品中快速找到信息或正确的与产品进行交互。此外，非结构化文字内容的易读性较低，用户将无法快速预览，他们需要费力的去区分他们要找的内容。这种糟糕的用户体验会导致用户满意度降低，这也就意味着一款产品不会很受欢迎。

文字的层级

文字是任何UI设计中都很重要的组成部分，这就是为什么视觉层次高度依赖于文字。专家们决定通过创建一个单独的文字级别来强调文字的重要性。

该系统旨在以最合适用户感知的方式组织文本内容。设计师通过对比关系来修改和组合文字，让重要的需要用户首先注意到的文字优先突出。经常用到的方式是调整大小、颜色、字体和对齐方式。

文字层次主要包括：标题、副标题、正文、号召性文字以及辅助文字等。为了构建一个可视化的文字层次，需要将所有元素分成不同的等级，让我们看下具体包括哪些内容。

一级文字：主标题，主标题的目的是为用户提供核心信息，同时吸引用户对产品的注意力。

二级文字：二级文字方便用户快速浏览。通常包括：副标题、说明文字

三级文字：正文和其他的数据文字，设计师通常使用较小的字号，但需要保持足够的可阅读性。

由于文字内容是UI中的主要信息来源，所以设计师需要逐级呈现信息。通过将文字分成不同的等级，来使用户能够快速接收信息并正确感知信息的重要程度。

还有一点需要注意的是，在为移动端产品创建文字级别的时候，最好是两个以内。因为手机屏幕没有容纳三个级别的空间。为了使界面看起来更清晰，一般没有副标题。

视觉层次工具

当设计师已经选择好要呈现的内容时，就可以来制定文字等级了。让我们看看从哪些方面可以帮助设计师建立视觉层次。

大小

信息区分最有效的工具之一就是大小。大的事物总是比小的事物更加重要，这种想法植根于用户心中。这也是为什么用户的注意力往往会转移到大的文字或图片上。

设计师需要区分每个内容元素的重要性，并基于此将信息用大小来区分。

颜色

颜色是构建视觉层次的有效工具。颜色本身就具有层次结构，从用户的心理来定义，有大胆的颜色，像红色、橙色和黑色，很容易引起注意。也有比较弱的颜色像白色和奶油色，这类的颜色适合用作背景。使用不同的颜色，可以使UI元素有轻微层次感。如：其他UI元素都用的是浅色，CTA（号召用户行为）按钮则可以用比较重的颜色，可以让用户第一眼就注意到。

对比

层次基于内容本身的对比。一个元素和另一个元素形成对比则用户可以看到两者之间的差异性。可以通过视觉差（包括大小、颜色、样式）来创建对比。但是也需要保持页面的平衡，以免一个对象完全掩盖了另一个对象

负空间

在用户界面中有很多内容，为了让用户注意到所有内容，就需要给他们的眼睛一定的休息空间。负空间和空白区域是指元素与元素之间的间距。一些设计师通常不会将空白区域作为他们设计的一部分，但专家们会把空白区域作为一个帮助设计布局的有用工具。适当的负空间，可以帮助用户注意和感知每一个元素。

接近

正如我们上面所说的，视觉层次是建立在格式塔原理的基础之上的，所以设计师非常关注UI元素的接近程度。用户习惯把视觉元素统一到一个组里，所以UI元素需要以组的方式呈现，以便用户对其进行分类。如果某几个元素距离较近的放置，则用户会自动将他们视为一个组。设计师可以利用这个接近原则，帮助内容区分级别。

重复

如果用户注意到某些元素看起来很相似，他们也会将它们视为一个组。这就是重复原理。设计师故意为不同的对象用重复一些模式，以便用户将它们视为一个统一体。举个例子：一个有大量正文的页面用一种颜色突出显示最重要的句子，看到这种颜色的句子用户就知道这是一个重要句子，用户也可以直接从一个重要句子直接跳到另一个重要句子。

视觉层次是有效信息结构化的基础。当UI元素结构化和组织化时，用户更好的使用产品，可以更加高效的为他们解决问题。

此外，强大的视觉层次改进了导航系统，用户可以更好的定位产品。 

说到这里，今天的分享就结束了，UI设计层次也是在UI设计中比较重要的部分，我们要在设计中注重一个层次感，才能让用户体验感提升。我们学习了有关UI设计层次的问题就要在实际中运用，提升设计的层次，设计出更好的界面。更多UI设计相关教程经验分享可以持续关注一下。