編輯導語：產品的易用性是留存轉化用戶的關鍵點之一，如果用戶操作門檻高，則容易給用戶帶來不理想的體驗，也容易導致用戶流失。那么，互聯網產品應當如何進行引導設計，讓用戶獲得更優體驗？本篇文章里，作者對引導設計進行了一個系統總結，一起來看一下。

互聯網產品，尤其是移動互聯網產品，都必須有門檻低、上手快的特性，這是因為，移動互聯網產品的客群是2C（customer）而非2B（business），以用戶自發性使用行為為主，產品可替代性強，用戶粘度不高。如果用戶下載安裝APP后，無法通過幾分鐘的嘗試搞明白產品提供的主要功能和操作方法，那么這個應用離棄用也就不遠了。

一個能讓用戶快速上手的APP，除了設計符合產品邏輯、符合用戶操作習慣、足夠簡潔之外，層次分明不失趣味性的引導設計，也是非常重要的。所以在這篇文章中，我將重點介紹使用引導的設計模式。

一、全局預覽

全局預覽往往在引導頁階段來完成，應用第一次安裝啟動后，或者在用戶完成有效賬戶注冊前的每一次啟動，都會進入引導頁，通過左右滑動來瀏覽奇數量的引導頁。

全局預覽通過應用程序逐屏逐功能的最終邀請（左右滑動），完成對應用程序的最終探索。Doozyrama是此模式很好的例子，包含了現階段流行的引導頁的典型設計元素：簡潔的文字介紹、生動的扁平化插圖、左右滑動切換和一個明確的退出標志：

再比如Google Analytics：

最佳實踐：

1. 全局預覽應用于強化或突出顯示關鍵或核心功能；
2. 全局預覽模式一般從用戶目標角度出發，要盡量保持簡短，并輔以有力的視覺引導。

二、交互教程

交互教程，指通過引導用戶進行交互動作，來掌握應用操作方式的一種引導設計。當用戶第一次打開應用，或瀏覽某個頁面時，交互教程會自動顯示，并通過圖文說明、箭頭指引和交互觸發，幫助用戶更快上手APP。有趣的交互教程設計可以有效地提高用戶體驗。

同時，為了讓交互教程的引導更加通俗易懂，交互教程往往采用半透明蒙版+操作說明的設計模式。在應用主屏幕上，用一個帶有提示的半透明層蒙住下層主屏幕內容。如千牛工作臺和analytics（一款數據分析展示應用）：

一款應用，如果只有難用的功能和丑陋的界面，那么會馬上被用戶刪除，由新的同類應用取而代之。

相反，如果在用戶第一次進入APP主界面時，應用就展示出色的交互教程設計，這樣可同時起到功能導航和提升用戶體驗的雙重效果，如VUE和WPS Office：

VUE是視頻制作利器，WPS Office是白領的移動化辦公工具，前者注重設計感和逼格，后者注重商務和辦公氛圍濃厚，因此整體設計偏簡潔。

而寶寶樹和醫護到家更加注重趣味性：

寶寶樹的用戶以年輕媽媽為主，重點發力社區；醫護到家是移動看病問診工具，涵蓋人群更是多樣化，但無論怎樣，二者傳達的理念都是：人性化、親民、拉近應用與用戶之間的距離、用戶與用戶之間的距離，以及用戶與醫療服務提供者之間的距離。

趣味性的設計，會為應用帶來更多的印象分，從而提高用戶的探索欲望和用戶粘性。

三、彈出框

彈出框，英文Popup Box，全稱“彈出式窗口”，與“固定式窗口”相對應，指的是通過應用自身觸發或者用戶交互動作觸發的，懸浮于原有頁面上方的窗口式設計，觸發后，用戶可對其進行關閉，因此這是一種非全局的、只存在于特定狀態下的設計，也因為這種特點，彈出框在最初經常被用于廣告提示。

隨著設計模式越來越規范，人們發現，彈出框的人機交互模式非常適合用于應用本身的提示和引導，逐漸普遍在互聯網和移動互聯網產品中普及。典型的設計是：彈出框口+半透明蒙版背景（增強視覺對比）。

對于現在的移動APP來說，對話框是一種最常見的引導設計。同時，也正因為無處不在，它也是最容易被忽略和摒棄的，我們可以用彈出框引導來實現：

消息/內容提示。如Pregnancy+和寶寶樹孕育：

問題/錯誤提示。如icon和Wolters Kluwer：

內容詳情。如阿里旅行（已更名為飛豬）和淘寶：

操作判斷。如頻果單詞（右圖）：

最佳實踐：

1. 保持彈出框文案簡短；
2. 確保彈出框內容可以在應用其他功能模塊中訪問到。

四、對話框

對話框，英文Dialog Box，提起它時腦海里就浮現“聊天對話框”或“消息對話框”的樣式，這是一種次要窗口，不能最大最小化、不能改變形狀，只能用于簡單的人機交流，如消息提示等。

對話框用于引導時，可以顯示在屏幕任意位置，并且比彈出框更貼合操作情景。如千牛工作臺和知乎：

點擊頁面內任意區域，即可關閉對話框。再比如Wave Analytics和Way of Life，后者更是在一個頁面內，可同時存在多個提示：

最佳實踐：

1. 提示盡可能靠近指向對象；
2. 內容要簡短；
3. 開始觸發交互動作后（如觸碰屏幕），提示要自動消失；
4. 對話框整體顏色要和頁面有所區分，對比鮮明。

五、空狀態頁面

空狀態頁面，指的是內容為空的頁面，常見于需要用戶自己進行初始化配置、創建內容等的應用中，典型場景是用戶剛安裝應用并開始使用。當用戶完成配置、創建內容后對“空狀態”的頁面進行覆蓋。

而空狀態頁面引導，就是在空狀態頁面中加入引導式設計，增強用戶體驗。而空狀態引導也被稱為初次使用引導。

空狀態頁面引導一般由一種或幾種元素構成：包括文字提示、表意插圖、觸發按鈕等。這些元素往往將固化在屏幕設計中，并一直存在，直到用戶執行交互操作，或被其他內容覆蓋。許多筆記類應用，都是用初次使用引導去吸引用戶添加內容。

我把空狀態頁面引導設計分為兩種：被動型引導和主動型引導。

先介紹被動型引導。這種設計以空狀態界面為典型應用，如Change和Finger：

為什么說它們是被動型引導，因為這個頁面的提示信息對用戶來講，與其說是引導，還不如說是提醒，用戶無法通過當前頁面進行任何有效的相關的交互。Change只用文字告訴了用戶當前頁面狀態（可能更大的作用是，頁面上有這幾個漢字，就不會讓用戶覺得當前頁面出了什么bug，僅此而已）。

下面的例子，雖然增強了解釋，但是仍然屬于被動型引導，比如百科和Foursquare：

二者除了文字提示當前頁面是“空狀態”外，還進行了補充說明。不過百科的這句“保存頁面以便日后查 看，即便在離線時”，充滿著生硬的直譯的倒裝…

主動型引導的特點在于：在提示用戶當前頁面狀態后，給出用戶改變當前頁面狀態的入口，比如添加內容或新增內容，比如采用圓角矩形按鈕入口的蝦米音樂和Vimeo：

以及文字入口的美團和Price Tag：

需要注意的是，這些觸發新頁面的文字入口，文字顏色要和主題色保持一致（主流方案），這也是遵循用戶習慣的最優選擇。

有的主動型引導做成了懸浮圓形按鈕樣式的全局引導，即哪怕用戶進行了內容覆蓋，引導按鈕依然存在。如小時光和2Do：

或者直接將“+”做到導航欄中，比如種子習慣和New：

再舉兩個反例，即沒有任何提示的空狀態頁面，如Replica（左下圖），進入該菜單頁后，作為一個用戶，我會懷疑：這個頁面是不是卡住了？是不是網絡不好沒加載出來？再等等看？以及開心奪寶，仍然是空空如也，沒有任何提示：

六、持久性設計

持久性設計，指長期顯示在頁面上的引導設計。無論頁面其他元素如何變動，持久性設計元素始終存在，始終提示用戶某項功能的入口，無論用戶是第一次還是第N次進入界面，持久性設計元素依然在屏幕上顯示。

高頻操作時，持久性引導在視覺上會被設計的非常醒目，如圓形懸浮按鈕；低頻操作時，持久性引導會弱化自身視覺效果，使之融入整個頁面，但又時刻可見。

引導的典型設計是用戶通過點擊“+”按鈕來添加在屏幕上持久展示的內容，如Analytics、Roambi、有道云筆記、面包筆記、微信閱讀和Quizlet：

最后的微信閱讀，就將添加書籍的功能做成了持久性引導，且為保持頁面整體風格，被設計成接近書籍縮略圖的大小和樣式。

七、易發現/刷新

易發現設計，指的是滑動屏幕進行內容刷新時，在“拉出”區域出現的操作提示設計。當按照提示讓手松開屏幕時，頁面恢復原位置，“拉出”區域消失，同時伴隨消失的還有操作提示。

這種設計是不會擾亂屏幕、鼓勵特定交互的有效方法，往往用于執行一些常見的動作，如滑動、短按等。易發現設計發展到現在，大體經歷了兩個階段：

第一階段：icon動效+文字提示+刷新時間。隨著大屏手機的迅速普通，移動交互設計處于“百花爭鳴”的階段，沒有所謂的“主流”設計方式，所以早期的易發現設計主要的功能是對交互動作進引導性解釋，當然，移動互聯網的時代也剛開啟沒幾年，現在大量應用扔沿用這種設計。而這時對于用戶來說，因為“習慣性存在”而產生的熟悉感，可能要比引導性解釋的意義更大。下面是育學園和蝦米音樂：

育學園加上更新時間有其特殊性，因為這個應用本身就是記錄寶寶成長的工具，記錄數據包括喂奶、拉粑、吃藥、睡眠等，每一項活動都需要記錄時間，因此當寶媽在逛論壇和知識版塊時，APP通過一些交互動作來展示時間，提醒寶媽，是非常必要的。

當然，狀態欄本身也有時間顯示，但是由于該時間是“一直存在”的，一直存在的事物，就像整本書全被劃了重點，很容易被用戶無意識忽略。

當然，育學園的時間提示也有問題，日期“08-09”明顯多余了。

而蝦米音樂采取這種方案的話，可能起到相反的效果。很多音樂愛好者習慣在睡前聽，如果在進行內容刷新的時候，被提示時間“最后更新：23:59””，對于用戶來說，可能就是入睡提示，從而降低應用的使用時長，雖然這對用戶來說是好事，但并不是APP官方想要看到的結果。

第二階段：ico動效或其他。到了這個階段，大部分用戶已經習慣了滑動屏幕再釋放刷新內容的操作方式，文字提示的必要性降低，所以很多應用直接用簡單的動效來完成，如即刻：

左圖下拉，右圖釋放刷新。再比如Doozyrama：

左圖為靜態頁面，右圖為下拉頁面再釋放后的刷新動效，超人形象的小人兒在空白頁面上方來回飛一次。

對比即刻和Doozyrama，不難發現，當頁面信息較多時，應相對減少易發現設計的復雜度；而當頁面信息較少甚至是空白時，增加易發現設計的復雜度（相對來說），這樣使頁面信息呈現上取得平衡，不至于太滿（有呼吸空間）或者太空（有抓眼球內容）。

本文由 @check hou 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash，基于 CC0 協議