创作成功的网页故事时的最佳做法

网页故事是一种可点按且易于共享的沉浸式叙事方式。网页故事使用 AMP 框架的一部分构建而成，可供创作者和发布商创作内容，让用户享受视觉丰富、极具吸引力且移动先行的全屏体验。

网页故事属于快餐式内容，读者希望瞬间就能快速了解大概情况。等地铁或喝杯咖啡的时间就是集中消费内容的机会。按照以下最佳做法来创作吸引人的快餐式网页故事，可以确保每一次点按都令人满意，让人心情愉悦。

概览

要想创作令人着迷的快餐式网页故事，应遵循如下主旨：

• 讲述一个完整且有趣的故事。
• 采用高品质的影像和朗朗上口的标题，最大程度提升封面的影响力。
• 选取的视频和图片应适合用户屏幕并可全屏显示，让故事变得栩栩如生。
• 很少情况下需要进行大量叙述，尤其是在使用视觉影像时。每页上的文字不超过 10 个词。
• 使用视频时，最好缩短播放时长，因此，尝试将视频播放时长控制在不超过 15 秒。
• 有些人以及在有些情况下需要静音观看。在视频中添加字幕，将内容包含在内。
• 提供一些内容让读者点按。10 到 20 页的平均长度就可以让大部分作者讲述一个很好的故事。
• 不要过度使用动画或嵌入内容，将注意力放在过渡时间上。

了解您的故事

规划故事简介，画出清晰的脉络，然后创作完整的故事。明确要讲述的内容后，对其进行拆分。每个网页故事页面都应当传达一个想法，该想法与其他想法密切相关。

内容有趣且饱满

每个网页故事至少包含 4 页，理想情况下不超过 30 页。网页故事必须精心讲述并且容易令人着迷。如果故事需要，可以超过 30 页。

选我！包装

封面就是网页故事的包装。读者最先看到的就是封面，如果他们不打开它，他们就只会看到封面。请确保封面独具吸引力！一个好的封面包含两个元素：吸引眼球的影像和令人难忘的简短标题。

影像

使用高品质的竖屏图片或视频，并以全屏显示。加入网站图标和徽标，让您的粉丝知道您的品牌。

标题

标题要清楚、整洁，理想情况下，少于 10 个字，不超过 40 个字符。加入作者、发布内容名称，如果故事的时效性较强，再加上发布日期。

品牌和日期

读者需要了解网页故事的发布者和发布时间。应在封面上添加品牌归因和发布日期。这有助于取得信任，如果用户喜欢您的内容，还有助于赢得忠诚度。此网页故事来自 CNN，讲述的是在意大利旅行的故事，让人看一眼就知道故事的发布者并了解发生时间。

视觉享受

采用吸引读者注意力的高品质视觉效果，并使用读者容易快速读取的文字，赢得读者关注。主要是使用高品质的视频和图片，但在必要时添加一些动画亮点。

所有图片和视频均应全屏显示，尽量少使用黑边模式。

视频

视频对读者具有很强的吸引力，网页故事中一定要包括尽可能多的视频。宗旨是视频时长不超过 15 秒。如果视频时间较长，请考虑将其分解为较小的块。

网页故事在纵向模式下显示，因此，请记住以下几点：

• 尽可能使用高端移动设备录制视频。
• 以 480p 的分辨率录制。
• 以每秒至少 24 帧的速度录制。

确保内容可供访问。重新调整视频，留出在底部显示文字和字幕的空间。并不是所有读者都能够或希望收听视频内容。

图片

以竖屏方式在高分辨率（828 x 1,792）下全屏显示图片。

避免使用横向裁剪的照片。

谨慎裁剪

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

正确做法	错误做法
此图片经过裁剪后与网页内容一致，并支持主旨。	这样裁剪后，读者应关注的重点不清晰，图片想要传达的主旨不明确。

文字

确保文字可读。至少应使用 24 号字体，但尽可能保持字体大且清晰。让文字颜色与故事页面背景或图片形成反差。不要使用纯文字的图片或视频。

正确做法	错误做法
强烈的反差让字词易于辨识。	反差较弱，文字和图片可能会混合，让字词难以辨识，较难跟进故事。
标注文字可以让字词突出，有助于读者将关注点放在故事上。	在热闹的图片上使用浅色文字，让字词难以辨识。

字词零食

文字应当像零食，而不是正餐。尝试让每页上的文字字符数不超过 200 个。

像成分表一样对待详细信息，仅当用户需要详细信息时，才提供详细信息。在页面附件中提供详细的文字内容。页面附件向用户传达的信息是，还有更多可阅读的内容。如果他们感兴趣，可以在设备上滑动浏览。

不可避免的情况是，有些页面上的文字内容比句子长。尝试让这些页面不要超过故事总页数的 10%。

正确做法	错误做法
尝试仅保留必要的文字。采用不同类型的大小和样式对文字块进行拆分，更方便浏览。	如图这样的大篇幅文字让人很难有阅读兴趣，可能会降低故事对读者的吸引力。

动画

在某些情况下，动画就像开胃菜，例如，在静止图片中添加动作。可以使用飞入、旋转或淡入效果为图片和素材资源添加动画效果。

正确做法	错误做法
本例中的动作有助于支持主旨，并向页面添加动态元素。	这个静态页面展示了功能，但可能无法进一步吸引读者眼球。

但是，要慎用动画，因为如果过度使用动画，可能会让人厌烦。避免添加过多单一的动画效果。

时间就是一切

页面应当快速进入完成后的状态（动画不应该阻止用户点按到下一页），但不应过快！重要的是将样式和持续时间进行适当的组合。例如，简单动画应该少于 500 毫秒，但在背景图片上平移应该会持续较长时间。

考虑使用动作发挥创意。为多个对象添加动画效果，使其构成一个序列，而不是采用单一的效果让它们同时移动。各个元素可以具有不同的效果和持续时间，目的是制作密切相关的动画。

完美匹配

将动画样式与故事的美学特质进行匹配。借助现有的网页故事动画库，可以帮助您找到合适的样式和强度，而不会分散读者对内容的注意力。

渴望更多

嵌入第三方内容、附加其他信息以及链接到新位置，让用户可以进一步探索您的主题。

策略性嵌入内容

嵌入内容会增加一个维度，该维度与嵌入内容相关并且呈现方式令人乐于接受。在嵌入内容旁加入相关的内容，形成整合的故事片段。您可能需要为嵌入内容提供互动功能。

正确做法	错误做法
此页面上的嵌入内容与其余布局达到了很好的整合效果。标题、日期和背景图片有助于增强视觉效果。	将嵌入内容单独放在页面上，让人感觉页面未完成，并且没有与整个故事进行很好的整合。

附加其他内容

将相关内容放入附件中，让网页故事简洁明了。这样，如果读者想了解更多故事内容，便可深入挖掘。如果将其他内容附加到相关页面，读者可以更轻松地浏览故事。

附件比较适合长文本块，如果故事包含精彩集锦视频，可以将整个视频作为附件添加。

链接到新位置

可以在网页故事页面上的任何位置添加链接。点按链接会出现一个工具提示，用于告知用户链接要跳转到哪里，并且允许他们在退出故事前先确认该操作。

正确做法	错误做法
此页面上的链接具有清晰的标记，周围提供了相关的内容，不会干扰用户浏览故事。	此页面上的链接会完全阻碍读者浏览。读者无法轻松转到上一页或下一页。

策略性地思考链接外观的大小、位置和使用频率。可点按的元素过多，会让浏览变复杂，并让读者感到沮丧。

编码或创建

可以从头开始手动为网页故事编写代码，也可以使用创建工具创作网页故事。

如果您手动为网页故事编写代码，将使用 AMP 框架从头开始编写。请按照创作您的第一个网页故事中的说明开始编写。创作网页故事后，请确保该故事是有效的 AMP。可以在 AMP 验证工具中对故事进行测试。有关详细信息，请参阅网页故事技术详细信息。

• Written by @CrystalOnScript