啟動頁的作用很多，在緩解用戶等待焦慮的同時，也能夠通過啟動頁來奠定品牌的基調或者實現商業價值，其重要性可見一斑。

等待，無盡的等待——當我打開一個APP的時候，產品品宣、Slogan、第三方廣告冷冷得在我臉上胡亂地拍，網絡不太好的時候再加上旋轉的菊花碼，我要經過一個漫長的過程才能來到我想到的頁面。

唐納德·諾曼可說過，用戶是永遠不是錯的（攤手）。網絡問題，怪運營商；一連串的開屏頁，那必須得怪產品設計人員了。作為一名UI，我知道有時出於品宣和商業目標，我們不得不在PM與運營的淫威下屈服。但今天我還是要來聊聊，怎麼把開屏頁落地，做到存在且合理。

一、平臺規範下的啟動頁

iOS 與 Material Design 對於啟動頁（Launch Screen）存在的價值都保持一致的積極態度，都認為啟動頁可以讓用戶減少對於應用程序啟動加載過久的認知。說直白點，啟動頁存在的價值，其實就是應用程序啟動加載的一塊遮羞布。

雖然兩個平臺對於設置啟動頁的意見一致，但卻有著各自差異性的設計指導準則和實施標準。

首先，iOS在規範的迭代中從來沒有改變過“以用戶體驗為核心”的初衷，時至今日 iOS 也依舊認為啟動頁應該設計為類似應用程序打開後第一屏的屏幕骨架，這樣不容易引人註意，看上去就像一啟動應用程序就已經加載出了應用框架，剩下的時間只是在請求服務器數據，給人一種應用程序打開很快的感覺。

而MD比較與時俱進，除了和iOS一樣，指導設計者可以用第一屏骨架作為啟動頁方案之外，還提供了為推廣品牌而做品牌曝光用途的第二方案。

曾經有許多應用程序都是按照iOS指定規範來落地啟動頁的（國外軟件居多），類似Instagram、Facebook，但現在也都已經變成了品牌曝光。但iOS內置的應用程序，還是保持著初心。

其次，對於實施落地，在iOS中啟動頁是必需的，要求開發人員在Xcode編寫工具中上傳啟動頁png圖片，沒有啟動頁會影響到上線審核。

而MD卻沒有強制規定啟動頁，當應用程序沒有設置啟動頁時，系統會自動展示一個白屏作為默認啟動頁。其實這反而會讓用戶誤認為程序出錯，所以為了體驗考慮，許多設計者在安卓端還是會老老實實設置啟動頁圖片。

但隨著硬件、軟件技術手段的提升，應用程序啟動的速度會越來越快，啟動頁停留時間也將越來越短，有時候用戶來不及看上一眼，啟動頁一閃而過就已經加載到主頁面了。（不信你試試一些輕量級的工具型軟件，我為了給你們截圖案例，竟然發現手速比不過啟動頁過渡的速度…導致我最後只能錄屏後來抽出幀畫面。）

這也給許多產品設計者增加閃屏提供了立足理由。

二、啟動頁/閃屏/引導頁的區別

軟件加載的速度越來越快，啟動頁停留的時間也越來越短，可為什麼我們還是會在啟動應用程序時遭遇好幾次開屏“攔截”呢。這裡就要弄清楚啟動頁、閃屏、引導頁的區別了。

• 啟動頁：平臺規範所明確定義的開屏頁，常用方案為首屏骨架或品牌露出，有且只有一個，持續時間有時不超過1秒；
• 閃屏：多數應用借閃屏展現品牌精神、Slogan，或為了商業目標而設計廣告宣傳，閃屏可能會有連續多個，並且一般會設置“跳過”按鈕；

• 引導頁：在用戶首次打開應用或應用更新時，指導用戶操作或展示更新內容的頁面。

網絡上流傳著各式各樣風格的開屏頁視覺設計手法，這裡我就不過多贅述了，我想更多的從交互與體驗方面解析這三個頁面的作用。

首先啟動頁與閃屏、引導頁最大的區別就在於：啟動頁是平臺規範所明確規定的程序啟動加載準則，它在應用上線時就已經內嵌在了應用程序之中，並且是必需的。可以理解為一張“死圖”，當我們更換啟動頁後，會涉及到發版上線、用戶更新等一系列流程，相對於比較繁瑣。

而閃屏、引導頁則是“活圖”，開發可以自由掌控它們的顯示與隱藏，並且更新開屏廣告也不會涉及到發版上線，相對比較靈活。所以儘管你沒有更新你的APP，每次打開應用時，你可能都會看到不同的開屏廣告。

一個是必需，一個是可有可無。於是乎，就有了當我們打開應用程序時，開屏頁可能會有“啟動頁+閃屏/引導頁”的任意組合形式，甚至於有些不經過推敲的應用程序會出現“啟動頁+（多個）閃屏+引導頁”的情形。

閃屏與引導頁並沒有平臺規範來形成標準，那我們該如何設計這幾個開屏頁，才能存在且合理呢？

我在網絡上看過同行總結過這樣一張圖：

首先應在開屏過程中判斷用戶性質，來選擇閃屏與引導頁選擇其一展示即可。以免導致用戶操作過多步驟才能進行實際應用使用，操作時間太久，友好度不高，也容易增加用戶跳出。

其次閃屏如果是長期不會更換的品宣類圖片，可選擇以啟動頁展示。比如唱吧的iOS端（安卓端沒有這個現象），開屏後會顯示三個開屏畫面，非常繁瑣。在我個人開來，第二屏的Slogan完全可以用啟動頁來承載。

三、開屏頁面適配方法

前面說到了，啟動頁是一張“死圖”，是平臺規範所定義的。所以iOS給予了明確的啟動頁圖片上傳尺寸，UI需輸出以下尺寸.png圖片給開發人員：

• iPhoneSE@2x：640px * 1136px；
• iPhoen4s/4(@2x) ：640px * 960px；
• iPhone 8/7/6(@2x) ：750px*1334px；
• iPhone 8/7/6 plus (@3x) ：1242px*2208px；
• iPhone x (@3x) ：1125px*2436px

系統將會自動獲取設備長寬比，選擇對應的啟動頁尺寸去適配。

而閃屏與引導頁則是產品設計過程中添加的，可靈活配置，導致我見過許多對適配不太瞭解的UI經手的項目，製作的閃屏或引導頁，放在大屏設備上直接被拉伸變形了…所以在此給大家介紹一個非常實用且簡單的出圖方式：

UI輸出一張1125px * 2436px閃屏圖片，該尺寸對於iPhoneXS（375pt * 812pt）、iPhoneXR（414pt * 896pt ）、iPhoneXS Max（414pt * 896pt）機型可以等比例縮放適配。而對於iPhoneSE（320pt * 560pt）、iPhone8（375pt * 667pt）、iPhone 8 Plus（414pt * 736pt）等無法等比例縮放適配的機型，可以前端採取居中裁剪上下的方式。

由此可以推算出：在該尺寸下做閃屏圖片，主要內容安全區域為 1125px * 1968px。

四、總結

呈現開屏頁面給用戶原本是無可厚非，但呈現形式與呈現質量其實是需要產品設計者去推敲的。友好的、有趣的開屏頁面，不但不會打擾到用戶，甚至還會給用戶帶來新鮮感和愉悅感。

希望本文能夠幫助你瞭解幾個開屏頁的區別，並且做出更合理、不被用戶嫌棄的開屏頁面。

作者：Howie_t；公眾號：UCD耍家（ID：ucdplayer）

本文由 @Howie_t 原創發佈於人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議