Easy Design:如何設計一個好的啟動頁面

這篇文章是 iOS 應用程式 Easy Design 系列文章 中的一篇。

Types of Launch Image

Launch image 一般有兩種類型:HIG 推薦使用模擬應用程式首頁的 launch image,以減少用戶對啟動過程的注意力;但有些應用程式也使用了自己的 logo,並得到了 Apple 的默許。

模擬首頁的 launch images 優點在於可以從認知的層面上使用戶感覺應用程式的啟動過程非常迅速。

Path 和 Instagram 採用了模擬首頁的 launch images:

Default Launch Images

而使用 logo 的優點則是突出了品牌形象。但使用 logo 時需要注意顏色和形狀必須和應用程式的 icon 契合,這樣才會與應用程式啟動時 icon 放大的效果融合在一起形成連貫的視覺變化過程。

Twitter 和 Evernote 採用了基於 logo 的 launch images:

Branding Launch Images

Restrictions

設計 launch image 時會有一些限制。首先是不能包含任何可變元素,否則在啟動完成時會出現閃動給用戶帶來不適感;此外,考慮到 launch image 是靜態的(XIB 或 storyboard 目前也暫不支援文字本地化),任何需要本地化的文字也不應該加入 launch image(雖然可以通過一些特殊的方法將獨立出來的 launch images 做本地化處理,但不推薦)。

Compatibility

為應用程式加入 launch image 有兩種方式。圖片適用於所有版本的 iOS,而 XIB 或 storyboard 僅適用於 iOS 8 及後續版本的 iOS(iPhone 6、iPhone 6 Plus 及後續版本的 iPhone 默認搭載的作業系統)。

One More Thing

儘管 launch images 看起來很簡單,但也要額外考慮到一個元素——status bar。

Status bar 需要注意的有兩點:顏色和高度。

Status bar 的內容顏色有黑色和白色兩種(其它樣式僅在非常老舊的 iOS 版本中存在,不作討論);高度在後台進行通話、導航、錄音等作業時也會發生變化。

Status Bar States

如果不做對應的處理,就可能會導致非常難看的效果出現。例如 Google Plus:

Corrupted Launch Image of Google Plus

在顏色方面,應該選擇與 launch image 協調的 status bar style。在高度方面,有兩種處理方式:通過 auto layout 自適應 status bar 高度;或者,直接隱藏 status bar。


更多文章請見:iOS 應用程式 Easy Design 系列