發(fā)布時(shí)間:2024-03-10 16:21:54 瀏覽量:142次
本文要說(shuō)的主題是用戶引導(dǎo)和提示,它們都會(huì)打擾到用戶,也有很多的共通點(diǎn),就暫且歸到一起集中聊一下。
先看一下整體內(nèi)容:
(聲明:以下圖片來(lái)源于網(wǎng)絡(luò)和應(yīng)用截圖,僅作為學(xué)習(xí)交流使用)
我們先來(lái)說(shuō)說(shuō)用戶引導(dǎo),用戶引導(dǎo)在app的使用過(guò)程中是十分常見(jiàn)的,也是必不可少的,旨在降低用戶的學(xué)習(xí)成本,快速了解和上手產(chǎn)品或者是新增功能,避免用戶使用過(guò)程中的迷茫,減少犯錯(cuò)率,是提升產(chǎn)品整體愉快體驗(yàn)的必要手段。
閃屏引導(dǎo)頁(yè)主要目的是向用戶展示產(chǎn)品新功能的操作方法,這個(gè)部分上一篇文章里有過(guò)描述,這里就不多說(shuō)了,有興趣的可以在底部打開(kāi)鏈接查看。
顧名思義就是教新用戶如何使用產(chǎn)品,用戶打開(kāi)應(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)象就是整頁(yè)一次性展示出全部提示或是文字,每次看到這種引導(dǎo)頁(yè)的感覺(jué)就是害怕,這么多內(nèi)容竟然要我一個(gè)個(gè)都記住,然而短期記憶又容易遺忘,越想記住可能就會(huì)忘記的越快,會(huì)給我造成負(fù)擔(dān),相信你們也會(huì)有同樣的感受。(下圖就是一些反例)
所以在設(shè)計(jì)這類引導(dǎo)的時(shí)候建議一定要突出重點(diǎn)功能,文字要精簡(jiǎn),或者是能夠采用分步引導(dǎo),尋找恰當(dāng)?shù)臅r(shí)機(jī),比如:正好使用到某個(gè)功能,再出現(xiàn)引導(dǎo),這樣會(huì)更好一點(diǎn)。分步引導(dǎo)切忌過(guò)多,不然一次次的點(diǎn)擊只會(huì)讓用戶感到厭煩。
這類引導(dǎo)旨在希望用戶完成產(chǎn)品希望你完成的某種指定的操作,比如:完善個(gè)人資料、身份認(rèn)證、充值會(huì)員、點(diǎn)擊收藏/關(guān)注…這類操作都不是強(qiáng)制用戶完成,但是可能設(shè)計(jì)的會(huì)讓人很有欲望的去完成操作。
有一些app會(huì)采用FAB按鈕,放置一些核心功能,又或者是讓用戶產(chǎn)生粘性的功能,比如:氧氣的簽到功能,方便用戶去使用;還有一些是在頁(yè)面上出現(xiàn)動(dòng)圖進(jìn)行引導(dǎo)的情況,一般常見(jiàn)于電商或者視頻類app中,這種會(huì)更直觀。
比如:下圖中支付寶-口碑頁(yè)面的簽到icon一直在閃爍,蘑菇街首頁(yè)的動(dòng)圖一直也在閃…
這類例子很多,特點(diǎn)都是特別顯眼,很有想去一探究竟的沖動(dòng)。
這類引導(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),在微信聊天頁(yè)面打開(kāi)右下角加號(hào)按鈕會(huì)自動(dòng)出現(xiàn)剛出現(xiàn)的截圖,方便發(fā)送…
這類引導(dǎo)方式比較常見(jiàn),一般是懸浮在頁(yè)面上,幾秒鐘后就會(huì)自動(dòng)消失。顏色選取上最好要跟頁(yè)面顏色區(qū)分開(kāi)來(lái),比如:用略帶透明度的紅色、黑色等,也要有比較明確的箭頭指示,它可以出現(xiàn)在頁(yè)面任意位置,也可以帶有上下浮動(dòng)效果,讓人很有點(diǎn)擊對(duì)象查看的欲望,點(diǎn)擊頁(yè)面其他位置就會(huì)自動(dòng)消失,所以對(duì)話式引導(dǎo)目的性比較明確。
這類引導(dǎo)會(huì)打斷用戶使用產(chǎn)品,對(duì)用戶的打擾最大,當(dāng)然也會(huì)讓用戶最重視。組合方式:
黑色遮罩(60%-80% #000000)+文字/插圖+觸發(fā)button(+關(guān)閉button)。
該類引導(dǎo)需要用戶做出選擇后才會(huì)被關(guān)閉,有純文字說(shuō)明類,例如:退出登錄、錯(cuò)誤提示彈框…
也有伴有圖片類,比如:首頁(yè)領(lǐng)券等,還可能伴有動(dòng)效,就會(huì)顯得不那么單調(diào),有趣味性,容易接受。
局部引導(dǎo)一般會(huì)在頁(yè)面頂部出現(xiàn),也會(huì)有嵌入頁(yè)面某一地方的情況,通常會(huì)用作警示作用,比如:消息提醒未打開(kāi),網(wǎng)絡(luò)異常等等,通常的組合是:文字+伴有紅色、黃色等警示類色塊(+關(guān)閉button),足以引起用戶的重視。
全局引導(dǎo)就比較好理解了,就是整個(gè)頁(yè)面都是引導(dǎo)提示,屬于主動(dòng)型引導(dǎo)。最常見(jiàn)的就是為空頁(yè)面:文字提示+插圖占位符+跳轉(zhuǎn)button,點(diǎn)擊button會(huì)進(jìn)入某個(gè)頁(yè)面,要避免出現(xiàn)下面第三個(gè)整頁(yè)空白的情況,不然用戶會(huì)覺(jué)得卡住了或是出現(xiàn)了bug。
小結(jié):引導(dǎo)的使用要根據(jù)場(chǎng)景進(jìn)行合理選擇,合理、有趣味的引導(dǎo)設(shè)計(jì),會(huì)給產(chǎn)品加分,增強(qiáng)用戶探索新功能的欲望。當(dāng)然,初衷都是為了方便用戶的使用,合適的時(shí)機(jī)出現(xiàn)合適的引導(dǎo),切忌亂用,否則只會(huì)適得其反。
每一款應(yīng)用都離不開(kāi)提示,提示的作用就是告知用戶當(dāng)前操作的結(jié)果,及時(shí)的反饋,什么時(shí)候用什么提示是有區(qū)別的,也是有講究的,要盡可能的減少對(duì)用戶的打擾。
這類提示和上面說(shuō)的彈框引導(dǎo)如出一轍,對(duì)用戶的打擾較大,也最受重視,屬于強(qiáng)交互。彈框包含黑色遮罩,主頁(yè)面不可以進(jìn)行操作,要通過(guò)某種操作后退出,一般多用于廣告促銷活動(dòng),比如:紅包、優(yōu)惠券,又或是版本升級(jí)、對(duì)應(yīng)用進(jìn)行評(píng)價(jià)、允許定位、打開(kāi)消息通知…
彈框可以分為告知彈框、操作彈框、底部彈框/功能彈框(換頭像、選日期、分享至雙微等)、多選擇彈框、信息錄入彈框(輸入密碼)…彈框的設(shè)計(jì)要能有能吊起用戶的積極性,比如:生動(dòng)有趣的文案或是插畫(huà),即使是討厭的彈框也可以讓用戶容易接受。
另外彈框要避免疊加的情況,就是在彈框的基礎(chǔ)上再次彈出彈框。
比較常見(jiàn)的一種提示類型,比如:微信頁(yè)面右上角點(diǎn)擊添加button,或是長(zhǎng)按復(fù)制等。
toast是一種比較常見(jiàn)的提示方式,最初是安卓系統(tǒng)控件,現(xiàn)在ios也廣泛運(yùn)用,比較輕量化,屬于弱交互,對(duì)用戶打擾較輕,出現(xiàn)的時(shí)間較短,一般3秒以內(nèi),不需要用戶進(jìn)行操作。如果文字過(guò)長(zhǎng),用戶也不會(huì)記住,比較容易忽視,所以文字要簡(jiǎn)短、精煉。
一般比較常見(jiàn)的就是成功提示、失敗提示、警告、加載中…有的出現(xiàn)在頁(yè)面中間,也有的出現(xiàn)在頁(yè)面頂部或者底部;還有一類toast是需要手動(dòng)關(guān)閉的,可能是因?yàn)樘崾颈容^重要,和引導(dǎo)的作用類似,但是不建議這樣設(shè)計(jì)。
它是安卓的系統(tǒng)控件,和toast類似,區(qū)別就是它可以進(jìn)行操作,比較少見(jiàn),提示文字(+button,不能加icon),介于toast和彈框之間,點(diǎn)擊后消失或是幾秒后自動(dòng)消失,一般出現(xiàn)在頁(yè)面底部。
希望對(duì)你有所幫助,有不同的見(jiàn)解或是補(bǔ)充可以在下面一起留言探討。
作者:EasonZhang,公眾號(hào):Eason張UED(ID:EasonZhangUED)
本文由 @EasonZhang 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自Unsplash,基于CC0協(xié)議
熱門(mén)資訊
1. iPhone6的UI設(shè)計(jì)尺寸規(guī)范,原來(lái)如此重要!
想要了解iPhone6界面設(shè)計(jì)的尺寸規(guī)范嗎?這里為您詳細(xì)介紹iPhone6的UI設(shè)計(jì)尺寸規(guī)范,包括界面尺寸、圖標(biāo)尺寸、可點(diǎn)擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
2. 12個(gè)絕佳的UI設(shè)計(jì)網(wǎng)站,助力你的創(chuàng)作之旅!
將為大家介紹12個(gè)絕佳的UI設(shè)計(jì)網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個(gè)面向設(shè)計(jì)師的...
3. 移動(dòng)端UI設(shè)計(jì)中常見(jiàn)的5種APP界面類型,你get到了嗎?
通過(guò)介紹移動(dòng)端UI設(shè)計(jì)中的閃屏頁(yè)、引導(dǎo)頁(yè)、浮層引導(dǎo)頁(yè)、空白頁(yè)和首頁(yè)等5種APP界面類型,幫助大家更好地了解UI設(shè)計(jì)的基本知識(shí)
4. 10個(gè)免費(fèi)學(xué)習(xí)UI設(shè)計(jì)的網(wǎng)站 提升你的設(shè)計(jì)能力
怎樣可以提升你的UI設(shè)計(jì)能力!第一個(gè):站酷站酷想必是設(shè)計(jì)師都知道的一個(gè)網(wǎng)站,里面不止有UI設(shè)計(jì)的資源,還有其他設(shè)計(jì)的,不如:平面設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、字體...
5. 移動(dòng)端列表頁(yè)和表單頁(yè)設(shè)計(jì)秘訣:讓你的APP點(diǎn)擊率翻倍
在移動(dòng)端設(shè)計(jì)中,列表頁(yè)和表單頁(yè)是不可或缺的部分。一個(gè)好的列表頁(yè)和表單頁(yè)設(shè)計(jì)能夠讓用戶輕松地獲取信息并產(chǎn)生點(diǎn)擊欲望,從而提高點(diǎn)擊率。本文將為你...
6. 推薦10本適合UI設(shè)計(jì)師看的書(shū)籍,輕松掌握技能!
對(duì)于想要提高自己的設(shè)計(jì)能力和創(chuàng)造力的小白和UI設(shè)計(jì)師來(lái)說(shuō),這本書(shū)是一個(gè)很好的選擇。4.《設(shè)計(jì)的覺(jué)醒》(IKKO TANAKA)推薦理由: 這本書(shū)是日本現(xiàn)代平面...
7. 零基礎(chǔ)學(xué)UI設(shè)計(jì)要多久?培訓(xùn)完能拿多少工資?
探索零基礎(chǔ)UI設(shè)計(jì)培訓(xùn)的時(shí)長(zhǎng)與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程,以及培訓(xùn)后的職業(yè)發(fā)展機(jī)會(huì)。
8. 物聯(lián)網(wǎng)APP UI設(shè)計(jì):創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗(yàn)
ui設(shè)計(jì)應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計(jì)過(guò)程中,應(yīng)盡量使用簡(jiǎn)潔的圖標(biāo)、文字和色彩,避免過(guò)多的視覺(jué)干擾。符合用戶習(xí)慣:ui設(shè)...
9. 武漢UI設(shè)計(jì)培訓(xùn)班費(fèi)用怎么樣?想學(xué)UI設(shè)計(jì)要多少錢(qián)?
想了解武漢UI設(shè)計(jì)培訓(xùn)班的費(fèi)用是多少嗎?不知道學(xué)UI設(shè)計(jì)要花多少錢(qián)?不妨看看這篇文章,了解UI設(shè)計(jì)培訓(xùn)班的學(xué)費(fèi)價(jià)格以及學(xué)習(xí)內(nèi)容。
10. 設(shè)計(jì)中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計(jì)應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計(jì)應(yīng)用。通過(guò)對(duì)色彩在早期文明社會(huì)中的實(shí)用運(yùn)用、不同文化背景下色彩觀念的差異、色彩在設(shè)計(jì)中的重要性以及新興技...
最新文章
同學(xué)您好!