建立成功的 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 毫秒，但背景圖片上的平移動畫應持續更長時間。
| 執行 | 請勿執行 |
|---|---|
| | |
| 背景圖片上的 Ken Burns 效果很細微，使體驗更具沉浸感。它與文字疊加層共同創造了適當的平衡。 | 在這裡，Ken Burns 效果太快了。動態效果分散注意力，使人難以專注於標題。 |
考慮發揮創意來運用動態效果。將多個物件動畫化為一個序列，而不是讓它們以單一效果一起移動。元素可以具有不同的效果和持續時間，以實現協調一致的動畫。
| 執行 | 請勿執行 |
|---|---|
| | |
| 分別為這些物件製作動畫，使此視覺效果更有趣且更令人愉悅。它也有助於每個項目更清晰地突出顯示。 | 像這樣對一個大區塊新增快速動態效果並不會增加理解，並且可能會分散注意力。 |
完美搭配
將您的動畫風格與您故事的美學相結合。使用可用的 Web Story 動畫程式庫來幫助您找到適合您的風格和強度，而不會分散內容的注意力。
| 執行 | 請勿執行 |
|---|---|
| | |
| 將標題向上滑動並淡入副標題可引導讀者依正確順序閱讀頁面內容。 | 此旋轉動畫並未為故事增加價值。相反地，它會產生視覺雜訊，並可能分散讀者的注意力。 |
渴望更多
允許使用者透過嵌入第三方內容、附加額外資訊和連結到新位置來進一步探索您的主題。
策略性嵌入
嵌入在相關且呈現良好的情況下提供額外的維度。在嵌入旁邊包含相關內容，使其成為故事的整合部分。您可能需要為您的嵌入啟用互動性。
| 執行 | 請勿執行 |
|---|---|
| 此頁面上的嵌入與版面的其餘部分完美整合。標題、日期和背景圖形有助於增強視覺效果。 | 將嵌入單獨放在頁面上看起來未完成，並且無法與整個故事良好整合。 |
附加額外內容
透過將相關內容放在附件中，使您的 Web Story 更精簡。這樣，如果讀者想了解更多關於您的故事，他們可以深入研究。當額外內容附加到相關頁面時，讀者可以更輕鬆地瀏覽故事。
| 執行 | 請勿執行 |
|---|---|
| | |
| 此頁面上的嵌入與版面的其餘部分完美整合。標題、日期和背景圖形有助於增強視覺效果。 | 將嵌入單獨放在頁面上看起來未完成，並且無法與整個故事良好整合。 |
附件非常適合用於長篇文字區塊，或者如果您的故事包含精華影片，您可以將完整影片作為附件包含在內。
| 執行 |
|---|
| |
| 精華影片可以是 AMP 故事中的有用元素。您可以將完整長度的影片作為附件包含在內，讓讀者選擇深入了解您的內容。 |
連結至新位置
您可以在 Web Story 頁面的任何位置新增連結。點擊連結會出現工具提示。這會告訴使用者連結的去向，並允許他們在離開故事之前確認操作。
| 執行 | 請勿執行 |
|---|---|
| 此頁面上的連結已清楚標示，並被相關內容包圍。它們不會干擾故事導覽。 | 此頁面上的連結完全阻擋了導覽。讀者將無法輕鬆前往上一頁或下一頁。 |
策略性地思考連結出現的大小、位置和頻率。過多可點擊的元素可能會使導覽複雜化並讓讀者感到沮喪。
編碼或建立
Web Story 可以從頭開始手動編碼，也可以使用建立工具建構。
如果您要手動編碼 Web Story，您將使用 AMP 架構從頭開始建構它們。按照建立您的第一個 Web Story開始使用。建立 Web Story 後，請確保它是有效的 AMP。您可以在 AMP 驗證器中測試您的 Web Story。閱讀Web Story 技術詳細資訊以取得更多資訊。
-