上架圖全攻略:怦然心動的一眼瞬間

佛要金裝,人要衣裝,APP 也要很會包裝

Grass Tsao
Jan 11 · 11 min read

在著手設計上架圖時其實滿迷惘的,不同類型的圖以及不同平台的規範資訊都散落在不同地方,所以希望藉著這篇筆記幫助整理,同時也給予同樣沒有頭緒的設計師一個參考。


在這個複雜華麗的世界,新款的手機一直出一直出,神秘的螢幕比例也不斷出現,再加上科技的進步,光是 Apple,聽說從前(到底是多久)的設計師都要很貼心的出完各式各樣的尺寸分別上傳 — 源自同事A曾經的崩潰血淚,現在則是只要至少上傳 5.5 及5.6 英寸即可上架。

本文將針對手機的「上架圖重要性」 與「上架圖規格」來做說明,以下為大綱:

  1. 上架圖為何重要
  2. 上架圖規格
    1 ) Apple App Store
    2 ) Google Play
  3. 做出最有吸引力的上架圖
  4. 小結

1. 上架圖為何重要

簡單做個比喻,用戶在搜尋 App 時的情況,就有點像在尋覓相親對象(雖然好像已經不是相親的年代了,但使用交友 App 也是類似的概念吧),想找另一半的人必定會先看對方的照片跟簡介,這就是所謂的「第一印象」,若是第一印象就覺得不喜歡、沒興趣,那也不可能會有任何後續甚至更近一步的發展。

We discovered that the average time people spend on a store listing is 7 seconds. — Peter Fodor, Why 7 seconds could make or break your mobile app

平均 7 秒鐘,使用者會決定是否要下載這個 App

當潛在用戶進入應用程式商店頁時,上架圖就是他們對每個產品的第一印象。想想我們自己對新 App 是否下載的抉擇,也有極大比例是根據上架圖的內容與氛圍來決定的,而上架圖通常會包含以下幾個關鍵且影響用戶抉擇的因素:畫面的視覺觸動、App 的主要特點、與競爭者相較下可見的優勢,以及看似良好的使用者體驗 — 像是 App 介面結構易懂且符合預期、UI 設計看起來舒適好理解等。

Screenshots are a mirror of your app’s user stories and are reflective of its user experience. — Girish Rawat, How to Design Scannable App Screenshots

上架圖是 App內容的鏡像,會反映產品的用戶體驗


2. 上架圖規格

1 ) Apple App Store

. 螢幕截圖 — Screenshots
. App 預覽 — App Previews
. 主題圖 — Promotional Artwork
  • 螢幕截圖(必填)

咦?我需要針對每種機型都上傳一組圖片嗎?

App Store 上架圖欄位

以 iPhone App 來說,若 App 在不同尺寸裝置的內容均無差異,那麼在 App Store 上架時,必須要至少上傳一張 5.5 英寸(iPhone 6s/7/8 Plus)以及 一張 6.5 英寸(iPhone XS Max)的螢幕截圖,每種尺寸最多可上傳十張。 至於其他機型,Apple 會用這組上架圖貼心幫你 Resize,設計師就不需要額外花力氣處理。

App Store 上架圖規範
*備註:
6.5 英吋(iPhone XS Max)的螢幕截圖現在已變為必須上傳。Apple 一樣會幫你調整成符合 iPhone XR/XS/X 的上架圖。它與 iPhone 6/7/8 上架圖除了有圖片比例的差異外,還會有較大的圓角,如下圖所示。
  • App 預覽(選填)

什麼是App預覽?原來跟螢幕截圖不一樣嗎?

App Store — App Previews

App 預覽其實就是指影片,尺寸規範跟螢幕截圖是一樣的,會預設放在螢幕截圖的前面,並於使用者滑到上架圖範圍時自動播放,最多可上傳三個,每段最短 15 秒,最長 30 秒。(更詳細可參考:App 預覽規範

需注意的是若有上傳 App 預覽,必須再額外選擇一張海報幀(Poster Frame)作為尚未自動播放前的預覽畫面。

延伸閱讀 - Show More with App Previews
  • 主題圖(只有被精選的 App 能夠放)

不是只有 Google Play 要準備主題圖?App Store 也有嗎?

App 介紹頁 / 主打 App ( App Store — Promotional Artwork )

有別於 Google 的 Feature Graphic 是每個 App 都可以自由上傳的,在 App Store 中,只有被 Apple 精挑細選到的產品才有機會放上 Promotional Artwork,也因此大家看到有主題圖的 App 都會覺得它們帶有光環就興奮的下載了吧我想。

除了上圖所示位於 App 頁面頂端以及搜尋時會出現的圖外,其他還有位於「Today」Tab 中,以及開發人員頁面等不同的 Artwork 圖片。

開發者頁面 / Today ( App Store — Promotional Artwork )

其製作方式 Apple 都有明確的規範,並且每種都有提供模板 PSD 檔可以下載使用,所以也不用太擔心這麼多種該如何準備 :) 當然,也是要被選上才有機會煩惱。

延伸閱讀 - A Closer Look at iOS 11 ‘Product Page Artwork’ — Apple’s Answer to the Feature Graphic

2 ) Google Play

. 螢幕擷取畫面 — Screenshots
. 宣傳影片 — Promo Video
. 主題圖片 — Feature Graphic
Google Play 上架圖欄位 (詳情可參考官方規範
  • 螢幕擷取畫面 (必填)
商店頁 / 編輯精選 ( Google Play — Screenshots )

Google Play 相較之下有較高的自由度,並沒有非常精準的尺寸規定,只需符合以下幾項條件:

  1. 尺寸範圍:最小 320 px / 最大 3840 px
  2. 長邊的尺寸不可超過短邊的兩倍
  3. 橫向圖片需符合長寬比 16:9
  4. 格式:JPEG 或 24 位元 PNG (無 alpha 透明層)

數量上則是至少需上傳 2 張,最多 8 張。但若你是遊戲類型 App,且希望遊戲有機會得到推薦,則需要至少 3 張,因為 Play 商店遊戲類的編輯精選版面會需要。

  • 影片 (要顯示主題圖片時為必填)
Promo Video

宣傳影片可自由選擇是否加入,但限定只可使用 YouTube 的連結,同時影片需符合以下幾項規範:

  1. 需使用完整的 YouTube 影片網址,不可使用簡短連結或 YouTube 播放清單、頻道的網址
  2. 需關閉影片營利功能,以免影片前面或影片中出現廣告
  3. 不可使用有觀看年齡限制的影片
  • 主題圖片(必填)
Feature Graphic

尺寸:1024 x 500 px(JPEG 或 24 位元 PNG ,PNG無 alpha 透明層)

主題圖片目前雖然是必填,但若是沒有同時放上宣傳影片連結,就不會顯示在 Play 商店中 — 與公司的工程師大大們實際測試了一輪。

反過來說,若是 App 的商店頁面已加入宣傳影片連結,主題圖片就會作為影片播放前的預覽畫面,並被放上播放按鈕,類似App Store 的 Poster Frame。只是神奇的事情是,到了 Google Play 的網頁上,主題圖片與影片會被分開來放,影片則會跟其他螢幕擷取畫面放在一起。

延伸閱讀 - 設計優質的主題圖片
官方規範 - 圖片資源、螢幕擷取畫面和影片

3. 做出最有吸引力的上架圖

1 ) 上架圖內容規劃

2 ) 重點的安排順序

以 App Store 來說,在不滑動的狀況下,使用者在 App 介紹頁只能看到大約 1.5 個畫面,在搜尋結果頁則是能看到 3 個畫面。文章中提及多個數據,其中這兩個是我第一眼看到有稍微感到驚訝的數據:

— 只有 4% 的用戶會去點擊上架圖以放大觀看

— 只有 9% 的用戶會滑動以觀看後面幾張上架圖

但再多思考幾秒,其實發現這個數據是很合理的,光觀察自己在搜尋、下載的過程,其實就會發現真的幾乎沒點開圖片過,也只有極少數的 App 上架圖會讓人想滑動。而更多的時候,我會傾向在看到幾個主要畫面與重點的瞬間,浮現「我可能需要」、「好像不錯」、「應該滿有趣」的感受,就先下載並離開頁面。

由此可見,最前面的 2 張上架圖扮演著極為關鍵的角色。

3 ) 設計呈現

這邊建議是一張圖只放一個重點,並將它濃縮在一句話,或是只用兩到三個單詞就完成說明。

先前在公司專案中實際要設計上架圖的時候,我曾參考到一篇文(忘記存下來了…),文中有個有趣的想法是:可以嘗試將 App 截圖放大到跨圖,同時運用立體感增加角度的設計方式來做呈現。這種手法相信大家應該都不陌生,畢竟 App Store 上也是滿盛行的,它的好處是除了讓圖看起來更炫、吸引目光外,也能夠讓 App 截圖放得更大且清楚,同時不會因為將介面圖放大而看不見全貌。

但老實說,我其實本來滿疑惑這樣的做法是否真的具有實際效益,如果用戶不去滑動,不就會讓部分畫面被擋住嗎?那不是反而無法傳達完整內容嗎?但我忽略了人類是一種充滿好奇心的動物,對於模糊隱晦的東西,反而會有更強烈的慾望想去探究全貌。至於實際上是不是真的如此,還滿值得研究與思考的,我自己也是很有興趣,若後續有看到類似文章再貼上來分享。

4 ) 持續優化更新

若是時程充裕,也可以嘗試做出不同版本,並透過 A/B Test 進行測試觀察,以了解市場真正的想法與需求,畢竟實際上用戶是如何思考、如何選擇並沒有一套標準公式,實際嘗試並研究數據,才是最有效的。

延伸閱讀 -【ASO指南】5 步驟教你如何做螢幕截圖優化!

4. 小結

  • 不論是哪個上架平台,其規範在未來都會持續更新,實際執行前還是要上到相對的官方頁面去確認與了解。
  • 上架圖設計重點:
1. 在第 1~2 張上架圖即展示 App 的核心價值
2. 放大文字並精簡句子 - 1 張圖 1 個特色
3. 凸顯重點 UI 的畫面或元件 - 可以嘗試跨圖的設計
4. 持續的優化更新

市場會持續更新,今天的熱門到了明天也許就變了,我們只能讓自己保持在最新的地方,並時時思考、檢討如何讓產品更符合需求,希望我們都能夠在這個瞬息萬變的數位領域裡維持著熱情與理想。

我是果思設計的 UI 設計師Grass,我們專注在 App 設計與 App 開發,希望文章對各位有幫助!非常期待在留言區與大家討論、吸收更多觀點:)

Goons

各種新鮮與心酸的觀點,都記錄在這裡

Thanks to 吳致賢(Jhih-Sian Wu) and Ceel Wang

Grass Tsao

Written by

UI Designer

Goons

Goons

各種新鮮與心酸的觀點,都記錄在這裡

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade