如何在UI设计中，有效地提高文本可读性。

我们每天的工作都离不开大量的信息流。新技术和快速的互联网让资讯井喷，人们可收集到比纸质媒体更多的内容。处理众多网站和应用程序时，用户不会一目了然地阅读他们看到的所有内容 - 他们首先扫描页面以找出原因以及它对他们有用。因此，可扫描性是当今网站可用性的重要因素之一。今天的文章探讨了这一现象，并提供了如何使数字产品可扫描的技巧。

什么是可扫描性？

应用于页面或屏幕，动词“扫描”意味着匆匆浏览或阅读。因此，可扫描性是将内容和导航元素呈现为可以轻松扫描的布局的方式。与网站交互，尤其是第一次，用户可以快速查看内容，分析是否是他们需要的内容。任何内容都可能成为这个过程中的一个钩子：单词，句子，图像或动画。

顺便说一句，这种行为并不是什么新鲜事：几十年来，人们经常在新的杂志或报纸上开始仔细阅读文章之前对其进行翻译。更重要的是，从屏幕上阅读比在纸上阅读更累人，因此用户在他们准备好打扰的时候和地点都会更有选择性。

为什么这很重要？大约十年前，雅各布尼尔森回答了“人们如何在网上阅读？”的问题，简单地说：“他们没有。人们很少逐字阅读网页; 相反，他们扫描页面，挑选单个单词和句子“。从那以后它没有太大变化：如果我们不确定它是否符合我们的需求，我们还没有准备好花时间和精力去探索网站。因此，如果在介绍的第一分钟没有任何东西可以抓住，那么用户将会离开的风险很高。无论网站的类型是什么，可扫描性都是其用户友好性的重要因素之一。

如何检查网页是否可扫描？尝试将其视为首次使用者并回答两个问题：

- 您在前几分钟看到的内容是否符合目标受众对此页面的期望？

- 您能在第一分钟或第二分钟了解页面上的信息类型吗？

如果你不确定这两个答案都是正面的，也许是时候考虑如何加强网站的可扫描性了。值得投入时间，因为精心扫描的页面在以下方面变得更加高效：

用户完成任务并更快地实现目标
用户在搜索他们需要的内容时会犯更少的错误
用户可以更快地了解网站的结构和导航
跳出率降低
保留用户的水平越来越高
该网站看起来和感觉更可信
SEO率受到积极影响。

流行的扫描模式

界面设计师必须考虑的重要事项是眼睛扫描模式，它显示用户在最初几秒内如何与网页交互。当您了解人们如何扫描页面或屏幕时，您可以优先处理内容并将用户需要的内容放入最明显的区域。这个用户研究领域由Nielsen Norman Group 提供支持，为设计人员和可用性专家提供了对用户行为和交互的更好理解。

收集用户眼睛跟踪数据的不同实验表明，有几种典型的模型，访问者通常会扫描网站。

Z-Pattern对于具有统一信息呈现和弱视觉层次的网页而言是非常典型的。

另一种方案具有Z字形图案，该图案通常用于具有视觉上分割的内容块的页面。同样，读者的眼睛从左上角开始从左到右移动，并在整个页面上移动到右上角，扫描这个初始交互区域中的信息。

另一个模型是Nielsen Norman Group 在探索中呈现的F模式，并显示用户经常展示以下互动流程：

用户首先读取水平移动，通常跨越内容区域的上部。这个初始元素构成了F的顶部栏。
接下来，用户稍微向下移动页面，然后在第二个水平移动中读取，该移动通常覆盖比先前移动更短的区域。这个额外的元素形成了F的下栏。
最后，用户以垂直移动扫描内容的左侧。有时这是一个相当缓慢和系统的扫描，在眼动追踪热图上显示为实心条纹。其他时候用户移动得更快，创建了一个spottier热图。最后一个元素构成了F的词干。

提高可扫描性的技巧

1.使用可视层次结构对内容进行优先级排序

基本上，视觉层次结构是以对人类感知最自然的方式在页面上排列和组织内容的方式。它背后的主要目标是让用户了解每个内容的重要性级别。因此，如果应用了可视层次结构，则用户将首先看到关键内容。

例如，当我们在博客中看到这篇文章时，我们首先会得到标题，然后是副标题，然后才会复制块。这是否意味着副本块中的信息具有较低的重要性？嗯，不，但这样用户就可以扫描标题和副标题，以了解文章是否对他们有用和有趣，而不是尝试阅读所有文本。如果标题和副标题正确完成并告知用户文章的结构和内容，这将是令人信服的阅读更多的因素。另一方面，如果用户看到巨大而长的文本没有分成块，他们将会非常害怕，无法理解阅读本文需要多长时间，以及是否值得投入时间和精力。

有几个主要因素有助于建立视觉层次结构：

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

所有这些都有助于设计人员将元素，链接，图像和副本集转换为页面布局的谐波可扫描系统。

2.将核心导航放入网站标题中

所有提到的眼睛扫描模式显示，无论特定用户遵循哪一个，扫描过程将从网页的顶部水平区域开始。使用它来展示互动和品牌的关键区域是支持双方的战略。这就是为什么网站标题设计不仅被UI / UX设计师而且被内容管理者和营销专家视为一个基本问题的基本原因。

另一方面，标题不应该重载：太多的信息使得无法对焦。将所有内容放入页面顶部的尝试可以将布局转换为混乱。因此，在每个特定情况下，必须分析核心目标受众的目标，他们如何与网站背后的业务目标交叉，并以此为基础 - 哪些信息或导航应该作为最重要的标题。例如，如果它是一个大型电子商务网站，搜索功能必须立即可见，并且通常可以在标题中找到，以便从任何交互点访问。对于小型企业网站而言，搜索功能根本不需要，但是直接看到的投资组合链接将是至关重要的。

3.保持负空间的平衡

负空间 - 或者通常称为空白区域 - 是布局的空白区域，不仅在布局中的对象周围，而且在它们之间和内部。负空间是页面或屏幕上所有对象的一种呼吸空间。它定义了对象的界限，根据格式塔原则在它们之间创造了必要的联系，并建立了有效的视觉表现。在网站和移动应用的UI设计中，负空间是高导航性的重要因素接口：没有足够的空气，布局元素没有被正确看到，因此用户可能会错过他们真正需要的东西。这可能是眼睛和大脑紧张的一个强有力的原因，尽管许多用户将无法解决问题。适量的负空间，特别是微空间，解决了它，使过程更自然。

4.检查是否立即看到CTA

显然，绝大多数网页都针对用户必须完成的特定操作。包含号召性用语（CTA）的元素（通常是按钮）应在几秒钟内显示，以便用户了解他们可以在此页面上执行的操作。好的测试包括在黑白和模糊模式下检查页面。如果在这两种情况下都可以快速区分CTA元素，那么它们就能很好地完成。例如，在下面显示的面包店网站的网页上，可以很容易地在其他元素中看到将项目添加到列表中的CTA按钮。

5.测试复制内容的可读性

可读性定义了人们阅读单词，短语和副本的容易程度。可读性衡量用户如何快速直观地区分特定字体中的字母。应仔细考虑这些特性，特别是对于填充了大量文本的界面。背景的颜色，复制块周围的空间量，字距调整，前导，字体类型和字体配对 - 所有这些因素都会影响快速扫描文本和捕获令用户留下的内容的能力。为了防止这个问题，设计人员必须检查是否遵循排版法则以及所选字体是否支持一般的视觉层次和可读性。用户测试将有助于检查用户能够快速轻松地感知文本。

6.应用数字，而不是单词

这条建议是基于尼尔森诺曼博客的另一项调查。他们分享了一个重要的发现：眼动追踪研究表明，在扫描网页的过程中，数字通常会阻止用户徘徊并吸引注意力，甚至嵌入大量可以忽略而无数字的单词中。我们潜意识地将数字与事实，统计数据，大小和距离相关联 - 这些数据可能是有用的。因此，数字包括在复制捕获读者的注意力中，而代表数字的单词可能在大量复制中被遗漏。更重要的是，数字比文本数字更紧凑，因此它使内容更简洁，更省时。

7.将一个想法放在一个段落中

在可扫描性方面处理复制内容，尽量不要使文本的批量太长。短段看起来更容易消化，如果信息对读者没有价值，可以更容易跳过。因此，当您在一个段落中提出一个想法并为另一个段落开始另一个想法时，请遵循该规则。

8.使用编号和项目符号列表

使文本更易于扫描的另一个好方法是使用带有数字或项目符号的列表。它们有助于清晰地组织数据。此外，它们会引起用户的注意，因此信息不会在一般文本中丢失。

9.突出显示文本中的关键信息

好旧的大胆，斜体和颜色突出是老派，但他们仍然成功地工作。通过这种方式，您可以将注意力集中在段落中包含的重要想法，定义，引用或其他类型的特定数据上。更重要的是，文本的可点击部分（链接到其他页面）必须在视觉上标记。我们习惯于看到它们加下划线，仍然用颜色或更大胆的字体突出显示它们甚至更有效。

10.使用图像和插图

在Web用户界面设计中，图像在设置心情或传递消息方面具有高度支持性。它们是内容既有信息又有情感吸引力。原始插图，突出的英雄横幅，引人入胜的照片可以很容易地吸引用户的注意力，并支持一般的风格概念。更重要的是，它们在构建视觉层次结构方面发挥了重要作用，并使复制内容与插图或照片相结合，更容易消化。人们比文字更快地感知图像，这是提高可扫描性的重要因素。