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