本文是系列文章之詳解組件控件結(jié)構(gòu)體系的第三篇——引導類。enjoy~

引導是帶領(lǐng)用戶更快速更愉悅地達到目標的過程，能在用戶使用產(chǎn)品功能前或遇到障礙之前給予及時的引導提示。

為了業(yè)務或者產(chǎn)品目標的需要，有時候需要給予一些適當?shù)奶崾痉奖阌脩羧ダ斫猱a(chǎn)品。

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

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

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

引導頁（幻燈片）式引導

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

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

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

用途

1. 讓用戶快速了解是一個什么樣的產(chǎn)品。

2. 讓用戶快速了解該產(chǎn)品的主功能、或者要重點宣傳的特色、重大更換功能。

建議

1. 文案簡單易懂，重點突出

2. 內(nèi)容可以是圖片、視頻、插畫漫畫等，且內(nèi)容和文案要有一定的關(guān)聯(lián)性。

3. 分頁符一般是2-5個。

4. 提供可以直接跳過引導頁的操作。不強制用戶一定全部瀏覽。

使用場景

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

2. 用戶更新產(chǎn)品時，產(chǎn)品通過引導頁給用戶傳導更新的新功能。

浮層式引導

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

用途

1. 提示用戶新增功能或頁面調(diào)整，或如何使用該功能。

2. 提示用戶重要功能或一些隱藏操作。

建議

1. 特有文案、帶有指示箭頭的類似氣泡設(shè)計。

2. 一般為非模態(tài)浮層，大概顯示3秒左右自動消失，對用戶干擾較小。

3. 文案上盡量簡潔，表意清晰，建議控制20字以內(nèi)。

使用場景

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

2. 用于新手引導

嵌入式引導

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

用途

1. 讓用戶了解當前界面或者操作處于何種狀態(tài)，并指導接下來如何操作使用。

2. 保留當前界面的內(nèi)同同時，增加引導提示。

建議

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

使用場景

1. 異常狀態(tài)時使用嵌入式引導，目的是提示用戶異常狀態(tài)。

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

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

相關(guān)閱讀

設(shè)計規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：導航類

設(shè)計規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：加載類

設(shè)計規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：網(wǎng)絡異常類

設(shè)計規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：空數(shù)據(jù)類

設(shè)計規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：提示類

設(shè)計規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：操作類

設(shè)計規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：單元控件類

#專欄作家#

UX，微信公眾號：UEDC，人人都是產(chǎn)品經(jīng)理專欄作家。華為ITUX交互組組長。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pixabay，基于 CC0 協(xié)議