整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
輯導(dǎo)語：關(guān)于啟動(dòng)頁和引導(dǎo)頁，我們在每個(gè)APP都可以看到。做好這兩個(gè)頁面，是用戶了解產(chǎn)品的基礎(chǔ)一步，也是用戶最先了解產(chǎn)品的第一個(gè)窗口。因此，該如何設(shè)計(jì)啟動(dòng)頁與引導(dǎo)頁，才能夠吸引他人？作者總結(jié)了一些自己的經(jīng)驗(yàn)，與你分享。
啟動(dòng)頁與引導(dǎo)頁設(shè)計(jì)幾乎是每個(gè)APP必備的。
在產(chǎn)品上架前期，設(shè)計(jì)師們通常會(huì)集中設(shè)計(jì)產(chǎn)品啟動(dòng)頁與引導(dǎo)頁。啟動(dòng)頁與引導(dǎo)頁是用戶了解產(chǎn)品的第一個(gè)窗口，能給用戶留下初印象~最近剛做完新產(chǎn)品的啟動(dòng)圖與引導(dǎo)頁設(shè)計(jì)，分享自己關(guān)于做啟動(dòng)圖、引導(dǎo)頁學(xué)到的相關(guān)知識(shí)與經(jīng)驗(yàn)總結(jié)，希望對大家有所幫助，歡迎一起交流學(xué)習(xí)呀~
啟動(dòng)頁：當(dāng)用戶打開APP時(shí)，在啟動(dòng)APP的過程中被用戶所看到的過渡頁面或動(dòng)畫都被稱為啟動(dòng)頁。
作用：
特點(diǎn)：
啟動(dòng)頁的形式比較多樣化，但UI設(shè)計(jì)師在產(chǎn)品上架前期主要還是設(shè)計(jì)以產(chǎn)品內(nèi)容或品牌為主的品牌啟動(dòng)圖，介紹產(chǎn)品核心服務(wù)與傳遞品牌，本文主要介紹的是APP品牌啟動(dòng)圖這種形式。
其他的，比如廣告頁、節(jié)日閃屏等運(yùn)營類的啟動(dòng)頁形式，我們知道有這種過渡頁面存在就行了，這里就不做過多介紹了。
引導(dǎo)頁：當(dāng)用戶安裝或更新APP后首次啟動(dòng)APP時(shí)展示的3-5個(gè)滑動(dòng)頁面就是引導(dǎo)頁，幫助用戶更加清晰的了解產(chǎn)品定位與功能服務(wù)。
作用：
特點(diǎn)：
啟動(dòng)圖設(shè)計(jì)形式啟動(dòng)圖常見的設(shè)計(jì)形式有純背景+圖標(biāo)/slogan、背景圖片、漂浮圖標(biāo)、品牌滲透這4種形式。
純背景+圖標(biāo)/slogan在純色背景上，融入產(chǎn)品啟動(dòng)圖標(biāo)或產(chǎn)品slogan。這一種是最簡潔也是最經(jīng)典的啟動(dòng)圖設(shè)計(jì)形式。簡單有力的宣傳產(chǎn)品品牌、傳遞產(chǎn)品服務(wù)理念、加深用戶對產(chǎn)品印象。
設(shè)計(jì)小tip：設(shè)計(jì)這種形式的啟動(dòng)圖，我們需要注意頁面的視覺平衡。上下比例建議采用0.86:1很多設(shè)計(jì)師在對齊的時(shí)候會(huì)直接采用工具的垂直居中，我們可以來對比看一下直接垂直居中與微調(diào)后的視覺感受~
很明顯，直接采用垂直居中，上下比例為1:1的話，視覺中心是有些往下掉的；我們需要往上進(jìn)行調(diào)整，達(dá)到視覺平衡。NAVER的改版設(shè)計(jì)中，專門將啟動(dòng)頁的比例由1:1調(diào)整為了0.86:1，讓視覺達(dá)到舒適。
背景圖片采用圖片或短視頻作為背景圖。圖片或視頻的選取需要符合產(chǎn)品調(diào)性。這種設(shè)計(jì)形式更加直觀，具有場景感，能帶來更大的共鳴，具有沉浸式體驗(yàn)。最具代表的就是微信的啟動(dòng)圖了，僅靠一張圖片就形成了產(chǎn)品的記憶點(diǎn)。
政務(wù)類產(chǎn)品啟動(dòng)圖常選用當(dāng)?shù)氐牡貥?biāo)建筑或區(qū)域特色作為啟動(dòng)背景圖。
漂浮圖標(biāo)將與產(chǎn)品相關(guān)的功能服務(wù)圖標(biāo)飄散浮動(dòng)在整個(gè)頁面中。最具代表的就是淘寶的啟動(dòng)圖。
品牌滲透品牌滲透設(shè)計(jì)形式是目前市場上應(yīng)用得最多的。采用插畫、3D等設(shè)計(jì)手法，結(jié)合產(chǎn)品IP形象、品牌符號(hào)等與品牌相關(guān)的元素進(jìn)行融合設(shè)計(jì)，加強(qiáng)品牌推廣，形成品牌記憶。
品牌滲透的設(shè)計(jì)形式有：a.將品牌圖形與服務(wù)場景進(jìn)行融合設(shè)計(jì)利用插圖或3d的形式將品牌圖形與功能服務(wù)場景相結(jié)合，這類設(shè)計(jì)形式也是比較流行的，既能直觀的展示服務(wù)場景又能很好的宣傳品牌。
b.品牌符號(hào)因?yàn)閱?dòng)圖時(shí)間特別短，將產(chǎn)品的品牌符號(hào)放大或者重復(fù)排版，從而加深用戶對產(chǎn)品、品牌的記憶，這也是一個(gè)比較討巧的方法。
c.IP形象啟動(dòng)圖展示產(chǎn)品的IP形象，加強(qiáng)用于與產(chǎn)品IP的鏈接。最經(jīng)典的就是QQ的企鵝開屏，這么多年都是一直保持這種設(shè)計(jì)形式。
引導(dǎo)頁動(dòng)圖設(shè)計(jì)形式引導(dǎo)頁設(shè)計(jì)除了幫助用戶更加清晰的了解產(chǎn)品定位與功能服務(wù)外，現(xiàn)已成為每個(gè)app的儀式感設(shè)計(jì)。
每次下載新的app后，自己也很期待看到產(chǎn)品的引導(dǎo)頁，通過引導(dǎo)頁來推測整個(gè)app的設(shè)計(jì)調(diào)性~引導(dǎo)頁設(shè)計(jì)內(nèi)容相對來說比較固定，一般為文案（主副標(biāo)題）、圖形部分、輪播器、按鈕這四部分。
設(shè)計(jì)形式也主要為插畫、3D、實(shí)景圖片這3種設(shè)計(jì)形式。
插畫設(shè)計(jì)形式這是市場上應(yīng)用得最多的設(shè)計(jì)形式，分為扁平化插圖與2.5D插圖形式。
3D元素隨著3D設(shè)計(jì)形式的流行，3D元素在UI設(shè)計(jì)中越來越常見。3D圖形比扁平化的圖形更加直觀立體、具有場景感，在引導(dǎo)頁中的應(yīng)用也越來越多。
實(shí)景圖片采用實(shí)景圖片或視頻形式，讓畫面更具場景感，具有沉浸式體驗(yàn)。這類設(shè)計(jì)形式更適合旅游類或短視頻類產(chǎn)品。
一個(gè)產(chǎn)品的啟動(dòng)圖與引導(dǎo)頁設(shè)計(jì)（特別是啟動(dòng)圖設(shè)計(jì)）是很具有代表性的。我們可以從啟動(dòng)圖與引導(dǎo)頁看出產(chǎn)品的設(shè)計(jì)調(diào)性與服務(wù)理念，個(gè)人覺得這兩個(gè)模塊也是值得設(shè)計(jì)師花心思做的~
結(jié)合產(chǎn)品服務(wù)與品牌進(jìn)行設(shè)計(jì)方案探索，也是很有趣的。以上就是自己關(guān)于啟動(dòng)圖與引導(dǎo)頁的部分設(shè)計(jì)見解與解析，歡迎大家多多指教呀~
本文由 @小魚晴子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
/張麗 引導(dǎo)頁即是用戶在首次使用軟件時(shí)進(jìn)行產(chǎn)品推介和引導(dǎo)的說明書，使用戶在最短的時(shí)間內(nèi)了解這個(gè)軟件的主要功能、操作方式，以便于迅速上手。
引導(dǎo)頁具有指引用戶了解和掌握軟件應(yīng)用的功能、特性操作方法等作用，根據(jù)軟件應(yīng)用的安裝情況，從位置上一般將引導(dǎo)頁分為前置引導(dǎo)和中間引導(dǎo)。
①前置引導(dǎo)。
所謂前置引導(dǎo)即在用戶安裝完成軟件應(yīng)用，并第一次打開的時(shí)候出現(xiàn)的引導(dǎo)頁，該引導(dǎo)頁一般由2到6頁連續(xù)或不連續(xù)的相關(guān)頁面構(gòu)成，某些應(yīng)用引導(dǎo)頁可達(dá)10頁。
前置引導(dǎo)是用戶使用軟件應(yīng)用前所看到的內(nèi)容，此時(shí)用戶對所安裝的產(chǎn)品了解并不多，對于產(chǎn)品的功能、布局、具體操作方法等內(nèi)容還沒有相關(guān)的認(rèn)知。
所以前置引導(dǎo)擔(dān)任的作用主要就在于介紹產(chǎn)品的概況內(nèi)容、核心功能、比同類產(chǎn)品更具競爭力的功能，以及重要的操作步驟等。
②中間引導(dǎo)。
對于版本更新的軟件應(yīng)用，采用中間引導(dǎo)是一個(gè)常見的選擇。
中間引導(dǎo)往往是對已有版本更新升級(jí)后，新功能的一些說明性操作指導(dǎo)。
在第一次使用有新功能出現(xiàn)的頁面或操作中彈出指導(dǎo)性的說明界面，能夠讓用戶快速掌握新功能的使用，而不會(huì)因?yàn)閷π鹿δ艿牟唤庠斐墒褂蒙系睦_。
中間引導(dǎo)在設(shè)計(jì)中常用比較貼近用戶的俏皮口語進(jìn)行引導(dǎo)，而非正式官方的書面用語。
因?yàn)樵谑褂眠^程中，用戶往往更傾向于舒適滿意的服務(wù)性語言，而不使用說教形式的官方用語。
設(shè)計(jì)中多用卡通形象進(jìn)行引導(dǎo)，以對話的方式逐步提示使用戶帶入感更強(qiáng)，更利于引導(dǎo)內(nèi)容的呈現(xiàn)，避免了用戶的反感。
①合理化原則。
只做必要的內(nèi)容引導(dǎo)，根據(jù)引導(dǎo)頁的目的，出發(fā)點(diǎn)不同，大致可以將其分為產(chǎn)品說明類、使用說明類、推廣類和問題解決類。
在設(shè)計(jì)之初就應(yīng)該對需要設(shè)計(jì)的引導(dǎo)頁進(jìn)行充分分析，從而得出合理化的設(shè)計(jì)方案。
②優(yōu)化編排原則。
引導(dǎo)頁最常用設(shè)計(jì)方式有文字與界面組合、文字與插圖組合、動(dòng)態(tài)效果與音樂、視頻特效等。
常用的編排有逐一展示故事串聯(lián)、應(yīng)景節(jié)日等，逐一展示是將一個(gè)個(gè)內(nèi)容總結(jié)成點(diǎn)并順序排列出來，各點(diǎn)之間沒有必要的關(guān)聯(lián)。
③眼球效應(yīng)原則。
有效地吸引用戶的眼球才能使引導(dǎo)頁面起到事半功倍的效果，需要將焦點(diǎn)聚集在重點(diǎn)閱讀的內(nèi)容上，才能達(dá)到突出信息的目的。
聚焦可以通過光影突出、虛化背景、放大鏡突出內(nèi)容等方式來實(shí)現(xiàn)。
眼球效應(yīng)還可以通過交互效果、動(dòng)畫和視頻來實(shí)現(xiàn)。對于泛濫的靜態(tài)引導(dǎo)頁面來說，采用動(dòng)態(tài)內(nèi)容更能夠吸引用戶的注意力。所以除了采用靜態(tài)的表現(xiàn)方式，還可以通過增加合適的動(dòng)態(tài)內(nèi)容來吸引用戶的眼球。
采用不一樣的引導(dǎo)頁切換方式，也可以吸引用戶的眼球。一般引導(dǎo)頁的切換都是從右向左滑動(dòng)切換，對于用戶來說沒有多余的學(xué)習(xí)負(fù)擔(dān)，但長久以后就會(huì)麻木從而感覺沒有創(chuàng)意。
可以通過設(shè)計(jì)出具有新意的切換方式來博取用戶的關(guān)注，比如類似抽取、刮開、上下等切換形式，在合適的時(shí)候能取得與眾不同的效果。
引導(dǎo)頁在交互設(shè)計(jì)中應(yīng)當(dāng)根據(jù)項(xiàng)目需求來制定設(shè)計(jì)方案，并且需要根據(jù)產(chǎn)品的受眾及競品等調(diào)研進(jìn)行合理化設(shè)計(jì)。
引導(dǎo)頁的設(shè)計(jì)對于新用戶來說是非常重要的，而功能性的升級(jí)版本中的引導(dǎo)頁也能讓老用戶快速掌握新升級(jí)功能，能起到很好的輔助作用，提升用戶體驗(yàn)。
總之，引導(dǎo)頁設(shè)計(jì)是APP的設(shè)計(jì)重點(diǎn)之一。
們在打開APP時(shí)候總會(huì)跳出一些頁面，有人說是啟動(dòng)頁也有人叫開機(jī)圖，各種叫法讓人傻傻分不清楚。那么在啟動(dòng)APP的時(shí)候我們看到的頁面到底是什么，又有什么區(qū)別呢？下面就是關(guān)于啟動(dòng)頁、閃屏、引導(dǎo)頁的簡單的歸納和總結(jié)，希望對大家有所幫助。
當(dāng)app被用戶打開時(shí)，在app啟動(dòng)過程中被用戶所看到的過渡頁面（或動(dòng)畫）都被我們統(tǒng)稱為啟動(dòng)頁。
APP在用戶打開過程中需要一定的時(shí)間，啟動(dòng)頁的展示是為了給用戶一個(gè)過渡頁面，緩解用戶打開app時(shí)等待的焦慮心情。類似于在app在加載過程中l(wèi)oading動(dòng)畫一樣，都是為了通過設(shè)計(jì)的手段來解決用戶的焦慮情緒。
規(guī)范型和品牌推廣型
（1）規(guī)范型
根據(jù) iOS 和MD 的官方定義來，用戶打開應(yīng)用能立即使用是最好的體驗(yàn)，例如蘋果系統(tǒng)自帶的一些應(yīng)用，是沒有閃屏的；或者把閃屏設(shè)計(jì)的和首頁很像，類似 國外的instagram
（2）品牌推廣型
國內(nèi)很多APP為了體現(xiàn)產(chǎn)品的品牌，強(qiáng)化用戶對品牌的記憶，一般啟動(dòng)頁會(huì)由：產(chǎn)品名稱+產(chǎn)品形象（logo）+產(chǎn)品廣告語（slogan）組成。閃屏設(shè)計(jì)多數(shù)較為精簡，主要目的是為了突出產(chǎn)品特點(diǎn)，不宜內(nèi)容太多，太過復(fù)雜，且不易經(jīng)常更換，打斷用戶對品牌的認(rèn)知記憶，類似國內(nèi)的淘寶、優(yōu)酷等。
啟動(dòng)頁為一張靜態(tài)圖片，不可點(diǎn)擊，不可跳過
閃屏頁約等于啟動(dòng)頁，又叫做開機(jī)廣告。由于閃屏主要用于活動(dòng)推廣，商業(yè)上的廣告宣傳，容易造成用戶排斥心理，所以這類閃屏多數(shù)有倒計(jì)時(shí)和跳過的功能。該頁面出現(xiàn)在啟動(dòng)頁之后，類似京東、愛奇藝等國內(nèi)大多數(shù)應(yīng)用，在冷啟動(dòng)出現(xiàn)啟動(dòng)頁之后有時(shí)候緊接著還會(huì)出現(xiàn)廣告閃屏。
廣告推廣型、活動(dòng)推廣型、節(jié)日關(guān)懷型。
（1）廣告推廣型
產(chǎn)品為了通過流量變現(xiàn)，在此區(qū)域給一些商家提供廣告宣傳。
（2）活動(dòng)推廣型
有時(shí)候產(chǎn)品在運(yùn)營過程中會(huì)策劃一些行銷活動(dòng)，該區(qū)域就作為活動(dòng)的宣傳口。活動(dòng)推廣型閃屏著重體現(xiàn)活動(dòng)的主題，用戶利益點(diǎn)，以及營造活動(dòng)氛圍。
（3）節(jié)日關(guān)懷型
在節(jié)假日到來時(shí)，很多APP會(huì)通過營造節(jié)日氣氛來體現(xiàn)人文關(guān)懷。目的主要是通過情感化得設(shè)計(jì)給用戶帶來節(jié)日祝福，提升用戶的對產(chǎn)品的好感度，提升產(chǎn)品本來的品牌調(diào)性。且此類閃屏多采用插畫類的手法，對設(shè)計(jì)師的表現(xiàn)力比較強(qiáng)的需求。
引導(dǎo)頁可以為一張靜態(tài)圖片，也可以是個(gè)動(dòng)態(tài)短視頻，有倒計(jì)時(shí)和可以跳過，跳過后進(jìn)入app首頁。
用戶第一次安裝app或者app更新后首次啟動(dòng)時(shí)展示的3-5個(gè)可滑動(dòng)的頁面。主要是向用戶展示產(chǎn)品的功能和產(chǎn)品亮點(diǎn)。
功能介紹性、推廣介紹型、問題解決型
（1）功能介紹性
通過簡潔明了的設(shè)計(jì)和通俗易懂的文案提煉產(chǎn)品特色功能，把產(chǎn)品信息傳達(dá)給用戶。需要注意的是保證信息展示一針見血，切記啰嗦反復(fù)，引導(dǎo)頁數(shù)控制在5張以內(nèi)，避免過多的頁面造成用戶反感。
（2）推廣介紹型
主要目的是傳達(dá)產(chǎn)品的思想和態(tài)度，告訴用戶產(chǎn)品的使命和情懷。這一類的引導(dǎo)頁需要做到吸引用戶注意，引發(fā)用戶的共鳴。
（3）問題解決型
問題解決類通過描述在實(shí)際生活中會(huì)遇到的問題，直擊用戶痛點(diǎn)，通過最后的解決方案讓用戶產(chǎn)生情感上的聯(lián)系，讓用戶對產(chǎn)品產(chǎn)生好感，增加產(chǎn)品粘度。
可以左右滑動(dòng)切換頁面，一般最后一頁有引導(dǎo)按鈕，可以寄點(diǎn)擊進(jìn)入app。
本文由 @Sevenmoon 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
