建立成功的 Web Story 最佳實務

Web Story 是一種沉浸式、可輕觸且易於分享的說故事格式。Web Story 是使用 AMP 架構的子集建構而成。Web Story 為創作者和發布商提供機會，以全螢幕、視覺豐富且引人入勝的行動優先體驗來架構內容，以提供給使用者。

Web Story 是輕量級的，讀者喜歡在零碎時間快速瀏覽內容。等待地鐵或買咖啡時，都是濃縮內容消費的機會。請遵循這些建立令人滿意輕量級 Web Story 的最佳實務，確保每次瀏覽都能引人入勝並帶來樂趣。

一覽

建立令人滿意輕量級 Web Story 的主要重點

• 講述完整且有趣的故事。
• 使用高品質的圖像和引人注目的標題，最大化封面頁面的影響力。
• 透過符合並填滿使用者螢幕的影片和圖片，使其視覺化。
• 您可以用更少的文字表達很多內容，尤其是在使用視覺圖像時。目標是將每頁的文字保持在 10 個字以下。
• 確保您的視覺內容是可存取的 - 為圖片提供適當的替代文字。
• 使用影片時，較短的影片最好，因此請盡量保持在 15 秒以下。
• 有些人以及某些情況需要在沒有聲音的情況下觀看。透過為影片新增字幕，讓內容更具包容性。
• 讓讀者有東西可以點擊瀏覽。平均長度為 10 到 20 頁，讓大多數作者都能講述一個好的故事。
• 不要過度使用動畫或嵌入，並注意轉場時間。

了解您的敘事方式

規劃故事的介紹、建立情節，並逐步建構完整的敘事。一旦您知道想說什麼，就將其分解。每個 Web Story 頁面都應傳達一個與其他頁面協調一致的單一想法。

精緻且豐富的內容

每個 Web Story 必須至少有 4 頁，理想情況下少於 30 頁。Web Story 需要講述得好且易於理解。如果您的敘事需要，可以超過 30 頁。

選擇我！包裝

您的封面頁面是 Web Story 的包裝。這是觀眾首先看到的內容，如果他們沒有打開它，這也是他們唯一會看到的內容。確保它具有吸引力！一個好的封面頁面有兩個要素：引人注目的圖像和簡短而令人難忘的標題。

圖像

使用符合全螢幕的高品質直向圖片或影片。透過包含網站圖示和標誌，讓您的粉絲知道這是您的品牌。

標題

保持標題清晰簡潔，理想情況下少於 10 個字，且少於 40 個字元。如果故事具有時效性，請包含作者和發布名稱，並新增發布日期。

品牌與日期

讀者需要知道誰發布了 Web Story 以及何時發布的。在封面頁面上包含品牌歸屬和發布日期。這有助於建立信任，如果使用者喜歡您的內容，則可以培養忠誠度。這則來自 CNN 關於義大利旅遊的 Web Story 讓人可以一目了然地看到故事的發布者以及發布時間。

視覺饗宴

使用高品質的視覺效果來吸引讀者，抓住他們的注意力，並提供他們可以輕鬆快速閱讀的文字。主要使用高品質的影片和圖片，但在適當的地方新增一些動畫效果。

所有圖片和影片都應佔據整個螢幕，並在適當的地方盡量減少 Letterbox 效果的使用。

影片

影片對讀者來說非常引人入勝，絕對要在您的 Web Story 中盡可能多地加入影片。目標是影片長度少於 15 秒。如果您有較長的影片，請考慮將其分解成較小的片段。

Web Story 是以直向模式消費的，因此請記住以下事項

• 盡可能使用高階行動裝置拍攝影片。
• 以 720p 旋轉拍攝 (1280h x 720w)。
• 以至少每秒 24 幀的速度拍攝。

確保您的內容是可存取的。調整影片大小，以便在底部為文字和字幕留出空間。並非所有讀者都能夠或想要聽到影片內容。

圖片

使用全螢幕、直向圖片，並具有良好的解析度 (720w x 1280h)。

避免橫向裁切的照片。

用心裁切

將重點放在重要的事物上。裁切掉不必要或分散注意力的元素，並確保照片的關鍵主題清晰且完整。請記住，頂部和底部可能會在某些裝置上被裁切，因此請相應地進行測試。

執行	請勿執行
此圖片經過裁切以與頁面內容對齊，並支援主要想法。	使用此裁切，不清楚讀者的焦點應該放在哪裡，以及圖片想要傳達什麼想法。

文字

確保文字可讀。24 號字型應為使用的最小尺寸，但請盡可能使其更大且更清晰。將文字顏色與故事頁面背景或圖片形成對比。請勿包含僅有文字的圖片或影片。

執行	請勿執行
高對比使文字易於看見。	由於對比度差，您的文字和圖片可能會混在一起，導致文字難以閱讀，故事也更難以理解。
醒目提示文字可以使文字突出，並有助於讓您的讀者專注於您的故事。	在繁忙的圖片上使用淺色文字會使文字難以閱讀。

少量文字

文字應該少量呈現，而不是大量。盡量將每頁的文字保持在 200 個字元或以下。

將詳細資訊視為成分列表，使其可用，但僅在使用者要求時才提供。在頁面附件中包含長篇文字內容。頁面附件會告知使用者有更多內容可讀。他們可以在裝置上向上滑動 (如果感興趣)。

包含長於句子的文字內容的頁面可能是不可避免的。盡量不要讓這些頁面佔據故事總頁面的 10% 以上。

執行	請勿執行
盡量將文字保持在必要的內容即可。變更字體大小和樣式以打破文字塊，可以提高可掃描性。	像這樣一大段文字可能難以閱讀，並可能降低與您的故事互動的意願。

動畫

當動畫有目的性地完成時，例如為靜態圖片新增動態效果，動畫會很吸引人。您可以使用飛入、旋轉或淡入效果來為圖片和素材製作動畫。

執行	請勿執行
此範例中的動態效果有助於支援主要想法，並為頁面新增動態元素。	此靜態頁面功能齊全，但可能錯失了更吸引讀者的機會。

但是，請謹慎使用，因為如果過度使用動畫，動畫可能會變得令人厭惡。避免新增過多的單一風味，並謹慎地使用動畫來調味。

時機就是一切

頁面應快速進入其完成狀態 - 動畫不應阻止使用者輕觸以進入下一頁 - 但也不要太快！重要的是要提供風格和持續時間的正確組合。例如，簡單的動畫應少於 500 毫秒，但背景圖片上的平移動畫應持續更長時間。

考慮在動態效果方面發揮創意。將多個物件製作成序列動畫，而不是讓它們在單一效果中一起移動。元素可以具有不同的效果和持續時間，以實現協調一致的動畫。

完美搭配

將您的動畫風格與您故事的美學相結合。使用可用的 Web Story 動畫程式庫來幫助您找到適合您的風格和強度，而不會分散內容的注意力。

渴望更多

允許使用者透過嵌入第三方內容、附加額外資訊和連結到新位置來進一步探索您的主題。

策略性嵌入

嵌入在相關且呈現令人愉悅的情況下，可提供額外的維度。在嵌入旁邊包含相關內容，使其成為故事的整合部分。您可能需要為您的嵌入啟用互動性。

執行	請勿執行
此頁面上的嵌入與版面的其餘部分整合良好。標題、日期和背景圖形有助於增強視覺效果。	將嵌入單獨放在頁面上看起來未完成，並且與完整的故事整合不良。

附加額外內容

透過將相關內容放在附件中，使您的 Web Story 精簡化。這樣一來，如果讀者想要了解更多關於您的故事的資訊，他們可以深入挖掘。當額外內容附加到相關頁面時，讀者可以更輕鬆地瀏覽故事。

附件非常適合用於長篇文字塊，或者如果您的故事包含重點影片，您可以將完整影片作為附件包含在內。

連結到新位置

您可以在 Web Story 頁面的任何位置新增連結。輕觸連結會顯示工具提示。這會告訴使用者連結的去向，並允許他們在離開故事之前確認操作。

執行	請勿執行
此頁面上的連結已清楚標示，並被相關內容包圍。它們不會干擾故事導覽。	此頁面上的連結完全阻擋了導覽。讀者將無法輕鬆前往上一頁或下一頁。

策略性地思考連結外觀的大小、位置和頻率。過多的可輕觸元素會使導覽複雜化並讓讀者感到沮喪。

編碼或建立

Web Story 可以從頭開始手動編碼，也可以使用建立工具來建構。

如果您要手動編碼 Web Story，您將使用 AMP 架構從頭開始建構它們。請按照建立您的第一個 Web Story 開始使用。建立 Web Story 後，請確保它是有效的 AMP。您可以在 AMP 驗證工具中測試您的 Web Story。請閱讀Web Story 技術詳細資訊以取得更多資訊。

• 作者： @CrystalOnScript