不管一個(gè)產(chǎn)品的啟動(dòng)頁(yè)呈現(xiàn)哪種形式，都不應(yīng)該忘了啟動(dòng)頁(yè)存在的根本原因：為了減少用戶(hù)在等待APP啟動(dòng)時(shí)的焦慮感。
心理學(xué)上有一個(gè)“7秒理論”，說(shuō)的是，一個(gè)人對(duì)另一個(gè)人的印象，在初次見(jiàn)面的七秒內(nèi)就會(huì)形成，最近更有研究表明，這個(gè)時(shí)間可能更短——不到1秒。所以初次見(jiàn)面所展示的形象真的很重要。同理，用戶(hù)在使用APP時(shí)，每次啟動(dòng)呈現(xiàn)在用戶(hù)面前的界面重要程度不言而喻，而這個(gè)界面就是大家熟知的啟動(dòng)頁(yè)。
在iOS的規(guī)范中，啟動(dòng)頁(yè)的英文叫Launch Screen，指的是啟動(dòng)APP時(shí)呈現(xiàn)的第一個(gè)界面。其實(shí)這種描述不夠嚴(yán)謹(jǐn)，從啟動(dòng)APP到APP首頁(yè)的出現(xiàn)之前的頁(yè)面，都可以稱(chēng)為啟動(dòng)頁(yè)(新手引導(dǎo)頁(yè)除外：用戶(hù)第一次使用APP，有可能還會(huì)出現(xiàn)新手引導(dǎo)頁(yè))。引導(dǎo)頁(yè)也是一個(gè)重要的話(huà)題，我們先按下不表，以后再聊。
由于APP啟動(dòng)的過(guò)程很短，從幾百毫秒到幾秒不等，所以啟動(dòng)頁(yè)也被稱(chēng)為閃屏。
了解我的人可能都知道，經(jīng)常說(shuō)的一句話(huà)就是“需求決定功能，功能決定設(shè)計(jì)形式”，這是我做產(chǎn)品的一個(gè)價(jià)值觀。每種設(shè)計(jì)形式的出現(xiàn)都是有它背后的邏輯和機(jī)制的，了解了a這個(gè)Why，能讓我們做產(chǎn)品的時(shí)候變得更智慧。
那為什么會(huì)存在啟動(dòng)頁(yè)這種形式?
首先目前的APP所相關(guān)的兩大平臺(tái)Android和iOS，是用Java和swift這些編程語(yǔ)言寫(xiě)出來(lái)的，而計(jì)算機(jī)的元器件只有開(kāi)和關(guān)這兩種狀態(tài)。當(dāng)啟動(dòng)APP時(shí)，設(shè)備(手機(jī)、平板等)需要將編程語(yǔ)言進(jìn)行編譯成計(jì)算機(jī)能夠讀懂的二進(jìn)制語(yǔ)言，計(jì)算機(jī)只認(rèn)識(shí)1和0(對(duì)應(yīng)元器件的開(kāi)和關(guān))。這個(gè)編譯過(guò)程需要時(shí)間，同時(shí)，啟動(dòng)過(guò)程還存在向服務(wù)器請(qǐng)求數(shù)據(jù)的情況，這也需要時(shí)間。也就是說(shuō)，在點(diǎn)擊啟動(dòng)APP圖標(biāo)，到APP首頁(yè)的出現(xiàn)，是存在一個(gè)時(shí)間，這個(gè)時(shí)間的長(zhǎng)短取決于設(shè)備的性能和網(wǎng)絡(luò)環(huán)境，從幾百毫秒到幾秒不等。
在這段空白時(shí)間，為了不讓用戶(hù)感到困惑或因?yàn)榈却a(chǎn)生焦慮。iOS的設(shè)計(jì)規(guī)范規(guī)定，要在啟動(dòng)APP時(shí)，設(shè)計(jì)一個(gè)啟動(dòng)頁(yè)，來(lái)填補(bǔ)這段用戶(hù)等待的時(shí)間。
按照功能和達(dá)成目的的維度，我將啟動(dòng)頁(yè)分為了五類(lèi)，分別是快速啟動(dòng)類(lèi)、品牌類(lèi)、情感共鳴類(lèi)、廣告類(lèi)、節(jié)日類(lèi)。
1.快速啟動(dòng)類(lèi)
對(duì)于啟動(dòng)頁(yè)的設(shè)計(jì)，官方是有明確規(guī)定的，iOS的設(shè)計(jì)規(guī)范是這么描述的：
“為了增強(qiáng)應(yīng)用程序啟動(dòng)時(shí)的用戶(hù)體驗(yàn)，您應(yīng)該提供一個(gè)啟動(dòng)圖像。啟動(dòng)圖像與應(yīng)用程序的首屏幕看起來(lái)非常相似。當(dāng)用戶(hù)在主屏幕上點(diǎn)擊您的應(yīng)用程序圖標(biāo)時(shí)，iPhone OS會(huì)立即顯示這個(gè)啟動(dòng)圖像。一旦準(zhǔn)備就緒，您的應(yīng)用程序就會(huì)顯示它的首屏幕，來(lái)替換掉這個(gè)啟動(dòng)占位圖像?！?
查看原文：https://developer.apple.com/ios/human-interface-guidelines/graphics/launch-screen/
國(guó)外的APP大多采用這種方案，它的最大好處是，啟動(dòng)頁(yè)和首頁(yè)很相似，過(guò)度自然，用戶(hù)感覺(jué)不到有啟動(dòng)這個(gè)過(guò)程，用戶(hù)體驗(yàn)很棒。
Foodie
Path
如果首頁(yè)的框架和內(nèi)容是變化的，不固定的，那怎么辦?不要慌，還是有辦法的：采用和首頁(yè)顏色接近的圖來(lái)作為啟動(dòng)頁(yè)。如“VSCO”等。
VSCO
如果是在國(guó)外，這篇文章講到這就要結(jié)束了，因?yàn)橛涀∫粭l方法論就行“設(shè)計(jì)一張和首屏相似的頁(yè)面作為啟動(dòng)頁(yè)，如果首屏內(nèi)容是動(dòng)態(tài)的，則采用和首屏整體最接近的顏色作為啟動(dòng)頁(yè)”
但是國(guó)內(nèi)的APP決定要走出一條自己的路，所以有了下面的五花八門(mén)的啟動(dòng)頁(yè)。
2品牌類(lèi)
盡管蘋(píng)果明確提出，啟動(dòng)頁(yè)不是你品牌展示的窗口，但將啟動(dòng)頁(yè)做成“品牌logo+名稱(chēng)+slogan”成了國(guó)內(nèi)最主流的啟動(dòng)頁(yè)設(shè)計(jì)。放幾張圖，大家自行感受。
有道云筆記&UC瀏覽器
上圖的兩個(gè)例子是目前國(guó)內(nèi)APP最主流的方式，這種形式一是沒(méi)有設(shè)計(jì)，二是啟動(dòng)頁(yè)和首屏有明顯的割裂感，真的不如直接用一張和首屏相似的圖片作為啟動(dòng)頁(yè)。
那如果真的要在啟動(dòng)這么短的時(shí)間內(nèi)來(lái)強(qiáng)調(diào)公司或品牌，可以有更好的方案，Uber啟動(dòng)頁(yè)利用品牌元素進(jìn)行動(dòng)態(tài)變化的設(shè)計(jì)，品牌元素從出現(xiàn)，到變化，再到消失一氣呵成，而且和首屏的銜接過(guò)渡的也很自然，在確保體驗(yàn)的前提下，也起到了強(qiáng)化品牌的作用。我從Uber的這種做法提煉出了三個(gè)思路，一是除了靜態(tài)圖片還可以考慮動(dòng)態(tài)展示的形式;二是將啟動(dòng)頁(yè)做得更具設(shè)計(jì)感;三讓啟動(dòng)頁(yè)和首屏的過(guò)度動(dòng)畫(huà)更自然。可以作為品牌類(lèi)啟動(dòng)頁(yè)設(shè)計(jì)的方法論來(lái)用。
再來(lái)看幾個(gè)例子：
XY&開(kāi)眼
輕芒閱讀&一個(gè)
開(kāi)眼和輕芒閱讀等APP，也將啟動(dòng)頁(yè)作為強(qiáng)調(diào)品牌的載體。通過(guò)體現(xiàn)場(chǎng)景感來(lái)充分體現(xiàn)了品牌的調(diào)性，而且兼顧了設(shè)計(jì)的美感。值得大家借鑒。
3.情感共鳴類(lèi)
情感共鳴類(lèi)的啟動(dòng)頁(yè)其實(shí)很難，所以這么做得產(chǎn)品很少。但是一旦成功，會(huì)在用戶(hù)心智上打下很深的烙印。
微信&陌陌
不需要在啟動(dòng)頁(yè)寫(xiě)上名稱(chēng)、logo、slogan，用戶(hù)在看到圖片的時(shí)候就知道這是什么產(chǎn)品。微信的這張啟動(dòng)頁(yè)可以說(shuō)是相當(dāng)成功，充分的體現(xiàn)了一個(gè)熟人社交軟件的調(diào)性。用這種形式的啟動(dòng)頁(yè)要注意兩點(diǎn)，一是圖片要符合產(chǎn)品調(diào)性，具有故事性，像微信和陌陌，都是一個(gè)孤單的背影，暗示著人們是社交動(dòng)物，需要和人交流;二是盡量不要更換，像微信的這張圖就從來(lái)沒(méi)換過(guò)，陌陌的啟動(dòng)圖片也一直是背影+風(fēng)景的風(fēng)格，這樣容易在用戶(hù)心中形成統(tǒng)一的認(rèn)知。
4.廣告展示類(lèi)
還有一類(lèi)APP，會(huì)將啟動(dòng)頁(yè)作為變現(xiàn)的渠道，將啟動(dòng)頁(yè)做成廣告頁(yè)。而且一般是先顯示品牌頁(yè)，再顯示廣告頁(yè)，如下：
有道翻譯官
微博
廣告類(lèi)的啟動(dòng)頁(yè)，其實(shí)已經(jīng)完全違背了iOS對(duì)Launch Screen的定位，而且廣告頁(yè)的顯示時(shí)長(zhǎng)長(zhǎng)三秒到五秒不等，反而延長(zhǎng)了用戶(hù)啟動(dòng)APP的等待時(shí)間。
但是這種形式會(huì)給公司帶來(lái)直接利益，尤其對(duì)于一些盈利模式不清晰產(chǎn)品，這種形式無(wú)疑是一種很好的變現(xiàn)手段。在犧牲用戶(hù)體驗(yàn)的基礎(chǔ)上換取一定的利益，這沒(méi)有對(duì)錯(cuò)，只有適不適合。
如果接到需求，要將品牌頁(yè)做成廣告頁(yè)面，至少可以做到這幾點(diǎn)，來(lái)適當(dāng)?shù)奶嵘脩?hù)體驗(yàn)。
一是讓品牌頁(yè)和廣告頁(yè)之間在設(shè)計(jì)上統(tǒng)一，避免割裂感，例如上方的微博和有道翻譯官，都采用保持底部logo元素不變，只變化頁(yè)面的一部分，從而保持兩張界面的統(tǒng)一性;二是在廣告頁(yè)的右下角放置跳過(guò)的button，最好在button上顯示倒計(jì)時(shí)，還能在跳過(guò)的button上加上loading的效果;第三，可以考慮每天只在第一次啟動(dòng)APP時(shí)才出現(xiàn)廣告，減少?gòu)V告出現(xiàn)的次數(shù)等等。
加上倒計(jì)時(shí)以及l(fā)oading效果，都是為了讓用戶(hù)在心理上感覺(jué)時(shí)間過(guò)得快一點(diǎn)，從而提高體驗(yàn);提供跳過(guò)的button是讓用戶(hù)能夠主動(dòng)選擇跳過(guò)廣告;將跳過(guò)放在界面的右下角，是為了方便用戶(hù)單手操作;廣告頁(yè)只在每天第一次啟動(dòng)APP時(shí)顯示，是為了避免多次出現(xiàn)可能會(huì)對(duì)用戶(hù)帶來(lái)厭煩的情緒，反而適得其反。
5.節(jié)日類(lèi)
情人節(jié)、五一勞動(dòng)節(jié)、六一兒童節(jié)等等，都成了APP啟動(dòng)頁(yè)展示自我的地方，在重要節(jié)日將啟動(dòng)頁(yè)設(shè)計(jì)成節(jié)日海報(bào)類(lèi)，不僅可以做到情感化的表達(dá)，有趣的節(jié)日啟動(dòng)頁(yè)還能成為用戶(hù)間的談資，增加產(chǎn)品的口碑。
餓了么&UC瀏覽器
6.其他可能性
除了上述五種常見(jiàn)的啟動(dòng)頁(yè)，其實(shí)啟動(dòng)頁(yè)還有更多的可能性。在生日的當(dāng)天，給你送上生日祝福;成為一次暖心的活動(dòng)H5的入口頁(yè)面等等。
支付寶&QQ(生日祝福)
UC瀏覽器&未知(活動(dòng)入口)
你是否還能想到其他的可能性?歡迎留言，或者可以加入小密圈一起討論。
今天介紹了啟動(dòng)頁(yè)的多種形式以及它們的作用，有為了商業(yè)利益放廣告的，也有為了情懷放充滿(mǎn)意境圖片的，還有強(qiáng)調(diào)品牌的，做情感化設(shè)計(jì)的…。但是，不管一個(gè)產(chǎn)品的啟動(dòng)頁(yè)呈現(xiàn)哪種形式，都不應(yīng)該忘了啟動(dòng)頁(yè)存在的根本原因：為了減少用戶(hù)在等待APP啟動(dòng)時(shí)的焦慮感。而iOS官方為此提供的解決方法是將啟動(dòng)頁(yè)設(shè)計(jì)成和首屏相似，以此讓用戶(hù)在心理認(rèn)為APP啟動(dòng)很快。
當(dāng)你接到要將啟動(dòng)頁(yè)做成廣告或者活動(dòng)入口等需求時(shí)，作為一名產(chǎn)品設(shè)計(jì)師，有義務(wù)向提出該需求的同事說(shuō)明iOS的推薦做法。在此前提下，盡量確保在用戶(hù)體驗(yàn)和公司利益之間，找到最好的平衡點(diǎn)。這也是身為一名用戶(hù)體驗(yàn)設(shè)計(jì)師的價(jià)值所在。
以上就是上海網(wǎng)站制作公司——海淘科技為你推出《剖析APP啟動(dòng)頁(yè)面設(shè)計(jì)》的全部?jī)?nèi)容。想看更多的內(nèi)容，可點(diǎn)擊：建站基本知識(shí)，于此同時(shí)，海淘科技還提供了網(wǎng)站建設(shè)案例，可點(diǎn)擊：電商系統(tǒng)開(kāi)發(fā)案例
