編輯導語：關于啟動頁和引導頁，我們在每個APP都可以看到。做好這兩個頁面，是用戶了解產品的基礎一步，也是用戶最先了解產品的第一個窗口。因此，該如何設計啟動頁與引導頁，才能夠吸引他人？作者總結了一些自己的經驗，與你分享。

啟動頁與引導頁設計幾乎是每個APP必備的。

在產品上架前期，設計師們通常會集中設計產品啟動頁與引導頁。啟動頁與引導頁是用戶了解產品的第一個窗口，能給用戶留下初印象~最近剛做完新產品的啟動圖與引導頁設計，分享自己關于做啟動圖、引導頁學到的相關知識與經驗總結，希望對大家有所幫助，歡迎一起交流學習呀~

一、啟動頁、引導頁是什么？

啟動頁：當用戶打開APP時，在啟動APP的過程中被用戶所看到的過渡頁面或動畫都被稱為啟動頁。

作用：

• 緩解用戶啟動APP時等待的焦慮情緒。
• 傳遞品牌或介紹產品服務理念，加強用戶對產品的印象。

特點：

• 展示時間短，一般3s內，不可交互。
• 啟動圖設計的更新速率可以保持1~3年更換一次，不建議頻繁更換，啟動圖設計更新應該是跟隨產品整個戰略進行更換的。

啟動頁的形式比較多樣化，但UI設計師在產品上架前期主要還是設計以產品內容或品牌為主的品牌啟動圖，介紹產品核心服務與傳遞品牌，本文主要介紹的是APP品牌啟動圖這種形式。

其他的，比如廣告頁、節日閃屏等運營類的啟動頁形式，我們知道有這種過渡頁面存在就行了，這里就不做過多介紹了。

引導頁：當用戶安裝或更新APP后首次啟動APP時展示的3-5個滑動頁面就是引導頁，幫助用戶更加清晰的了解產品定位與功能服務。

作用：

• 呈現APP核心功能服務與產品特色或對迭代優化的地方做功能說明，讓用戶快速了解產品。
• 引導頁的設計調性能讓用戶對產品設計留下初印象。引導頁已成為每個APP的儀式感設計，每次產品迭代更新，通過引導頁形式，讓用戶感知到產品的迭代更新。

特點：

• 可左右滑動切換頁面，最后一頁有進入按鈕
• 引導頁個數一般為3-5個，個數不要超過5個，且盡量提供直接進入或跳過的按鈕
• 引導頁的設計更新頻率可以跟隨每次產品升級、新功能特色進行更新，更新頻率相對較頻繁一些

二、啟動頁、引導頁怎么做？

啟動圖設計形式啟動圖常見的設計形式有純背景+圖標/slogan、背景圖片、漂浮圖標、品牌滲透這4種形式。

純背景+圖標/slogan在純色背景上，融入產品啟動圖標或產品slogan。這一種是最簡潔也是最經典的啟動圖設計形式。簡單有力的宣傳產品品牌、傳遞產品服務理念、加深用戶對產品印象。

設計小tip：設計這種形式的啟動圖，我們需要注意頁面的視覺平衡。上下比例建議采用0.86:1很多設計師在對齊的時候會直接采用工具的垂直居中，我們可以來對比看一下直接垂直居中與微調后的視覺感受~

很明顯，直接采用垂直居中，上下比例為1:1的話，視覺中心是有些往下掉的；我們需要往上進行調整，達到視覺平衡。NAVER的改版設計中，專門將啟動頁的比例由1:1調整為了0.86:1，讓視覺達到舒適。

背景圖片采用圖片或短視頻作為背景圖。圖片或視頻的選取需要符合產品調性。這種設計形式更加直觀，具有場景感，能帶來更大的共鳴，具有沉浸式體驗。最具代表的就是微信的啟動圖了，僅靠一張圖片就形成了產品的記憶點。

政務類產品啟動圖常選用當地的地標建筑或區域特色作為啟動背景圖。

漂浮圖標將與產品相關的功能服務圖標飄散浮動在整個頁面中。最具代表的就是淘寶的啟動圖。

品牌滲透品牌滲透設計形式是目前市場上應用得最多的。采用插畫、3D等設計手法，結合產品IP形象、品牌符號等與品牌相關的元素進行融合設計，加強品牌推廣，形成品牌記憶。

品牌滲透的設計形式有：a.將品牌圖形與服務場景進行融合設計利用插圖或3d的形式將品牌圖形與功能服務場景相結合，這類設計形式也是比較流行的，既能直觀的展示服務場景又能很好的宣傳品牌。

b.品牌符號因為啟動圖時間特別短，將產品的品牌符號放大或者重復排版，從而加深用戶對產品、品牌的記憶，這也是一個比較討巧的方法。

c.IP形象啟動圖展示產品的IP形象，加強用于與產品IP的鏈接。最經典的就是QQ的企鵝開屏，這么多年都是一直保持這種設計形式。

引導頁動圖設計形式引導頁設計除了幫助用戶更加清晰的了解產品定位與功能服務外，現已成為每個app的儀式感設計。

每次下載新的app后，自己也很期待看到產品的引導頁，通過引導頁來推測整個app的設計調性~引導頁設計內容相對來說比較固定，一般為文案（主副標題）、圖形部分、輪播器、按鈕這四部分。

設計形式也主要為插畫、3D、實景圖片這3種設計形式。

插畫設計形式這是市場上應用得最多的設計形式，分為扁平化插圖與2.5D插圖形式。

3D元素隨著3D設計形式的流行，3D元素在UI設計中越來越常見。3D圖形比扁平化的圖形更加直觀立體、具有場景感，在引導頁中的應用也越來越多。

實景圖片采用實景圖片或視頻形式，讓畫面更具場景感，具有沉浸式體驗。這類設計形式更適合旅游類或短視頻類產品。

一個產品的啟動圖與引導頁設計（特別是啟動圖設計）是很具有代表性的。我們可以從啟動圖與引導頁看出產品的設計調性與服務理念，個人覺得這兩個模塊也是值得設計師花心思做的~

結合產品服務與品牌進行設計方案探索，也是很有趣的。以上就是自己關于啟動圖與引導頁的部分設計見解與解析，歡迎大家多多指教呀~

本文由 @小魚晴子 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議