設計與製作 iOS Launch Image

Bing
4 min readDec 7, 2015

--

因為使用者會在 App 之間頻繁的切換,為了讓使用者在切換的過程中感到流暢,因此 launch image 的設計重點,在於設計一個與 App 啟動後的第一頁,相似背景畫面。目的是在於降低使用者的等待 App 啟動的感受,與避免讓使用者有「閃一下」的不流暢體驗。以下是 HIG 的範例。請大家點點看自己的 「天氣」與「設定」App ,就可以看到官方設定 launch image 的正確設計作法。

天氣 App 的 launch image
設定 App 的 launch image

錯誤設計

  1. 在 launch image 凸顯品牌,此舉容易導致畫面「閃一下」。但我了解 launch 不放 logo,會導致公司上上下下有多麼不踏實,所以以下還是依照放置 logo 的方式做說明。
  2. 在 launch image 使用「文字」,因為 launch image 為靜態畫面,因此無法支援多國語系。

Launch 畫面 於 Xcode 中,有 2 種製作的方法:

  • 使用 Launch Image:靜態圖片來製作
  • 使用 Launch File:XIB 或 Storyboard 來製作
    是目前的預設作法,也是比較推薦的作法,因為可以使用 Autolayout 跟 Size Classes 來適應不同尺寸的裝置,也無需再針對不同尺寸的手機去製作肥大的圖片。

Launch Image 靜態圖片

製作方法是依照 App 支援的規格去產出對應尺寸的圖片,並且只能使用 .png 的圖檔

Sketch launch 範例

尺寸

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 來製作,所以在設計時候,就依照一般畫面的設計方式來做就好了,有圖切圖,有字放字。

在 Sketch 中切出所需要的圖

於 Xcode 中的製作方法

新增一個 Launch Screen 的檔案,例:MyLaunchScreen

於 MyLaunchScreen.storyboard 中,用 AutoLayout 將畫面建立起來

於 App Icons and Launch Images 中,設定 Launch Screen File 為 MyLaunchScreen

--

--