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