本文以大量案例為依據(jù)，向大家介紹了什么是啟動頁設(shè)計以及其中的設(shè)計手法。

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

一、什么是啟動頁?

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

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

二、啟動頁的結(jié)構(gòu)

1. 承載注冊登錄

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. 品牌承載

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

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

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

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

▲不得不說國外設(shè)計師在把品牌圖形設(shè)計的很極致，一個簡單的符號和圖形已經(jīng)就是最好的品牌表達。

4. 營銷圖片+品牌

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

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

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

▲（左圖）微博默認狀態(tài)；（右圖）微博活動常態(tài)。

▲（左圖）蝦米默認常態(tài)；（右圖）蝦米活動常態(tài)。

三、啟動頁的設(shè)計手法

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

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

▲上面是一個簡單的示例，這種設(shè)計常用技法有4種：

• 第1種是白底和品牌的LOGO
• 第2種是品牌色加白色的LOGO
• 第3種是漸變色加LOGO
• 第4種是如果覺得純色過于單調(diào)可以添加一些小圖標(biāo)模式作為背景色

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

2. 圖片運用

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

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

3. 插畫技法

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

4. 圖標(biāo)模式

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

5. 圖形演變

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

最后

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

#專欄作家#

Sky，微信公眾號：我們的設(shè)計日記（ID：helloskys），人人都是產(chǎn)品經(jīng)理專欄作家。支付寶體驗設(shè)計專家，阿里巴巴天貓設(shè)計專家；10年知名互聯(lián)網(wǎng)公司設(shè)計經(jīng)驗，對于產(chǎn)品從0到1、品牌定位、金融產(chǎn)品、設(shè)計規(guī)范、運營規(guī)范、大促等有豐富實戰(zhàn)經(jīng)驗。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash, 基于CC0協(xié)議。