轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   www.cqzjtgb.com  )是一家專(zhuān)注而深入的設(shè)計(jì)機(jī)構(gòu) ，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來(lái)源：http://www.shejidaren.com/

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，   請(qǐng)點(diǎn)這里

在手機(jī)產(chǎn)品的設(shè)計(jì)過(guò)程中，由于手機(jī)界面的承載能力有限，產(chǎn)品功能的不斷膨脹，必須要在用戶(hù)打開(kāi)應(yīng)用之后告知他某些新奇的功能，引導(dǎo)他完成某些主要任 務(wù)流程，讓用戶(hù)不至于迷失在陌生應(yīng)用中不知所措。幫助用戶(hù)快速掌握應(yīng)用的使用方法，體驗(yàn)到應(yīng)用的樂(lè)趣，新手引導(dǎo)成了一個(gè)必須考慮的設(shè)計(jì)環(huán)節(jié)。

用戶(hù)引導(dǎo)的直接目標(biāo)是幫助用戶(hù)更好的使用產(chǎn)品，終極目標(biāo)是提升用戶(hù)滿意度。雖然，大多數(shù)情況下，我們可以通過(guò)合理的設(shè)計(jì)，盡可能的簡(jiǎn)化功能，讓用戶(hù) 無(wú)需引導(dǎo)和幫助，就可以完成必要的任務(wù)。但是實(shí)際上，手機(jī)產(chǎn)品的限制和對(duì)強(qiáng)大功能的追求，導(dǎo)致這個(gè)目標(biāo)很難達(dá)到，因此越來(lái)越多的應(yīng)用開(kāi)始使用用戶(hù)引導(dǎo)來(lái)幫 助用戶(hù)快速熟悉產(chǎn)品。

一、文字說(shuō)明類(lèi)

第一類(lèi)最簡(jiǎn)單的用戶(hù)引導(dǎo)方式，就是文字說(shuō)明類(lèi)。用文字描述的方式，幫助用戶(hù)理解產(chǎn)品的功能和所需要執(zhí)行的操作。文字說(shuō)明類(lèi)用戶(hù)引導(dǎo)如下圖的幾個(gè)例子：

從左到右依次是Memento、Instapaper和Jamie Oliver

Menento是一個(gè)日記程序，當(dāng)你沒(méi)有給日記增加tag的時(shí)候，這里就會(huì)有文字說(shuō)明，告訴你tag是用來(lái)瀏覽和搜索的，可以在創(chuàng)建和編輯日記的時(shí) 候創(chuàng)建。告訴你可以把好友加為tag，可以把地理位置加為tag，可以把事件加為tag，可以創(chuàng)建自定義tag；Instapaper是一個(gè)閱讀工具，當(dāng) 你首次打開(kāi)應(yīng)用，沒(méi)有文章的時(shí)候，這個(gè)頁(yè)面會(huì)有文字說(shuō)明，告訴你你可以通過(guò)朋友、作者、瀏覽器找到可閱讀的文章。當(dāng)你通過(guò)瀏覽器書(shū)簽或者Email發(fā)送的 方式增加文章到Instapaper后，文章會(huì)顯示在這里；Jamie Oliver是一個(gè)美食工具，如果你沒(méi)有創(chuàng)建美食購(gòu)物清單的時(shí)候，這個(gè)頁(yè)面會(huì)文字提醒你改如何增加Shopping list。

適用情況：

聰明如你，肯定已經(jīng)發(fā)現(xiàn)了，這里提到的例子都是出現(xiàn)在無(wú)數(shù)據(jù)的時(shí)候。無(wú)數(shù)據(jù)的時(shí)候，是文字說(shuō)明一個(gè)很重要的出現(xiàn)場(chǎng)景。很多設(shè)計(jì)師會(huì)忽略無(wú)數(shù)據(jù)時(shí)的界面設(shè)計(jì)，產(chǎn)品人員也會(huì)忽略無(wú)數(shù)據(jù)的時(shí)候，該怎樣引導(dǎo)用戶(hù)使用產(chǎn)品，導(dǎo)致用戶(hù)看到空空的面板，拂塵而去。

其實(shí)，文字說(shuō)明也可以用在超過(guò)5s的啟動(dòng)界面(Splash Screens)上 ，也可以用在某個(gè)操作按鈕的下面，也可以用在某段數(shù)據(jù)加載的彈出框中。它可以用在你能想到的任何地方，只要是合情合理的設(shè)計(jì)需求。

缺點(diǎn)：

當(dāng)然，文字說(shuō)明的劣勢(shì)也顯而易見(jiàn)，長(zhǎng)篇累牘的贅述功能，很少有人能耐心的看完，何況枯燥的說(shuō)明書(shū)一向是Apple產(chǎn)品所反感的東西，所以文字說(shuō)明要慎重，不要濫用。

設(shè)計(jì)指南：

• 要使用用戶(hù)語(yǔ)言而不是程序語(yǔ)言
• 在無(wú)數(shù)據(jù)的時(shí)候可以給出文字說(shuō)明
• 不要長(zhǎng)篇累牘，要簡(jiǎn)明扼要
• 可以利用等待的時(shí)間用文字說(shuō)明功能
• 可以用文字說(shuō)明描述復(fù)雜的功能操作

二、功能提醒類(lèi)

因?yàn)槟承┕δ茉O(shè)計(jì)成ICON不利于識(shí)別，某些功能隱藏在手勢(shì)操作之后不易察覺(jué)，某些功能是產(chǎn)品主打功能需要用戶(hù)知曉，在這種情況下，越來(lái)越多的應(yīng)用采用功能提醒類(lèi)的浮層做用戶(hù)引導(dǎo)，如：

從做到右依次是Tweetbot、QQ通訊錄和Talkbox

Tweet用帶箭頭的小浮層告知用戶(hù)，點(diǎn)擊navigation bar可以切換關(guān)注列表；QQ通訊錄用帶用動(dòng)效的小浮層提醒用戶(hù)，向左滑動(dòng)可以展現(xiàn)右側(cè)隱藏的屏幕內(nèi)容；Talkbox用帶Gif小動(dòng)畫(huà)的浮層告訴用戶(hù)，把收集放到耳朵旁可以從耳機(jī)收聽(tīng)。

使用場(chǎng)景：

用來(lái)告知重要功能、不易識(shí)別的功能圖標(biāo)、不易察覺(jué)的隱藏操作

缺點(diǎn)：

有時(shí)候需要提醒的太多了，往往無(wú)從下手。如果你的應(yīng)用沒(méi)有清晰的重要功能，還是小心設(shè)計(jì)，慎用提醒的好。因?yàn)槟闾嵝训目赡懿皇怯脩?hù)需要的，讓新手用 戶(hù)無(wú)所適從，老手用戶(hù)覺(jué)得你太過(guò)膚淺。不過(guò)還好這類(lèi)提醒不會(huì)打斷用戶(hù)的操作，也不會(huì)強(qiáng)迫用戶(hù)一定看完，但是也正是因?yàn)檫@類(lèi)提醒稍縱即逝，也很容易不小心錯(cuò) 過(guò)，導(dǎo)致之后再也無(wú)法查看，所以要謹(jǐn)慎的設(shè)置一個(gè)重復(fù)頻率，避免被漏看。

設(shè)計(jì)指南：

• 不要打斷正在進(jìn)行的操作
• 判斷需要提醒的時(shí)機(jī)
• 持續(xù)3~5s自動(dòng)消失
• 可以重復(fù)出現(xiàn)3次左右
• 用來(lái)提醒隱藏的操作或重要的功能

三、操作引導(dǎo)類(lèi)

操作引導(dǎo)類(lèi)的用戶(hù)引導(dǎo)方式被大量應(yīng)用與游戲和SNS產(chǎn)品中，如果是設(shè)置項(xiàng)很多的復(fù)雜產(chǎn)品，也必須有合理的操作引導(dǎo)。操作引導(dǎo)分為強(qiáng)制性的和非強(qiáng)制性 的。強(qiáng)制性的主要是注冊(cè)、驗(yàn)證、激活相關(guān)流程，不滿足條件無(wú)法滿足安全性；非強(qiáng)制性的則多是鼓勵(lì)填寫(xiě)完善的資料或者鼓勵(lì)完成某個(gè)任務(wù)的，這類(lèi)引導(dǎo)最好給予 一定的激勵(lì)，如積分、徽章、等級(jí)等等，至少要有一個(gè)”恭喜你，成功了”之類(lèi)的心里滿足暗示。具體案例見(jiàn)下圖：

從左到右依次是Albumphoto、Gowalla和With。

Albumphoto引導(dǎo)新用戶(hù)新建一個(gè)相冊(cè)；Gowalla引導(dǎo)新用戶(hù)創(chuàng)建一個(gè)簽到信息并分享圖片給好友；With引導(dǎo)用戶(hù)綁定Twitter賬號(hào)用以分享照片。如果是復(fù)雜的任務(wù)流程，每一步都要給新用戶(hù)講清楚，這一步處于哪一個(gè)環(huán)節(jié)，該怎么操作，有什么作用。

操作引導(dǎo)需要一定的操作激發(fā)，在一定的時(shí)機(jī)出現(xiàn)，有一定的重復(fù)頻率，并定義一定的引導(dǎo)樣式。

使用場(chǎng)景：

引導(dǎo)用戶(hù)執(zhí)行操作、引導(dǎo)用戶(hù)登錄注冊(cè)綁定賬號(hào)、引導(dǎo)用戶(hù)完善資料、引導(dǎo)用戶(hù)導(dǎo)入關(guān)系、引導(dǎo)用戶(hù)分享應(yīng)用給好友等等

缺點(diǎn)：

有時(shí)候有點(diǎn)過(guò)于強(qiáng)勢(shì)的嫌疑，用戶(hù)不一定真的需要這種程度的引導(dǎo)，不如只有一個(gè)聚光燈聚焦在重要操作上來(lái)的直接，否則所有的App都像游戲客戶(hù)端發(fā)展了。

設(shè)計(jì)指南：

• 可以引導(dǎo)用戶(hù)執(zhí)行主要操作
• 不要強(qiáng)迫用戶(hù)執(zhí)行操作
• 如果任務(wù)是多步驟要關(guān)注每一步的設(shè)計(jì)
• 主要功能可以在設(shè)計(jì)上區(qū)別于其他

四、操作示意型

操作示意型新手引導(dǎo)，往往是采用一段簡(jiǎn)單的動(dòng)畫(huà)，或是把功能顯示出來(lái)，然后在平滑的移動(dòng)到屏幕外邊；或是把可點(diǎn)擊的按鈕做一個(gè)點(diǎn)擊后的效果動(dòng)畫(huà)出 來(lái)，或是把某些用戶(hù)預(yù)期要執(zhí)行的操作提前演示出來(lái)。我第一次見(jiàn)到不錯(cuò)的操作示意型新手引導(dǎo)是在Nokia N900上，Maemo操作系統(tǒng)，用一個(gè)小亮點(diǎn)模擬手指點(diǎn)擊在一個(gè)操作按鈕上的效果。

上圖從左到右依次是Naver、Bump和新浪微博。

Naver的搜索類(lèi)型切換是下拉搜索框就會(huì)出現(xiàn)的，首次啟動(dòng)的時(shí)候，搜索框處于下拉狀態(tài)，提醒用戶(hù)下拉就可以看到這些功能，然后自動(dòng)隱藏；Bump 則是在起始界面上，用動(dòng)畫(huà)的形式告知用戶(hù)，碰一碰手機(jī)就可以傳輸數(shù)據(jù)了；而新浪微博在首次加載數(shù)據(jù)的時(shí)候，會(huì)給出一個(gè)手勢(shì)+下拉的引導(dǎo)，告知用戶(hù)下拉就可 以刷新數(shù)據(jù)了。

這些示意，用輕松淺顯的手法，就傳達(dá)給用戶(hù)新鮮的功能好趣味的用法，比生硬的文字或者不合時(shí)宜的彈層都來(lái)得體貼，鼓勵(lì)設(shè)計(jì)師多多嘗試這種方式。

使用場(chǎng)景：

復(fù)雜或重要操作的動(dòng)畫(huà)告知

劣勢(shì)：

設(shè)計(jì)實(shí)現(xiàn)麻煩，成本略高

設(shè)計(jì)指南：

• 注意動(dòng)畫(huà)持續(xù)的時(shí)間和出現(xiàn)的時(shí)機(jī)
• 多用來(lái)說(shuō)明隱藏操作或功能
• 不要影響主要任務(wù)流程

五、說(shuō)明書(shū)類(lèi)

不知道從什么時(shí)候開(kāi)始，說(shuō)明書(shū)式的用戶(hù)引導(dǎo)用開(kāi)始流行起來(lái)了，這種貌似比較傳統(tǒng)的手段，能更全面的展示產(chǎn)品的功能和使用方法，尤其是適用于產(chǎn)品的更 新說(shuō)明，本次版本迭代了哪些功能，進(jìn)行了哪些改進(jìn)，讓用戶(hù)一進(jìn)來(lái)就知曉，知道自己所耗費(fèi)流量耗費(fèi)時(shí)間更新應(yīng)用是物有所值的。單頁(yè)的說(shuō)明書(shū)類(lèi)引導(dǎo)案例如下：

從左到右依次是Google客戶(hù)端、Pull Time和today

Google會(huì)在一頁(yè)內(nèi)給出多個(gè)問(wèn)號(hào)，點(diǎn)擊問(wèn)號(hào)查看該區(qū)域所承載的操作及執(zhí)行方法；Pull Time用更直觀的方法來(lái)表示這款交互出類(lèi)拔萃的產(chǎn)品到底該怎樣使用；而Today則用一頁(yè)圖配文的說(shuō)明來(lái)告知本版本更新了哪些內(nèi)容。

顯而易見(jiàn)，一頁(yè)能承載的內(nèi)容有限，重點(diǎn)也不是特別突出，為了更立體的講述產(chǎn)品，出現(xiàn)了一種演示型的新手引導(dǎo)，見(jiàn)下面一個(gè)案例：

Layar用一系列動(dòng)畫(huà)+文字的方式，即交代了產(chǎn)品能做什么，有交代了使用場(chǎng)景和使用方法。

為了每次更新版本都能對(duì)用戶(hù)有個(gè)更好的交代，很多應(yīng)用開(kāi)始采用多頁(yè)的更新說(shuō)明或使用介紹，見(jiàn)下面一個(gè)案例：

Weico的這次改版所采用的新手引導(dǎo)方式，絕對(duì)是稱(chēng)得上讓人驚艷級(jí)別的，用了6頁(yè)，詳細(xì)的介紹了虛擬形象功能，簡(jiǎn)單的提到了微博曬心情、Gif直 接播放、圖片進(jìn)度提醒等等次級(jí)功能。雖然從功能上來(lái)講，我并不一定認(rèn)同虛擬形象，但是從引導(dǎo)上來(lái)講，實(shí)在是太有愛(ài)了，不愧是設(shè)計(jì)公司。

使用場(chǎng)景：

產(chǎn)品更新說(shuō)明、復(fù)雜產(chǎn)品用戶(hù)教育

劣勢(shì)：

成本略高、具有強(qiáng)迫性

設(shè)計(jì)指南：

• 告訴用戶(hù)現(xiàn)在處于指南的哪個(gè)位置
• 每個(gè)頁(yè)面只講清楚一個(gè)功能
• 最好可以選擇性的跳過(guò)
• 只能出現(xiàn)一次

也許紛繁復(fù)雜的各種引導(dǎo)，在幫助新用戶(hù)快速熟悉應(yīng)用的同時(shí)，也讓老用戶(hù)不厭其煩的反復(fù)瞻仰一些已經(jīng)耳熟能詳?shù)墓δ?，尤其是某些?yīng)用還在應(yīng)用內(nèi)教育用 戶(hù)怎樣使用系統(tǒng)級(jí)別的功能，就更顯得累贅。曾經(jīng)電腦軟件的幫助文檔也許是一個(gè)很好的思路，當(dāng)你有不明確的地方的時(shí)候，點(diǎn)一下幫助，快速查閱遇到障礙的問(wèn) 題，一切迎刃而解。iPhone里也有預(yù)設(shè)的幫助圖標(biāo)，可是被利用的情況不是很好。

當(dāng)然，我更崇尚的，不是以上那些簡(jiǎn)單直白的引導(dǎo)，而是一種更簡(jiǎn)單更直白的引導(dǎo)，類(lèi)似于深澤直人的無(wú)意識(shí)設(shè)計(jì)，讓用戶(hù)不知不覺(jué)間受到了某種操控，不自覺(jué)的產(chǎn)生某些行為。這就需要設(shè)計(jì)者懂一些心理學(xué)或營(yíng)銷(xiāo)學(xué)的東西了。

一、數(shù)字引導(dǎo)

數(shù)字引導(dǎo)設(shè)計(jì)幾乎都是在利用和發(fā)掘用戶(hù)的心理影響用戶(hù)行為。在很多時(shí)候，這種數(shù)字的激勵(lì)方式確實(shí)對(duì)用戶(hù)產(chǎn)生好的引導(dǎo)，讓用戶(hù)按照設(shè)計(jì)的軌跡行動(dòng)。但是數(shù)字引導(dǎo)并不是萬(wàn)能的，在一些情景下這種引導(dǎo)設(shè)計(jì)如果不當(dāng)?shù)脑?，很可能?huì)產(chǎn)生負(fù)面效果。

從左到右依次是街旁、淘寶和QQ郵箱Wap版

街旁用幾條未讀消息、幾個(gè)好友請(qǐng)求來(lái)引導(dǎo)用戶(hù)去查看新消息；聚劃算采用了一個(gè)非常有緊迫感的倒計(jì)時(shí)的設(shè)計(jì)，旁邊緊跟在一個(gè)參團(tuán)按鈕，同時(shí)還刻意把價(jià) 格和折扣標(biāo)紅，顯示出多少人已購(gòu)買(mǎi)，這些數(shù)字共同營(yíng)造了一種，時(shí)間緊迫、折扣低廉、多掙?duì)帗尩募傧?，讓用?hù)快速抉擇去購(gòu)買(mǎi)一個(gè)商品；QQ郵箱用很多紅色氣 泡的設(shè)計(jì)，一下子把焦點(diǎn)聚集在你有未讀消息的模塊上。

二、小秘書(shū)類(lèi)

不知道源頭是哪里，越來(lái)越多的應(yīng)用開(kāi)始增加小秘書(shū)、XX客服、XX產(chǎn)品團(tuán)隊(duì)之類(lèi)的官方賬號(hào)用于用戶(hù)引導(dǎo)了。這種方式有明顯的好處就是把冷冰冰的機(jī)械引導(dǎo)變成了有血有肉的擬人化引導(dǎo)。小秘書(shū)會(huì)在你開(kāi)啟應(yīng)用后第一時(shí)間告訴你，你可以做一些什么，非常體貼。如下面這些應(yīng)用：

從左到右依次是微信、米聊、TalkBox

這三個(gè)應(yīng)用都屬于IM類(lèi)的，在你的好友里，多出一個(gè)系統(tǒng)賬號(hào)來(lái)，用來(lái)跟你溝通，教你使用應(yīng)用。當(dāng)然都還不夠智能，淪為廣告發(fā)布渠道，而不是真的答疑解惑的小秘書(shū)。

三、內(nèi)容教育

內(nèi)容教育的意思是，在用戶(hù)使用應(yīng)用之初，應(yīng)用內(nèi)可能沒(méi)有數(shù)據(jù)也沒(méi)有用戶(hù)，用戶(hù)不知道應(yīng)用能帶給自己什么好處。這時(shí)候，閱讀類(lèi)的客戶(hù)端就會(huì)增加基本預(yù) 設(shè)的書(shū)籍，比如產(chǎn)品說(shuō)明書(shū)；GTD類(lèi)的客戶(hù)端就會(huì)增加幾個(gè)待辦事項(xiàng)，用待辦事項(xiàng)的方式告知你可以做什么，怎么做；社交類(lèi)的就會(huì)給你預(yù)設(shè)幾個(gè)好友，你看著他 們都做了什么，就知道自己該干什么了；搜索類(lèi)的可能會(huì)給出搜索熱詞，你看到他們?cè)趺慈ニ阉?，自己就知道該輸入什么樣的?nèi)容了。

四、文字口號(hào)

不要以為這種方式老土或者過(guò)時(shí)，這種方式是最行之有效的辦法。如果你告訴用戶(hù)”好的主廚最?lèi)?ài)做的菜”，他就會(huì)選擇那個(gè)菜；如果你告訴用戶(hù)”優(yōu)秀的人 都會(huì)管理自己的消費(fèi)計(jì)劃”，他就會(huì)給自己制定消費(fèi)計(jì)劃；如果你告訴用戶(hù)”優(yōu)秀的相冊(cè)至少有10張照片”，那么用戶(hù)就會(huì)湊夠十張照片上傳，他們渴望被承認(rèn)， 你如果在他的潛意識(shí)里植入這種優(yōu)秀的意識(shí)，他會(huì)為此買(mǎi)單的。

五、激勵(lì)機(jī)制

好的引導(dǎo)是讓用戶(hù)自己探索發(fā)現(xiàn)，獲得樂(lè)趣。樂(lè)趣哪里來(lái)呢？一方面是用戶(hù)發(fā)現(xiàn)了隱藏操作，自我成就感膨脹，一方面可能是，用戶(hù)完成了某項(xiàng)任務(wù)，系統(tǒng)贈(zèng)與用戶(hù)某些獎(jiǎng)勵(lì)。如Foursquare當(dāng)初的積分、市長(zhǎng)和徽章。

記得米聊有一個(gè)頁(yè)面做的特別的好，就是個(gè)人名片頁(yè)，當(dāng)你資料填寫(xiě)不完善的時(shí)候，它沒(méi)有強(qiáng)硬的引導(dǎo)你去填寫(xiě)，而是在界面上放了一個(gè)進(jìn)度條”完成度 10%”，并且告訴你，完成度越高，越容易找到更多朋友，于是在那個(gè)沮喪的10%面前，我不得不為了讓它好看一點(diǎn)，添加了更多的資料，直到它顯示100% 為止，就像完成了一項(xiàng)偉大的任務(wù)。

針對(duì)新手引導(dǎo)，先寫(xiě)這么多，歡迎各路豪杰批評(píng)指正……^^