本章我們會介紹如何在 Xcode 設定 App Icon。App Icon 是代表 App 整個形象,也是使用者在 App Store 看到 App 的第一個印象。讓我們馬上開始吧!
SwiftUI Coffee Shop
下載 App Icon
我們已經準備好一組 App Icon,請先下載。這個圖示是在 freepix 下載的。這網站提供很多免費的圖片和圖示。你可以在上面試著找你喜歡的圖示。
在 Xcode 設定 App Icon
在 Xcode 左邊檔案列表,選擇 Assets.xcassets -> AppIcon,你會看到很多的尺寸,這是因為 iPhone 有不同的解析度。為了要在所有的 iPhone 上有最佳的顯示,就必須要提供不同解析度的圖示。
左上角第一個框框的下方顯示 20pt,就是指 20 x 20 pixel 的圖示。打開剛剛下載的 App Icon,可以找到 Icon-20.png。所以檔案名稱已經標明它是哪個大小。然後如下圖的方式,將 Icon-20.png 設定給左上角第一個圖示。
根據尺寸的要求,設定給對應的圖示。最後你會像下圖一樣。
在模擬器上跑一下專案。你會看到模擬器桌面上的 CoffeeShop 的 App Icon 已經設定好了!
iOS App Icon 尺寸規則
你可以在 App Icon 找到 iOS App Icon 的尺寸列表。尺寸很多,自己做的話是很麻煩。好在網路上有很多網站可以幫你產生所有的尺寸的。剛剛下載的 App Icon,就是用 Icon Cutter 產生的。
結語
雖然設定 App Icon 很簡單,但是製作和決定好圖示倒是很困難。使用者第一眼看到 App 的就是 App Icon,所以它的重要性是不可忽視的。