创建成功的 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 保持精简。这样，如果读者想了解更多关于您的故事，可以深入挖掘。当附加内容附加到相关页面时，读者可以更轻松地浏览故事。

这样做	不要这样做

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

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

这样做

精彩视频可以是 AMP 故事中的一个有用元素。您可以将完整视频作为附件包含在内，让读者可以选择更深入地了解您的内容。

链接到新位置

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

这样做	不要这样做

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

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

编码或创建

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

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

由 @CrystalOnScript 撰写