編輯導(dǎo)語：產(chǎn)品的易用性是留存轉(zhuǎn)化用戶的關(guān)鍵點之一，如果用戶操作門檻高，則容易給用戶帶來不理想的體驗，也容易導(dǎo)致用戶流失。那么，互聯(lián)網(wǎng)產(chǎn)品應(yīng)當(dāng)如何進(jìn)行引導(dǎo)設(shè)計，讓用戶獲得更優(yōu)體驗？本篇文章里，作者對引導(dǎo)設(shè)計進(jìn)行了一個系統(tǒng)總結(jié)，一起來看一下。

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

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

一、全局預(yù)覽

全局預(yù)覽往往在引導(dǎo)頁階段來完成，應(yīng)用第一次安裝啟動后，或者在用戶完成有效賬戶注冊前的每一次啟動，都會進(jìn)入引導(dǎo)頁，通過左右滑動來瀏覽奇數(shù)量的引導(dǎo)頁。

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

再比如Google Analytics：

最佳實踐：

1. 全局預(yù)覽應(yīng)用于強化或突出顯示關(guān)鍵或核心功能；
2. 全局預(yù)覽模式一般從用戶目標(biāo)角度出發(fā)，要盡量保持簡短，并輔以有力的視覺引導(dǎo)。

二、交互教程

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

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

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

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

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

而寶寶樹和醫(yī)護(hù)到家更加注重趣味性：

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

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

三、彈出框

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

隨著設(shè)計模式越來越規(guī)范，人們發(fā)現(xiàn)，彈出框的人機交互模式非常適合用于應(yīng)用本身的提示和引導(dǎo)，逐漸普遍在互聯(lián)網(wǎng)和移動互聯(lián)網(wǎng)產(chǎn)品中普及。典型的設(shè)計是：彈出框口+半透明蒙版背景（增強視覺對比）。

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

消息/內(nèi)容提示。如Pregnancy+和寶寶樹孕育：

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

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

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

最佳實踐：

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

四、對話框

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

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

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

最佳實踐：

1. 提示盡可能靠近指向?qū)ο螅?/li>
2. 內(nèi)容要簡短；
3. 開始觸發(fā)交互動作后（如觸碰屏幕），提示要自動消失；
4. 對話框整體顏色要和頁面有所區(qū)分，對比鮮明。

五、空狀態(tài)頁面

空狀態(tài)頁面，指的是內(nèi)容為空的頁面，常見于需要用戶自己進(jìn)行初始化配置、創(chuàng)建內(nèi)容等的應(yīng)用中，典型場景是用戶剛安裝應(yīng)用并開始使用。當(dāng)用戶完成配置、創(chuàng)建內(nèi)容后對“空狀態(tài)”的頁面進(jìn)行覆蓋。

而空狀態(tài)頁面引導(dǎo)，就是在空狀態(tài)頁面中加入引導(dǎo)式設(shè)計，增強用戶體驗。而空狀態(tài)引導(dǎo)也被稱為初次使用引導(dǎo)。

空狀態(tài)頁面引導(dǎo)一般由一種或幾種元素構(gòu)成：包括文字提示、表意插圖、觸發(fā)按鈕等。這些元素往往將固化在屏幕設(shè)計中，并一直存在，直到用戶執(zhí)行交互操作，或被其他內(nèi)容覆蓋。許多筆記類應(yīng)用，都是用初次使用引導(dǎo)去吸引用戶添加內(nèi)容。

我把空狀態(tài)頁面引導(dǎo)設(shè)計分為兩種：被動型引導(dǎo)和主動型引導(dǎo)。

先介紹被動型引導(dǎo)。這種設(shè)計以空狀態(tài)界面為典型應(yīng)用，如Change和Finger：

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

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

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

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

以及文字入口的美團(tuán)和Price Tag：

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

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

或者直接將“+”做到導(dǎo)航欄中，比如種子習(xí)慣和New：

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

六、持久性設(shè)計

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

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

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

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

七、易發(fā)現(xiàn)/刷新

易發(fā)現(xiàn)設(shè)計，指的是滑動屏幕進(jìn)行內(nèi)容刷新時，在“拉出”區(qū)域出現(xiàn)的操作提示設(shè)計。當(dāng)按照提示讓手松開屏幕時，頁面恢復(fù)原位置，“拉出”區(qū)域消失，同時伴隨消失的還有操作提示。

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

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

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

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

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

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

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

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

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

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

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

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