什么是彈框？彈框是一種作為提醒、做決定或解決的交互方式。彈框一般包括蒙版、主體和關(guān)閉入口，在網(wǎng)頁和移動(dòng)端都很常見。其優(yōu)點(diǎn)是讓用戶更加專注，不離開當(dāng)前頁面，更快更容易完成任務(wù)。由于彈框與流行的卡片設(shè)計(jì)非常接近，彈框逐漸承載了更多的功能需求，不再是簡(jiǎn)單的內(nèi)容堆疊，彈框設(shè)計(jì)越來越受到設(shè)計(jì)師的關(guān)注。如何確定彈框尺寸？當(dāng)你真正開始設(shè)計(jì)一個(gè)彈框時(shí)，你遇到的問題是彈框的應(yīng)該設(shè)定多大。市場(chǎng)上各種尺寸的屏幕分辨率，如果您想適應(yīng)一個(gè)尺寸的所有屏幕分辨率，請(qǐng)參考以下數(shù)據(jù)。2016年5月市場(chǎng)主流計(jì)算機(jī)分辨率統(tǒng)計(jì)Top5(數(shù)據(jù)來源于百度統(tǒng)計(jì)) 從上圖可以看出，市場(chǎng)上的小屏幕是1024×768，所以只要這個(gè)尺寸能放下，其他尺寸肯定沒問題。彈框的寬度一般不會(huì)太寬，1萬px通常是足夠的。高度的話，以Windows例如，在去除系統(tǒng)底部功能條的高度和瀏覽器的高度后，可以得出結(jié)論：768px–約60~100px(瀏覽器高度)–40px(系統(tǒng)底部工具欄高度)=約620px 彈框高度控制在620px以內(nèi)，可以避免在小屏幕下滾動(dòng)一點(diǎn)看整個(gè)彈框的尷尬局面。假設(shè)彈框本身有滾動(dòng)條，因?yàn)轫撁娉^一個(gè)屏幕和一個(gè)全球滾動(dòng)條，整個(gè)滾動(dòng)體驗(yàn)會(huì)變得很差。假設(shè)彈框本身有有一個(gè)滾動(dòng)條，因?yàn)轫撁娉^一個(gè)屏幕和一個(gè)全球滾動(dòng)條，整個(gè)滾動(dòng)體驗(yàn)將變得非常糟糕。因此，從經(jīng)驗(yàn)和開發(fā)成本的角度來看，我們通常將彈出框控制在620px根據(jù)經(jīng)驗(yàn)，這個(gè)尺寸的彈框占場(chǎng)景的90%。由于屏幕的尺寸越來越大，有時(shí)為了在大屏幕下有更好的視覺性能，你可以選擇適應(yīng)一些更復(fù)雜的彈出框。以下兩個(gè)例子為例：Marvel在大屏幕下的新項(xiàng)目彈框中，彈框尺寸為640px(寬)x760px(高);選項(xiàng)及在小屏幕下Icon彈框尺寸會(huì)縮小到640px(寬)x620px(高) InVision在大屏幕下，列表行距寬松，彈框尺寸1100px(寬)x800px(高);在小屏幕下，列表的高度降低，彈框尺寸為1100px(寬)x630px(高)。 當(dāng)然，面板的尺寸也可以根據(jù)屏幕尺寸拉伸。 當(dāng)然，面板的尺寸也可以根據(jù)屏幕尺寸拉伸。這里有很多方法可以處理。總之，如果彈出框架尺寸較大，則需要考慮兼容性方案，相對(duì)設(shè)計(jì)和開發(fā)成本也會(huì)增加。