视觉层次不仅与美学有关。还提供解决问题的导航和交互系统以及友好的用户体验。

成都/产品设计师/6年前/329浏览

版权

视觉层次对有效的组织UI设计元素是至关重要。让我们看一些技巧，帮助设计人员在Web和移动布局上构建和组织UI元素。

好的视觉层次结构是成功数字产品的基本前提。它可以帮助我们有效的组织UI元素，以便内容易于理解和让用户在浏览时提高愉悦度。视觉元素的呈现对用户体验有很大影响。如果各元素组件有效的组织排版，用户可以毫不费力地浏览页面与页面交互并享受这中间的交互过程。

那么，怎么才能够使视觉层次结构明晰，内容有效组织？当然，不同类型的产品需要不同的构建方法。但是存在一些有助于UI内容组织的通用解决方案。今天的这篇文章提供了有关为Web和移动产品创建引人注目的可视化层次结构的设计要点。

1、明确产品商业业务目标

设计背后通常有商业目标。为了实现这些目标，创意团队需要确定哪些UI元素更重要，并根据他们的角色确定优先级。例如，电子商务网站上的所有元素都执行各种级别的任务。图像的使用通常是主要的吸引眼球，因为它们必须鼓励客户注意到它、留意它，并产生相应的操作。标题在图像之后解释它是什么，下一个重要的阶段是CTA(call to action)按钮，呼叫人们购买物品(或参与相关操作)。通过考虑为网站或应用设定的业务和营销目标，创意团队可以有效地优先考虑视觉内容，并使产品脱颖而出。

2、考虑用户浏览模式

用户在阅读网页之前，会对其进行扫描，以了解他们是否感兴趣。不同的研究，包括尼尔森诺曼集团的研究

，已经揭示了几种流行的扫描模式，其中“F”和“Z”形模式。

F模式主要出现在具有大量内容的数字页面或屏幕上，例如博客，新闻平台等。用户的眼睛以F形移动：首先，他们扫描屏幕顶部的水平线，然后向下移动页面稍微在较短的水平线上读取，在副本左侧的垂直线处完成，人们在段落的初始句子中查找关键字。

Z形图案发生在不太集中于复制的页面上或不需要向下滚动的页面上。模式如下：人们首先从左上角开始扫描页面的头部，搜索核心信息，然后向下到对角线，最后用页面底部的水平线从左到右。

设计师应该了解这些模式然后有效的组织内容，将所有核心UI元素放在最扫描的点上，以吸引用户的注意力。

3、功能第一

视觉层次结构不能只考虑美学方面。首先，通过构建和组织视觉元素，设计师需要确保产品使用清晰，导航正常。在美学上异常建立的视觉层次结构不仅不能有效地发挥作用，而且具有错误结构化的内容的用户界面导致不良用户体验。因此，在构建可视化层次结构时，设计人员需要考虑UI元素的功能以及它们在导航过程中扮演的角色。

4、留白是设计中不可或缺的设计元素

留白或负空间不仅仅是设计元素之间的区域，它实际上是每个视觉构图的核心组成部分。它是一种能够使用户注意到所有用户界面元素的衬托。设计师可以对UI组件进行分组或分离，以便他们可以创建有效的布局。此外，负空间有助于强调需要用户深度关注的特定元素。空白空间是创建视觉层次结构的有效工具之一，因此设计师需要努力实现负空间与内容之间的平衡。

5、应用黄金比例

黄金比例是不同尺寸元素的数学比例，被认为是人眼能发现的最美观的元素之一。比例等于1：1.618，并且通常用鹦鹉螺旋来说明。

设计师经常在线框图阶段应用黄金比例。有助于规划布局的结构，并以正确的比例调整用户界面元素的大小，这对用户来说在阅读时是非常愉悦的体验。

6、使用网格

网格是在创作过程的不同阶段应用的关键工具之一，视觉层次结构也不例外。网格有助于构建所有组件并将它们放入适当的大小和比例。更重要的是，设计师可以有效地处理负空间，因为网格显示元素是按比例放置还是均匀放置的参考线。

7、注意颜色的使用

颜色的选择和组合对于视觉层次结构至关重要，因为它们可以帮助用户区分核心元素。问题是颜色有自己的层次结构，这是由对用户心灵的影响力所决定的。有大胆的颜色，如红色和橙色，以及弱点的白色和奶油色。大胆的颜色很容易被注意到，因此设计师经常将它们用作突出显示或设置对比度的手段。

此外，将一种颜色应用于多个元素，您可以显示它们以某种方式连接。例如，您可以为购买按钮选择红色，以便人们可以在需要时直观地找到它们。

8、注意字体的使用

视觉层次结构包括一个称为排版层次结构的核心子部分，旨在修改和组合字体，以构建应注意到的最有意义和最突出的元素与普通文本信息之间的对比。可以通过调整字体大小，颜色和字体以及它们的对齐来转换字体。不同的字体可以将相同的内容划分为不同的级别，以便用户可以逐渐感知信息。但是，建议设计师将字体类型数量保持在3种字体以内，因为太多字体看起来很乱，并使设计不一致。