APP彈窗的分類及設(shè)計(jì)技巧

刷了很多文章,看到各式各樣的彈窗分類,今天總結(jié)一下。

什么是彈窗?

彈窗又稱為對(duì)話框,是App與用戶進(jìn)行交互的常見方式之一。彈窗分為模態(tài)彈窗和非模態(tài)彈窗兩種,兩者的區(qū)別在于需不需要用戶對(duì)其進(jìn)行回應(yīng)。模態(tài)彈窗會(huì)打斷用戶的正常操作,要求用戶必須對(duì)其進(jìn)行回應(yīng),否則不能繼續(xù)其它操作;非模態(tài)彈窗則不會(huì)影響用戶的操作,用戶可以不對(duì)其進(jìn)行回應(yīng),非模態(tài)彈窗通常都有時(shí)間限制,出現(xiàn)一段時(shí)間后就會(huì)自動(dòng)消失。

無論是模態(tài)還是非模態(tài),彈窗都是位于當(dāng)前頁面的最頂層。模態(tài)彈窗常常都還會(huì)伴隨半透明的遮罩來吸引用戶的視覺焦點(diǎn),以突出彈窗的信息內(nèi)容。非模態(tài)彈窗一般被設(shè)計(jì)成用來告訴用戶信息內(nèi)容,而模態(tài)彈窗除了告訴用戶信息內(nèi)容外還需要用戶進(jìn)行功能操作。

常見的彈窗分類用下面這個(gè)圖就可以解釋清楚啦~

(麻麻說自己做的圖要寫上大名)

1. Dialog(Alerts)

需要用戶對(duì)彈窗進(jìn)行操作后才能執(zhí)行其他操作。優(yōu)勢(shì)在于提醒明顯,能夠?qū)τ脩粜袨檫M(jìn)行定向性預(yù)測(cè)。

(圖片來自網(wǎng)絡(luò))

2. Actionbar(Action Sheets、Acitivity Views)

提供用戶多種選擇的彈窗,此為用戶主動(dòng)發(fā)出操作。優(yōu)勢(shì)在于可以承載多種選項(xiàng),實(shí)現(xiàn)多應(yīng)用之間操作。

(圖片來自網(wǎng)絡(luò))
(圖片來自網(wǎng)絡(luò))

3. Popover

用戶單擊某個(gè)控件或頁面某個(gè)區(qū)域后出現(xiàn)的臨時(shí)復(fù)層,通??梢栽俅坞[藏。優(yōu)勢(shì)在于用戶操作時(shí)頁面邏輯清晰,當(dāng)前頁面因隱藏多項(xiàng)低頻操作使得界面簡(jiǎn)潔。

(圖片來自網(wǎng)絡(luò))

4. Toast/HUD

信息給予用戶及時(shí)反饋,確保用戶知曉自己所處的狀態(tài),并做出相應(yīng)的措施。優(yōu)勢(shì)在于提示輕盈,不會(huì)對(duì)用戶操作帶來太大阻礙。

(圖片來自網(wǎng)絡(luò))
(圖片來自網(wǎng)絡(luò))

5. Snackbar

向用戶反饋信息,可以交互。優(yōu)勢(shì)可以弱化提醒的同時(shí),增加操作。

(圖片來自網(wǎng)絡(luò))


對(duì)于UI設(shè)計(jì)師而言,理論上的分類清晰還遠(yuǎn)遠(yuǎn)不夠,還需要針對(duì)視覺、文案、以及其他商業(yè)需求進(jìn)行權(quán)衡。常見的有以下方面:

【視覺方面】

1. 彈窗文案簡(jiǎn)潔,表意清晰無歧義

比如,彈窗提醒文字為“是否要?jiǎng)h除該項(xiàng)?”,操作為“是”和“否”會(huì)讓用戶猶豫不清是刪除還是不是刪除,若換成“刪除”和“取消”就不會(huì)有歧義了。

2. 設(shè)計(jì)風(fēng)格盡量簡(jiǎn)約

3. 彈窗的設(shè)計(jì)風(fēng)格可以根據(jù)應(yīng)用設(shè)計(jì)風(fēng)格進(jìn)行重塑

比如,微博Toast彈窗就根據(jù)微博整體風(fēng)格進(jìn)行設(shè)計(jì)。

4. 可進(jìn)行誘導(dǎo)性設(shè)計(jì)

常見的如希望用戶點(diǎn)擊的按鈕放在右邊,放大點(diǎn)擊按鈕弱化關(guān)閉按鈕等。

5. 危險(xiǎn)操作需警示

如刪除時(shí)需要將“刪除”操作警示。

【交互方面】

1. 彈窗的出現(xiàn)盡量不干擾用戶使用

2. 具有同種層級(jí)的彈窗使用相同的樣式

3. 同種Toast彈窗位置保持相同

4. 注意彈窗頻率

今天先整理些理論,明天的文章會(huì)從可操作的方法講述彈窗如何制作。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 本文約3000字,建議閱讀15分鐘。 彈窗又稱為對(duì)話框,是App與用戶進(jìn)行交互的常見方式之一。彈窗分為模態(tài)彈...
    男良熊閱讀 102,656評(píng)論 45 514
  • 1、通過CocoaPods安裝項(xiàng)目名稱項(xiàng)目信息 AFNetworking網(wǎng)絡(luò)請(qǐng)求組件 FMDB本地?cái)?shù)據(jù)庫組件 SD...
    陽明AI閱讀 16,228評(píng)論 3 119
  • 辭海的海 畢業(yè)后第一次嘗試寫作,沒有靈感,有些迷茫,那么,就從我自己開始寫吧。 辭海的海,是我的筆名,無戒老師說重...
    辭海的海閱讀 697評(píng)論 4 5

友情鏈接更多精彩內(nèi)容