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

首先簡(jiǎn)要的概括一下什么是啟動(dòng)頁(yè)：每次喚起一個(gè)app的時(shí)候，在進(jìn)入app首頁(yè)之前的等待頁(yè)面。

文章目錄如下：

1. 啟動(dòng)頁(yè)設(shè)計(jì)目的
2. 啟動(dòng)頁(yè)分類及樣式
3. 啟動(dòng)頁(yè)邏輯及細(xì)節(jié)

一、啟動(dòng)頁(yè)設(shè)計(jì)目的

當(dāng)用戶點(diǎn)開app時(shí)，需要對(duì)于app內(nèi)的素材進(jìn)行加載，比如說(shuō)加載圖片信息等等，為了給用戶呈現(xiàn)一個(gè)完整友好的app界面，這個(gè)加載素材的過(guò)程需要一定的時(shí)間，為了讓用戶在等待這一小段時(shí)間的時(shí)候減少一些困惑，啟動(dòng)頁(yè)這個(gè)模塊就應(yīng)然而生了。

剛才提到的困惑會(huì)有很多種，比如說(shuō)用戶在知道app啟動(dòng)需要等待時(shí)間的情況下，啟動(dòng)頁(yè)可以減少用戶因?yàn)榈却龁?dòng)時(shí)間而產(chǎn)生的無(wú)聊的情緒；用戶也極有可能不知道app啟動(dòng)需要等待時(shí)間，如果沒(méi)有啟動(dòng)頁(yè)這樣一個(gè)模塊，會(huì)讓用戶產(chǎn)生很大的困惑，我的手機(jī)卡死了嗎？還是這個(gè)app有問(wèn)題？等等…

二、啟動(dòng)頁(yè)分類及樣式

啟動(dòng)頁(yè)大致可以分為以下四類：

第一類：品牌展示

這類是最常見(jiàn)的，在啟動(dòng)頁(yè)展示的信息包括app名稱、icon及slogan，界面簡(jiǎn)單清晰，加深用戶對(duì)于品牌的認(rèn)知，整體的顏色風(fēng)格也遵從app界面的設(shè)計(jì)風(fēng)格，讓用戶提前熟悉app的樣式風(fēng)格。

第二類：廣告展示、活動(dòng)展示

這一類中包含廣告展示和活動(dòng)展示兩個(gè)小類，廣告展示對(duì)外，app與廣告商家談好合作，在app的啟動(dòng)頁(yè)展示廣告商家的廣告信息，當(dāng)此app積累下來(lái)的流量已經(jīng)形成一定的規(guī)模，足夠進(jìn)行分發(fā)的時(shí)候，可以用這種廣告展示的方法進(jìn)行流量的變現(xiàn)，通常使用這類啟動(dòng)頁(yè)方式的app為通過(guò)廣告作為變現(xiàn)的一種方式的app。常見(jiàn)的如網(wǎng)易系列的產(chǎn)品?；顒?dòng)展示對(duì)內(nèi)，如app內(nèi)一些運(yùn)營(yíng)的活動(dòng)需要進(jìn)行推廣，app啟動(dòng)頁(yè)就承擔(dān)了這個(gè)職責(zé)，在用戶第一時(shí)間進(jìn)入這個(gè)app的時(shí)候就能看見(jiàn)app的活動(dòng)有哪些。

第三類：內(nèi)容展示

這一類較前兩種來(lái)說(shuō)比較少見(jiàn)，啟動(dòng)頁(yè)的內(nèi)容與app的內(nèi)容相關(guān)聯(lián)，不僅僅展示出app的活動(dòng)，同時(shí)也會(huì)摻雜進(jìn)app自身的設(shè)計(jì)元素在里面。如圖蟲網(wǎng)app，一個(gè)攝影朋友圈，在啟動(dòng)頁(yè)的展示內(nèi)容就是用戶上傳的優(yōu)質(zhì)攝影，這樣不僅僅符合自身的攝影元素，同時(shí)保持了啟動(dòng)頁(yè)的格調(diào)美感，還向用戶提前展示了優(yōu)質(zhì)的原創(chuàng)內(nèi)容。

第四類：背景底色

這一類也是比較少見(jiàn)，啟動(dòng)頁(yè)主體顏色樣式采用和app首頁(yè)相同的顏色樣式，目的是在于讓用戶提前熟悉一下app的頁(yè)面風(fēng)格，這種啟動(dòng)頁(yè)符合啟動(dòng)頁(yè)設(shè)計(jì)的初衷，既然最初啟動(dòng)頁(yè)的目的是為了讓用戶不那么無(wú)聊，那么就在這一小段時(shí)間里，提前讓用戶從視覺(jué)上熟悉了解一下app的框架。

在AppStore上排名前一百名的app里面，我人工的統(tǒng)計(jì)了一下每個(gè)app的啟動(dòng)頁(yè)樣式及分類，如上圖展示。

由此可以看出，品牌展示占了絕大多數(shù)，現(xiàn)在主流的app都是以輸出自己的品牌文化為主，更加注重自己的風(fēng)格調(diào)性；其次是活動(dòng)廣告類，主要是以網(wǎng)易的產(chǎn)品為主，都是用的同樣的框架。

值得注意的一點(diǎn)，有3款app沒(méi)有自己的啟動(dòng)頁(yè)，這三款都是美化拍攝類的app，faceu、美顏相機(jī)等，這類APP的用戶打開應(yīng)用的主要目的是美妝自拍，更急迫的想直接使用app提供的功能，外加上首頁(yè)進(jìn)來(lái)就是自拍，都是本地的參數(shù)，不需要去服務(wù)器調(diào)取參數(shù)，所以就免去了啟動(dòng)頁(yè)的功能。

三、啟動(dòng)頁(yè)邏輯及細(xì)節(jié)

這里就列舉最常用的兩類啟動(dòng)頁(yè)類型：品牌展示、活動(dòng)廣告展示，這兩種。

品牌展示

在啟動(dòng)頁(yè)展示的信息包括app名稱、icon及slogan，屬于靜態(tài)的啟動(dòng)頁(yè)，在一次版本迭代中，app的名稱、icon、slogan都是不會(huì)變的，若是上述三點(diǎn)有所改變，那一定會(huì)是一個(gè)新的版本迭代，所以品牌展示類型的啟動(dòng)頁(yè)，就會(huì)是一張長(zhǎng)寬定好的圖片。在展示啟動(dòng)頁(yè)的過(guò)程中，app向服務(wù)器請(qǐng)求的是app的內(nèi)容，而與啟動(dòng)頁(yè)的內(nèi)容無(wú)關(guān)。

品牌展示類型的啟動(dòng)頁(yè)需要注重的細(xì)節(jié)，就是視覺(jué)上的樣式問(wèn)題。UI設(shè)計(jì)的事情暫且不做太多討論。在產(chǎn)品上需要注重的細(xì)節(jié)問(wèn)題不多，這里想到的一點(diǎn)就是“跳過(guò)”按鈕。我們?cè)趩?dòng)頁(yè)，都會(huì)看到有一個(gè)跳過(guò)的按鈕，這個(gè)按鈕的意義在于，對(duì)于用戶可以跳過(guò)自己不想看的啟動(dòng)頁(yè)內(nèi)容，對(duì)于app來(lái)說(shuō)，首頁(yè)需要的參數(shù)信息已經(jīng)向服務(wù)器請(qǐng)求完畢，可以讓用戶自己選擇他們停留在啟動(dòng)頁(yè)的時(shí)長(zhǎng)。

活動(dòng)廣告展示

將廣告商家和自己活動(dòng)的信息展示在啟動(dòng)頁(yè)中，屬于動(dòng)態(tài)的啟動(dòng)頁(yè)。每天每時(shí)每刻，啟動(dòng)頁(yè)上展示的內(nèi)容都可能不一樣。在app啟動(dòng)的時(shí)候，不僅僅需要向服務(wù)器請(qǐng)求app首頁(yè)的參數(shù)，同時(shí)需要向服務(wù)器請(qǐng)求啟動(dòng)頁(yè)的參數(shù)?，F(xiàn)在的活動(dòng)廣告展示，只占了一整個(gè)屏幕的一部分，我們舉個(gè)例子進(jìn)行說(shuō)明。

網(wǎng)易云音樂(lè)的啟動(dòng)頁(yè)樣式如上圖，下方的是本地默認(rèn)模板，在用戶下載apk包的時(shí)候自帶的。上方的組件是線上讀取廣告，從線上讀取廣告之后，緩存在本地中，每次啟動(dòng)app的時(shí)候展示出來(lái)，下次再次啟動(dòng)app的時(shí)候，先向服務(wù)器調(diào)取參數(shù)，看看線上有沒(méi)有更新廣告，如果有更新，則需要下載最新一版的，如果沒(méi)有更新，則展示本地緩存的廣告。

活動(dòng)廣告類型的啟動(dòng)頁(yè)，需要注意的細(xì)節(jié)問(wèn)題就要比品牌展示類多得多。主要有兩塊細(xì)節(jié)問(wèn)題，弱網(wǎng)環(huán)境下的下載問(wèn)題、廣告CMS管理。

如果處于弱網(wǎng)或者斷網(wǎng)的情況下，app不能一直請(qǐng)求啟動(dòng)頁(yè)或者app的參數(shù)，那樣會(huì)一直停留在啟動(dòng)頁(yè)上沒(méi)有其他的交互，用戶會(huì)認(rèn)為app卡死了或者手機(jī)出了什么問(wèn)題。所以會(huì)需要一個(gè)下載啟動(dòng)頁(yè)素材的時(shí)間，超過(guò)這段時(shí)間，就要默認(rèn)的播放本地的緩存，以免影響用戶體驗(yàn)。這樣一來(lái)，啟動(dòng)頁(yè)的時(shí)間就被分成兩塊：一是下載素材、回調(diào)參數(shù)的時(shí)間，二是播放啟動(dòng)頁(yè)的時(shí)間。每段時(shí)間都要設(shè)置一個(gè)閾值上限。若超過(guò)這個(gè)閾值上限，就要自動(dòng)的跳過(guò)這個(gè)流程，這樣才能保證啟動(dòng)頁(yè)的流暢及友好的用戶體驗(yàn)。

第二塊需要注意的細(xì)節(jié)就是廣告CMS管理，我們都遇見(jiàn)過(guò)這個(gè)功能點(diǎn)，在啟動(dòng)頁(yè)觀看廣告的時(shí)候，都會(huì)有一個(gè)“跳過(guò)”按鈕，點(diǎn)擊跳過(guò)，進(jìn)入app首頁(yè)。淺顯的剖析一下“跳過(guò)”按鈕功能點(diǎn)，我們可以快速的找到它的設(shè)計(jì)原因，用戶覺(jué)得廣告太過(guò)于枯燥，或者更想快速的使用app，就會(huì)點(diǎn)擊跳過(guò)。如果能對(duì)廣告商家提供的廣告搭建一個(gè)CMS管理中心，對(duì)廣告進(jìn)行打標(biāo)簽處理，再根據(jù)用戶畫像的分類，對(duì)不同的用戶進(jìn)行精準(zhǔn)投遞，通過(guò)這樣的方法延長(zhǎng)用戶觀看廣告的平均時(shí)長(zhǎng)，使廣告的價(jià)值最大化，對(duì)KPI也有很大的提升。

以上就是自己對(duì)于啟動(dòng)頁(yè)的一點(diǎn)點(diǎn)小的看法，希望各位大佬們批評(píng)指正。

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