海淘科技與你分享《APP界面引導(dǎo)頁設(shè)計(jì)注意事項(xiàng)》
1. 產(chǎn)品特色
展示產(chǎn)品的核心競(jìng)爭力及最有特色的點(diǎn)，讓用戶清晰地了解該產(chǎn)品和同類產(chǎn)品相比最突出的優(yōu)勢(shì)，有一個(gè)良好的第一印象。
2. 產(chǎn)品操作
絕大部分產(chǎn)品做新手引導(dǎo)都是為了提示用戶如何進(jìn)行操作，降低用戶的學(xué)習(xí)成本，幫助用戶快速上手。
但需要注意的是，并不是所有產(chǎn)品功能都需要新手引導(dǎo)。產(chǎn)品的頁面、功能和交互設(shè)計(jì)應(yīng)該首先盡量做到自解釋，讓用戶自行探索也可以快速上手用起來。只有部分復(fù)雜功能和特殊交互需要對(duì)用戶進(jìn)行引導(dǎo)。
3. 產(chǎn)品新功能
產(chǎn)品上線新功能后，往往會(huì)給用戶一些提示，引導(dǎo)用戶去體驗(yàn)新功能，不然在眾多功能中，用戶很難在短時(shí)間內(nèi)發(fā)現(xiàn)更新了哪些內(nèi)容。
1. 首次打開產(chǎn)品時(shí)
大部分的新手引導(dǎo)都會(huì)出現(xiàn)在用戶首次打開產(chǎn)品時(shí)，讓用戶對(duì)產(chǎn)品功能或操作有個(gè)初步了解。
2. 結(jié)合實(shí)際場(chǎng)景，在需要用到的時(shí)候出現(xiàn)
還有一些新手引導(dǎo)會(huì)在你需要的時(shí)候適時(shí)出現(xiàn)，在不干擾到你正常操作的前提下，根據(jù)用戶行為預(yù)判你可能遇到的問題，及時(shí)給予提示。因?yàn)楹芏鄷r(shí)候用戶在沒有感知到這個(gè)功能和自己當(dāng)前目標(biāo)有關(guān)聯(lián)之前是不會(huì)自己主動(dòng)去看新手引導(dǎo)的，所以把握新手引導(dǎo)出現(xiàn)的時(shí)機(jī)非常關(guān)鍵。
3. 用戶主動(dòng)點(diǎn)擊尋求幫助
還有很多產(chǎn)品為了用戶的使用體驗(yàn)以及保留用戶自行探索的好奇心，并不會(huì)設(shè)置強(qiáng)制性的新手引導(dǎo)。但用戶在需要引導(dǎo)的時(shí)候可以主動(dòng)點(diǎn)擊幫助按鈕，把選擇權(quán)交到用戶手中。
1. 蒙層引導(dǎo)
蒙層引導(dǎo)，顧名思義，就是在產(chǎn)品的整個(gè)界面上方用一個(gè)黑色半透明蒙層進(jìn)行遮罩，蒙層上方對(duì)界面進(jìn)行圈注，旁邊配以手勢(shì)、文字、符號(hào)、插畫等。這種引導(dǎo)方式可以讓用戶聚焦了解被圈注的功能點(diǎn)或手勢(shì)說明，不被頁面中其他的元素所干擾。
而蒙層引導(dǎo)又可以細(xì)分為單頁蒙層引導(dǎo)和分步引導(dǎo)。
單頁蒙層引導(dǎo)：單頁蒙層引導(dǎo)的適用場(chǎng)景非常多，比如在展示新功能、說明界面中功能位置的改動(dòng)、講解操作方式、體現(xiàn)特定的手勢(shì)交互劃分說明界面的整體結(jié)構(gòu)等等。
分步引導(dǎo)：分步引導(dǎo)就像上樓梯一樣，會(huì)一步一步由淺到深地引導(dǎo)用戶進(jìn)行操作。這類引導(dǎo)方式常用于界面相對(duì)復(fù)雜或完整交互流程比較長的工具類產(chǎn)品，帶領(lǐng)用戶快速了解每個(gè)功能的收納位置，或讓用戶以最短路徑完整體驗(yàn)一遍操作流程。
當(dāng)然它的缺點(diǎn)也比較明顯，因?yàn)橐龑?dǎo)過程是連續(xù)的，用戶不可以自己控制步驟，所以有時(shí)候會(huì)讓用戶產(chǎn)生厭煩情緒。
2. 氣泡提示引導(dǎo)
氣泡提示引導(dǎo)一般會(huì)出現(xiàn)在用戶初次進(jìn)入頁面時(shí)，它的表現(xiàn)形式是在操作按鈕旁邊彈出一個(gè)氣泡提示框。
可不要小看它，它雖然很輕量，但目的指向性卻極強(qiáng)，對(duì)用戶的干擾極小。常用于以下場(chǎng)景：告知用戶有新功能上線、引導(dǎo)用戶使用核心功能，或告知用戶一些隱藏菜單的內(nèi)容。
3. 動(dòng)畫/視頻引導(dǎo)
動(dòng)畫、視頻、GIF 的共同優(yōu)點(diǎn)是非常直觀并且具有吸引力。用戶可以根據(jù)動(dòng)態(tài)演示，很快地理解整個(gè)產(chǎn)品。但這類引導(dǎo)方式內(nèi)容不宜過長，尤其是動(dòng)畫和 GIF 圖這類用戶無法自己控制演示進(jìn)度的展示方式，最好控制在10秒以內(nèi)，不然傳遞的信息量太大，會(huì)導(dǎo)致用戶失去耐心或干脆什么也沒記住。
這一種方式適合操作比較復(fù)雜或動(dòng)態(tài)演示比較有沖擊力的產(chǎn)品。
4. 教學(xué)式引導(dǎo)
教學(xué)式引導(dǎo)會(huì)結(jié)合產(chǎn)品實(shí)際使用場(chǎng)景，一步一步地引導(dǎo)你進(jìn)行操作，鼓勵(lì)用戶參與其中，邊學(xué)邊用。這種方式很容易讓用戶沉浸其中，快速學(xué)習(xí)，并且因?yàn)橛屑皶r(shí)的操作反饋，所以用戶很容易獲得強(qiáng)烈的成就感。
這種引導(dǎo)頁方式常見于工具類產(chǎn)品和游戲。
5. 引導(dǎo)頁
引導(dǎo)頁出現(xiàn)在用戶首次打開 APP 的時(shí)候，基本上由3~5個(gè)頁面組成。在用戶使用產(chǎn)品前先給用戶營造好產(chǎn)品的基調(diào)和氛圍，宣傳產(chǎn)品功能和亮點(diǎn)或告知用戶最核心的操作方式。引導(dǎo)頁的內(nèi)容一定要仔細(xì)挑選，保證能帶給用戶新鮮感和吸引他們的注意力，否則對(duì)用戶來說反而是種干擾，只會(huì)直接選擇快速劃過。
6. 預(yù)加載任務(wù)
預(yù)加載任務(wù)是指在用戶進(jìn)入產(chǎn)品后，自動(dòng)為用戶創(chuàng)建了一些和產(chǎn)品形態(tài)相關(guān)的示例，而不是留給用戶一個(gè)空頁面。在引導(dǎo)頁面設(shè)計(jì)的同時(shí)突出了產(chǎn)品的特色，借用本身的形態(tài)讓用戶沉浸在產(chǎn)品的真實(shí)場(chǎng)景中去學(xué)習(xí)，在后續(xù)產(chǎn)品的使用中上手速度更快。
此類引導(dǎo)最常用于工具類產(chǎn)品，比如原型工具、設(shè)計(jì)軟件、文檔、任務(wù)清單等產(chǎn)品。找類似APP軟件開發(fā)服務(wù)，可直接聯(lián)系海淘科技客服。
7. 空狀態(tài)引導(dǎo)
在新用戶初次進(jìn)入產(chǎn)品后，會(huì)面臨很多頁面內(nèi)容都為空的情況，此時(shí)我們就可以利用這些頁面的空狀態(tài)去很好地引導(dǎo)用戶從無到有的去創(chuàng)建內(nèi)容。如果空狀態(tài)頁面只是簡單告知用戶「這里沒有內(nèi)容」，用戶往往會(huì)不知所措，不知道下一步該做什么，所以這是一個(gè)非常棒的時(shí)機(jī)引導(dǎo)用戶去嘗試對(duì)應(yīng)的操作。
8. 互動(dòng)式引導(dǎo)
這種引導(dǎo)方式非常隱蔽，通常出現(xiàn)在用戶與產(chǎn)品的特定交互過程中。比如鼠標(biāo)光標(biāo)移動(dòng)到相應(yīng)的組件上，懸停時(shí)會(huì)出現(xiàn)相關(guān)的解釋文字;輸入框內(nèi)容為空時(shí)，會(huì)有文字提示;微信點(diǎn)擊錄入語音時(shí)，會(huì)提示「手指上滑，取消發(fā)送」;sketch 點(diǎn)擊 C 鍵時(shí)，底部會(huì)出現(xiàn)相應(yīng)的操作提示等等。
1. 文案精準(zhǔn)，通俗易懂
好的文案和排版可以洞察用戶的心理，利用產(chǎn)品特性，以最能吸引用戶注意力的方式讓用戶迅速理解你所要表達(dá)的意思。
一個(gè)人的短時(shí)記憶一般只能記得5個(gè)字，最多記得9個(gè)，文案字?jǐn)?shù)過多用戶很容易遺忘和出現(xiàn)記憶的偏差，所以在新手引導(dǎo)中的文案要簡短、有效、突出重點(diǎn)。如果實(shí)在無法精簡，可以考慮用文字分層。
2. 內(nèi)容不要過多，明確顯示進(jìn)度
不要填鴨式地給用戶一次灌輸過多的信息，用戶初次接觸這款產(chǎn)品，無論你的新手引導(dǎo)設(shè)計(jì)得多么的精彩絕倫，也很少有用戶耐心地閱讀，并且一次交代太多內(nèi)容，很容易讓用戶產(chǎn)生「這款產(chǎn)品很復(fù)雜」的印象。
所以我們?cè)谠O(shè)計(jì)新手引導(dǎo)的過程中，確保只提供給用戶最適時(shí)和必要的幫助，保留用戶主動(dòng)探索的權(quán)利和積極性。同時(shí)讓用戶實(shí)時(shí)知道自己的進(jìn)度，否則很容易讓用戶失去控制感，產(chǎn)生焦躁情緒，從而直接選擇跳過。
3. 讓用戶有成就感
用戶完成引導(dǎo)中的任務(wù)或操作時(shí)，給予用戶及時(shí)的反饋，或者對(duì)用戶進(jìn)行鼓勵(lì)，帶給他們成就感。比如可以給出較為夸張的贊美式反饋，如果是有涉及消費(fèi)的產(chǎn)品可以以代金券、優(yōu)惠券的形式給用戶獎(jiǎng)勵(lì)。
在設(shè)計(jì)比較長的引導(dǎo)任務(wù)的時(shí)候記得要「用最短路徑讓用戶獲得最好的成果」，讓用戶產(chǎn)生「哇!我這么厲害!」的感覺，比如在游戲教學(xué)中常常會(huì)讓用戶迅速享受到滿血通關(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)品的每個(gè)部分如果都能傳達(dá)給用戶同樣的品牌形象，就可以加強(qiáng)品牌在用戶心理的認(rèn)知。如果你的產(chǎn)品是 bilibili 這種帶有二次元風(fēng)格的產(chǎn)品，那新手引導(dǎo)就不要選用金融產(chǎn)品的商務(wù)風(fēng)格。
5. 增加趣味性
嘗試讓自己的引導(dǎo)更有趣，讓用戶愿意看、喜歡看!
比如使用卡通產(chǎn)品形象來和用戶進(jìn)行對(duì)話，為形式和內(nèi)容都增加了更多的趣味性?？蓯鄣膭?dòng)畫形象，擬人化、口語化的語言引導(dǎo)等等，這些方式都可以降低用戶對(duì)于被打擾這件事情的反感，在愉悅的心情下快速掌握引導(dǎo)內(nèi)容。
在這種引導(dǎo)風(fēng)格中做得比較優(yōu)秀的是 bilibili、閑魚、自如、盒馬這幾款 APP。
6. 在合適的時(shí)機(jī)出現(xiàn)
現(xiàn)在人們都講究界限感，新手引導(dǎo)是引導(dǎo)，不是騷擾，所以并不需要一股腦兒地把所有東西都教給用戶。
我們需要確保引導(dǎo)不會(huì)打擾到用戶本身的操作，最好能仔細(xì)分析用戶行為，預(yù)判他接下來可能需要的操作，在用戶恰好需要一些提示的時(shí)候適時(shí)出現(xiàn)，無所適從的用戶會(huì)覺得這款產(chǎn)品很貼心，畢竟雪中送炭更好過錦上添花，讓用戶感覺「這幫助來的剛剛好!」
7. 可以跳過、可以隨時(shí)忽略
并不是所有的用戶都是需要引導(dǎo)的，也并不是所有用戶都愿意被引導(dǎo)，所以要給用戶選擇的余地，讓用戶根據(jù)自己的情況自行進(jìn)行選擇。
本文從各個(gè)方面探討了新手引導(dǎo)方式，但并不是所有的產(chǎn)品都需要新手引導(dǎo)，常態(tài)型產(chǎn)品不需要新手引導(dǎo)，例如：購物類、新聞?lì)悺⑿畔⑸缃活?。它們的界面和操作流程我們已?jīng)基本熟悉了，所以不需要過多的新手引導(dǎo)來浪費(fèi)用戶的時(shí)間。
新手引導(dǎo)最重要的是要契合產(chǎn)品本身，在合適的時(shí)機(jī)，以恰當(dāng)?shù)姆绞剑诓粍儕Z用戶探索權(quán)利的情況下，去引導(dǎo)用戶更好地使用這款產(chǎn)品。
新手引導(dǎo)雖然是很小的一個(gè)環(huán)節(jié)，但在產(chǎn)品設(shè)計(jì)中每個(gè)環(huán)節(jié)都是非常重要的，它們直接影響了用戶的使用感受，所以希望產(chǎn)品設(shè)計(jì)者都能像匠人一樣去打磨自己的產(chǎn)品，給用戶帶來高水準(zhǔn)的用戶體驗(yàn)。
綜上所述是上海APP開發(fā)公司——海淘科技與你分享的《APP界面引導(dǎo)頁設(shè)計(jì)注意事項(xiàng)》全部內(nèi)容。
