App啟動(dòng)頁，也稱閃屏頁，最初是為緩解用戶等待Web/iOS/Android App數(shù)據(jù)加載的焦慮情緒而出現(xiàn)，后被設(shè)計(jì)師巧妙用于品牌文化展示，服務(wù)特色介紹以及功能界面熟悉等平臺進(jìn)行設(shè)計(jì)，被賦予了更加豐富而實(shí)際的作用。

然而，即使是簡單的使用圖片，文字，以及色彩的不同直接展示軟件或產(chǎn)品功能文化的啟動(dòng)頁，也會(huì)給用戶帶來完全不同的感受和體驗(yàn)。

那么，作為UX/UI設(shè)計(jì)使，究竟如何才能巧妙而富有創(chuàng)意的結(jié)合簡單圖片，文字，圖標(biāo)以及l(fā)ogo之類常見元素，設(shè)計(jì)出讓用戶眼前一亮，心動(dòng)而忍不住想要嘗試，而非直接離開的web或mobile app啟動(dòng)頁呢？

以下就跟著小編的腳步，了解和分析12款最新且最具代表性的Web/iOS/Android App啟動(dòng)頁設(shè)計(jì)實(shí)例，并結(jié)合小編最常用的一款更快，更簡單的原型工具--——Mockplus, 介紹創(chuàng)建此類設(shè)計(jì)案例原型，需要注意和牢記的相關(guān)技巧。希望對大家有所幫助：

1.Splash screen

設(shè)計(jì)師：Luis Alves

亮點(diǎn)：結(jié)合logo主題色，直觀展示品牌，加深用戶印象

這款設(shè)計(jì)雖然看起來十分簡單，但卻是采用了設(shè)計(jì)師們最常使用的直接展示軟件logo的app啟動(dòng)頁設(shè)計(jì)方法。結(jié)合其logo主題色做出相應(yīng)的配色變化，更加直觀的展示軟件品牌，加深用戶印象。

學(xué)習(xí)點(diǎn)：

*結(jié)合軟件，產(chǎn)品或logo主題色，直接展示品牌，加深用戶印象

2.Dapprly splash screen animation

設(shè)計(jì)師：Ashish Chauhan

亮點(diǎn)：“Logo +動(dòng)效”的設(shè)計(jì)方式

靜態(tài)或動(dòng)態(tài)logo的直接展示或轉(zhuǎn)化，也會(huì)是App啟動(dòng)頁設(shè)計(jì)的一個(gè)重要變量和切入點(diǎn)。而這款設(shè)計(jì)就巧妙的添加簡單動(dòng)效，更加直觀動(dòng)態(tài)的展示軟件logo. 顯而易見，相對于案例1的靜態(tài)展示，此款設(shè)計(jì)會(huì)更具吸引力。

學(xué)習(xí)點(diǎn)：

*結(jié)合其它特效，動(dòng)態(tài)展示啟動(dòng)頁logo, 提升其吸引力

在啟動(dòng)頁設(shè)計(jì)中，也可結(jié)合各類特效（比如發(fā)光，流體，波浪等特效），動(dòng)效（例如旋轉(zhuǎn)，彈跳，抖動(dòng)等動(dòng)效），圖標(biāo)，色彩以及形狀的變化，更加靈動(dòng)的展示軟件或產(chǎn)品Logo.

如圖利用流體特效設(shè)計(jì)，增加啟動(dòng)頁logo的靈動(dòng)性。

如圖利用旋轉(zhuǎn)，色彩以及形狀的變化，增加啟動(dòng)頁logo的多變性。

如圖利用發(fā)光特效，增加啟動(dòng)頁吸引力。

原型設(shè)計(jì)技巧：

在這一點(diǎn)上，Mockplus,作為一款簡單且實(shí)用的原型工具，為大家提供了非常強(qiáng)大的圖標(biāo)庫（超過3000個(gè)簡單易用的矢量圖標(biāo)），方便設(shè)計(jì)師更加簡單，快捷的設(shè)計(jì)和添加需要的各種應(yīng)用Logo.

而且，其豐富的交互設(shè)計(jì)功能，例如移動(dòng)，顯示隱藏，縮放，尺寸調(diào)整，旋轉(zhuǎn)，設(shè)置顏色，設(shè)置文字顏色，設(shè)置文本等多樣的交互命令，也為設(shè)計(jì)師添加適當(dāng)?shù)腖ogo動(dòng)效或動(dòng)畫提供了便利。

而且,此類交互設(shè)計(jì)功能，也更易于設(shè)計(jì)師創(chuàng)建更具互動(dòng)性和可操作性的啟動(dòng)頁，讓用戶在啟動(dòng)頁無意識地停留更長的時(shí)間，從而提升用戶體驗(yàn)。

3.Splash screen animation

設(shè)計(jì)師：Cuberto

亮點(diǎn)：“Logo + 功能輪播”的設(shè)計(jì)方式

除去直接靜態(tài)或動(dòng)態(tài)展示Logo的方式，動(dòng)態(tài)的展示產(chǎn)品或軟件功能，服務(wù)，特色，活動(dòng)以及廣告之類，也是啟動(dòng)頁設(shè)計(jì)的重要方向。

而此款設(shè)計(jì)就完美的結(jié)合軟件logo和功能輪播的設(shè)計(jì)方式，讓用戶更加直觀，快速且自然地了解軟件功能，為用戶之后更加快速的熟悉和使用軟件奠定了基礎(chǔ)。

學(xué)習(xí)點(diǎn)：

*啟動(dòng)頁動(dòng)態(tài)展示產(chǎn)品或軟件功能，讓用戶更加快速，自然地熟悉軟件

啟動(dòng)頁動(dòng)態(tài)展示APP或產(chǎn)品功能，服務(wù)，活動(dòng)以及文化特色，不僅可以讓整款設(shè)計(jì)更加多變。例如，結(jié)合不同的設(shè)計(jì)風(fēng)格（插畫風(fēng)和水墨風(fēng)），不同階段的產(chǎn)品/軟件功能，以及不同特色文化的動(dòng)態(tài)輪播等等，讓啟動(dòng)頁更加豐富多變。而且，還能夠讓用戶更加快速，自然地了解產(chǎn)品功能，為用戶更快的了解和熟悉軟件奠定基礎(chǔ)。

*利用文字搭配圖片的設(shè)計(jì)方式，讓功能解釋更加直觀易懂

如圖，采用圖片搭配文字的方式，讓功能介紹更加直觀易懂

原型設(shè)計(jì)技巧：

這種“文字 + 圖片”的設(shè)計(jì)組合，設(shè)計(jì)師可簡單的使用Mockplus的“圖片”或“GIF”組件輕松添加所需靜態(tài)或動(dòng)態(tài)圖片/插畫。并結(jié)合其“單行文本”和“多行文本”組件添加所需解釋文本，簡單而便利。

4.Splash screen furniture app

設(shè)計(jì)師：Dru

亮點(diǎn)：啟動(dòng)頁直接展示產(chǎn)品，增加產(chǎn)品曝光率，提升產(chǎn)品銷量

此款設(shè)計(jì)，作為家具電銷類手機(jī)App，在其啟動(dòng)頁直接展示產(chǎn)品的設(shè)計(jì)方式，對于激發(fā)用戶購買欲望，提升產(chǎn)品銷售量，作用也是顯而易見。

學(xué)習(xí)點(diǎn)：

*啟動(dòng)頁直接動(dòng)態(tài)展示產(chǎn)品，增加產(chǎn)品曝光率和銷售量

App啟動(dòng)頁也是產(chǎn)品展示和曝光的重要平臺。在啟動(dòng)頁直接添加各種熱銷或明星產(chǎn)品的動(dòng)態(tài)輪播，激發(fā)用戶購買欲，留住用戶的同時(shí)，最終實(shí)現(xiàn)產(chǎn)品銷量的增長。

原型設(shè)計(jì)技巧：

對于此類的產(chǎn)品輪播設(shè)計(jì)，設(shè)計(jì)師可直接使用Mockplus的“輪播”組件，動(dòng)態(tài)循環(huán)展示產(chǎn)品相關(guān)圖片。也可通過“圖片 + 文本 + 按鈕”的組合設(shè)計(jì)，簡單實(shí)現(xiàn)。

如圖，利用Mockplus的圖片，文本和按鈕組件組合制作產(chǎn)品或功能輪播頁面。

5.Splash screen

設(shè)計(jì)師：Purple Bunny

亮點(diǎn)：文本和動(dòng)畫的相互呼應(yīng)

此款設(shè)計(jì)最突出的特點(diǎn)，就是非常完美的實(shí)現(xiàn)了文本和動(dòng)畫的相互呼應(yīng)。設(shè)計(jì)中添加的動(dòng)態(tài)氣球本身就具有隨時(shí)會(huì)突然“boom”破掉的特性，而這一點(diǎn)，又與軟件本身logo的文本“boom”相吻合。一定程度上實(shí)現(xiàn)了文本的實(shí)物化，更加直觀形象，輕易就能給用戶留下深刻印象。

學(xué)習(xí)點(diǎn)：

*創(chuàng)造性的使用文本和動(dòng)畫相呼應(yīng)的設(shè)計(jì)方式，加深用戶印象

利用文本和動(dòng)畫的相互呼應(yīng)，實(shí)現(xiàn)文本的實(shí)物化和形象化，將設(shè)計(jì)師希望傳達(dá)的信息更加生動(dòng)直觀地傳達(dá)給用戶。

6.New year splash screen

設(shè)計(jì)師：Nina Pereverzeva

亮點(diǎn)：結(jié)合新年節(jié)日主題特色進(jìn)行啟動(dòng)頁設(shè)計(jì)

此款啟動(dòng)頁設(shè)計(jì)巧妙的融入了新年節(jié)日元素，讓整款設(shè)計(jì)保有軟件本身特色的同時(shí)，也極大的增強(qiáng)了app的獨(dú)特性和趣味性，能夠非常有效地吸引并留住用戶。

學(xué)習(xí)點(diǎn)：

*結(jié)合節(jié)日特色等，制作啟動(dòng)頁系列，增加其多變性，吸引并留住用戶

所以，在具體的web/iOS/androidapp啟動(dòng)頁設(shè)計(jì)中，也可結(jié)合節(jié)日，四季，24節(jié)氣，12生肖，產(chǎn)品或功能特色，制作啟動(dòng)頁系列，增加其多變性和趣味性，吸引并留住用戶。

原型設(shè)計(jì)技巧：

而這一點(diǎn)上，Mockplus擁有非常豐富的設(shè)計(jì)功能，保障你的啟動(dòng)頁系列設(shè)計(jì)更加優(yōu)質(zhì)而獨(dú)特。

例如其提供了強(qiáng)大的組件庫，簡單拖拽即可實(shí)現(xiàn)各類頁面元素的添加和編輯。其團(tuán)隊(duì)協(xié)作及管理功能，便于集合多方創(chuàng)意，更加高效地提升和迭代啟動(dòng)頁和app設(shè)計(jì)。而且，其8種測試和演示功能，對于測試設(shè)計(jì)理念的實(shí)用性，收集相應(yīng)設(shè)計(jì)反饋，也非常實(shí)用。

7.Delta flight app concept - splash screen

設(shè)計(jì)師：George Vasyagin

亮點(diǎn)：啟動(dòng)頁兼具引導(dǎo)和登錄注冊等功能

設(shè)計(jì)師在實(shí)際的應(yīng)用設(shè)計(jì)中，并未對啟動(dòng)頁，引導(dǎo)頁，登錄注冊頁以及歡迎頁面進(jìn)行嚴(yán)格的區(qū)分。

就如此款設(shè)計(jì)，通過添加“登錄”，“預(yù)定”以及“航班詳情”等選項(xiàng)，啟動(dòng)頁本身也兼具引導(dǎo)以及登錄注冊的功能，一頁多用，充分利用現(xiàn)有設(shè)計(jì)資源的同時(shí)，降低設(shè)計(jì)成本。而且也極大的縮短了用戶等待時(shí)間，有效地緩解了其因等待而帶來的負(fù)面情緒。

學(xué)習(xí)點(diǎn)：

*啟動(dòng)頁結(jié)合引導(dǎo)，登錄注冊以及歡迎等功能進(jìn)行設(shè)計(jì)

而這一點(diǎn)上，設(shè)計(jì)師可以從兩個(gè)方面著手。一方面，設(shè)計(jì)師可以如實(shí)例7一般，直接將App啟動(dòng)頁和引導(dǎo)頁/登陸注冊/歡迎頁合二為一，進(jìn)行設(shè)計(jì)，更加直觀而實(shí)用。

另一方面，設(shè)計(jì)師也可通過App啟動(dòng)頁與引導(dǎo)頁/登錄注冊頁/歡迎頁面的快速跳轉(zhuǎn)，為用戶提供更加快速流暢的體驗(yàn)。

如圖，啟動(dòng)頁與登錄注冊頁面的結(jié)合設(shè)計(jì)。

原型設(shè)計(jì)技巧：

而這一點(diǎn)上，為實(shí)現(xiàn)App啟動(dòng)頁與登錄注冊頁面，歡迎頁面以及引導(dǎo)頁面的自動(dòng)跳轉(zhuǎn)，設(shè)計(jì)師可簡單使用Mockplus的定時(shí)器進(jìn)行設(shè)計(jì)。

如圖，結(jié)合Mockplus的定時(shí)器組件，實(shí)現(xiàn)啟動(dòng)頁與登錄注冊頁面的自動(dòng)跳轉(zhuǎn)。（點(diǎn)擊了解更多該原型制作細(xì)節(jié)）

8．Splash screen- typography animation

設(shè)計(jì)師：Nestor Ramirez

亮點(diǎn)：簡單文本字體和排版的動(dòng)態(tài)展示，激發(fā)用戶好奇心

此款設(shè)計(jì)的亮點(diǎn)在于，設(shè)計(jì)師并未如一般啟動(dòng)頁慣常使用圖片展示軟件相關(guān)logo或功能的設(shè)計(jì)方式，而是直接使用文字，通過字體，排版以及色彩的動(dòng)態(tài)變化，激發(fā)用戶對App功能或內(nèi)容的好奇，從而引導(dǎo)他們點(diǎn)擊，進(jìn)入下一階段，例如登錄注冊，閱讀詳情或產(chǎn)品購買等階段。

學(xué)習(xí)點(diǎn)：

*啟動(dòng)頁中，使用更具誘惑力或啟發(fā)性的文字，引導(dǎo)用戶繼續(xù)使用App

雖然文字并沒有圖片生動(dòng)直觀，但巧妙的結(jié)合字體，排版，尺寸，色彩以及動(dòng)效的對比和變化，也能有效地引起用戶對軟件的興趣，讓其忍不住繼續(xù)點(diǎn)擊使用app.

原型設(shè)計(jì)技巧：

而這一點(diǎn)上，設(shè)計(jì)師可簡單使用Mockplus的“單行文本”和“多行文本”組件，簡單的實(shí)現(xiàn)字體，尺寸，色彩，邊框以及樣式等屬性的變化。

而且，其能夠幫助設(shè)計(jì)師簡單實(shí)現(xiàn)文本樣式收藏，復(fù)用以及分享的組件樣式庫，以及為文本添加鼠標(biāo)懸浮時(shí)色彩變化的“交互狀態(tài)”設(shè)計(jì)功能等，都是非常值得嘗試的。

9. Splash screen for iOS app

設(shè)計(jì)師：Bogdan Nikitin

亮點(diǎn)：利用啟動(dòng)頁講述軟件服務(wù)理念

作為一款專為iOS叫車軟件設(shè)計(jì)的啟動(dòng)頁面，設(shè)計(jì)師結(jié)合各種圖標(biāo)，動(dòng)畫以及l(fā)ogo, 直觀的講述該App會(huì)為用戶提供快捷，便利的叫車服務(wù)的服務(wù)理念。直觀而有趣。

學(xué)習(xí)點(diǎn)：

*利用啟動(dòng)頁講述app的服務(wù)或設(shè)計(jì)理念/故事，讓用戶快速的記住軟件或品牌

10.Lauch screen animation

設(shè)計(jì)師：Zhenya Rynzhuk

亮點(diǎn)：極簡主義設(shè)計(jì)風(fēng)格

此款設(shè)計(jì)采用極簡主義設(shè)計(jì)風(fēng)格，簡單線條，形狀以及文字的動(dòng)態(tài)展示，對于分散用戶注意力，緩解用戶等待時(shí)的焦慮情緒也非常有效。

學(xué)習(xí)點(diǎn)：

*采用簡約設(shè)計(jì)風(fēng)格

線條，形狀，色彩，文本以及動(dòng)效的簡約搭配，能夠有效地分散用戶注意力，讓用戶在不知不覺中度過等待時(shí)光，從而提升用戶體驗(yàn)。

11.Splash screen desigual selfie 360 app

設(shè)計(jì)師：paco Jimenez diaz

亮點(diǎn)：直接展示用戶優(yōu)秀作品，引導(dǎo)用戶嘗試

作為一款專為自拍軟件而設(shè)計(jì)的啟動(dòng)頁，此款設(shè)計(jì)在頁面中部直接顯示其Logo,加深品牌印象的同時(shí)，通過添加動(dòng)態(tài)背景圖的形式，直接展示用戶使用此款軟件所制作的優(yōu)秀作品，吸引用戶注意的同時(shí)，也展示了其軟件成品能夠達(dá)到的優(yōu)質(zhì)效果，讓用戶抑制不住想要嘗試。

學(xué)習(xí)點(diǎn)：

*直接展示app優(yōu)秀作品，引導(dǎo)用戶嘗試

類似拍照類，美圖類以及菜譜類軟件應(yīng)用，設(shè)計(jì)師就可以采用直接展示用戶優(yōu)秀作品的設(shè)計(jì)方式，用實(shí)例佐證軟件的功能和特色，吸引用戶進(jìn)行嘗試。

12.Cocolabs for web app

設(shè)計(jì)師：Gouthan

亮點(diǎn)：啟動(dòng)頁分區(qū)設(shè)計(jì)，增強(qiáng)頁面表現(xiàn)力

此款設(shè)計(jì)利用一張背景圖片，簡單自然地將啟動(dòng)頁劃分為兩個(gè)分區(qū)。左邊主要顯示其logo，便于用戶快速記住其品牌。而右邊添加適當(dāng)文字和按鈕。簡單解釋app功能，并引導(dǎo)用戶點(diǎn)擊嘗試或了解詳情。簡潔而不失實(shí)用性。

學(xué)習(xí)點(diǎn)：

*利用色塊，圖片以及網(wǎng)格對啟動(dòng)頁進(jìn)行分區(qū)，增強(qiáng)表現(xiàn)力。

相較于移動(dòng)端iOS或Android啟動(dòng)頁面，網(wǎng)頁app的啟動(dòng)頁面尺寸更大，能夠呈現(xiàn)的內(nèi)容更豐富。因此，設(shè)計(jì)師們可以對頁面進(jìn)行分區(qū)，逐一設(shè)計(jì)，拓展頁面功能，增強(qiáng)頁面表現(xiàn)力。當(dāng)然，也要注意所有分區(qū)的統(tǒng)一性。

而這一點(diǎn)上，通過不同色塊，背景圖片以及網(wǎng)格等設(shè)計(jì)，就能夠輕松實(shí)現(xiàn)啟動(dòng)頁面的功能分區(qū)。

原型設(shè)計(jì)技巧：

設(shè)計(jì)師可簡單使用Mockplus的“形狀”或 “面板”組件，通過設(shè)置不同背景色，實(shí)現(xiàn)色塊分區(qū)。輕松拖拽“圖片”組件，實(shí)現(xiàn)圖片分區(qū)。其格子和自動(dòng)填充功能，也能夠助你快速實(shí)現(xiàn)啟動(dòng)頁面的網(wǎng)格分區(qū)。

總之，希望這里分析的12款最新且最具代表性的啟動(dòng)頁設(shè)計(jì)實(shí)例，以及對應(yīng)的原型設(shè)計(jì)技巧，能對你有所幫助。

結(jié)語：

盡管設(shè)計(jì)師們慣常將web/iOS/Androidapp的啟動(dòng)頁作為的品牌功能，廣告活動(dòng)以及服務(wù)文化的展示平臺，但這并不意味著設(shè)計(jì)師們就只能從這些方面或思路進(jìn)行思考或設(shè)計(jì)。融入更多設(shè)計(jì)師獨(dú)具匠心的設(shè)計(jì)，也可讓其app啟動(dòng)頁輕松脫穎而出。當(dāng)然，這并不意味著，簡單的品牌，功能以及文化展示就不值得嘗試。事實(shí)上，結(jié)合不同的動(dòng)效，設(shè)計(jì)風(fēng)格，配色以及設(shè)計(jì)師創(chuàng)意，簡單logo或功能展示也能讓人眼前一亮。

總之，無論設(shè)計(jì)師最終的設(shè)計(jì)思路或方向如何，都不要忘記將啟動(dòng)頁設(shè)計(jì)及時(shí)地制作成原型，當(dāng)然，這肯定少不了需要使用一款得心應(yīng)手的優(yōu)質(zhì)原型工具（比如Mockplus）,適時(shí)地測試其可行性和有效性。

希望這里介紹的相關(guān)軟件啟動(dòng)頁設(shè)計(jì)實(shí)例和技巧能夠?qū)δ阌兴鶈l(fā)。