创建成功的 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 Stories 可以从头开始手动编码，也可以使用创建工具构建。

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

• 由 @CrystalOnScript 撰写