APP UI結(jié)構(gòu):用戶引導(dǎo)&提示

5 評(píng)論 26972 瀏覽 198 收藏 12 分鐘

本文要說的主題是用戶引導(dǎo)和提示,它們都會(huì)打擾到用戶,也有很多的共通點(diǎn),就暫且歸到一起集中聊一下。

先看一下整體內(nèi)容:

(聲明:以下圖片來源于網(wǎng)絡(luò)和應(yīng)用截圖,僅作為學(xué)習(xí)交流使用)

我們先來說說用戶引導(dǎo),用戶引導(dǎo)在app的使用過程中是十分常見的,也是必不可少的,旨在降低用戶的學(xué)習(xí)成本,快速了解和上手產(chǎn)品或者是新增功能,避免用戶使用過程中的迷茫,減少犯錯(cuò)率,是提升產(chǎn)品整體愉快體驗(yàn)的必要手段。

一、用戶引導(dǎo)的種類

1. 閃屏引導(dǎo)頁

閃屏引導(dǎo)頁主要目的是向用戶展示產(chǎn)品新功能的操作方法,這個(gè)部分上一篇文章里有過描述,這里就不多說了,有興趣的可以在底部打開鏈接查看。

2. 新手引導(dǎo)(頁面遮罩+提示)

顧名思義就是教新用戶如何使用產(chǎn)品,用戶打開應(yīng)用是為了達(dá)到某個(gè)目的,而不是為了花時(shí)間學(xué)習(xí)怎樣使用,新手引導(dǎo)的作用就是短時(shí)間內(nèi)讓用戶快速上手產(chǎn)品或者是新增功能,目的是節(jié)約用戶的時(shí)間,減少犯錯(cuò)率。

但是我現(xiàn)在發(fā)現(xiàn)這類的引導(dǎo)有一個(gè)現(xiàn)象就是整頁一次性展示出全部提示或是文字,每次看到這種引導(dǎo)頁的感覺就是害怕,這么多內(nèi)容竟然要我一個(gè)個(gè)都記住,然而短期記憶又容易遺忘,越想記住可能就會(huì)忘記的越快,會(huì)給我造成負(fù)擔(dān),相信你們也會(huì)有同樣的感受。(下圖就是一些反例)

所以在設(shè)計(jì)這類引導(dǎo)的時(shí)候建議一定要突出重點(diǎn)功能,文字要精簡,或者是能夠采用分步引導(dǎo),尋找恰當(dāng)?shù)臅r(shí)機(jī),比如:正好使用到某個(gè)功能,再出現(xiàn)引導(dǎo),這樣會(huì)更好一點(diǎn)。分步引導(dǎo)切忌過多,不然一次次的點(diǎn)擊只會(huì)讓用戶感到厭煩。

3. 操作引導(dǎo)

這類引導(dǎo)旨在希望用戶完成產(chǎn)品希望你完成的某種指定的操作,比如:完善個(gè)人資料、身份認(rèn)證、充值會(huì)員、點(diǎn)擊收藏/關(guān)注…這類操作都不是強(qiáng)制用戶完成,但是可能設(shè)計(jì)的會(huì)讓人很有欲望的去完成操作。

有一些app會(huì)采用FAB按鈕,放置一些核心功能,又或者是讓用戶產(chǎn)生粘性的功能,比如:氧氣的簽到功能,方便用戶去使用;還有一些是在頁面上出現(xiàn)動(dòng)圖進(jìn)行引導(dǎo)的情況,一般常見于電商或者視頻類app中,這種會(huì)更直觀。

比如:下圖中支付寶-口碑頁面的簽到icon一直在閃爍,蘑菇街首頁的動(dòng)圖一直也在閃…

這類例子很多,特點(diǎn)都是特別顯眼,很有想去一探究竟的沖動(dòng)。

4. 功能性引導(dǎo)

這類引導(dǎo)是指比較隱蔽性的功能層面,不會(huì)有確切的指引,而是觸及到某個(gè)點(diǎn)而出現(xiàn)的引導(dǎo)類型。

例如:在支付寶聊天窗口輸入數(shù)字,會(huì)出現(xiàn)給對(duì)方轉(zhuǎn)賬的引導(dǎo);在應(yīng)用中進(jìn)行截圖會(huì)引導(dǎo)分享至微信/微博等;或是截圖后的一段時(shí)間內(nèi),在微信聊天頁面打開右下角加號(hào)按鈕會(huì)自動(dòng)出現(xiàn)剛出現(xiàn)的截圖,方便發(fā)送…

5. 對(duì)話式引導(dǎo)

這類引導(dǎo)方式比較常見,一般是懸浮在頁面上,幾秒鐘后就會(huì)自動(dòng)消失。顏色選取上最好要跟頁面顏色區(qū)分開來,比如:用略帶透明度的紅色、黑色等,也要有比較明確的箭頭指示,它可以出現(xiàn)在頁面任意位置,也可以帶有上下浮動(dòng)效果,讓人很有點(diǎn)擊對(duì)象查看的欲望,點(diǎn)擊頁面其他位置就會(huì)自動(dòng)消失,所以對(duì)話式引導(dǎo)目的性比較明確。

6. 彈框引導(dǎo)

這類引導(dǎo)會(huì)打斷用戶使用產(chǎn)品,對(duì)用戶的打擾最大,當(dāng)然也會(huì)讓用戶最重視。組合方式:

黑色遮罩(60%-80% #000000)+文字/插圖+觸發(fā)button(+關(guān)閉button)。

該類引導(dǎo)需要用戶做出選擇后才會(huì)被關(guān)閉,有純文字說明類,例如:退出登錄、錯(cuò)誤提示彈框…

也有伴有圖片類,比如:首頁領(lǐng)券等,還可能伴有動(dòng)效,就會(huì)顯得不那么單調(diào),有趣味性,容易接受。

7. 局部引導(dǎo)

局部引導(dǎo)一般會(huì)在頁面頂部出現(xiàn),也會(huì)有嵌入頁面某一地方的情況,通常會(huì)用作警示作用,比如:消息提醒未打開,網(wǎng)絡(luò)異常等等,通常的組合是:文字+伴有紅色、黃色等警示類色塊(+關(guān)閉button),足以引起用戶的重視。

8. 全局引導(dǎo)

全局引導(dǎo)就比較好理解了,就是整個(gè)頁面都是引導(dǎo)提示,屬于主動(dòng)型引導(dǎo)。最常見的就是為空頁面:文字提示+插圖占位符+跳轉(zhuǎn)button,點(diǎn)擊button會(huì)進(jìn)入某個(gè)頁面,要避免出現(xiàn)下面第三個(gè)整頁空白的情況,不然用戶會(huì)覺得卡住了或是出現(xiàn)了bug。

9. 其他引導(dǎo)

  • 小紅點(diǎn)/數(shù)字+紅點(diǎn):常見的就是未讀消息,相信很多強(qiáng)迫癥患者都會(huì)有把小紅點(diǎn)點(diǎn)掉的沖動(dòng),我就是重度強(qiáng)迫癥患者,每次看見必須點(diǎn)掉,這就是利用了用戶的這一心理作用,來達(dá)到查看產(chǎn)品類似促銷等信息的目的;
  • 文字提醒:經(jīng)??匆姂?yīng)用里的某個(gè)模塊有促銷活動(dòng)就會(huì)出現(xiàn)這類引導(dǎo),一般會(huì)伴有紅點(diǎn)使用,相信大家已經(jīng)見怪不怪了;
  • toast引導(dǎo):樣式是toast類型,但是用作引導(dǎo),例如:下拉刷新后,出現(xiàn)提示刷新數(shù)據(jù),點(diǎn)擊進(jìn)行查看內(nèi)容。

小結(jié):引導(dǎo)的使用要根據(jù)場景進(jìn)行合理選擇,合理、有趣味的引導(dǎo)設(shè)計(jì),會(huì)給產(chǎn)品加分,增強(qiáng)用戶探索新功能的欲望。當(dāng)然,初衷都是為了方便用戶的使用,合適的時(shí)機(jī)出現(xiàn)合適的引導(dǎo),切忌亂用,否則只會(huì)適得其反。

二、提示

每一款應(yīng)用都離不開提示,提示的作用就是告知用戶當(dāng)前操作的結(jié)果,及時(shí)的反饋,什么時(shí)候用什么提示是有區(qū)別的,也是有講究的,要盡可能的減少對(duì)用戶的打擾。

1. 彈框(模態(tài)彈框)

這類提示和上面說的彈框引導(dǎo)如出一轍,對(duì)用戶的打擾較大,也最受重視,屬于強(qiáng)交互。彈框包含黑色遮罩,主頁面不可以進(jìn)行操作,要通過某種操作后退出,一般多用于廣告促銷活動(dòng),比如:紅包、優(yōu)惠券,又或是版本升級(jí)、對(duì)應(yīng)用進(jìn)行評(píng)價(jià)、允許定位、打開消息通知…

彈框可以分為告知彈框、操作彈框、底部彈框/功能彈框(換頭像、選日期、分享至雙微等)、多選擇彈框、信息錄入彈框(輸入密碼)…彈框的設(shè)計(jì)要能有能吊起用戶的積極性,比如:生動(dòng)有趣的文案或是插畫,即使是討厭的彈框也可以讓用戶容易接受。

另外彈框要避免疊加的情況,就是在彈框的基礎(chǔ)上再次彈出彈框。

2. 浮層提示(模態(tài)彈框)

比較常見的一種提示類型,比如:微信頁面右上角點(diǎn)擊添加button,或是長按復(fù)制等。

3. toast提示(非模態(tài)彈框)

toast是一種比較常見的提示方式,最初是安卓系統(tǒng)控件,現(xiàn)在ios也廣泛運(yùn)用,比較輕量化,屬于弱交互,對(duì)用戶打擾較輕,出現(xiàn)的時(shí)間較短,一般3秒以內(nèi),不需要用戶進(jìn)行操作。如果文字過長,用戶也不會(huì)記住,比較容易忽視,所以文字要簡短、精煉。

一般比較常見的就是成功提示、失敗提示、警告、加載中…有的出現(xiàn)在頁面中間,也有的出現(xiàn)在頁面頂部或者底部;還有一類toast是需要手動(dòng)關(guān)閉的,可能是因?yàn)樘崾颈容^重要,和引導(dǎo)的作用類似,但是不建議這樣設(shè)計(jì)。

4. Snakbar(非模態(tài)彈框)

它是安卓的系統(tǒng)控件,和toast類似,區(qū)別就是它可以進(jìn)行操作,比較少見,提示文字(+button,不能加icon),介于toast和彈框之間,點(diǎn)擊后消失或是幾秒后自動(dòng)消失,一般出現(xiàn)在頁面底部。

希望對(duì)你有所幫助,有不同的見解或是補(bǔ)充可以在下面一起留言探討。

 

作者:EasonZhang,公眾號(hào):Eason張UED(ID:EasonZhangUED)

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

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 覺得有點(diǎn)混亂,分類不夠明確,把使用場景和引導(dǎo)設(shè)計(jì)模式混在一起了,建議改進(jìn)

    來自北京 回復(fù)
  2. 坦誠講很多概念都運(yùn)用的很混亂,建議去看下兩大系統(tǒng)和各大廠的設(shè)計(jì)規(guī)范

    來自北京 回復(fù)
  3. 6666666 很感謝

    來自北京 回復(fù)
  4. 很全,感謝~

    來自黑龍江 回復(fù)
  5. 厲害了 ??

    來自湖北 回復(fù)