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