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

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

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

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

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

文字的层级

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

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

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

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

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

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

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

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

视觉层次工具

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

大小

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

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

颜色

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

对比

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

负空间

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

接近

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

重复

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

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

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

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

你可能感兴趣的:(ui设计层次是什么?怎么正确使用?【萧蕊冰】)