关于 AMP Story，你需要知道这些

系统管理员 2022-10-01 07:44 290阅读 0赞

> 本文作者：杨芯芯

> 原创声明：本文为阅文前端团队 YFE 成员出品，请尊重原创，转载请联系公众号 ( id: yuewen\_YFE ) 获取授权，并注明作者、出处和链接。

在我们的 AMP 改版（[关于 AMP，Webnovel 都做了些什么？][AMP_Webnovel]）过程中，我们发现了一些新的 AMP 组件，并针对部分组件做了一些尝试。其中就包括 AMP Story。AMP Story 是 AMP 的一种新的网页展现形式。

## 成果展示 ##

在介绍 AMP Story 之前，大家可以先看一下，我们基于 AMP Story 技术做的一个 Demo 页面。下面是我们做的一个关于 Tour Of Wenbovel 主题的一个 AMP Story 页面。对用户来说，与传统的单纯文字和图片不一样，它提供了一种沉浸式的 Web 体验。

「Webnovel 的 AMP Story 页面，[Tour of Webnovel][]」

## AMP Story ##

AMP Story 是 AMP 在推的 4 大主类之一，另外三个分别是 AMP Website、AMP Ads 和 AMP Email。之前我们都是着重于 AMP Website 这一方面的工作。 AMP Story 在展现形式上类似于我们熟悉的 ppt，同样是文字和图片搭配，加以丰富动效和页面切换。但除此之外，AMP 团队为我们实现了更多组件细节。比如页面切换时的贴心提示，告诉用户左右切换的点击区域；比如 pc 端到移动端的样式适配；比如社交网络分享功能，我们不需要再自己集成各个社交网络的分享；他们甚至为 AMP Story 单独做了一套沉浸式的广告组件。

### 为什么要做 AMP Story ###

AMP Conf 2019 上的一个分享 [Boring Content - Excited Users][] 令人感触颇深：Boost 是一个让用户比较、选择数百种不同运营商流量包的产品。他们的用户主要是非洲、印尼、东南亚的年轻人，对新技术有很强的适应能力，喜欢新颖的东西。他们原来使用博文的形式来介绍、比较各种流量包，但效果并不好，因为内容无法引起用户的兴趣。于是他们改用了 AMP Story，这种动感、图文并备的形式，让他们的内容阅读完成率提高到了 87%。

「boost 的两种推文形式对比，图片摘自[演讲视频][Boring Content - Excited Users]」

在信息爆炸的时代，人们越来越难以集中注意力，面对一整屏密密麻麻的文字时的通常状态是：一目十行地随意浏览，寻找关键信息，机械地滑动屏幕并假装自己看完了。这也是为什么总是会有“太长不看”的吐槽，也是为什么信息碎片化的社交网络、抖音这样的沉浸式短视频应用会轻而易举地攫取用户的芳心甚至让用户上瘾的原因。 上面提到的 Boost 案例也印证了这一点。东南亚、非洲，这些地区拥有大量的远高于桌面的移动用户，他们喜爱在 Youtube 上看视频，喜欢刷 Facebook，Boost 的成功之处正是顺应用户心理作出改变。 AMP Story 作为一种新的网页信息展现方式，跳出了传统的文字为主的垂直的文档流页面，让更加生动的图片、短视频等进行自我表达。而我们也可以借机思考——现有的一些页面是否能吸引用户的注意力，用户是否能有效地消化我们传达的信息，将来我们的用户会喜欢如何获取信息等等，并快速作出一些改变、尝试。

### 开发的基本流程 ###

开发 AMP Story 不是一件很困难的事情，官方提供了详尽的文档和丰富的案例。 但在开发之前，我们还要思考内容迁移。如果你的内容是一个榜单或一个列表，那就十分简单。但如果不是，你就要考虑如何把你的内容井井有条地分解，然后大量地删减文字，只留下最核心的思想，搭配相应的图片、视频资源，从而更加直观而有力的表达，或营造氛围。

「 [Understanding the parts of an AMP story][] by AMP」

上图展示了 AMP Story 的三个层级：Pages、Layers、Elements。按这个结构搭好页面框、指定 layer 的[布局][Link 1]（Fill、Vertical、Horizontal、Thirds）、往里塞一些需要的组件（文字、图片、视频等等）并给组件加上[动画][Link 2]，就可以完成一个最简单的 Page。 以我们的第二个 Page ，也就是除 cover 外正文的第一个 Page 为例，它的结构如下：

<amp-story-page id="page2" class="page" auto-advance-after="video2"> 	<amp-story-grid-layer template="fill">
    	<amp-video id="video2" layout="fill" src="//www.yueimg.com/overseam/img/amp/story/webnovel_02.mp4" poster="//www.yueimg.com/overseam/img/amp/story/poster_02.jpg" autoplay></amp-video>
    	</amp-story-grid-layer>
    	<amp-story-grid-layer template="vertical">
    	<div class="mask"></div>
    	<div animate-in="fly-in-right"
    	     animate-in-duration="0.2s"
    	     animate-in-delay="4s">
    	<div class="pin-bottom">
    	<h2>Cultivation Chat Group</h2>
    	<p>One day, Song Shuhang was suddenly added to a chat group with many seniors that suffered from chuuni disease...</p>
    	</div>
    	</div>
    </amp-story-grid-layer>
    </amp-story-page>
    复制代码

这个 page 的效果如下：

如此炮制出封面和其他 page，再加上书末页（我们会在后文详细说明），你的整个 story 就基本完成了。

「封面和书末」

### 开发 tips ###

*  集成 `<amp-analytics>` 和 `<amp-install-serviceworker>`

由于 AMP Story 整套的层级十分严格 —— 比如说 body 下只能有一个 `<amp-story>` 子元素。因此我们很难像正常的代码那样在逻辑合理的位置插入必要的 `<amp-analytics>` 以及 `<amp-install-serviceworker>` 组件。

我们的解决方案是这样的：将 `<amp-analytics>` 放在 `<amp-story>` 下，它应该是 `<amp-story>` 除了 `<amp-story-page>` 外唯一能容纳的组件；`<amp-install-serviceworker>` 则无法放在这里，于是我们将它放在了第一个 page 下的单独一个 layer 中，其他用法则没有什么区别。

<amp-story standalone>
        <amp-analytics type="googleanalytics" id="analytics">
            <script type="application/json" data-ignore="true">
                {
                "vars": {
                    "account": "UA-xxxxxxxx-x"
                },
                "triggers": {
                    "default pageview": {
                        "on": "visible",
                        "request": "pageview",
                        "vars": {
                            "title": "{
         { page.title | safe }}"
                        },
                    }
                }
            }
            </script>
        </amp-analytics>
        <amp-story-page id="page1" class="page" auto-advance-after="video1">
            <amp-story-grid-layer template="fill" >
                
                <amp-install-serviceworker src="https://m.webnovel.com/sw.js" data-iframe-src="https://m.webnovel.com/installServiceWorker" layout="nodisplay"></amp-install-serviceworker>
                
            </amp-story-grid-layer>
            ...
        </amp-story-page>
        ...
    </amp-story>
    复制代码

*  `amp-story-bookend` 小技巧

`<amp-story-bookend>` 是 AMP Story 的结束页组件，当用户播放完所有的 page 后，就会看到这样一个弹层，将用户引流到相关的链接、引导用户分享等等。 这个弹层的样式和交互是固定的，我们需要通过一个 json 来定制其内容。官方的使用案例是外链一个 json 文件：

<amp-story-bookend src="path/to/my/bookend.json"></amp-story-bookend>
    复制代码

但将这样一个最多只有十几行的 json 单独提取一个页面，我的内心是拒绝的，毕竟文件的管理、缓存、更新都更加麻烦。 其实官方也实现了内嵌的写法，只是并未在文档中特意指出，具体可以查看这个 [issue][]。 于是我们可以愉快的这样写⤵️，如果是服务端渲染，还可以用代码生成相关内容。

<amp-story-bookend>
      <script type="application/json">
        /* bookend JSON goes here */
      </script>
    </amp-story-bookend>
    复制代码

*  善用模板

如果你的大量内容形式趋同，大可以通过模板抽离出可复用的框架，定制其中的样式、动画组合、资源内容等等，减少样板代码。

### 最佳实践经验 ###

完成一个 AMP Story 是十分简单的事情。但是要做一个出色的 story 却并不简单。 AMP 团队给出了一些关于 AMP Story 的最佳实践，结合我们自身的经验，可以大致从这四个方向来优化。

#### 沉浸式体验 ####

「 [Space Photos of The Week][] by the Wired」

*  沉浸式体验的一般做法就是全屏。比起只在页面中划分一小块来展示图片或者视频，全屏能展示更多细节、减少干扰，让用户集中注意力。
 *  当页面的主要资源是视频时，可以自动播放视频。如果是连续的视频，可以在播放结束时自动切换至下一页。

#### 易于阅读 ####

「 [The Amazon Gold Rush][] by the Atlantic」

*  确保中心突出、文字简练。突出关键信息（如标题）的方式很多，比如为文字单独加上背景颜色。
 *  正文字体大小应不小于浏览器推荐的最小字体 16px。
 *  注意图文的关联性。
 *  在背景是图片或视频的前提下，可以在中间放置一个蒙层，保证文字阅读不受影响杂乱背景的干扰。

#### 注重弱网体验 ####

*  提供视频的首帧作为 poster，同时从中截取主色作为该页的背景色，这是为了让页面上的文字保证可读，同时让整个加载过程流畅过渡。
 *  每页视频一般不超过 10s、4Mb，否则可能导致过长的加载时间。

#### 体验的丰富性和整体的协调性 ####

「 [beyonce-rule-the-world][] by USA today」

一方面，我们可以加上动画来使页面更加动感、富有韵律，或者通过视频实现一些创意效果，给人留下深刻的印象。 另一方面，我们不应该滥用动画，一股脑地把能加的东西都加进来而不考虑协调性自然是不可取的操作。 如果觉得难以把握这个度，可以向设计师寻求帮助。或者参考 AMP story 主页上的优秀案例。

### 实用工具 ###

AMP Story 从形式上强制优化阅读体验，促使内容生产者创造出更加直观、生动的内容，而不仅仅只依靠文字。 但是对开发者来说，有限的施展空间导致 AMP Story 的开发偏向模式化。因此，我们可以使用一些 AMP Story 的辅助工具来加速其生产流程。

*  makestories.io：这个网站提供许多 AMP Story 的模板，支持可视化制作 AMP Story，解放程序员的?。
 *  Wordpress 插件：同上，可以可视化制作 AMP Story。
 *  Jumprope：制作步骤类型的视频，可作为 AMP Story 的素材。
 *  Unfold：制作图片、文字拼贴，可作为 AMP Story 的素材。

### AMP Story 的更多可能性 ###

AMP 团队也在不断为 AMP Story 添砖加瓦，让它具备更多可能性。下面是一些笔者觉得很赞的点：

*  Localization：将你的内容语言自动翻译成其他国家的语言，并适应其语言方向（比如阿拉伯语就是从右到左的）。
 *  sidebar：加强跟主页联系，AMP Story 不再是一个孤立的页面。
 *  内嵌第三方插件：例如 Twitter 内嵌、Google Map 内嵌、Youtube 视频内嵌等等，一个线下实体店铺推荐的 story 就可以加入 Google Map 内嵌。
 *  附件：给部分 page 一个了解更多的下拉选项，即可加载非 AMP Story 页面的内容。
 *  Google Search 中的优化：在 Google Search中开辟了新的位置专门用于展示 AMP Story，生态的构建也是十分重要的一环。
 *  amp-story-ad：AMP Story 独有的广告组件，作为单独的一个 page 插入在 story 中，兼顾了体验上的无缝、和谐。你看，AMP 团队甚至考虑到了广告，可见其打造生态闭环的野心。

## 总结 ##

作为 AMP Story 的消费者，用户可以获得更加丰富的体验。而作为 AMP Story 的 publisher，AMP Story 完全可以让我们集中于内容的创造，减少了大量开发的成本。我们无需考虑组件的实现方式、各种屏幕下的内容完整程度、不需要再手动集成分享的功能，只需要在 AMP 最佳实践的基础上，致力于真正的目标。而 AMP Story 日渐完善的生态，包括 SEO 的红利和其广告收益也都十分值得我们去尝试。

## 查看更多分享，请关注阅文前端团队公众号: ##

转载于:https://juejin.im/post/5ce35bd16fb9a07ed440d485

[AMP_Webnovel]: https://juejin.im/post/5cda5b146fb9a0321557028b
[Tour of Webnovel]: https://link.juejin.im?target=https%3A%2F%2Fm.webnovel.com%2Famp%2Ftour_of_webnovel
[Boring Content - Excited Users]: https://link.juejin.im?target=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DRm4HgfvM_dQ
[Understanding the parts of an AMP story]: https://link.juejin.im?target=https%3A%2F%2Famp.dev%2Fdocumentation%2Fguides-and-tutorials%2Fstart%2Fvisual_story%2Fparts_of_story%3Fformat%3Dstories
[Link 1]: https://link.juejin.im?target=https%3A%2F%2Famp.dev%2Fdocumentation%2Fguides-and-tutorials%2Fstart%2Fvisual_story%2Fcreate_cover_page
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Famp.dev%2Fdocumentation%2Fguides-and-tutorials%2Fstart%2Fvisual_story%2Fanimating_elements
[issue]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fampproject%2Famphtml%2Fissues%2F15826
[Space Photos of The Week]: https://link.juejin.im?target=https%3A%2F%2Fwww-wired-com.cdn.ampproject.org%2Fc%2Fs%2Fwww.wired.com%2Famp-stories%2Fspace-photos-of-the-week-111817%2F
[The Amazon Gold Rush]: https://link.juejin.im?target=https%3A%2F%2Fwww-theatlantic-com.cdn.ampproject.org%2Fc%2Fs%2Fwww.theatlantic.com%2Fassets%2Fmedia%2Finteractives%2F2019%2F01%2F02%2Fthe-amazon-gold-rush-atlantic-amp-story%2F
[beyonce-rule-the-world]: https://link.juejin.im?target=https%3A%2F%2Fwww.usatoday.com%2Famp-stories%2Fbeyonce-rule-the-world%2F