建立成功的 Web Story 最佳實務
重要事項：本說明文件不適用於您目前選取的格式 廣告！
Web Stories 是一種沉浸式、可輕觸且容易分享的說故事格式。Web Stories 是使用 AMP 架構的子集所建構。Web Stories 為建立者和發布商提供機會，以全螢幕、視覺豐富且引人入勝的行動優先體驗來組織內容，以供使用者使用。
Web Stories 輕巧易讀，讀者喜歡在零碎時間快速瀏覽。等待地鐵或購買咖啡時，是瀏覽精簡內容的好時機。請遵循這些建立令人滿意且輕巧的 Web Story 最佳實務，確保每一口都能吸引目光並帶來喜悅。
一覽
建立令人滿意且輕巧的 Web Story 的主要重點
- 講述完整且有趣的故事。
- 使用高品質的圖像和引人注目的標題，最大化封面頁面的影響力。
- 透過符合並填滿使用者螢幕的影片和圖片，使其更具視覺效果。
- 您可以透過較少的文字傳達大量資訊，尤其是在使用視覺圖像時。目標是讓每頁文字保持在 10 個字以下。
- 確保您的視覺內容易於存取 - 為圖片提供適當的替代文字。
- 使用影片時，較短的影片效果最佳，因此請盡量控制在 15 秒以內。
- 有些人以及某些情況需要無聲音觀看。新增影片字幕，讓內容更具包容性。
- 讓讀者有內容可以輕觸瀏覽。平均長度為 10 到 20 頁，讓大多數作者都能講述良好的故事。
- 請勿過度使用動畫或嵌入內容，並注意轉場時機。
了解您的敘事方式
規劃故事簡介、建立情節並逐步建構完整的敘事。一旦您知道自己想說什麼，就將其分解。每個 Web Story 頁面都應傳達一個與其他頁面協調一致的單一想法。
精緻且豐富的內容
每個 Web Story 必須至少有 4 頁，理想情況下少於 30 頁。Web Stories 需要清楚地講述且易於閱讀。如果您的敘事需要，可以超過 30 頁。
選擇我！包裝
您的封面頁面是 Web Story 的包裝。這是瀏覽者首先看到的內容，如果他們沒有打開它，也是他們唯一看到的內容。確保它具有吸引力！良好的封面頁面有兩個要素：引人注目的圖像和簡短且令人難忘的標題。
圖像
使用符合全螢幕的高品質直向圖片或影片。加入網站圖示和標誌，讓您的粉絲知道這是您的品牌。
標題
保持標題清晰簡潔，理想情況下少於 10 個字或少於 40 個字元。加入作者和發布商名稱，如果故事具有時間敏感性，請加入發布日期。
品牌與日期
讀者需要知道誰發布了 Web Story 以及發布時間。在封面頁面上加入品牌歸屬和發布日期。這有助於培養信任感，如果使用者喜歡您的內容，也能培養忠誠度。這個 CNN 關於義大利旅遊的 Web Story 讓使用者可以一目瞭然地看到誰發布了這個故事以及故事有多新。
視覺饗宴
使用高品質的視覺效果吸引讀者，抓住他們的注意力，並使用他們可以輕鬆快速閱讀的文字。主要使用高品質的影片和圖片，但在適當的地方加入一些動畫效果。
所有圖片和影片都應佔據整個螢幕，並在適當的地方盡量減少使用信箱效果。
影片
影片對讀者來說非常吸引人，請務必在您的 Web Story 中加入盡可能多的影片。目標是影片長度少於 15 秒。如果您有較長的影片，請考慮將其分成較小的片段。
Web Stories 是以直向模式瀏覽，因此請記住以下事項
- 盡可能使用高階行動裝置拍攝影片。
- 以 720p 旋轉 (1280h x 720w) 拍攝。
- 以至少每秒 24 幀拍攝。
| 執行 | 請勿執行 |
|---|---|
| | |
| 這個全出血影片有助於讀者專注於單一關鍵主題。 | 這個橫向影片缺乏沉浸感，可能會分散讀者的注意力。 |
確保您的內容易於存取。調整影片大小，以便在底部為文字和字幕留出空間。並非所有讀者都能夠或想要聽到影片內容。
| 執行 | 請勿執行 |
|---|---|
| | |
| 即使在無法收聽音訊的情況下，字幕也能幫助您的觀眾保持參與度。 | 如果沒有字幕，您的觀眾需要能夠收聽音訊才能了解您的故事。這可能會限制誰會參與您的內容以及他們何時能夠參與。 |
圖片
使用全螢幕、直向、高解析度圖片 (720w x 1280h)。
避免橫向裁剪照片。
用心裁切
將重點放在重要的事物上。裁剪掉不必要或分散注意力的元素，並確保照片的關鍵主題清晰且完整。請記住，頂部和底部可能會在某些裝置上被裁剪掉，因此請相應地進行測試。
| 執行 | 請勿執行 |
|---|---|
| 此圖片經過裁剪以符合頁面內容，並支援主要想法。 | 使用此裁剪方式，不清楚讀者的焦點應該放在哪裡，也不清楚圖片想要傳達什麼想法。 |
文字
確保文字可讀。24 號字型應為使用的最小尺寸，但請盡可能使其更大更清晰。將文字顏色與故事頁面背景或圖片形成對比。請勿加入僅包含文字的圖片或影片。
| 執行 | 請勿執行 |
|---|---|
| 高對比度使文字易於閱讀。 | 對比度不佳時，您的文字和圖片可能會混在一起，導致文字難以閱讀，故事也難以理解。 |
| 醒目標示文字可以使文字突出，並有助於讓讀者專注於您的故事。 | 在繁忙的圖片上使用淺色文字會使文字難以閱讀。 |
精簡文字
文字應以精簡方式呈現，而不是像用餐一樣。盡量將每頁文字保持在 200 個字元或更少。
像成分列表一樣處理詳細資訊，使其可用，但僅在使用者要求時才提供。在頁面附件中加入長篇文字內容。頁面附件會告知使用者還有更多內容可供閱讀。有興趣的使用者可以在他們的裝置上向上滑動。
包含超過一句話的文字內容的頁面可能是不可避免的。盡量不要讓這些頁面佔據故事總頁面的 10% 以上。
| 執行 | 請勿執行 |
|---|---|
| 盡量讓文字保持在重點。改變字體大小和樣式以分解文字塊可以提高掃描性。 | 像這樣的大片文字牆可能難以閱讀，並可能降低使用者對您的故事的參與度。 |
動畫
當動畫有目的性地完成時，例如為靜態圖片新增動態效果，動畫就會變得吸引人。您可以使用飛入、旋轉或淡入效果為圖片和素材製作動畫。
| 執行 | 請勿執行 |
|---|---|
| | |
| 此範例中的動態效果有助於支援主要想法，並為頁面新增動態元素。 | 此靜態頁面功能齊全，但可能錯失了更吸引讀者的機會。 |
但是，請謹慎使用，因為如果過度使用動畫可能會變得令人反感。避免加入太多單一風格，並謹慎地使用動畫來調味。
時機就是一切
頁面應快速進入其完成狀態 - 動畫不應阻止使用者輕觸以進入下一頁 - 但也不要太快！重要的是要提供風格和持續時間的正確組合。例如，簡單的動畫應少於 500 毫秒，但背景圖片上的平移動畫應持續更長時間。
| 執行 | 請勿執行 |
|---|---|
| | |
| 背景圖片上的 Ken Burns 效果非常細微，使體驗更具沉浸感。它與文字覆蓋層共同創造了恰到好處的平衡。 | 在這裡，Ken Burns 效果太快了。動態效果分散注意力，讓人難以專注於標題。 |
考慮發揮創意運用動態效果。將多個物件製作成序列動畫，而不是讓它們以單一效果一起移動。元素可以具有不同的效果和持續時間，共同實現協調一致的動畫。
| 執行 | 請勿執行 |
|---|---|
| | |
| 分別為這些物件製作動畫，使此視覺效果更具趣味性和吸引力。它也有助於使每個項目更清晰地突出顯示。 | 像這樣對一個大區塊新增快速移動效果並不能增加理解，而且可能會分散注意力。 |
完美搭配
將您的動畫風格與您故事的美學相結合。使用可用的 Web Story 動畫程式庫來幫助您找到適合您的風格和強度，而不會分散內容的注意力。
| 執行 | 請勿執行 |
|---|---|
| | |
| 將標題向上滑動並淡入副標題，引導讀者按照正確的順序閱讀頁面內容。 | 此旋轉動畫並未為故事新增價值。相反地，它會產生視覺雜訊，並可能分散讀者的注意力。 |
渴望更多
允許使用者透過嵌入第三方內容、附加其他資訊和連結到新位置來進一步探索您的主題。
策略性嵌入
嵌入內容在相關且呈現方式令人愉悅的情況下，可提供額外的維度。在嵌入內容旁邊加入相關內容，使其成為故事的整合部分。您可能需要為您的嵌入內容啟用互動性。
| 執行 | 請勿執行 |
|---|---|
| 此頁面上的嵌入內容與版面的其餘部分完美整合。標題、日期和背景圖形有助於增強視覺效果。 | 將嵌入內容單獨放在頁面上看起來不完整，並且無法與完整的故事良好整合。 |
附加其他內容
將相關內容放在附件中，以簡化您的 Web Story。這樣一來，如果讀者想深入了解您的故事，就可以深入挖掘。當其他內容附加到相關頁面時，讀者可以更輕鬆地瀏覽故事。
| 執行 | 請勿執行 |
|---|---|
| | |
| 此頁面上的嵌入內容與版面的其餘部分完美整合。標題、日期和背景圖形有助於增強視覺效果。 | 將嵌入內容單獨放在頁面上看起來不完整，並且無法與完整的故事良好整合。 |
附件非常適合用於長篇文字內容，或者如果您的故事包含重點影片，您可以將完整影片作為附件加入。
| 執行 |
|---|
| |
| 重點影片可以是 AMP 故事中的有用元素。您可以將完整長度的影片作為附件加入，讓讀者可以選擇更深入地探索您的內容。 |
連結至新位置
您可以在 Web Story 頁面的任何位置加入連結。輕觸連結會顯示工具提示。這會告訴使用者連結的去向，並讓他們在離開故事之前確認操作。
| 執行 | 請勿執行 |
|---|---|
| 此頁面上的連結已清楚標示，並被相關內容包圍。它們不會干擾故事導覽。 | 此頁面上的連結完全阻擋了導覽。讀者將無法輕鬆前往上一頁或下一頁。 |
策略性地思考連結外觀的大小、位置和頻率。過多的可輕觸元素可能會使導覽變得複雜，並讓讀者感到沮喪。
編碼或建立
Web Stories 可以從頭開始手動編碼，或使用建立工具建構。
如果您要手動編碼 Web Story，您將使用 AMP 架構從頭開始建構它們。請按照建立您的第一個 Web Story開始使用。建立 Web Story 後，請確保它是有效的 AMP。您可以在 AMP 驗證工具中測試您的 Web Story。請閱讀Web Story 技術詳細資訊以取得更多資訊。
-