引導(dǎo)類的UI設(shè)計規(guī)范超實用

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

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

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

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

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

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

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

用途:

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

建議:

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

使用場景:

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

浮層式引導(dǎo)

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

用途:

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

建議：

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

使用場景：

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

嵌入式引導(dǎo)

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

用途：

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

建議：

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

使用場景：

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

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