啟動(dòng)頁(yè)的作用很多，在緩解用戶(hù)等待焦慮的同時(shí)，也能夠通過(guò)啟動(dòng)頁(yè)來(lái)奠定品牌的基調(diào)或者實(shí)現(xiàn)商業(yè)價(jià)值，其重要性可見(jiàn)一斑。

等待，無(wú)盡的等待——當(dāng)我打開(kāi)一個(gè)APP的時(shí)候，產(chǎn)品品宣、Slogan、第三方廣告冷冷得在我臉上胡亂地拍，網(wǎng)絡(luò)不太好的時(shí)候再加上旋轉(zhuǎn)的菊花碼，我要經(jīng)過(guò)一個(gè)漫長(zhǎng)的過(guò)程才能來(lái)到我想到的頁(yè)面。

唐納德·諾曼可說(shuō)過(guò)，用戶(hù)是永遠(yuǎn)不是錯(cuò)的（攤手）。網(wǎng)絡(luò)問(wèn)題，怪運(yùn)營(yíng)商；一連串的開(kāi)屏頁(yè)，那必須得怪產(chǎn)品設(shè)計(jì)人員了。作為一名UI，我知道有時(shí)出于品宣和商業(yè)目標(biāo)，我們不得不在PM與運(yùn)營(yíng)的淫威下屈服。但今天我還是要來(lái)聊聊，怎么把開(kāi)屏頁(yè)落地，做到存在且合理。

一、平臺(tái)規(guī)范下的啟動(dòng)頁(yè)

iOS 與 Material Design 對(duì)于啟動(dòng)頁(yè)（Launch Screen）存在的價(jià)值都保持一致的積極態(tài)度，都認(rèn)為啟動(dòng)頁(yè)可以讓用戶(hù)減少對(duì)于應(yīng)用程序啟動(dòng)加載過(guò)久的認(rèn)知。說(shuō)直白點(diǎn)，啟動(dòng)頁(yè)存在的價(jià)值，其實(shí)就是應(yīng)用程序啟動(dòng)加載的一塊遮羞布。

雖然兩個(gè)平臺(tái)對(duì)于設(shè)置啟動(dòng)頁(yè)的意見(jiàn)一致，但卻有著各自差異性的設(shè)計(jì)指導(dǎo)準(zhǔn)則和實(shí)施標(biāo)準(zhǔn)。

首先，iOS在規(guī)范的迭代中從來(lái)沒(méi)有改變過(guò)“以用戶(hù)體驗(yàn)為核心”的初衷，時(shí)至今日 iOS 也依舊認(rèn)為啟動(dòng)頁(yè)應(yīng)該設(shè)計(jì)為類(lèi)似應(yīng)用程序打開(kāi)后第一屏的屏幕骨架，這樣不容易引人注意，看上去就像一啟動(dòng)應(yīng)用程序就已經(jīng)加載出了應(yīng)用框架，剩下的時(shí)間只是在請(qǐng)求服務(wù)器數(shù)據(jù)，給人一種應(yīng)用程序打開(kāi)很快的感覺(jué)。

而MD比較與時(shí)俱進(jìn)，除了和iOS一樣，指導(dǎo)設(shè)計(jì)者可以用第一屏骨架作為啟動(dòng)頁(yè)方案之外，還提供了為推廣品牌而做品牌曝光用途的第二方案。

曾經(jīng)有許多應(yīng)用程序都是按照iOS指定規(guī)范來(lái)落地啟動(dòng)頁(yè)的（國(guó)外軟件居多），類(lèi)似Instagram、Facebook，但現(xiàn)在也都已經(jīng)變成了品牌曝光。但iOS內(nèi)置的應(yīng)用程序，還是保持著初心。

其次，對(duì)于實(shí)施落地，在iOS中啟動(dòng)頁(yè)是必需的，要求開(kāi)發(fā)人員在Xcode編寫(xiě)工具中上傳啟動(dòng)頁(yè)png圖片，沒(méi)有啟動(dòng)頁(yè)會(huì)影響到上線(xiàn)審核。

而MD卻沒(méi)有強(qiáng)制規(guī)定啟動(dòng)頁(yè)，當(dāng)應(yīng)用程序沒(méi)有設(shè)置啟動(dòng)頁(yè)時(shí)，系統(tǒng)會(huì)自動(dòng)展示一個(gè)白屏作為默認(rèn)啟動(dòng)頁(yè)。其實(shí)這反而會(huì)讓用戶(hù)誤認(rèn)為程序出錯(cuò)，所以為了體驗(yàn)考慮，許多設(shè)計(jì)者在安卓端還是會(huì)老老實(shí)實(shí)設(shè)置啟動(dòng)頁(yè)圖片。

但隨著硬件、軟件技術(shù)手段的提升，應(yīng)用程序啟動(dòng)的速度會(huì)越來(lái)越快，啟動(dòng)頁(yè)停留時(shí)間也將越來(lái)越短，有時(shí)候用戶(hù)來(lái)不及看上一眼，啟動(dòng)頁(yè)一閃而過(guò)就已經(jīng)加載到主頁(yè)面了。（不信你試試一些輕量級(jí)的工具型軟件，我為了給你們截圖案例，竟然發(fā)現(xiàn)手速比不過(guò)啟動(dòng)頁(yè)過(guò)渡的速度…導(dǎo)致我最后只能錄屏后來(lái)抽出幀畫(huà)面。）

這也給許多產(chǎn)品設(shè)計(jì)者增加閃屏提供了立足理由。

二、啟動(dòng)頁(yè)/閃屏/引導(dǎo)頁(yè)的區(qū)別

軟件加載的速度越來(lái)越快，啟動(dòng)頁(yè)停留的時(shí)間也越來(lái)越短，可為什么我們還是會(huì)在啟動(dòng)應(yīng)用程序時(shí)遭遇好幾次開(kāi)屏“攔截”呢。這里就要弄清楚啟動(dòng)頁(yè)、閃屏、引導(dǎo)頁(yè)的區(qū)別了。

• 啟動(dòng)頁(yè)：平臺(tái)規(guī)范所明確定義的開(kāi)屏頁(yè)，常用方案為首屏骨架或品牌露出，有且只有一個(gè)，持續(xù)時(shí)間有時(shí)不超過(guò)1秒；
• 閃屏：多數(shù)應(yīng)用借閃屏展現(xiàn)品牌精神、Slogan，或?yàn)榱松虡I(yè)目標(biāo)而設(shè)計(jì)廣告宣傳，閃屏可能會(huì)有連續(xù)多個(gè)，并且一般會(huì)設(shè)置“跳過(guò)”按鈕；

• 引導(dǎo)頁(yè)：在用戶(hù)首次打開(kāi)應(yīng)用或應(yīng)用更新時(shí)，指導(dǎo)用戶(hù)操作或展示更新內(nèi)容的頁(yè)面。

網(wǎng)絡(luò)上流傳著各式各樣風(fēng)格的開(kāi)屏頁(yè)視覺(jué)設(shè)計(jì)手法，這里我就不過(guò)多贅述了，我想更多的從交互與體驗(yàn)方面解析這三個(gè)頁(yè)面的作用。

首先啟動(dòng)頁(yè)與閃屏、引導(dǎo)頁(yè)最大的區(qū)別就在于：啟動(dòng)頁(yè)是平臺(tái)規(guī)范所明確規(guī)定的程序啟動(dòng)加載準(zhǔn)則，它在應(yīng)用上線(xiàn)時(shí)就已經(jīng)內(nèi)嵌在了應(yīng)用程序之中，并且是必需的。可以理解為一張“死圖”，當(dāng)我們更換啟動(dòng)頁(yè)后，會(huì)涉及到發(fā)版上線(xiàn)、用戶(hù)更新等一系列流程，相對(duì)于比較繁瑣。

而閃屏、引導(dǎo)頁(yè)則是“活圖”，開(kāi)發(fā)可以自由掌控它們的顯示與隱藏，并且更新開(kāi)屏廣告也不會(huì)涉及到發(fā)版上線(xiàn)，相對(duì)比較靈活。所以盡管你沒(méi)有更新你的APP，每次打開(kāi)應(yīng)用時(shí)，你可能都會(huì)看到不同的開(kāi)屏廣告。

一個(gè)是必需，一個(gè)是可有可無(wú)。于是乎，就有了當(dāng)我們打開(kāi)應(yīng)用程序時(shí)，開(kāi)屏頁(yè)可能會(huì)有“啟動(dòng)頁(yè)+閃屏/引導(dǎo)頁(yè)”的任意組合形式，甚至于有些不經(jīng)過(guò)推敲的應(yīng)用程序會(huì)出現(xiàn)“啟動(dòng)頁(yè)+（多個(gè)）閃屏+引導(dǎo)頁(yè)”的情形。

閃屏與引導(dǎo)頁(yè)并沒(méi)有平臺(tái)規(guī)范來(lái)形成標(biāo)準(zhǔn)，那我們?cè)撊绾卧O(shè)計(jì)這幾個(gè)開(kāi)屏頁(yè)，才能存在且合理呢？

我在網(wǎng)絡(luò)上看過(guò)同行總結(jié)過(guò)這樣一張圖：

首先應(yīng)在開(kāi)屏過(guò)程中判斷用戶(hù)性質(zhì)，來(lái)選擇閃屏與引導(dǎo)頁(yè)選擇其一展示即可。以免導(dǎo)致用戶(hù)操作過(guò)多步驟才能進(jìn)行實(shí)際應(yīng)用使用，操作時(shí)間太久，友好度不高，也容易增加用戶(hù)跳出。

其次閃屏如果是長(zhǎng)期不會(huì)更換的品宣類(lèi)圖片，可選擇以啟動(dòng)頁(yè)展示。比如唱吧的iOS端（安卓端沒(méi)有這個(gè)現(xiàn)象），開(kāi)屏后會(huì)顯示三個(gè)開(kāi)屏畫(huà)面，非常繁瑣。在我個(gè)人開(kāi)來(lái)，第二屏的Slogan完全可以用啟動(dòng)頁(yè)來(lái)承載。

三、開(kāi)屏頁(yè)面適配方法

前面說(shuō)到了，啟動(dòng)頁(yè)是一張“死圖”，是平臺(tái)規(guī)范所定義的。所以iOS給予了明確的啟動(dòng)頁(yè)圖片上傳尺寸，UI需輸出以下尺寸.png圖片給開(kāi)發(fā)人員：

• 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

系統(tǒng)將會(huì)自動(dòng)獲取設(shè)備長(zhǎng)寬比，選擇對(duì)應(yīng)的啟動(dòng)頁(yè)尺寸去適配。

而閃屏與引導(dǎo)頁(yè)則是產(chǎn)品設(shè)計(jì)過(guò)程中添加的，可靈活配置，導(dǎo)致我見(jiàn)過(guò)許多對(duì)適配不太了解的UI經(jīng)手的項(xiàng)目，制作的閃屏或引導(dǎo)頁(yè)，放在大屏設(shè)備上直接被拉伸變形了…所以在此給大家介紹一個(gè)非常實(shí)用且簡(jiǎn)單的出圖方式：

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

由此可以推算出：在該尺寸下做閃屏圖片，主要內(nèi)容安全區(qū)域?yàn)?1125px * 1968px。

四、總結(jié)

呈現(xiàn)開(kāi)屏頁(yè)面給用戶(hù)原本是無(wú)可厚非，但呈現(xiàn)形式與呈現(xiàn)質(zhì)量其實(shí)是需要產(chǎn)品設(shè)計(jì)者去推敲的。友好的、有趣的開(kāi)屏頁(yè)面，不但不會(huì)打擾到用戶(hù)，甚至還會(huì)給用戶(hù)帶來(lái)新鮮感和愉悅感。

希望本文能夠幫助你了解幾個(gè)開(kāi)屏頁(yè)的區(qū)別，并且做出更合理、不被用戶(hù)嫌棄的開(kāi)屏頁(yè)面。

作者：UCD耍家；公眾號(hào)：UCD耍家（ID：ucdplayer）

本文由 @UCD耍家 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議