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

本文做者：杨芯芯

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

在咱们的 AMP 改版（关于 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 的两种推文形式对比，图片摘自演讲视频」

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

开发的基本流程

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

「 Understanding the parts of an AMP story by AMP」

上图展现了 AMP Story 的三个层级：Pages、Layers、Elements。按这个结构搭好页面框、指定 layer 的布局（Fill、Vertical、Horizontal、Thirds）、往里塞一些须要的组件（文字、图片、视频等等）并给组件加上动画，就能够完成一个最简单的 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" >
            <!-- invisible things -->
            <amp-install-serviceworker src="https://m.webnovel.com/sw.js" data-iframe-src="https://m.webnovel.com/installServiceWorker" layout="nodisplay"></amp-install-serviceworker>
            <!-- invisible things end -->
        </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 的红利和其广告收益也都十分值得咱们去尝试。

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