"\u003Cblockquote\u003E\u003Cp\u003E講信息引導方式的有很多，而本文主要從“是否會打擾用戶”的維度，分兩個類型舉例分析了其中的設計以及原理。\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002FRQhJ4bx60JhDdE\" img_width=\"800\" img_height=\"450\" alt=\"“信息引導”超全總結，讓你的設計有理有據\" inline=\"0\"\u003E\u003Cp\u003E上一篇講了信息引導的策略層：可切入的場景和機制《系統性地教你：如何設計產品的信息引導？》。這篇就總結一下表現層的內容：\u003Cstrong\u003E有哪些引導形式？適用什麼場景下？如何優化這些引導？\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E讓各位在界面輸出時，能更清晰地理解信息的引導。按照‘是否會干擾用戶’的維度，我將信息引導分爲兩類：干擾型和不干擾型。下面我們直接進入主題：\u003C\u002Fp\u003E\u003Cp\u003E\u003C\u002Fp\u003E\u003Ch2\u003EPart 1：不會干擾用戶操作的引導\u003C\u002Fh2\u003E\u003Cp\u003E不會對用戶的當前操作產生影響的，主要有：\u003Cstrong\u003Etips通知欄、snackbar提示框、浮層\u002F氣泡、信息push、徽標、toast提示\u003C\u002Fstrong\u003E等這幾種引導方式。\u003C\u002Fp\u003E\u003Cp\u003E\u003C\u002Fp\u003E\u003Ch3\u003E1. Tips通知欄\u003C\u002Fh3\u003E\u003Cp\u003E固定嵌入顯示在界面頂部或nav下方的提示條，向用戶反饋及時信息，用戶操作它後才能消失。\u003C\u002Fp\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002FRXhLekyCPy05eT\" img_width=\"1200\" img_height=\"596\" alt=\"“信息引導”超全總結，讓你的設計有理有據\" inline=\"0\"\u003E\u003Cp\u003E\u003Cstrong\u003E適用場景：\u003C\u002Fstrong\u003E需要長時間向用戶展示信息、內容公告、引導操作的提示。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E引導延伸：\u003C\u002Fstrong\u003E可動效輪播Tips裏的信息，引導性更強。如支付寶，在向‘異常用戶’轉賬時就會出現輪播tips。\u003C\u002Fp\u003E\u003Cp\u003E\u003C\u002Fp\u003E\u003Ch3\u003E2. Snackbar提示框\u003C\u002Fh3\u003E\u003Cp\u003E向用戶展示剛剛操作結果、且可以取消\u002F撤回操作的提示框。一般顯示在頁面底部，屬於Android的系統控件，1-2秒後自動消失。\u003C\u002Fp\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002FRXhLelOH4bVPY\" img_width=\"1200\" img_height=\"475\" alt=\"“信息引導”超全總結，讓你的設計有理有據\" inline=\"0\"\u003E\u003Cp\u003E\u003Cstrong\u003E適用場景：\u003C\u002Fstrong\u003E允許用戶修改剛纔的操作結果，防止用戶犯錯和誤操作的提示。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E引導延伸：\u003C\u002Fstrong\u003E可直接用圖標表意（代替iOS沒有該控件的不足），如新版本滴答清單的操作提示。\u003C\u002Fp\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002FRXhLelj5ZYo42h\" img_width=\"1200\" img_height=\"301\" alt=\"“信息引導”超全總結，讓你的設計有理有據\" inline=\"0\"\u003E\u003Cp\u003E\u003C\u002Fp\u003E\u003Ch3\u003E3. 浮層\u002F氣泡\u003C\u002Fh3\u003E\u003Cp\u003E懸掛在頁面上，引導用戶使用某功能模塊的浮層，很多產品都會採用該形式向用戶展示新功能、新內容。\u003C\u002Fp\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002FRXhLem32EN5zUh\" img_width=\"1200\" img_height=\"753\" alt=\"“信息引導”超全總結，讓你的設計有理有據\" inline=\"0\"\u003E\u003Cp\u003E它與toast不同的是：toast更多則是在用戶的操作行爲後彈出的，而浮層可以在任意流程節點上出現，靈活性更高。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E適用場景：\u003C\u002Fstrong\u003E特別想讓用戶知道、引導其使用某功能\u002F內容的提示。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E引導延伸\u003C\u002Fstrong\u003E：浮層消失時，可將內容移動並縮小到入口中去，向用戶做入口教育。\u003C\u002Fp\u003E\u003Cp\u003E\u003C\u002Fp\u003E\u003Ch3\u003E4. 信息push\u003C\u002Fh3\u003E\u003Cp\u003E和前面幾種不同，這種屬於產品的‘外部引導’，引導性很強，但需要一點的推送成本做支撐。多用於運營內容的對老用戶的‘喚醒’和留存提升。\u003C\u002Fp\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002FRXhLfAHIrm53ae\" img_width=\"1200\" img_height=\"290\" alt=\"“信息引導”超全總結，讓你的設計有理有據\" inline=\"0\"\u003E\u003Cp\u003E\u003Cstrong\u003E適用場景：\u003C\u002Fstrong\u003E培養用戶習慣、定時地推送內容、提醒用戶操作。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E注意：\u003C\u002Fstrong\u003E需要獲取用戶手機的‘通知’權限。在需要做引導的場景中，提示用戶允許獲取該權限。\u003C\u002Fp\u003E\u003Cp\u003E\u003C\u002Fp\u003E\u003Ch3\u003E5. 徽標\u002FBadge\u003C\u002Fh3\u003E\u003Cp\u003E徽標（Badge）指在頁面元素上出現的圓點、數字、文字等信息。我們經常說的‘小紅點’，就是徽標的形式之一。徽標可以分爲2類：數字型和非數字型（如小紅點、文字、圖形等）。\u003C\u002Fp\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002FRXhLfAgEoyDYZG\" img_width=\"1200\" img_height=\"489\" alt=\"“信息引導”超全總結，讓你的設計有理有據\" inline=\"0\"\u003E\u003Cp\u003E\u003Cstrong\u003E適用場景：\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E數字型徽標：需要強調信息的‘數量’，讓用戶精確知道有多少新內容，吸引用戶注意力。\u003C\u002Fp\u003E\u003Cp\u003E非數字型徽標：只需簡單讓用戶知道有新內容\u002F消失，不會對用戶產生干擾。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E注意：\u003C\u002Fstrong\u003E數字型徽標需要注意\u003Cstrong\u003E數字的展示長度和數量上限。\u003C\u002Fstrong\u003E一般最大限度是9999、用‘99+’表示視覺長度。且避免太多的數字信息給用戶造成瀏覽壓力，一般都設有‘一鍵清除’功能。\u003C\u002Fp\u003E\u003Cp\u003E\u003C\u002Fp\u003E\u003Ch3\u003E6. Toast提示\u003C\u002Fh3\u003E\u003Cp\u003E幫助用戶明確當前狀態的小彈窗提示，一般1-2秒後自動消失。Toast是安卓控件，但現在大部分已經通用到兩個系統裏了。且現在toast的定義也不再是‘系統黑框提示’，而是表示所有用戶操作後的反饋狀態，如圖：\u003C\u002Fp\u003E\u003Cimg src=\"http:\u002F\u002Fp9.pstatp.com\u002Flarge\u002Fpgc-image\u002FRXhLfB01QcOnG5\" img_width=\"1200\" img_height=\"656\" alt=\"“信息引導”超全總結，讓你的設計有理有據\" inline=\"0\"\u003E\u003Cp\u003E\u003Cstrong\u003E適用場景：\u003C\u002Fstrong\u003E需要讓用戶瞭解當前處境、操作結果等狀態。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E引導延伸：\u003C\u002Fstrong\u003E結合用戶場景，可提供便捷操作入口。如QQ瀏覽器保存完圖片後，toast提示裏帶有查看保存後的圖片入口。\u003C\u002Fp\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002FRXhLfBR7dxfazg\" img_width=\"1200\" img_height=\"448\" alt=\"“信息引導”超全總結，讓你的設計有理有據\" inline=\"0\"\u003E\u003Cp\u003E\u003C\u002Fp\u003E\u003Ch2\u003EPart 2：干擾用戶操作的引導\u003C\u002Fh2\u003E\u003Cp\u003E會對用戶的當前操作產生干擾，主要有：\u003Cstrong\u003E對話框和下拉菜單\u002F列表\u003C\u002Fstrong\u003E。這些引導方式雖說會干擾用戶操作，但好處就在於引導性強，用戶能直觀注意到你的信息傳達。\u003C\u002Fp\u003E\u003Cp\u003E\u003C\u002Fp\u003E\u003Ch3\u003E1. 對話框\u002FDialog\u003C\u002Fh3\u003E\u003Cp\u003E強制用戶只執行N個結果才能離開的彈層提示。該類型的引導性就很強，但用戶體驗相對差點，大多起信息提醒、功能確認作用。\u003C\u002Fp\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002FRXhLfBhINiUnWg\" img_width=\"1200\" img_height=\"839\" alt=\"“信息引導”超全總結，讓你的設計有理有據\" inline=\"0\"\u003E\u003Cp\u003E除此之外，對話框還能延伸出其他的引導用途，如\u003Cstrong\u003E內容的多選、文字的輸入、模塊之間的切換\u003C\u002Fstrong\u003E等等，根據不同的產品需要選擇不同的引導方式。\u003C\u002Fp\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002FRXhLfamDPKBhsn\" img_width=\"1200\" img_height=\"803\" alt=\"“信息引導”超全總結，讓你的設計有理有據\" inline=\"0\"\u003E\u003Cp\u003E\u003Cstrong\u003E適用場景：\u003C\u002Fstrong\u003E對用戶當前的操作進行提醒、確認、多選、輸入、切換等操作。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E注意：\u003C\u002Fstrong\u003E禁止出現‘在彈窗上面加彈窗’的引導方式，無論是用戶體驗還是技術壓力，都是一個很不成熟的選擇。\u003C\u002Fp\u003E\u003Cp\u003E\u003C\u002Fp\u003E\u003Ch3\u003E2. 下拉菜單\u002F列表\u003C\u002Fh3\u003E\u003Cp\u003E這種偏向於功能性的引導，將用戶需要操作的內容，集中到某一個‘收放’入口裏，用於提升對內容的快捷操作和拓展性。\u003C\u002Fp\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002FRXhLfbBFqazp6d\" img_width=\"1200\" img_height=\"635\" alt=\"“信息引導”超全總結，讓你的設計有理有據\" inline=\"0\"\u003E\u003Cp\u003E\u003Cstrong\u003E適用場景：\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E下拉菜單：用戶操作頻率很高的功能，可用下拉菜單作爲快捷入口。\u003C\u002Fp\u003E\u003Cp\u003E下拉列表：用戶偶爾會用到功能，用一個下拉列表做爲內容集合就可以了。\u003C\u002Fp\u003E\u003Cp\u003E\u003C\u002Fp\u003E\u003Ch2\u003EPart 3：如何讓引導更引人注目？\u003C\u002Fh2\u003E\u003Cp\u003E即使選對了合適的引導方式，但都是‘靜態’地展示而已，如何才能讓信息的引導讓用戶更加註意到、奪人眼球呢？\u003C\u002Fp\u003E\u003Cp\u003E\u003C\u002Fp\u003E\u003Ch3\u003E1. 利用‘系統性能’加強引導\u003C\u002Fh3\u003E\u003Cp\u003E如手機有很多系統功能：如陀螺儀、距離感應器、聲音通知、震動等等，都是可以用來加強信息的引導性。\u003C\u002Fp\u003E\u003Cp\u003E舉例：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E陀螺儀\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E如‘好好住’和某閱讀APP（名字忘了~），就利用陀螺儀的‘重力感恩’優化視覺引導：手機往左\u002F右翻動時，視覺元素跟着往左\u002F右旋轉、滾動。\u003C\u002Fp\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002FRXhLfbeDGzYdun\" img_width=\"562\" img_height=\"312\" alt=\"“信息引導”超全總結，讓你的設計有理有據\" inline=\"0\"\u003E\u003Cp\u003E注意：只有原生的app頁面，才能實現手機系統功能的運用，在H5鏈接、小程序裏是無法實現這些功能的。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E聲音通知\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E用聲音來加強用戶操作反饋，幫助確認用戶的當前狀態。像滴答清單就用聲音+snackbar（圖形化）做用戶‘完成’提示，確保用戶不會誤操作。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E手機震動\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E‘震動’是輔助聲音引導的最佳搭檔，如用戶開始靜音無法進行聲音提示時，震動就是一種有效的通知方式：引導性強，且不會對用戶產生操作干擾。\u003C\u002Fp\u003E\u003Cp\u003E\u003C\u002Fp\u003E\u003Ch3\u003E2. 利用‘內容遮罩’加強引導\u003C\u002Fh3\u003E\u003Cp\u003E這是視覺上的一種‘障眼法’，通過兩個內容\u002F元素間的位置疊加、交錯，讓人產生一種錯覺感。能極大地吸引人們的注意力，如韓國某時裝軟件的banner切換、QQ瀏覽器的信息流圖片蒙層，就是採用這種方式吸引用戶。\u003C\u002Fp\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002FRXhLfcwDpOruHK\" img_width=\"323\" img_height=\"210\" alt=\"“信息引導”超全總結，讓你的設計有理有據\" inline=\"0\"\u003E\u003Cp\u003E\u003C\u002Fp\u003E\u003Ch3\u003E3. 利用‘動效’加強引導\u003C\u002Fh3\u003E\u003Cp\u003E動效是我們常用的表現手法之一，其好處是可以吸引用戶點擊、渲染活動\u002F功能氛圍。\u003C\u002Fp\u003E\u003Cp\u003E而動效的引導分2種：一種本身就是動畫\u002F視頻內容，如‘一淘’首頁的圖標內容、支付寶的‘集五福’入口，用於吸引用戶點擊瞭解內容。\u003C\u002Fp\u003E\u003Cimg src=\"http:\u002F\u002Fp9.pstatp.com\u002Flarge\u002Fpgc-image\u002FRXhLffD35VdepH\" img_width=\"461\" img_height=\"256\" alt=\"“信息引導”超全總結，讓你的設計有理有據\" inline=\"0\"\u003E\u003Cp\u003E另一種是讓圖標、浮層等頁面元素動起來，如fackbook的圖標和馬蜂窩的頭像動效。\u003C\u002Fp\u003E\u003Cp\u003E而效果歸效果，如何實現動效則是另外一個問題。目前來說有標註圖、gif圖、png序列圖、mp4視頻、Json文件、交互demo等交付形式讓開發實現的，詳情的查看我之前的每日筆記。\u003C\u002Fp\u003E\u003Cp\u003E\u003C\u002Fp\u003E\u003Ch2\u003E結尾與總結\u003C\u002Fh2\u003E\u003Cp\u003E上面就是信息引導‘表現層’的總結，根據不同的場景選擇不同的需要，但有個前提：\u003Cstrong\u003E如果公司有自己的設計規範，請直接按照規範裏的樣式來輸出。\u003C\u002Fstrong\u003E避免整個產品的視覺和交互體驗式上又多了一種新樣式，開發庫裏也不會多出一個新的控件代碼。\u003C\u002Fp\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002FRXhLgBNEnZ9I1u\" img_width=\"2000\" img_height=\"886\" alt=\"“信息引導”超全總結，讓你的設計有理有據\" inline=\"0\"\u003E\u003Cp\u003E\u003C\u002Fp\u003E\u003Ch3\u003E往期文章推薦\u003C\u002Fh3\u003E\u003Cp\u003E系統性地教你：如何設計產品的信息引導\u003C\u002Fp\u003E\u003Cp\u003E以BAT產品爲例，不再零碎地揣摩‘用戶心理’\u003C\u002Fp\u003E\u003Cp\u003E乾貨：7個案例爲你深度剖析用戶心理\u003C\u002Fp\u003E\u003Cp\u003E作者：和出此嚴，微信ID：elffzh，公衆號：和出此嚴\u003C\u002Fp\u003E\u003Cp\u003E本文由 @和出此嚴 原創發佈於人人都是產品經理。未經許可，禁止轉載\u003C\u002Fp\u003E\u003Cp\u003E題圖來自Unsplash, 基於CC0協議\u003C\u002Fp\u003E"'.slice(6, -6), groupId: '6719387418555843084