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）,適時地測試其可行性和有效性。
希望這裡介紹的相關軟體啟動頁設計例項和技巧能夠對你有所啟發。