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

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

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

一、全局預(yù)覽

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

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

再比如Google Analytics：

最佳實(shí)踐：

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

二、交互教程

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

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

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

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

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

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

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

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

三、彈出框

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

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

對(duì)于現(xiàn)在的移動(dòng)APP來(lái)說(shuō)，對(duì)話框是一種最常見(jiàn)的引導(dǎo)設(shè)計(jì)。同時(shí)，也正因?yàn)闊o(wú)處不在，它也是最容易被忽略和摒棄的，我們可以用彈出框引導(dǎo)來(lái)實(shí)現(xiàn)：

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

問(wèn)題/錯(cuò)誤提示。如icon和Wolters Kluwer：

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

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

最佳實(shí)踐：

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

四、對(duì)話框

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

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

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

最佳實(shí)踐：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

六、持久性設(shè)計(jì)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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