非常干貨系列之UI設計用戶引導和提示

一、用戶引導的種類

1.閃屏引導頁

閃屏引導頁主要目的是向用戶展示產品新功能的操作方法，這個部分上一篇文章里有過描述，這里就不多廢話了，有興趣的可以在底部打開鏈接查看。

2.新手引導 (頁面遮罩+提示)

顧名思義就是教新用戶如何使用產品，用戶打開應用是為了達到某個目的，而不是為了花時間學習怎樣使用，新手引導的作用就是短時間內讓用戶快速上手產品或者是新增功能，目的是節(jié)約用戶的時間，減少犯錯率。但是我現(xiàn)在發(fā)現(xiàn)這類的引導有一個現(xiàn)象就是整頁一次性展示出全部提示或是文字，每次看到這種引導頁的感覺就是害怕，這么多內容竟然要我一個個都記住，然而短期記憶又容易遺忘，越想記住可能就會忘記的越快，會給我造成負擔，相信你們也會有同樣的感受。(下圖就是一些反例) 所以在設計這類引導的時候建議一定要突出重點功能，文字要精簡；或者是能夠采用分步引導，尋找恰當?shù)臅r機，比如正好使用到某個功能，再出現(xiàn)引導，這樣會更好一點。分步引導切忌過多，不然一次次的點擊只會讓用戶感到厭煩。

3.操作引導

這類引導旨在希望用戶完成產品希望你完成的某種指定的操作，比如完善個人資料、身份認證、充值會員、點擊收藏/關注…這類操作都不是強制用戶完成，但是可能設計的會讓人很有欲望的去完成操作。有一些app會采用FAB按鈕，放置一些核心功能，又或者是讓用戶產生粘性的功能，比如氧氣的簽到功能，方便用戶去使用；還有一些是在頁面上出現(xiàn)動圖進行引導的情況，一般常見于電商或者視頻類app中，這種會更直觀，比如下圖中支付寶-口碑頁面的簽到icon一直在閃爍；蘑菇街首頁的動圖一直也在閃…這類例子很多，特點都是特別顯眼，很有想去一探究竟的沖動。

4.功能性引導

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

5.對話式引導

這類引導方式比較常見，一般是懸浮在頁面上，幾秒鐘后就會自動消失。顏色選取上最好要跟頁面顏色區(qū)分開來，比如用略帶透明度的紅色、黑色等，也要有比較明確的箭頭指示，它可以出現(xiàn)在頁面任意位置，也可以帶有上下浮動效果，讓人很有點擊對象查看的欲望，點擊頁面其他位置就會自動消失，所以對話式引導目的性比較明確。

6.彈框引導

這類引導會打斷用戶使用產品，對用戶的打擾最大，當然也會讓用戶最重視。組合方式：黑色遮罩(60%-80% #000000)+文字/插圖+觸發(fā)button(+關閉button)。該類引導需要用戶做出選擇后才會被關閉，有純文字說明類，例如退出登錄、錯誤提示彈框…；也有伴有圖片類，比如首頁領券等，還可能伴有動效，就會顯得不那么單調，有趣味性，容易接受。

7.局部引導

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

8.全局引導

全局引導就比較好理解了，就是整個頁面都是引導提示，屬于主動型引導。最常見的就是為空頁面：文字提示+插圖占位符+跳轉button，點擊button會進入某個頁面，要避免出現(xiàn)下面第三個整頁空白的情況，不然用戶會覺得卡住了或是出現(xiàn)了bug。

9.其他引導

a.小紅點/數(shù)字+紅點：常見的就是未讀消息，相信很多強迫癥患者都會有把小紅點點掉的沖動，我就是重度強迫癥患者，每次看見必須點掉，這就是利用了用戶的這一心理作用，來達到查看產品類似促銷等信息的目的；

b.文字提醒：經(jīng)?？匆姂美锏哪硞€模塊有促銷活動就會出現(xiàn)這類引導，一般會伴有紅點使用，相信大家已經(jīng)見怪不怪了；

c.toast引導：樣式是toast類型，但是用作引導，例如下拉刷新后，出現(xiàn)提示刷新數(shù)據(jù)，點擊進行查看內容。

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

二、提示

每一款應用都離不開提示，提示的作用就是告知用戶當前操作的結果，及時的反饋，什么時候用什么提示是有區(qū)別的，也是有講究的，要盡可能的減少對用戶的打擾。

1.彈框(模態(tài)彈框)

這類提示和上面說的彈框引導如出一轍，對用戶的打擾較大，也最受重視，屬于強交互。彈框包含黑色遮罩，主頁面不可以進行操作，要通過某種操作后退出，一般多用于廣告促銷活動，比如紅包、優(yōu)惠券，又或是版本升級、對應用進行評價、允許定位、打開消息通知…彈框可以分為告知彈框、操作彈框、底部彈框/功能彈框(換頭像、選日期、分享至雙微等)、多選擇彈框、信息錄入彈框(輸入密碼)…彈框的設計要能有能吊起用戶的積極性，比如生動有趣的文案或是插畫，即使是討厭的彈框也可以讓用戶容易接受。另外彈框要避免疊加的情況，就是在彈框的基礎上再次彈出彈框。

2.浮層提示(模態(tài)彈框)

比較常見的一種提示類型，比如微信頁面右上角點擊添加button，或是長按復制等。

3.toast提示(非模態(tài)彈框)

toast是一種比較常見的提示方式，最初是安卓系統(tǒng)控件，現(xiàn)在ios也廣泛運用，比較輕量化，屬于弱交互，對用戶打擾較輕，出現(xiàn)的時間較短，一般3秒以內，不需要用戶進行操作，如果文字過長，用戶也不會記住，比較容易忽視，所以文字要簡短、精煉。一般比較常見的就是成功提示、失敗提示、警告、加載中…有的出現(xiàn)在頁面中間，也有的出現(xiàn)在頁面頂部或者底部；還有一類toast是需要手動關閉的，可能是因為提示比較重要，和引導的作用類似，但是不建議這樣設計。

4.Snakbar(非模態(tài)彈框)

它是安卓的系統(tǒng)控件，和toast類似，區(qū)別就是它可以進行操作，比較少見，提示文字(+button)，介于toast和彈框之間，點擊后消失或是幾秒后自動消失，一般出現(xiàn)在頁面底部。

OK，今天就說這么多吧。