产品经理要了解的9个关于视觉层次设计的建议

本文转译自TubikStudio，全文有删减

产品经理要了解的9个关于视觉层次设计的建议

清晰的视觉层次是成功产品的基础。 它以有效的方式呈现UI元素，使内容易于理解并使用户很好接受。 视觉元素的呈现对用户体验有很大的影响。 如果UI组件能够有效地组织起来，用户就很享受地使用你的产品。不同类型的产品需要不同的视觉层次构建方法，但仍然有一些常见的解决方案对UI内容组织有帮助。 这些内容对于专业的UI设计师来说很浅显，但是对于产品经理来说是有必要了解的。

1、谨记产品目标

产品背后往往有公司的商业目标。 为了实现这些目标，产品团队需要确定哪些UI元素更重要，并根据其对于总体目标的重要性来优先考虑。以电商为例，产品主图通常是主要吸引用户注意的元素。产品标题在主图下面解释它是什么产品，下一个重要的是CTA按钮，叫人们完成购买。通过分析为产品设置的商业和营销目标，产品团队可以有效地优化视觉内容。

2、留意用户视线移动路径

在浏览越慢之前，人们会扫描它以了解他们是否感兴趣。不同的研究已经揭示了几种流行的用户视线扫描路径，其中有“F”和“Z”形。F图案主要出现在有大量内容的页面上，例如博客，新闻等。用户的眼睛以F形移动。Z形图案出现在不太复杂的页面上，或者不需要向下滚动的简单页面上。你需要将所有核心界面元素放在用户停留最多的点上，以引起用户的注意。

3、功能第一

视觉层次不仅只针对审美。 首先，通过组织视觉元素，设计师需要确保产品使用简单，导航准确。在美学上不合格的视觉层次结构不能有效地发挥作用。过度结构化内容的用户界面会导致糟糕的用户体验。 因此，在构建视觉层次结构时，设计师需要考虑UI元素的功能以及他们在导航过程中扮演的角色。

4、留白

留白不仅仅是设计元素之间的区域，它实际上是每个视觉设计的核心组成部分。 它是一种能够让所有用户界面元素都能够引起用户注意的工具。 设计师可以对UI组件进行分组或一定程度的隔离，通过留白来创建好的布局。 此外，留白有助于引导用户更多的关注特定元素。 留白是创建视觉层次结构的有效工具，因此设计师需要合理使用。

5、黄金比例

它是不同尺寸元素的数学比例，早年被认为是肉眼看来最和谐的比例。大致等于1：1.618，并且通常可以在很多地方看到这个比例的应用。产品团队通常在线框图阶段就要开始应用黄金比例。 它有助于规划布局和调整用户界面元素的大小，这对于用户来说是合适的比例。

6、使用网格

网格是在设计过程的不同阶段应用的重要工具之一，网格有助于组织所有组件，并将它们以适当的大小和比例布局在页面中。更重要的是，设计师可以有效地利用空间，因为网格显示元素是按比例均匀放置的。

7、添加一些颜色

颜色选择和颜色组合对视觉层次结构至关重要，因为它们可帮助用户区分核心元素。对于用户的认知结构来说，颜色有自己的层次结构。比如明显的颜色，如红色和橙色，以及像白色和奶油般柔软的颜色。明显的颜色很容易被注意到，所以设计师经常使用它们作为突出显示或设置元素间对比度的手段。此外，将一种颜色应用于多个元素，可以让用户察觉到他们之间是相互关联的。例如，可以为购买按钮配置红色，以便用户可以在需要时直观地找到它们。

8、注意字体

视觉层次结构包括一个称为印刷层次结构的核心子部分，旨在定义和组合字体，以在最需要引起用户注意的突出元素和普通文本信息之间建立对比。字体可以通过调整大小，颜色和字形以及对齐来进行设置。不同的字体可以将页面中的内容分成不同的等级，以便用户可以跟随我们的设计来感知信息层级。但是，建议设计师将字体数量保持在三个以内，因为太多的字体看起来很乱，并且使设计不一致。

9、PC页面设置3个层级，移动页面2个即可

正如我们上面提到的，不同的字体形成不同的内容级别，包括标题，副标题，正文副本，引用元素等元素。有三种常用的文本级别：H1，H2和正文。第一个是等级最高的类型，旨在吸引用户关注页面上的核心信息。下一级提供次级元素，可以轻松阅读并帮助用户浏览内容。最后一级通常应用于正文和一些额外数据。在许多情况下，大部分产品需要所有的三个级别，因为这样的话你就可以很好的组织大量内容。另一方面，建议产品团队在为移动端产品设计时将层次保持在两个以内。小屏幕不能提供足够的空间用于三个级别内容的展示，因此辅助级别的元素（如子标题）必须放在一边，以使移动UI看起来干净整洁。

有效的视觉等级不仅仅关乎美学。 它旨在提供高效的导航和交互系统以及友好的用户体验。为了创建有效的视觉层次结构，设产品团队需要考虑功能和产品目标来有效组织所有UI元素。