视觉层次结构对于有效的设计构图至关重要。让我们来看看设计师如何在 Web 和移动布局上构建和组织 UI 元素的提示。

足够的视觉层次结构是成功数字产品的基础。它有助于有效地组织 UI 元素，使内容易于理解和愉快地看到。视觉元素的呈现对用户体验有很大的影响。如果组件组织得当，用户无需努力即可导航并与产品进行交互，并享受流程。

那么，是什么造就了强大的视觉层次结构呢？当然，不同类型的产品需要不同的构建方法，但仍有一些有助于UI内容组织的共同解决方案。今天的文章提供了有用的提示，为网络和移动产品创建一个引人注目的视觉层次结构。

牢记业务目标

数字产品背后往往有商业目标。为了实现这些目标，创意团队需要确定哪些UI元素更重要，并根据他们的角色确定它们的优先级。例如，电子商务网站上的所有元素都执行不同级别的任务。项目图像通常是主要的吸引眼球，因为他们必须鼓励客户考虑它。标题在图像之后解释它是什么，下一个重要阶段是CTA 按钮打电话给人们买一件物品。通过考虑为网站或应用程序设定的业务和营销目标，创意团队可以有效地优先考虑视觉内容，使产品脱颖而出。

设计机构着陆页

考虑扫描模式

在我们的上一篇文章，我们提到，在阅读网页之前人们扫描它了解他们是否感兴趣。不同的研究，包括那些由尼尔森诺曼集团，揭示了几个流行的扫描模式，其中"F"和"Z"形。

F型主要出现在数字页面或屏幕上，内容量很大，如博客、新闻平台等。用户的眼睛以 F 形移动：首先，他们扫描屏幕顶部的水平线，然后向下移动页面一点，读取较短的水平线，最后在副本的左侧以垂直线结束，人们在那里查找段落初始句子中的关键字。

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

了解这些模式，设计人员将内容组织起来，将所有核心 UI 元素放在扫描最多的点上，以吸引用户的注意。

功能第一

视觉层次结构似乎只针对美学方面，但并非如此。首先，通过构建和组织视觉元素，设计人员需要确保产品使用清晰且导航工作正确。建立在美学之上的视觉层次结构无法有效工作。用户界面与结构不良的内容导致不良的用户体验。因此，在构建视觉层次结构时，设计人员需要考虑 UI 元素的功能及其在导航过程中所扮演的角色。

海鲜食谱登陆页面

空白是一种视觉元素

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

应用黄金比率

我们专门为我们的最新文章之一黄金比率应用于设计。它是不同大小元素的数学比例，被认为是人类眼睛最美观的元素。这个比例等于1：1.618，它经常被海贝形状的螺旋所说明，你们中的许多人可能已经看到了。

设计师经常在线材构线切割阶段应用黄金比例。它有助于规划布局的结构，并按正确的比例调整用户界面元素的大小，这将为用户带来愉悦。

使用网格

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

添加一些颜色

颜色选择和组合是必不可少的视觉层次结构，因为他们帮助用户区分核心元素。问题是，颜色有自己的层次结构，这是由影响用户的头脑的力量定义的。有大胆的颜色，如红色和橙色，以及较弱的颜色，如白色和奶油。大胆的颜色很容易注意到，所以设计师经常使用它们作为突出显示或设置对比度的方法。

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

注意字体

视觉层次结构包括一个名为"核心子节"的核心子节排版等级旨在修改和组合字体，以建立最有意义和最突出的复制元素之间的对比，应该首先注意到和普通文本信息。字体可以通过调节大小、颜色、家庭以及它们的对齐来转换。不同的字体可以划分复制内容进入不同的级别，以便用户能够逐渐感知信息。但是，建议设计师将字体数量保持在三个以内，因为太多的字体看起来杂乱无章，使设计不一致。

网络三个级别，移动两个级别

正如我们前面提到的，不同的字体形成排版级别，包括标题、副标题、身体副本、行动号召元素和标题等元素。排版有三个层次：初级、二级和三级。第一个类型最大，旨在吸引人们注意屏幕上的核心信息。下一个级别提供易于复制的元素扫描并帮助用户浏览内容。第三级通常应用身体文本和一些额外的数据，这是通过一个相对较小的类型呈现。

在许多情况下，Web 产品包括所有三个级别，因为它们更有可能提供大量内容。另一方面，建议设计师在为移动创建排版时将图层数保持在两个以内。小屏幕不能为三个级别提供足够的空间，因此二级（如子标题）的元素必须退到一边，使移动 UI 看起来干净。

葡萄酒屋应用程序

效的视觉层次结构不仅仅是美学。它旨在提供解决问题的导航和交互系统以及友好的用户体验。为了创建足够的视觉层次结构，设计人员需要根据功能和业务目标组织所有 UI 元素。

作者：Tubik Studio 

原文地址

推荐阅读

黄金比例在UI设计中的运用