講信息引導(dǎo)方式的有很多，而本文主要從“是否會(huì)打擾用戶”的維度，分兩個(gè)類型舉例分析了其中的設(shè)計(jì)以及原理。

上一篇講了信息引導(dǎo)的策略層：可切入的場(chǎng)景和機(jī)制《系統(tǒng)性地教你：如何設(shè)計(jì)產(chǎn)品的信息引導(dǎo)？》。這篇就總結(jié)一下表現(xiàn)層的內(nèi)容：有哪些引導(dǎo)形式？適用什么場(chǎng)景下？如何優(yōu)化這些引導(dǎo)？

讓各位在界面輸出時(shí)，能更清晰地理解信息的引導(dǎo)。按照‘是否會(huì)干擾用戶’的維度，我將信息引導(dǎo)分為兩類：干擾型和不干擾型。下面我們直接進(jìn)入主題：

Part 1：不會(huì)干擾用戶操作的引導(dǎo)

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

1. Tips通知欄

固定嵌入顯示在界面頂部或nav下方的提示條，向用戶反饋及時(shí)信息，用戶操作它后才能消失。

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

引導(dǎo)延伸：可動(dòng)效輪播Tips里的信息，引導(dǎo)性更強(qiáng)。如支付寶，在向‘異常用戶’轉(zhuǎn)賬時(shí)就會(huì)出現(xiàn)輪播tips。

2. Snackbar提示框

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

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

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

3. 浮層/氣泡

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

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

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

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

4. 信息push

和前面幾種不同，這種屬于產(chǎn)品的‘外部引導(dǎo)’，引導(dǎo)性很強(qiáng)，但需要一點(diǎn)的推送成本做支撐。多用于運(yùn)營內(nèi)容的對(duì)老用戶的‘喚醒’和留存提升。

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

注意：需要獲取用戶手機(jī)的‘通知’權(quán)限。在需要做引導(dǎo)的場(chǎng)景中，提示用戶允許獲取該權(quán)限。

5. 徽標(biāo)/Badge

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

適用場(chǎng)景：

數(shù)字型徽標(biāo)：需要強(qiáng)調(diào)信息的‘?dāng)?shù)量’，讓用戶精確知道有多少新內(nèi)容，吸引用戶注意力。

非數(shù)字型徽標(biāo)：只需簡(jiǎn)單讓用戶知道有新內(nèi)容/消失，不會(huì)對(duì)用戶產(chǎn)生干擾。

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

6. Toast提示

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

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

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

Part 2：干擾用戶操作的引導(dǎo)

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

1. 對(duì)話框/Dialog

強(qiáng)制用戶只執(zhí)行N個(gè)結(jié)果才能離開的彈層提示。該類型的引導(dǎo)性就很強(qiáng)，但用戶體驗(yàn)相對(duì)差點(diǎn)，大多起信息提醒、功能確認(rèn)作用。

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

適用場(chǎng)景：對(duì)用戶當(dāng)前的操作進(jìn)行提醒、確認(rèn)、多選、輸入、切換等操作。

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

2. 下拉菜單/列表

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

適用場(chǎng)景：

下拉菜單：用戶操作頻率很高的功能，可用下拉菜單作為快捷入口。

下拉列表：用戶偶爾會(huì)用到功能，用一個(gè)下拉列表做為內(nèi)容集合就可以了。

Part 3：如何讓引導(dǎo)更引人注目？

即使選對(duì)了合適的引導(dǎo)方式，但都是‘靜態(tài)’地展示而已，如何才能讓信息的引導(dǎo)讓用戶更加注意到、奪人眼球呢？

1. 利用‘系統(tǒng)性能’加強(qiáng)引導(dǎo)

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

舉例：

陀螺儀

如‘好好住’和某閱讀APP（名字忘了~），就利用陀螺儀的‘重力感恩’優(yōu)化視覺引導(dǎo)：手機(jī)往左/右翻動(dòng)時(shí)，視覺元素跟著往左/右旋轉(zhuǎn)、滾動(dòng)。

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

聲音通知

用聲音來加強(qiáng)用戶操作反饋，幫助確認(rèn)用戶的當(dāng)前狀態(tài)。像滴答清單就用聲音+snackbar（圖形化）做用戶‘完成’提示，確保用戶不會(huì)誤操作。

手機(jī)震動(dòng)

‘震動(dòng)’是輔助聲音引導(dǎo)的最佳搭檔，如用戶開始靜音無法進(jìn)行聲音提示時(shí)，震動(dòng)就是一種有效的通知方式：引導(dǎo)性強(qiáng)，且不會(huì)對(duì)用戶產(chǎn)生操作干擾。

2. 利用‘內(nèi)容遮罩’加強(qiáng)引導(dǎo)

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

3. 利用‘動(dòng)效’加強(qiáng)引導(dǎo)

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

而動(dòng)效的引導(dǎo)分2種：一種本身就是動(dòng)畫/視頻內(nèi)容，如‘一淘’首頁的圖標(biāo)內(nèi)容、支付寶的‘集五?！肟?，用于吸引用戶點(diǎn)擊了解內(nèi)容。

另一種是讓圖標(biāo)、浮層等頁面元素動(dòng)起來，如fackbook的圖標(biāo)和馬蜂窩的頭像動(dòng)效。

而效果歸效果，如何實(shí)現(xiàn)動(dòng)效則是另外一個(gè)問題。目前來說有標(biāo)注圖、gif圖、png序列圖、mp4視頻、Json文件、交互demo等交付形式讓開發(fā)實(shí)現(xiàn)的，詳情的查看我之前的每日筆記。

結(jié)尾與總結(jié)

上面就是信息引導(dǎo)‘表現(xiàn)層’的總結(jié)，根據(jù)不同的場(chǎng)景選擇不同的需要，但有個(gè)前提：如果公司有自己的設(shè)計(jì)規(guī)范，請(qǐng)直接按照規(guī)范里的樣式來輸出。避免整個(gè)產(chǎn)品的視覺和交互體驗(yàn)式上又多了一種新樣式，開發(fā)庫里也不會(huì)多出一個(gè)新的控件代碼。

往期文章推薦

系統(tǒng)性地教你：如何設(shè)計(jì)產(chǎn)品的信息引導(dǎo)

以BAT產(chǎn)品為例，不再零碎地揣摩‘用戶心理’

干貨：7個(gè)案例為你深度剖析用戶心理

作者：和出此嚴(yán)，微信ID：elffzh，公眾號(hào)：和出此嚴(yán)

本文由 @和出此嚴(yán) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash, 基于CC0協(xié)議