整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
輯導語：關于啟動頁和引導頁，我們在每個APP都可以看到。做好這兩個頁面，是用戶了解產品的基礎一步，也是用戶最先了解產品的第一個窗口。因此，該如何設計啟動頁與引導頁，才能夠吸引他人？作者總結了一些自己的經驗，與你分享。
啟動頁與引導頁設計幾乎是每個APP必備的。
在產品上架前期，設計師們通常會集中設計產品啟動頁與引導頁。啟動頁與引導頁是用戶了解產品的第一個窗口，能給用戶留下初印象~最近剛做完新產品的啟動圖與引導頁設計，分享自己關于做啟動圖、引導頁學到的相關知識與經驗總結，希望對大家有所幫助，歡迎一起交流學習呀~
啟動頁：當用戶打開APP時，在啟動APP的過程中被用戶所看到的過渡頁面或動畫都被稱為啟動頁。
作用：
特點：
啟動頁的形式比較多樣化，但UI設計師在產品上架前期主要還是設計以產品內容或品牌為主的品牌啟動圖，介紹產品核心服務與傳遞品牌，本文主要介紹的是APP品牌啟動圖這種形式。
其他的，比如廣告頁、節(jié)日閃屏等運營類的啟動頁形式，我們知道有這種過渡頁面存在就行了，這里就不做過多介紹了。
引導頁：當用戶安裝或更新APP后首次啟動APP時展示的3-5個滑動頁面就是引導頁，幫助用戶更加清晰的了解產品定位與功能服務。
作用：
特點：
啟動圖設計形式啟動圖常見的設計形式有純背景+圖標/slogan、背景圖片、漂浮圖標、品牌滲透這4種形式。
純背景+圖標/slogan在純色背景上，融入產品啟動圖標或產品slogan。這一種是最簡潔也是最經典的啟動圖設計形式。簡單有力的宣傳產品品牌、傳遞產品服務理念、加深用戶對產品印象。
設計小tip：設計這種形式的啟動圖，我們需要注意頁面的視覺平衡。上下比例建議采用0.86:1很多設計師在對齊的時候會直接采用工具的垂直居中，我們可以來對比看一下直接垂直居中與微調后的視覺感受~
很明顯，直接采用垂直居中，上下比例為1:1的話，視覺中心是有些往下掉的；我們需要往上進行調整，達到視覺平衡。NAVER的改版設計中，專門將啟動頁的比例由1:1調整為了0.86:1，讓視覺達到舒適。
背景圖片采用圖片或短視頻作為背景圖。圖片或視頻的選取需要符合產品調性。這種設計形式更加直觀，具有場景感，能帶來更大的共鳴，具有沉浸式體驗。最具代表的就是微信的啟動圖了，僅靠一張圖片就形成了產品的記憶點。
政務類產品啟動圖常選用當?shù)氐牡貥私ㄖ騾^(qū)域特色作為啟動背景圖。
漂浮圖標將與產品相關的功能服務圖標飄散浮動在整個頁面中。最具代表的就是淘寶的啟動圖。
品牌滲透品牌滲透設計形式是目前市場上應用得最多的。采用插畫、3D等設計手法，結合產品IP形象、品牌符號等與品牌相關的元素進行融合設計，加強品牌推廣，形成品牌記憶。
品牌滲透的設計形式有：a.將品牌圖形與服務場景進行融合設計利用插圖或3d的形式將品牌圖形與功能服務場景相結合，這類設計形式也是比較流行的，既能直觀的展示服務場景又能很好的宣傳品牌。
b.品牌符號因為啟動圖時間特別短，將產品的品牌符號放大或者重復排版，從而加深用戶對產品、品牌的記憶，這也是一個比較討巧的方法。
c.IP形象啟動圖展示產品的IP形象，加強用于與產品IP的鏈接。最經典的就是QQ的企鵝開屏，這么多年都是一直保持這種設計形式。
引導頁動圖設計形式引導頁設計除了幫助用戶更加清晰的了解產品定位與功能服務外，現(xiàn)已成為每個app的儀式感設計。
每次下載新的app后，自己也很期待看到產品的引導頁，通過引導頁來推測整個app的設計調性~引導頁設計內容相對來說比較固定，一般為文案（主副標題）、圖形部分、輪播器、按鈕這四部分。
設計形式也主要為插畫、3D、實景圖片這3種設計形式。
插畫設計形式這是市場上應用得最多的設計形式，分為扁平化插圖與2.5D插圖形式。
3D元素隨著3D設計形式的流行，3D元素在UI設計中越來越常見。3D圖形比扁平化的圖形更加直觀立體、具有場景感，在引導頁中的應用也越來越多。
實景圖片采用實景圖片或視頻形式，讓畫面更具場景感，具有沉浸式體驗。這類設計形式更適合旅游類或短視頻類產品。
一個產品的啟動圖與引導頁設計（特別是啟動圖設計）是很具有代表性的。我們可以從啟動圖與引導頁看出產品的設計調性與服務理念，個人覺得這兩個模塊也是值得設計師花心思做的~
結合產品服務與品牌進行設計方案探索，也是很有趣的。以上就是自己關于啟動圖與引導頁的部分設計見解與解析，歡迎大家多多指教呀~
本文由 @小魚晴子 原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協(xié)議
導頁即是用戶在首次使用軟件時進行產品推介和引導的說明書，使用戶在最短的時間內了解這個軟件的主要功能、操作方式，以便于迅速上手。
引導頁具有指引用戶了解和掌握軟件應用的功能、特性操作方法等作用，根據(jù)軟件應用的安裝情況，從位置上一般將引導頁分為前置引導和中間引導。
①前置引導。所謂前置引導即在用戶安裝完成軟件應用，并第一次打開的時候出現(xiàn)的引導頁，該引導頁一般由2到6頁連續(xù)或不連續(xù)的相關頁面構成，某些應用引導頁可達10頁。
前置引導是用戶使用軟件應用前所看到的內容，此時用戶對所安裝的產品了解并不多，對于產品的功能、布局、具體操作方法等內容還沒有相關的認知。所以前置引導擔任的作用主要就在于介紹產品的概況內容、核心功能、比同類產品更具競爭力的功能，以及重要的操作步驟等。
②中間引導。對于版本更新的軟件應用，采用中間引導是一個常見的選擇。中間引導往往是對已有版本更新升級后，新功能的一些說明性操作指導。
在第一次使用有新功能出現(xiàn)的頁面或操作中彈出指導性的說明界面，能夠讓用戶快速掌握新功能的使用，而不會因為對新功能的不解造成使用上的困擾。中間引導在設計中常用比較貼近用戶的俏皮口語進行引導，而非正式官方的書面用語。
因為在使用過程中，用戶往往更傾向于舒適滿意的服務性語言，而不使用說教形式的官方用語。設計中多用卡通形象進行引導，以對話的方式逐步提示使用戶帶入感更強，更利于引導內容的呈現(xiàn)，避免了用戶的反感。
①合理化原則。只做必要的內容引導，根據(jù)引導頁的目的，出發(fā)點不同，大致可以將其分為產品說明類、使用說明類、推廣類和問題解決類。在設計之初就應該對需要設計的引導頁進行充分分析，從而得出合理化的設計方案。
②優(yōu)化編排原則。引導頁最常用設計方式有文字與界面組合、文字與插圖組合、動態(tài)效果與音樂、視頻特效等。常用的編排有逐一展示故事串聯(lián)、應景節(jié)日等，逐一展示是將一個個內容總結成點并順序排列出來，各點之間沒有必要的關聯(lián)。
③眼球效應原則。有效地吸引用戶的眼球才能使引導頁面起到事半功倍的效果，需要將焦點聚集在重點閱讀的內容上，才能達到突出信息的目的。聚焦可以通過光影突出、虛化背景、放大鏡突出內容等方式來實現(xiàn)。
眼球效應還可以通過交互效果、動畫和視頻來實現(xiàn)。對于泛濫的靜態(tài)引導頁面來說，采用動態(tài)內容更能夠吸引用戶的注意力。所以除了采用靜態(tài)的表現(xiàn)方式，還可以通過增加合適的動態(tài)內容來吸引用戶的眼球。
采用不一樣的引導頁切換方式，也可以吸引用戶的眼球。一般引導頁的切換都是從右向左滑動切換，對于用戶來說沒有多余的學習負擔，但長久以后就會麻木從而感覺沒有創(chuàng)意。可以通過設計出具有新意的切換方式來博取用戶的關注，比如類似抽取、刮開、上下等切換形式，在合適的時候能取得與眾不同的效果。
引導頁在交互設計中應當根據(jù)項目需求來制定設計方案，并且需要根據(jù)產品的受眾及競品等調研進行合理化設計。引導頁的設計對于新用戶來說是非常重要的，而功能性的升級版本中的引導頁也能讓老用戶快速掌握新升級功能，能起到很好的輔助作用，提升用戶體驗。
總之，引導頁設計是APP的設計重點之一。
動頁作為app的“門面”，每個產品人都不會忽視這個“門面”。本文章就將試著總結市場常見 的app啟動頁&引導頁有哪些形式。
狼人殺中，有種效應叫做錨定效應，意思是人對最開始和最后經歷的事情印象是最深的，應用在狼人殺里面叫做“末置位發(fā)言”和“前置位發(fā)言”，代指這輪第一個發(fā)言和最后一個發(fā)言的人，這兩個點發(fā)言對玩家的影響最大。所以警長可以利用發(fā)言順序，來改變誰是末置位發(fā)言，達到改變戰(zhàn)局的效果。
在app中沒有“末置位”，只有“前置位”——啟動頁&引導頁，啟動頁是指每一次啟動前加載的頁面，而引導頁是指的第一次安裝之后或者大版本更新之后看到的頁面，引導頁相對于啟動頁而言，更加側重于介紹產品。
無論是哪一種頁面，無論哪種呈現(xiàn)方式，目的只有一個，那就是在打開APP的一瞬間，將app想要傳遞給用戶的信息在用戶最可以接受的時候給用戶。
有人說，一個app就像是一個笑話，目的只有一個就是讓用戶當即笑出聲，但是如果一個笑話講出來之后需要人來解釋，那么這個笑話就是不及格的。
那么引導頁的意義究竟在哪里？？？
醫(yī)生在給人看病的時候，第一句話永遠是“你有哪兒不舒服”，問出這句話之后，醫(yī)生正式介入了你的病情。同理，app跟它的新用戶沒有關系，但是當app一開始詢問用戶“病情”的時候，服務便開始了。
對于用戶而言，會覺得這個app靠譜；對于企業(yè)而言，可以拿到用戶的第一手資料；如果把這個定制的過程放在用戶開始使用之后，拿到的資料往往沒有這么真實。
內容過盛的今天，沒有看不到的，只有懶得看到的，定制可以在一開始就精準化服務。
圖1.0 定制化服務
藍海的產品通常比較新奇，競爭對手不多，引導頁更大的問題是如何讓用戶理解產品的理念。
紅海的產品競爭激烈，產品趨同，引導頁要讓用戶知道自己和產品有哪些區(qū)別。
圖 1.1 藍海，藍海，紅海
無論是表現(xiàn)產品的差異，還是傳播產品的理念，目的都是一樣的：搶占用戶的認知市場。先入為主，即使后續(xù)有同類產品出來，它的生存空間只會越來越小。
啟動頁不同于引導頁，啟動頁每天每次打開app都會出現(xiàn)在用戶的面前，所以啟動頁有著大流量的特征，這點不同于引導頁。
像人類不滅亡，就會一直存在的公司——可口可樂等，對他們而言，自己的產品在市場上的地位已經不是第一就是第二了，那么在啟動頁“搶占思維高地”無異于大炮打蚊子。
所以這些行業(yè)大佬們的啟動頁的目的往往是從設計&配色角度，鞏固品牌地位。logo的配色、擺放，配色比重讓你在看到這個藍色&白色的時候，就知道這是餓了嗎，看到綠色&黑色的時候，你也只會聯(lián)想到愛奇藝。
不僅僅是“大佬”，沒有絕對市場地位的產品，沒有每日百萬的用戶流量，所以對他們而言通過這個APP入口來建立品牌辨識度也是不錯的選擇，比如：“飛豬”等。
圖 2.1
葛優(yōu)的早期作品《大腕》里面就用用極度夸張的手法詮釋了廣告所能帶來的巨大利益，而一個app要是有100萬的用戶流量，那么啟用頁作為必經之地，也有100萬的用戶流量，有流量為什么不用來打廣告呢？
國內大部分廠家將自己的logo+slogen放在啟動頁的下方，當沒有任務時，照常啟動，全然不會影響美觀，而且通過大量的留白來突出自己品牌。當有任務的時候，就可以利用原本的留白空間來實現(xiàn)廣告收益。
圖2.2 當有廣告的時候
圖2.3 當沒有廣告的時候
除了以上幾種情況，有的啟動頁也可以是以用戶為本的，支付寶app用戶生日的時候會改變啟動頁，祝福用戶生日快樂，扇貝app更是將啟動頁作為英語學習的碎片。
圖2.4
無論是哪種app啟動頁的都不會永遠處于以上一種狀態(tài)，這應該取決于app在企業(yè)中的任務以及app在市場中的定位綜合各方面來決定。
本文開頭將“啟動頁&引導頁”比作APP的門面，既然是門面，那么“門面”決定了一個產品給用戶的第一印象，所以無論處于那種形式的“啟動頁&引導頁”，風格必須和產品的理念統(tǒng)一，不能“微信 ”的啟動頁接了“可口可樂”廣告。
本文由 @ 爛筆尾 原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協(xié)議
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
