Date 2025-03-14 16:51:44
弹出框架是一种交互方式，用于提醒、决策或解决任务。弹出框架通常包括一个蒙版、一个主题和一个关闭入口，这在网页和移动终端上很常见。它的优点是使用户更加专注，无需离开当前页面，更快更容易完成任务。由于弹出框架在表现形式上与当前流行的卡片设计非常接近，弹出框架逐渐承载了更多的功能需求，不再是简单的内容堆叠，因此弹出框架设计越来越受到设计师的关注。
当你真正开始设计一个弹框时， 第一个问题是弹出框的大小。市场上各种尺寸的屏幕分辨率，如果您想适应一个尺寸的所有屏幕分辨率，请参考以下数据。
2016年5月，中国市场主流计算机分辨率统计Top 5 (数据来源于百度统计)
从上图可以看出，市场上最小的屏幕是1024×768，所以只要保证放在这个尺寸， 其他尺寸肯定没有问题。弹出框的宽度一般不会太宽，1000px通常足够。以Windows为例，删除系统底部功能条和浏览器的高度后，可以得到：
768px – 约60~100px(浏览器高度) – 40px(系统底部工具栏高度) = 约620px
弹出框架的高度控制在620px以内，可以避免在小屏幕下滚动一点，看到整个弹出框架的尴尬情况。假设弹出框架本身有一个滚动条，因为页面超过一个屏幕和一个全球滚动条，整个滚动体验将变得非常糟糕。因此，从体验和开发成本的角度来看，我们通常将弹出框架控制在620px以内，而根据经验，该尺寸的弹出框架占90%。
由于屏幕的尺寸越来越大，有时为了在大屏幕下有更好的视觉性能，你可以选择适应一些更复杂的弹出框架。以下两个例子为例：
在Marvel的新项目弹框中，弹框尺寸为640px(宽)x760px(高);
在小屏幕下，选项和Icon会缩小，弹框尺寸会变成640px(宽)x620px(高)
在Invision的升级弹框中，列表的行距在大屏幕下相对宽松，弹框尺寸为1100px(宽)x800px(高);
在小屏幕下，列表的高度降低，弹框尺寸为1100px(宽)x630px(高)。
当然，也可以根据屏幕尺寸拉伸面板尺寸。这里有很多方法可以处理。总之，如果弹性框架尺寸较大，则需要考虑兼容性方案，相对设计和开发成本也会增加。
在设计中，我发现我经常遇到一种情况，是用弹出框还是用页面来承载内容？如果你了解了弹出框的特点，就不难区分什么时候使用这种表达技术更合适。
弹框特性:
– 它比页面轻，可以更快地回到以前的页面– 相对独立可以完全不影响页面的布局– 适用于简单、一次性操作的解决方案
以下列出了一些更适合使用弹框的场景和案例：
第一感觉很重要。Google+而carbonmade的新手指南使用了一个带有漂亮插图的弹出框。这种处理方法美观，不影响页面布局。卡片式的表达方式也可以贯穿网页和移动的一致体验。
Google Photos的新手引导结合了微动画，效果惊人，令人难忘。
选择器的特点是用内滚区承载一个长页，而内滚区高度可以根据浏览器的高度拉伸。其优点是，除了放下长页面外，还可以保留一些操作始终停留在屏幕上。在这里，您可以有选择地为弹出框架设置最大和最小高度，但需要注意的是，背景必须锁定，否则两个滚动条的体验将非常糟糕。以QQ公共平台的图形选择器为例：
Flickr图片选择器。
有时有些任务只是一些简单的操作，并不特别需要一个页面来表达，弹框是一种很好的方法。
Duolingo使用插图、icon等视觉元素来丰富任务弹框的表现形式，减少无聊感。
虽然Trello的任务弹框有很多信息，但其优点是可以快速切换到不同的任务，提高效率。
提示是最基本的弹框应用程序，设计时要记住要保持统一。视觉统一： 颜色、间距、文案风格等。交互的统一: 主要操作是左右按钮，点击蒙版或叉叉关闭。
腾讯企点提示弹框整理:
1. 背景锁定和滚动条引起的抖动问题
浏览网页时，你经常会发现弹出框出现后，当鼠标滚动时，蒙版下面的页面仍然可以滚动。事实上，这些滚动是不必要的，因为弹出框的初衷是关注用户的注意力。
所以我们要做的就是 – 背景锁定(从技术角度看，滚动条实际上是暂时干掉的)。
前端学生的技术原理如下：
当Dialog弹框出现时，根元素overflow:hidden.
此时，由于页面滚动条从有到无，页面会晃动，这种糟糕的体验显然是无法忍受的，所以，是的<body>处理元素，右侧增加滚动条宽度(假设宽度为widthScrolbar)的透明边框。
隐藏Dialog时，放开滚动条。
2.避免弹出弹出框上弹出弹出框
尽量避免在弹框上弹一层弹框，两层蒙版会让用户感到沉重的负担。可以用轻弹框或者重新整理交互。
3.蒙版增强品牌感
下一篇：【名人专访】自然之道艺术展访谈录之刘辉平：让艺术自然化 让生
红喵教育公众号
•免费课程• 免费基础课程学习
版权所有©红喵教育
邮箱：vip@xiaomaoaixue.com
备案号：湘ICP备19025583号-1
湘公网安备43019002002199
电话：400-090-8899
