互聯(lián)網(wǎng)產(chǎn)品中常見(jiàn)的頁(yè)面引導(dǎo)，到底應(yīng)該怎么設(shè)計(jì)？

一、為什么要做頁(yè)面引導(dǎo)？

幾乎每個(gè)互聯(lián)網(wǎng)產(chǎn)品，不論是Web還是App都會(huì)做一些頁(yè)面引導(dǎo)。有些是頁(yè)面交互引導(dǎo)；有些是為了介紹產(chǎn)品的新功能；有些是功能的轉(zhuǎn)移和改名的提醒，也有些是引導(dǎo)用戶去參加營(yíng)銷活動(dòng)。

最重要的是在用戶需要的時(shí)候適量做一些引導(dǎo)，培養(yǎng)用戶正確的使用習(xí)慣。

二、頁(yè)面引導(dǎo)有哪些類型？又該如何運(yùn)用？

功能性引導(dǎo)

功能性引導(dǎo)又分主功能引導(dǎo)、新功能引導(dǎo)和功能轉(zhuǎn)移或改名引導(dǎo)。

①主功能引導(dǎo)

此類引導(dǎo)幾乎都是產(chǎn)品主要功能的引導(dǎo)，如交互復(fù)雜的工具型產(chǎn)品；也有一些會(huì)使用在一級(jí)頁(yè)面主要功能上，當(dāng)用戶不知道這個(gè)按鈕可以干嘛，此時(shí)可適時(shí)引導(dǎo)用戶。

【AT】做了主要功能的引導(dǎo)，因?yàn)榇祟惞ぞ咝援a(chǎn)品的交互比較復(fù)雜，此引導(dǎo)會(huì)長(zhǎng)期顯示在頁(yè)面上，用戶點(diǎn)擊了“X”按鈕后，此引導(dǎo)就不再顯示；

【安心記加班】在按鈕旁做了引導(dǎo)，讓用戶明白此按鈕是干嘛的，且能夠給用戶帶來(lái)什么，直到用戶點(diǎn)擊一次后引導(dǎo)才消失。

②新功能引導(dǎo)

產(chǎn)品需要推一個(gè)比較重要的新功能，這個(gè)時(shí)候可以做些頁(yè)面引導(dǎo)。但并不是每個(gè)新功能做需要引導(dǎo)，很多功能入口深，并不是很重要，而且用戶也有自己的探索欲，可適時(shí)留給用戶去發(fā)現(xiàn)。

這兩個(gè)引導(dǎo)的都是全屏大面積引導(dǎo)用戶，此類引導(dǎo)有利有弊。好處是用戶對(duì)于功能介紹有個(gè)更清晰的了解，壞處是用戶可能會(huì)對(duì)新功能完全不感興趣，增加用戶操作負(fù)擔(dān)。因此這類引導(dǎo)需要慎用，如有必要在頁(yè)面上可設(shè)計(jì)一個(gè)可關(guān)閉的按鈕（但實(shí)際應(yīng)該設(shè)計(jì)成點(diǎn)擊屏幕任意區(qū)域關(guān)閉引導(dǎo)）。

③功能轉(zhuǎn)移或改名引導(dǎo)

很多產(chǎn)品在迭代過(guò)程中會(huì)根據(jù)數(shù)據(jù)和用戶反饋，把一些功能進(jìn)行組織和轉(zhuǎn)移也有些產(chǎn)品會(huì)修改某個(gè)功能的名字，告知用戶。

此時(shí)都需要用引導(dǎo)的方式提醒用戶，重要功能為強(qiáng)提醒，次要功能為弱提醒，且用戶都可輕易關(guān)閉提醒。

由于設(shè)置里的功能點(diǎn)擊率較低，因此【CHAO】用了比較輕量級(jí)的引導(dǎo)，提醒用戶設(shè)置的功能已轉(zhuǎn)移藍(lán)領(lǐng)招聘App，不僅轉(zhuǎn)移了部分功能，還將APP內(nèi)的一個(gè)重要功能改名，此處用全屏的引導(dǎo)更為合適，可強(qiáng)制用戶去看。（但此處不建議用暗色文字）

運(yùn)營(yíng)型引導(dǎo)運(yùn)營(yíng)型的引導(dǎo)，一般的目的都是促活，引流，以及新的運(yùn)營(yíng)活動(dòng)的引導(dǎo)提醒，運(yùn)營(yíng)型引導(dǎo)的形式非常多樣，用的比較多的是彈框，但這次不討論彈框，只討論比較輕量級(jí)的引導(dǎo)。

【叮咚買(mǎi)菜】用比較輕量級(jí)的引導(dǎo)提醒用戶開(kāi)啟簽到提醒，以此來(lái)提高產(chǎn)品的日活而【支付寶】則用輕量級(jí)的引導(dǎo)，為了提高活動(dòng)的參與度，提醒用戶有新的活動(dòng)可參加。

這兩種引導(dǎo)可以特定的形式關(guān)閉，比如簽到提醒可以在開(kāi)啟簽到提醒后自動(dòng)關(guān)閉引導(dǎo)。而有些運(yùn)營(yíng)活動(dòng)在不過(guò)分打擾用戶的前提下可以設(shè)置成在活動(dòng)期間常顯示。

三、設(shè)計(jì)頁(yè)面引導(dǎo)如何避雷？

引導(dǎo)不可濫用，也要正確的去使用

【小黑魚(yú)】在用戶首次進(jìn)入app時(shí)就強(qiáng)迫用戶看一堆引導(dǎo)，這一類引導(dǎo)沒(méi)有意義，不引導(dǎo)用戶也知道這個(gè)是干嘛的，同時(shí)文字也過(guò)多，一般此類引導(dǎo)用戶都只瞄一眼，太多文字反而不利于用戶閱讀。

【優(yōu)衣庫(kù)】的引導(dǎo)用的恰當(dāng)，但是交互卻不是很方便，必須要點(diǎn)擊“我知道啦”才能關(guān)閉引導(dǎo)，對(duì)于用戶并不是那么友好，如改為點(diǎn)擊屏幕任意區(qū)域關(guān)閉引導(dǎo)更為合適。

總結(jié)

引導(dǎo)類型：

1. 功能性引導(dǎo)

• 主功能引導(dǎo)
• 新功能引導(dǎo)
• 功能轉(zhuǎn)移或改名引導(dǎo)

2. 運(yùn)營(yíng)型引導(dǎo)

設(shè)計(jì)引導(dǎo)需要注意的點(diǎn)：

1. 引導(dǎo)性文字不宜過(guò)長(zhǎng)
2. 全屏引導(dǎo)的文字顏色需使用亮色，且最好不超過(guò)兩種顏色
3. 引導(dǎo)中適量加入一點(diǎn)圖案可幫助用戶理解
4. 關(guān)閉引導(dǎo)的操作必須是便捷的
5. 不要濫用引導(dǎo)
6. 設(shè)計(jì)前需思考設(shè)計(jì)引導(dǎo)的目的是什么？設(shè)計(jì)輕量級(jí)引導(dǎo)還是重量級(jí)引導(dǎo)
7. 全屏重量級(jí)引導(dǎo)最好有引導(dǎo)關(guān)閉的按鈕

回到最初設(shè)計(jì)引導(dǎo)的目的，發(fā)現(xiàn)有些引導(dǎo)還可以用其他的形式代替，比如啟動(dòng)APP時(shí)的引導(dǎo)頁(yè)、幫助頁(yè)面等當(dāng)然了，話又說(shuō)回來(lái)，在某些情況下，最好的設(shè)計(jì)是不需要引導(dǎo)的。

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

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