如何做出吸引人的 AMP Story?

如何做出吸引人的 AMP Story?

AMP Story看似只要將圖文放到畫面上就好了,但其實為了讓故事具有吸引人的視覺效果,AMP有提供一些注意事項可以參考,讓故事更能易讀又沉溺其中,以下就其整理給大家。

讓故事完整並且獨立
在整段故事中盡量將訊息完整,不需要每讀一頁就再另外點擊看更多等等。(可以將這些點擊放於bookend較佳)

使用影片和動畫
透過影片或是動畫可以讓讀者增加理解力,不用害怕頻繁使用影片,可以穿插一些靜態頁面達到故事平衡。例如碧昂絲的amp story有達到這類的平衡

在故事中加入品牌和日期
在封面中就加入品牌和日期,讓觀看者增加信任感


引人入勝的視覺方式
利用滿版畫面較吸睛,並且搭配動畫和影片更能夠讓人投入故事中;
do-background
假如只是將圖片和文字平穩的放到畫面上,視覺上容易分散注意力,並且看起來也比較不那麼有趣。dont-background

文字
避免在一個視窗內放入過多文字量,AMP Story是一種視覺格式,請盡量使用圖像來講述故事,文字只是增強輔助的作用。

較佳做法
text-clear-do
讓文字有標題與詳述,並且具有可讀性
不佳作法
text-density-dont
過多文字造成難以閱讀,並可能會讓讀者失去興趣。




確保文字疊在圖上具有可讀性

較佳做法
readability1-do較佳做法-高度對比讓文字比較容易顯示
不佳作法
readability1-dont對比度較差,圖和文字沒有清楚分界,不易閱讀文字



若是遇到背景顏色較多的情況,也可以考慮把文字襯底加上底色,凸顯文字

較佳做法
readability2-do使用底色加強文字
不佳作法
readability2-dont由於背景顏色較多文字不明顯




圖片
使用滿版的圖片,例如9:16比例(建議最小尺寸是720x1280px),讓人有身歷其境的體驗

較佳做法
full-bleed-image-do完整的滿版圖片讓人有身臨其境體驗
不佳作法
full-bleed-image-do-not不佳作法-圖片太小,不適合在行動裝置上瀏覽,而且可能分散讀者注意力


注意剪裁圖片
若有需要移動或剪裁圖片,必須要保持主題清晰與聚焦,不要將重點給裁切掉

較佳做法
crop-images-do讓圖片主題呼應標題
不佳作法
crop-images-do-not人物被裁切,不清楚重點和主體是什麼,無法體會圖像要傳達的想法


為靜態的圖片增加一些動畫
透過增加動畫讓畫面更有動態性,可以使用飛入、旋轉或淡入淡出效果


影片

使用直式滿版16:9的方式讓吸引觀看,其理由和上述圖片類似,如果圖片太小的話可能會分散讀者注意力

較佳做法
影片-滿版滿版視覺效果較佳
不佳作法
影片-未滿版此種排法較容易分散注意力



使用字幕
如果你的影片裡有人正在講述、並且有聲音的話,建議加上字幕讓讀者更快速進入狀況,而且即使讀者關閉聲音也能知道其內容是什麼

影片-字幕較佳作法-加上字幕,即使使用者關閉聲音也能知道資訊
影片-無字幕不佳作法-使用者如果關閉聲音就不明白該片段的用意



動畫效果
注意使用的時機
動畫可以增強故事內容,並且具有視覺吸引力又容易理解,因此使用的時機和方式非常重要。例如一般物件的動畫應不到5秒,而背景動畫平移的話應該要持續更長的時間
較佳做法-讓背景圖片緩慢移動呼應主題,又不搶了文字風采
不佳作法-背景速度太快,容易讓人分心


選擇適合的動畫效果
AMP有預設了一些動畫效果庫(連結),可以從中挑選適合的動畫,注意動畫應該要與整個故事性質符合,不應該使用過度動畫,讓大家專注於故事,而非動畫。

較佳做法
動畫-一般較佳做法-文字緩慢浮出到定點
不佳作法
動畫-過度不佳作法-文字轉了一圈才定點,過度的動畫



使用多個物件動態組成一個畫面
動畫具有方向性和記憶點,可以讓多個物件接續的到達定點加強印象,並且傳達出訊息

較佳做法
動畫-分批聚焦物件單獨並依序的進入會讓視覺上覺得有趣並增加物件突出
不佳作法
動畫-一次集中快速的移動並不會增加理解,反而分散注意力



連結
在AMP Story裡面可以在任何位置增加連結,但是呈現的方式非常重要,不要出現太多個或是干擾到上下頁(左右側區域)讓讀者感到複雜與不曉得如何點擊。

較佳做法
links-do每個連結有清楚的圖文說明,並且不會干擾 AMP Story的上下頁點擊
不佳作法
links-dont連結過多過滿,讀者無法到達上頁或下頁



桌面版體驗
雖然AMP Story 主要是為了移動裝置設計,但有些人會使用電腦觀看,可以增加桌面版語法的橫向展延。

其他技術考量
背景顏色
應幫每個頁面設置背景顏色,以免如果圖片沒有順利下載了話也能順利閱讀文字。
可以使用一致主題的顏色或選擇圖片或影片的代表色,背景色和文字顏色應該不同,以利沒有圖像時也能順利閱讀

影片
增加下載前的備用圖片,通常會是影片的第一幕,圖片建議720X1280
poster = “images / kitten-playing.png”

語法範例
< amp-video autoplay loop
width = “720” height = “1280” layout = “responsive”
poster = “images / kitten-playing.png” >
< source src = “videos / kitten-playing.mp4”
type = “video / mp4“ /> </ amp-video >

• 影片連結為 source開頭
• 影片不能超過4MB
• MP4檔案格式佳(H.264佳)
• 如果影片太長,需要切分成多個頁面
• 如果用於第一頁(封面)的影片要避免使用太大的影片檔案


以上為AMP Story 製作時的注意事項,有一些是視覺概念技巧,可以依此來讓amp story來更吸引人。

圖片來源: https://amp.dev/
參考來源: Best practices for creating an AMP story

 

更多文章:

  1. AMP教學-AMP Email格式介紹
  2. Bento AMP正式釋出,AMP網頁的未來發展將會如何?
  3. AMP 2020 線上發表重點整理
  4. AMP教學-amp-img圖片
  5. AMP教學-amp-carousel 輪播