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

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

Web Story 是可以快速浏览的，读者喜欢在他们的碎片时间里快速阅读。等待地铁或喝咖啡为压缩内容消费提供了机会。遵循以下创建令人满意的快速浏览 Web Story 的最佳实践，确保每一口都能吸引人并令人愉悦。

概览

创建令人满意的快速浏览 Web Story 的主要要点

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

了解您的叙事

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

美味且内容丰富的体验

每个 Web Story 必须至少包含 4 页，并且最好少于 30 页。 Web Story 需要讲述得很好并且易于消费。如果您的叙述需要，则可以超过 30 页。

选择我！包装

您的封面页是您 Web Story 的包装。这是观看者首先会看到的内容，如果他们不打开它，这是他们会看到的唯一内容。确保它有吸引力！一个好的封面页有两个要素：引人注目的图像和一个简短而令人难忘的标题。

图像

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

标题

保持标题清晰简洁，最好在 10 个字以内，少于 40 个字符。包括作者和出版物名称，如果故事对时间敏感，请添加发布日期。

品牌和日期

读者需要知道谁发布了 Web Story 以及何时发布。在封面页上包含品牌归属和发布日期。这可以培养信任，如果用户喜欢您的内容，则可以培养忠诚度。这是 CNN 关于意大利旅游的Web Story，可以轻松一目了然地看到谁发布了故事以及故事的最新程度。

视觉盛宴

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

所有图像和视频都应占据整个屏幕，并在有意义的地方尽可能少地使用黑边。

视频

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

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

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

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

图片

使用全屏、纵向图像，分辨率良好（720w x 1280h）。

避免裁剪的横向照片。

有意识地裁剪

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

可以	不可以
此图像经过裁剪以与页面内容对齐并支持主要思想。	使用此裁剪，不清楚读者的焦点应该在哪里以及图像打算传达什么想法。

文本

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

可以	不可以
高对比度使文字易于查看。	对比度差时，您的文字和图像可能会混合，使文字难以阅读，并且故事更难理解。
突出显示文本可以使文字突出显示，并帮助您的读者专注于您的故事。	在繁忙的图像上使用浅色文本会使文字难以阅读。

文字小点

文本应该是小点，而不是大餐。尽量保持每页少于 200 个字符或更少。

将细节视为成分列表，使其可用，但仅在用户要求时才可用。在页面附件中包含长篇文本内容。页面附件会告知用户有更多内容可以阅读。如果感兴趣，他们可以在设备上向上滑动。

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

可以	不可以
尽量将文本保持在必要的范围内。改变字体大小和样式以打破文本块可以提高可扫描性。	像这样的巨大文本墙可能难以阅读，并且可能会阻止您对故事的参与。

动画

有目的地完成动画效果时（例如为静态图像添加运动）会令人赏心悦目。您可以使用飞入、旋转或淡入效果为图像和素材添加动画。

可以	不可以
此示例中的运动有助于支持主要思想并为页面添加动态元素。	此静态页面功能正常，但它可能错过了为读者提供更多参与机会。

但是，请谨慎使用，因为如果过度使用动画，可能会变得乏味。避免添加过多的单一风格，并谨慎地使用动画进行调味。

时机至关重要

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

考虑在运动方面发挥创造力。将多个对象动画化为一个序列，而不是让它们以单一效果一起移动。元素可以具有不同的效果和持续时间，以实现连贯的动画。

完美搭配

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

渴望更多

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

战略性嵌入

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

可以	不可以
此页面上的嵌入与其余布局很好地集成在一起。标题、日期和背景图形有助于增强视觉效果。	将嵌入单独放在页面上看起来未完成，并且与整个故事的集成效果不佳。

附加额外内容

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

附件非常适合长篇文本，或者如果您的故事包含精彩片段视频，您可以将完整视频作为附件包含在内。

链接到新的位置

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

可以	不可以
此页面上的链接已清晰标记并被相关内容包围。它们不会干扰故事导航。	此页面上的链接完全阻止了导航。读者将无法轻易进入上一页或下一页。

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

编码或创建

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

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

• 由 @CrystalOnScript 撰写