關(guān)于啟動(dòng)頁與引導(dǎo)頁的設(shè)計(jì)總結(jié)

0 評論 22429 瀏覽 82 收藏 11 分鐘

編輯導(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ǎo)頁是什么?

啟動(dòng)頁:當(dāng)用戶打開APP時(shí),在啟動(dòng)APP的過程中被用戶所看到的過渡頁面或動(dòng)畫都被稱為啟動(dòng)頁。

作用:

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

特點(diǎn):

  • 展示時(shí)間短,一般3s內(nèi),不可交互。
  • 啟動(dòng)圖設(shè)計(jì)的更新速率可以保持1~3年更換一次,不建議頻繁更換,啟動(dòng)圖設(shè)計(jì)更新應(yīng)該是跟隨產(chǎn)品整個(gè)戰(zhàn)略進(jì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ù)。

作用:

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

特點(diǎn):

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

二、啟動(dòng)頁、引導(dǎo)頁怎么做?

啟動(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é)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!