這麽有品牌感的啓動頁設計,你嘗試過嗎(ma)?
作者:鼎峰互動 時間:2019-12-14

啓動頁面,用戶打開(kāi)一(yī)個産品第一(yī)個看到的頁面。它可以作爲品牌傳播的重要載體(tǐ),比如淘寶、支付寶的閃屏往往除了傳遞品牌外(wài)還可以成爲一(yī)個品牌廣告的資(zī)源位帶來商(shāng)業價值,今天我(wǒ)們來分(fēn)享下(xià)啓動頁的一(yī)些方向!


C8meV3DPnXWNMwc6HYiZ.jpg!v.jpg


一(yī)、什麽是啓動頁?


i37Ll3m7zwVTSLItrPUl.jpg!v.jpg


啓動頁是用戶對于品牌感知(zhī)的最直觀感受,也是對于介紹産品内容給用戶的最佳領域,在UI設計中(zhōng),它是用戶打開(kāi)APP的初始頁面,在啓動頁的标題和副标題Slogan都是融于品牌調性和APP介紹一(yī)個很好的地方,這裏你可以想象成一(yī)個舞台。

正如前面所說做這類設計有一(yī)個很核心的原則就是體(tǐ)現品牌感,而不是刷設計存在感。

二、啓動頁的結構

1. 承載注冊登錄

這種類型很巧妙的把功能和品牌很好的結合了在一(yī)起,在很多新的APP需要用戶注冊登錄的界面裏面,通常會把産品和注冊登錄結合在一(yī)起,常見國内有微信等等。


y8V4SwY8Z70w4bOvwDQr.jpg!v.jpg


▲這個頁面的啓動頁把登錄和閃屏畫面進行上下(xià)結構,上面啓動頁的品牌畫面,采用比較常用的圖标平鋪風格模式,每個圖标和業務明确融合,看似簡單但是其實設計細節很多,最早期手淘也是采用類似設計手法來設計。


EHzicsh3QS9AlW1lUNjq.jpg!v.jpg


▲這個頁面也是上下(xià)結構,在頂部運用的背景圖片填充,下(xià)面是注冊和登錄入口,也是一(yī)個實用性設計。


9CMsfThv5jjMWCJAuknI.jpg!v (1).jpg


▲這個産品背景沒有做更多的裝飾,看似簡單的一(yī)個頁面,其實設計細節把握很到位,頁面結構采用層疊式構圖設計,結構上運用斜切的設計手法,很好的突出了差異性在裏面,同時核心登錄按鈕清晰,直接引導用戶進行操作。


JG5bbrstZ1btcX4YggR4.jpg!v.jpg


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


adbo1FNsAJ15tacQWIRf.jpg!v.jpg


▲lonut Zamfr用的是深色,LOGO爲圖形結合注冊登錄頁面,在傳遞品牌同時也很好的将功能結合起來。

2. 新功能引導

這一(yī)類型的啓動頁面,适用于新功能介紹,早期的朋友圈,大(dà)家還記得幾張照片拼接的畫面麽,新功能引導的形式比較豐富,可以是視頻(pín),圖片也可以是插畫的形式,一(yī)般類似講故事的形式把功能傳達給用戶。


NJhI93CLCS6qfElw9aBx.jpg!v.jpg


▲FEYNAUB在新功能引導時候,需要用戶輸入位置,很好的把新功能和啓動頁情感調性用插畫的形式表達了出來,顯得不那麽生(shēng)硬很自然傳遞了品牌。


dEl3l9wJ7LXfBKYIeNJP.jpg!v.jpg


▲Numero在新功能引導頁面上,采用了字母和人物(wù)結合的設計技法,襯線體(tǐ)文字和圖形很好的結合在了一(yī)起,給人很精緻時尚的感覺。


0UDTyxLA3Xzf571zrfOU.jpg!v.jpg


▲這個啓動頁設計,也是屬于新的功能介紹,整個設計形式感和圖形感非常強,通過故事性的引導很好的傳達了功能。


wXsikFrF5rqOcneFp4C4.jpg!v.jpg


▲Onboarding的啓動頁設計很好地采用了連續感覺,每張圖片和圖片直接連接很順滑,同時采用2.5D設計技法,但是處理的沒有那麽重,很輕量化,比較适合當下(xià)快速浏覽的場景。


36UWeCaAaiT0pFZ04VqS.jpg!v.jpg


▲Coffee APP的啓動頁面采用目前比較常見的設計手法,插畫和文字的展示,國内這種設計比較多,但是Coffee在色調和圖形處理上相當細膩,簡潔的同時又(yòu)不乏很趣味性設計在裏面。


K8Cptm7UTG0st2p5XQSB.jpg!v.jpg


▲當然目前已經是小(xiǎo)視頻(pín)的時代了,當下(xià)也很多APP的啓動頁面直接采用短視頻(pín)的形式來傳遞給用戶,視頻(pín)的帶入感和沉浸感會更加直觀。


MUSXcmAwr0JmDOfuIOSe.jpg!v.jpg


▲Periscope很巧妙地把功能以插畫的形式結合在界面中(zhōng)了,也是值得我(wǒ)們去(qù)學習的點。


0F5nsHNkzHZpDKQZN9rj.jpg!v.jpg


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

3. 品牌承載

這種結構也運用比較多,直接很簡單的用品牌圖形和一(yī)句文案來傳遞,比較适合于一(yī)些知(zhī)名的産品,本身它們的圖标符号已經是品牌的一(yī)種傳達,無須做過多的修飾,比如蘋果,Twitter,Facebook等等。


jICKtgagrxAoqd277USH.jpg!v.jpg


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


8yy2qFZThrXPpxo1CrNz.jpg!v.jpg


▲稍微加一(yī)點一(yī)點背景色,或者LOGO的形式是一(yī)些大(dà)廠經常使用的調性。


o0KkJR5IakoCNlGeYPL9.png!v.jpg


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


XS4E9P7XWxzh4BnX2Eou.png!v.jpg


▲不得不說國外(wài)設計師在把品牌圖形設計的很極緻,一(yī)個簡單的符号和圖形已經就是最好的品牌表達。

4. 營銷圖片+品牌

在國内電(diàn)商(shāng)裏面運用這種方法比較多,結構比較固定,上面是品牌營銷,下(xià)面是品牌LOGO,一(yī)般這種啓動頁有2種場景:一(yī)種默認狀态,一(yī)種品牌營銷狀态。上面結構可以是容器可以承載任何形式可以是視頻(pín)、圖片、廣告等。


uXtfyppcXVURdymSD5f1.jpg!v.jpg


▲(左圖)正常狀态,淘寶盒子打開(kāi),飛出豐富多彩的商(shāng)品,象征萬能的淘寶;(右圖)營銷狀态,淘寶盒子關閉,配合雙11的廣告運營圖來展現,用戶可以跳過。


DNDBXCaXdqHyMFKZ20LE.jpg!v.jpg


▲(左圖)天貓默認常态;(右圖)營銷活動時候,LOGO收起到底部,頂部固定圖片區域。


06BZHvHGNAEs2ZXa9Phy.jpg!v.jpg


▲(左圖)微博默認狀态;(右圖)微博活動常态。


39FKHzGAyqj8I1x9MFMo.jpg!v.jpg


▲(左圖)蝦米默認常态;(右圖)蝦米活動常态。

三、啓動頁的設計手法

1. 圖标+品牌色+圖案填充

顧名思義,就是品牌色和圖标的展示,上面其實有講過案例,這種比較常見,一(yī)般使用白(bái)底加上品牌LOGO,當然也可以是反色,品牌色+白(bái)色的LOGO是比較常用的形式。


9e9eXimeQZWBm3kxh9j0.jpg!v.jpg


▲上面是一(yī)個簡單的示例,這種設計常用技法有4種:

  • 第1種是白(bái)底和品牌的LOGO

  • 第2種是品牌色加白(bái)色的LOGO

  • 第3種是漸變色加LOGO

  • 第4種是如果覺得純色過于單調可以添加一(yī)些小(xiǎo)圖标模式作爲背景色


GWpOyVsByT0A692M0HVX.jpg!v.jpg


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

2. 圖片運用

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


GAvad61v5fPSqudvfEMk.jpg!v.jpg


一(yī)張好的圖片能形成這個産品用戶的第一(yī)記憶點,有時候還能成爲經典就和電(diàn)影裏面經典畫面一(yī)樣,但是一(yī)定要圖片能很好表達功能的特點,否則毫無意義。


AfeZCHc1rHd3Sk4t7ffa.jpg!v.jpg


3. 插畫技法

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


cB0ITYyxO38rTm9vZDsQ.jpg!v.jpg


4. 圖标模式

圖标模式也是一(yī)個經典技法,背景采用一(yī)些圖形的表達,很好的能傳達産品的功能,最早的手淘和當前版本就是類似風格。


V52btNOGfbnapsDQ8KUS.jpg!v.jpg



sGHQIcHRy9gOgsKwdNaj.jpg!v.jpg


5. 圖形演變

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


wIdiToFScceRkgZBMSyS.jpg!v.jpg


最後

簡簡單單一(yī)個啓動頁面設計,其實背後也有很多的設計思考,我(wǒ)們在做類似設計時候,首先要明确産品的内容和調性,去(qù)選擇一(yī)種合适的,然後在這個框架功能基礎上去(qù)進一(yī)步縮小(xiǎo)設計目标,這樣我(wǒ)們的設計才能做到有理有據是正确的方向。

 


鼎峰互動是一(yī)家以提供南(nán)昌小(xiǎo)程序開(kāi)發、APP開(kāi)發、網站建設爲主的互聯網開(kāi)發公司。依靠對市場獨有的前瞻性,依托人才、經驗、技術、業務等優勢,積極提升企業核心競争力, 開(kāi)拓創新,與時俱進,爲企業用戶提供最優質、便捷、高效的企業服務,爲企業創造價值。
公司網址:jxmswl.net