搜集了50多款產(chǎn)品,發(fā)現(xiàn)啟動頁原來有這么多做法,遠(yuǎn)比我想象中多呀!

2021-12-6    seo達(dá)人


圖片

后來自己做啟動頁的時(shí)候,也只放了一個(gè)圖標(biāo),客戶說看看能不能用別的方式,然后我就去研究了一下,看看到底啟動圖有多少種做法。

 

1.圖標(biāo) 

第一種就是我們最常見的,也是啟動圖成本最小的一種方式,圖標(biāo)直接往上面咔咔一放,就像下面這種:

圖片

但并不是所有的都是白色底哦,有一些會使用全屏色塊的形式,比如這些:

圖片

這樣的沖擊力會比較強(qiáng),但也需要注意,顏色別整太刺眼了,那樣會看著很難受的。

 

2.solan

有一些平臺會宣傳自己的使命、價(jià)值等等,比如最常見:

知乎: 有問題就會有答案

貓眼: 娛樂看貓眼

糗事百科:快樂你就不孤單

效果圖如下:

圖片

這其中,有些修了字體,有些做了排版等等,當(dāng)然他們并不是只放solan,頁面下方還是會放上圖標(biāo)。

這種突出價(jià)值、使命的方式也是非常不錯(cuò)的,也是啟動圖常用的一種表現(xiàn)形式。

 

3.插畫

接下來的方式是突出插畫,用自己的形象延展一些好看的插畫,比如咸魚:

圖片

再比如躺平:

圖片

再比如唱吧:

圖片

等等,這種方式會讓品牌更加生動、豐富,一張好看的插圖會讓用戶印象深刻。

 

4.圖形

圖形是在app設(shè)計(jì)體系內(nèi)非常重要的一個(gè)元素,比如我們圖標(biāo)本身就是一個(gè)圖形,像qq這種,讓其圖形外輪廓與一些效果相互結(jié)合:

圖片

達(dá)到一種沖擊較強(qiáng)的效果,以此來凸顯圖形本身。

再比如,我們還可以利用圖標(biāo)來延展圖形,就像uc頭條鹿角延展出的圖形:

圖片

或者像moo music延展出兩個(gè)圓形,表達(dá)星球的含義:

圖片

用圖形延展做啟動圖,有一個(gè)很重要的優(yōu)勢,那就是設(shè)計(jì)感很強(qiáng),讓用戶感覺很高級很舒服!

 

 5.圖片 

還有一種方式就是利用圖標(biāo)來做啟動圖,一般會使用這種方式的,基本都是產(chǎn)品本身比較注重“圖片“這個(gè)元素,比如像健身啊、交友啊、設(shè)計(jì)類產(chǎn)品啊等等,希望通過圖片(比如異性圖片,高質(zhì)量作品)來吸引用戶。

比如ui中國的啟動圖:

圖片

再比如陌陌的啟動圖:

圖片

都是使用圖片作為主要元素制作的!

 

6.3D

現(xiàn)在3d這么火,3d的設(shè)計(jì)表現(xiàn)形式肯定是少不了的,比如下面這些:

圖片

都是用了3d的表現(xiàn)手法,而且我覺得以后可能會有越來越多的產(chǎn)品選擇這種形式,來增加沖擊力和獨(dú)特性!

 

總結(jié)

當(dāng)然,不論啟動圖的側(cè)重點(diǎn)是什么形式,插畫也好、圖片也好,都還是會放上自己的品牌圖標(biāo),這是鐵律,剩下的都還是有一定的發(fā)揮空間。
好了,以上就是看了很多產(chǎn)品之后,關(guān)于啟動圖表現(xiàn)形式的小總結(jié),希望能給大家一點(diǎn)啟發(fā)和靈感,做出適合自己產(chǎn)品的啟動圖,么么扔!

 

原文地址:心設(shè)計(jì)鋪(公眾號)
作者:菜心設(shè)計(jì)鋪
轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》搜集了50多款產(chǎn)品,發(fā)現(xiàn)啟動頁原來有這么多做法,遠(yuǎn)比我想象中多呀!

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)


分享本文至:

日歷

鏈接

個(gè)人資料

存檔