创建成功的 Web Story 的最佳实践

Web Stories 是一种沉浸式、可点击且易于分享的叙事格式。Web Stories 使用 AMP 框架的子集构建。Web Stories 为创作者和发布商提供了一个机会，以全屏、视觉丰富且引人入胜的移动优先体验为用户构建内容。

Web Stories 是轻量级的，读者喜欢在微时刻快速浏览。等待地铁或喝咖啡为浓缩的内容消费提供了机会。请遵循以下创建令人满意的轻量级 Web Story 的最佳实践，确保每一口都能吸引人和愉悦用户。

概览

创建令人满意、轻量级 Web Story 的主要要点

• 讲述一个完整且有趣的故事。
• 使用高质量的图像和引人入胜的标题，最大限度地提高封面页面的影响力。
• 使用适合并充满用户屏幕的视频和图像，使其可视化。
• 你可以用更少的文字表达很多，尤其是在使用视觉图像时。目标是将每页的文本保持在 10 个字以下。
• 确保你的视觉内容是可访问的——为图像提供适当的替代文本。
• 在使用视频时，较短的视频效果最佳，因此尽量保持在 15 秒以内。
• 有些人和某些情况需要静音观看。通过为视频添加字幕，保持内容的包容性。
• 给读者一些可以点击浏览的内容。平均长度为 10 到 20 页，使大多数作者能够讲述一个好的故事。
• 不要过度使用动画或嵌入，并注意过渡时间。

了解你的叙事

规划故事的引言，创建一个弧线并构建一个完整的故事。一旦你知道你想说什么，就把它分解开来。每个 Web Story 页面都应该传达一个与其它页面协同工作的单一想法。

美味且内容丰富

每个 Web Story 必须至少有 4 页，理想情况下少于 30 页。Web Stories 需要讲述得很好并且易于消费。如果你的故事需要，可以超过 30 页。

选择我！包装

你的封面页面是你的 Web Story 的包装。它是观看者看到的第一件事，而且，如果他们不打开它，也是他们唯一看到的东西。确保它具有吸引力！一个好的封面页面有两个要素，引人注目的图像和简短的令人难忘的标题。

图像

使用适合全屏的高质量纵向图像或视频。通过包含网站图标和徽标，让你的粉丝知道这是你的品牌。

标题

保持标题清晰简洁，理想情况下少于 10 个字，少于 40 个字符。包括作者和出版物名称，如果故事对时间敏感，则添加发布日期。

品牌和日期

读者需要知道谁发布了 Web Story 以及何时发布。在封面页面上包括品牌归属和发布日期。这可以培养信任，并且如果用户喜欢你的内容，就会产生忠诚度。来自 CNN 关于在意大利旅行的这个 Web Story 使人们可以一目了然地看到谁发布了该故事以及该故事的发布时间。

视觉盛宴

用能够吸引他们注意力的优质视觉效果和他们可以轻松快速阅读的文本来吸引读者。主要使用高质量的视频和图像，但在有意义的地方添加一些动画闪光。

所有图像和视频都应占据整个屏幕，并在有意义的地方尽量减少字母框的使用。

视频

视频对读者来说非常吸引人，一定要在你的 Web Story 中尽可能多地包含视频。目标是视频时长少于 15 秒。如果你有较长的视频，请考虑将其分解为较小的片段。

Web Stories 以纵向模式消费，因此请记住以下几点

• 尽可能使用高端移动设备拍摄视频。
• 以旋转的 720p 拍摄 (1280h x 720w)。
• 以至少每秒 24 帧的速度拍摄。

确保你的内容是可访问的。调整视频大小，以便在底部为文本和字幕留出空间。并非所有读者都能或想听到视频内容。

图像

使用全屏、纵向图像，并具有良好的分辨率 (720w x 1280h)。

避免横向裁剪的照片。

用心裁剪

专注于重要的内容。裁剪掉不必要的或分散注意力的元素，并确保照片的关键主题对焦完整。请记住，某些设备上的顶部和底部可能会被裁剪，因此请进行相应的测试。

这样做	不要这样做
此图像被裁剪为与页面内容对齐，并支持主要思想。	通过这种裁剪，不清楚读者应该关注哪里以及图像想要传达什么思想。

文本

确保文本可读。24 号字体应该是使用的最小尺寸，但使其尽可能大且清晰易读。将文本颜色与故事页面背景或图像对比。不要包含仅包含文本的图像或视频。

这样做	不要这样做
高对比度使文字易于看到。	对比度差时，你的文字和图像可能会混合在一起，使文字难以阅读，故事也难以理解。
突出显示文本可以使文字突出显示，并帮助你的读者专注于你的故事。	在繁忙的图像上使用浅色文字会使文字难以阅读。

文字片段

文本应该以片段的形式呈现，而不是整餐。尽量将每页的字符数保持在 200 个或更少。

像对待成分列表一样对待细节，使其可用，但仅在用户询问时才提供。在页面附件中包含长篇文本内容。页面附件会告知用户还有更多内容可阅读。如果感兴趣，他们可以在其设备上向上滑动。

包含长于句子的文本内容的页面可能是不可避免的。尽量不要让这些页面占用总故事页面的 10% 以上。

这样做	不要这样做
尽量只保留基本文本。改变字体大小和样式以分解文本块可以提高可扫描性。	像这样的整墙文本可能难以阅读，并且可能会阻止你的故事的参与度。

动画

有目的的动画很吸引人，例如为静态图像添加动画。你可以使用飞入、旋转或淡入效果为图像和资源添加动画效果。

这样做	不要这样做
此示例中的动画有助于支持主要思想，并为页面添加动态元素。	这个静态页面是功能性的，但它可能会错过一个机会，让读者更感兴趣。

但是，要谨慎使用，因为如果过度使用动画，可能会变得令人不快。避免添加过多的单一风味，并谨慎使用动画进行调味。

时机至关重要

页面应快速进入其完成状态——动画不应阻止用户点击下一页——但不要太快！提供正确的样式和持续时间的组合非常重要。例如，简单的动画应少于 500 毫秒，但背景图像上的平移应持续更长时间。

不妨在动画效果上发挥创意。将多个对象以序列方式进行动画处理，而不是让它们在一个单一效果中一起移动。元素可以具有不同的效果和持续时间，从而形成一个连贯的动画。

完美搭配

将动画风格与您的故事美学相匹配。使用可用的 Web Story 动画库来帮助您找到适合您的风格和强度，而不会分散内容的注意力。

渴望更多

通过嵌入第三方内容、附加其他信息并链接到新的位置，允许用户进一步探索您的主题。

策略性嵌入

在相关且呈现令人愉悦的情况下，嵌入可提供额外的维度。在嵌入内容旁边包含相关内容，使其成为故事的组成部分。您可能需要为您的嵌入启用交互性。

这样做	不要这样做
此页面上的嵌入内容与其余布局很好地整合在一起。标题、日期和背景图形有助于增强视觉效果。	将嵌入内容单独放在页面上看起来没有完成，并且不能很好地与整个故事整合。

附加额外内容

通过将相关内容放入附件，保持 Web Story 的精简。这样，如果读者想了解更多关于您的故事的信息，他们可以进行深入挖掘。当附加内容附加到相关页面时，读者可以更轻松地浏览故事。

附件适用于长文本块，或者如果您的故事包含精彩视频，您可以将完整视频作为附件包含在内。

链接到新的位置

您可以在 Web Story 页面的任何位置添加链接。点击链接会导致工具提示出现。这会告诉用户链接的去向，并允许他们在退出故事之前确认操作。

这样做	不要这样做
此页面上的链接清晰标记，并被相关内容包围。它们不会干扰故事导航。	此页面上的链接完全阻碍了导航。读者将无法轻松地转到上一页或下一页。

从战略上考虑链接出现的大小、位置和频率。太多的可点击元素会使导航复杂化并让读者感到沮丧。

编码或创建

Web Story 可以从头开始手动编码，也可以使用创建工具构建。

如果您要手动编写 Web Story 代码，您将使用 AMP 框架从头开始构建它们。按照创建您的第一个 Web Story 开始。创建 Web Story 后，请确保它是有效的 AMP。您可以在AMP 验证器中测试您的 Web Story。阅读Web Story 技术细节以获取更多信息。

• 作者： @CrystalOnScript