App啓動頁設計實例和技巧，啓動即讓人心動

App啓動頁，也稱閃屏頁，最初是爲緩解用戶等待Web/iOS/Android App數據加載的焦慮情緒而出現，後被設計師巧妙用於品牌文化展現，服務特點介紹以及功能界面熟悉等平臺進行設計，被賦予了更加豐富而實際的做用。

然而，即便是簡單的使用圖片，文字，以及色彩的不一樣直接展現軟件或產品功能文化的啓動頁，也會給用戶帶來徹底不一樣的感覺和體驗。

那麼，做爲UX/UI設計使，究竟如何才能巧妙而富有創意的結合簡單圖片，文字，圖標以及logo之類常見元素，設計出讓用戶眼前一亮，心動而忍不住想要嘗試，而非直接離開的web或mobile app啓動頁呢？

如下就跟着小編的腳步，瞭解和分析12款最新且最具表明性的Web/iOS/Android App啓動頁設計實例，並結合小編最經常使用的一款更快，更簡單的原型工具­­——Mockplus, 介紹建立此類設計案例原型，須要注意和牢記的相關技巧。但願對你們有所幫助：

1.Splash screen

設計師：Luis Alves

亮點：結合logo主題色，直觀展現品牌，加深用戶印象

這款設計雖然看起來十分簡單，但倒是採用了設計師們最常使用的直接展現軟件logo的app啓動頁設計方法。結合其logo主題色作出相應的配色變化，更加直觀的展現軟件品牌，加深用戶印象。

學習點：

*結合軟件，產品或logo主題色，直接展現品牌，加深用戶印象

2.Dapprly splash screen animation

設計師：Ashish Chauhan

亮點：「Logo +動效」的設計方式

靜態或動態logo的直接展現或轉化，也會是App啓動頁設計的一個重要變量和切入點。而這款設計就巧妙的添加簡單動效，更加直觀動態的展現軟件logo. 顯而易見，相對於案例1的靜態展現，此款設計會更具吸引力。

學習點：

*結合其它特效，動態展現啓動頁logo, 提高其吸引力

在啓動頁設計中，也可結合各種特效（好比發光，流體，波浪等特效），動效（例如旋轉，彈跳，抖動等動效），圖標，色彩以及形狀的變化，更加靈動的展現軟件或產品Logo.

如圖利用流體特效設計，增長啓動頁logo的靈動性。

如圖利用旋轉，色彩以及形狀的變化，增長啓動頁logo的多變性。

如圖利用發光特效，增長啓動頁吸引力。

原型設計技巧：

在這一點上，Mockplus,做爲一款簡單且實用的原型工具，爲你們提供了很是強大的圖標庫（超過3000個簡單易用的矢量圖標），方便設計師更加簡單，快捷的設計和添加須要的各類應用Logo.

並且，其豐富的交互設計功能，例如移動，顯示隱藏，縮放，尺寸調整，旋轉，設置顏色，設置文字顏色，設置文本等多樣的交互命令，也爲設計師添加適當的Logo動效或動畫提供了便利。

並且,此類交互設計功能，也更易於設計師建立更具互動性和可操做性的啓動頁，讓用戶在啓動頁無心識地停留更長的時間，從而提高用戶體驗。

3.Splash screen animation

設計師：Cuberto

亮點：「Logo + 功能輪播」的設計方式

除去直接靜態或動態展現Logo的方式，動態的展現產品或軟件功能，服務，特點，活動以及廣告之類，也是啓動頁設計的重要方向。

而此款設計就完美的結合軟件logo和功能輪播的設計方式，讓用戶更加直觀，快速且天然地瞭解軟件功能，爲用戶以後更加快速的熟悉和使用軟件奠基了基礎。

學習點：

*啓動頁動態展現產品或軟件功能，讓用戶更加快速，天然地熟悉軟件

啓動頁動態展現APP或產品功能，服務，活動以及文化特點，不只可讓整款設計更加多變。例如，結合不一樣的設計風格（插畫風和水墨風），不一樣階段的產品/軟件功能，以及不一樣特點文化的動態輪播等等，讓啓動頁更加豐富多變。並且，還可以讓用戶更加快速，天然地瞭解產品功能，爲用戶更快的瞭解和熟悉軟件奠基基礎。

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

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

原型設計技巧：

這種「文字 + 圖片」的設計組合，設計師可簡單的使用Mockplus的「圖片」或「GIF」組件輕鬆添加所需靜態或動態圖片/插畫。並結合其「單行文本」和「多行文本」組件添加所需解釋文本，簡單而便利。

4.Splash screen furniture app

設計師：Dru

最前沿的中國產品人和設計師

摹客專訪

亮點：啓動頁直接展現產品，增長產品曝光率，提高產品銷量

此款設計，做爲傢俱電銷類手機App，在其啓動頁直接展現產品的設計方式，對於激發用戶購買慾望，提高產品銷售量，做用也是顯而易見。

學習點：

*啓動頁直接動態展現產品，增長產品曝光率和銷售量

App啓動頁也是產品展現和曝光的重要平臺。在啓動頁直接添加各類熱銷或明星產品的動態輪播，激發用戶購買慾，留住用戶的同時，最終實現產品銷量的增加。

原型設計技巧：

對於此類的產品輪播設計，設計師可直接使用Mockplus的「輪播」組件，動態循環展現產品相關圖片。也可經過「圖片 + 文本 + 按鈕」的組合設計，簡單實現。

如圖，利用Mockplus的圖片，文本和按鈕組件組合製做產品或功能輪播頁面。

5.Splash screen

設計師：Purple Bunny

亮點：文本和動畫的相互呼應

此款設計最突出的特色，就是很是完美的實現了文本和動畫的相互呼應。設計中添加的動態氣球自己就具備隨時會忽然「boom」破掉的特性，而這一點，又與軟件自己logo的文本「boom」相吻合。必定程度上實現了文本的實物化，更加直觀形象，輕易就能給用戶留下深入印象。

學習點：

*創造性的使用文本和動畫相呼應的設計方式，加深用戶印象

利用文本和動畫的相互呼應，實現文本的實物化和形象化，將設計師但願傳達的信息更加生動直觀地傳達給用戶。

6.New year splash screen

設計師：Nina Pereverzeva

亮點：結合新年節日主題特點進行啓動頁設計

此款啓動頁設計巧妙的融入了新年節日元素，讓整款設計保有軟件自己特點的同時，也極大的加強了app的獨特性和趣味性，可以很是有效地吸引並留住用戶。

學習點：

*結合節日特點等，製做啓動頁系列，增長其多變性，吸引並留住用戶

因此，在具體的web/iOS/androidapp啓動頁設計中，也可結合節日，四季，24節氣，12生肖，產品或功能特點，製做啓動頁系列，增長其多變性和趣味性，吸引並留住用戶。

原型設計技巧：

而這一點上，Mockplus擁有很是豐富的設計功能，保障你的啓動頁系列設計更加優質而獨特。

例如其提供了強大的組件庫，簡單拖拽便可實現各種頁面元素的添加和編輯。其團隊協做及管理功能，便於集合多方創意，更加高效地提高和迭代啓動頁和app設計。並且，其8種測試和演示功能，對於測試設計理念的實用性，收集相應設計反饋，也很是實用。

7.Delta flight app concept - splash screen

設計師：George Vasyagin

亮點：啓動頁兼具引導和登陸註冊等功能

設計師在實際的應用設計中，並未對啓動頁，引導頁，登陸註冊頁以及歡迎頁面進行嚴格的區分。

就如此款設計，經過添加「登陸」，「預約」以及「航班詳情」等選項，啓動頁自己也兼具引導以及登陸註冊的功能，一頁多用，充分利用現有設計資源的同時，下降設計成本。並且也極大的縮短了用戶等待時間，有效地緩解了其因等待而帶來的負面情緒。

學習點：

*啓動頁結合引導，登陸註冊以及歡迎等功能進行設計

而這一點上，設計師能夠從兩個方面着手。一方面，設計師能夠如實例7通常，直接將App啓動頁和引導頁/登錄註冊/歡迎頁合二爲一，進行設計，更加直觀而實用。

另外一方面，設計師也可經過App啓動頁與引導頁/登陸註冊頁/歡迎頁面的快速跳轉，爲用戶提供更加快速流暢的體驗。

如圖，啓動頁與登陸註冊頁面的結合設計。

原型設計技巧：

而這一點上，爲實現App啓動頁與登陸註冊頁面，歡迎頁面以及引導頁面的自動跳轉，設計師可簡單使用Mockplus的定時器進行設計。

如圖，結合Mockplus的定時器組件，實現啓動頁與登陸註冊頁面的自動跳轉。（點擊瞭解更多該原型製做細節）

8．Splash screen- typography animation

設計師：Nestor Ramirez

亮點：簡單文本字體和排版的動態展現，激發用戶好奇心

此款設計的亮點在於，設計師並未如通常啓動頁慣常使用圖片展現軟件相關logo或功能的設計方式，而是直接使用文字，經過字體，排版以及色彩的動態變化，激發用戶對App功能或內容的好奇，從而引導他們點擊，進入下一階段，例如登陸註冊，閱讀詳情或產品購買等階段。

學習點：

*啓動頁中，使用更具誘惑力或啓發性的文字，引導用戶繼續使用App

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

原型設計技巧：

而這一點上，設計師可簡單使用Mockplus的「單行文本」和「多行文本」組件，簡單的實現字體，尺寸，色彩，邊框以及樣式等屬性的變化。

並且，其可以幫助設計師簡單實現文本樣式收藏，複用以及分享的組件樣式庫，以及爲文本添加鼠標懸浮時色彩變化的「交互狀態」設計功能等，都是很是值得嘗試的。

9. Splash screen for iOS app

設計師：Bogdan Nikitin

亮點：利用啓動頁講述軟件服務理念

做爲一款專爲iOS叫車軟件設計的啓動頁面，設計師結合各類圖標，動畫以及logo, 直觀的講述該App會爲用戶提供快捷，便利的叫車服務的服務理念。直觀而有趣。

學習點：

*利用啓動頁講述app的服務或設計理念/故事，讓用戶快速的記住軟件或品牌

10.Lauch screen animation

設計師：Zhenya Rynzhuk

亮點：極簡主義設計風格

此款設計採用極簡主義設計風格，簡單線條，形狀以及文字的動態展現，對於分散用戶注意力，緩解用戶等待時的焦慮情緒也很是有效。

學習點：

*採用簡約設計風格

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

11.Splash screen desigual selfie 360 app

設計師：paco Jimenez diaz

亮點：直接展現用戶優秀做品，引導用戶嘗試

做爲一款專爲自拍軟件而設計的啓動頁，此款設計在頁面中部直接顯示其Logo,加深品牌印象的同時，經過添加動態背景圖的形式，直接展現用戶使用此款軟件所製做的優秀做品，吸引用戶注意的同時，也展現了其軟件成品可以達到的優質效果，讓用戶抑制不住想要嘗試。

學習點：

*直接展現app優秀做品，引導用戶嘗試

相似拍照類，美圖類以及菜譜類軟件應用，設計師就能夠採用直接展現用戶優秀做品的設計方式，用實例佐證軟件的功能和特點，吸引用戶進行嘗試。

12.Cocolabs for web app

設計師：Gouthan

亮點：啓動頁分區設計，加強頁面表現力

此款設計利用一張背景圖片，簡單天然地將啓動頁劃分爲兩個分區。左邊主要顯示其logo，便於用戶快速記住其品牌。而右邊添加適當文字和按鈕。簡單解釋app功能，並引導用戶點擊嘗試或瞭解詳情。簡潔而不失實用性。

學習點：

*利用色塊，圖片以及網格對啓動頁進行分區，加強表現力。

相較於移動端iOS或Android啓動頁面，網頁app的啓動頁面尺寸更大，可以呈現的內容更豐富。所以，設計師們能夠對頁面進行分區，逐一設計，拓展頁面功能，加強頁面表現力。固然，也要注意全部分區的統一性。

而這一點上，經過不一樣色塊，背景圖片以及網格等設計，就可以輕鬆實現啓動頁面的功能分區。

原型設計技巧：

設計師可簡單使用Mockplus的「形狀」或 「面板」組件，經過設置不一樣背景色，實現色塊分區。輕鬆拖拽「圖片」組件，實現圖片分區。其格子和自動填充功能，也可以助你快速實現啓動頁面的網格分區。

總之，但願這裏分析的12款最新且最具表明性的啓動頁設計實例，以及對應的原型設計技巧，能對你有所幫助。

結語：

儘管設計師們慣常將web/iOS/Androidapp的啓動頁做爲的品牌功能，廣告活動以及服務文化的展現平臺，但這並不意味着設計師們就只能從這些方面或思路進行思考或設計。融入更多設計師獨具匠心的設計，也可以讓其app啓動頁輕鬆脫穎而出。固然，這並不意味着，簡單的品牌，功能以及文化展現就不值得嘗試。事實上，結合不一樣的動效，設計風格，配色以及設計師創意，簡單logo或功能展現也能讓人眼前一亮。

總之，不管設計師最終的設計思路或方向如何，都不要忘記將啓動頁設計及時地製做成原型，固然，這確定少不了須要使用一款駕輕就熟的優質原型工具（好比Mockplus）,適時地測試其可行性和有效性。

但願這裏介紹的相關軟件啓動頁設計實例和技巧可以對你有所啓發。