啟動(dòng)頁(yè)面，用戶打開一個(gè)產(chǎn)品第一個(gè)看到的頁(yè)面。它可以作為品牌傳播的重要載體，比如淘寶，支付寶的閃屏往往除了傳遞品牌以為還可以成為一個(gè)品牌廣告的資源位帶來(lái)商業(yè)價(jià)值，今天我們來(lái)分享下啟動(dòng)頁(yè)的一些方向!

 什么是啟動(dòng)頁(yè)? 

啟動(dòng)頁(yè)是用戶對(duì)于品牌感知的最直觀感受，也是對(duì)于介紹產(chǎn)品內(nèi)容給用戶的最佳領(lǐng)域，在UI設(shè)計(jì)中，它是用戶打開APP的初始頁(yè)面，在啟動(dòng)頁(yè)的標(biāo)題和副標(biāo)題Slogan都是融于品牌調(diào)性和APP介紹一個(gè)很好的地方，這里你可以想象成一個(gè)舞臺(tái)。

正如前面所說做這類設(shè)計(jì)有一個(gè)很核心的原則就是體現(xiàn)品牌感，而不是刷設(shè)計(jì)存在感。

  啟動(dòng)頁(yè)的結(jié)構(gòu)  

1.承載注冊(cè)登錄

這種類型很巧妙的把功能和品牌很好的結(jié)合了在一起，在很多新的APP需要用戶注冊(cè)登錄的界面里面，通常會(huì)把產(chǎn)品和注冊(cè)登錄結(jié)合在一起，常見國(guó)內(nèi)有微信等等。

▲ 這個(gè)頁(yè)面的啟動(dòng)頁(yè)把登錄和閃屏畫面進(jìn)行上下結(jié)構(gòu)，上面啟動(dòng)頁(yè)的品牌畫面，采用比較常用的圖標(biāo)平鋪風(fēng)格模式，每個(gè)圖標(biāo)和業(yè)務(wù)明確融合，看似簡(jiǎn)單但是其實(shí)設(shè)計(jì)細(xì)節(jié)很多，最早期手淘也是采用類似設(shè)計(jì)手法來(lái)設(shè)計(jì)。

▲ 這個(gè)頁(yè)面也是上下結(jié)構(gòu)，在頂部運(yùn)用的背景圖片填充，下面是注冊(cè)和登錄入口，也是一個(gè)實(shí)用性設(shè)計(jì)。

▲ 這個(gè)產(chǎn)品背景沒有做更多的裝飾，看似簡(jiǎn)單的一個(gè)頁(yè)面，其實(shí)設(shè)計(jì)細(xì)節(jié)把握很到位，頁(yè)面結(jié)構(gòu)采用層疊式構(gòu)圖設(shè)計(jì)，結(jié)構(gòu)上運(yùn)用斜切的設(shè)計(jì)手法，很好的突出了差異性在里面，同時(shí)核心登錄按鈕清晰，直接引導(dǎo)用戶進(jìn)行操作。

▲ steller的設(shè)計(jì)，也是在布局上運(yùn)用斜切版式，對(duì)于背景的選擇則是采用的圖片加彩色蒙版的設(shè)計(jì)趨勢(shì)，整體設(shè)計(jì)很通透。

▲ lonut Zamfr用的是深色，LOGO為圖形結(jié)合注冊(cè)登錄頁(yè)面，在傳遞品牌同時(shí)也很好的將功能結(jié)合起來(lái)。

2.新功能引導(dǎo)

這一類型的啟動(dòng)頁(yè)面，適用于新功能介紹，早期的朋友圈，大家還記得幾張照片拼接的畫面么，新功能引導(dǎo)的形式比較豐富，可以是視頻，圖片也可以是插畫的形式，一般類似講故事的形式把功能傳達(dá)給用戶。

▲ FEYNAUB在新功能引導(dǎo)時(shí)候，需要用戶輸入位置，很好的把新功能和啟動(dòng)頁(yè)情感調(diào)性用插畫的形式表達(dá)了出來(lái)，顯得不那么生硬很自然傳遞了品牌。

▲ Numero在新功能引導(dǎo)頁(yè)面上，采用了字母和人物結(jié)合的設(shè)計(jì)技法，襯線體文字和圖形很好的結(jié)合在了一起，給人很精致時(shí)尚的感覺。

▲ 這個(gè)啟動(dòng)頁(yè)設(shè)計(jì)，也是屬于新的功能介紹，整個(gè)設(shè)計(jì)形式感和圖形感非常強(qiáng)，通過故事性的引導(dǎo)很好的傳達(dá)了功能。

▲ Onboarding的啟動(dòng)頁(yè)設(shè)計(jì)很好的采用了連續(xù)感覺，每張圖片和圖片直接連接很順滑，同時(shí)采用2.5D設(shè)計(jì)技法，但是處理的沒有那么重，很輕量化，比較適合當(dāng)下快速瀏覽的場(chǎng)景。

▲ Coffee APP的啟動(dòng)頁(yè)面采用目前比較常見的設(shè)計(jì)手法，插畫和文字的展示，國(guó)內(nèi)這種設(shè)計(jì)比較多，但是Coffee在色調(diào)和圖形處理上相當(dāng)細(xì)膩，簡(jiǎn)潔的同時(shí)又不乏很趣味性設(shè)計(jì)在里面。

▲ 當(dāng)然目前已經(jīng)是小視頻的時(shí)代了，當(dāng)下也很多APP的啟動(dòng)頁(yè)面直接采用短視頻的形式來(lái)傳遞給用戶，視頻的帶入感和沉浸感會(huì)更加直觀。

▲ Periscope很巧妙的把功能以插畫的形式結(jié)合在界面中了，也是值得我們?nèi)W(xué)習(xí)的點(diǎn)。

▲ 非常喜歡的一個(gè)日本的APP名字Sooshi，引導(dǎo)頁(yè)設(shè)計(jì)非常棒，從圖片選擇，圖片光線處理，文字處理都非常高水準(zhǔn)，所以并不是背景圖用照片就一定很low，處理好了，一樣是很高大上。

3.品牌承載

這種結(jié)構(gòu)也運(yùn)用比較多，直接很簡(jiǎn)單的用品牌圖形和一句文案來(lái)傳遞，比較適合于一些知名的產(chǎn)品，本身它們的圖標(biāo)符號(hào)已經(jīng)是品牌的一種傳達(dá)，無(wú)須做過多的修飾，比如蘋果，Twitter，F(xiàn)acebook等等。

▲ 簡(jiǎn)單粗暴，品牌色+LOGO就足夠傳遞一起下表達(dá)的東西，用戶對(duì)于這種簡(jiǎn)潔品牌表達(dá)也能很好接受。

▲ 稍微加一點(diǎn)一點(diǎn)背景色，或者LOGO的形式是一些大廠經(jīng)常使用的調(diào)性。

▲ 也是同樣LOGO圖形結(jié)合品牌色，有時(shí)候簡(jiǎn)簡(jiǎn)單單快速進(jìn)入到主頁(yè)面功能也是用戶最迫切需要的。

▲ 不得不說國(guó)外設(shè)計(jì)師在把品牌圖形設(shè)計(jì)的很極致，一個(gè)簡(jiǎn)單的符號(hào)和圖形已經(jīng)就是最好的品牌表達(dá)。

4.營(yíng)銷圖片+品牌

在國(guó)內(nèi)電商里面運(yùn)用這種方法比較多，結(jié)構(gòu)比較固定，上面是品牌營(yíng)銷，下面是品牌LOGO, 一般這種啟動(dòng)頁(yè)2種場(chǎng)景，一種默認(rèn)狀態(tài)，一種品牌營(yíng)銷狀態(tài)，上面結(jié)構(gòu)可以是容器可以承載任何形式可以是視頻，圖片，廣告等。

▲ （左圖）正常狀態(tài)，淘寶盒子打開，飛出豐富多彩的商品，象征萬(wàn)能的淘寶；（右圖）營(yíng)銷狀態(tài)，淘寶盒子關(guān)閉，配合雙11的廣告運(yùn)營(yíng)圖來(lái)展現(xiàn)，用戶可以跳過。

▲ （左圖）天貓默認(rèn)常態(tài)；（右圖）營(yíng)銷活動(dòng)時(shí)候，LOGO收起到底部，頂部固定圖片區(qū)域。

▲（左圖） 微博默認(rèn)狀態(tài)；（右圖）微博活動(dòng)常態(tài)。

▲ （左圖）蝦米默認(rèn)常態(tài)；（右圖）蝦米活動(dòng)常態(tài)。

 啟動(dòng)頁(yè)的設(shè)計(jì)手法 

1.圖標(biāo)+品牌色+圖案填充

顧名思義，就是品牌色和圖標(biāo)的展示，上面其實(shí)有講過案例，這種比較常見，一般使用白底加上品牌LOGO，當(dāng)然也可以是反色，品牌色+白色的LOGO是比較常用的形式。

▲ 上面是一個(gè)簡(jiǎn)單的示例，這種設(shè)計(jì)常用技法有4種：第1種是白底和品牌的LOGO，第2種是品牌色加白色的LOGO，第3種是漸變色加LOGO，第4種是如果覺得純色過于單調(diào)可以添加一些小圖標(biāo)模式作為背景色。

▲ 這些都是比較好的通過品牌色以及品牌已有是LOGO和卡通形象的一些常用設(shè)計(jì)手法，其實(shí)還是很豐富，關(guān)鍵在于設(shè)計(jì)師對(duì)于細(xì)節(jié)的處理和把控。

2.圖片運(yùn)用

圖片比文字更容易傳遞情緒，比如MOMO每次的圖片調(diào)性就非常棒，還有微信就是很好的案例。

一張好的圖片能形成這個(gè)產(chǎn)品用戶的第一記憶點(diǎn)，有時(shí)候還能成為經(jīng)典就和電影里面經(jīng)典畫面一樣，但是一定要圖片能很好表達(dá)功能的特點(diǎn)，否則毫無(wú)意義。

3.插畫技法

這種目前用的比較多，也是個(gè)主流是形式，一般是配合節(jié)日情感化來(lái)運(yùn)營(yíng)，能很好的體現(xiàn)出頁(yè)面的調(diào)性，但是插畫的形式和圖片形式一樣需要定期更換，否則很容易造成審美疲勞。

4.圖標(biāo)模式

圖標(biāo)模式也是一個(gè)經(jīng)典技法，背景采用一些圖形的表達(dá)，很好的能傳達(dá)產(chǎn)品的功能，最早的手淘和當(dāng)前版本就是類似風(fēng)格。

5.圖形演變

圖形演變一般基于品牌LOGO，把LOGO圖形當(dāng)視覺容器，根據(jù)圖形來(lái)設(shè)計(jì)，比如常見的天貓貓頭，QQ音樂的音樂光盤，還有QQ空間星星等等，這類型對(duì)LOGO圖形要求比較高，必須圖形足夠簡(jiǎn)單，圖形容易拓展。

 最后 

簡(jiǎn)簡(jiǎn)單單一個(gè)啟動(dòng)頁(yè)面設(shè)計(jì)，其實(shí)背后也有很多的設(shè)計(jì)思考，我們?cè)谧鲱愃圃O(shè)計(jì)時(shí)候，首先要明確產(chǎn)品的內(nèi)容和調(diào)性，去選擇一種合適的，然后在這個(gè)框架功能基礎(chǔ)上去進(jìn)一步縮小設(shè)計(jì)目標(biāo)，這樣我們的設(shè)計(jì)才能做到有理有據(jù)是正確的方向。

原文地址：我們的設(shè)計(jì)日記（公眾號(hào)）

作者：sky