因為使用者會在 App 之間頻繁的切換,為了讓使用者在切換的過程中感到流暢,因此 launch image 的設計重點,在於設計一個與 App 啟動後的第一頁,相似背景畫面。目的是在於降低使用者的等待 App 啟動的感受,與避免讓使用者有「閃一下」的不流暢體驗。以下是 HIG 的範例。請大家點點看自己的 「天氣」與「設定」App ,就可以看到官方設定 launch image 的正確設計作法。
錯誤設計
- 在 launch image 凸顯品牌,此舉容易導致畫面「閃一下」。但我了解 launch 不放 logo,會導致公司上上下下有多麼不踏實,所以以下還是依照放置 logo 的方式做說明。
- 在 launch image 使用「文字」,因為 launch image 為靜態畫面,因此無法支援多國語系。
Launch 畫面 於 Xcode 中,有 2 種製作的方法:
- 使用 Launch Image:靜態圖片來製作
- 使用 Launch File:XIB 或 Storyboard 來製作
是目前的預設作法,也是比較推薦的作法,因為可以使用 Autolayout 跟 Size Classes 來適應不同尺寸的裝置,也無需再針對不同尺寸的手機去製作肥大的圖片。
Launch Image 靜態圖片
製作方法是依照 App 支援的規格去產出對應尺寸的圖片,並且只能使用 .png 的圖檔
尺寸
iPhone6S+:1242 x 2208 px
iPhone6S:750 x 1334 px
iPhone5S:640 x 1136 px
iPhone4S:640 x 960 px
於 Xcode 中的製作方法
1. 於 Assets.xcassets 新增一個 Launch Image,例:MyLaunchImage
2. 設定 App 所支援的裝置與版本
3. 並將對應的 Images 拖曳進去
3. 於 App Icons and Launch Images 中,設定 Launch Images Source 為 MyLaunchImage
Launch File( XIB 或 Storyboard)
因為是使用 XIB 或 Storyboard 來製作,所以在設計時候,就依照一般畫面的設計方式來做就好了,有圖切圖,有字放字。
於 Xcode 中的製作方法
新增一個 Launch Screen 的檔案,例:MyLaunchScreen
於 MyLaunchScreen.storyboard 中,用 AutoLayout 將畫面建立起來
於 App Icons and Launch Images 中,設定 Launch Screen File 為 MyLaunchScreen