UI/UX：APP上架圖與 APP Icon 實作筆記

產品上線前的最後一哩路

這篇文章主要紀錄兩個部分

一、ios、android 上架圖規範

二、APP Icon 尺寸輸出 (如何快速出圖給工程師使用)

設計上架圖

我認為上架圖就像是 APP 的宣傳海報，用戶可以透過截圖畫面初步了解 APP 所提供的內容，進而判斷是否要下載來使用。

在規劃上架圖，我會依據以下幾個重點來做設計

1. 展示產品優勢
2. 說明產品提供的服務
3. 文案精簡

使用 Apple App Store / Google Play 商城，在搜尋 App 時，截圖畫面能閱讀的範圍並不大，所以文案盡量精簡，不需太複雜，提高可讀性才能達到較好的宣傳效果。

ios 截圖示意

上架圖規範

1）Apple App Store：

1. 規格：6.5 吋及 5.5 吋
2. 格式：jpg、png

APP Store 頁面截圖

以下「截圖規格」圖表中

iPhone8 以上的行動裝置，共同截圖尺寸為 6.5吋（黃色框）

iPhone8 以下的行動裝置，共同截圖尺寸為 5.5吋（紅色框）

APP Store 上架圖規格

小結

ios 輸出以下兩種尺寸就可以啦！

5.5吋：1242 X 2208 px
6.5吋：1242 X 2688 px

2）Google Play：

Google Play 上傳圖片規格寫得非常詳細，這邊值得一提的是，雖然尺寸範圍很彈性，但其實是有比例限制的唷！

1. 尺寸範圍：邊長最短 320 px；邊長最長 3840 px
2. 長寬比例：2 比 1
3. 主題圖片尺寸：1024 X 500 px (當被選為推薦時，會用到的圖片)
4. 格式：jpg、png (無 alpha 透明層)

Google Play 標示的很詳細

Google Play 圖片比例 2:1

製作APP Icon

使用工具轉換成 App Icon 之前，要先準備

1. Icon規格：1024 X 1024px
2. 格式：jpg、png (無 alpha 透明層)
3. 使用這個網站：https://makeappicon.com/

將製作好的 Icon 放進烤麵包機裡面，ios、android 的 Icon 就製作完成啦！

make app icon

製作成果

參考文章：https://medium.com/@Wei_Wei/ios-app-icons-%E5%BF%AB%E9%80%9F%E5%81%9A%E5%87%BA%E5%90%84%E7%A8%AE%E5%A4%A7%E5%B0%8F%E7%9A%84-icon-2018-6107a3a7d4e