最近在整理做產(chǎn)品以來收集到的各種資料，準(zhǔn)備針對app的常見功能模塊總結(jié)下經(jīng)驗(yàn)，一來加深學(xué)習(xí)效果，二來供大家學(xué)習(xí)交流，共同進(jìn)步，今天先來說說產(chǎn)品的啟動(dòng)頁設(shè)計(jì)。
一、什么是啟動(dòng)頁
啟動(dòng)頁（loading screen），也叫閃屏（splash screen）。當(dāng)應(yīng)用程序被用戶打開時(shí)，在程序啟動(dòng)過程中被用戶所看到的過渡頁面（或動(dòng)畫）都被我們統(tǒng)稱為啟動(dòng)頁。由于啟動(dòng)頁在每次打開應(yīng)用時(shí)都會(huì)出現(xiàn)，并且往往停留很短的時(shí)間，就像閃現(xiàn)的效果一樣，所以也有人把啟動(dòng)頁稱之為閃屏。
二、為什么要有啟動(dòng)頁？
蘋果官方給出的關(guān)于iOS啟動(dòng)頁的說明:
為了增強(qiáng)應(yīng)用程序啟動(dòng)時(shí)的用戶體驗(yàn)，您應(yīng)該提供一個(gè)啟動(dòng)圖像。啟動(dòng)圖像與應(yīng)用程序的首屏幕看起來非常相似。當(dāng)用戶在主屏幕上點(diǎn)擊您的應(yīng)用程序圖標(biāo)時(shí)，iPhone OS會(huì)立即顯示這個(gè)啟動(dòng)圖像。一旦準(zhǔn)備就緒，您的應(yīng)用程序就會(huì)顯示它的首屏幕，來替換掉這個(gè)啟動(dòng)占位圖像。請記住，啟動(dòng)圖像并不是為您提供機(jī)會(huì)進(jìn)行藝術(shù)展示；它完全是為了增強(qiáng)用戶對應(yīng)用程序能夠快速啟動(dòng)并立即投入使用的感知度。
原本Apple設(shè)計(jì)啟動(dòng)頁Launch Image的目的僅僅是為了讓用戶覺得你的APP已準(zhǔn)備好給用戶使用，減少用戶打開啟動(dòng)到正常使用的焦慮感。
Apple HIG原文精簡下大意就是：你的啟動(dòng)頁三不要——不要閃一個(gè)頁面再進(jìn)去！不要當(dāng)做關(guān)于xxx的頁面！不要有品牌元素！
對，你沒看錯(cuò)，國內(nèi)APP占全了三不要，在國內(nèi)啟動(dòng)頁的作用如下：
①提高用戶體驗(yàn)，減少用戶焦慮
②品牌效應(yīng)
③商業(yè)需求
④情懷（褒義）
很明顯，國內(nèi)的app違反了Apple的三不要，但是，回過頭來說，當(dāng)我們長久這么使用了之后，覺得怪么？不怪，我覺得所有的UI都不是傻瓜，在對原規(guī)范和自主之間，選擇一個(gè)更貼近國人的選擇也是情理之中的事。
三、怎么設(shè)計(jì)啟動(dòng)頁？
既然啟動(dòng)頁不可避免，那么就應(yīng)該設(shè)計(jì)好它，給用戶盡量好的體驗(yàn)。在這里要強(qiáng)調(diào)一句，從某種意義上說啟動(dòng)頁是一種不得已的選擇。
我比較推崇的設(shè)計(jì)原則是：
①在應(yīng)用設(shè)計(jì)時(shí)，讓啟動(dòng)頁展現(xiàn)的時(shí)間要盡可能地短，始終記住啟動(dòng)頁只是一個(gè)過渡，過渡就意味著應(yīng)該快。
②使用應(yīng)用logo和slogan作為主元素，簡單有效地傳遞品牌信息。每一次啟動(dòng)都是一次印象的加深，都是增加粘性的機(jī)會(huì)。
以下是幾種常見的啟動(dòng)頁設(shè)計(jì)模式：
①設(shè)計(jì)與主界面相似的圖片，給用戶快速啟動(dòng)的感覺。（Apple推薦的做法）
這是新版的Instagram，它的啟動(dòng)頁面就是首頁的框架，去掉了里面所有的內(nèi)容，除了標(biāo)題。這樣就好像是用戶進(jìn)入了應(yīng)用，它已經(jīng)在加載，感覺非常快速的啟動(dòng)了，讓用戶覺得應(yīng)用性能好，速度快。這就是IOS官方給出的關(guān)于啟動(dòng)頁的定義展示方式，總結(jié)來說就是兩點(diǎn)：
一是內(nèi)容盡量的少
二是展現(xiàn)時(shí)間盡可能的短
這樣做的目的也已經(jīng)很明確，就是改善用戶體驗(yàn)度。你可能會(huì)覺得官方的這些準(zhǔn)則會(huì)讓啟動(dòng)頁看起來顯得乏味無趣。但他們就是這么想的，在他們看來，啟動(dòng)頁不是讓你展示什么品牌藝術(shù)，而是增強(qiáng)用戶使用產(chǎn)品的感知度。但是慢慢的，大多數(shù)人認(rèn)為如果不把這種絕妙的位置利用起來，都覺得對不起祖國的栽培。
②使用應(yīng)用logo和slogan作為主元素，傳遞品牌信息。
其實(shí)在MD的官方定義中，是允許用戶展示具有品牌特色的啟動(dòng)頁的，但是在IOS中明確說明是不允許的，但是，誰管他呢，哈哈哈。通常來說，這類啟動(dòng)頁會(huì)包括LOGO、品牌名稱、Slogan（Slogan更多的是國內(nèi)的APP會(huì)加入）這三個(gè)元素。淘寶在品牌推廣這塊做的還是相當(dāng)好的，從啟動(dòng)頁就可以看出確實(shí)花了不少心思。這種啟動(dòng)頁面對于產(chǎn)品而言，可以提高它們的知名度，很好的起到了宣傳的作用。
在做這類頁面時(shí)，要注意風(fēng)格的搭配，不要太突兀，影響了產(chǎn)品整體的視覺效果。雖然這只是一個(gè)過渡的頁面，但是它畢竟是用戶打開產(chǎn)品之后看到的第一個(gè)畫面，所以還是值得花點(diǎn)心思做的。
我的建議是，如果沒有商業(yè)需求，有品牌名稱和LOGO就足夠了，代入感也強(qiáng)，不會(huì)犯錯(cuò)。
③使用意境化啟動(dòng)頁，引起情感上的共鳴
啟動(dòng)頁的情感共鳴個(gè)人理解主要是品牌情感和社會(huì)情感的共鳴。
品牌情感：傳遞軟件的一種核心理念，一種情感的表現(xiàn)
引用知乎找到的一段話：
微信的啟動(dòng)畫面就是用了這張“藍(lán)色彈珠”，人類最近一次在太空中遠(yuǎn)眺母星的景象。作為一種人際溝通工具，沒有第二張圖能更好地表達(dá)出人類內(nèi)心的孤獨(dú)，以及地球家園的美好。所以，整個(gè)畫面有一種孤清中的淡淡暖意，給人的感覺是文藝到死。等你知道了背后的故事，又會(huì)覺得悶騷到死。
社會(huì)情感：啟動(dòng)頁并不是一沉不變的，而是隨著社會(huì)上發(fā)生的大事件，或者特殊的節(jié)日而改變的，這樣更能體現(xiàn)出一個(gè)企業(yè)的社會(huì)責(zé)任感，同時(shí)讓用戶最快了解到一些信息（比如今天是母親節(jié)）
這種模式的重點(diǎn)在于情感共鳴，其實(shí)設(shè)計(jì)難度是最大的，既要考慮到圖片的含義，深層含義，同時(shí)也要軟件的精神相契合。是一種很有高度的設(shè)計(jì)。
④使用廣告圖片，賺錢或宣傳其他。
隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，逐漸出現(xiàn)了啟動(dòng)頁廣告和首發(fā)標(biāo)語的需求，市場需求部分引導(dǎo)產(chǎn)品需求的傾斜。例如，網(wǎng)易新聞，默認(rèn)啟動(dòng)頁上方是空白，底部是啟動(dòng)頁三要素：logo、品牌名稱、slogan。如果后臺(tái)配置了廣告則上方空白處顯示要推廣的廣告，默認(rèn)展示的時(shí)間默認(rèn)為5秒，但后臺(tái)可對這個(gè)時(shí)間進(jìn)行調(diào)整（無須升級客戶端），并提供“跳過”功能，用戶點(diǎn)“跳過”則直接進(jìn)入APP首頁。
其實(shí)，事實(shí)是他們真的可以不用等，但是由于某些原因（廣告主要求、廣告SDK要求、首發(fā)市場要求），不得不拖那么久，你有時(shí)候甚至可以看到倒計(jì)時(shí)，我也是醉了...說白了就是流量變現(xiàn)。
四、啟動(dòng)頁后臺(tái)配置
方案一：簡單做。對啟動(dòng)頁要求不高的話，將其寫死在前端。一張圖片即可，展示時(shí)間1-3秒。
注意：圖片jpg文件大小最好在150kb內(nèi)；考慮安卓和ios各屏幕兼容問題，一般建議設(shè)計(jì)兩種尺寸圖片以匹配大部分機(jī)型：大圖720*1280、小圖480*800.
方案二：后臺(tái)運(yùn)營。運(yùn)營啟動(dòng)頁即是要頻繁更換啟動(dòng)頁圖片，一般需要為運(yùn)營同學(xué)配置一個(gè)啟動(dòng)頁后臺(tái)管理。當(dāng)然頁面上也需要做一些配合。
后臺(tái)管理提供以下配置：
1、配置：支持分渠道、分省份
2、內(nèi)容維度：圖片、圖片+URL
3、展示時(shí)段：后臺(tái)配置的閃屏?xí)r間段內(nèi)展示
4、客戶端閃屏展示時(shí)間：3秒，3秒后自動(dòng)進(jìn)入應(yīng)用
5、無閃屏處理：使用本地啟動(dòng)頁
6、如配置閃屏帶鏈接，則跳轉(zhuǎn)至應(yīng)用內(nèi)瀏覽器查看
注意：
啟動(dòng)頁運(yùn)營圖片也需要考慮方案一的問題圖片大小、屏幕適配。另外圖片加載需要有一個(gè)緩存策略，畢竟圖片100kb+不可能在啟動(dòng)過程中下載完馬上顯示出來。所以可以考慮給安裝包內(nèi)置一張默認(rèn)啟動(dòng)頁圖片，第一次打開應(yīng)用時(shí)顯示默認(rèn)啟動(dòng)圖同時(shí)檢測后臺(tái)是否配置新運(yùn)營圖片，有就下載緩存下來。只有新的運(yùn)營圖片成功緩存下來后，下次進(jìn)入app才顯示新的運(yùn)營圖片；否則顯示上次緩存的運(yùn)營圖片或默認(rèn)圖片。
五、啟動(dòng)頁功能模塊中，還需要考慮什么？
1.啟動(dòng)頁顯示的過程，其實(shí)就是完成首次客戶端的加載的過程，達(dá)到平滑過渡
2.在啟動(dòng)頁顯示過程中，同時(shí)需要進(jìn)行一些業(yè)務(wù)邏輯處理：
2.1 GPS信息檢測
2.2 登錄狀態(tài)檢查
2.3 麥克風(fēng)授權(quán)檢測
2.4 攝像頭授權(quán)檢測
2.5 陀螺頭檢測
2.6 閃屏業(yè)務(wù)檢測
2.7 升級邏輯檢測
2.8 APPstore評分檢測
2.9 PUSH推送權(quán)限檢測
ps：業(yè)務(wù)處理說明
業(yè)務(wù)判斷及順序（上面提及到的處理邏輯的順序）
異常業(yè)務(wù)處理（網(wǎng)絡(luò)異常、位置未開啟無法定位等）
六、做啟動(dòng)頁時(shí)要注意哪些事項(xiàng)
1.如果你的產(chǎn)品注重體驗(yàn)，暫時(shí)還沒有商業(yè)需求也不需要做品牌推廣，那墻裂推薦蘋果推薦的做法。
2.如果用了品牌推廣型啟動(dòng)頁，那么一定不要頻繁的更換，要用潛移默化的方式對用戶產(chǎn)生影響，讓用戶深刻記住你的品牌形象。
3.如果你的啟動(dòng)頁被商家購買來做廣告了，那么一定要控制時(shí)間，多注意一些好的App是怎么處理的，比如騰訊，在右上角做了跳過廣告。這樣不僅做了廣告，也適當(dāng)提升了用戶體驗(yàn)。
4.啟動(dòng)頁最好是在產(chǎn)品開啟的時(shí)候才出現(xiàn)，某吧錄歌軟件每次在錄完歌之后切換到其他應(yīng)用后，再跳轉(zhuǎn)回來就會(huì)出現(xiàn)啟動(dòng)頁然后再跳轉(zhuǎn)到你之前的頁面，這樣的體驗(yàn)其實(shí)很不好。
隨著互聯(lián)網(wǎng)的發(fā)展越來越成熟，相信以后會(huì)有更多的展示方式，產(chǎn)品同學(xué)不僅要站在自己的角度看待問題，還要學(xué)會(huì)審視一切可能改變結(jié)果的因素。確保將商業(yè)需求和用戶體驗(yàn)限定在可控范圍內(nèi)，為產(chǎn)品和用戶做一個(gè)更好的溝通橋梁。
