最近2年一直在做WebApp相关项目，设计过上百个弹框，其中总结了一些心得，将透过以下文章介绍弹框在Web上的各种应用﹑技巧及表现。
什么是弹框?
弹框是一种交互方式，用作提醒，做决定或者解决某个任务。弹框一般包含一个蒙版，一个主体及一个关闭入口，常见于网页及移动端。其好处是让用户更聚焦，且不用离开当前页面，更快更容易完成任务。由于弹框与当下流行的卡片式设计在表现形式上十分接近，同时弹框也逐渐承载了更多功能性需求，不再是简单的内容堆砌，因此弹框设计正在被越来越多设计师关注。
弹框尺寸怎么定?
在真正着手设计一个弹框时, 第一个遇到的问题就是弹框的尺寸到底要定多大。市面上各种各样尺寸的屏幕分辨率，如果你希望以一个尺寸适配所有屏幕分辨率，那可以参考以下数据。
2016年5月中国市场主流电脑分辨率统计Top 5 (资料来源自百度统计)
从上图得知市面上最小的屏幕是1024x768,因此只要保证在这个尺寸放得下, 其他尺寸也肯定没有问题。弹框的宽度一般不会太宽，1000px通常是足够有余的。高度的话，以Windows为例，去掉系统底部功能条的高度及浏览器的高度后，可以得出:
768px - 约60~100px(浏览器高度) - 40px(系统底部工具栏高度) = 约620px
弹框高度控制在620px以内，可以避免在小屏幕下滚动一点点才能看全整个弹框的尴尬情况。假设弹框本身有滚动条，页面因为超出一屏又有一个全局滚动条，那整个滚动体验就会变得很差。因此从体验角度及开发成本来看，我们一般会把弹框控制在620px高以内，而根据经验所得，这个尺寸内的弹框占了90%场景。
由于屏幕的尺寸愈来愈大，有时候为了在大屏幕下有更好的视觉表现，对于一些较复杂的弹框，可以选择做2种尺寸适配。拿以下2个例子为例:
Marvel的新建项目弹框中，在大屏幕下，弹框尺寸为640px(宽)x760px(高);
在小屏幕下，选项及Icon则会缩小，弹框尺寸变成了640px(宽)x620px(高)
InVision的升级弹框中，在大屏幕下，列表的行距比较宽松，弹框尺寸为1100px(宽)x800px(高);
在小屏幕下，列表的高度则减小，弹框尺寸为1100px(宽)x630px(高)。
当然，也可以按屏幕尺寸拉伸面板的尺寸。这裡处理的方法很多，总而言之如果弹框尺寸做得大，就要想好兼容方案，相对设计及开发成本也会增加。
弹框的使用场景
在设计时发现经常会遇到一种情况，到底是用弹框还是用页面来承载内容呢?如果了解到弹框的特性后，其实不难分辨什么时候使用那个表现手法更适合。
弹框特性:
- 较页面轻，可以更快回到之前的页面
- 相对独立，可以完全不影响页面的布局
- 适合解决简单，一次性的操作
以下列出了一些较适合使用弹框的场景及案例:
1.新手引导
第一感觉是非常重要的。Google+及Carbonmade的新手引导采用了弹框，配上漂亮的插图。这种处理手法美观，不影响页面布局，卡片式的表现手法还能贯穿网页及移动的一致体验。
Google Photos的新手引导更结合了微动画，效果非常惊艳，让人过目不忘。
2.选择器
选择器的特点是用一个内滚区域来承载一个很长的页面，而该内滚区域的高度是可以根据浏览器的高度拉伸的。其好处是除了能放下很长的页面，同时能保留一些操作一直停留在屏幕上。这裡可以选择性的为弹框设置一个最大及最小高度，但要注意的是必须把背景锁定，否则出现2条滚动条的体验是很糟糕的。以QQ公众平台的图文选择器为例:
Flickr的图片选择器。
3.任务
有时候某些任务只是一些简单的操作，并不特地需要一个页面来表现，弹框是一个很好的方法。
Duolingo用插图和icon等视觉元素来丰富任务弹框的表现形式，减轻枯燥感。
Trello的任务弹框虽然信息较多，但好处是能快速切换到不同的任务，增加效率。
4.提示
提示是最基础的弹框应用，设计时需记往保持统一性。视觉上的统一性: 颜色，间距，文案风格等。交互的统一性: 主要操作是左边还是右边按钮，关闭是点击蒙版还是点击叉叉。
腾讯企点的提示弹框整理
几个容易被忽视的弹框细节
1.背景锁定与滚动条引起的抖动问题
浏览网页时经常会发现弹框出现后，滚动鼠标时，蒙版下面的页面还是可以滚动的，其实这些滚动都是没必要的，因为弹框的原意就是要聚焦用户的注意力。
因此我们要做的是 - 背景锁定(从技术角度其实是暂时性干掉滚动条)。
从前端同学扒出其技术原理如下：
当Dialog弹框出现的时候，根元素overflow:hidden.
此时，由于页面滚动条从有到无，页面会晃动，这样糟糕的体验显然是不能容忍了，于是，对元素进行处理，右侧增加一个滚动条宽度（假设宽度是widthScrollbar）的透明边框。
Dialog隐藏的时候再把滚动条放开。
2.避免弹框上再弹出弹框
要尽量避免在弹框上再弹一层弹框，2层蒙版会让用户觉得负担很重。可以改用轻量弹框或重新把交互梳理。
3.蒙版增强品牌感
过去我们对蒙版颜色可能没有仔细关注过，也许颜色不是纯黑#000，就是纯白#fff。其实蒙版的颜色及透明度可以再深入搭配的，例如产品是蓝色调性的可以在黑色中混入一点蓝色，产品是轻盈的可以用白色或淡灰色，或者尝试用没那么深的颜色搭配高一点透明度等等，根据产品的调性设计出一个适合产品气质的蒙版。
Tumblr的蒙版颜色採用了它的品牌色rgba(54,70,93,.95)
Twitch的蒙版颜色在黑色中混入了一点紫色rgba(32,28,43,.9)，与它的品牌色相符。
對弹框的其他思考
未来的趋势
移动在影响著人们生活，也同时引领著设计趋势，这些年产品都在追求多终端的一致性，早已衍生出自适应网页设计(Responsive Web Design)的布局解决方案，因此网页设计也日趋移动化。可以想像将会有一大波移动上的体验会搬到网页设计上，如弹框中包含多个层级，透过左上角返回的交互体验，更灵动及细腻的动画效果等。
视觉表现方面，之前也提到过，将会有更多产品会为了在大屏幕下有更好的视觉效果做出针对性的设计。而随著产品愈来愈追求简洁，UI也变得愈来愈轻盈，甚至透明。弹框也许不再需要用一个框框去包住主体。市面上已经有不少产品使用这种手法，以整个屏幕来取代框框。
这些也许是未来的一个趋势, 让我们拭目以待。
Squarespace的登录弹框
Evernote的修改标签弹框
原作者：JHong
文章来源：腾讯ISUX
本文系作者：
运营那些事儿
授权发表，鸟哥笔记平台仅提供信息存储空间服务。
本文为作者独立观点，不代表鸟哥笔记立场，未经允许不得转载。
《鸟哥笔记版权及免责申明》
如对文章、图片、字体等版权有疑问，请点击
反馈举报
我们致力于提供一个高质量内容的交流平台。为落实国家互联网信息办公室“依法管网、依法办网、依法上网”的要求，为完善跟帖评论自律管理，为了保护用户创造的内容、维护开放、真实、专业的平台氛围，我们团队将依据本公约中的条款对注册用户和发布在本平台的内容进行管理。平台鼓励用户创作、发布优质内容，同时也将采取必要措施管理违法、侵权或有其他不良影响的网络信息。
一、根据《网络信息内容生态治理规定》《中华人民共和国未成年人保护法》等法律法规，对以下违法、不良信息或存在危害的行为进行处理。
1. 违反法律法规的信息，主要表现为：
1)反对宪法所确定的基本原则；
2)危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一，损害国家荣誉和利益；
3)侮辱、滥用英烈形象，歪曲、丑化、亵渎、否定英雄烈士事迹和精神，以侮辱、诽谤或者其他方式侵害英雄烈士的姓名、肖像、名誉、荣誉；
4)宣扬恐怖主义、极端主义或者煽动实施恐怖活动、极端主义活动；
5)煽动民族仇恨、民族歧视，破坏民族团结；
6)破坏国家宗教政策，宣扬邪教和封建迷信；
7)散布谣言，扰乱社会秩序，破坏社会稳定；
8)宣扬淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪；
9)煽动非法集会、结社、游行、示威、聚众扰乱社会秩序；
10)侮辱或者诽谤他人，侵害他人名誉、隐私和其他合法权益；
11)通过网络以文字、图片、音视频等形式，对未成年人实施侮辱、诽谤、威胁或者恶意损害未成年人形象进行网络欺凌的；
12)危害未成年人身心健康的；
13)含有法律、行政法规禁止的其他内容；
2. 不友善：不尊重用户及其所贡献内容的信息或行为。主要表现为：
1)轻蔑：贬低、轻视他人及其劳动成果；
2)诽谤：捏造、散布虚假事实，损害他人名誉；
3)嘲讽：以比喻、夸张、侮辱性的手法对他人或其行为进行揭露或描述，以此来激怒他人；
4)挑衅：以不友好的方式激怒他人，意图使对方对自己的言论作出回应，蓄意制造事端；
5)羞辱：贬低他人的能力、行为、生理或身份特征，让对方难堪；
6)谩骂：以不文明的语言对他人进行负面评价；
7)歧视：煽动人群歧视、地域歧视等，针对他人的民族、种族、宗教、性取向、性别、年龄、地域、生理特征等身份或者归类的攻击；
8)威胁：许诺以不良的后果来迫使他人服从自己的意志；
3. 发布垃圾广告信息：以推广曝光为目的，发布影响用户体验、扰乱本网站秩序的内容，或进行相关行为。主要表现为：
1)多次发布包含售卖产品、提供服务、宣传推广内容的垃圾广告。包括但不限于以下几种形式：
2)单个帐号多次发布包含垃圾广告的内容；
3)多个广告帐号互相配合发布、传播包含垃圾广告的内容；
4)多次发布包含欺骗性外链的内容，如未注明的淘宝客链接、跳转网站等，诱骗用户点击链接
5)发布大量包含推广链接、产品、品牌等内容获取搜索引擎中的不正当曝光；
6)购买或出售帐号之间虚假地互动，发布干扰网站秩序的推广内容及相关交易。
7)发布包含欺骗性的恶意营销内容，如通过伪造经历、冒充他人等方式进行恶意营销；
8)使用特殊符号、图片等方式规避垃圾广告内容审核的广告内容。
4. 色情低俗信息，主要表现为：
1)包含自己或他人性经验的细节描述或露骨的感受描述；
2)涉及色情段子、两性笑话的低俗内容；
3)配图、头图中包含庸俗或挑逗性图片的内容；
4)带有性暗示、性挑逗等易使人产生性联想；
5)展现血腥、惊悚、残忍等致人身心不适；
6)炒作绯闻、丑闻、劣迹等；
7)宣扬低俗、庸俗、媚俗内容。
5. 不实信息，主要表现为：
1)可能存在事实性错误或者造谣等内容；
2)存在事实夸大、伪造虚假经历等误导他人的内容；
3)伪造身份、冒充他人，通过头像、用户名等个人信息暗示自己具有特定身份，或与特定机构或个人存在关联。
6. 传播封建迷信，主要表现为：
1)找人算命、测字、占卜、解梦、化解厄运、使用迷信方式治病；
2)求推荐算命看相大师；
3)针对具体风水等问题进行求助或咨询；
4)问自己或他人的八字、六爻、星盘、手相、面相、五行缺失，包括通过占卜方法问婚姻、前程、运势，东西宠物丢了能不能找回、取名改名等；
7. 文章标题党，主要表现为：
1)以各种夸张、猎奇、不合常理的表现手法等行为来诱导用户；
2)内容与标题之间存在严重不实或者原意扭曲；
3)使用夸张标题，内容与标题严重不符的。
8.「饭圈」乱象行为，主要表现为：
1)诱导未成年人应援集资、高额消费、投票打榜
2)粉丝互撕谩骂、拉踩引战、造谣攻击、人肉搜索、侵犯隐私
3)鼓动「饭圈」粉丝攀比炫富、奢靡享乐等行为
4)以号召粉丝、雇用网络水军、「养号」形式刷量控评等行为
5)通过「蹭热点」、制造话题等形式干扰舆论，影响传播秩序
9. 其他危害行为或内容，主要表现为：
1)可能引发未成年人模仿不安全行为和违反社会公德行为、诱导未成年人不良嗜好影响未成年人身心健康的；
2)不当评述自然灾害、重大事故等灾难的；
3)美化、粉饰侵略战争行为的；
4)法律、行政法规禁止，或可能对网络生态造成不良影响的其他内容。
二、违规处罚
本网站通过主动发现和接受用户举报两种方式收集违规行为信息。所有有意的降低内容质量、伤害平台氛围及欺凌未成年人或危害未成年人身心健康的行为都是不能容忍的。
当一个用户发布违规内容时，本网站将依据相关用户违规情节严重程度，对帐号进行禁言 1 天、7 天、15 天直至永久禁言或封停账号的处罚。当涉及欺凌未成年人、危害未成年人身心健康、通过作弊手段注册、使用帐号，或者滥用多个帐号发布违规内容时，本网站将加重处罚。
三、申诉
随着平台管理经验的不断丰富，本网站出于维护本网站氛围和秩序的目的，将不断完善本公约。
如果本网站用户对本网站基于本公约规定做出的处理有异议，可以通过「建议反馈」功能向本网站进行反馈。
(规则的最终解释权归属本网站所有)