App啟動(dòng)頁(yè)設計實(shí)例和技巧（啟動(dòng)即讓人心動(dòng)）
作為UX/UI設計使，啟巧啟究竟如何才能巧妙而富有創(chuàng )意的動(dòng)頁(yè)動(dòng)即結合簡(jiǎn)單圖片，文字，設計實(shí)例圖標以及l(fā)ogo之類(lèi)(lei)常見(jiàn)(′ω｀*)元素，和技設計出讓用戶(hù)眼前一亮，讓人心動(dòng)而忍不住想要嘗試，心動(dòng)(dong)而非直接離開(kāi)的啟巧啟web或??(?⊿?)mobile?? app啟動(dòng)頁(yè)呢？以下就跟著(zhù)小編的腳步，了解和分析12款最新且最具代表性的動(dòng)頁(yè)動(dòng)即Web/iOS/ヾ(′ω｀)?Androi(′ω｀*)d App啟動(dòng)頁(yè)設計實(shí)例，看看創(chuàng )建此類(lèi)設計案例原型需要注意和牢記的設計實(shí)例相關(guān)技巧~
?
App啟動(dòng)頁(yè)，也稱(chēng)閃屏??頁(yè)，和技最初是讓人為緩解用戶(hù)等待Web/iOS/Android App數(shu)據加載ヽ(′?｀)ノ的焦慮情緒而出現，后被設計師巧妙用于品牌文化展示，心動(dòng)服務(wù)特色介紹以及功能界面熟悉等平臺進(jìn)??行設計，啟巧啟被賦予了更加豐富而實(shí)際的動(dòng)頁(yè)動(dòng)即作用。
然而，設計實(shí)例即使是簡(jiǎn)單的使用圖片，文字，以及色彩的不同直接展示軟件或產(chǎn)品功能文化的啟動(dòng)頁(yè)，也會(huì )給用戶(hù)帶來(lái)完全不同的感受和體驗。
那么，作為UX/UI設計使，究竟如何才能巧妙而富有創(chuàng )意的結合簡(jiǎn)單圖片，文字，圖標以及l(fā)ogo之類(lèi)常見(jiàn)元??素，設計(ji)出讓用戶(hù)眼前一亮，心動(dòng)而忍不住想要嘗試，而非直接離開(kāi)的web或mobile app啟動(dòng)頁(yè)呢？
以下就跟著(zhù)小編的腳步，了解和分析12款最新且最具代表性的Web/iOS/(′_ゝ`)Android App啟動(dòng)頁(yè)設計實(shí)例，并結合小編最常用的一款更快，更簡(jiǎn)單的原型工具--(′_｀)——Mockplus, 介紹創(chuàng )建此類(lèi)設計案例原型，需要注意和牢記的相(xiang)關(guān)技巧。希望對大家有所幫助：
這???款設計雖然看起來(lái)十分簡(jiǎn)單，但卻是采用了??設計師們最常使用的直接展示(shi)軟件logo的app啟動(dòng)頁(yè)設計方法。結合其logo主題色做出相應的配色變化，更加直觀(guān)的展示軟件品牌，加深用戶(hù)印象。
學(xué)習點(diǎn)：結合軟件，產(chǎn)品或logo主題色，直接展示品牌，加深用戶(hù)印象2.Dapprly splash screen animation
設計師：Ashish Chauhan亮??點(diǎn)：“Log(′▽?zhuān)?)o 動(dòng)效”的設計方式靜態(tài)或動(dòng)態(tài)logo的直接展示或轉化，也會(huì )是App啟動(dòng)頁(yè)設計的一個(gè)重要變量和切入點(diǎn)。而這款設計就巧妙的添加簡(jiǎn)單動(dòng)效，更加直觀(guān)動(dòng)態(tài)的展示軟件logo. 顯而易見(jiàn)，相對于案例1的靜態(tài)展示，此款設計會(huì )更具吸引力。
學(xué)習點(diǎn)：結合其它特效，動(dòng)態(tài)展示啟動(dòng)頁(yè)lo(′ω｀)go, 提升其吸引力在啟動(dòng)頁(yè)設計??中，也可結合各類(lèi)特效（比如發(fā)光，流體，波浪等特效），動(dòng)效（例如旋轉，彈跳，抖動(dòng)等動(dòng)效），圖標，色彩(′?｀)以及形狀的變化，更加靈動(dòng)的展示軟件或產(chǎn)品Logo.
如圖利用流體特效設計，增加啟動(dòng)頁(yè)(′?｀*)logo的靈動(dòng)性。
如圖利用旋轉，色彩以及形狀的變化，增加啟動(dòng)頁(yè)logo的多變性。
如圖利用發(fā)光特效，增加啟動(dòng)頁(yè)吸引力??。
原型設計技巧：
而且，其豐富的交互設計功能，例如移動(dòng)，顯示隱??藏，縮放，尺寸調整，旋轉，設置顏色，設置文字顏色┐(′ー｀)┌，??設置文本等多樣的交互命令，也為設計師添加適當的Logo動(dòng)效或動(dòng)畫(huà)提供了便利。
而且,此類(lèi)交互設計功能，??也更易于設計師創(chuàng )建更具互動(dòng)性和可操作性的啟動(dòng)頁(yè)，讓用戶(hù)在啟動(dòng)頁(yè)無(wú)意識地停留更長(cháng)的時(shí)間，從而提升用戶(hù)體驗。
3.Splash screen animation
設計師：Cuberto亮點(diǎn)：“Logo 功能輪播”的設計方式除去直接靜態(tài)或動(dòng)態(tài)展示Logo的方式，動(dòng)態(tài)的展示產(chǎn)品或軟件功能，服務(wù)，特色，活動(dòng)以及廣告之類(lèi)，也是啟動(dòng)頁(yè)設計的重要方向。
而此款設計就完美的結合軟件logo和功能輪播的設計方式，讓??用戶(hù)更加直??觀(guān)，快速且自然地了解軟件功能，為用戶(hù)之后更加快速的熟悉和使用軟件奠定了基礎。
學(xué)習點(diǎn)：1、啟動(dòng)頁(yè)動(dòng)態(tài)展示產(chǎn)品或軟件功能，讓用戶(hù)更加快速，自然地熟悉軟件??
2、利(li)用文??字搭配圖片的設計方式，讓功能解釋更加直觀(guān)易懂
如圖，采用圖片搭配文字的方式，讓功能介紹更加直觀(guān)易懂
這種“文字 圖片”的┐(′ー｀)┌設計組合，設計師可簡(jiǎn)單的使用Mockplus的“圖片”或“GIF”組件輕松添??加所需靜態(tài)或動(dòng)態(tài)圖片/插畫(huà)。并結合其“單行文本”和“多行文本”組件添加所需解釋文本，簡(jiǎn)單而便利。
4.Splash screen furniture app
設計師：Dru亮點(diǎn)：?jiǎn)?dòng)頁(yè)直(′ω｀)接展示產(chǎn)品，增加產(chǎn)品曝光率，提升產(chǎn)品銷(xiāo)量此款設計，作為家具電銷(xiāo)類(lèi)手機App，在其(qi)啟動(dòng)頁(yè)直接展示產(chǎn)品的設計方式，對于激發(fā)用戶(hù)購買(mǎi)欲望，提升產(chǎn)品銷(xiāo)售量，作用也是(shi)顯而易見(jiàn)。
學(xué)習點(diǎn)：?jiǎn)?dòng)頁(yè)直接動(dòng)態(tài)展示產(chǎn)品，增加產(chǎn)品曝光率和銷(xiāo)售量App啟動(dòng)頁(yè)也是產(chǎn)品展示和曝光的重要平臺。在(zai)啟動(dòng)頁(yè)直接添加各種熱銷(xiāo)或明星產(chǎn)品的動(dòng)態(tài)輪播，激發(fā)用戶(hù)購買(mǎi)欲，留住用戶(hù)的同時(shí)，最終實(shí)現產(chǎn)品銷(xiāo)量的增長(cháng)。
原型設計技巧：
對于此類(lèi)的產(chǎn)品輪播設計，設計師可直接使用Mockplus的“輪播”組件，動(dòng)態(tài)循環(huán)展示產(chǎn)品相關(guān)圖片。也可通過(guò)“圖片 文本 按鈕”的組合設計，簡(jiǎn)單實(shí)現。
如圖，利用Mockplus的圖片，文本和按鈕組件組合制作產(chǎn)品或功能輪播頁(yè)面。
此款設計最突出的特點(diǎn)，就是非常完美的實(shí)現了文本和動(dòng)畫(huà)的相互呼應。設計中添加的動(dòng)態(tài)氣??球本身就(jiu)具有隨時(shí)會(huì )突然“boom”破掉的特性，而這一點(diǎn)，又與軟件┐(′д｀)┌本身(′?_?`)logo的文本“boom”相吻合。一定程度上實(shí)現了文本的實(shí)物化，更加直觀(guān)形象，輕易就能給用戶(hù)留下深刻印象。
學(xué)習點(diǎn)：創(chuàng )造性的使用文本和動(dòng)畫(huà)相呼應的設計方式，加深用戶(hù)印象利用文本和動(dòng)畫(huà)的相互呼應，實(shí)現文本的實(shí)物化和形??象化，(′?｀*)將設計師希望傳達的信息更加生動(dòng)直觀(guān)地傳達給用戶(hù)。
6.New yea??r?? splash screen
設計師：Nina Pereverzeva亮點(diǎn)：結合新年節日主題特色進(jìn)行啟動(dòng)頁(yè)設計所以，在具體的web(???)/iOS/androidapp啟動(dòng)頁(yè)設計中??，也可結合節日，四季，24節氣，12生肖，產(chǎn)品或功能特色，制作啟動(dòng)頁(yè)系列，增加其多變性和趣味性，吸引并留??住用戶(hù)。
而這一點(diǎn)上，Mockplus擁有非常豐富的設計功能，保(bao)障你的啟動(dòng)頁(yè)系列設計更加優(yōu)質(zhì)而獨特。
例如其提供了強大的組件庫，簡(jiǎn)單拖拽即可實(shí)現各類(lèi)頁(yè)面元素的添加和編輯。其團隊協(xié)作及管理功能，便于集合多方創(chuàng )意，更加高效地提升和迭代啟動(dòng)頁(yè)和app設計。而且，其8種測試和演示功能，對于測試設計理念的實(shí)用性，收集相應設計反饋，也非常實(shí)用。
7.Delta flight app concept – splash?? scree(//ω//)n
設計師：George Vasyagin亮點(diǎn)：?jiǎn)?dòng)頁(yè)兼具ヽ(′▽?zhuān)?ノ引導和登錄注冊等功能設計師在實(shí)際的應用設計中，并未對啟??動(dòng)頁(yè)，引導頁(yè)，登錄注冊頁(yè)以及歡迎頁(yè)面進(jìn)行嚴格的區分。
就如此款設計，通過(guò)添加“登錄”，“預定”以及“航班詳情”等選項，啟動(dòng)頁(yè)本身也兼具引導以及登錄注冊的功能，一頁(yè)多用，充分利用現有設計資源的同時(shí)，降低設計成本。而且也極大的縮短了用戶(hù)等待時(shí)間，有效地緩解了其ヽ(′▽?zhuān)?/因等待而帶來(lái)的負面情緒。
學(xué)習點(diǎn)：?jiǎn)?dòng)頁(yè)結合引導，登錄注冊以(′?ω?`)及歡迎等功能進(jìn)行設計??而這一點(diǎn)上，設計師可以從兩個(gè)方面著(zhù)手。一方面，設計師可以如實(shí)例7一般，直接將App啟動(dòng)頁(yè)和引導頁(yè)/登陸??注冊/歡迎頁(yè)合二為一，進(jìn)行設計，更加直觀(guān)而實(shí)用。
另一方面，設計師也可通過(guò)App啟動(dòng)頁(yè)與引導頁(yè)/登錄注冊頁(yè)/(⊙_⊙)歡迎頁(yè)面的快速跳轉，為用戶(hù)提供更加快速流暢的體驗。
如圖，啟動(dòng)頁(yè)與登錄注冊頁(yè)面的結合設計。
原型設計技巧：
而這一點(diǎn)上，為(′ω｀)實(shí)現App啟動(dòng)頁(yè)與登錄注冊頁(yè)面，歡迎頁(yè)面以及引??導頁(yè)面的自動(dòng)跳轉，設??計師可簡(jiǎn)單使用Mockplus的定時(shí)器進(jìn)行設計。
如圖，結合(???)Mockpluヽ(′ー｀)ノs的定時(shí)器組件，實(shí)現啟動(dòng)頁(yè)與登錄注冊頁(yè)面的自動(dòng)跳轉。（點(diǎn)擊了解更多該原型制作細節）
8．Splash screen- typography animation
設計師：Nestor Ramirez亮點(diǎn)：簡(jiǎn)單文本字體和排(′?ω?`)版的動(dòng)態(tài)展示，激發(fā)用戶(hù)好奇心此款設計的亮點(diǎn)在于，設計師并未如一般啟動(dòng)頁(yè)慣常使用圖片展示軟件相關(guān)logo或功能的設計方式，而是直接使用文字，通過(guò)字體，排版以及色彩的動(dòng)態(tài)變化，激發(fā)用戶(hù)對App功能或內容的好奇，從而引導他們點(diǎn)擊，進(jìn)入下一階段，例如登錄注冊，閱讀詳情或產(chǎn)品購買(mǎi)等階段。
學(xué)習點(diǎn)：?jiǎn)?dòng)頁(yè)中，使用更具誘惑力或啟發(fā)性的文字，引導用戶(hù)繼續使用App雖然文字并沒(méi)有圖片生動(dòng)直觀(guān)，但ヾ(′▽?zhuān)??巧妙的結合字體，排版，尺寸，色彩以ヽ(′▽?zhuān)?ノ及動(dòng)效的對比和變化，也能有效地引起用戶(hù)對軟件的興趣，讓其忍不住繼續點(diǎn)擊使用app。
原型設計技巧：
而這一點(diǎn)上，設計師可簡(jiǎn)單使用Mockplus的“單行文本”和“多行文本”組件，簡(jiǎn)單的實(shí)現字體，尺寸，色彩，邊框以及樣式等屬性的變化。
9. Splash screen for iOS app
設計師：Bogd??an Nikitin亮點(diǎn)：利用啟動(dòng)頁(yè)講述軟件服務(wù)理念作為一款專(zhuān)(zhuan)為iOS叫車(chē)軟件設計的啟動(dòng)頁(yè)面，設計師結合各種圖標，動(dòng)畫(huà)以及l(fā)ogo(????), 直觀(guān)的講述該App會(huì )為用戶(hù)提供快捷，便利的叫車(chē)服務(wù)的服務(wù)理念。直觀(guān)而有趣。
學(xué)習點(diǎn)：利用啟動(dòng)頁(yè)講述app的服務(wù)或設計理念/故事，讓用戶(hù)快速的記住軟件或品牌10.L??auch screen animation
設計師：Zhenya Rynzhuk亮點(diǎn)：極簡(jiǎn)主義設計風(fēng)格此款設計采用極簡(jiǎn)主義設計( ?ヮ?)風(fēng)格，簡(jiǎn)單線(xiàn)條，形狀以及文字的動(dòng)(dong)態(tài)展示，對于分散用戶(hù)注意力，緩解用戶(hù)等待時(shí)的焦慮情緒也非常有效。
學(xué)習點(diǎn)：采用簡(jiǎn)約設計風(fēng)格線(xiàn)條，形狀，色彩，文本以及動(dòng)效的簡(jiǎn)約搭配，能夠有效地分散用戶(hù)注意力，讓用(′_ゝ`)戶(hù)在不知不覺(jué)中度過(guò)等待時(shí)光，從而提升用戶(hù)體驗。
設計師：paco Jimenez diaz
作為一款專(zhuān)為自拍軟件而設計的啟動(dòng)頁(yè)，此??款設計在頁(yè)(′?｀)面中部直接顯示其Logo,加深品牌印象的同時(shí)，通過(guò)添加動(dòng)態(tài)背景圖的形式，直接展示用戶(hù)使用此款軟件所制(zhi)作的優(yōu)秀作品，吸引用戶(hù)注意的同時(shí)，也展示了其軟件成品能夠達到的優(yōu)質(zhì)效果，讓用戶(hù)抑制不住想要嘗試。
學(xué)習點(diǎn)：直接展示app優(yōu)秀作品，引導用戶(hù)嘗試
類(lèi)似拍照類(lèi)，美圖類(lèi)以及菜譜類(lèi)軟件應用，設計師就(jiu)可以采用直接展示用戶(hù)優(yōu)秀作品的設計方式，用實(shí)例佐證軟件的功能和特色，吸引用戶(hù)進(jìn)行嘗試。
12.Cocolabs for web app
亮點(diǎn)：?jiǎn)?dòng)(dong)頁(yè)分區設計，增強頁(yè)面表現力
此款設計利用一張背景圖片，簡(jiǎn)單自然地將啟動(dòng)頁(yè)劃分為兩個(gè)分區。左邊主要顯示其logo，便于用戶(hù)快速記住其??品牌。而右邊添加適當文字和按鈕。簡(jiǎn)單解釋app功能，并引導用戶(hù)點(diǎn)擊嘗試或了解詳情。簡(jiǎn)潔而(er)不失實(shí)用性。
學(xué)習點(diǎn)：利用色塊，圖片以及網(wǎng)格對啟動(dòng)頁(yè)進(jìn)行分區，增強表現力。
相較于移動(dòng)端iOS或Android啟動(dòng)頁(yè)面，網(wǎng)頁(yè)app的啟動(dòng)頁(yè)面尺寸更大，能夠呈現的內容更豐富。因此，設計師們可以對頁(yè)面進(jìn)行分區，逐一設計，拓展頁(yè)面功能，增強頁(yè)面表現力。當然，也要(yao)注意所有分區的統一性??。
原型設計技巧：
總之，希望這里分析的12款最新??且最具代表性的啟動(dòng)頁(yè)設計實(shí)例，以及(ji)對應的原型設計技巧，能對你有所幫助。
結語(yǔ)：
盡管設計師們慣常將web/iOS/Androidヾ(′?｀)?app的啟動(dòng)頁(yè)作為的品牌功能，廣告活動(dòng)以及服務(wù)文化的展示平臺，但這并不意味著(zhù)設計師們就只能從這些方面或思路進(jìn)行思考或設計。融入更多設計師獨具匠心??的設計，也可讓其app啟動(dòng)頁(yè)輕松脫穎而??出。當然，這并??不意味著(zhù)，簡(jiǎn)單的品牌，功能以及文化展示就不值得嘗試。事實(shí)上，結合不同的動(dòng)效，設計風(fēng)格，配色以及設計師創(chuàng )(/ω＼)意，簡(jiǎn)單logo或功能展示也能讓人眼前一亮。
總之(′▽?zhuān)?，無(wú)論設計師最終的設計思路或方向如何，都不要忘記將啟動(dòng)頁(yè)設計及時(shí)地制作成原型，當然，這肯定少不了需要使用一款得心應手的優(yōu)質(zhì)原型工具（比如Mockplus）,適時(shí)地測試其可行性和有效性。
