上架圖全攻略：怦然心動的一眼瞬間
佛要金裝，人要衣裝，APP 也要很會包裝
在著手設計上架圖時其實滿迷惘的，不同類型的圖以及不同平台的規範資訊都散落在不同地方，所以希望藉著這篇筆記幫助整理，同時也給予同樣沒有頭緒的設計師一個參考。
在這個複雜華麗的世界，新款的手機一直出一直出，神秘的螢幕比例也不斷出現，再加上科技的進步，光是 Apple，聽說從前(到底是多久)的設計師都要很貼心的出完各式各樣的尺寸分別上傳 — 源自同事A曾經的崩潰血淚，現在則是只要至少上傳 6.7及 5.5 英寸即可上架。
本文將針對手機的「上架圖重要性」 與「上架圖規格」來做說明，以下為大綱：
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- 螢幕截圖（必填）
咦？我需要針對每種機型都上傳一組圖片嗎？
以 iPhone App 來說，若 App 在不同尺寸裝置的內容均無差異，那麼在 App Store 上架時，必須要至少上傳一張 5.5 英寸（iPhone 6s/7/8 Plus）以及 一張 6.5 or 6.7 英寸（瀏海、動態島機型）的螢幕截圖，每種尺寸最多可上傳十張。 至於其他機型，Apple 會用這組上架圖貼心幫你 Resize，設計師就不需要額外花力氣處理。
- App 預覽（選填）
什麼是App預覽？原來跟螢幕截圖不一樣嗎？
App 預覽其實就是指影片，尺寸規範跟螢幕截圖是一樣的，會預設放在螢幕截圖的前面，並於使用者滑到上架圖範圍時自動播放，最多可上傳三個，每段最短 15 秒，最長 30 秒。（更詳細可參考：App 預覽規範）
需注意的是若有上傳 App 預覽，必須再額外選擇一張海報幀（Poster Frame）作為尚未自動播放前的預覽畫面。
延伸閱讀 - Show More with App Previews- 主題圖（只有被精選的 App 能夠放）
不是只有 Google Play 要準備主題圖？App Store 也有嗎？
有別於 Google 的 Feature Graphic 是每個 App 都可以自由上傳的，在 App Store 中，只有被 Apple 精挑細選到的產品才有機會放上 Promotional Artwork，也因此大家看到有主題圖的 App 都會覺得它們帶有光環就興奮的下載了吧我想。
除了上圖所示位於 App 頁面頂端以及搜尋時會出現的圖外，其他還有位於「Today」Tab 中，以及開發人員頁面等不同的 Artwork 圖片。
其製作方式 Apple 都有明確的規範，並且每種都有提供模板 PSD 檔可以下載使用，所以也不用太擔心這麼多種該如何準備 :) 當然，也是要被選上才有機會煩惱。
延伸閱讀 - A Closer Look at iOS 11 ‘Product Page Artwork’ — Apple’s Answer to the Feature Graphic2 ) Google Play
. 螢幕擷取畫面 — Screenshots
. 宣傳影片 — Promo Video
. 主題圖片 — Feature Graphic
- 螢幕擷取畫面 （必填）
Google Play 相較之下有較高的自由度，並沒有非常精準的尺寸規定，只需符合以下幾項條件：
- 尺寸範圍：最小 320 px / 最大 3840 px
- 長邊的尺寸不可超過短邊的兩倍
- 橫向螢幕截圖的顯示比例應為 16:9 (最低 1920 x 1080 像素)；直向螢幕截圖則為 9:16 (最低 1080 x 1920 像素)
- 格式：JPEG 或 24 位元 PNG (無 alpha 透明層)
數量上，應用程式至少需上傳 4 張，最多 8 張。但若你是遊戲類型 App，則是至少 3 張。
- 影片 （要顯示主題圖片時為必填）
宣傳影片可自由選擇是否加入，但限定只可使用 YouTube 的連結，同時影片需符合以下幾項規範：
- 需使用完整的 YouTube 影片網址，不可使用簡短連結或 YouTube 播放清單、頻道的網址
- 需關閉影片營利功能，以免影片前面或影片中出現廣告
- 不可使用有觀看年齡限制的影片
- 主題圖片（必填）
尺寸：1024 x 500 px（JPEG 或 24 位元 PNG ，PNG無 alpha 透明層）
主題圖片目前雖然是必填，但若是沒有同時放上宣傳影片連結，就不會顯示在 Play 商店中 — 與公司的工程師大大們實際測試了一輪。
反過來說，若是 App 的商店頁面已加入宣傳影片連結，主題圖片就會作為影片播放前的預覽畫面，並被放上播放按鈕，類似App Store 的 Poster Frame。
延伸閱讀 - 設計優質的主題圖片
官方規範 - 圖片資源、螢幕擷取畫面和影片3. 做出最有吸引力的上架圖
講了很多規格上的東西，看到這裡應該都知道該如何打開 Sketch 並新增合適的Artboard 了吧。但重點來了，下一步具體該怎麼執行，畫面該如何設計才是真正的挑戰，這邊我將以個人閱讀下面這篇文章的重點筆記以及一些心得來說明。
1 ) 上架圖內容規劃
在開始設計上架圖前，我們都必須非常了解這個 App 的重點功能與核心目標是什麼，這是無庸置疑的，至於該如何定義則可從產品的 User Story 去思考，這邊我就不做更多解釋了，交給更專精的 UX Designer 們（逃）。
2 ) 重點的安排順序
以 App Store 來說，在不滑動的狀況下，使用者在 App 介紹頁只能看到大約 1.5 個畫面，在搜尋結果頁則是能看到 3 個畫面。文章中提及多個數據，其中這兩個是我第一眼看到有稍微感到驚訝的數據：
— 只有 4％ 的用戶會去點擊上架圖以放大觀看
— 只有 9％ 的用戶會滑動以觀看後面幾張上架圖
但再多思考幾秒，其實發現這個數據是很合理的，光觀察自己在搜尋、下載的過程，其實就會發現真的幾乎沒點開圖片過，也只有極少數的 App 上架圖會讓人想滑動。而更多的時候，我會傾向在看到幾個主要畫面與重點 的瞬間，浮現「我可能需要」、「好像不錯」、「應該滿有趣」的感受，就先下載並離開頁面。
由此可見，最前面的 2 張上架圖扮演著極為關鍵的角色。
3 ) 設計呈現
上述提到了只有 4％ 的用戶會去點擊上架圖以放大觀看，也就表示其實多數人都只看小小的縮圖而已，所以首先必須考量的就是文字的搭配使用，需注意盡量不要使用字級過小的文字，畢竟會讓人閱讀吃力的文字想必沒有人想看吧！
這邊建議是一張圖只放一個重點，並將它濃縮在一句話，或是只用兩到三個單詞就完成說明。
先前在公司專案中實際要設計上架圖的時候，我曾參考到一篇文（忘記存下來了…），文中有個有趣的想法是：可以嘗試將 App 截圖放大到跨圖，同時運用立體感增加角度的設計方式來做呈現。這種手法相信大家應該都不陌生，畢竟 App Store 上也是滿盛行的，它的好處是除了讓圖看起來更炫、吸引目光外，也能夠讓 App 截圖放得更大且清楚，同時不會因為將介面圖放大而看不見全貌。
但老實說，我其實本來滿疑惑這樣的做法是否真的具有實際效益，如果用戶不去滑動，不就會讓部分畫面被擋住嗎？那不是反而無法傳達完整內容嗎？但我忽略了人類是一種充滿好奇心的動物，對於模糊隱晦的東西，反而會有更強烈的慾望想去探究全貌。至於實際上是不是真的如此，還滿值得研究與思考的，我自己也是很有興趣，若後續有看到類似文章再貼上來分享。
4 ) 持續優化更新
以為設計完後任務就完成了嗎？想要讓產品更好必須不斷迭代優化，上架圖也是一樣道理，除了必須掌握設計趨勢，也必須持續關注 App Store 或 Google Play 等 App 上架平台的走向，以即時做出相對應的設計與行銷策略調整。
若是時程充裕，也可以嘗試做出不同版本，並透過 A/B Test 進行測試觀察，以了解市場真正的想法與需求，畢竟實際上用戶是如何思考、如何選擇並沒有一套標準公式，實際嘗試並研究數據，才是最有效的。
延伸閱讀 -【ASO指南】5 步驟教你如何做螢幕截圖優化！4. 小結
- 上架圖是潛在用戶對每個產品的第一印象，平均 7 秒鐘，使用者就會決定是否要下載這個 App。
- 不論是哪個上架平台，其規範在未來都會持續更新，實際執行前還是要上到相對的官方頁面去確認與了解。
- 上架圖設計重點：
1. 在第 1~2 張上架圖即展示 App 的核心價值
2. 放大文字並精簡句子 - 1 張圖 1 個特色
3. 凸顯重點 UI 的畫面或元件 - 可以嘗試跨圖的設計
4. 持續的優化更新市場會持續更新，今天的熱門到了明天也許就變了，我們只能讓自己保持在最新的地方，並時時思考、檢討如何讓產品更符合需求，希望我們都能夠在這個瞬息萬變的數位領域裡維持著熱情與理想。
我是果思設計的 UI 設計師Grass，我們專注在 App 設計與 App 開發，希望文章對各位有幫助！非常期待在留言區與大家討論、吸收更多觀點：）
