編輯導語：隨著網際網路世界的不斷髮展，如今各種網際網路產品的設計多種多樣，在產品設計中，使用者可以根據一些引導設計進行每個步驟的操作，所以引導設計是非常重要的；本文作者分享了關於設計模式中的引導，我們一起來了解一下。
網際網路改變了人們接收資訊的方式和效率，各種產品橫空出世。
在網際網路，尤其是移動網際網路，越來越注重效率，所以“酒香不怕巷子深”的法則在這裡是不受歡迎的，各色的引導需求成為了設計師的工作日常。
所謂引導，常見的型別無外乎兩類——告訴使用者這裡有什麼（使用者可以做什麼）？或者使用者可以怎麼做？
我計劃用三篇文章從三個角度來探討“移動端的引導”這一話題：引導的常見設計模式、引導的常見型別和如何選用合適的引導。
本文首先從設計模式談起。“設計模式”的概念是由建築師Christopher Alexander在其著作《建築的永恆之道》（The Timeless Way of Building）和《建築模式語言》（A Pattern Language ）當中首次提出的，指的是用於解決特定問題、可以重複使用的設計方案。
換言之，設計模式是解決某一類或某幾類問題的有效設計方案，引導的設計模式從是否阻斷使用者當前行為，可以分為兩大類——模態類引導和非模態類引導。
模態的特點：打斷使用者正在進行的行為，強制使用者必須回應最上層的操作，否則不能進行其他操作；區分模態的視覺特徵——有覆蓋底層頁面的半透明蒙版（既在視覺上強化蒙版上層的操作，又在物理上遮蔽蒙版下層的操作）。
1. 對話方塊引導對話方塊引導可以理解為是安卓端Dialog/iOS端Alert在略升級後，專門用於引導場景的設計模式。
升級具體表現在：對話方塊引導基本都有營造視覺氛圍的素材圖（框體上的配圖）或背景圖（代替框體本身的整圖），甚至有帶動效的圖片素材或CTA按鈕，這和Dialog/Alert那種偏純文字描述的剋制是不一樣的。
為什麼會升級，在我看來原因有二：一是要透過抓人眼球的視覺表現力，吸引使用者朝著規劃好的產品路徑行進；二是因為引導的出現機制是系統自動觸發，而非對使用者某操作的回應（反饋），這意味著於使用者而言，對冷不丁出現的對話方塊引導是沒有預期的，所以需要用比純文字表達更直白、高效的視覺元素解釋清楚這是什麼？有什麼好處？接下來該怎麼做？等事情。
因為對話方塊引導會阻斷使用者當前行為，所以只有重要的引導才適合用這種設計模式。頂著有可能“冒犯到使用者”的風險彈出的內容，對使用者而言，最好要有足夠的誘惑力或實際價值，常見的適用場景有福利發放、重要活動、重要版本升級等。
對話方塊引導因為沒有指向性（詳見氣泡引導/工具提示引導），所以一般居中顯示，佔據整個螢幕的視覺重心。
操作欄引導是類似iOS端Activity View的設計模式（Activity View是基於使用者操作後彈出的，而操作欄引導是系統自動觸發的，所以我這裡所謂的類似是指展現形式上類似——都是在頁面底部彈出的模態設計模式）。
操作欄引導的特點和對話方塊引導是一樣的（阻斷式引導、沒有指向性、用於重要功能/內容的引導），主要的區別是——在位置上，相較於居中顯示的對話方塊引導更靠下；所以理論上，操作欄引導在視覺重心上稍差一點點；但也恰恰正是因為位置靠下，所以相較於對話方塊引導更便於操作，尤其是對大屏手機的單手操作而言；所以除了CTA按鈕外，操作欄引導可以承載更多的簡單操作，如選擇標籤、打星評價等。
氣泡引導可以理解為是安卓端Popup/iOS端Popover變形後的設計模式（同操作欄引導一樣，氣泡引導是系統自動觸發的，Popup/Popover是使用者操作後觸發的，所以氣泡引導在使用時要露出被引導元素，多為某個功能按鈕或某個內容按鈕；這和Popup/Popover是不一樣的，點選某操作後彈出的Popup/Popover，半透明蒙版會蓋住該操作控制元件）。
氣泡引導相較於上面兩種模態引導，因為更強調其指向性，所以可以根據實際需要出現在頁面的任何位置；所謂的指向性，其實就是指氣泡引導必定有一個小尖尖，來明確告知使用者在引導誰。所以氣泡引導的適用場景是：介面上某個固定位置的功能或內容的引導。
氣泡引導和工具提示引導很類似，區別就在於一個是模態一個是非模態（即氣泡引導有半透明蒙版，工具提示引導沒有半透明蒙版）；所以阻斷式的氣泡引導適合最最最重要的功能/內容的引導，非阻斷式的工具提示引導適合比較重要的功能/內容的引導。
氣泡引導元素相對簡單——被引導元素、半透明蒙版、帶小尖尖的氣泡、引導文案。為了增加視覺衝擊力可以在氣泡上新增圖片素材或者動圖。一般沒有關閉按鈕，點選氣泡外的任意位置，都可以關閉氣泡引導。
為了吸引使用者立即去操作被引導元素，可以給被引導元素新增光影變化、呼吸效果等，也可以新增對應互動手勢的視覺元素（如“小手點選”的gif圖）。
非模態的特點：不打斷使用者的當前的操作行為，使用者可以繼續進行之前的操作，也可以對引導內容進行回應，選擇權是在使用者手裡的，區分非模態的視覺特徵是沒有阻斷使用者行為的半透明蒙版出現。
1. 工具提示引導緊接上面的氣泡引導，我們優先介紹工具提示引導。
區別於Material Design裡的Tooltips，工具提示引導是自動觸發的設計模式，所以不適合事無鉅細的引導所有功能或內容，更適合引導“次重要功能/內容裡的重點物件”；而Material Design裡的Tooltips，是使用者長按某按鈕後的資訊反饋，是普世的，原則上（但凡不和長按手勢衝突的）所有的按鈕都應該新增，尤其是為了節省空間而設計的純icon按鈕，因為大部分icon按鈕沒有統一的使用者認知。
與氣泡引導一樣，工具提示引導可以出現在螢幕的任意位置；儘管沒有半透明蒙版阻斷使用者行為，工具提示引導還是會遮擋原頁面的某些內容，所以一般會顯示數秒後自動消失。
工具提示引導的元素有帶小尖尖的氣泡和引導文案，原則上也可以新增動效、互動手勢等元素。
Snackbar是安卓端Material Design設計體系中包含的一個控制元件，官方的定義是出現在頁面底部的一種控制元件，只有引導文案和一個文字按鈕，會自動消失且支援使用者使用拖拽手勢把它劃出頁面進行快速關閉；適用場景是使用者進行了A操作，可以用Snackbar提示使用者是否要實施與之高度相關的B操作。
究其根本，與其說官方定義的Snackbar在上述場景中是對B操作的引導，不如說是系統對使用者進行的A操作的反饋。
現實產品中，我們看到了各種各樣與Material Design建議用法相悖的案例，個人覺得這是突破了官方的限制，朝著適用性更廣的方向在發展。所謂規則，本就是人為定義、人為遵守、人為打破的。哪怕這種打破只是讓我們朝著更好的方向邁了一小步，這種“破壞”都是值得推崇和尊敬的。
比如大家會把Snackbar用在系統自動觸發的引導上（本段所說的“Snackbar引導”就是指這種借Snackbar之名定義的、系統自動觸發的引導模式）、會給它新增更重的按鈕（不侷限於純文字按鈕）、新增圖片素材（甚至是動圖）來增加美感吸引使用者注意力、會新增關閉按鈕來替代拖拽關閉的高階手勢、定義永久顯示的展示時長（即使用者不主動關閉就不會自動消失）等。
為什麼大家樂此不疲的改造著Snackbar，因為它天然具有一些獨特優勢；首先它是非模態的設計模式，對使用者的打擾是相對比較低的；其次它出現的位置是螢幕底部，類似於操作欄引導，它對於大屏手機的單手操作很友好；最後作為自動觸發的引導模式，因為沒有指向性，反而讓它沒有束縛、更具相容性——活動引導、內容引導、功能引導…，都能覆蓋到。
FAB也是安卓端Material Design設計體系中包含的一個控制元件，全稱是floating action button（懸浮操作按鈕），FAB引導只是借用FAB這個名字，同時也歡迎大家參與討論，以便定義出描述更為準確、有更廣泛認知的名字。
從字面意思可以看出，FAB引導是懸浮在頁面之上的，像按鈕一樣佔地兒很小的一種引導。為了吸引注意力，常見的用法多為一個圖片素材的入口；像其他引導一樣，圖片素材可以是gif動圖來進一步吸引使用者點選。FAB引導本身也可以配置動效，如呼吸效果、抖動效果。
為了降低對不感興趣使用者的過分打擾，FAB引導可以配置自動消失邏輯、可以新增關閉按鈕，也可以在使用者滑動頁面的過程中設計收起態或透過調整透明度來消除對頁面內容的遮擋。
FAB引導的位置通常是頁面下方（其中又以右下角最為常見），我能想到的背後邏輯有兩點：
- （中國）使用者閱讀時掃視的路線是從左上到右下，FAB引導放在右下角既不會過分打擾使用者，又不至於看不到。
- 大屏手機的單手操作，下方會更容易點選，可用性比在上方顯示會更好。
FAB引導常用來引導某個運營活動（如紅包活動）、在資訊架構上層級低但又相對重要的頁面（如去年各家資訊產品的疫情頁面入口）；透過配置FAB引導，這些內容在首屏得以曝光，併為使用者提供快捷入口。
徽標（Badge）即平時常說的“小紅點”（實際設計時可以結合產品主色，不必非得選用紅色），它透過帶顏色的小圓點或帶數字的徽標來告知使用者，此處有內容更新。
接下來我們聊聊徽標作為一種引導模式有哪些應用場景：
上面描述的是徽標引導的兩種常見形式，一般不帶數字的小圓點引導性更弱（這裡的“弱”指的是對使用者而言的重要性以及結合業務而言的重要性，二者綜合考量下的強度是弱的）一些的內容，即沒有數字逐級透傳到啟動icon上面。
稍重一些的帶數字的徽標提示，則會透傳到啟動icon上，並且使用者不點選檢視，就一直存在；還有第三種常見的用法，用“NEW”、“推薦”等文案代替數字，來引導使用者點選某入口；我最近發現有基於此進一步做升級強化的用法——用“帶文字的徽標加動效”來強化引導效果的案例出現（詳見美團V11.8版本首頁的“美團優選”入口和“電商tab”入口）。
徽標引導因為佔地兒極小，對使用者的打擾微乎其微，所以不會設定主動關閉按鈕，使用者關閉徽標引導的方式就是使用它或者等待它自動消失；這就要求設計師在使用徽標引導時，配套制定好消失邏輯——是使用者點選之後就消失、還是使用者點選特定次數後才消失、抑或徽標提示展示特定次數後自動消失，都需要提前規劃清楚。
嵌入式引導指的是把引導做在內容層，常見的是作為插條形式存在於feed流，或者作為插卡形式存在於瀑布流的情況。
嵌入式引導不會打擾使用者，亦不會遮擋頁面內容，使用者划動頁面就可以把引導推出螢幕，但這種設計也意味著在使用者把嵌入式引導推出螢幕前降低了螢幕的有效資訊展示區域；所以嵌入式引導如果放在內容流頂部，一般會設計的精緻小巧，來儘可能降低這種影響。如果內容流是有限流，放在內容流底部出現的話，就無所謂佔地兒多少了，加IP形象、動圖或情懷類素材都是很常見的。
嵌入式引導如果放在內容流頂部，儘管使用者可以直接推出螢幕，我們也會經常看到有新增主動關閉按鈕的設計案例出現；分析背後原因，一方面可以增加使用者的控制感，另外一方面可以根據對使用者行為的標記，針對該嵌入式引導，制定更為詳細的顯示策略（如使用者點選關閉後，當日不再顯示；使用者累計關閉3次後，當月不再顯示）。
嵌入式引導用在內容流頂部常見於索要某種許可權，用於內容流底部常見於引導使用者去關注更多、釋出更多等操作。
除了上面描述的5種非模態類引導，還有兩種構思巧妙，但不容易提煉、概括、歸類的引導模式，也和大家分享一下。
第一種是動效引導模式。這種引導模式的神奇之處在於沒有新增任何新元素，僅僅透過動效來起到引導使用者的效果；如圖所示的2018年即刻某版本的關注主題列表頁，使用者可以透過向左滑動來刪除某個已關注的主題，但頁面上沒有任何提示資訊，設計師透過“讓第一條主題自動向左滑動一下，來露出刪除按鈕”，從而起到提示使用者使用該功能的作用。
誠然，這個引導的限制條件很多——比如只能有一個列表，否則向左滑動會和tab切換相沖突；再比如即刻的使用者是年輕化的，“滑動刪除”這種對老齡使用者而言相對高階的手勢操作，對即可使用者而言根本沒有學習的門檻；這些限制條件意味著很多產品的刪除引導不能生搬硬套即刻的做法，但這並不妨礙即刻這個動效引導的優秀。
（嚴格意義上講，動效引導能不能稱之為設計模式我是拿不準的，首先它虛無縹緲——沒有新增的元素來概括和描述它；其次它可複用的場景也是比較少的。）
第二種是按鈕狀態變化引導模式。如下圖所示，當底tab除了有切換功能外，還被賦予了返回頂部功能時，隨著頁面的向上划動，左下角的支付寶tab變成了返回頂部的樣式，透過這種按鈕展示狀態的變化，很好的提示了使用者這個按鈕所擁有的另外一個功能；同動效引導一樣，按鈕狀態變化引導也需要設計師奇思妙想，是否能稱之為一種引導的設計模式，也歡迎大家發表自己的看法。
以上是我歸納總結的一些引導的常見模式，錯誤和不足之處，還請大家留言討論和批評指正；下一篇將從另一個視角——引導的常見型別——來解析引導。
最後說一下上面提及的各種引導模式的命名，我儘可能起的大家熟悉的名字或者自認為是描述最為準確的名字，可能與大家的日常認知有些出入。
如果諸位有不同意見，歡迎給我留言，大家一起探討。
最後的最後，以上內容也有我們團隊其他成員的貢獻（包括在職的和離職的），如果說這篇文章能給螢幕前的您一點點啟發，這裡面也有他們的功勞。在此謝過，祝好！
本文由 @Sean Wei 原創釋出於人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash，基於 CC0 協議