好的什設思新手引導設計可以有效地降低用戶(hù)的使用門(mén)檻，并提??升用戶(hù)體驗。計研究淺計研究筆者通過(guò)(/ω＼)分析現有新手引導研究以及展開(kāi)新手引導(dao)設計的析設反思，提煉了非常實(shí)用的大反價(jià)值點(diǎn)。

一、什設思現有新手引導研究

為了讓新用戶(hù)更好地使（gong）用（xian）產(chǎn)（li）品（run），計研究??淺計研究設計師往往會(huì )??在用戶(hù)初次使用產(chǎn)品(O_O)時(shí)給予引導，析設??以幫助用戶(hù)熟悉產(chǎn)品功能及操作。大反

良好的什設思新手引導可以降低用戶(hù)使用的門(mén)檻，給用戶(hù)留下用戶(hù)體驗良好的計研究淺計研究第一印象。因此，析設新手引導一般包括產(chǎn)品功能介紹和初次使用引導兩種功能，大反二者共同提升產(chǎn)品的什設思用戶(hù)體驗。

那么新手引導設計應該包含哪些內容？計研究淺計研究設計(ji)時(shí)有哪些要注意的點(diǎn)？筆者試從產(chǎn)品功能介紹和初次使用引導兩個(gè)角度，結合用戶(hù)體驗，析設分別予以介紹。

1. 產(chǎn)品功能介紹

現有在新手引導中嵌入產(chǎn)品功能的常用方式有滑動(dòng)展示引導頁(yè)和使用說(shuō)明書(shū)引導兩種。

滑動(dòng)展示引導頁(yè)

是指在用戶(hù)初次使用產(chǎn)品時(shí)提供一系列可滑動(dòng)展示的、介紹應用功能的引導頁(yè)，這種引導頁(yè)的缺陷在于它橫亙在用戶(hù)和APP之間，即使頁(yè)面設計得精美有趣，用戶(hù)也很難充滿(mǎn)耐心地仔細閱讀完(wan)。

因為絕大ヽ(′ー｀)ノ多??數的用戶(hù)在下載APP前多是( ?ヮ?)事先了解過(guò)產(chǎn)品的功能的，當他打開(kāi)APP時(shí)，再次出現功能說(shuō)明就顯得重復；而且用戶(hù)多傾向于自己探索APP，即使教程對他們有所助益，但是這本身是偏離用戶(hù)初衷的。因(′ω｀)此不建議做純粹的以產(chǎn)品功能介紹為內容的新手引導頁(yè)。

使用說(shuō)明書(shū)引導

它會(huì )在用戶(hù)使用產(chǎn)品后看到的第一個(gè)界面中??詳細介ヽ(′?｀)ノ紹產(chǎn)品的功能，并且多數帶有鼓勵用戶(hù)嘗試使用的文字說(shuō)明。比如下圖顯示的APP，“Welcome Board”是用戶(hù)使用任務(wù)管理面板時(shí)看到的第一個(gè)界面，其中涵蓋了預填充的代辦事項列表，說(shuō)明了程序中不同控件的??交互和功(′▽?zhuān)?能。

整體而言，在產(chǎn)品的新手引導中嵌入產(chǎn)品功能的行為是比較少的，多數產(chǎn)品會(huì )選??擇在官網(wǎng)上進(jìn)行功能介紹，這樣的(de)介紹方式受限少，(°o°)更具整體性和系統性，形式也更靈活。

2. 初次使用引導

如上文所述，多數新手引導更著(zhù)重使用方法方面的說(shuō)明，致力于降低用戶(hù)的使用門(mén)檻，提升用ヽ(′?｀)ノ戶(hù)體驗。初(′?_?`)次使用引導的方式有多種，常見(jiàn)的有滑動(dòng)展示引導頁(yè)、遮罩式引??導、彈窗式引導、氣泡/浮層式引導以及內嵌式引導(′▽?zhuān)?。這(zhe)五種方式引導的強(╬?益?)度依次降低，對用戶(hù)的干擾程度也依次減小。

1. 滑動(dòng)展(zhan)示引導頁(yè)

在新手引導中??是比較常見(jiàn)的方式，比如APP Store上好評如潮的Clear，由于其簡(jiǎn)潔的(de)操作對新用(//ω//)戶(hù)來(lái)說(shuō)使用難度較高，所以在用戶(hù)首次使用時(shí)Clear會(huì )提供7屏教程來(lái)引導用戶(hù)使用，教會(huì )他們常用的交互手勢。但這種方式缺陷依然存在，強制用戶(hù)在使用前觀(guān)看(kan)復雜的教程，可能會(huì )讓嘗試使用的用戶(hù)立刻就打了退堂鼓。

2. 遮罩式引導

這也是一種強引導，通過(guò)直接蓋住界面來(lái)強調當前需要引導的內ヾ(′?｀)?容。

這種提示讓用戶(hù)將注意力集中到??某個(gè)特定功??能上，通常出現在┐(′д｀)┌用戶(hù)首次操作的時(shí)候，??一次顯示一個(gè)或多個(gè)。引導內容只有當用┐(′ー｀)┌戶(hù)看到提示內容并且執行相應操作比如點(diǎn)擊遮ヽ(′▽?zhuān)?ノ罩或點(diǎn)擊“×”時(shí)才會(huì )消失，這就確保了信息傳達的有效性。注意這里的首次操作并不一定是用戶(hù)首次使用此產(chǎn)品，即使是老用戶(hù)，只要他之前沒(méi)有到達過(guò)這個(gè)頁(yè)面，那么當他首次到達時(shí)就會(huì )顯示新手引導。這種引導方式??(shi)非常常見(jiàn)，既可以在用戶(hù)首次使用時(shí)用來(lái)做全局引導，也可(ke)以埋在產(chǎn)品的各個(gè)功能點(diǎn)等待用戶(hù)的發(fā)現。

使?用遮罩式(╯‵□′)╯引導時(shí)要注意兩點(diǎn)：

首次使用的全局引導信息量不應過(guò)大，否則就像滑動(dòng)展示引導一樣會(huì )讓用戶(hù)失去耐心；使用過(guò)程中的引導要保證是在用戶(hù)需要幫助時(shí)出現，否則就不是引導而是干擾了。

3. 彈窗式引導

這也是一??種強引導，指在用戶(hù)即將使用到某功能或某交互方式時(shí)跳出彈窗予以解釋并介紹相應的操作。這里要注意的是彈窗觸發(fā)的條件要清晰，時(shí)機要得當。

比如知乎在用戶(hù)打開(kāi)某答案后會(huì )彈窗提示“左劃切換回答”。這種即時(shí)的提醒方式在用戶(hù)即將使用到某功能時(shí)提供相應的操作引導，對用戶(hù)而言是切實(shí)的幫助，有利于提升產(chǎn)品的用戶(hù)體驗。但彈窗雖然內容量不大，但仍會(huì )打斷用戶(hù)原有的使用流程，在體驗ヽ(′ー｀)ノ上仍有改進(jìn)的空間。

4. 氣泡/浮層式引導

這是一( ?ヮ?)種量級輕但是目的性很強的引導方式，一般是結合文案的半透明浮層的設計模式，顯示3-5秒后自動(dòng)消失，對(????)用戶(hù)的干擾較小。

大部分浮層模式帶有指向性的箭頭，可以用來(lái)提示重??要功能或者隱藏操作。這種引導方式下，用戶(hù)可以自行選擇是否進(jìn)行相應操作，而且即使不進(jìn)行任何操作對當前進(jìn)程也沒(méi)有影響。氣泡/(′▽?zhuān)?浮層式(shi)引導對用戶(hù)的干擾小，引導強度也較小，偏向于內容、功能及使用方式上的提醒。

這是將幫助引導直接嵌入到??界面里，在需要引導的時(shí)候起到引導幫助的作用，如某瀏覽器在進(jìn)入主頁(yè)???以及新建標簽頁(yè)后會(huì )在沒(méi)有添加網(wǎng)頁(yè)九宮格位置上顯示空白，并加以數字和“點(diǎn)擊添加你喜歡的網(wǎng)站”的文字提示，以此引導用戶(hù)。

內嵌式引導設計巧妙，在不打擾用戶(hù)的情況下給予用戶(hù)可能需要的操作提示，相較于前面介紹的幾種方式，對用戶(hù)的(de)干擾最小。

二、新手引導設計反思

唐·諾曼在《設計心理學(xué)3·情感設計》中寫(xiě)道：設計分為三個(gè)層次：本能、行為和反思。

本能層次的設計指的是產(chǎn)品外觀(guān)，是第一印象形成的基礎；行為層次的設計指的是產(chǎn)品使用過(guò)程中的效率和愉悅感，著(zhù)重于可用性和易用性；反思層??次的設計指的是產(chǎn)品的合理性和智能性，是體驗思想和情感的完全交融。

對應到新手引導的設計上，筆者認為：

本能層次的設計要求新手引導有良好的UI，包括提示的形式、配色、圖案和文字等等；行為層次的設計要求新手引導出現的時(shí)機要恰當，保證引導的出現正好解決了用戶(hù)的燃眉之急；反思層次的設計要求新手引導要有特色，無(wú)論是設計別具一格還是形式標新立異，能給用戶(hù)留下印象，即使不再使用想起來(lái)也會(huì )會(huì )心一笑。

由前文的舉例可以看出，新手引導的強度(′?｀)和其對用戶(hù)的(de)干擾程度是正相關(guān)的。這并不難理解，畢竟要讓用戶(hù)看到引導，就必須打斷他，讓他從當前的活動(dòng)轉向引導的內容。無(wú)論是使用前的引導，還是使用過(guò)程中的引導，一定程度上??都“阻礙”了(le)用戶(hù)的使用，用戶(hù)體驗并不好。

那么(me)怎么做才能兼顧引導強度與用戶(hù)體驗，設計出情感設計三個(gè)層次上都優(yōu)秀的新手引導呢？

筆者認為要深入理解用戶(hù)真正的需求，增加巧妙引導，減少“強行”引導。

有研究表明(ming)：即使一個(gè)簡(jiǎn)短的分步解讀（3步）或者一個(gè)視頻演示也會(huì )讓用戶(hù)產(chǎn)生困擾，并不能提高他們參與的積極性。測試顯示用戶(hù)會(huì )跳過(guò)或者直接忽略對話(huà)框/分步解讀/視頻演示/透明層解讀。有被測者說(shuō)道：“我只是想進(jìn)入并開(kāi)始探索這個(gè)APP而已?！?/p>

針對這種情況，這位研究者給出了5個(gè)建議，以期以最小的用戶(hù)體驗損失來(lái)達??到最大的新手??引導效果。筆者認為如果說(shuō)(???)情感設計(ji)的三個(gè)層次是內功心法，那這5個(gè)建議就是武功招式?，F摘錄如下：

盡量少用文字；需要的時(shí)候再出現；讓它有趣；讓用戶(hù)邊玩邊學(xué)；傾聽(tīng)你的用戶(hù)。規則1：盡量少用文字

用文字來(lái)介紹產(chǎn)品詳盡、準確，但信息單一、節奏太慢。

用戶(hù)本能上偏愛(ài)看圖，且沒(méi)什么耐心，大段的文字將會(huì )被ヽ(′ー｀)ノ直接忽略。用圖片和動(dòng)作來(lái)代替文字說(shuō)明，跟用戶(hù)互動(dòng)起來(lái)，讓用戶(hù)邊用邊學(xué)。

左圖的引導為純文字介紹，9頁(yè)信??息讓??用戶(hù)只看不做，是對用戶(hù)耐心的一次考驗；右圖采用了文字、圖標和動(dòng)效示(T_T)意圖，并引導用戶(hù)親自動(dòng)手操作，用戶(hù)接受起來(lái)就更容易些。

規則2：需要(yao)的時(shí)候再出現

提前加載教程，一開(kāi)始??就告知用戶(hù)所有的事情，他們?會(huì )被困在大量的信息中，更重要的是這對用戶(hù)當下的活動(dòng)并沒(méi)有什么幫助，在行為層次(′_ゝ`)上是失敗的。

可以考慮在用戶(hù)需要的時(shí)候，提供簡(jiǎn)短、易理解的信息，而不要讓用戶(hù)在一開(kāi)始就掩埋在大量信息中。

左圖的APP在用戶(hù)打開(kāi)后就準備了一場(chǎng)11頁(yè)引導組成的講座；右圖的APP在用戶(hù)打開(kāi)后就進(jìn)入使用界面，引導用戶(hù)創(chuàng )建第一個(gè)list 。

規則3：讓它有趣

左圖的引導采用了透明層注釋和趣味化字體，但是5頁(yè)純文字教程看起來(lái)仍像是一場(chǎng)講座。

而右圖的APP在第一步被打開(kāi)時(shí)沒(méi)有任何說(shuō)明性的文字，打開(kāi)Flipboard之后，頁(yè)面的下半部分會(huì )調皮地向上翻轉一下，在翻轉回來(lái)前，會(huì )讓用戶(hù)看到一些內容。之后，用戶(hù)可能會(huì )向上翻轉以查看隱藏的內容，如果用戶(hù)沒(méi)有翻轉，則會(huì )看到一個(gè)提示“向上翻轉以繼續“。一邊翻轉，一邊探索??，這個(gè)過(guò)程加強了新手用戶(hù)對于這個(gè)特殊手勢的使用(yong)，有趣且有價(jià)值。而且這種新穎的引導方式在千篇一律的新手引導中標新立異(???)，讓用戶(hù)在學(xué)(xue)會(huì )之后想起也會(huì )覺(jué)得有趣，說(shuō)不定還會(huì )向朋友炫耀，是反思層面上的優(yōu)秀設計。

規則4：讓用戶(hù)邊用邊學(xué)

規則5：傾聽(tīng)你的用戶(hù)

適當的用戶(hù)測試(shi)將會(huì )??揭示用戶(hù)在使用過(guò)程中遇到的障礙。在測試過(guò)程中，你需要觀(guān)察用ヽ(′▽?zhuān)?ノ戶(hù)在哪兒犯了錯、對哪兒存在疑惑，傾聽(tīng)他們在使用過(guò)程中的發(fā)言。等到測試結束后，再進(jìn)行一場(chǎng)深入的訪(fǎng)談。因為如果在使用過(guò)程中進(jìn)行訪(fǎng)談，你可能會(huì )不自覺(jué)地引導他們去說(shuō)你想聽(tīng)到的答案。

通過(guò)用戶(hù)測試，Snap Payroll的設計師們最終得出：循序漸進(jìn)的引??導或者在使用過(guò)程中給予相關(guān)提示，得到的用戶(hù)反饋是最好的。這個(gè)結論，在Retail(′-ι_-｀)MeNot的4輪用戶(hù)測試中也得到了驗證。

總結

好的設計是不需要(yao)新手引導的，這句話(huà)在一定程度上是有道理的。

雖然我們可以設計新手引導來(lái)幫助新用戶(hù)，但更重要的是整個(gè)產(chǎn)品的設計要清晰易??懂，易學(xué)易記。這樣既能減少新用戶(hù)使用產(chǎn)品時(shí)的困難，減輕新手引導設計的壓力，又能提高用戶(hù)使用產(chǎn)品的熱情，畢竟這才是用戶(hù)體驗的根本。

參考文章淺析產(chǎn)品新手引導設計新手引導???設計，這樣改善太棒了！來(lái)設計個(gè)新手引導吧！手機游戲新手引導的設計研究怎么設計移動(dòng)應用的新手引導更好？網(wǎng)站產(chǎn)品功能設計：如何(?????)設計新手用戶(hù)引導[譯文]反思手機app使用教程(cheng)的設計：哪些模式才真的有用？新用戶(hù)引導設計模式更生層次的交互設計——情感化設計《設計心理學(xué)3：情感設計》Donald Arthur Norman / 何笑梅 / 歐秋杏 / 中信??出版社《移動(dòng)應用UI設計模式》Theresa Neil / 田原 / 人民郵電出版社