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

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

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

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

廣告

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