引導類的UI設計規(guī)范超實用

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

三種類型的引導各有各自的特點以及使用場景，本篇文章詳解組件控件結構體系—引導類。

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

引導頁（幻燈片）式引導

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

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

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

用途:

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

建議:

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

使用場景:

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

浮層式引導

定義：一種輕量級單目標性很強的引導方式，一般是浮層結合文案的，樣式類似氣泡的引導方式。

用途:

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

建議：

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

使用場景：

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

嵌入式引導

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

用途：

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

建議：

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

使用場景：

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

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