UI設(shè)計(jì)中啟動(dòng)頁(yè)的三種設(shè)計(jì)類型

　　什么是啟動(dòng)頁(yè)?打開屏幕腦子還沒轉(zhuǎn)就第一眼看到的頁(yè)面，就是啟動(dòng)頁(yè)。是不是很含糊?今天AAA教育郭老師就針對(duì)UI設(shè)計(jì)中啟動(dòng)頁(yè)的三種設(shè)計(jì)類型進(jìn)行簡(jiǎn)單的說明。
 

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

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

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

　　規(guī)范型
 

　　品牌推廣型
 

　　商業(yè)需求型
 

　　規(guī)范型
 

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

　　如：

 

　　這是新版的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é)來說就是兩點(diǎn):
 

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

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

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

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

　　品牌推廣型
 

　　這類啟動(dòng)頁(yè)其實(shí)就是在規(guī)范型的基礎(chǔ)上做了一點(diǎn)擴(kuò)展，幫助品牌做一些宣傳。其實(shí)在MD的官方定義中，是允許用戶展示具有品牌特色的啟動(dòng)頁(yè)的，但是在 iOS 中明確說明是不允許的，但是，誰(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è)過渡的頁(yè)面，但是它畢竟是用戶打開產(chǎn)品之后看到的第一個(gè)畫面，所以還是值得花點(diǎn)心思做的。
 

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

　　商業(yè)需求型
 

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

　　如：

 

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

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

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

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

　　總結(jié)
 

　　最后來做個(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)買來做廣告了，那么一定要控制時(shí)間，多注意一些好的App是怎么處理的，比如騰訊，在右上角做了跳過廣告。這樣不僅做了廣告，也適當(dāng)提升了用戶體驗(yàn)。
 

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

　　隨著互聯(lián)網(wǎng)的發(fā)展越來越成熟，相信以后會(huì)有更多的展示方式，設(shè)計(jì)師不僅要站在自己的角度看待問題，還要學(xué)會(huì)審視一切可能改變結(jié)果的因素。確保將商業(yè)需求和用戶體驗(yàn)限定在可控范圍內(nèi)，為產(chǎn)品和用戶做一個(gè)更好的溝通橋梁。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。