@呆呆丶L?：這年頭設(shè)計(jì)一個(gè)App越來(lái)越有講究，大到一個(gè)框架，小到一個(gè)按鈕，拿捏不好就容易失去用戶。今天這篇文章通過(guò)分析眾多App ，總結(jié)了3種啟動(dòng)頁(yè)的類型，詳細(xì)介紹不同啟動(dòng)頁(yè)的作用和優(yōu)缺點(diǎn)，建議閱讀。

如果是引導(dǎo)頁(yè)，可以參考騰訊的教程：《騰訊實(shí)戰(zhàn)干貨！怎么讓引導(dǎo)頁(yè)不再是無(wú)用小透明？》

什么是啟動(dòng)頁(yè)？打開屏幕腦子還沒轉(zhuǎn)就第一眼看到的頁(yè)面，就是啟動(dòng)頁(yè)。是不是很含糊？

講的專業(yè)點(diǎn)就是：當(dāng)打開一個(gè)應(yīng)用程序時(shí)，在應(yīng)用啟動(dòng)的過(guò)程中或在APP打開的過(guò)程中所顯示的一個(gè)占位符。它存在的目的就是為了讓用戶在等待的過(guò)程中忽略這個(gè)開啟的過(guò)程，其實(shí)也就是大家所說(shuō)的提高了用戶體驗(yàn)度，降低用戶焦慮感。

由此可以看出，啟動(dòng)頁(yè)就是一個(gè)「過(guò)渡頁(yè)面」，產(chǎn)品根據(jù)這個(gè)應(yīng)用的性能來(lái)判斷在程序開啟過(guò)程中頁(yè)面停留時(shí)間的長(zhǎng)短，可能有1秒，也可能有3秒。

那么很多企業(yè)就會(huì)利用這個(gè)機(jī)會(huì)做一個(gè)營(yíng)銷手段，當(dāng)然也有為了用戶體驗(yàn)而放棄宣傳品牌的產(chǎn)品。所以下面我把啟動(dòng)頁(yè)分為三類，來(lái)專門說(shuō)說(shuō)它們不同的作用。

• 規(guī)范型
• 品牌推廣型
• 商業(yè)需求型

規(guī)范型

什么是規(guī)范型？根據(jù) iOS 和MD 的官方定義來(lái)說(shuō)，啟動(dòng)頁(yè)應(yīng)該是不打擾用戶，利用進(jìn)入應(yīng)用后的第一個(gè)界面的框架截圖來(lái)做啟動(dòng)頁(yè)，這里的截圖是去掉里面的內(nèi)容的。它的作用就跟上面說(shuō)的一樣，降低用戶焦慮感。

如：

這是新版的Instagram，它的啟動(dòng)頁(yè)面就是首頁(yè)的框架，去掉了里面所有的內(nèi)容，除了標(biāo)題。這樣就好像是用戶進(jìn)入了應(yīng)用，它已經(jīng)在加載，感覺非?？焖俚膯?dòng)了，讓用戶覺得應(yīng)用性能好，速度快。

這就是iOS 官方給出的關(guān)于啟動(dòng)頁(yè)的定義展示方式，總結(jié)來(lái)說(shuō)就是兩點(diǎn):

1. 內(nèi)容盡量的少；

2. 展現(xiàn)時(shí)間盡可能的短；

這樣做的目的也已經(jīng)很明確，就是改善用戶體驗(yàn)度。你可能會(huì)覺得官方的這些準(zhǔn)則會(huì)讓啟動(dòng)頁(yè)看起來(lái)顯得乏味無(wú)趣。但他們就是這么想的，在他們看來(lái)，啟動(dòng)頁(yè)不是讓你展示什么品牌藝術(shù)，而是增強(qiáng)用戶使用產(chǎn)品的感知度。

但是慢慢的，大多數(shù)人認(rèn)為如果不把這種絕妙的位置利用起來(lái)，都覺得對(duì)不起祖國(guó)的栽培。因此下面就出現(xiàn)了品牌推廣型啟動(dòng)頁(yè)。

品牌推廣型

這類啟動(dòng)頁(yè)其實(shí)就是在規(guī)范型的基礎(chǔ)上做了一點(diǎn)擴(kuò)展，幫助品牌做一些宣傳。其實(shí)在MD的官方定義中，是允許用戶展示具有品牌特色的啟動(dòng)頁(yè)的，但是在 iOS 中明確說(shuō)明是不允許的，但是，誰(shuí)管他呢，哈哈哈。通常來(lái)說(shuō)，這類啟動(dòng)頁(yè)會(huì)包括LOGO、品牌名稱、Slogan（Slogan更多的是國(guó)內(nèi)的APP會(huì)加入）這三個(gè)元素。

如：

淘寶在品牌推廣這塊做的還是相當(dāng)好的，從啟動(dòng)頁(yè)就可以看出確實(shí)花了不少心思。這種啟動(dòng)頁(yè)面對(duì)于產(chǎn)品而言，可以提高它們的知名度，很好的起到了宣傳的作用。

有部分App還會(huì)把這塊做成一個(gè)小動(dòng)畫，但是褒貶不一，有的人認(rèn)為經(jīng)常出現(xiàn)太煩，也有的人認(rèn)為很炫酷，每次打開都感覺產(chǎn)品很nice。

在做這類頁(yè)面時(shí)，要注意風(fēng)格的搭配，不要太突兀，影響了產(chǎn)品整體的視覺效果。雖然這只是一個(gè)過(guò)渡的頁(yè)面，但是它畢竟是用戶打開產(chǎn)品之后看到的第一個(gè)畫面，所以還是值得花點(diǎn)心思做的。

我的建議是，如果沒有商業(yè)需求，有品牌名稱和LOGO就足夠了，代入感也強(qiáng)，不會(huì)犯錯(cuò)。

商業(yè)需求型

再來(lái)說(shuō)說(shuō)商業(yè)需求型的啟動(dòng)頁(yè)，它就是產(chǎn)品利用這塊區(qū)域?yàn)樯碳易鰪V告，從而獲得收益，這種平時(shí)應(yīng)該經(jīng)常會(huì)看到。通常這類啟動(dòng)頁(yè)的展示時(shí)間在3到5秒不等，是用戶最不喜歡的一種。

如：

騰訊新聞是比較典型的一類，它很好的利用了這塊區(qū)域來(lái)做廣告。一般的產(chǎn)品是沒辦法做到的，畢竟人家是騰訊，不論是用戶使用量還是品牌知名度，都是業(yè)內(nèi)名列前茅的。但是有注意到么，騰訊新聞會(huì)先彈出左邊（上圖）的啟動(dòng)頁(yè)，再?gòu)棾鲇疫叄ㄉ蠄D）的廣告，它利用了啟動(dòng)原則加入了廣告的頁(yè)面。讓用戶以為App已經(jīng)可以使用了，其實(shí)還需要跳過(guò)這個(gè)廣告。

不過(guò)也有一些產(chǎn)品也會(huì)做這類啟動(dòng)頁(yè)，但是要注意，無(wú)論你有什么目的，都不要為了廣告而在啟動(dòng)頁(yè)停留過(guò)長(zhǎng)時(shí)間，這樣不僅會(huì)流失用戶，到頭來(lái)連商家都不找你了。

還有些產(chǎn)品，做到了讓人無(wú)力吐槽的事情。就是先出現(xiàn)品牌推廣型啟動(dòng)頁(yè)，以為要進(jìn)去首頁(yè)了，結(jié)果沒有，出來(lái)的是廣告。足足讓我等了6、7秒時(shí)間才進(jìn)去。(我果斷卸了)

有時(shí)候在商業(yè)利益和用戶體驗(yàn)之間確實(shí)很難做到平衡，所以一定要慎重。

總結(jié)

最后來(lái)做個(gè)總結(jié)，看看在做啟動(dòng)頁(yè)時(shí)要注意哪些事項(xiàng):

1. 如果你的產(chǎn)品注重體驗(yàn)，暫時(shí)還沒有商業(yè)需求也不需要做品牌推廣，那墻裂推薦規(guī)范型。

2. 如果用了品牌推廣型啟動(dòng)頁(yè)，那么一定不要頻繁的更換，要用潛移默化的方式對(duì)用戶產(chǎn)生影響，讓用戶深刻記住你的品牌形象。

3. 如果你的啟動(dòng)頁(yè)被商家購(gòu)買來(lái)做廣告了，那么一定要控制時(shí)間，多注意一些好的App是怎么處理的，比如騰訊，在右上角做了跳過(guò)廣告。這樣不僅做了廣告，也適當(dāng)提升了用戶體驗(yàn)。

4. 啟動(dòng)頁(yè)最好是在產(chǎn)品開啟的時(shí)候才出現(xiàn)，某吧錄歌軟件每次在錄完歌之后切換到其他應(yīng)用后，再跳轉(zhuǎn)回來(lái)就會(huì)出現(xiàn)啟動(dòng)頁(yè)然后再跳轉(zhuǎn)到你之前的頁(yè)面，這樣的體驗(yàn)其實(shí)很不好。

隨著互聯(lián)網(wǎng)的發(fā)展越來(lái)越成熟，相信以后會(huì)有更多的展示方式，設(shè)計(jì)師不僅要站在自己的角度看待問題，還要學(xué)會(huì)審視一切可能改變結(jié)果的因素。確保將商業(yè)需求和用戶體驗(yàn)限定在可控范圍內(nèi)，為產(chǎn)品和用戶做一個(gè)更好的溝通橋梁。

歡迎關(guān)注作者微信公眾號(hào)：

「目前最熱門的彌散陰影教程系列」

1. 新手版：《簡(jiǎn)單3步教你快速畫出時(shí)尚漂亮的彌散陰影》
2. 進(jìn)階版：《一份簡(jiǎn)單易上手的青春彌散陰影修煉手冊(cè)》
3. 正常版：《GUI設(shè)計(jì)中如何做出有格調(diào)的投影？》
4. 通關(guān)版：《熱門教程！超火的彌散陰影全方位通關(guān)指南》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量160萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com