Web设计中“可读性”设计技巧

Web设计中“可读性”设计技巧

在当今信息爆炸的时代，如何在网页设计中突出关键内容，让用户快速获取所需信息，成为设计师必须面对的挑战。本文将为您详细介绍Web设计中可读性设计的重要性和具体技巧。

由于新技术和互联网信息的爆炸，在我们周边每天都会有大量的信息产生，信息量远远超过了人们的可阅读量，在众多网站，用户不会仔细的去阅读所呈现的所有内容。因此，我们在设计网站中，掌握可阅读性的设计技术，让关键点脱颖而出是至关重要的。

什么是可读性？

在网页内容设计中，可读性是将内容和导航元素呈现为可以让用户快带察觉到关键信息点的布局方式。与网站交互，尤其是第一可以，用户可以快速的查看内容，分析是否是他们需要的内容。任何内容都可能成为这一个过程中的一个hook,如关键字、标题、图像、或动画。

其实这种信息浏览方式，并不是互联网诞生后才有的。几十年前，人们在阅读报纸和杂志时，就已经开始有选择性的浏览必要的内容。所以重要内容需要在用户匆匆一瞥时，就Hook住用户是极其重要的。

10年前，尼尔森回答了“人们如何在网上阅读内容？”的问题，简单的说：“人们是不在网站上阅读内容的，他们只是快速的扫描内容，挑选个别重要的词和标题”。因此，如果在介绍网站内容时，第一分钟内没有任何内容可以抓住用户，那么用户将会离开的风险将会很高。所以，无论网站内容是什么，让重要内容匆匆一瞥便能让用户记住是用户友好性的重要因素之一。

如何检查网站具有可读性效果？

让首次使用者回答如下两个问题：

1. 你在前几分钟看到的内容不否符合受众用户对此页的期望？
2. 你能在第一分钟和第二分钟内了解页面上的信息类型吗？

如果连设计都都不能肯定的回答以上两个问题，就应该加强考虑网站的可读性的设计了。对网站可读性的设计是必要的，

• 用户完成任务并更快的实现目标
• 用户在搜索他们需要的内容时会犯更少的错误
• 用户可以更快的了解网站的结构和导航
• 用户跳出率降低
• 让用户的留存率越来越高
• 让网站看起来和感觉更专业、更可信
• 提高SEO

可读性设计结构模式

作为界面设计师必须考虑的是用户的阅读习惯，把重点放在用户在最初几秒内如何与网页内容交互。当了解用户是如何浏览屏幕时，便可以优先考虑将内容放入最明显的区域。

第一种模式：Z形

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

第二种模式：使用Z字多层次布局

读者视觉范围从左上角开始从左到右，并在整个页面上依次浏览。最后会在整个页面上再将视觉移到右上角，察看这个初始交互区域中的信息

第三种模式：F模式

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

提高可读性的设计技巧

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

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

例如，当我们在博客中看到该文章时，我们将首先获得标题，然后是副标题，然后才能看到相关文本内容。这是否意味着文本内容信息重要性是否降低了呢？当然不是，但这样用户就可以轻易的扫描标题和副标题，以了解文章是否对他们有用，而不是阅读所有文本。如果标题和副标题正确完成并告知用户文章的结构和内容，这将是阅读内容的重要因素。另一方面，如果用户看到巨大而长的文本没有层次区别，他们将会非常害怕，无法理解阅读本文需要多长时间以及是否值得投入时间和精力。

有助于建立视觉层次结构的相关点：

• 尺寸
• 颜色
• 对比
• 亲密性
• 负空间
• 重复。

所有这些都有助于设计人员将元素，链接，图像和文本转换为和谐的页面布局

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

上述提到的所有阅读模式，无论特定用户遵循哪一个，扫描过程将从网页的顶部水平区域开始。用它来展示交互和品牌的关键区域。这就是为什么网站的标题设计不仅被UI / UX设计师以及内容管理者和营销专家认为是一个基本问题的基本原因。

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

3. 保持内容空间与负空间的平衡

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

4. 检查是否立即看到相关操作按钮

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

5. 测试内容的可读性

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

6. 让数字明显，而不是标题

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

7. 一个段落描述一个内容

尽量不要使文本内容太长。简短的段落看起来更容易让用户消化，如果信息对读者没有价值，可以更容易跳过。因此，当在一个段落中提出一个想法并应为另一个段落开始提供指引。

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

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

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

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

10. 使用图像和插图

在Web用户界面设计中，图像是既有信息又有情感吸引力的内容。原始插图，引人入胜的照片可以很容易地吸引用户的注意力。更重要的是，它们在构建视觉层次结构方面发挥了重要作用，并使内容与插图或照片相结合，更容易让用户理解。人们比文字更快地感知图像。

提高网页可讯性，设计人员和内容创建者必须做到真正尊重网站用户。这样我们就可以节省用户的时间和精力，为他们提供有组织，和谐，有价值和有吸引力的内容。