關於 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 的紅利和其廣告收益也都十分值得咱們去嘗試。

查看更多分享，請關注閱文前端團隊公衆號: