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