我们向我们敬佩的网页构建者提出了同一个问题...

人们可以做些什么来改善他们的网站?

感谢我们在 2021 年的主要赞助商。他们是我们能够创建此网站的重要组成部分。

Show, Don’t Tell

你花了多少时间来设计网站内容的展示?当你撰写新的博客文章或创建新页面时,你是否只考虑文字,还是考虑你的读者将如何与这些文字互动?牢记以下几点,你就可以让网站内容更容易理解,并为你的访问者带来更具视觉冲击力的体验。


使用良好的基础

考虑你的内容结构。如何将一堵信息墙分解成易于理解的小块?你可以遵循一些基本的格式规则,将大量信息整理成更易于阅读和理解的形式。

分解内容

使用标题和副标题 将相关内容分组在一起。

网络上的读者 扫描信息,而不是逐行阅读。将内容分成较小的部分,并使用较大的标题加以区分,可以帮助他们找到他们正在寻找的信息。

当我想快速找到某个东西时,没有什么比跳转到一个没有任何内容断开的网站更令人畏惧的了。最好的情况是我会使用 cmd+f 搜索特定关键词,但通常我会直接说“算了”并到其他地方寻找信息。

你自己看看——以下两个例子哪个更易于接受?

❌ 格式错误
✅ 格式良好

在可能的情况下,将段落分解成列表。列表使扫描更容易!

❌ 难以扫描
✅ 易于扫描

如果我正在阅读包含多个步骤的内容,例如,我需要列表才能跟上。每当我遇到任何没有将各个任务分解成列表的说明时,我的大脑就无法提取出所需的步骤。我会失去位置,或者遗漏某些内容,并感到困惑。无论你是在列出食材、教程步骤,还是你公司提供的不同服务,情况都是如此。请帮助我的大脑,使用列表。

强调突出

利用粗体和斜体格式强调重要的文字。

例如,将句子中最重要的部分用粗体突出显示,确保读者在扫描内容时能看到最重要的是什么。如果你正在撰写文章,你想让读者在关闭标签后还记住哪些信息?

在引用或引用信息时使用斜体,无论是标题、引文还是你自己的内心独白。

使用良好的格式不仅对人们在网站上阅读有帮助——它对我们用来大声朗读内容的机器人也很有用,无论这些机器人是屏幕阅读软件还是你的虚拟助手。随着越来越多的数字内容在物理空间中被访问,对适当语义的需求变得越来越重要。

Aaron Gustafson 的 Conversational Semantics 更深入地探讨了这个主题,如果你有兴趣。

强调突出

你可以超越粗体和斜体等内容格式来强调突出,并使用布局、颜色和图像等工具来吸引读者对最重要的信息关注。

人类处理视觉信息的效率是文字的 60,000 倍。这个数字是真的吗?谁知道呢!我找不到原始数据,只有大量网站引用其他网站引用了一些研究,但说实话,我愿意相信这一点,因为我自己的浏览网页内容的经验。我认为头像如此有用原因之一是,当我在 Twitter 或 Slack 等聊天应用程序上滚动浏览对话时,我首先根据头像识别用户,然后根据他们的名字识别。每当有人更新他们的头像时,我最初都会有点不适应,然后我的大脑才会反应过来并适应新的图像。

抱歉,这是谁?
我知道这个头像!

使用图像来补充强调你的内容,无论是添加图标、插图还是照片。图像应帮助人们理解你的内容所表达的意思。

例如,看看宜家的组装说明。组装家具是一件难事,宜家的以视觉为主导的说明使自己动手组装家具变得更容易。

宜家 MALM 说明

(不要过度使用——令人困惑的图标或繁杂的图像可能会分散注意力,而不是帮助。)

除了图像之外,你还可以使用布局或颜色来帮助突出信息。有一堆数字吗?将它们整理成表格,或者用更大的文字在它们自己的列中突出显示数字,而不是将所有内容都写成一段文字。

产品宽度高度
绿色入门地毯3′2′
紫色区域地毯4′4′
多彩区域地毯4′6′

使用表格来显示数值信息列表

205

已建网站

164

满意客户

使用列来突出显示重要文字

使用引用或重点引用来突出显示特定的引文或文章中的重要部分。

需要将某人引导到特定或最新的信息吗?将该内容包装在突出显示框中。

跳出段落的限制!当浏览网站或阅读书籍或杂志时,你最能注意到哪种内容?你后来会记住哪些信息?从你周围汲取灵感。

讲述故事

人是感性的。我们记得故事,尤其是我们能够产生共鸣的故事。你能将你的内容构建成一个故事吗?你能用一个引人入胜的开头和强大的结局来呈现它吗?是否有冲突?

在 2020 年美国总统大选期间,伊丽莎白·沃伦的技术团队为选民创建了一系列互动式数字体验,例如沃伦的 Tax the Ultra-Rich 计划 及其配套的 Billionaire Calculator。他们写了一份 案例研究,更深入地介绍了这一点,但我想重点介绍他们构建的信息滚动页面(绰号为“滚动式叙事”)是如何真正地突出显示重要信息的,并提供了相关链接内容以了解更多信息、添加引用或注入一些个性。这些页面融合了嵌入式交互式内容,以吸引你作为读者参与,包括视频、图像和文字。这是一种引人入胜的方式来呈现沃伦的故事。

尝试新的信息呈现方式

请记住,网络是一个交互式平台——在适当的情况下充分利用它(少即是多,无障碍性至关重要,你需要了解你的受众)。无论是滚动式叙事、带字幕的视频,甚至,也许对于你的受众来说,现在是开始关注 AR/VR 的时候了!谁知道呢。有时你只需要尝试一下,看看什么有效。不过要小心。实验很好,但我们需要确保我们让每个人都参与进来。

当然,更复杂的互动需要更多工作和/或预算,因此您可以使用您的内容创建的内容取决于您的资源。 您创建的叙事类型将取决于您是 DIY 博客作者还是有权访问代理机构或内部创意团队。 这没关系 - 并非每篇文章都需要像 Snowfall 那样的媒体丰富的体验。 即使添加一些简单的插图,例如 Samir Nosrat 的 *SALT FAT ACID HEAT*,也可以为您的读者营造良好的氛围并帮助加深理解。

*SALT FAT ACID HEAT* 使用插图代替照片来增加视觉趣味、提供信息或演示技巧。

无论您是制作您的第一个网站还是经验丰富的作家,您可能还有更多方法以有趣和引人入胜的方式呈现您的内容。 下次您创建新内容时,请考虑不同的方法来展示,而不是告诉您的受众信息。