提高可扫描性的 UI 设计最佳实践

产品设计师经常在短时间内传达大量信息。 那些理解术语“可扫描性”、常见的眼动追踪模式和现代设计原则的人更有能力创建易于消费的内容和“粘性 UI”。

每天，互联网都在扩展着新的应用程序、网站、文章等。 吸引信息过载用户的注意力变得越来越困难，他们发现很难从不相关的内容中过滤相关信息。 营销专家 David Zheng 发现，在超过60% 的情况下，访问者会在 15 秒内放弃并离开网站。

研究表明，用户实际上并没有逐字阅读他们看到的所有内容——他们会扫描然后确定这些材料是否值得他们花时间。 通过使适当的内容可立即扫描，产品设计师可以将短期访问者转变为长期用户。 以下是一些 UI 设计最佳实践，以帮助放大可用性设计中经常被忽视的重要因素：可扫描性。

什么是可扫描性？

Nielsen Norman Group 的用户体验专家进行了研究以回答这个问题：人们如何在网络上阅读？ 他的发现很简单。 他们没有。

该小组发现，只有 16% 的网站首次访问者可能会逐字阅读。 其他 84% 的人会在决定深入挖掘材料之前快速扫描钩子元素，例如标题、句子、图像或动画。 这种行为不仅限于数字接口。 例如，人们很少阅读报纸上的每一个字。 相反，他们扫描相同的元素——标题、图像等——以确定什么是值得他们花时间的。

因此，可扫描性是一种布局内容以便易于扫描的方法。 通常只有很短的时间才能在屏幕上以有价值的内容给访问者留下深刻印象，因此针对用户在网络上的阅读方式全面优化界面至关重要。 无论数字产品是网站、应用程序还是其他类型的用户界面，可扫描性都是用户友好设计的最重要因素之一。

可扫描界面的好处

确定数字产品可扫描性的理想方法是从用户的角度观察它并回答以下关键问题：

1. 页面内容是否符合观众的期望？
2. 页面的主要信息是否在短时间内易于理解？

尽管可扫描界面的制作需要付出努力，但从长远来看，它通过创建粘性 UI 设计而获得回报。 Nielsen Norman Group 的研究表明，针对可扫描性优化的页面在以下方面变得更加有效：

• 用户有更快的任务完成时间
• 用户可以轻松定义内容是否适合他们
• 用户在回忆中犯的错误更少
• 用户可以更好地了解页面结构
• 网站在可信度和内容质量方面获得更有利的主观评价
• 跳出率降低
• 回访概率增加
• 搜索引擎优化 (SEO) 得到改进

用户习惯在扫描模式中的力量

每个人消费内容的方式都不同。 然而，通过研究，已经出现了定义明确的眼动追踪模式。 在最初的几秒钟内了解用户如何与界面交互可以帮助设计师优先考虑内容，将重要信息放置在主要可见区域，并建立强大的视觉层次结构。

根据 Nielsen Norman Group 的说法，用户扫描界面有七种常见模式：

• 著名的 F 模式：发现 12 年后，这种模式仍然是最常见的扫描模式——即使在扫描移动界面时也是如此。 眼睛水平移动，这在阅读时很典型，然后跳到下面的内容。 这可以通过斑点热图缓慢、系统地或快速地完成。
• Z 模式：之字形模型在网页中是典型的，具有统一的信息表示和弱视觉层次结构。
• 分层蛋糕模式：用户在扫描标题和副标题时遵循此模式，以快速确定他们正在寻找的信息的位置（以及是否）可以在页面上找到。
• 斑点模式：创意人员通常遵循这种扫描模型，他们跳过大块文本并扫描颜色、形状和比例异常等视觉组件以查找特定信息。
• 标记模式：就像舞者在旋转时固定在一个物体上以保持平衡一样，用户在滚动时将注意力集中在一个地方——这是移动用户体验中非常常见的模式。
• 绕过模式：当列表中的多行文本都以相同的单词开头时，用户会故意跳过一行的第一个单词。
• 承诺模式：这是一种罕见的模式，仅当用户对内容高度感兴趣并有动力消费所有内容时才会出现。

用户采用的模式主要与访问网页的动机有关：他们在寻找什么类型的信息？ 他们愿意花多少时间去寻找它？ 是否有其他网站可以更快地提供此信息？

通过用户研究和扫描模式提供价值

创造“以用户为中心的设计”一词的认知科学研究人员唐纳德·诺曼博士写道：“我们制造功能性、可理解和可用的产品是不够的，我们还需要制造能够带来快乐和兴奋的产品，快乐和乐趣，是的，人们生活的美丽。”

用户研究是以用户为中心的设计和 UI 设计最佳实践的基石。 随后，为了提高数字界面的可扫描性，设计人员必须了解最终用户。 当从最终用户的角度设计 UI 模式时，就会产生自然而直观的体验。

有影响力的解决方案不是由抽象构成的。 下面是一组美观、实用、可持续的数码产品。 每个设计团队都定义了关键受众，使用了眼球追踪模式，并设计了内容布局以产生粘性 UI。

Instacart 通过其 UI 设计模式利用以用户为中心的设计。 他们的受众中有很大一部分是老年人和有视力障碍的用户，因此这些项目以高对比度的网格列出，并明确强调主要的 CTA。 该设计允许使用 Spotted Pattern 扫描模式来适应长期访问者。

Yelp 服务于搜索绝对最佳餐厅、购物、夜生活、美食等的用户。人们可能会根据自己的个人标准和深入研究来评估评论，使 F 模式成为最适用的扫描模型。 因此，Yelp 以易于浏览的方式呈现内容，并强调特定元素，例如评分、图像和地址。

Airbnb 可以说是最受欢迎的应用程序之一，这在很大程度上归功于他们的用户研究。 因为他们知道他们的用户经常使用移动设备，所以他们设计以适应标记模式。 布局干净直观的界面是为了强调大的全宽公寓图像。 他们有意将每个屏幕的封面图片数量限制为两个，以便用户可以适当地投入时间并查看列表是否吸引他们的眼球。

在提高数字产品的可扫描性时要记住的一个因素是定义将在其上查看它的设备类型。 Airbnb 的移动平台获得了大量流量。 从拇指使用热图可以看出，Airbnb 战略性地将最常用的 UI 元素（例如“探索”和“保存的搜索”）放置在滚动和扫描时易于访问的范围内。

提高可扫描性的 UI 设计最佳实践

创建适当的视觉层次结构

数字界面的视觉层次是指 UI 设计元素的排列和呈现，以传达重要性级别，以便用户可以快速浏览所需的信息。 设计具有适当视觉层次结构的布局有几个因素：

• 尺寸
• 颜色
• 对比
• 接近
• 结盟
• 负空间
• 重复

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

Google 的搜索结果页面使用所有视觉层次结构因素来提高可扫描性。 标题通过使用颜色、大小以及随后的对比度来强调。 每个标题周围的负空间有助于它成为用户首先浏览的内容。

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

利用负空间

才华横溢的克劳德·德彪西曾说过：“音乐是音符之间的空间。” 可扫描性也是如此——元素之间的负空间是布局成功的原因。 UI 元素周围适当数量的负（白色）空间将焦点集中在元素本身上。 它强调内容并提供必要的喘息空间，以确保布局不会混乱。 没有呼吸空间，人脑不太可能扫描感兴趣的点，更容易混淆。

使用副标题来总结内容

人们经常对大量文本做出负面反应。 如果段落不符合他们的兴趣，这可能会引发他们将失去时间的假设。 UI 设计最佳实践为这个问题提供了解决方案。 通过在长文章的开头添加简短的副标题，用户可以最终了解该主题。

在编写副标题时，保持重点至关重要。 只需传达以下内容提供的关键信息。

创建项目符号和编号列表

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

列表创建的负空间使用户更容易扫描，因此仔细寻找机会是有益的。 如果文本中有两个以上的点相互平行，并且每个点都需要不超过两个句子来描述，那么这是列表的有力候选者。 Nielsen Norman Group 为创建项目符号数字内容提供了更深入的见解。

可视化内容

现代数字用户天生是视觉的，并不总是可能对文本内容做出很好的反应（即使它结构完美并遵循所有 UI 设计技巧以获得理想的可扫描性）。 外部环境永远是一个因素。 因此，为了抵消文本繁重的布局，图像和图形的使用提供了信息丰富且具有情感吸引力的视觉中断。 俗话说，一图抵千言！

原始视觉效果（插图、引人入胜的照片等）可以轻松吸引用户的注意力并支持总体风格概念。 更重要的是，它们可以改善视觉层次并使文本更易于消化。 但是，如果使用不当，图形可能会产生反作用。 在将关键想法转化为图形之前，设计师完全理解他们正在设计的内容至关重要。

适当强调 CTA

大多数数字体验旨在激发用户的特定行为。 尽管号召性用语 (CTA) 按钮通常看起来很简单，但它们的设计目的是帮助用户完成一项操作——例如购买、添加到购物篮或只是转到另一个页面。

UI 设计最佳实践建议将 CTA 放置在靠近描述动作的内容的位置，使其对用户来说直观。 测试 CTA 是否匀称、着色和定位的有效方法是将最终设计临时转换为灰度。 如果 CTA 仍然清晰可见并被强调，则粘性 UI 做得很好。

可扫描性的重要性

有很多元素决定了 UI 布局设计是否会受到人们的欢迎，例如内容相关性、​​竞争对手的解决方案和业务逻辑。 据福布斯报道，可扫描性可能是内容营销中最容易被忽视的因素。 通过创建可扫描的内容，短期访问者可以成为长期用户。

可扫描的内容向最终用户展示了他们的时间是宝贵的，并提供了通过简单浏览布局设计来理解核心信息的机会。 病毒博主和新闻学教授金凯勒向设计师指出，“你正在与你想要成为客户的人开始对话。 这是一种关系，如果你不花时间在一起，任何关系都无法生存。 尊重他们的时间，让它变得有价值。”

• • •

进一步阅读 Toptal 设计博客：

• UI 设计最佳实践和常见错误
• 空状态——用户体验中最容易被忽视的方面
• 简单是关键——探索最小的网页设计
• 移动界面的启发式原则
• 可读性设计——网页排版指南