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

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

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

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

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

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

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

浮層：彈出窗口，浮動(dòng)于頂層窗口，氣泡。

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

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

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

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

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

什么場景下使用什么彈框

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

1. 重要打斷用戶操作

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

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

2. 定制化廣告彈窗

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

3. 給予一定提示

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

4. 用戶操作反饋

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

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

比如已支付成功、下載完畢、簽到成功，這一類是告訴你上個(gè)動(dòng)作結(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ā)用代碼會(huì)單獨(dú)寫出一個(gè)模態(tài)彈框系統(tǒng)，這套系統(tǒng)與整體設(shè)計(jì)語言具有一致性，可以復(fù)用在各個(gè)任務(wù)中，可以定制化設(shè)計(jì)。

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

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

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