如何設(shè)計(jì)出優(yōu)秀的引導(dǎo)頁

早些年入行做交互的時候，會對任何類型的頁面都做一些分析與總結(jié)，旨在提升自己的思考能力。所以當(dāng)然也寫過關(guān)于引導(dǎo)頁的文章，但是比較淺，今天我想更深入的談?wù)勥@個話題。
一、引導(dǎo)頁的類型 引導(dǎo)頁定義比較廣，往小了講，我們一般會認(rèn)為在用戶初次打開應(yīng)用時跳出的幾張介紹應(yīng)用功能的頁面就叫做引導(dǎo)頁；那往大了說，在用戶使用某個功能前就能幫助用戶降低學(xué)習(xí)成本的頁面或存在引導(dǎo)屬性的彈窗都可以稱為引導(dǎo)頁。 下面我們來看看市面上存在哪些引導(dǎo)頁，并分析其優(yōu)劣。
1. 傳統(tǒng)引導(dǎo)頁的形式 多數(shù)時候，我們初次打開應(yīng)用會看到下面這樣的引導(dǎo)頁： 可以看到一個共通點(diǎn)——即頁面呈現(xiàn)的內(nèi)容為該 App 的主功能或新功能推薦，或者是對剛迭代的功能做了哪些優(yōu)化的說明。 理想情況是：用戶能了解這次產(chǎn)品做了哪些優(yōu)化，幫助用戶更清晰地了解產(chǎn)品。 有些應(yīng)用的引導(dǎo)頁呈現(xiàn)的是下列內(nèi)容： 這類內(nèi)容純粹是對于品牌的推廣，包含類似市場專題推廣、情感化內(nèi)容運(yùn)營兩類。為了給用戶植入品牌的理念，只要涉及類似場景，就希望用戶能想到自己的品牌。 以上這些引導(dǎo)頁希望傳遞出的作用，僅僅只是產(chǎn)品人的理想情況，實(shí)際上這類引導(dǎo)頁基本甚至完全起不到他們希望達(dá)到的效果。 那為什么市面上的各家產(chǎn)品都要接入這類引導(dǎo)頁呢？一類是跟風(fēng)，另一類則是為了「儀式感」。旨在于應(yīng)用更新之后能起到一種感知——我們更新了。 受傳統(tǒng) PC 時代軟件說明書的影響。PC 時代的一個軟件，用戶往往不知道如何操作，甚至需要上專門的課程學(xué)習(xí)某個軟件才行，比如 office 系列。因此，每個軟件一旦售出，必然會配備使用說明書，以幫助用戶學(xué)習(xí)。但是，在移動互聯(lián)網(wǎng)時代，對于輕量級的 App 來說，說明書就太重了，所以使用了引導(dǎo)頁這種輕量級的方式。但即使如此，許多用戶仍然不買單，希望能「跳過」引導(dǎo)頁。 各位可以想想，你買了冰箱，會看操作說明書么？好的體驗(yàn)情況當(dāng)然是插上插座就能使用了。 所以有些產(chǎn)品甚至?xí)觥覆僮髁鞒虉D」來教用戶如何使用 App，出現(xiàn)這種情況的產(chǎn)品人員應(yīng)該反思，為什么用戶使用你的產(chǎn)品需要你教？操作成本未免太大了吧。
2. 內(nèi)容操作引導(dǎo) 這類引導(dǎo)會出現(xiàn)在內(nèi)容頁面，直接引導(dǎo)用戶去操作相關(guān)功能，如圖： 蒙版引導(dǎo)通常緊貼著界面流程進(jìn)行而出現(xiàn),使用透明色間隔形式加上簡單指示性文字與圖形，總是能夠簡潔明了地告知用戶產(chǎn)品的功能或者使用方法，并且由于其輕量的屬性會大大減少用戶的閱讀時間。設(shè)計(jì)得當(dāng)?shù)拿砂嬉龑?dǎo)不僅可以與其他引導(dǎo)相輔相成，同時也能夠增加用戶對產(chǎn)品的好感度。 廣義上，這也能叫引導(dǎo)頁，但我更希望叫它「操作引導(dǎo)」。它的好處就是清晰明了，直接讓用戶知道你想表達(dá)什么。它的實(shí)際效果會比純內(nèi)容引導(dǎo)頁好很多，但同時也會有一個問題，即打擾用戶操作。 許多小伙伴會以為這樣的方式已經(jīng)解決了內(nèi)容操作引導(dǎo)的問題，但其實(shí)這種方法也會使用戶厭倦，所以內(nèi)容不易過多。
3. 卡片式說明 卡片式的引導(dǎo)其實(shí)跟一個說的引導(dǎo)頁類型形似，無非就是在主頁彈出本次更新的內(nèi)容說明，如圖： 如果是重要內(nèi)容需要用戶操作，直接進(jìn)入產(chǎn)品引導(dǎo)用戶去使用，且呈現(xiàn)出一種驚喜感，不要強(qiáng)制給用戶產(chǎn)生過多無意義的打擾，或者冗余式的推送與呈現(xiàn)，否則體驗(yàn)無法盡如人意。 這類引導(dǎo)的好處是可關(guān)閉，如果用戶有興趣自會前往了解，如用戶不感興趣，則直接關(guān)閉不對其進(jìn)行任何操作。 我們出引導(dǎo)頁的目的是提供更好的東西給用戶讓他知道，當(dāng)然用戶也可以不知道，因?yàn)樗哪康牟皇怯眯鹿δ埽窃?App 滿足了其基本的訴求。所以不要做我出了新功能就一定要讓用戶使用的強(qiáng)引導(dǎo)。 但這類引導(dǎo)也有缺點(diǎn)，即沒有直接與功能產(chǎn)生聯(lián)系。
4. 視頻講解 昨天在 Mac 上更新 Nucleo 這款軟件的時候，更新完彈出一個視頻操作說明，告訴我如何使用新功能： 因?yàn)槲疫@張是截圖，所以沒法播放視頻。這類內(nèi)容比較直接，之前在手機(jī)上發(fā)現(xiàn)一款照片 App Enlight 也是如此，在我使用沒用過的功能時，它會直接通過視頻的方式告訴我如何操作，時間短，內(nèi)容清晰，一看就懂?；緵]什么閱讀障礙，就跟刷抖音一樣爽。 弊端是什么呢？對于內(nèi)容型產(chǎn)品的新功能介紹來說，它不像工具產(chǎn)品，可以通過視頻就輕易展示出來，但是可以借鑒。 所以可以從1-4循序漸進(jìn)的講解中發(fā)現(xiàn)，用戶希望得到的引導(dǎo)是內(nèi)容少且清晰、呈現(xiàn)快且直接的內(nèi)容，而不是好幾張引導(dǎo)頁、不相關(guān)的彈框來引導(dǎo)用戶去做他自己都不知道的功能?？偨Y(jié)下來就是四個點(diǎn)： 使用文字少； 引導(dǎo)內(nèi)容與功能產(chǎn)品關(guān)聯(lián)； 是有趣，如視頻或給予獎勵； 通俗易懂。
二、這樣的引導(dǎo)頁要怎么做呢？ 有時候我們可以在游戲設(shè)計(jì)中借鑒到很多值得學(xué)習(xí)的內(nèi)容?！逗猛娴脑O(shè)計(jì)》這本書就通過普通產(chǎn)品與游戲產(chǎn)品的對比，互相借鑒，總結(jié)出不少知識共通點(diǎn)，如能直接讓用戶產(chǎn)生興趣的操作才是合理的設(shè)計(jì)。
1. 傳統(tǒng)引導(dǎo)頁的形式 「傳統(tǒng)引導(dǎo)頁的形式」中提到的引導(dǎo)頁，內(nèi)容表達(dá)抽象，許多用戶無法理解這個功能表述的意思，或者說這個功能與用戶有什么直接關(guān)系？但是對于新功能展示來說，確實(shí)還是具有形式感的意義存在。
2.內(nèi)容操作引導(dǎo) 「內(nèi)容操作引導(dǎo)」中提到的操作引導(dǎo)，會打擾到用戶的正常操作，所以內(nèi)容盡量少，描述簡單直接，品牌代入感要少。
3.卡片式說明 「卡片式說明」中提到的彈框引導(dǎo)比較適合新用戶對于新功能的提示，如完成什么操作，就給予什么獎勵，直接引導(dǎo)用戶去使用，會比單純的顯示文字告訴用戶本次更新了什么要更好。
4.視頻講解 「視頻講解」中提到的視頻引導(dǎo)很直接的對功能做了說明，它在 App 中的使用場景更好的是新老用戶在一次使用這個功能時，給予提示，而不是一開始就彈出，此刻用戶可能不知道這個視頻所對應(yīng)的到底是什么意思。 《界面設(shè)計(jì)模式》這本書里單獨(dú)說過引導(dǎo)頁這個話題，其中就通過4個點(diǎn)來告訴用戶該如何設(shè)計(jì)引導(dǎo)頁，內(nèi)容與上述總結(jié)出的四個點(diǎn)很相近： 使用的文字要越少越好； 不要用太多內(nèi)容描述功能； 讓它變得直接且有趣； 能通過游戲來學(xué)習(xí)。 那么通過以上內(nèi)容的總結(jié)，我們分析得出：引導(dǎo)頁通常出現(xiàn)在用戶初次或更新后使用產(chǎn)品的過程中，我們要做到以最輕量的方式快速指引用戶了解產(chǎn)品的使用方法或者新功能。 現(xiàn)階段用戶打開一個新的產(chǎn)品通常會遇到各種引導(dǎo)提示（前置引導(dǎo)頁，視頻引導(dǎo)，彈窗提示，活動浮層介紹等等），區(qū)分這些引導(dǎo)，正確去使用，且合理設(shè)計(jì)，才是設(shè)計(jì)師應(yīng)該做的事情。 小結(jié) 當(dāng)我們在分析一個或一類功能，甚至是一款產(chǎn)品時，要以從舊到新的思路去分析其發(fā)展路徑，這樣就能看到它迭代優(yōu)化的原因，從而推理出用戶使用習(xí)慣的改變。 這樣才有助于我們在設(shè)計(jì)功能時，有底氣的運(yùn)用其中一種方式來解決問題，否則盲目跟風(fēng)，無法配得上「設(shè)計(jì)師」這個稱呼。

網(wǎng)頁標(biāo)題：如何設(shè)計(jì)出優(yōu)秀的引導(dǎo)頁
文章轉(zhuǎn)載：http://www.muchs.cn/news29/192379.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、響應(yīng)式網(wǎng)站、動態(tài)網(wǎng)站、云服務(wù)器、網(wǎng)站維護(hù)、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)