什么是啟動(dòng)頁?
正如前面所說做這類設(shè)計(jì)有一個(gè)很核心的原則就是體現(xiàn)品牌感，而不是刷設(shè)計(jì)存在感。
啟動(dòng)頁的結(jié)構(gòu)
1.承載注冊(cè)登錄
這種類型很巧妙的把功能和品牌很好的結(jié)合了在一起，在很多新的APP需要用戶注冊(cè)登錄的界面里面，通常會(huì)把產(chǎn)品和注冊(cè)登錄結(jié)合在一起，常見國內(nèi)有微信等等。
▲ 這個(gè)頁面的啟動(dòng)頁把登錄和閃屏畫面進(jìn)行上下結(jié)構(gòu)，上面啟動(dòng)頁的品牌畫面，采用比較常用的圖標(biāo)平鋪風(fēng)格模式，每個(gè)圖標(biāo)和業(yè)務(wù)明確融合，看似簡單但是其實(shí)設(shè)計(jì)細(xì)節(jié)很多，最早期手淘也是采用類似設(shè)計(jì)手法來設(shè)計(jì)。
▲ 這個(gè)頁面也是上下結(jié)構(gòu)，在頂部運(yùn)用的背景圖片填充，下面是注冊(cè)和登錄入口，也是一個(gè)實(shí)用性設(shè)計(jì)。
▲ 這個(gè)產(chǎn)品背景沒有做更多的裝飾，看似簡單的一個(gè)頁面，其實(shí)設(shè)計(jì)細(xì)節(jié)把握很到位，頁面結(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è)登錄頁面，在傳遞品牌同時(shí)也很好的將功能結(jié)合起來。
2.新功能引導(dǎo)
這一類型的啟動(dòng)頁面，適用于新功能介紹，早期的朋友圈，大家還記得幾張照片拼接的畫面么，新功能引導(dǎo)的形式比較豐富，可以是視頻，圖片也可以是插畫的形式，一般類似講故事的形式把功能傳達(dá)給用戶。
▲ FEYNAUB在新功能引導(dǎo)時(shí)候，需要用戶輸入位置，很好的把新功能和啟動(dòng)頁情感調(diào)性用插畫的形式表達(dá)了出來，顯得不那么生硬很自然傳遞了品牌。
▲ Numero在新功能引導(dǎo)頁面上，采用了字母和人物結(jié)合的設(shè)計(jì)技法，襯線體文字和圖形很好的結(jié)合在了一起，給人很精致時(shí)尚的感覺。
▲ 這個(gè)啟動(dòng)頁設(shè)計(jì)，也是屬于新的功能介紹，整個(gè)設(shè)計(jì)形式感和圖形感非常強(qiáng)，通過故事性的引導(dǎo)很好的傳達(dá)了功能。
▲ Onboarding的啟動(dòng)頁設(shè)計(jì)很好的采用了連續(xù)感覺，每張圖片和圖片直接連接很順滑，同時(shí)采用2.5D設(shè)計(jì)技法，但是處理的沒有那么重，很輕量化，比較適合當(dāng)下快速瀏覽的場(chǎng)景。
▲ Coffee APP的啟動(dòng)頁面采用目前比較常見的設(shè)計(jì)手法，插畫和文字的展示，國內(nèi)這種設(shè)計(jì)比較多，但是Coffee在色調(diào)和圖形處理上相當(dāng)細(xì)膩，簡潔的同時(shí)又不乏很趣味性設(shè)計(jì)在里面。
▲ 當(dāng)然目前已經(jīng)是小視頻的時(shí)代了，當(dāng)下也很多APP的啟動(dòng)頁面直接采用短視頻的形式來傳遞給用戶，視頻的帶入感和沉浸感會(huì)更加直觀。
▲ Periscope很巧妙的把功能以插畫的形式結(jié)合在界面中了，也是值得我們?nèi)W(xué)習(xí)的點(diǎn)。
▲ 非常喜歡的一個(gè)日本的APP名字Sooshi，引導(dǎo)頁設(shè)計(jì)非常棒，從圖片選擇，圖片光線處理，文字處理都非常高水準(zhǔn)，所以并不是背景圖用照片就一定很low，處理好了，一樣是很高大上。
3.品牌承載
這種結(jié)構(gòu)也運(yùn)用比較多，直接很簡單的用品牌圖形和一句文案來傳遞，比較適合于一些知名的產(chǎn)品，本身它們的圖標(biāo)符號(hào)已經(jīng)是品牌的一種傳達(dá)，無須做過多的修飾，比如蘋果，Twitter，F(xiàn)acebook等等。
▲ 簡單粗暴，品牌色+LOGO就足夠傳遞一起下表達(dá)的東西，用戶對(duì)于這種簡潔品牌表達(dá)也能很好接受。
▲ 稍微加一點(diǎn)一點(diǎn)背景色，或者LOGO的形式是一些大廠經(jīng)常使用的調(diào)性。
▲ 也是同樣LOGO圖形結(jié)合品牌色，有時(shí)候簡簡單單快速進(jìn)入到主頁面功能也是用戶最迫切需要的。
▲ 不得不說國外設(shè)計(jì)師在把品牌圖形設(shè)計(jì)的很極致，一個(gè)簡單的符號(hào)和圖形已經(jīng)就是最好的品牌表達(dá)。
4.營銷圖片+品牌
在國內(nèi)電商里面運(yùn)用這種方法比較多，結(jié)構(gòu)比較固定，上面是品牌營銷，下面是品牌LOGO, 一般這種啟動(dòng)頁2種場(chǎng)景，一種默認(rèn)狀態(tài)，一種品牌營銷狀態(tài)，上面結(jié)構(gòu)可以是容器可以承載任何形式可以是視頻，圖片，廣告等。
▲ （左圖）正常狀態(tài)，淘寶盒子打開，飛出豐富多彩的商品，象征萬能的淘寶；（右圖）營銷狀態(tài)，淘寶盒子關(guān)閉，配合雙11的廣告運(yùn)營圖來展現(xiàn)，用戶可以跳過。
▲ （左圖）天貓默認(rèn)常態(tài)；（右圖）營銷活動(dòng)時(shí)候，LOGO收起到底部，頂部固定圖片區(qū)域。
▲（左圖） 微博默認(rèn)狀態(tài)；（右圖）微博活動(dòng)常態(tài)。
▲ （左圖）蝦米默認(rèn)常態(tài)；（右圖）蝦米活動(dòng)常態(tài)。
啟動(dòng)頁的設(shè)計(jì)手法
1.圖標(biāo)+品牌色+圖案填充
顧名思義，就是品牌色和圖標(biāo)的展示，上面其實(shí)有講過案例，這種比較常見，一般使用白底加上品牌LOGO，當(dāng)然也可以是反色，品牌色+白色的LOGO是比較常用的形式。
▲ 上面是一個(gè)簡單的示例，這種設(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)，否則毫無意義。
3.插畫技法
這種目前用的比較多，也是個(gè)主流是形式，一般是配合節(jié)日情感化來運(yùn)營，能很好的體現(xiàn)出頁面的調(diào)性，但是插畫的形式和圖片形式一樣需要定期更換，否則很容易造成審美疲勞。
4.圖標(biāo)模式
圖標(biāo)模式也是一個(gè)經(jīng)典技法，背景采用一些圖形的表達(dá)，很好的能傳達(dá)產(chǎn)品的功能，最早的手淘和當(dāng)前版本就是類似風(fēng)格。
5.圖形演變
圖形演變一般基于品牌LOGO，把LOGO圖形當(dāng)視覺容器，根據(jù)圖形來設(shè)計(jì)，比如常見的天貓貓頭，QQ音樂的音樂光盤，還有QQ空間星星等等，這類型對(duì)LOGO圖形要求比較高，必須圖形足夠簡單，圖形容易拓展。
最后
簡簡單單一個(gè)啟動(dòng)頁面設(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
