认识达内从这里开始

提升视觉层级的9个设计要点，无论是新手还是老手，赶紧都来看看吧，学习好UI设计，就在这里了！

今天达内教育UI老师为设计师创建清晰的视觉层级提供了几点有用的设计技巧。

1. 牢记目标

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

2. 考虑浏览模式

人们会大致的浏览页面以确定是否对产品感兴趣。许多研究都表明，流行的浏览模式有“F”和“Z”形。 了解这些模式的设计师会有效的组织内容，将所有核心的界面元素放在最多的扫描点上，引起用户注意。

3. 功能第一

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

4. 留白也是视觉元素

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

5. 应用黄金比例

黄金比例是被认为人眼最美观的元素。是不同尺寸元素的数学比例。这个比例等于1:1.618，可以用许多人看过的贝壳形螺旋来说明。设计师通常在线框图阶段应用黄金比例。它有助于规划布局和调整用户界面元素大小，这对于用户来说是合适的比例。

6. 使用网格

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

7. 添加一些颜色

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

8. 关注字体

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

9. 网页三种层级，手机两种层级

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

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

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

【免责声明】本文部分系转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与联系我们，我们会予以更改或删除相关文章，以保证您的权益！