用這篇將近 3000 字的干貨，幫你完全掌握「信息引導」的知識點

上一篇《用我搭建的 PST 框架，幫你系統(tǒng)掌握產(chǎn)品的信息引導設計方法》講了信息引導的策略層：可切入的場景和機制。這篇就總結(jié)一下表現(xiàn)層的內(nèi)容：有哪些引導形式、適用場景、及如何優(yōu)化這些引導。

按照「是否會干擾用戶」的維度，我將信息引導分為兩類：干擾型和不干擾型。

不會干擾用戶操作的引導

不會對用戶的當前操作產(chǎn)生影響的，主要有：tips 通知欄、snackbar 提示框、浮層/氣泡、信息 push、徽標、toast 提示等這幾種引導方式。

1. Tips 通知欄

固定嵌入顯示在界面頂部或?qū)Ш较路降奶崾緱l，向用戶及時反饋信息，用戶操作后才能消失。

適用場景：需要長時間向用戶展示信息、內(nèi)容公告、引導操作的提示。

引導延伸：可動效輪播 Tips 里的信息，引導性更強。如支付寶，在向「異常用戶」轉(zhuǎn)賬時就會出現(xiàn)輪播 tips。

2. Snackbar 提示框

向用戶展示剛剛操作的結(jié)果，且可以取消/撤回操作的提示框。一般顯示在頁面底部，屬于 Android 的系統(tǒng)控件，1-2 秒后自動消失。

適用場景：允許用戶修改剛才的操作結(jié)果，防止用戶犯錯和誤操作的提示。

引導延伸：可直接用圖標表意（代替 iOS 沒有該控件的不足），如新版本滴答清單的操作提示。

3. 浮層/氣泡

懸浮在頁面上，引導用戶使用某功能模塊的浮層，很多產(chǎn)品都會采用該形式向用戶展示新功能、新內(nèi)容。

它與 toast 不同的是，toast 更多是在用戶的操作行為后彈出，而浮層可以在任意流程節(jié)點上出現(xiàn)，靈活性更高。

適用場景：特別想讓用戶知道、引導其使用某功能/內(nèi)容的提示。

引導延伸：浮層消失時，可將內(nèi)容移動并縮小到入口中去，向用戶做入口教育。

4. 信息 push

和前面幾種不同，這種屬于產(chǎn)品的「外部引導」，引導性很強，但需要推送成本做支撐。多用于對老用戶的「喚醒」和留存提升。

適用場景：培養(yǎng)用戶習慣、定時地推送內(nèi)容、提醒用戶操作。

注意：需要獲取用戶手機的「通知」權(quán)限。在需要做引導的場景中，提示用戶允許獲取該權(quán)限。

5. 徽標 Badge

徽標（Badge）指在頁面元素上出現(xiàn)的圓點、數(shù)字、文字等信息。我們經(jīng)常說的「小紅點」，就是徽標的形式之一。徽標可以分為兩類：數(shù)字型和非數(shù)字型（如小紅點、文字、圖形等）。

適用場景：

• 數(shù)字型徽標：需要強調(diào)信息的「數(shù)量」，讓用戶精確知道有多少新內(nèi)容，吸引用戶注意力。
• 非數(shù)字型徽標：只需簡單讓用戶知道有新內(nèi)容，不會對用戶產(chǎn)生干擾。

注意：數(shù)字型徽標需要注意數(shù)字的展示長度和數(shù)量上限。一般最大限度是9999、用「99+」表示視覺長度。且避免太多的數(shù)字信息給用戶造成瀏覽壓力，一般都設有「一鍵清除」功能。

6. Toast 提示

幫助用戶明確當前狀態(tài)的小彈窗提示，一般 1-2 秒后自動消失。Toast 是安卓控件，但現(xiàn)在大部分已經(jīng)通用到兩個系統(tǒng)里了。且現(xiàn)在 toast 的定義也不再是「系統(tǒng)黑框提示」，而是表示所有用戶操作后的反饋狀態(tài)，如圖：

適用場景：需要讓用戶了解當前處境、操作結(jié)果等狀態(tài)。

引導延伸：結(jié)合用戶場景，可提供便捷操作入口。如 QQ 瀏覽器保存圖片后，toast 提示里帶有查看保存后的圖片入口。

干擾用戶操作的引導

會對用戶的當前操作產(chǎn)生干擾，主要有：對話框和下拉菜單/列表。這些引導方式雖說會干擾用戶操作，但好處就在于引導性強，用戶能直觀注意到你的信息傳達。

1. 對話框

強制用戶只執(zhí)行 N 個結(jié)果才能離開的彈窗提示。該類型的引導性就很強，起到信息提醒、功能確認的作用，但用戶體驗相對較差。

除此之外，對話框還能延伸出其他的引導用途，如內(nèi)容的多選、文字的輸入、模塊之間的切換等等，根據(jù)不同的產(chǎn)品需要選擇不同的引導方式。

適用場景：對用戶當前的操作進行提醒、確認、多選、輸入、切換等操作。

注意：禁止出現(xiàn)「在彈窗上面加彈窗」的引導方式，無論是用戶體驗還是技術(shù)壓力，都是一個很不成熟的選擇。

2. 下拉菜單/列表

這種偏向于功能性的引導，將用戶需要操作的內(nèi)容，集中到某一個「收放」入口里，用于提升對內(nèi)容的快捷操作和拓展性。

適用場景：

• 下拉菜單：用戶操作頻率很高的功能，可用下拉菜單作為快捷入口。
• 下拉列表：用戶偶爾會用到功能，用一個下拉列表做為內(nèi)容集合就可以了。

如何讓引導更引人注目？

即使選對了合適的引導方式，但都是「靜態(tài)」地展示而已，如何才能讓信息引導被用戶注意？

1. 利用「系統(tǒng)性能」加強引導

如手機有很多系統(tǒng)功能：如陀螺儀、距離感應器、聲音通知、震動等等，都可以用來加強信息的引導性。

陀螺儀

如「好好住」，就利用陀螺儀的「重力感應」優(yōu)化視覺引導：手機往左/右翻動時，視覺元素跟著往左/右旋轉(zhuǎn)、滾動。

注意：只有原生的 app 頁面，才能實現(xiàn)手機系統(tǒng)功能的運用，在H5鏈接、小程序里是無法實現(xiàn)這些功能的。

聲音通知

用聲音來加強用戶操作反饋，幫助確認用戶的當前狀態(tài)。像滴答清單就用聲音+snackbar（圖形化）做用戶「完成」提示，確保用戶不會誤操作。

手機震動

「震動」是輔助聲音引導的最佳搭檔，如用戶開始靜音無法進行聲音提示時，震動就是一種有效的通知方式：引導性強，且不會對用戶產(chǎn)生操作干擾。

2. 利用「內(nèi)容遮罩」加強引導

這是視覺上的一種「障眼法」，通過兩個內(nèi)容/元素間的位置疊加、交錯，讓人產(chǎn)生一種錯覺感。能極大地吸引人們的注意力，如韓國某時裝軟件的 banner 切換、QQ 瀏覽器的信息流圖片蒙層，就是采用這種方式吸引用戶。

3. 利用「動效」加強引導

動效是我們常用的表現(xiàn)手法之一，其好處是可以吸引用戶點擊、渲染活動/功能氛圍。

而動效的引導分 2 種：一種本身就是動畫/視頻內(nèi)容，如「一淘」首頁的圖標內(nèi)容、支付寶的「集五福」入口，吸引用戶點擊了解內(nèi)容。

另一種是讓圖標、浮層等頁面元素動起來，如 fackbook 的圖標和馬蜂窩的頭像動效。

總結(jié)

上面就是信息引導「表現(xiàn)層」的總結(jié)，根據(jù)不同的場景選擇合適的方式。但有個前提，如果公司有自己的設計規(guī)范，請直接按照規(guī)范里的樣式來輸出。

歡迎關(guān)注作者的微信公眾號：「和出此嚴」