早些年入行做交互的時候，會對任何類型的頁面都做一些分析與總結(jié)，旨在提升自己的思考能力吧。所以當然也寫過關(guān)于引導頁的文章，但是比較淺，今天我想更深入的談談這個話題。

1. 引導頁的類型

引導頁定義比較廣，往小了講，我們一般會認為在用戶初次打開應用時跳出的幾張介紹應用功能的頁面就叫做引導頁；那往大了說，在用戶使用某個功能前就能幫助用戶降低學習成本的頁面或存在引導屬性的彈窗都可以稱為引導頁。

下面我們來看看市面上存在哪些引導頁，并分析其優(yōu)劣。

1.1 傳統(tǒng)引導頁的形式

多數(shù)時候，我們初次打開應用會看到下面這樣的引導頁：

可以看到一個共通點 ——?即頁面呈現(xiàn)的內(nèi)容為該 App 的主功能或新功能推薦，或者是對剛迭代的功能做了哪些優(yōu)化的說明。

理想情況是：用戶能了解這次產(chǎn)品做了哪些優(yōu)化，幫助用戶更清晰地了解產(chǎn)品。

有些應用的引導頁呈現(xiàn)的是下列內(nèi)容：

這類內(nèi)容純粹是對于品牌的推廣，包含類似市場專題推廣、情感化內(nèi)容運營兩類。為了給用戶植入品牌的理念，只要涉及類似場景，就希望用戶能想到自己的品牌。

以上這些引導頁希望傳遞出的作用，僅僅只是產(chǎn)品人的理想情況，實際上這類引導頁基本甚至完全起不到他們希望達到的效果。

那為什么市面上的各家產(chǎn)品都要接入這類引導頁呢？一類是跟風，另一類則是為了「儀式感」。意在于應用更新之后能起到一種感知 —— 我們更新了。

受傳統(tǒng) PC 時代軟件說明書的影響。PC 時代的一個軟件，用戶往往不知道如何操作，甚至需要上專門的課程學習某個軟件才行，比如 office 系列。因此，每個軟件一旦售出，必然會配備使用說明書，以幫助用戶學習。但是，在移動互聯(lián)網(wǎng)時代，對于輕量級的 App 來說，說明書就太重了，所以使用了引導頁這種輕量級的方式。但即使如此，許多用戶仍然不買單，希望能「跳過」引導頁。

各位可以想想，你買了冰箱，會看操作說明書么？好的體驗情況當然是插上插座就能使用了。

所以有些產(chǎn)品甚至會出「操作流程圖」來教用戶如何使用 App，出現(xiàn)這種情況的產(chǎn)品人員應該反思，為什么用戶使用你的產(chǎn)品需要你教？操作成本未免太大了吧。

1.2 內(nèi)容操作引導

這類引導會出現(xiàn)在內(nèi)容頁面，直接引導用戶去操作相關(guān)功能，如圖：

蒙版引導通常緊貼著界面流程進行而出現(xiàn),使用透明色間隔形式加上簡單指示性文字與圖形，總是能夠簡潔明了地告知用戶產(chǎn)品的功能或者使用方法，并且由于其輕量的屬性會大大減少用戶的閱讀時間。設計得當?shù)拿砂嬉龑Р粌H可以與其他引導相輔相成，同時也能夠增加用戶對產(chǎn)品的好感度。

廣義上，這也能叫引導頁，但我更希望叫它「操作引導」。它的好處就是清晰明了，直接讓用戶知道你想表達什么。它的實際效果會比純內(nèi)容引導頁好很多，但同時也會有一個問題，即打擾用戶操作。

許多小伙伴會以為這樣的方式已經(jīng)解決了內(nèi)容操作引導的問題，但其實這種方法也會使用戶厭倦，所以內(nèi)容不易過多。

1.3 卡片式說明

卡片式的引導其實跟第一個說的引導頁類型形似，無非就是在主頁彈出本次更新的內(nèi)容說明，如圖：

如果是重要內(nèi)容需要用戶操作，直接進入產(chǎn)品引導用戶去使用，且呈現(xiàn)出一種驚喜感，不要強制給用戶產(chǎn)生過多無意義的打擾，或者冗余式的推送與呈現(xiàn)，否則體驗無法盡如人意。

這類引導的好處是可關(guān)閉，如果用戶有興趣自會前往了解，如用戶不感興趣，則直接關(guān)閉不對其進行任何操作。

我們出引導頁的目的是提供更好的東西給用戶讓他知道，當然用戶也可以不知道，因為他的目的不是用新功能，而是該 App 滿足了其基本的訴求。所以不要做我出了新功能就一定要讓用戶使用的強引導。

但這類引導也有缺點，即沒有直接與功能產(chǎn)生聯(lián)系。

1.4 視頻講解

昨天在 Mac 上更新 Nucleo 這款軟件的時候，更新完彈出一個視頻操作說明，告訴我如何使用新功能：

因為我這張是截圖，所以沒法播放視頻。這類內(nèi)容比較直接，之前在手機上發(fā)現(xiàn)一款照片 App Enlight 也是如此，在我使用沒用過的功能時，它會直接通過視頻的方式告訴我如何操作，時間短，內(nèi)容清晰，一看就懂?；緵]什么閱讀障礙，就跟刷抖音一樣爽。

弊端是什么呢？對于內(nèi)容型產(chǎn)品的新功能介紹來說，它不像工具產(chǎn)品，可以通過視頻就輕易展示出來，但是可以借鑒。

所以可以從 1.1-1.4 循序漸進的講解中發(fā)現(xiàn)，用戶希望得到的引導是內(nèi)容少且清晰、呈現(xiàn)快且直接的內(nèi)容，而不是好幾張引導頁、不相關(guān)的彈框來引導用戶去做他自己都不知道的功能?？偨Y(jié)下來就是四個點：

1. 使用文字少；
2. 引導內(nèi)容與功能產(chǎn)品關(guān)聯(lián)；
3. 最好是有趣，
4. 如視頻或給予獎勵；
5. 通俗易懂；

2. 這樣的引導頁要怎么做呢？小結(jié)

有時候我們可以在游戲設計中借鑒到很多值得學習的內(nèi)容?！逗猛娴脑O計》這本書就通過普通產(chǎn)品與游戲產(chǎn)品的對比，互相借鑒，總結(jié)出不少知識共通點，如能直接讓用戶產(chǎn)生興趣的操作才是合理的設計。

• 1.1 中提到的引導頁，內(nèi)容表達抽象，許多用戶無法理解這個功能表述的意思，或者說這個功能與我有什么直接關(guān)系？但是對于新功能展示來說，確實具有形式感的意義存在。
• 1.2 中提到的操作引導，會打擾到用戶的正常操作，所以內(nèi)容盡量少，描述簡單直接，品牌代入感要少；
• 1.3 中提到的彈框引導比較適合新用戶對于新功能的提示，如完成什么操作，就給予什么獎勵，直接引導用戶去使用，會比單純的顯示文字告訴用戶本次更新了什么要更好。
• 1.4 中提到的視頻引導很直接的對功能做了說明，它在 App 中的使用場景更好的是新老用戶在第一次使用這個功能時，給予提示，而不是一開始就彈出，此刻用戶可能不知道這個視頻所對應的到底是什么意思。

《界面設計模式》這本書里單獨說過引導頁這個話題，其中就通過 4 個點來告訴用戶該如何設計引導頁，內(nèi)容與上述總結(jié)出的四個點很相近：

1. 使用的文字要越少越好；
2. 不要用太多內(nèi)容描述功能；
3. 讓它變得直接且有趣；
4. 最好能通過游戲來學習；

那么通過以上內(nèi)容的總結(jié)，我們分析得出：

引導頁通常出現(xiàn)在用戶初次或更新后使用產(chǎn)品的過程中，我們要做到以最輕量的方式快速指引用戶了解產(chǎn)品的使用方法或者新功能。

現(xiàn)階段用戶打開一個新的產(chǎn)品通常會遇到各種引導提示（前置引導頁，視頻引導，彈窗提示，活動浮層介紹等等），區(qū)分這些引導，正確去使用，且合理設計，才是設計師應該做的事情。

小結(jié)

當我們在分析一個或一類功能，甚至是一款產(chǎn)品時，要以從舊到新的思路去分析這個功能的發(fā)展路徑，這樣就能看到其迭代優(yōu)化的原因，從而推理出用戶使用習慣的改變。

這樣才有助于我們在設計功能時，有底氣的運用其中一種方式來解決問題，否則盲目跟風，無法配得上「設計師」這個稱呼。

我的文章不是要教各位怎么做設計，而是與各位說明設計過程中需要注意的點。

希望我的文章能幫助你深度思考，謝謝閱讀：）

原文作者：呆呆U理