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

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

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

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

本文首先從設計模式談起?！?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;">設計模式”的概念是由建筑師 Christopher Alexander 在其著作《建筑的永恒之道》（The Timeless Way of Building）和《建筑模式語言》（A Pattern Language ）當中首次提出的，指的是用于解決特定問題、可以重復使用的設計方案。

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

模態(tài)（modal）類引導的設計模式

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

1. 對話框引導

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

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

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

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

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

2. 操作欄引導

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

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

3. 氣泡引導

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

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

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

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

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

4. 頁面遮罩引導

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

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

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

非模態(tài)（modaless）類引導的設計模式

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

1. 工具提示引導

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

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

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

2. Snackbar 引導

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

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

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

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

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

3. FAB 引導

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

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

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

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

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

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

4. 徽標引導

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

接下來我們聊聊徽標作為一種引導模式有哪些應用場景：

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

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

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

5. 嵌入式引導

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

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

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

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

6. 手勢引導

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

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

7. 特殊引導

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

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

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

（嚴格意義上講，動效引導能不能稱之為設計模式我是拿不準的，首先它虛無縹緲——沒有新增的元素來概括和描述它；其次它可復用的場景也是比較少的。）

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

結(jié)語

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

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

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