這幾天在工作中處理了一個歷史遺留問題：彈窗適配，幾經(jīng)折騰終于落定發(fā)包。于是我也趁著這個機(jī)會把彈窗體系梳理研究了一遍。

我們常見的彈窗有對話框，提示框，有時候在需求溝通中經(jīng)常會聽到產(chǎn)品同學(xué)說，給這里加個彈窗，那里加個提示框吧。實(shí)際上，這個彈窗到底該不該加？這個彈窗承載的是提示說明文字內(nèi)容，還是需要引導(dǎo)用戶下一步操作？接下來我們從彈窗的屬性來聊聊我們的彈窗到底在什么時候加比較合適？用什么形態(tài)展示體驗(yàn)會更好？

彈窗體系：模態(tài)與非模態(tài)

模態(tài)彈窗：是指在用戶任務(wù)中，終止了用戶的上一步行為。也就是說，這個模態(tài)彈窗必須要用戶操作才可以進(jìn)行下一步動作。所以在產(chǎn)品設(shè)計(jì)中，我們通常會用模態(tài)彈窗引導(dǎo)用戶去做我們要他做的操作。

常見的模態(tài)彈窗有這幾種：對話框、動作欄、浮層。

對話框：對話框主要是給用戶提供選項(xiàng)、相關(guān)的操作。另外，在一些對話框中，也可以展現(xiàn)圖片、頭像、步驟圖、其它輸入項(xiàng)等。

動作欄：常見的動作欄一般會出現(xiàn)屏幕下方，比如選擇某個內(nèi)容時候，出現(xiàn)的選擇。

浮層：彈出窗口，浮動于頂層窗口，氣泡。

非模態(tài)彈窗：是指不強(qiáng)制用戶操作，他的作用相當(dāng)于內(nèi)容信息提示，他的出現(xiàn)不打擾用戶的當(dāng)前操作，并且有時間限制，在一定時間里能自動消失。比如「xxx 功能已更新哦」，這種提示是不需要用戶點(diǎn)擊操作，讓用戶看到就可以了。

常見的非模態(tài)彈窗有這幾種：toast/hud、snackbar、notice（通知）

toast/hud：iOS 用戶更習(xí)慣于在中間感知反饋信息，通常在信息提示完 3 秒左右后會消失，安卓通常會出現(xiàn)在屏幕頂部或者下部，不會遮擋主體內(nèi)容。需要注意的是 toast 只有文字，hud 是可以帶有圖標(biāo)的。

snackbar；可以理解為加強(qiáng)版的 Toast

notice：系統(tǒng)消息、通知推送，也是不干擾用戶行為，有消失時間，是非模態(tài)的彈窗。

什么場景下使用什么彈框

了解完彈窗體系后，我們就可以針對具體場景來看產(chǎn)品同學(xué)說加個彈窗到底合適不合適？我們可以從下面的幾個使用場景來看用什么樣的彈窗合適。

1. 重要打斷用戶操作

在一些重要操作，避免用戶操作失誤。不過目前很多人都覺得這類彈框有利有弊，有的地方出現(xiàn)得不合時宜，打斷了用戶的使用狀態(tài)。所以在設(shè)計(jì)這類彈框時要非常謹(jǐn)慎，得通過多研究確認(rèn)是否有必要出現(xiàn)。

對話框相對來說比動作欄更重要，因?yàn)樵谝曈X中心，更能強(qiáng)烈引起用戶的重視，對于十分重要的內(nèi)容需要打斷用戶上一步任務(wù)的，采用對話框的彈窗，對于不是特別重要信息露出又需要終止用戶上一步動作的情況下，一般采用動作欄彈框。

2. 定制化廣告彈窗

如功能更新、升級、優(yōu)惠券彈窗。這一類一般是強(qiáng)制用戶看到的，要展示出與眾不同的特色，在視覺上比較突出，會使用模態(tài)的彈窗浮層形式。

3. 給予一定提示

比如提示用戶狀態(tài)、信息、反饋，確保用戶知曉自己所處的狀態(tài)，并可以做出相應(yīng)的措施。一般使用非模態(tài)的彈窗。

4. 用戶操作反饋

出現(xiàn)在用戶操作完之后的反饋，比如提醒用戶頁面正在加載中、保存成功、已刪除、已刷新等等。

可以不用彈窗的反饋例子：完成頁

比如已支付成功、下載完畢、簽到成功，這一類是告訴你上個動作結(jié)束了，下一步不需要進(jìn)行引導(dǎo)了，這種反饋大多數(shù)都不采用彈窗形式展現(xiàn)了。

需要注意事項(xiàng)

1. 層級關(guān)系

彈框是內(nèi)容和導(dǎo)航的補(bǔ)充，用于通知、操作菜單、成功或加載狀態(tài)的 toast，他是寫在蒙層上面的一層內(nèi)容。

2. 適配方式

下面我們需要了解的是這幾種彈窗在開發(fā)那的實(shí)現(xiàn)形式。我們可以理解為 2 種形式：

一種是開發(fā)直接用系統(tǒng)的接口，缺點(diǎn)是具有不可定制，形式美觀度不夠好。

另一種是開發(fā)用代碼會單獨(dú)寫出一個模態(tài)彈框系統(tǒng)，這套系統(tǒng)與整體設(shè)計(jì)語言具有一致性，可以復(fù)用在各個任務(wù)中，可以定制化設(shè)計(jì)。

需要注意的是，代碼寫出來的模態(tài)樣式要考慮在不同機(jī)型的適配情況，考慮不同機(jī)型的邊界。這個適配也有兩種實(shí)現(xiàn)形式，一種是固定寬高尺寸，展示在不同機(jī)型尺寸中，另一種是常用的等比例縮放。這個就需要開發(fā)與設(shè)計(jì)進(jìn)行密切的溝通，能盡量合理地在不同機(jī)型展現(xiàn)更加合適，避免出現(xiàn)極限的情況。

我們是這樣操作的，為了避免尺寸比例混亂的情況，會設(shè)計(jì)一個彈窗的寬高尺寸范圍，開發(fā)同學(xué)代碼寫出的這套彈窗的適配在各個機(jī)型中，是在一定縮放比例下，適用各個不同情況下的視覺展示。這套彈窗可以調(diào)用在首頁引導(dǎo)、升級等各個頁面的彈窗設(shè)計(jì)中。

文章來源：優(yōu)設(shè)    作者：詠舍