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

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

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

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

1.Splash screen

設(shè)計師：Luis Alves

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

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

學(xué)習(xí)點：

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

2.Dapprly splash screen animation

設(shè)計師：Ashish Chauhan

亮點：“Logo +動效”的設(shè)計方式

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

學(xué)習(xí)點：

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

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

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

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

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

原型設(shè)計技巧：

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

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

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

3.Splash screen animation

設(shè)計師：Cuberto

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

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

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

學(xué)習(xí)點：

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

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

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

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

原型設(shè)計技巧：

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

4.Splash screen furniture app

設(shè)計師：Dru

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

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

學(xué)習(xí)點：

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

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

原型設(shè)計技巧：

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

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

5.Splash screen

設(shè)計師：Purple Bunny

亮點：文本和動畫的相互呼應(yīng)

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

學(xué)習(xí)點：

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

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

6.New year splash screen

設(shè)計師：Nina Pereverzeva

亮點：結(jié)合新年節(jié)日主題特色進行啟動頁設(shè)計

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

學(xué)習(xí)點：

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

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

原型設(shè)計技巧：

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

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

7.Delta flight app concept - splash screen

設(shè)計師：George Vasyagin

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

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

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

學(xué)習(xí)點：

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

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

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

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

原型設(shè)計技巧：

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

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

8．Splash screen- typography animation

設(shè)計師：Nestor Ramirez

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

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

學(xué)習(xí)點：

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

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

原型設(shè)計技巧：

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

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

9. Splash screen for iOS app

設(shè)計師：Bogdan Nikitin

亮點：利用啟動頁講述軟件服務(wù)理念

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

學(xué)習(xí)點：

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

10.Lauch screen animation

設(shè)計師：Zhenya Rynzhuk

亮點：極簡主義設(shè)計風(fēng)格

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

學(xué)習(xí)點：

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

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

11.Splash screen desigual selfie 360 app

設(shè)計師：paco Jimenez diaz

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

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

學(xué)習(xí)點：

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

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

12.Cocolabs for web app

設(shè)計師：Gouthan

亮點：啟動頁分區(qū)設(shè)計，增強頁面表現(xiàn)力

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

學(xué)習(xí)點：

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

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

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

原型設(shè)計技巧：

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

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

結(jié)語：

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

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

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