杭州UI設(shè)計(jì)學(xué)習(xí)|引導(dǎo)的使用及分類
1.頁面遮罩引導(dǎo)
頁面屏蔽引導(dǎo)相當(dāng)于升級(jí)了氣泡引導(dǎo)樣式。不同的是,頁面上方增加了黑色半透明蒙版層進(jìn)行蒙版,引導(dǎo)的下方內(nèi)容被挖空。在面膜中加入互動(dòng)手勢、文字信息或插圖進(jìn)行輔助講解。用戶需要手動(dòng)點(diǎn)擊“下一步/跳過/關(guān)閉”按鈕來操作其他內(nèi)容。
這種新手引導(dǎo)最大的好處就是可以把視線集中在當(dāng)前引導(dǎo)的功能描述上,保證用戶不會(huì)被其他信息打擾?;旧鲜窍螺d或更新后第一次打開應(yīng)用時(shí)出現(xiàn),可以顯示一個(gè)或多個(gè)(順序引導(dǎo))。信息傳遞的有效性非常高。
需要注意的是,內(nèi)容介紹一定要和引導(dǎo)的位置很親密,關(guān)閉按鈕要明顯易操作。當(dāng)有多個(gè)引導(dǎo)時(shí),需要同時(shí)提供“下一步”和“跳過”按鈕。有一些老用戶是第二次下載或者是為了更新版本,根本不需要新手自舉。如果每次都要一個(gè)一個(gè)點(diǎn),對老用戶來說不是幫助就是干擾。
2.對話框啟動(dòng)
對話框是一種強(qiáng)引導(dǎo),通常出現(xiàn)在用戶即將使用的某個(gè)功能在使用過程中受到限制或主動(dòng)求助時(shí)。這對用戶是有實(shí)際幫助的。對話框的出現(xiàn)還是會(huì)打斷用戶的操作,尤其是自動(dòng)觸發(fā)彈出的時(shí)機(jī)要合適,彈出不及時(shí)或者提前打擾用戶都會(huì)有負(fù)面影響。對話框引導(dǎo)將由系統(tǒng)自動(dòng)觸發(fā),或者由用戶在適當(dāng)?shù)臅r(shí)候主動(dòng)觸發(fā)。
?、傧到y(tǒng)自動(dòng)觸發(fā)。
例如,當(dāng)用戶需要使用某項(xiàng)功能時(shí),系統(tǒng)自動(dòng)彈出用戶需要升級(jí)到新版本或完成任務(wù)才能體驗(yàn),并為用戶提供了直達(dá)目標(biāo)的快捷方式。另外,視頻應(yīng)用的付費(fèi)電影可以免費(fèi)體驗(yàn)5分鐘。時(shí)間到了,系統(tǒng)會(huì)自動(dòng)暫停播放,彈出付費(fèi)頻道,引導(dǎo)用戶轉(zhuǎn)換。
?、谟捎脩羰謩?dòng)觸發(fā)。
這種引導(dǎo)會(huì)有一個(gè)操作入口,可以通過按鈕、“問號(hào)”圖標(biāo)或者文字超鏈接(說明/指令/幫助)來提示...),用戶可以隨時(shí)點(diǎn)擊調(diào)出指導(dǎo)說明。例如,用戶在應(yīng)用中主動(dòng)開啟設(shè)備的通知和定位權(quán)限,在激活信用卡時(shí)保留手機(jī)號(hào)碼的文字描述或卡片背面的CVV/CVC圖形說明。

3.氣泡提示制導(dǎo)
這是一種重量輕但方向性強(qiáng)的制導(dǎo)方法。它的表現(xiàn)形式是在需要的位置彈出一個(gè)帶有尖角的氣泡容器,并增加一個(gè)引導(dǎo)性的文案提示。用戶可以按照引導(dǎo)操作或者忽略氣泡直接操作其他內(nèi)容,不會(huì)打斷用戶,干擾最小。
氣泡引導(dǎo)可用于新功能上線、核心功能定位、隱藏菜單提示等場景??梢源钆鋱D片素材和動(dòng)畫效果。由于指向性明確,可以出現(xiàn)在頁面的任何位置,兼容性強(qiáng)。
4.操作桿指南
操作欄和上面提到的對話框引導(dǎo)相比有些類似,都是沒有明確指向性的阻擋式引導(dǎo)方式。唯一不同的是,雖然操作欄的視覺重心略弱于對話框,但彈出位置在屏幕下方,有利于用戶操作(靠近手指),尤其是單手操作更容易達(dá)到。
另外,操作欄的空間資源更多,適合內(nèi)容更多的詳細(xì)指導(dǎo)??梢酝ㄟ^圖文與背景的結(jié)合,營造出強(qiáng)烈的視覺氛圍,還可以增加突出的CTA按鈕,提高轉(zhuǎn)化率。
5.其他指導(dǎo)方法
除了上面提到的幾種新手指導(dǎo),還有指導(dǎo)頁、默認(rèn)頁、偏好標(biāo)簽等方式,但那些都是復(fù)雜獨(dú)立的模塊系統(tǒng),不是三言兩語能解釋清楚的。建議看其他單獨(dú)的相關(guān)資料。