AXURE原型設(shè)計(jì):移動(dòng)端消息提醒彈窗原型的應(yīng)用
由于移動(dòng)社區(qū)具有互動(dòng)隨時(shí)隨地、互動(dòng)頻繁和互動(dòng)及時(shí)性的特點(diǎn),所以消息提醒幾乎是每個(gè)app軟件的必備元素,本文作者從消息提醒彈窗的作用出發(fā),對(duì)消息彈窗不同種類的樣式以及原型進(jìn)行了梳理總結(jié),與大家分享。
01 消息提醒的彈窗的作用
一般而言,消息提醒彈窗的作用是提醒用戶某件事情,有成功、警告、錯(cuò)誤等提醒。
- 成功提醒:告知用戶成功完成某件事情,例如登錄成功時(shí),系統(tǒng)告知用戶正在登錄中
- 警告提醒:提醒用戶某件事情,例如,關(guān)閉瀏覽器頁(yè)面時(shí),系統(tǒng)提醒是否確認(rèn)退出
- 錯(cuò)誤提醒:提醒用戶某件事情錯(cuò)誤,例如,密碼輸入錯(cuò)誤時(shí),系統(tǒng)告知用戶密碼錯(cuò)誤
02 消息提醒的彈窗的種類
移動(dòng)端的消息提醒彈窗按不同的分類方法可以分成不同的類別,按照位置分類的話,可以分成頂部彈窗、中部彈窗、底部彈窗。按功能分的話,可以簡(jiǎn)單分為提示彈窗和等待彈窗。
1. 頂部彈窗
頂部彈窗常用于消息提示,例如像微信新消息,或者其他軟件推送的新消息,又或者向手機(jī)短信驗(yàn)證碼這種也是屬于頂部彈窗。那我們?cè)谠O(shè)計(jì)的時(shí)候,要注意頂部彈窗顯示時(shí)有一個(gè)向下滑動(dòng)的動(dòng)作,隱藏時(shí)有一個(gè)向上滑動(dòng)的動(dòng)作,除此之外,像短信驗(yàn)證碼這種,還需要有復(fù)制按鈕。
2. 中部彈窗
中部彈窗是消息提醒彈窗的重點(diǎn),因?yàn)橹胁績(jī)?nèi)容是用戶注意力最集中的地方,所以重要的提示信息都會(huì)放在中部。所以中部提示也分了多種情況
- 確認(rèn)取消提示:需要用戶確認(rèn)或者取消某個(gè)操作,例如轉(zhuǎn)賬支付的時(shí)候,一般系統(tǒng)都會(huì)讓用戶再次確認(rèn)是否支付。
- 確認(rèn)提示:這個(gè)的提示只有確認(rèn)按鈕,目的是強(qiáng)調(diào)某件事情,例如人臉識(shí)別失敗時(shí),提示用戶正對(duì)鏡頭等等,起到一個(gè)強(qiáng)提示的效果。
- 多選確認(rèn)取消提示:這個(gè)是在確認(rèn)取消提示的基礎(chǔ)上,可以讓用戶選擇記住某項(xiàng)操作,例如退出某項(xiàng)軟件時(shí),是否要清楚歷史記錄等等信息,用戶可以一鍵勾選。
- 自動(dòng)隱藏提示:這個(gè)屬于輕提示,也是經(jīng)常用到的,作用是告知用戶某件事情,用戶不需要任何操作,提示在幾秒內(nèi)自動(dòng)消失。例如密碼輸入錯(cuò)誤時(shí),系統(tǒng)提示用戶名或密碼錯(cuò)誤,請(qǐng)重新輸入,這種情況就比較適用輕提示。
設(shè)計(jì)思路:中部彈窗由圖標(biāo)(可省略,有會(huì)更美觀)、提醒標(biāo)題(可省略)、提示內(nèi)容、按鈕(由確認(rèn)、取消、選擇按鈕,可根據(jù)實(shí)際情況選擇)組成,制作時(shí)選擇需要的內(nèi)容后轉(zhuǎn)為動(dòng)態(tài)面板放置在手機(jī)中部位置即可,自動(dòng)隱藏提示彈窗還需要設(shè)置自動(dòng)隱藏時(shí)間。
3. 底部彈窗
底部彈窗一般用于app的授權(quán)、安裝等情況比較多,它和中部確認(rèn)取消彈窗性質(zhì)相識(shí),只是位置處于手機(jī)底部。
上面介紹的3種彈窗都是屬于提示類型的彈窗,下載介紹一下等待彈窗。
4. 等待彈窗
等待彈窗一般是用于加載、上傳等需要用戶等待的情況,一般有以下幾種分類:
有進(jìn)度條的等待頁(yè)面(下圖左1):這種一般適用于上傳文件,或者需要等待時(shí)間較長(zhǎng),這是需要給用戶一個(gè)返回,知道大概需要多久,避免用戶關(guān)閉,刷新等。
沒(méi)有進(jìn)度條的等待頁(yè)面(下圖234):這種是一般需要切換到新的頁(yè)面,并且加載時(shí)間不會(huì)太長(zhǎng),一般適用動(dòng)態(tài)效果讓用戶不容易不耐煩,一般可以使用卡通(下圖2)、炫酷(下圖4)的加載效果,如果想用戶記住您們的品牌也可以使用下圖三的加載效果,包括了app名稱和solgan,能夠讓用戶加印象。
等待小彈窗(下圖5),這種加載彈窗一般適用于不離開本頁(yè)面,但需要用戶等待很多一段時(shí)間,例如像輸入身份證號(hào)碼和姓名后,系統(tǒng)需要聯(lián)網(wǎng)核查確認(rèn)信息是否正確,在等待公安局系統(tǒng)返回信息的時(shí)候,就可以使用這種等待小彈窗了。
那以上就是本期關(guān)于移動(dòng)端常用的消息彈窗介紹的全部?jī)?nèi)容,主要是基于我個(gè)人在實(shí)際工作中需要用到的原型,而設(shè)計(jì)出來(lái)的axure組件。
如果大家有所收獲,希望可以點(diǎn)贊鼓勵(lì)一下,也歡迎大家交流,謝謝。
本文由 @秀 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自Unsplash,基于CC0協(xié)議
原型預(yù)覽及下載地址:
https://axhub.im/ax9/aa837f6071f22bda