AMP

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

Important: this documentation is not applicable to your currently selected format websites!

网页故事是一种可点按且易于共享的沉浸式叙事方式。网页故事使用 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。可以在 AMP 验证工具中对故事进行测试。有关详细信息,请参阅网页故事技术详细信息