教育改變生活 嶽麓成就夢想

全國報名咨詢電話:0731-85572692
給UI新手的APP結構指南:用戶引導和提示

2018-09-20

 
 
我們先來說說用戶引導吧,用戶引導在 app 的使用過程中是十分常見的,也是必不可少的,旨在降低用戶的學習成本,快速了解和上手産品或者是新增功能,避免用戶使用過程中的迷茫,減少犯錯率,是提升産品整體愉快體驗的必要手段。
 
一、用戶引導的種類
1. 閃屏引導頁
 
閃屏引導頁主要目的是向用戶展示産品新功能的操作方法,這個部分上一篇文章裡有過描述,這裡就不多贅述了。
 
 
2. 新手引導(頁面遮罩+提示)
 
顧名思義就是教新用戶如何使用産品,用戶打開應用是為了達到某個目的,而不是為了花時間學習怎樣使用,新手引導的作用就是短時間内讓用戶快速上手産品或者是新增功能,目的是節約用戶的時間,減少犯錯率。但是我現在發現這類的引導有一個現象就是整頁一次性展示出全部提示或是文字,每次看到這種引導頁的感覺就是害怕,這麼多内容竟然要我一個個都記住,然而短期記憶又容易遺忘,越想記住可能就會忘記的越快,會給我造成負擔,相信你們也會有同樣的感受。(下圖就是一些反例)所以在設計這類引導的時候建議一定要突出重點功能,文字要精簡;或者是能夠采用分步引導,尋找恰當的時機,比如正好使用到某個功能,再出現引導,這樣會更好一點。分步引導切忌過多,不然一次次的點擊隻會讓用戶感到厭煩。
 
 
 
3. 操作引導
 
這類引導旨在希望用戶完成産品希望你完成的某種指定的操作,比如完善個人資料、身份認證、充值會員、點擊收藏/關注……這類操作都不是強制用戶完成,但是可能設計的會讓人很有欲望的去完成操作。有一些 app 會采用 FAB 按鈕,放置一些核心功能,又或者是讓用戶産生粘性的功能,比如氧氣的簽到功能,方便用戶去使用;還有一些是在頁面上出現動圖進行引導的情況,一般常見于電商或者視頻類app中,這種會更直觀,比如下圖中支付寶 – 口碑頁面的簽到icon一直在閃爍,蘑菇街首頁的動圖一直也在閃……這類例子很多,特點都是特别顯眼,很有想去一探究竟的沖動。
 
 
 
4. 功能性引導
 
這類引導是指比較隐蔽性的功能層面,不會有确切的指引,而是觸及到某個點而出現的引導類型,例如:在支付寶聊天窗口輸入數字,會出現給對方轉賬的引導;在應用中進行截圖會引導分享至微信/微博等;或是截圖後的一段時間内,在微信聊天頁面打開右下角加号按鈕會自動出現剛出現的截圖,方便發送……
 
 
 
5. 對話式引導
 
這類引導方式比較常見,一般是懸浮在頁面上,幾秒鐘後就會自動消失。顔色選取上最好要跟頁面顔色區分開來,比如用略帶透明度的紅色、黑色等,也要有比較明确的箭頭指示,它可以出現在頁面任意位置,也可以帶有上下浮動效果,讓人很有點擊對象查看的欲望,點擊頁面其他位置就會自動消失,所以對話式引導目的性比較明确。
 
 
 
6. 彈框引導
 
這類引導會打斷用戶使用産品,對用戶的打擾最大,當然也會讓用戶最重視。組合方式:黑色遮罩(60%-80% #000000)+文字/插圖+觸發button(+關閉button)。該類引導需要用戶做出選擇後才會被關閉,有純文字說明類,例如退出登錄、錯誤提示彈框等;也有伴有圖片類,比如首頁領券等,還可能伴有動效,就會顯得不那麼單調,有趣味性,容易接受。
 
 
 
7. 局部引導
 
局部引導一般會在頁面頂部出現,也會有嵌入頁面某一地方的情況,通常會用作警示作用,比如消息提醒未打開,網絡異常等等,通常的組合是:文字+伴有紅色、黃色等警示類色塊(+關閉button),足以引起用戶的重視。
 
 
 
8. 全局引導
 
全局引導就比較好理解了,就是整個頁面都是引導提示,屬于主動型引導。最常見的就是為空頁面:文字提示+插圖占位符+跳轉button,點擊button 會進入某個頁面,要避免出現下面第三個整頁空白的情況,不然用戶會覺得卡住了或是出現了 bug。
 
 
 
9. 其他引導
 
小紅點/數字+紅點:常見的就是未讀消息,相信很多強迫症患者都會有把小紅點點掉的沖動,我就是重度強迫症患者,每次看見必須點掉,這就是利用了用戶的這一心理作用,來達到查看産品類似促銷等信息的目的;
文字提醒:經常看見應用裡的某個模塊有促銷活動就會出現這類引導,一般會伴有紅點使用,相信大家已經見怪不怪了;
toast 引導:樣式是 toast 類型,但是用作引導,例如下拉刷新後,出現提示刷新數據,點擊進行查看内容。
 
 
小結
 
引導的使用要根據場景進行合理選擇,合理、有趣味的引導設計,會給産品加分,增強用戶探索新功能的欲望,當然,初衷都是為了方便用戶的使用,合适的時機出現合适的引導,切忌亂用,否則隻會适得其反。
 
二、提示
每一款應用都離不開提示,提示的作用就是告知用戶當前操作的結果,及時的反饋,什麼時候用什麼提示是有區别的,也是有講究的,要盡可能的減少對用戶的打擾。
 
1. 彈框(模态彈框)
 
這類提示和上面說的彈框引導如出一轍,對用戶的打擾較大,也最受重視,屬于強交互。彈框包含黑色遮罩,主頁面不可以進行操作,要通過某種操作後退出,一般多用于廣告促銷活動,比如紅包、優惠券,又或是版本升級、對應用進行評價、允許定位、打開消息通知等。彈框可以分為告知彈框、操作彈框、底部彈框/功能彈框(換頭像、選日期、分享至雙微等)、多選擇彈框、信息錄入彈框(輸入密碼)……彈框的設計要有能吊起用戶的積極性,比如生動有趣的文案或是插畫,即使是讨厭的彈框也可以讓用戶容易接受。另外彈框要避免疊加的情況,就是在彈框的基礎上再次彈出彈框。
 
 
 
2. 浮層提示(模态彈框)
 
比較常見的一種提示類型,比如微信頁面右上角點擊添加 button,或是長按複制等。
 
 
 
3. toast 提示(非模态彈框)
 
toast 是一種比較常見的提示方式,最初是安卓系統控件,現在 iOS 也廣泛運用,比較輕量化,屬于弱交互,對用戶打擾較輕,出現的時間較短,一般3秒以内,不需要用戶進行操作,如果文字過長,用戶也不會記住,比較容易忽視,所以文字要簡短、精煉。一般比較常見的就是成功提示、失敗提示、警告、加載中……有的出現在頁面中間,也有的出現在頁面頂部或者底部;還有一類 toast 是需要手動關閉的,可能是因為提示比較重要,和引導的作用類似,但是不建議這樣設計。
 
 
 
4. Snakbar(非模态彈框)
 
它是安卓的系統控件,和 toast 類似,區别就是它可以進行操作,比較少見,提示文字(+button),介于 toast 和彈框之間,點擊後消失或是幾秒後自動消失,一般出現在頁面底部。
文章來源于網絡

(0)