资讯详情文章开始前和大家说下写作的背景，由于在产品验收时发现弹窗样式不统一、文案不统一、混淆使用等问题，因此想总结一份给前端看的弹窗使用指南，希望在后期的产品设计中能规避这些问题。
1、弹窗基本构成
2、弹窗的设计规范
3、弹窗的使用方法
4、易混淆文案的区别
5、弹窗应用场景
上一篇文章和大家分享了弹窗的基本构成，弹窗的设计规范，今天继续和大家分享弹窗的使用方法。由于是整理给前端的一份弹窗使用规范文档，因此在我们需要考虑更细致一点。在具体的应用中复杂的运营弹窗、信息提交、引导弹窗等，都有专门的设计师去设计，然而系统提示、警示框、授权等弹窗，设计师不会将所有弹窗都设计出来，大多是出一个弹窗规范。但是如果我们只是给他们设计用的规范显然是不够的，我们还需要考虑更多的常见，比如基础样式、极大值、以及多场景的应用等，下面具体来看看弹窗的使用方法。
这种组合一般用于系统提示、版本更新、消息通知等场景。在做规范时需要考虑3种情况：基础样式、极大值、扩展样式等。
、规范要点：
1）基础样式使用区别：基础样式中标题+内容、纯内容描述，在使用上的区别是看是否能够一句话将内容描述清楚，能描述情况推荐使用纯内容描述的样式。
2）极大值：当内容超过设定的弹窗高度时，超出内容在弹窗内滑动。
3）拓展操作：在基础样式上，可发起操作，并可一起提交，拓展操作根据业务需要后期还可做拓展。
4）文案区别：单按钮弹窗根据业务场景主要有“我知道了”、“好的”、“操作动词”三种情况。其区别是，“我知道了”用于协议、通知类弹窗，表示已阅并同意的意思；“好的”用户多流程下的确认操作，表示肯定；“操作动词”多用于需要用户去操作的常见，比如“去设置”“去开启通知”等。
这种组合一般用于发起操作后，需要用户操作、并给用户提供取消的场景，多用于警示框中。在做规范时仍然需要考虑3种情况：基础样式、极大值、扩展样式等。
规范要点：
1）取消在左、确定或”操作“在右，需要符合用户操作系统。
2）同场景文案需统一，比如当需要用户做决定时，统一用”确定“。
3）当弹窗需要用户上传信息时调用，在设计时根据文案多少设置输入框的最大高度，超出后将内容进行滑动。
这种组合一般用于版本更新、诱导分享等弹窗；在做规范时仍然需要考虑3种情况：基础样式、极大值等。
规范要点：
1）设置弹窗极大值情况，超出部分进行滑动。
2）按钮的设置顺序为：主操作按钮/子流程/退出。
最后，图片样式可根据场景具体组合，由于图片这块设计师都会出图，因此这里就弱化这块了。
弹窗的使用场景不同，使用的文案也有所差异，产品中我们常见的文案有“确定”、“确认”、“好的”、“我知道了”等词，由于有些词意义相近，在使用时很容易被混淆，因此这里分别来对比下。
确定，是指明确肯定、做决定的意思；确认，是指对事物做决定的过程。比如：经过确认……，我确定了……
因此确认一般用在用户配置等需要用户确认是否可行的弹窗中，且用于描述中；而确定往往用于需要用户做决定，会造成严重后果的弹窗中，描述和按钮均可使用。
好的，是指对某个事情表示同意、赞同；我知道了，是指对某事已经了解了。
二者的使用场景类似，都是告知用户某个信息，不需要用户做出反馈，只需要点击按钮退出弹窗即可。二者的区别在于，好的表示对这件事情已经知晓，弹窗只是最后告知你我们做了某个事；而我知道了是提前不知道这个事情，现在通过弹窗告知用户，这里有了解并的意思。因此好的用于某项操作后的告知；我知道了用户用户协议等需要用户了解的场景。
系统提示主要有，电量不足、网络提示等，电量不足往往用的基础弹窗样式，而网络提示为了缓解用户情绪，往往会设计情感化的带图片弹窗。
版本更新样式主要有默认的纯文本样式和带图片的样式，当开发周期有限直接使用基础样式即可，当在后期版本迭代中可考虑做带图片的样式。
消息通知和版本更新类似，当产品周期有限时直接用弹窗基础样式即可，当后期迭代或周期较多时，可用带图片的弹窗。
当我们在执行操作时，比如上传、编辑、删除等，为了避免误操作，系统都会让用户进行确认，这类弹窗一般直接采用系统弹窗即可。
运营广告在CRM客户管理系统中运用较少，多用于目标群体为C端用户的产品应用较多
授权弹窗一般情况为系统基本样式，不过目前较成熟的产品为了用户体验做成带图片的样式，或者将权限合到一起。
产品新增功能时，往往会添加功能引导弹窗，多采用带图片的弹窗，引导用户去使用和操作。
下面我将弹窗规范中要注意的要点都整理下，主要有一下5点：1、弹窗的最大尺寸为540x810px，弹窗内容过多时，进行滚动显示（尽量不要让弹窗滚动）。2、按钮尽可能使用双按钮，比较符合用户预期，不会引起反感，推荐使用。3、标题和描述要简洁，避免采用是否、你等判断不明和侮辱性的词语。4、当标题和描述已经表述清楚时，不需要在对按钮进行解释。5、弹窗中文案做到统一，不要一些是确认，一些是确定。
参考引文：http://1t.click/Yky知道这些后，再也不会“滥用”弹窗了http://1t.click/VHm浅谈用户交互关于“对话框”的使用分类http://1t.click/VHn弹窗按钮：场景不同，文案也不同http://1t.click/VHp引导好评弹窗该怎么玩？http://1t.click/VHq语雀弹窗规范http://1t.click/VHr百度统计
