建立成功的 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 讓使用者一目瞭然地看到誰發布了故事以及故事的最新程度。

視覺饗宴

運用能吸引他們注意力的優質視覺效果和他們可以輕鬆快速閱讀的文字來吸引讀者。主要使用高品質的影片和圖片，但在適當的地方加入一些動畫效果。

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

影片

影片對讀者來說非常引人入勝，請務必在您的 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