最近在整理做產(chǎn)品以來收集到的各種資料晰奖，準(zhǔn)備針對(duì)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)占位圖像伴奥。請(qǐng)記住写烤，啟動(dòng)圖像并不是為您提供機(jī)會(huì)進(jìn)行藝術(shù)展示；它完全是為了增強(qiáng)用戶對(duì)應(yīng)用程序能夠快速啟動(dòng)并立即投入使用的感知度拾徙。
原本Apple設(shè)計(jì)啟動(dòng)頁Launch Image的目的僅僅是為了讓用戶覺得你的APP已準(zhǔn)備好給用戶使用洲炊，減少用戶打開啟動(dòng)到正常使用的焦慮感。
Apple HIG原文精簡(jiǎn)下大意就是：你的啟動(dòng)頁三不要——不要閃一個(gè)頁面再進(jìn)去尼啡！不要當(dāng)做關(guān)于xxx的頁面暂衡！不要有品牌元素！
對(duì)崖瞭，你沒看錯(cuò)狂巢，國(guó)內(nèi)APP占全了三不要，在國(guó)內(nèi)啟動(dòng)頁的作用如下：
①提高用戶體驗(yàn)书聚，減少用戶焦慮
②品牌效應(yīng)
③商業(yè)需求
④情懷（褒義）
很明顯唧领，國(guó)內(nèi)的app違反了Apple的三不要，但是雌续，回過頭來說斩个，當(dāng)我們長(zhǎng)久這么使用了之后，覺得怪么驯杜？不怪受啥，我覺得所有的UI都不是傻瓜，在對(duì)原規(guī)范和自主之間鸽心，選擇一個(gè)更貼近國(guó)人的選擇也是情理之中的事腔呜。
三、怎么設(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作為主元素温学，簡(jiǎn)單有效地傳遞品牌信息。每一次啟動(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)為如果不把這種絕妙的位置利用起來，都覺得對(duì)不起祖國(guó)的栽培果正。
②使用應(yīng)用logo和slogan作為主元素炎码，傳遞品牌信息。
其實(shí)在MD的官方定義中秋泳，是允許用戶展示具有品牌特色的啟動(dòng)頁的潦闲，但是在IOS中明確說明是不允許的，但是迫皱，誰管他呢歉闰，哈哈哈。通常來說，這類啟動(dòng)頁會(huì)包括LOGO和敬、品牌名稱凹炸、Slogan（Slogan更多的是國(guó)內(nèi)的APP會(huì)加入）這三個(gè)元素。淘寶在品牌推廣這塊做的還是相當(dāng)好的昼弟，從啟動(dòng)頁就可以看出確實(shí)花了不少心思啤它。這種啟動(dòng)頁面對(duì)于產(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)語的需求碑幅，市場(chǎng)需求部分引導(dǎo)產(chǎn)品需求的傾斜。例如塞绿，網(wǎng)易新聞沟涨，默認(rèn)啟動(dòng)頁上方是空白，底部是啟動(dòng)頁三要素：logo异吻、品牌名稱裹赴、slogan。如果后臺(tái)配置了廣告則上方空白處顯示要推廣的廣告诀浪，默認(rèn)展示的時(shí)間默認(rèn)為5秒棋返，但后臺(tái)可對(duì)這個(gè)時(shí)間進(jìn)行調(diào)整（無須升級(jí)客戶端），并提供“跳過”功能雷猪，用戶點(diǎn)“跳過”則直接進(jìn)入APP首頁睛竣。
其實(shí)，事實(shí)是他們真的可以不用等求摇，但是由于某些原因（廣告主要求射沟、廣告SDK要求、首發(fā)市場(chǎng)要求）与境，不得不拖那么久验夯，你有時(shí)候甚至可以看到倒計(jì)時(shí)，我也是醉了...說白了就是流量變現(xiàn)嚷辅。
四簿姨、啟動(dòng)頁后臺(tái)配置
方案一：簡(jiǎn)單做。對(duì)啟動(dòng)頁要求不高的話簸搞，將其寫死在前端扁位。一張圖片即可，展示時(shí)間1-3秒趁俊。
注意：圖片jpg文件大小最好在150kb內(nèi)域仇；考慮安卓和ios各屏幕兼容問題，一般建議設(shè)計(jì)兩種尺寸圖片以匹配大部分機(jī)型：大圖720*1280寺擂、小圖480*800.
方案二：后臺(tái)運(yùn)營(yíng)暇务。運(yùn)營(yíng)啟動(dòng)頁即是要頻繁更換啟動(dòng)頁圖片泼掠，一般需要為運(yùn)營(yíng)同學(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)營(yíng)圖片也需要考慮方案一的問題圖片大小、屏幕適配对粪。另外圖片加載需要有一個(gè)緩存策略右冻，畢竟圖片100kb+不可能在啟動(dòng)過程中下載完馬上顯示出來。所以可以考慮給安裝包內(nèi)置一張默認(rèn)啟動(dòng)頁圖片衩侥，第一次打開應(yīng)用時(shí)顯示默認(rèn)啟動(dòng)圖同時(shí)檢測(cè)后臺(tái)是否配置新運(yùn)營(yíng)圖片国旷，有就下載緩存下來。只有新的運(yùn)營(yíng)圖片成功緩存下來后茫死，下次進(jìn)入app才顯示新的運(yùn)營(yíng)圖片跪但；否則顯示上次緩存的運(yùn)營(yíng)圖片或默認(rèn)圖片。
五峦萎、啟動(dòng)頁功能模塊中屡久，還需要考慮什么？
1.啟動(dòng)頁顯示的過程爱榔，其實(shí)就是完成首次客戶端的加載的過程被环，達(dá)到平滑過渡
2.在啟動(dòng)頁顯示過程中，同時(shí)需要進(jìn)行一些業(yè)務(wù)邏輯處理：
2.1 GPS信息檢測(cè)
2.2 登錄狀態(tài)檢查
2.3 麥克風(fēng)授權(quán)檢測(cè)
2.4 攝像頭授權(quán)檢測(cè)
2.5 陀螺頭檢測(cè)
2.6 閃屏業(yè)務(wù)檢測(cè)
2.7 升級(jí)邏輯檢測(cè)
2.8 APPstore評(píng)分檢測(cè)
2.9 PUSH推送權(quán)限檢測(cè)
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)頁，那么一定不要頻繁的更換迟郎，要用潛移默化的方式對(duì)用戶產(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è)更好的溝通橋梁骡和。
