設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系:引導(dǎo)類
本文是系列文章之詳解組件控件結(jié)構(gòu)體系的第三篇——引導(dǎo)類。enjoy~
引導(dǎo)是帶領(lǐng)用戶更快速更愉悅地達(dá)到目標(biāo)的過程,能在用戶使用產(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)行不同的多樣化處理。常見的引導(dǎo)有:引導(dǎo)頁(幻燈片)式引導(dǎo),浮層式引導(dǎo),嵌入式引導(dǎo)。
3種類型的引導(dǎo)各有各自的特點(diǎn)以及使用場(chǎng)景,本篇文章詳解組件控件結(jié)構(gòu)體系—引導(dǎo)類
依舊附上一張腦圖,組件控件分類(如果單純通過組件控件,難以滿足功能劃分的需求,所以我將這個(gè)范圍擴(kuò)大,分類里面不僅僅含有組件和控件,所以請(qǐng)不要在意細(xì)節(jié)。)
引導(dǎo)頁(幻燈片)式引導(dǎo)
定義:一般出現(xiàn)在app首次啟動(dòng)的時(shí)候,是一系列宣傳、解說、幫助等頁面的組合。
在移動(dòng)互聯(lián)網(wǎng)的產(chǎn)品的設(shè)計(jì)中,引導(dǎo)頁的設(shè)計(jì)則是在用戶初次使用該移動(dòng)產(chǎn)品時(shí),給予的一些必須性的幫助以使得用戶能快速愉悅地了解這個(gè)產(chǎn)品的功能與具體操作方式。
一方面從產(chǎn)品的角度考慮,產(chǎn)品希望用戶能夠方便得理解產(chǎn)品的特性,減少對(duì)產(chǎn)品的陌生感;另一方面,從用戶角度來看,一個(gè)應(yīng)用里好的引導(dǎo)不僅能使他們對(duì)一個(gè)應(yīng)用有好感,也可能更容易得留住他們。
用途
1. 讓用戶快速了解是一個(gè)什么樣的產(chǎn)品。
2. 讓用戶快速了解該產(chǎn)品的主功能、或者要重點(diǎn)宣傳的特色、重大更換功能。
建議
1. 文案簡(jiǎn)單易懂,重點(diǎn)突出
2. 內(nèi)容可以是圖片、視頻、插畫漫畫等,且內(nèi)容和文案要有一定的關(guān)聯(lián)性。
3. 分頁符一般是2-5個(gè)。
4. 提供可以直接跳過引導(dǎo)頁的操作。不強(qiáng)制用戶一定全部瀏覽。
使用場(chǎng)景
1. 用戶第一次使用時(shí),產(chǎn)品通過引導(dǎo)頁讓用戶快速了解產(chǎn)品的主功能。
2. 用戶更新產(chǎn)品時(shí),產(chǎn)品通過引導(dǎo)頁給用戶傳導(dǎo)更新的新功能。
浮層式引導(dǎo)
定義:一種輕量級(jí)單目標(biāo)性很強(qiáng)的引導(dǎo)方式,一般是浮層結(jié)合文案的,樣式類似氣泡的引導(dǎo)方式。
用途
1. 提示用戶新增功能或頁面調(diào)整,或如何使用該功能。
2. 提示用戶重要功能或一些隱藏操作。
建議
1. 特有文案、帶有指示箭頭的類似氣泡設(shè)計(jì)。
2. 一般為非模態(tài)浮層,大概顯示3秒左右自動(dòng)消失,對(duì)用戶干擾較小。
3. 文案上盡量簡(jiǎn)潔,表意清晰,建議控制20字以內(nèi)。
使用場(chǎng)景
1. 有些新增功能不易讓用戶察覺同時(shí)這些功能對(duì)產(chǎn)品本身來說顯得比較重要,這時(shí)候需要浮層引導(dǎo),讓用戶知道該功能或者使用方法。
2. 用于新手引導(dǎo)
嵌入式引導(dǎo)
定義:將引導(dǎo)內(nèi)容直接嵌入到界面中的引導(dǎo)方式,可以嵌入到狀態(tài)欄、導(dǎo)航欄、工具欄,比較常見的是嵌入到主題內(nèi)容界面中。
用途
1. 讓用戶了解當(dāng)前界面或者操作處于何種狀態(tài),并指導(dǎo)接下來如何操作使用。
2. 保留當(dāng)前界面的內(nèi)同同時(shí),增加引導(dǎo)提示。
建議
文案簡(jiǎn)短表述當(dāng)前狀態(tài)并告知用戶如何操作。
使用場(chǎng)景
1. 異常狀態(tài)時(shí)使用嵌入式引導(dǎo),目的是提示用戶異常狀態(tài)。
2. 初始狀態(tài)時(shí),由于界面數(shù)據(jù)為空,這時(shí)候通過嵌入式引導(dǎo)提示用戶操作。
3種引導(dǎo)類型按照重要度依次為:引導(dǎo)頁(幻燈片)式引導(dǎo)>浮層式引導(dǎo)>嵌入式引導(dǎo)。3種引導(dǎo)可相互組合使用。到底使用哪個(gè)?則根據(jù)業(yè)務(wù)和對(duì)產(chǎn)品的定位來判斷。
相關(guān)閱讀
設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系:導(dǎo)航類
設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系:加載類
設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系:網(wǎng)絡(luò)異常類
設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系:空數(shù)據(jù)類
設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系:提示類
設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系:操作類
設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系:?jiǎn)卧丶?/a>
#專欄作家#
UX,微信公眾號(hào):UEDC,人人都是產(chǎn)品經(jīng)理專欄作家。華為ITUX交互組組長。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Pixabay,基于 CC0 協(xié)議
這是第二篇文章吧,不是第三篇。。
你好,幻燈片式引導(dǎo)建議里面的第三點(diǎn)說分頁符一般是2-5個(gè)。分頁符是指什么啊,小白不理解
第一種幻燈片引導(dǎo)其實(shí)不是什么好東西。。??吹胶薏坏民R上關(guān)掉?!靶碌囊曈X效果”何必跟用戶說,他們自己長了眼睛能感覺到?!靶碌墓δ堋笨梢越Y(jié)合場(chǎng)景嵌入說明。沒人喜歡被上課
一分為二討論。以產(chǎn)品目標(biāo)來說 幻燈片是需要的。以用戶目標(biāo)來說,用戶可能會(huì)反感。作為產(chǎn)品或者設(shè)計(jì)師,產(chǎn)品目標(biāo)和用戶目標(biāo)都要平衡。
產(chǎn)品目標(biāo)不是“告知”是“有效傳達(dá),吸引使用”,幻燈圖起不到這個(gè)作用,嵌入場(chǎng)景才能觸發(fā)有效的注意力
同意,討厭幻燈片
非常感謝,最近剛好用到