APP界面引導(dǎo)頁設(shè)計注意事項

創(chuàng)新互聯(lián)與你分享《APP界面引導(dǎo)頁設(shè)計注意事項》

一、什么內(nèi)容需要引導(dǎo)

1. 產(chǎn)品特色

展示產(chǎn)品的核心競爭力及最有特色的點，讓用戶清晰地了解該產(chǎn)品和同類產(chǎn)品相比最突出的優(yōu)勢，有一個良好的第一印象。

2. 產(chǎn)品操作

絕大部分產(chǎn)品做新手引導(dǎo)都是為了提示用戶如何進(jìn)行操作，降低用戶的學(xué)習(xí)成本，幫助用戶快速上手。

但需要注意的是，并不是所有產(chǎn)品功能都需要新手引導(dǎo)。產(chǎn)品的頁面、功能和交互設(shè)計應(yīng)該首先盡量做到自解釋，讓用戶自行探索也可以快速上手用起來。只有部分復(fù)雜功能和特殊交互需要對用戶進(jìn)行引導(dǎo)。

3. 產(chǎn)品新功能

產(chǎn)品上線新功能后，往往會給用戶一些提示，引導(dǎo)用戶去體驗新功能，不然在眾多功能中，用戶很難在短時間內(nèi)發(fā)現(xiàn)更新了哪些內(nèi)容。

二、APP界面引導(dǎo)頁會出現(xiàn)何時

1. 首次打開產(chǎn)品時

大部分的新手引導(dǎo)都會出現(xiàn)在用戶首次打開產(chǎn)品時，讓用戶對產(chǎn)品功能或操作有個初步了解。

2. 結(jié)合實際場景，在需要用到的時候出現(xiàn)

還有一些新手引導(dǎo)會在你需要的時候適時出現(xiàn)，在不干擾到你正常操作的前提下，根據(jù)用戶行為預(yù)判你可能遇到的問題，及時給予提示。因為很多時候用戶在沒有感知到這個功能和自己當(dāng)前目標(biāo)有關(guān)聯(lián)之前是不會自己主動去看新手引導(dǎo)的，所以把握新手引導(dǎo)出現(xiàn)的時機非常關(guān)鍵。

3. 用戶主動點擊尋求幫助

還有很多產(chǎn)品為了用戶的使用體驗以及保留用戶自行探索的好奇心，并不會設(shè)置強制性的新手引導(dǎo)。但用戶在需要引導(dǎo)的時候可以主動點擊幫助按鈕，把選擇權(quán)交到用戶手中。

三、新手APP界面引導(dǎo)頁呈現(xiàn)方式

1. 蒙層引導(dǎo)

蒙層引導(dǎo)，顧名思義，就是在產(chǎn)品的整個界面上方用一個黑色半透明蒙層進(jìn)行遮罩，蒙層上方對界面進(jìn)行圈注，旁邊配以手勢、文字、符號、插畫等。這種引導(dǎo)方式可以讓用戶聚焦了解被圈注的功能點或手勢說明，不被頁面中其他的元素所干擾。

而蒙層引導(dǎo)又可以細(xì)分為單頁蒙層引導(dǎo)和分步引導(dǎo)。

單頁蒙層引導(dǎo)：單頁蒙層引導(dǎo)的適用場景非常多，比如在展示新功能、說明界面中功能位置的改動、講解操作方式、體現(xiàn)特定的手勢交互劃分說明界面的整體結(jié)構(gòu)等等。

分步引導(dǎo)：分步引導(dǎo)就像上樓梯一樣，會一步一步由淺到深地引導(dǎo)用戶進(jìn)行操作。這類引導(dǎo)方式常用于界面相對復(fù)雜或完整交互流程比較長的工具類產(chǎn)品，帶領(lǐng)用戶快速了解每個功能的收納位置，或讓用戶以最短路徑完整體驗一遍操作流程。

當(dāng)然它的缺點也比較明顯，因為引導(dǎo)過程是連續(xù)的，用戶不可以自己控制步驟，所以有時候會讓用戶產(chǎn)生厭煩情緒。

2. 氣泡提示引導(dǎo)

氣泡提示引導(dǎo)一般會出現(xiàn)在用戶初次進(jìn)入頁面時，它的表現(xiàn)形式是在操作按鈕旁邊彈出一個氣泡提示框。

可不要小看它，它雖然很輕量，但目的指向性卻極強，對用戶的干擾極小。常用于以下場景：告知用戶有新功能上線、引導(dǎo)用戶使用核心功能，或告知用戶一些隱藏菜單的內(nèi)容。

3. 動畫/視頻引導(dǎo)

動畫、視頻、GIF 的共同優(yōu)點是非常直觀并且具有吸引力。用戶可以根據(jù)動態(tài)演示，很快地理解整個產(chǎn)品。但這類引導(dǎo)方式內(nèi)容不宜過長，尤其是動畫和 GIF 圖這類用戶無法自己控制演示進(jìn)度的展示方式，最好控制在10秒以內(nèi)，不然傳遞的信息量太大，會導(dǎo)致用戶失去耐心或干脆什么也沒記住。

這一種方式適合操作比較復(fù)雜或動態(tài)演示比較有沖擊力的產(chǎn)品。

4. 教學(xué)式引導(dǎo)

教學(xué)式引導(dǎo)會結(jié)合產(chǎn)品實際使用場景，一步一步地引導(dǎo)你進(jìn)行操作，鼓勵用戶參與其中，邊學(xué)邊用。這種方式很容易讓用戶沉浸其中，快速學(xué)習(xí)，并且因為有及時的操作反饋，所以用戶很容易獲得強烈的成就感。

這種引導(dǎo)頁方式常見于工具類產(chǎn)品和游戲。

5. 引導(dǎo)頁

引導(dǎo)頁出現(xiàn)在用戶首次打開 APP 的時候，基本上由3~5個頁面組成。在用戶使用產(chǎn)品前先給用戶營造好產(chǎn)品的基調(diào)和氛圍，宣傳產(chǎn)品功能和亮點或告知用戶最核心的操作方式。引導(dǎo)頁的內(nèi)容一定要仔細(xì)挑選，保證能帶給用戶新鮮感和吸引他們的注意力，否則對用戶來說反而是種干擾，只會直接選擇快速劃過。

6. 預(yù)加載任務(wù)

預(yù)加載任務(wù)是指在用戶進(jìn)入產(chǎn)品后，自動為用戶創(chuàng)建了一些和產(chǎn)品形態(tài)相關(guān)的示例，而不是留給用戶一個空頁面。在引導(dǎo)頁面設(shè)計的同時突出了產(chǎn)品的特色，借用本身的形態(tài)讓用戶沉浸在產(chǎn)品的真實場景中去學(xué)習(xí)，在后續(xù)產(chǎn)品的使用中上手速度更快。

此類引導(dǎo)最常用于工具類產(chǎn)品，比如原型工具、設(shè)計軟件、文檔、任務(wù)清單等產(chǎn)品。找類似APP軟件開發(fā)服務(wù)，可直接聯(lián)系創(chuàng)新互聯(lián)客服。

7. 空狀態(tài)引導(dǎo)

在新用戶初次進(jìn)入產(chǎn)品后，會面臨很多頁面內(nèi)容都為空的情況，此時我們就可以利用這些頁面的空狀態(tài)去很好地引導(dǎo)用戶從無到有的去創(chuàng)建內(nèi)容。如果空狀態(tài)頁面只是簡單告知用戶「這里沒有內(nèi)容」，用戶往往會不知所措，不知道下一步該做什么，所以這是一個非常棒的時機引導(dǎo)用戶去嘗試對應(yīng)的操作。

8. 互動式引導(dǎo)

這種引導(dǎo)方式非常隱蔽，通常出現(xiàn)在用戶與產(chǎn)品的特定交互過程中。比如鼠標(biāo)光標(biāo)移動到相應(yīng)的組件上，懸停時會出現(xiàn)相關(guān)的解釋文字;輸入框內(nèi)容為空時，會有文字提示;微信點擊錄入語音時，會提示「手指上滑，取消發(fā)送」;sketch 點擊 C 鍵時，底部會出現(xiàn)相應(yīng)的操作提示等等。

四、新手界面引導(dǎo)設(shè)計注意事項

1. 文案精準(zhǔn)，通俗易懂

好的文案和排版可以洞察用戶的心理，利用產(chǎn)品特性，以最能吸引用戶注意力的方式讓用戶迅速理解你所要表達(dá)的意思。

一個人的短時記憶一般只能記得5個字，最多記得9個，文案字?jǐn)?shù)過多用戶很容易遺忘和出現(xiàn)記憶的偏差，所以在新手引導(dǎo)中的文案要簡短、有效、突出重點。如果實在無法精簡，可以考慮用文字分層。

2. 內(nèi)容不要過多，明確顯示進(jìn)度

不要填鴨式地給用戶一次灌輸過多的信息，用戶初次接觸這款產(chǎn)品，無論你的新手引導(dǎo)設(shè)計得多么的精彩絕倫，也很少有用戶耐心地閱讀，并且一次交代太多內(nèi)容，很容易讓用戶產(chǎn)生「這款產(chǎn)品很復(fù)雜」的印象。

所以我們在設(shè)計新手引導(dǎo)的過程中，確保只提供給用戶最適時和必要的幫助，保留用戶主動探索的權(quán)利和積極性。同時讓用戶實時知道自己的進(jìn)度，否則很容易讓用戶失去控制感，產(chǎn)生焦躁情緒，從而直接選擇跳過。

3. 讓用戶有成就感

用戶完成引導(dǎo)中的任務(wù)或操作時，給予用戶及時的反饋，或者對用戶進(jìn)行鼓勵，帶給他們成就感。比如可以給出較為夸張的贊美式反饋，如果是有涉及消費的產(chǎn)品可以以代金券、優(yōu)惠券的形式給用戶獎勵。

在設(shè)計比較長的引導(dǎo)任務(wù)的時候記得要「用最短路徑讓用戶獲得最好的成果」，讓用戶產(chǎn)生「哇!我這么厲害!」的感覺，比如在游戲教學(xué)中常常會讓用戶迅速享受到滿血通關(guān)的快感!

4. 與品牌相近的風(fēng)格

新手引導(dǎo)的風(fēng)格基調(diào)最好和品牌風(fēng)格一致，例如：知乎的學(xué)術(shù)風(fēng)格、豆瓣的小清新風(fēng)格、簡書的簡潔風(fēng)格、bilibili 的二次元風(fēng)格等等，這些產(chǎn)品都有自己的品牌基因。產(chǎn)品的每個部分如果都能傳達(dá)給用戶同樣的品牌形象，就可以加強品牌在用戶心理的認(rèn)知。如果你的產(chǎn)品是 bilibili 這種帶有二次元風(fēng)格的產(chǎn)品，那新手引導(dǎo)就不要選用金融產(chǎn)品的商務(wù)風(fēng)格。

5. 增加趣味性

嘗試讓自己的引導(dǎo)更有趣，讓用戶愿意看、喜歡看!

比如使用卡通產(chǎn)品形象來和用戶進(jìn)行對話，為形式和內(nèi)容都增加了更多的趣味性。可愛的動畫形象，擬人化、口語化的語言引導(dǎo)等等，這些方式都可以降低用戶對于被打擾這件事情的反感，在愉悅的心情下快速掌握引導(dǎo)內(nèi)容。

在這種引導(dǎo)風(fēng)格中做得比較優(yōu)秀的是 bilibili、閑魚、自如、盒馬這幾款 APP。

6. 在合適的時機出現(xiàn)

現(xiàn)在人們都講究界限感，新手引導(dǎo)是引導(dǎo)，不是騷擾，所以并不需要一股腦兒地把所有東西都教給用戶。

我們需要確保引導(dǎo)不會打擾到用戶本身的操作，最好能仔細(xì)分析用戶行為，預(yù)判他接下來可能需要的操作，在用戶恰好需要一些提示的時候適時出現(xiàn)，無所適從的用戶會覺得這款產(chǎn)品很貼心，畢竟雪中送炭更好過錦上添花，讓用戶感覺「這幫助來的剛剛好!」

7. 可以跳過、可以隨時忽略

并不是所有的用戶都是需要引導(dǎo)的，也并不是所有用戶都愿意被引導(dǎo)，所以要給用戶選擇的余地，讓用戶根據(jù)自己的情況自行進(jìn)行選擇。

總結(jié)

本文從各個方面探討了新手引導(dǎo)方式，但并不是所有的產(chǎn)品都需要新手引導(dǎo)，常態(tài)型產(chǎn)品不需要新手引導(dǎo)，例如：購物類、新聞類、信息社交類。它們的界面和操作流程我們已經(jīng)基本熟悉了，所以不需要過多的新手引導(dǎo)來浪費用戶的時間。

新手引導(dǎo)最重要的是要契合產(chǎn)品本身，在合適的時機，以恰當(dāng)?shù)姆绞?，在不剝奪用戶探索權(quán)利的情況下，去引導(dǎo)用戶更好地使用這款產(chǎn)品。

新手引導(dǎo)雖然是很小的一個環(huán)節(jié)，但在產(chǎn)品設(shè)計中每個環(huán)節(jié)都是非常重要的，它們直接影響了用戶的使用感受，所以希望產(chǎn)品設(shè)計者都能像匠人一樣去打磨自己的產(chǎn)品，給用戶帶來高水準(zhǔn)的用戶體驗。

綜上所述是APP開發(fā)公司——創(chuàng)新互聯(lián)與你分享的《APP界面引導(dǎo)頁設(shè)計注意事項》全部內(nèi)容。

網(wǎng)站欄目：APP界面引導(dǎo)頁設(shè)計注意事項
鏈接分享：http://www.muchs.cn/news13/169263.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、全網(wǎng)營銷推廣、電子商務(wù)、網(wǎng)站營銷、動態(tài)網(wǎng)站、定制開發(fā)

廣告

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