创建成功的 Web 快拍的最佳实践

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

Web 快拍内容易于消化，读者喜欢在碎片时间里快速浏览。等待地铁或喝咖啡时可以利用起来，快速浏览浓缩的内容。遵循这些创建令人满意的可消化 Web 快拍的最佳实践，确保每一口都引人入胜且令人愉悦。

一览

创建令人满意、可轻松浏览的 Web 快拍故事的主要要点

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

了解您的叙述

规划故事介绍，创建一个弧线，并构建一个完整的叙述。一旦你知道你想说什么，就将其分解。每个 Web 快拍故事页面都应传达一个与其他页面紧密配合的单一想法。

有品味且充实的内容

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

选择我！包装

你的封面页是你的 Web 快拍故事的包装。这是观众会看到的第一个内容，而且，如果他们不打开它，也是他们会看到的唯一内容。确保它具有吸引力！一个好的封面页有两个元素，引人注目的图像和一个简短且令人难忘的标题。

图像

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

标题

保持标题清晰简洁，理想情况下少于 40 个字符，不超过 10 个单词。包括作者和出版物名称，如果故事具有时效性，则添加发布日期。

品牌和日期

读者需要知道谁发布了 Web 快拍故事以及何时发布。在封面页上包含品牌归属和发布日期。这会培养信任，如果用户喜欢你的内容，还会培养忠诚度。CNN 关于意大利旅行的Web 快拍故事让人们可以一目了然地看到谁发布了故事以及故事有多新。

视觉享受

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

所有图片和视频应占据整个屏幕，在有意义的情况下尽可能减少信箱遮幅的使用。

视频

视频对读者极具吸引力，务必在您的网络故事中尽可能多地包含视频。目标视频时长不超过 15 秒。如果您有较长的视频，请考虑将其分成较小的片段。

网络故事以纵向模式呈现，因此请记住以下事项

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

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

图像

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

避免横向裁剪的照片。

明智地裁剪

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

可行	不可行
此图像已裁剪以与页面内容对齐，并支持主要思想。	通过此裁剪，读者应关注何处以及图像意在传达什么思想尚不清楚。

文本

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

可行	不可行
高对比度使单词易于查看。	对比度较差时，文字和图片可能会融合在一起，导致文字难以阅读，故事难以理解。
突出显示文本可以让文字更加醒目，并帮助读者专注于你的故事。	在繁忙的图片上使用浅色文本会使文字难以阅读。

文字小吃

文本应分段显示，而不是一次性全部显示。尝试将每页的文本控制在 200 个字符以内。

将详细信息视为配料表，让用户可以随时查看，但仅在他们需要时。将长篇文本内容包含在页面附件中。页面附件会向用户传达还有更多内容可以阅读。如果感兴趣，他们可以在设备上向上滑动。

有时可能不可避免地出现文本内容超过句子长度的页面。尽量不要让这些页面超过故事总页数的 10%。

可行	不可行
尽量只保留文本中的要点。通过改变字号和样式来分解文本块可以提高可扫描性。	像这样一大段文字可能难以阅读，并可能阻碍用户参与你的故事。

动画

动画在有目的的情况下使用时会很有吸引力，例如为静态图片添加动态效果。你可以使用飞入、旋转或淡入效果为图片和素材添加动画。

可行	不可行
此示例中的动态效果有助于支持主要想法，并为页面添加动态元素。	此静态页面功能齐全，但可能错失了吸引读者的机会。

但是，要谨慎使用，因为过度使用动画可能会变得乏味。避免添加太多单一的风格，并谨慎使用动画。

时机就是一切

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

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

完美的搭配

将你的动画风格与故事的美学相结合。使用可用的网络故事动画库来帮助你找到一种既适合你又不分散内容注意力的风格和强度。

渴望更多

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

战略嵌入

嵌入在相关且呈现得令人愉悦的地方提供了一个额外的维度。在嵌入旁边包含相关内容，以便它成为故事的一个集成部分。你可能需要为你的嵌入启用交互性。

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

附加附加内容

通过将相关内容放入附件中来保持你的网络故事精简。这样，如果读者想更多地了解你的故事，他们可以深入挖掘。当附加内容附加到相关页面时，读者可以更轻松地浏览故事。

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

链接到新位置

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

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

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

编码或创建

网络故事可以从头开始手工编码，也可以使用创作工具构建。

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

• 由 @CrystalOnScript 撰写