眾所周知，用戶引導(dǎo)在手機(jī)app的使用過(guò)程中是十分常見(jiàn)的，也是必不可少的，旨在降低用戶的學(xué)習(xí)成本，快速了解和上手產(chǎn)品或者是新增功能，避免用戶使用過(guò)程中的迷茫，減少犯錯(cuò)率，是提升產(chǎn)品整體愉快體驗(yàn)的必要手段。

下面就跟隨25學(xué)堂小編一起來(lái)學(xué)習(xí)下9種手機(jī)APP用戶引導(dǎo)界面設(shè)計(jì)。

1、閃屏引導(dǎo)頁(yè)設(shè)計(jì)

閃屏引導(dǎo)頁(yè)主要目的是向用戶展示產(chǎn)品新功能的操作方法。關(guān)于閃屏設(shè)計(jì)的文章，25學(xué)堂也分享了很多，比如APP閃屏設(shè)計(jì)的四種設(shè)計(jì)形式與常用字體和四種常見(jiàn)的手機(jī)APP閃屏頁(yè)設(shè)計(jì)分類(lèi)

所以，閃屏是我們最常見(jiàn)，也是每一篇APP必不可少的用戶引導(dǎo)界面。

比如每日優(yōu)鮮的APP

?

2、新手引導(dǎo) 設(shè)計(jì)(含頁(yè)面遮罩+提示)

顧名思義就是教新用戶如何使用產(chǎn)品，用戶打開(kāi)應(yīng)用是為了達(dá)到某個(gè)目的，而不是為了花時(shí)間學(xué)習(xí)怎樣使用，新手引導(dǎo)的作用就是短時(shí)間內(nèi)讓用戶快速上手產(chǎn)品或者是新增功能，目的是節(jié)約用戶的時(shí)間，減少犯錯(cuò)率。

但是我現(xiàn)在發(fā)現(xiàn)這類(lèi)的引導(dǎo)有一個(gè)現(xiàn)象就是整頁(yè)一次性展示出全部提示或是文字，每次看到這種引導(dǎo)頁(yè)的感覺(jué)就是害怕，這么多內(nèi)容竟然要我一個(gè)個(gè)都記住，然而短期記憶又容易遺忘，越想記住可能就會(huì)忘記的越快，會(huì)給我造成負(fù)擔(dān)，相信你們也會(huì)有同樣的感受。

(下圖就是一些反例) 所以在設(shè)計(jì)這類(lèi)引導(dǎo)的時(shí)候建議一定要突出重點(diǎn)功能，文字要精簡(jiǎn)；或者是能夠采用分步引導(dǎo)，尋找恰當(dāng)?shù)臅r(shí)機(jī)，比如正好使用到某個(gè)功能，再出現(xiàn)引導(dǎo)，這樣會(huì)更好一點(diǎn)。分步引導(dǎo)切忌過(guò)多，不然一次次的點(diǎn)擊只會(huì)讓用戶感到厭煩。

?

3、操作引導(dǎo)設(shè)計(jì)

這類(lèi)引導(dǎo)旨在希望用戶完成產(chǎn)品希望你完成的某種指定的操作，比如完善個(gè)人資料、身份認(rèn)證、充值會(huì)員、點(diǎn)擊收藏/關(guān)注…這類(lèi)操作都不是強(qiáng)制用戶完成，但是可能設(shè)計(jì)的會(huì)讓人很有欲望的去完成操作。有一些app會(huì)采用FAB按鈕，放置一些核心功能，又或者是讓用戶產(chǎn)生粘性的功能，比如氧氣的簽到功能，方便用戶去使用；

還有一些是在頁(yè)面上出現(xiàn)動(dòng)圖進(jìn)行引導(dǎo)的情況，一般常見(jiàn)于電商或者視頻類(lèi)app中，這種會(huì)更直觀，比如下圖中支付寶-口碑頁(yè)面的簽到icon一直在閃爍；蘑菇街首頁(yè)的動(dòng)圖一直也在閃…這類(lèi)例子很多，特點(diǎn)都是特別顯眼，很有想去一探究竟的沖動(dòng)。

?

4、功能性引導(dǎo)設(shè)計(jì)

?這類(lèi)引導(dǎo)是指比較隱蔽性的功能層面，不會(huì)有確切的指引，而是觸及到某個(gè)點(diǎn)而出現(xiàn)的引導(dǎo)類(lèi)型，例如：在支付寶聊天窗口輸入數(shù)字，會(huì)出現(xiàn)給對(duì)方轉(zhuǎn)賬的引導(dǎo)；在應(yīng)用中進(jìn)行截圖會(huì)引導(dǎo)分享至微信/微博等；或是截圖后的一段時(shí)間內(nèi)，在微信聊天頁(yè)面打開(kāi)右下角加號(hào)按鈕會(huì)自動(dòng)出現(xiàn)剛出現(xiàn)的截圖，方便發(fā)送…

?

5、對(duì)話式引導(dǎo)設(shè)計(jì)

這類(lèi)引導(dǎo)方式比較常見(jiàn)，一般是懸浮在頁(yè)面上，幾秒鐘后就會(huì)自動(dòng)消失。

顏色選取上最好要跟頁(yè)面顏色區(qū)分開(kāi)來(lái)，比如用略帶透明度的紅色、黑色等，也要有比較明確的箭頭指示，它可以出現(xiàn)在頁(yè)面任意位置，也可以帶有上下浮動(dòng)效果，讓人很有點(diǎn)擊對(duì)象查看的欲望，點(diǎn)擊頁(yè)面其他位置就會(huì)自動(dòng)消失，所以對(duì)話式引導(dǎo)目的性比較明確。

?

6、彈框引導(dǎo)設(shè)計(jì)

這類(lèi)引導(dǎo)會(huì)打斷用戶使用產(chǎn)品，對(duì)用戶的打擾最大，當(dāng)然也會(huì)讓用戶最重視。組合方式：黑色遮罩(60%-80% #000000)+文字/插圖+觸發(fā)button(+關(guān)閉button)。

該類(lèi)引導(dǎo)需要用戶做出選擇后才會(huì)被關(guān)閉，有純文字說(shuō)明類(lèi)，例如退出登錄、錯(cuò)誤提示彈框…；也有伴有圖片類(lèi)，比如首頁(yè)領(lǐng)券等，還可能伴有動(dòng)效，就會(huì)顯得不那么單調(diào)，有趣味性，容易接受。

7、局部引導(dǎo)設(shè)計(jì)

局部引導(dǎo)一般會(huì)在頁(yè)面頂部出現(xiàn)，也會(huì)有嵌入頁(yè)面某一地方的情況，通常會(huì)用作警示作用，比如消息提醒未打開(kāi)，網(wǎng)絡(luò)異常等等，通常的組合是：文字+伴有紅色、黃色等警示類(lèi)色塊(+關(guān)閉button)，足以引起用戶的重視。

?

8、全局引導(dǎo)設(shè)計(jì)

全局引導(dǎo)就比較好理解了，就是整個(gè)頁(yè)面都是引導(dǎo)提示，屬于主動(dòng)型引導(dǎo)。

最常見(jiàn)的就是為空頁(yè)面：文字提示+插圖占位符+跳轉(zhuǎn)button，點(diǎn)擊button會(huì)進(jìn)入某個(gè)頁(yè)面，要避免出現(xiàn)下面第三個(gè)整頁(yè)空白的情況，不然用戶會(huì)覺(jué)得卡住了或是出現(xiàn)了bug。

關(guān)于APP空頁(yè)面的設(shè)計(jì)干貨如下

1、小白自學(xué)APP設(shè)計(jì)：APP空狀態(tài)界面設(shè)計(jì)教程【一】

2、移動(dòng)APP空狀態(tài)界面設(shè)計(jì)入門(mén)教程【二】

9、其他引導(dǎo)設(shè)計(jì)

?

a.小紅點(diǎn)/數(shù)字+紅點(diǎn)：

常見(jiàn)的就是未讀消息，相信很多強(qiáng)迫癥患者都會(huì)有把小紅點(diǎn)點(diǎn)掉的沖動(dòng)，我就是重度強(qiáng)迫癥患者，每次看見(jiàn)必須點(diǎn)掉，這就是利用了用戶的這一心理作用，來(lái)達(dá)到查看產(chǎn)品類(lèi)似促銷(xiāo)等信息的目的；

b.文字提醒：

經(jīng)?？匆?jiàn)應(yīng)用里的某個(gè)模塊有促銷(xiāo)活動(dòng)就會(huì)出現(xiàn)這類(lèi)引導(dǎo)，一般會(huì)伴有紅點(diǎn)使用，相信大家已經(jīng)見(jiàn)怪不怪了；

c.toast引導(dǎo)：

樣式是toast類(lèi)型，但是用作引導(dǎo)，例如下拉刷新后，出現(xiàn)提示刷新數(shù)據(jù)，點(diǎn)擊進(jìn)行查看內(nèi)容。

?

?

小結(jié)：引導(dǎo)的使用要根據(jù)場(chǎng)景進(jìn)行合理選擇，合理、有趣味的引導(dǎo)設(shè)計(jì)，會(huì)給產(chǎn)品加分，增強(qiáng)用戶探索新功能的欲望，當(dāng)然，初衷都是為了方便用戶的使用，合適的時(shí)機(jī)出現(xiàn)合適的引導(dǎo)，切忌亂用，否則只會(huì)適得其反。

以上就是最值得我們?nèi)W(xué)習(xí)的9種手機(jī)APP用戶引導(dǎo)界面設(shè)計(jì)。謝謝鑒賞。也感謝原作者Eason張UED的整理和分享。有興趣的可以關(guān)注Eason張UED的微信公眾號(hào)。