提升视觉层级的9个设计要点

成功的产品设计都有清晰的视觉层级。清晰的层级设计使每一个UI元素清晰的呈现出来，让用户易于理解。视觉元素的呈现效果对于用户体验非常重要。设计合理的UI组件，可以让用户轻松的使用这个产品，与产品进行良好的互动，并感到愉悦。

因此，什么是视觉层级？虽然不同类型的产品有不同的构建方法，但是仍然有一些通用的解决方案。今天这篇文章为设计师创建清晰的视觉层级提供了几点有用的设计技巧。

每一个产品都有商业目标。要实现这些目标，创意团队需要确定哪些UI元素更重要，并根据角色优先考虑。比如，电子商务网站上的所有元素都执行各种不同的任务。项目图片是第一层级，因为它必须让客户去认知它。标题是解释产品是什么，其次是按钮鼓励人们去购买。根据产品的业务目标和营销目标，设计团队可以有效的优化视觉元素突出产品，让人印象深刻。

人们会大致的浏览页面以确定是否对产品感兴趣。许多研究都表明，流行的浏览模式有“F”和“Z”形。

F形浏览主要是用户浏览大量的内容的时候，例如博客、新闻平台等。用户的眼睛以F形移动：人们首先扫描屏幕顶部的水平线，然后向下移动页面阅读一遍水平线，人们会在段落的开始阶段查找关键字，然后在副本左侧的垂直线向下结束。

Z形图案出现在不太复杂的页面上，或者不需要向下滚动的页面上。人们首先从左上角开始扫描页面头部，搜索核心内容，然后沿着对角线向下到对角，在最底部从左到右结束。

了解这些模式的设计师会有效的组织内容，将所有核心的界面元素放在最多的扫描点上，引起用户注意。

视觉层级似乎和审美有关，但不仅于此。首先，通过构建和组织视觉元素，设计师需要确保产品使用清晰，导航正确。在美学上，异常的视觉元素的视觉层次不能有效的发挥作用。严重结构化的用户界面会导致糟糕的用户体验。因此，在构建视觉层次时，设计师考虑UI元素的功能以及他们在导航中的角色。

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

黄金比例是被认为人眼最美观的元素。是不同尺寸元素的数学比例。这个比例等于1:1.618，可以用许多人看过的贝壳形螺旋来说明。

设计师通常在线框图阶段应用黄金比例。它有助于规划布局和调整用户界面元素大小，这对于用户来说是合适的比例。

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

颜色选择和组合对视觉层次至关重要，它们可以帮助用户区分核心元素。颜色有自己的层次结构，这是由影响用户心智的模型来决定的。大胆的颜色，如红色和橙色，很容易被注意到，所以设计师经常使用它们作为突出显示或设置对比度的手段。

此外，将一种颜色应用与多种元素。来显示某种关联。例如，您可以为购买按钮选择红色，以便用户在需要时可以直观的找到它。

视觉层次结构包括一个称为印刷层次结构的核心部分。它的主旨是通过修改和组合字体，将需要突出的部分建立对比，这些元素应该最先被注意到，并与普通文字形成对比。字体可以通过调整大小、颜色和对齐的方式。不同的字体可以将内容分成不同的级别，以便用户可以感知信息。但是，建议设计师将字体保持在三种以内，因为太多的字体看起来很乱，并且使设计不一致。

如上所述，不同字体形成不同的级别，包括标题、副标题、正文副本，号召性用语元素和标题等。有三种级别，第一个是最高层级，旨在吸引用户关注屏幕上的核心信息。第二级提供副元素，可以让用户轻松的了解所浏览的内容。第三级通常应用正文和一些娇小的类型的元素呈现数据。

许多情况下，数字产品都包含三个级别，因为它们能提供大量内容。另一方面，建议设计师为移动设备设计时将层级保持在两个以内。小屏幕不能提供足够的空间用于三个级别，因此辅助元素（如子标题）必须放在一边，使UI看起来干净整洁。

有效的视觉层级不仅关乎美学。它旨在提供解决问题的导航和交互系统以及友好的用户体验。为了创建足够的视觉层级，设计师需要考虑功能和业务的目标来组织所有UI元素。

本文针对如何加强视觉层级的设计介绍了九个设计要点，我们可以应用以上原则进行UI设计，希望可以通过阅读本文对你的设计有所帮助。

原文链接：https://uxplanet.org/9-effective-tips-on-visual-hierarchy-c3b30a7fd0ef

原文作者：Tubik Studio