亨利.亚当斯（Henry Adams，美国历史学家、学术家和小说家）曾经说过：“混沌是自然法则，秩序是人类的梦想”。人们总是喜欢秩序，因为秩序可以让事情变得更容易理解。这同样适用于数字产品的用户界面，当UI元素被有序组合和结构化时，人们可以轻松的使用应用程序和网站，并对产品感到满意。
为了清晰的向用户展现UI中的内容，设计师应用了一个著名的方法—视觉层次。今天的文章将对这种方法的本质以及如何正确使用进行了讲解。
什么是视觉层次？
视觉层次是设计过程的核心方法之一。它最初是建立在格式塔原理的基础上，考察了用户对相互关联元素的视觉感知，并展示了人们如何将视觉元素归为一类。
视觉层次致力于以一种用户能够理解的方式呈现产品内容。用它来组织UI内容，可以使大脑根据物理差异（如大小、颜色、对比度、风格等）来区分对象。
UI元素的视觉呈现对产品的用户体验有很大影响。如果内容看起来一团糟，用户就无法在产品中快速找到信息或正确的与产品进行交互。此外，非结构化文字内容的易读性较低，用户将无法快速预览，他们需要费力的去区分他们要找的内容。这种糟糕的用户体验会导致用户满意度降低，这也就意味着一款产品不会很受欢迎。
文字的层级
文字是任何UI设计中都很重要的组成部分，这就是为什么视觉层次高度依赖于文字。专家们决定通过创建一个单独的文字级别来强调文字的重要性。
该系统旨在以最合适用户感知的方式组织文本内容。设计师通过对比关系来修改和组合文字，让重要的需要用户首先注意到的文字优先突出。经常用到的方式是调整大小、颜色、字体和对齐方式。
文字层次主要包括：标题、副标题、正文、号召性文字以及辅助文字等。为了构建一个可视化的文字层次，需要将所有元素分成不同的等级，让我们看下具体包括哪些内容。
一级文字：主标题，主标题的目的是为用户提供核心信息，同时吸引用户对产品的注意力。
二级文字：二级文字方便用户快速浏览。通常包括：副标题、说明文字
三级文字：正文和其他的数据文字，设计师通常使用较小的字号，但需要保持足够的可阅读性。
由于文字内容是UI中的主要信息来源，所以设计师需要逐级呈现信息。通过将文字分成不同的等级，来使用户能够快速接收信息并正确感知信息的重要程度。还有一点需要注意的是，在为移动端产品创建文字级别的时候，最好是两个以内。因为手机屏幕没有容纳三个级别的空间。为了使界面看起来更清晰，一般没有副标题。
视觉层次工具
当设计师已经选择好要呈现的内容时，就可以来制定文字等级了。让我们看看从哪些方面可以帮助设计师建立视觉层次。
大小信息区分最有效的工具之一就是大小。大的事物总是比小的事物更加重要，这种想法植根于用户心中。这也是为什么用户的注意力往往会转移到大的文字或图片上。设计师需要区分每个内容元素的重要性，并基于此将信息用大小来区分。
颜色颜色是构建视觉层次的有效工具。颜色本身就具有层次结构，从用户的心理来定义，有大胆的颜色，像红色、橙色和黑色，很容易引起注意。也有比较弱的颜色像白色和奶油色，这类的颜色适合用作背景。使用不同的颜色，可以使UI元素有轻微层次感。如：其他UI元素都用的是浅色，CTA（号召用户行为）按钮则可以用比较重的颜色，可以让用户第一眼就注意到。
对比层次基于内容本身的对比。一个元素和另一个元素形成对比则用户可以看到两者之间的差异性。可以通过视觉差（包括大小、颜色、样式）来创建对比。但是也需要保持页面的平衡，以免一个对象完全掩盖了另一个对象
负空间在用户界面中有很多内容，为了让用户注意到所有内容，就需要给他们的眼睛一定的休息空间。负空间和空白区域是指元素与元素之间的间距。一些设计师通常不会将空白区域作为他们设计的一部分，但专家们会把空白区域作为一个帮助设计布局的有用工具。适当的负空间，可以帮助用户注意和感知每一个元素。
接近正如我们上面所说的，视觉层次是建立在格式塔原理的基础之上的，所以设计师非常关注UI元素的接近程度。用户习惯把视觉元素统一到一个组里，所以UI元素需要以组的方式呈现，以便用户对其进行分类。如果某几个元素距离较近的放置，则用户会自动将他们视为一个组。设计师可以利用这个接近原则，帮助内容区分级别。
重复如果用户注意到某些元素看起来很相似，他们也会将它们视为一个组。这就是重复原理。设计师故意为不同的对象用重复一些模式，以便用户将它们视为一个统一体。举个例子：一个有大量正文的页面用一种颜色突出显示最重要的句子，看到这种颜色的句子用户就知道这是一个重要句子，用户也可以直接从一个重要句子直接跳到另一个重要句子。
视觉层次是有效信息结构化的基础。当UI元素结构化和组织化时，用户更好的使用产品，可以更加高效的为他们解决问题。此外，强大的视觉层次改进了导航系统，用户可以更好的定位产品。
英文原版地址https://design4users.com/visual-hierarchy-how-to-organize-ui-content/
更多文章：
欢迎关注微信公众号：菠萝方舟
网友评论