1、引導(dǎo)頁

引導(dǎo)頁的使用在PC端常見于安裝軟件的過程中，在安裝時(shí)，可以在進(jìn)度條的上方看見滾動(dòng)播放的產(chǎn)品介紹，每一頁都會(huì)針對(duì)某一個(gè)產(chǎn)品的特性進(jìn)行宣傳，讓用戶在使用產(chǎn)品前，對(duì)產(chǎn)品的功能有一個(gè)大致的了解。

如今移動(dòng)端的設(shè)計(jì)，同樣運(yùn)用了這個(gè)方式，但作用不僅限于產(chǎn)品的介紹，同時(shí)還涉及了品牌文化的宣傳、烘托氛圍以及鼓勵(lì)用戶打開相關(guān)配置的作用。比如產(chǎn)品的介紹，設(shè)計(jì)這種引導(dǎo)頁時(shí)，因?yàn)閷?dǎo)覽頁面的數(shù)量不能太多，挑選的特性應(yīng)該是這個(gè)產(chǎn)品的核心特點(diǎn)。能使用圖片說明的情況下，優(yōu)先使用圖片，因?yàn)閳D片能夠涵蓋的信息量是要比文字大很多的。

曾看過一位設(shè)計(jì)師總結(jié)這類引導(dǎo)頁的設(shè)計(jì)方法，方法還算通用，稱為3X3法，就是用三個(gè)頁面解釋三個(gè)問題：what、why以及how。

What?—你的產(chǎn)品是干什么的？

Why?—你的產(chǎn)品能帶給用戶什么？

How?—是怎么來達(dá)到這個(gè)目標(biāo)的？

3X3法，就是用三個(gè)頁面解釋三個(gè)問題：what、why以及how

上圖中的例子就來自于這位設(shè)計(jì)師文中列舉的案例。

而烘托氛圍的比如airbnb的這個(gè)例子，讓用戶體會(huì)到溫馨的感覺，對(duì)于這個(gè)產(chǎn)品有了更多感性的認(rèn)識(shí)。

airbnb的這個(gè)例子，讓用戶體會(huì)到溫馨的感覺，對(duì)于這個(gè)產(chǎn)品有了更多感性的認(rèn)識(shí)

最后一點(diǎn)鼓勵(lì)用戶打開相關(guān)配置的作用，這個(gè)在工具類產(chǎn)品中使用比較多，因?yàn)閷?duì)于很多工具類產(chǎn)品，是否獲得通知提醒或則定位的權(quán)限對(duì)于這個(gè)產(chǎn)品的體驗(yàn)有非常大的影響。比如之前看過一篇hopper設(shè)計(jì)師寫的思考，hopper是一款實(shí)時(shí)分析機(jī)票價(jià)格、告訴用戶何時(shí)購票最為劃算的軟件。所以通知對(duì)于觀望功能極其重要，如果用戶不允許Hopper發(fā)送通知，他們就無法在價(jià)格達(dá)到低價(jià)區(qū)間時(shí)收到購票建議信息，觀望功能就會(huì)失去使用價(jià)值。因此設(shè)計(jì)師將引導(dǎo)頁設(shè)計(jì)成了如下的樣式，用戶打開通知功能的幾率大大增加。

hopper設(shè)計(jì)師將引導(dǎo)頁設(shè)計(jì)成了如上的樣式，用戶打開通知功能的幾率大大增加

如果想要查找更多關(guān)于引導(dǎo)頁的設(shè)計(jì)，可以在dribble或則pinterest上搜walkthrough。

2、覆蓋層和提示窗口

覆蓋層式的設(shè)計(jì)是專門針對(duì)于移動(dòng)端而產(chǎn)生的，如下圖

覆蓋層式的設(shè)計(jì)

移動(dòng)端的屏幕空間十分寶貴，所以采用覆蓋層的方式可以節(jié)約空間，在用戶第一次使用某個(gè)界面時(shí)，通過覆蓋層展示關(guān)鍵的幾個(gè)工具的使用說明，幫助用戶快速的上手使用。

這種方式需要注意解釋的功能數(shù)量不能過多，以免用戶因?yàn)樾畔⑦^載而導(dǎo)致事半功倍。同時(shí)給予用戶隨時(shí)跳出的權(quán)利，一般的做法是點(diǎn)擊任意位置即可跳出。

而提示窗口的使用其實(shí)和覆蓋層類似，當(dāng)用戶第一次打開了某個(gè)頁面或則某個(gè)功能時(shí)，彈出提示窗口，告訴用戶當(dāng)前頁面的使用方法。比如enlight，這是一款非常強(qiáng)大的照片處理軟件，提供的功能很多，所以提供適當(dāng)?shù)膸椭鞘种匾?。如下圖所示，enlight在用戶第一次使用某個(gè)功能時(shí)會(huì)彈出提示窗口，通過gif圖片的形式告知用戶這個(gè)功能可以達(dá)成怎樣的效果。

enlight在用戶第一次使用某個(gè)功能時(shí)會(huì)彈出提示窗口，通過gif圖片的形式告知用戶這個(gè)功能可以達(dá)成怎樣的效果

3、模板

模板就好比服裝店里的塑膠模特們，店員們將精心搭配好的服裝穿在模特身上，展示給購物者看，不知道如何搭配的購物者，可以通過這些搭配的模板來選購。當(dāng)然對(duì)于早已有著自己的搭配風(fēng)格的購物者而言，這些模板是可以忽略的，這就好比高級(jí)用戶，他們?cè)缫阎廊绾问褂媚愕漠a(chǎn)品，并且還能將產(chǎn)品的功能利用到很多不常見的地方。

模板的案例比如我們經(jīng)常使用的word，新建一個(gè)文檔時(shí)，word會(huì)提供很多模板。

word提供了很多模板

還有像clear這類效率類軟件，為了讓用戶更快的了解到產(chǎn)品可以做些什么，在剛使用的時(shí)候也提供了很多例子，如下圖所示。

clear在剛使用的時(shí)候也提供了很多例子

4、輸入或操作區(qū)域提示

除了上面說的各種一次性的幫助方式以外，這一條的特點(diǎn)是具有持續(xù)性，伴隨著各種輸入和操作過程中。在PC端中，有一種形式十分常見，就是當(dāng)鼠標(biāo)移動(dòng)到相應(yīng)的控件上時(shí)，懸停后會(huì)出現(xiàn)相關(guān)的解釋性文字，但在移動(dòng)端由于交互方式的限制這種方式無法實(shí)現(xiàn)。所以采用的是靜止的文字提示，提示用戶操作當(dāng)前區(qū)域需要注意的地方。比如上面的例子中的搜索框以及評(píng)價(jià)框中的提示性文字，當(dāng)輸入了文字以后，提示性文字就消失。

搜索框以及評(píng)價(jià)框中的提示性文字，當(dāng)輸入了文字以后，提示性文字就消失

操作區(qū)域的提示，典型的例子比如ios中的系統(tǒng)設(shè)置，如上圖，在每一個(gè)操作區(qū)域旁邊都用提示性文字解釋了這項(xiàng)操作將會(huì)導(dǎo)致什么樣的結(jié)果，給不熟悉的用戶可以預(yù)知操作的后果。

IOS的設(shè)置里在每一個(gè)操作區(qū)域旁邊都用提示性文字解釋了這項(xiàng)操作將會(huì)導(dǎo)致什么樣的結(jié)果

5、向?qū)?/h3>

向?qū)В╳izard）是微軟發(fā)明的一個(gè)習(xí)慣用法，在PC端就十分的常見，通過一系列的對(duì)話框逐步引導(dǎo)用戶了解產(chǎn)品。移植到移動(dòng)端，向?qū)У氖褂米兊酶佑嗅槍?duì)性，比如社交產(chǎn)品中，為了用戶與用戶之間更好的了解，引導(dǎo)用戶填寫完整個(gè)人信息，如下圖。

社交產(chǎn)品中，為了用戶與用戶之間更好的了解，引導(dǎo)用戶填寫完整個(gè)人信息

而像有的內(nèi)容類產(chǎn)品中，為了針對(duì)于不同用戶的個(gè)性化需求，在第一次使用產(chǎn)品時(shí)會(huì)引導(dǎo)用戶關(guān)注不同類型的人物或則標(biāo)簽。讓用戶可以更快的融入到產(chǎn)品中，發(fā)現(xiàn)更多好玩有趣的東西，而不會(huì)因?yàn)槌醮芜M(jìn)入因?yàn)闆]有內(nèi)容源而失望離去。

為了針對(duì)于不同用戶的個(gè)性化需求，在第一次使用產(chǎn)品時(shí)會(huì)引導(dǎo)用戶關(guān)注不同類型的人物或則標(biāo)簽

6、幫助與反饋

幫助與反饋在PC端的軟件中，往往都會(huì)提供一個(gè)幫助手冊(cè)，里面詳細(xì)的介紹了相關(guān)的問題和解決方法，當(dāng)然也可以通過搜索的方式找到合適的解決辦法。而移動(dòng)端的產(chǎn)品通常沒有PC端的那么復(fù)雜，一般不會(huì)提供詳細(xì)的幫助手冊(cè)，但會(huì)提供一個(gè)反饋的通道，用戶可以通過反饋通道快速的反映相關(guān)的問題。比如知乎就做的比較深入，不僅提供文字反饋，而且可以通過搖一搖的方式，截屏發(fā)送反饋，方便開發(fā)團(tuán)隊(duì)更好的改進(jìn)產(chǎn)品。如下圖。

知乎可以通過搖一搖的方式，截屏發(fā)送反饋

作者：Thor_datou

來源：http://www.jianshu.com/p/24890d78b51f