互聯(lián)網(wǎng)改變了人們接收信息的方式和效率，各種產(chǎn)品橫空出世。

在互聯(lián)網(wǎng)，尤其是移動互聯(lián)網(wǎng)，越來越注重效率，所以“酒香不怕巷子深”的法則在這里是不受歡迎的，各色的引導(dǎo)需求成為了設(shè)計(jì)師的工作日常。

所謂引導(dǎo)，常見的類型無外乎兩類——告訴用戶這里有什么（用戶可以做什么）？或者用戶可以怎么做？

我計(jì)劃用三篇文章從三個角度來探討“移動端的引導(dǎo)”這一話題：引導(dǎo)的常見設(shè)計(jì)模式、引導(dǎo)的常見類型和如何選用合適的引導(dǎo)。

本文首先從設(shè)計(jì)模式談起?！?a class="tag_a" target="_blank" style="color: rgb(82, 82, 82); text-decoration-line: none; transition: all 0.2s ease 0s; border-bottom: none; word-break: break-all;">設(shè)計(jì)模式”的概念是由建筑師 Christopher Alexander 在其著作《建筑的永恒之道》（The Timeless Way of Building）和《建筑模式語言》（A Pattern Language ）當(dāng)中首次提出的，指的是用于解決特定問題、可以重復(fù)使用的設(shè)計(jì)方案。

換言之，設(shè)計(jì)模式是解決某一類或某幾類問題的有效設(shè)計(jì)方案，引導(dǎo)的設(shè)計(jì)模式從是否阻斷用戶當(dāng)前行為，可以分為兩大類——模態(tài)類引導(dǎo)和非模態(tài)類引導(dǎo)。

模態(tài)（modal）類引導(dǎo)的設(shè)計(jì)模式

模態(tài)的特點(diǎn)：打斷用戶正在進(jìn)行的行為，強(qiáng)制用戶必須回應(yīng)最上層的操作，否則不能進(jìn)行其他操作；區(qū)分模態(tài)的視覺特征——有覆蓋底層頁面的半透明蒙版（既在視覺上強(qiáng)化蒙版上層的操作，又在物理上屏蔽蒙版下層的操作）。

1. 對話框引導(dǎo)

對話框引導(dǎo)可以理解為是安卓端 Dialog/iOS 端 Alert 在略升級后，專門用于引導(dǎo)場景的設(shè)計(jì)模式。

升級具體表現(xiàn)在：對話框引導(dǎo)基本都有營造視覺氛圍的素材圖（框體上的配圖）或背景圖（代替框體本身的整圖），甚至有帶動效的圖片素材或 CTA 按鈕，這和 Dialog/Alert 那種偏純文字描述的克制是不一樣的。

為什么會升級，在我看來原因有二：一是要通過抓人眼球的視覺表現(xiàn)力，吸引用戶朝著規(guī)劃好的產(chǎn)品路徑行進(jìn)；二是因?yàn)橐龑?dǎo)的出現(xiàn)機(jī)制是系統(tǒng)自動觸發(fā)，而非對用戶某操作的回應(yīng)（反饋），這意味著于用戶而言，對冷不丁出現(xiàn)的對話框引導(dǎo)是沒有預(yù)期的，所以需要用比純文字表達(dá)更直白、高效的視覺元素解釋清楚這是什么？有什么好處？接下來該怎么做？等事情。

因?yàn)閷υ捒蛞龑?dǎo)會阻斷用戶當(dāng)前行為，所以只有重要的引導(dǎo)才適合用這種設(shè)計(jì)模式。頂著有可能“冒犯到用戶”的風(fēng)險彈出的內(nèi)容，對用戶而言，最好要有足夠的誘惑力或?qū)嶋H價值，常見的適用場景有福利發(fā)放、重要活動、重要版本升級等。

對話框引導(dǎo)因?yàn)闆]有指向性（詳見氣泡引導(dǎo)/工具提示引導(dǎo)），所以一般居中顯示，占據(jù)整個屏幕的視覺重心。

2. 操作欄引導(dǎo)

操作欄引導(dǎo)是類似 iOS 端 Activity View 的設(shè)計(jì)模式（Activity View 是基于用戶操作后彈出的，而操作欄引導(dǎo)是系統(tǒng)自動觸發(fā)的，所以我這里所謂的類似是指展現(xiàn)形式上類似——都是在頁面底部彈出的模態(tài)設(shè)計(jì)模式）。

操作欄引導(dǎo)的特點(diǎn)和對話框引導(dǎo)是一樣的（阻斷式引導(dǎo)、沒有指向性、用于重要功能/內(nèi)容的引導(dǎo)），主要的區(qū)別是——在位置上，相較于居中顯示的對話框引導(dǎo)更靠下；所以理論上，操作欄引導(dǎo)在視覺重心上稍差一點(diǎn)點(diǎn)；但也恰恰正是因?yàn)槲恢每肯?，所以相較于對話框引導(dǎo)更便于操作，尤其是對大屏手機(jī)的單手操作而言；所以除了CTA按鈕外，操作欄引導(dǎo)可以承載更多的簡單操作，如選擇標(biāo)簽、打星評價等。

3. 氣泡引導(dǎo)

氣泡引導(dǎo)可以理解為是安卓端 Popup/iOS 端 Popover 變形后的設(shè)計(jì)模式（同操作欄引導(dǎo)一樣，氣泡引導(dǎo)是系統(tǒng)自動觸發(fā)的，Popup/Popover 是用戶操作后觸發(fā)的，所以氣泡引導(dǎo)在使用時要露出被引導(dǎo)元素，多為某個功能按鈕或某個內(nèi)容按鈕；這和 Popup/Popover 是不一樣的，點(diǎn)擊某操作后彈出的 Popup/Popover，半透明蒙版會蓋住該操作控件）。

氣泡引導(dǎo)相較于上面兩種模態(tài)引導(dǎo)，因?yàn)楦鼜?qiáng)調(diào)其指向性，所以可以根據(jù)實(shí)際需要出現(xiàn)在頁面的任何位置；所謂的指向性，其實(shí)就是指氣泡引導(dǎo)必定有一個小尖尖，來明確告知用戶在引導(dǎo)誰。所以氣泡引導(dǎo)的適用場景是：界面上某個固定位置的功能或內(nèi)容的引導(dǎo)。

氣泡引導(dǎo)和工具提示引導(dǎo)很類似，區(qū)別就在于一個是模態(tài)一個是非模態(tài)（即氣泡引導(dǎo)有半透明蒙版，工具提示引導(dǎo)沒有半透明蒙版）；所以阻斷式的氣泡引導(dǎo)適合最最最重要的功能/內(nèi)容的引導(dǎo)，非阻斷式的工具提示引導(dǎo)適合比較重要的功能/內(nèi)容的引導(dǎo)。

氣泡引導(dǎo)元素相對簡單——被引導(dǎo)元素、半透明蒙版、帶小尖尖的氣泡、引導(dǎo)文案。為了增加視覺沖擊力可以在氣泡上添加圖片素材或者動圖。一般沒有關(guān)閉按鈕，點(diǎn)擊氣泡外的任意位置，都可以關(guān)閉氣泡引導(dǎo)。

為了吸引用戶立即去操作被引導(dǎo)元素，可以給被引導(dǎo)元素添加光影變化、呼吸效果等，也可以添加對應(yīng)交互手勢的視覺元素（如“小手點(diǎn)擊”的 gif 圖）。

4. 頁面遮罩引導(dǎo)

頁面遮罩引導(dǎo)是一種類似氣泡引導(dǎo)的設(shè)計(jì)模式。具體差別在于氣泡引導(dǎo)把被引導(dǎo)元素提到半透明蒙版上層，頁面遮罩引導(dǎo)是設(shè)計(jì)鏤空的半透明蒙版（即所謂的頁面遮罩），把半透明蒙版下層的被引導(dǎo)元素露出來。

像氣泡引導(dǎo)一樣，頁面遮罩引導(dǎo)也具有明確的指向性，一般都有繪制的箭頭告訴用戶引導(dǎo)文案是對哪個被引導(dǎo)元素的解釋或說明。

頁面遮罩引導(dǎo)早些年常用于一個頁面上有多處功能/入口等要引導(dǎo)（當(dāng)然單個引導(dǎo)也可以），但是大家現(xiàn)在見到它們的機(jī)會越來越少，分析原因可能有三個：1. 先前的新鮮功能對現(xiàn)在的用戶而言隨處可見，不值得再去引導(dǎo)；2. 用戶耐心越來越少，更喜歡自己去嘗試，而非聽產(chǎn)品說教（就像電子產(chǎn)品的說明書，很少有用戶去讀一樣）；3. 產(chǎn)品可能發(fā)現(xiàn)，大部分先前引導(dǎo)的功能/入口其實(shí)沒那么重要，不值得用打斷用戶的方式去告知他們。

非模態(tài)（modaless）類引導(dǎo)的設(shè)計(jì)模式

非模態(tài)的特點(diǎn)：不打斷用戶的當(dāng)前的操作行為，用戶可以繼續(xù)進(jìn)行之前的操作，也可以對引導(dǎo)內(nèi)容進(jìn)行回應(yīng)，選擇權(quán)是在用戶手里的，區(qū)分非模態(tài)的視覺特征是沒有阻斷用戶行為的半透明蒙版出現(xiàn)。

1. 工具提示引導(dǎo)

為了呼應(yīng)上面提到的氣泡引導(dǎo)，我們優(yōu)先介紹工具提示引導(dǎo)。區(qū)別于 Material Design 里的 Tooltips，工具提示引導(dǎo)是自動觸發(fā)的設(shè)計(jì)模式，所以不適合事無巨細(xì)的引導(dǎo)所有功能或內(nèi)容，更適合引導(dǎo)“次重要功能/內(nèi)容里的重點(diǎn)對象”；而 Material Design 里的 Tooltips，是用戶長按某按鈕后的信息反饋，是普世的，原則上（但凡不和長按手勢沖突的）所有的按鈕都應(yīng)該添加，尤其是為了節(jié)省空間而設(shè)計(jì)的純 icon 按鈕，因?yàn)榇蟛糠?icon 按鈕沒有統(tǒng)一的用戶認(rèn)知。

與氣泡引導(dǎo)一樣，工具提示引導(dǎo)可以出現(xiàn)在屏幕的任意位置；盡管沒有半透明蒙版阻斷用戶行為，工具提示引導(dǎo)還是會遮擋原頁面的某些內(nèi)容，所以一般會顯示數(shù)秒后自動消失。

工具提示引導(dǎo)的元素有帶小尖尖的氣泡和引導(dǎo)文案，原則上也可以添加動效、交互手勢等元素。

2. Snackbar 引導(dǎo)

Snackbar 是安卓端 Material Design 設(shè)計(jì)體系中包含的一個控件，官方的定義是出現(xiàn)在頁面底部的一種控件，只有引導(dǎo)文案和一個文字按鈕，會自動消失且支持用戶使用拖拽手勢把它劃出頁面進(jìn)行快速關(guān)閉；適用場景是用戶進(jìn)行了 A 操作，可以用 Snackbar 提示用戶是否要實(shí)施與之高度相關(guān)的 B 操作。

究其根本，與其說官方定義的 Snackbar 在上述場景中是對 B 操作的引導(dǎo)，不如說是系統(tǒng)對用戶進(jìn)行的 A 操作的反饋。

現(xiàn)實(shí)產(chǎn)品中，我們看到了各種各樣與 Material Design 建議用法相悖的案例，個人覺得這是突破了官方的限制，朝著適用性更廣的方向在發(fā)展。所謂規(guī)則，本就是人為定義、人為遵守、人為打破的。哪怕這種打破只是讓我們朝著更好的方向邁了一小步，這種“破壞”都是值得推崇和尊敬的。

比如大家會把 Snackbar 用在系統(tǒng)自動觸發(fā)的引導(dǎo)上（本段所說的“Snackbar 引導(dǎo)”就是指這種借 Snackbar 之名定義的、系統(tǒng)自動觸發(fā)的引導(dǎo)模式）、會給它添加更重的按鈕（不局限于純文字按鈕）、添加圖片素材（甚至是動圖）來增加美感吸引用戶注意力、會添加關(guān)閉按鈕來替代拖拽關(guān)閉的高級手勢、定義永久顯示的展示時長（即用戶不主動關(guān)閉就不會自動消失）等。

為什么大家樂此不疲的改造著 Snackbar，因?yàn)樗烊痪哂幸恍┆?dú)特優(yōu)勢；首先它是非模態(tài)的設(shè)計(jì)模式，對用戶的打擾是相對比較低的；其次它出現(xiàn)的位置是屏幕底部，類似于操作欄引導(dǎo)，它對于大屏手機(jī)的單手操作很友好；最后作為自動觸發(fā)的引導(dǎo)模式，因?yàn)闆]有指向性，反而讓它沒有束縛、更具兼容性——活動引導(dǎo)、內(nèi)容引導(dǎo)、功能引導(dǎo)…，都能覆蓋到。

3. FAB 引導(dǎo)

FAB 也是安卓端 Material Design 設(shè)計(jì)體系中包含的一個控件，全稱是 floating action button（懸浮操作按鈕），F(xiàn)AB 引導(dǎo)只是借用 FAB 這個名字，同時也歡迎大家參與討論，以便定義出描述更為準(zhǔn)確、有更廣泛認(rèn)知的名字。

從字面意思可以看出，F(xiàn)AB 引導(dǎo)是懸浮在頁面之上的，像按鈕一樣占地兒很小的一種引導(dǎo)。為了吸引注意力，常見的用法多為一個圖片素材的入口；像其他引導(dǎo)一樣，圖片素材可以是 gif 動圖來進(jìn)一步吸引用戶點(diǎn)擊。FAB 引導(dǎo)本身也可以配置動效，如呼吸效果、抖動效果。

為了降低對不感興趣用戶的過分打擾，F(xiàn)AB 引導(dǎo)可以配置自動消失邏輯、可以添加關(guān)閉按鈕，也可以在用戶滑動頁面的過程中設(shè)計(jì)收起態(tài)或通過調(diào)整透明度來消除對頁面內(nèi)容的遮擋。

FAB 引導(dǎo)的位置通常是頁面下方（其中又以右下角最為常見），我能想到的背后邏輯有兩點(diǎn)：

• （中國）用戶閱讀時掃視的路線是從左上到右下，F(xiàn)AB 引導(dǎo)放在右下角既不會過分打擾用戶，又不至于看不到。大屏手機(jī)的單手操作，下方會更容易點(diǎn)擊，可用性比在上方顯示會更好。

• FAB 引導(dǎo)常用來引導(dǎo)某個運(yùn)營活動（如紅包活動）、在信息架構(gòu)上層級低但又相對重要的頁面（如去年各家資訊產(chǎn)品的疫情頁面入口）；通過配置 FAB 引導(dǎo)，這些內(nèi)容在首屏得以曝光，并為用戶提供快捷入口。

4. 徽標(biāo)引導(dǎo)

徽標(biāo)（Badge）即平時常說的“小紅點(diǎn)”（實(shí)際設(shè)計(jì)時可以結(jié)合產(chǎn)品主色，不必非得選用紅色），它通過帶顏色的小圓點(diǎn)或帶數(shù)字的徽標(biāo)來告知用戶，此處有內(nèi)容更新。

接下來我們聊聊徽標(biāo)作為一種引導(dǎo)模式有哪些應(yīng)用場景：

上面描述的是徽標(biāo)引導(dǎo)的兩種常見形式，一般不帶數(shù)字的小圓點(diǎn)引導(dǎo)性更弱（這里的“弱”指的是對用戶而言的重要性以及結(jié)合業(yè)務(wù)而言的重要性，二者綜合考量下的強(qiáng)度是弱的）一些的內(nèi)容，即沒有數(shù)字逐級透傳到啟動 icon 上面。

稍重一些的帶數(shù)字的徽標(biāo)提示，則會透傳到啟動 icon 上，并且用戶不點(diǎn)擊查看，就一直存在；還有第三種常見的用法，用“NEW”、“推薦”等文案代替數(shù)字，來引導(dǎo)用戶點(diǎn)擊某入口；我最近發(fā)現(xiàn)有基于此進(jìn)一步做升級強(qiáng)化的用法——用“帶文字的徽標(biāo)加動效”來強(qiáng)化引導(dǎo)效果的案例出現(xiàn)（詳見美團(tuán)V11.8版本首頁的“美團(tuán)優(yōu)選”入口和“電商tab”入口）。

徽標(biāo)引導(dǎo)因?yàn)檎嫉貎簶O小，對用戶的打擾微乎其微，所以不會設(shè)置主動關(guān)閉按鈕，用戶關(guān)閉徽標(biāo)引導(dǎo)的方式就是使用它或者等待它自動消失；這就要求設(shè)計(jì)師在使用徽標(biāo)引導(dǎo)時，配套制定好消失邏輯——是用戶點(diǎn)擊之后就消失、還是用戶點(diǎn)擊特定次數(shù)后才消失、亦或是徽標(biāo)提示展示特定次數(shù)后自動消失，都需要提前規(guī)劃清楚。

5. 嵌入式引導(dǎo)

嵌入式引導(dǎo)指的是把引導(dǎo)做在內(nèi)容層，常見的是作為插條形式存在于 feed 流，或者作為插卡形式存在于瀑布流的情況。

嵌入式引導(dǎo)不會打擾用戶，亦不會遮擋頁面內(nèi)容，用戶劃動頁面就可以把引導(dǎo)推出屏幕，但這種設(shè)計(jì)也意味著在用戶把嵌入式引導(dǎo)推出屏幕前降低了屏幕的有效信息展示區(qū)域；所以嵌入式引導(dǎo)如果放在內(nèi)容流頂部，一般會設(shè)計(jì)的精致小巧，來盡可能降低這種影響。如果內(nèi)容流是有限流，放在內(nèi)容流底部出現(xiàn)的話，就無所謂占地兒多少了，加 IP 形象、動圖或情懷類素材都是很常見的。

嵌入式引導(dǎo)如果放在內(nèi)容流頂部，盡管用戶可以直接推出屏幕，我們也會經(jīng)常看到有添加主動關(guān)閉按鈕的設(shè)計(jì)案例出現(xiàn)；分析背后原因，一方面可以增加用戶的控制感，另外一方面可以根據(jù)對用戶行為的標(biāo)記，針對該嵌入式引導(dǎo)，制定更為詳細(xì)的顯示策略（如用戶點(diǎn)擊關(guān)閉后，當(dāng)日不再顯示；用戶累計(jì)關(guān)閉 3 次后，當(dāng)月不再顯示）。

嵌入式引導(dǎo)用在內(nèi)容流頂部常見于索要某種權(quán)限，用于內(nèi)容流底部常見于引導(dǎo)用戶去關(guān)注更多、發(fā)布更多等操作。

6. 手勢引導(dǎo)

手勢引導(dǎo)指的是對一些高級手勢操作的引導(dǎo)模式，如雙擊點(diǎn)贊、長按保存、滑動調(diào)整音量等，這些高級手勢對于用戶而言，如果能靈活掌握，使用產(chǎn)品時會起到事半功倍的效果。

手勢引導(dǎo)的元素很簡單，一般是高級手勢的 gif 動圖+引導(dǎo)文案。為了讓手勢引導(dǎo)清晰可見，有時會加一個局部的半透明蒙版（如播放中的視頻，視覺背景元素瞬息萬變，就經(jīng)常會加一個半透明蒙版來提升手勢引導(dǎo)的可見性）。手勢引導(dǎo)會自動消失、且是非模態(tài)，所以對用戶的打擾較弱。

7. 特殊引導(dǎo)

除了上面描述的 5 種非模態(tài)類引導(dǎo)，還有兩種構(gòu)思巧妙，但不容易提煉、概括、歸類的引導(dǎo)模式，也和大家分享一下。

第一種是動效引導(dǎo)模式。這種引導(dǎo)模式的神奇之處在于沒有添加任何新元素，僅僅通過動效來起到引導(dǎo)用戶的效果；如圖所示的 2018 年即刻某版本的關(guān)注主題列表頁，用戶可以通過向左滑動來刪除某個已關(guān)注的主題，但頁面上沒有任何提示信息，設(shè)計(jì)師通過“讓第一條主題自動向左滑動一下，來露出刪除按鈕”，從而起到提示用戶使用該功能的作用。

誠然，這個引導(dǎo)的限制條件很多——比如只能有一個列表，否則向左滑動會和tab切換相沖突；再比如即刻的用戶是年輕化的，“滑動刪除”這種對老齡用戶而言相對高階的手勢操作，對即刻用戶而言根本沒有學(xué)習(xí)的門檻；這些限制條件意味著很多產(chǎn)品的刪除引導(dǎo)不能生搬硬套即刻的做法，但這并不妨礙即刻這個動效引導(dǎo)的優(yōu)秀。

（嚴(yán)格意義上講，動效引導(dǎo)能不能稱之為設(shè)計(jì)模式我是拿不準(zhǔn)的，首先它虛無縹緲——沒有新增的元素來概括和描述它；其次它可復(fù)用的場景也是比較少的。）

第二種是按鈕狀態(tài)變化引導(dǎo)模式。如下圖所示，當(dāng)?shù)?tab 除了有切換功能外，還被賦予了返回頂部功能時，隨著頁面的向上劃動，左下角的支付寶 tab 變成了返回頂部的樣式，通過這種按鈕展示狀態(tài)的變化，很好的提示了用戶這個按鈕所擁有的另外一個功能；同動效引導(dǎo)一樣，按鈕狀態(tài)變化引導(dǎo)也需要設(shè)計(jì)師奇思妙想，是否能稱之為一種引導(dǎo)的設(shè)計(jì)模式，也歡迎大家發(fā)表自己的看法。

結(jié)語

以上是我歸納總結(jié)的一些引導(dǎo)的常見模式，錯誤和不足之處，還請大家留言討論和批評指正；下一篇將從另一個視角——引導(dǎo)的常見類型——來解析引導(dǎo)。

最后說一下上面提及的各種引導(dǎo)模式的命名，我盡可能起的大家熟悉的名字或者自認(rèn)為是描述最為準(zhǔn)確的名字，可能與大家的日常認(rèn)知有些出入。

如果諸位有不同意見，歡迎給我留言，大家一起探討。