案例:這么有品牌感的啟動(dòng)頁(yè)設(shè)計(jì),你嘗試過(guò)嗎?

sky
1 評(píng)論 6811 瀏覽 33 收藏 15 分鐘

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

啟動(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)。

正如前面所說(shuō)做這類設(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)品背景沒(méi)有做更多的裝飾,看似簡(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),通過(guò)故事性的引導(dǎo)很好的傳達(dá)了功能。

▲Onboarding的啟動(dòng)頁(yè)設(shè)計(jì)很好地采用了連續(xù)感覺,每張圖片和圖片直接連接很順滑,同時(shí)采用2.5D設(shè)計(jì)技法,但是處理的沒(méi)有那么重,很輕量化,比較適合當(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ú)須做過(guò)多的修飾,比如蘋果,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è)面功能也是用戶最迫切需要的。

▲不得不說(shuō)國(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),用戶可以跳過(guò)。

▲(左圖)天貓默認(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í)有講過(guò)案例,這種比較常見,一般使用白底加上品牌LOGO,當(dāng)然也可以是反色,品牌色+白色的LOGO是比較常用的形式。

▲上面是一個(gè)簡(jiǎn)單的示例,這種設(shè)計(jì)常用技法有4種:

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

▲這些都是比較好的通過(guò)品牌色以及品牌已有是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音樂(lè)的音樂(lè)光盤,還有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ù)是正確的方向。

#專欄作家#

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

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 分不清啟動(dòng)頁(yè),引導(dǎo)頁(yè)和閃屏廣告頁(yè)

    來(lái)自上海 回復(fù)