写给前端的弹窗使用指南！（下）

弹窗的使用方法

1、纯文本+单按钮

这种组合一般用于系统提示、版本更新、消息通知等场景。在做规范时需要考虑3种情况：基础样式、极大值、扩展样式等。

、

规范要点：

1）基础样式使用区别：基础样式中标题+内容、纯内容描述，在使用上的区别是看是否能够一句话将内容描述清楚，能描述情况推荐使用纯内容描述的样式。

2）极大值：当内容超过设定的弹窗高度时，超出内容在弹窗内滑动。

3）拓展操作：在基础样式上，可发起操作，并可一起提交，拓展操作根据业务需要后期还可做拓展。

4）文案区别：单按钮弹窗根据业务场景主要有“我知道了”、“好的”、“操作动词”三种情况。其区别是，“我知道了”用于协议、通知类弹窗，表示已阅并同意的意思；“好的”用户多流程下的确认操作，表示肯定；“操作动词”多用于需要用户去操作的常见，比如“去设置”“去开启通知”等。

2、纯文本+双按钮

这种组合一般用于发起操作后，需要用户操作、并给用户提供取消的场景，多用于警示框中。在做规范时仍然需要考虑3种情况：基础样式、极大值、扩展样式等。

规范要点：

1）取消在左、确定或”操作“在右，需要符合用户操作系统。

2）同场景文案需统一，比如当需要用户做决定时，统一用”确定“。

3）当弹窗需要用户上传信息时调用，在设计时根据文案多少设置输入框的最大高度，超出后将内容进行滑动。

3、纯文本+多按钮

这种组合一般用于版本更新、诱导分享等弹窗；在做规范时仍然需要考虑3种情况：基础样式、极大值等。

1、系统提示

系统提示主要有，电量不足、网络提示等，电量不足往往用的基础弹窗样式，而网络提示为了缓解用户情绪，往往会设计情感化的带图片弹窗。

2、版本更新

版本更新样式主要有默认的纯文本样式和带图片的样式，当开发周期有限直接使用基础样式即可，当在后期版本迭代中可考虑做带图片的样式。

 

3、消息通知

消息通知和版本更新类似，当产品周期有限时直接用弹窗基础样式即可，当后期迭代或周期较多时，可用带图片的弹窗。

 

4、操作反馈

当我们在执行操作时，比如上传、编辑、删除等，为了避免误操作，系统都会让用户进行确认，这类弹窗一般直接采用系统弹窗即可。

 

5、运营&广告

运营广告在CRM客户管理系统中运用较少，多用于目标群体为C端用户的产品应用较多

 

6、授权弹窗

授权弹窗一般情况为系统基本样式，不过目前较成熟的产品为了用户体验做成带图片的样式，或者将权限合到一起。

 

7、功能引导

产品新增功能时，往往会添加功能引导弹窗，多采用带图片的弹窗，引导用户去使用和操作。

 

划重点

下面我将弹窗规范中要注意的要点都整理下，主要有一下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百度统计

原文地址：
海盐社（公众号）

作者：风筝KK