创建适当的视觉层次结构

数字界面的视觉层次结构是指UI设计元素的排列和表示，以传达重要程度，以便用户可以快速扫描所需的信息。设计具有适当视觉层次的布局时，有几个因素：

尺寸 - 颜色 - 对比 - 接近 - 对准 - 负空间 - 重复

通过在创建UI布局设计时考虑这些UI设计模式，设计人员将确保最终产品具有美观，和谐且直观的可扫描布局。

Google的搜索结果页面使用了许多视觉层次结构原则。 (来源Google)

Google的搜索结果页使用所有视觉层次结构因素来提高可扫描性。通过使用颜色，大小以及随后的对比度来强调标题。每个标题周围的负空格会导致它成为用户要扫描的第一件事。

当用户找到相关的标题时，他们可能会检查链接的可信度-由于颜色和邻近性而易于识别的元素。接下来，为了更好地评估结果，他们将深入研究颜色，大小和接近度一致的内容副本。除了这些因素之外，重复和对齐还使Google搜索结果通常易于扫描。

利用负空间

杰出的克劳德·德彪西（Claude Debussy）曾经说过：“音乐就是音符之间的空隙。” 对于可扫描性，同样的观点是正确的-元素之间的负空间是使布局成功的原因。UI元素周围适当数量的负（白色）空间使焦点集中在元素本身上。它强调内容并提供必要的呼吸空间，以确保布局不会混乱。如果没有呼吸空间，人脑就不太可能扫描兴趣点，并且更容易混淆。

使用负号可以更容易地扫描一个简单的文本段落，而负号很少的段落会变得混乱和混乱。（图片来自UX Planet）

使用副标题汇总内容

人们通常会对大量文本产生负面反应。它可能会触发一个假设，即如果该段落与他们的兴趣不符，他们将浪费时间。UI设计最佳实践为该问题提供了解决方案。通过在长篇文章的开头添加简短的副标题，用户可以最终了解该主题。

在编写子标题时，至关重要的是保持其正确性。只需传达以下内容提供的关键信息即可。

创建项目符号和编号列表

人脑非常系统化-观察内容，然后将其分组为有意义的单位。因此，与合并到文本段落中的几个点相比，用户更可能理解项目符号列表或编号列表。

列表创建的负数空间使用户更易于扫描，因此仔细寻找机会是有益的。如果一个文本中有两个以上的点彼此平行，并且每个点都只需要两个以上的句子即可描述，那么这是一个很适合的列表。尼尔森·诺曼集团（Nielsen Norman Group）为创建项目符号数字内容提供了进一步的见解。

可视化内容

现代数字用户具有自然的视觉效果，并不总是能够很好地响应文本内容（即使其结构完美且遵循所有UI设计技巧，也具有理想的可扫描性）。外部环境将永远是一个因素。因此，为了抵消大量文本的布局，图像和图形的使用提供了信息丰富且令人着迷的视觉效果。俗话说，一张图片值得一千个字！

原始的视觉效果（插图，引人入胜的照片等）可以轻松吸引用户的注意力并支持一般的样式概念。而且，它们可以改善视觉层次，并使文本更易于消化。但是，如果使用不当，可能会导致图形产生反效果。在将关键思想转换为图形之前，至关重要的一点是，设计师必须完全了解他们所设计的内容。

Apple提供了一个出色的示例，使用可视化来改善界面的可扫描性和可视层次结构。

在CTA上设置适当的重点

大多数数字体验旨在引起用户的特定操作。尽管号召性用语（CTA）按钮通常看起来非常简单，但是它们的战略设计是为了帮助用户完成一项操作，例如购买，添加到购物篮或只是转到另一个页面。

UI设计最佳做法建议将CTA定位在描述动作的内容附近，以使其对用户直观。测试CTA是否正确分配，着色和定位的有效方法是将最终设计临时转换为灰度。如果CTA仍然清晰可见并得到强调，则粘性UI会做得很好。

Uber实施了“轻按按钮”。通过使用带有大量负空间的高对比度CTA来获得“骑乘”的承诺。

有很多因素可以确定用户是否会很好地接受UI布局设计，例如内容相关性，竞争对手解决方案和业务逻辑。可扫描性可能是内容营销最被忽视的因素。通过创建可扫描的内容，短期访问者可以成为长期用户。

可扫描的内容向最终用户证明了他们的时间很有价值，并通过简单地浏览布局设计就提供了理解核心信息的机会。病毒博客和新闻学教授金·凯勒（Kim Keller）向设计师指出，“您正在与想要成为客户的人进行对话。这是一种关系，如果您不一起度过时光，任何关系都无法生存。尊重他们的时间，并使之值得。”

原作者：Nemanja