交互設(shè)計(jì)——彈窗設(shè)計(jì)

時(shí)間：2023-07-22 13:54:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-22 13:54:01 來源：網(wǎng)站運(yùn)營(yíng)

交互設(shè)計(jì)——彈窗設(shè)計(jì)：無(wú)論是模態(tài)還是非模態(tài)，彈窗都是位于當(dāng)前頁(yè)面的最頂層







Toast（提示框）

Toast提示框是一種非模態(tài)彈窗，它彈出一個(gè)小信息，作為提醒或消息反饋來用，一般用來顯示操作結(jié)果，或者應(yīng)用狀態(tài)的改變。

考慮到Toast提示框顯示的時(shí)間較短（一般只有幾秒種）、占用區(qū)域不大，它很容易被用戶忽略，所以Toast不適合承載過多的文字和重要信息。







Dialog（對(duì)話框）

Dialog對(duì)話框是一種模態(tài)彈窗。當(dāng)用戶進(jìn)行了敏感操作，或者當(dāng)App內(nèi)部發(fā)生了較為嚴(yán)重的狀態(tài)改變，這種操作和改變會(huì)帶來影響性比較大的行為結(jié)果，在該結(jié)果發(fā)生前應(yīng)以Dialog的彈窗形式告知用戶且讓用戶進(jìn)行功能選擇。

一般情況下Dialog由標(biāo)題、信息內(nèi)容和功能按鈕組成，只有當(dāng)用戶點(diǎn)擊了某個(gè)功能按鈕后彈窗才會(huì)消失，App隨即執(zhí)行該功能操作，進(jìn)入相應(yīng)的功能流程。

Dialog的標(biāo)題和信息內(nèi)容的文字描述都要設(shè)計(jì)成盡可能的簡(jiǎn)潔和無(wú)異義，也可以選擇省略標(biāo)題只保留內(nèi)容描述和功能按鈕，功能按鈕最好只有兩個(gè)（是/否），如果不是特別重要的信息，盡量不要打斷用戶，選擇Toast。







Actionbar（功能框）

Actionbar功能框可以看成是無(wú)法繼續(xù)其它操作。Actoinbar比Dialog擁有更多的功能按鈕，提供給用戶更多的功能選擇，Acionbar一般都設(shè)計(jì)有一個(gè)默認(rèn)的“取消”功能按鈕，點(diǎn)擊該按鈕后關(guān)閉彈窗，用戶點(diǎn)擊彈窗以外的區(qū)域時(shí)相當(dāng)于進(jìn)行了點(diǎn)擊“取消”功能按鈕的默認(rèn)回應(yīng)。Actionbar一般被設(shè)計(jì)用來向用戶展示多個(gè)功能按鈕選擇。

在iOS中，Actionbar的樣式比較常見的是文字列表框，它出現(xiàn)在頁(yè)面底部，以簡(jiǎn)潔的功能描述性文字展示功能按鈕，敏感的功能操作一般用紅色字體標(biāo)出（也可以設(shè)計(jì)其它顏色以突出某個(gè)功能按鈕）。




當(dāng)功能按鈕數(shù)量很多的時(shí)候，文字列表的形式不適合顯示，此時(shí)可以用圖形加文字描述排列的形式來進(jìn)行展示。這種樣式下需要注意彈窗內(nèi)各功能按鈕的UI設(shè)計(jì)和排列布局。




在安卓系統(tǒng)中，Actionbar還經(jīng)常被設(shè)計(jì)成“選擇列表框”（其實(shí)就是用選項(xiàng)代替了功能按鈕），比如安卓版的微信App中就是用這種設(shè)計(jì)方式讓用戶進(jìn)行性別選擇。這種設(shè)計(jì)方式的好處是減少了功能流程中的頁(yè)面跳轉(zhuǎn)，但是如果選項(xiàng)很多而且描述文字較多的時(shí)候，還是設(shè)計(jì)成選項(xiàng)詳情頁(yè)面會(huì)更好些。







Snackbar(提示對(duì)話框)

Snackbar提示對(duì)話框是安卓系統(tǒng)的特色彈窗之一（安卓平臺(tái)在開發(fā)的時(shí)候可以直接調(diào)用Snackbar類生成該彈窗，iOS好像也可以進(jìn)行定制化設(shè)計(jì)開發(fā)），它也是一種非模態(tài)彈窗，同時(shí)擁有Toast和Dialog的特點(diǎn)，不會(huì)打斷用戶正常的操作流程，它除了可以告訴用戶信息內(nèi)容，還可以與用戶進(jìn)行對(duì)話交互（用戶可以點(diǎn)擊功能按鈕進(jìn)行回應(yīng)）。

使用分場(chǎng)景：若下方空白多 可用snackbar ，如下方文字內(nèi)容、動(dòng)態(tài)元素等等多的話就用Toast。