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

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

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

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

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

作用：

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

特點：

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

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

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

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

作用：

• 呈現(xiàn)APP核心功能服務(wù)與產(chǎn)品特色或?qū)Φ鷥?yōu)化的地方做功能說明，讓用戶快速了解產(chǎn)品。
• 引導頁的設(shè)計調(diào)性能讓用戶對產(chǎn)品設(shè)計留下初印象。引導頁已成為每個APP的儀式感設(shè)計，每次產(chǎn)品迭代更新，通過引導頁形式，讓用戶感知到產(chǎn)品的迭代更新。

特點：

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

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

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

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

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

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

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

政務(wù)類產(chǎn)品啟動圖常選用當?shù)氐牡貥私ㄖ騾^(qū)域特色作為啟動背景圖。

漂浮圖標將與產(chǎn)品相關(guān)的功能服務(wù)圖標飄散浮動在整個頁面中。最具代表的就是淘寶的啟動圖。

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

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

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

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

引導頁動圖設(shè)計形式引導頁設(shè)計除了幫助用戶更加清晰的了解產(chǎn)品定位與功能服務(wù)外，現(xiàn)已成為每個app的儀式感設(shè)計。

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

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

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

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

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

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

結(jié)合產(chǎn)品服務(wù)與品牌進行設(shè)計方案探索，也是很有趣的。以上就是自己關(guān)于啟動圖與引導頁的部分設(shè)計見解與解析，歡迎大家多多指教呀~

本文由 @小魚晴子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議