起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識“信息引導”超全總結，讓你的設計有理有據
講信息引導方式的有很多，而本文主要從“是否會打擾用戶”的維度，分兩個類型舉例分析了其中的設計以及原理。
上一篇講了信息引導的策略層：可切入的場景和機制《系統性地教你：如何設計產品的信息引導？》。這篇就總結一下表現層的內容：有哪些引導形式？適用什么場景下？如何優化這些引導？
讓各位在界面輸出時，能更清晰地理解信息的引導。按照‘是否會干擾用戶’的維度，我將信息引導分為兩類：干擾型和不干擾型。下面我們直接進入主題：
Part 1：不會干擾用戶操作的引導
不會對用戶的當前操作產生影響的，主要有：tips通知欄、snackbar提示框、浮層/氣泡、信息push、徽標、toast提示等這幾種引導方式。
1. Tips通知欄
固定嵌入顯示在界面頂部或nav下方的提示條，向用戶反饋及時信息，用戶操作它后才能消失。
適用場景：需要長時間向用戶展示信息、內容公告、引導操作的提示。
引導延伸：可動效輪播Tips里的信息，引導性更強。如支付寶，在向‘異常用戶’轉賬時就會出現輪播tips。
2. Snackbar提示框
向用戶展示剛剛操作結果、且可以取消/撤回操作的提示框。一般顯示在頁面底部，屬于Android的系統控件，1-2秒后自動消失。
適用場景：允許用戶修改剛才的操作結果，防止用戶犯錯和誤操作的提示。
引導延伸：可直接用圖標表意（代替iOS沒有該控件的不足），如新版本滴答清單的操作提示。
3. 浮層/氣泡
懸掛在頁面上，引導用戶使用某功能模塊的浮層，很多產品都會采用該形式向用戶展示新功能、新內容。
它與toast不同的是：toast更多則是在用戶的操作行為后彈出的，而浮層可以在任意流程節點上出現，靈活性更高。
適用場景：特別想讓用戶知道、引導其使用某功能/內容的提示。
引導延伸：浮層消失時，可將內容移動并縮小到入口中去，向用戶做入口教育。
4. 信息push
和前面幾種不同，這種屬于產品的‘外部引導’，引導性很強，但需要一點的推送成本做支撐。多用于運營內容的對老用戶的‘喚醒’和留存提升。
適用場景：培養用戶習慣、定時地推送內容、提醒用戶操作。
注意：需要獲取用戶手機的‘通知’權限。在需要做引導的場景中，提示用戶允許獲取該權限。
5. 徽標/Badge
徽標（Badge）指在頁面元素上出現的圓點、數字、文字等信息。我們經常說的‘小紅點’，就是徽標的形式之一?；諛丝梢苑譃?類：數字型和非數字型（如小紅點、文字、圖形等）。
適用場景：
數字型徽標：需要強調信息的‘數量’，讓用戶精確知道有多少新內容，吸引用戶注意力。
非數字型徽標：只需簡單讓用戶知道有新內容/消失，不會對用戶產生干擾。
注意：數字型徽標需要注意數字的展示長度和數量上限。一般最大限度是9999、用‘99+’表示視覺長度。且避免太多的數字信息給用戶造成瀏覽壓力，一般都設有‘一鍵清除’功能。
6. Toast提示
幫助用戶明確當前狀態的小彈窗提示，一般1-2秒后自動消失。Toast是安卓控件，但現在大部分已經通用到兩個系統里了。且現在toast的定義也不再是‘系統黑框提示’，而是表示所有用戶操作后的反饋狀態，如圖：
適用場景：需要讓用戶了解當前處境、操作結果等狀態。
引導延伸：結合用戶場景，可提供便捷操作入口。如QQ瀏覽器保存完圖片后，toast提示里帶有查看保存后的圖片入口。
Part 2：干擾用戶操作的引導
會對用戶的當前操作產生干擾，主要有：對話框和下拉菜單/列表。這些引導方式雖說會干擾用戶操作，但好處就在于引導性強，用戶能直觀注意到你的信息傳達。
1. 對話框/Dialog
強制用戶只執行N個結果才能離開的彈層提示。該類型的引導性就很強，但用戶體驗相對差點，大多起信息提醒、功能確認作用。
除此之外，對話框還能延伸出其他的引導用途，如內容的多選、文字的輸入、模塊之間的切換等等，根據不同的產品需要選擇不同的引導方式。
適用場景：對用戶當前的操作進行提醒、確認、多選、輸入、切換等操作。
注意：禁止出現‘在彈窗上面加彈窗’的引導方式，無論是用戶體驗還是技術壓力，都是一個很不成熟的選擇。
2. 下拉菜單/列表
這種偏向于功能性的引導，將用戶需要操作的內容，集中到某一個‘收放’入口里，用于提升對內容的快捷操作和拓展性。
適用場景：
下拉菜單：用戶操作頻率很高的功能，可用下拉菜單作為快捷入口。
下拉列表：用戶偶爾會用到功能，用一個下拉列表做為內容集合就可以了。
Part 3：如何讓引導更引人注目？
即使選對了合適的引導方式，但都是‘靜態’地展示而已，如何才能讓信息的引導讓用戶更加注意到、奪人眼球呢？
1. 利用‘系統性能’加強引導
如手機有很多系統功能：如陀螺儀、距離感應器、聲音通知、震動等等，都是可以用來加強信息的引導性。
舉例：
陀螺儀
如‘好好住’和某閱讀APP（名字忘了~），就利用陀螺儀的‘重力感恩’優化視覺引導：手機往左/右翻動時，視覺元素跟著往左/右旋轉、滾動。
注意：只有原生的app頁面，才能實現手機系統功能的運用，在H5鏈接、小程序里是無法實現這些功能的。
聲音通知
用聲音來加強用戶操作反饋，幫助確認用戶的當前狀態。像滴答清單就用聲音+snackbar（圖形化）做用戶‘完成’提示，確保用戶不會誤操作。
手機震動
‘震動’是輔助聲音引導的最佳搭檔，如用戶開始靜音無法進行聲音提示時，震動就是一種有效的通知方式：引導性強，且不會對用戶產生操作干擾。
2. 利用‘內容遮罩’加強引導
這是視覺上的一種‘障眼法’，通過兩個內容/元素間的位置疊加、交錯，讓人產生一種錯覺感。能極大地吸引人們的注意力，如韓國某時裝軟件的banner切換、QQ瀏覽器的信息流圖片蒙層，就是采用這種方式吸引用戶。
3. 利用‘動效’加強引導
動效是我們常用的表現手法之一，其好處是可以吸引用戶點擊、渲染活動/功能氛圍。
而動效的引導分2種：一種本身就是動畫/視頻內容，如‘一淘’首頁的圖標內容、支付寶的‘集五?！肟冢糜谖脩酎c擊了解內容。
另一種是讓圖標、浮層等頁面元素動起來，如fackbook的圖標和馬蜂窩的頭像動效。
而效果歸效果，如何實現動效則是另外一個問題。目前來說有標注圖、gif圖、png序列圖、mp4視頻、Json文件、交互demo等交付形式讓開發實現的，詳情的查看我之前的每日筆記。
結尾與總結
上面就是信息引導‘表現層’的總結，根據不同的場景選擇不同的需要，但有個前提：如果公司有自己的設計規范，請直接按照規范里的樣式來輸出。避免整個產品的視覺和交互體驗式上又多了一種新樣式，開發庫里也不會多出一個新的控件代碼。
往期文章推薦
作者：和出此嚴，微信ID：elffzh，公眾號：和出此嚴
本文由 @和出此嚴 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash, 基于CC0協議
推薦一個我做的學習網站：
有蛋案例 youdananli.com
有多個大廠、各個行業里有意思的設計案例，還有近百條產品/設計知識方法、理論模型
感興趣的可以看看
總結文件可到公眾號（和出此嚴）領取