Echo ：引導(dǎo)是帶領(lǐng)用戶更快速更愉悅地達(dá)到目標(biāo)的過(guò)程，能在用戶使用產(chǎn)品功能前或遇到障礙之前給予及時(shí)的引導(dǎo)提示。為了業(yè)務(wù)或者產(chǎn)品目標(biāo)的需要，有時(shí)候需要給予一些適當(dāng)?shù)奶崾痉奖阌脩羧ダ斫猱a(chǎn)品。

為了完成不同的引導(dǎo)內(nèi)容和引導(dǎo)的目標(biāo)，移動(dòng)端的引導(dǎo)設(shè)計(jì)會(huì)根據(jù)需求進(jìn)行不同的多樣化處理。常見(jiàn)的引導(dǎo)有：引導(dǎo)頁(yè)（幻燈片）式引導(dǎo)，浮層式引導(dǎo)，嵌入式引導(dǎo)。

三種類(lèi)型的引導(dǎo)各有各自的特點(diǎn)以及使用場(chǎng)景，本篇文章詳解組件控件結(jié)構(gòu)體系—引導(dǎo)類(lèi)。

依舊附上一張腦圖：組件控件分類(lèi)（如果單純通過(guò)組件控件，難以滿足功能劃分的需求，所以我將這個(gè)范圍擴(kuò)大，分類(lèi)里面不僅僅含有組件和控件，所以請(qǐng)不要在意細(xì)節(jié)。）

引導(dǎo)頁(yè)（幻燈片）式引導(dǎo)

定義：一般出現(xiàn)在App首次啟動(dòng)的時(shí)候，是一系列宣傳、解說(shuō)、幫助等頁(yè)面的組合。

在移動(dòng)互聯(lián)網(wǎng)的產(chǎn)品的設(shè)計(jì)中，引導(dǎo)頁(yè)的設(shè)計(jì)則是在用戶初次使用該移動(dòng)產(chǎn)品時(shí)，給予的一些必須性的幫助以使得用戶能快速愉悅地了解這個(gè)產(chǎn)品的功能與具體操作方式。

一方面從產(chǎn)品的角度考慮，產(chǎn)品希望用戶能夠方便的理解產(chǎn)品的特性，減少對(duì)產(chǎn)品的陌生感；另一方面，從用戶角度來(lái)看，一個(gè)應(yīng)用里好的引導(dǎo)不僅能使他們對(duì)這個(gè)應(yīng)用有好感，也可能更容易得留住他們。

用途:

• 讓用戶快速了解是一個(gè)什么樣的產(chǎn)品。
• 讓用戶快速了解該產(chǎn)品的主功能、或者要重點(diǎn)宣傳的特色、重大更換功能。

建議:

• 文案簡(jiǎn)單易懂，重點(diǎn)突出。
• 內(nèi)容可以是圖片、視頻、插畫(huà)漫畫(huà)等，且內(nèi)容和文案要有一定的關(guān)聯(lián)性。
• 分頁(yè)符一般是2-5個(gè)。
• 提供可以直接跳過(guò)引導(dǎo)頁(yè)的操作，不強(qiáng)制用戶一定全部瀏覽。

使用場(chǎng)景:

• 用戶第一次使用時(shí)，產(chǎn)品通過(guò)引導(dǎo)頁(yè)讓用戶快速了解產(chǎn)品的主功能。
• 用戶更新產(chǎn)品時(shí)，產(chǎn)品通過(guò)引導(dǎo)頁(yè)給用戶傳導(dǎo)更新的新功能。

浮層式引導(dǎo)

定義：一種輕量級(jí)單目標(biāo)性很強(qiáng)的引導(dǎo)方式，一般是浮層結(jié)合文案的，樣式類(lèi)似氣泡的引導(dǎo)方式。

用途:

• 提示用戶新增功能或頁(yè)面調(diào)整，或如何使用該功能。
• 提示用戶重要功能或一些隱藏操作。

建議：

• 特有文案、帶有指示箭頭的類(lèi)似氣泡設(shè)計(jì)。
• 一般為非模態(tài)浮層，大概顯示3秒左右自動(dòng)消失，對(duì)用戶干擾較小。
• 文案上盡量簡(jiǎn)潔，表意清晰，建議控制20字以內(nèi)。

使用場(chǎng)景：

• 有些新增功能不易讓用戶察覺(jué)同時(shí)這些功能對(duì)產(chǎn)品本身來(lái)說(shuō)比較重要，這時(shí)候需要浮層引導(dǎo)，讓用戶知道該功能或者使用方法。
• 用于新手引導(dǎo)。

嵌入式引導(dǎo)

定義：將引導(dǎo)內(nèi)容直接嵌入到界面中的引導(dǎo)方式，可以嵌入到狀態(tài)欄、導(dǎo)航欄、工具欄，比較常見(jiàn)的是嵌入到主題內(nèi)容界面中。

用途：

• 讓用戶了解當(dāng)前界面或者操作處于何種狀態(tài)，并指導(dǎo)接下來(lái)如何操作使用。
• 保留當(dāng)前界面的內(nèi)容，同時(shí)增加引導(dǎo)提示。

建議：

文案簡(jiǎn)短表述當(dāng)前狀態(tài)并告知用戶如何操作。

使用場(chǎng)景：

• 異常狀態(tài)時(shí)使用嵌入式引導(dǎo)，目的是提示用戶異常狀態(tài)。
• 初始狀態(tài)時(shí)，由于界面數(shù)據(jù)為空，這時(shí)候通過(guò)嵌入式引導(dǎo)提示用戶操作。

三種引導(dǎo)類(lèi)型按照重要度依次為：引導(dǎo)頁(yè)（幻燈片）式引導(dǎo) > 浮層式引導(dǎo) > 嵌入式引導(dǎo)。三種引導(dǎo)可相互組合使用。到底使用哪個(gè)？則根據(jù)業(yè)務(wù)和對(duì)產(chǎn)品的定位來(lái)判斷。

歡迎關(guān)注作者的微信公眾號(hào)：「UEDC」

「如何搞定用戶引導(dǎo)頁(yè)」

• 頂尖指南丨《超全面指南！如何設(shè)計(jì)移動(dòng)應(yīng)用引導(dǎo)頁(yè)》
• 技巧分享丨《討厭引導(dǎo)頁(yè)？這5個(gè)技巧幫你設(shè)計(jì)出眼前一亮的APP引導(dǎo)頁(yè)》
• 實(shí)戰(zhàn)案例 |?《如何在新用戶引導(dǎo)流程中用好空狀態(tài)界面？》
• 干貨總結(jié)丨《騰訊實(shí)戰(zhàn)干貨！怎么讓引導(dǎo)頁(yè)不再是無(wú)用小透明？》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛(ài)好者也準(zhǔn)備了貼心的知識(shí)樹(shù)專(zhuān)欄。開(kāi)啟免費(fèi)自學(xué)新篇章，按照我們的專(zhuān)欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺(jué)效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com