弹窗/抽屉使用指南

看完本篇文章，你会学到以下内容：
1，什么是弹窗？
2，弹窗的规范如何定义？
3，弹窗使用规则是什么？
4，什么是抽屉？和弹窗对比优缺点是什么？

一、什么是弹窗？

弹窗是在保留当前页面状态的情况下，告知用户并承载相关操作。

思考：弹窗里面哪些构成原件可以根据业务属性可以有可以没有呢？

答案：标题区和操作区。

二、弹窗的规范如何定义？

1、定义弹窗的大小规范

弹窗的的大小有两种定义方式。一种是固定大小，一种是自定义大小。需要根据自己的业务场景二选一。

弹窗宽度一般定义为三种。分别为560px，720px，960px，都是8的倍数方便记忆。尺寸并不是定死的，可以根据自身业务场景调节。

弹框固定高度会有一个最小高度200px，一个最大高度560px。在其之间的高度是由内容区的内容决定，超过最大高度560px时出滚动条。

弹窗自定义高度，只定义最大高度，随着页面拉升缩小，弹窗边距不变。

2、定义弹窗内容规范

定义：标题栏操作栏高度，内容区边距。

3、弹窗类型

弹框类型是根据使用场景区分提示弹窗，自定义弹窗两种

弹窗优点：没有跳出父级页面，弹窗任务完成后仍然会留在父页面进行操作，减少用户操作中步骤体感

弹窗缺点：信息承载量少，信息内容过多的时候会出现上下左右滚动条，弹窗会降低用户操作效率

三、弹窗使用规则是什么？

1、不超过两种操作选项

假如承载的操作项比较多，建议新跳转一个落地页。

2、多步骤操作，选择用页面承载

3、尽量避免弹窗叠弹窗

第一个弹窗的内容考虑用页面承载或者第二个弹窗是否可以用气泡或者下拉来承载。

假设一定要叠，二级弹窗的复杂度要低于一级弹窗，满足形式上的平衡，遵循从大到小的逻辑或者是覆盖上级，完成任务后点“返回”返回。

四、什么是抽屉？和弹窗相比优缺点是什么？

抽屉是信息承载量和页面比肩，又兼具弹窗的优点。

////////////////////////////////////////
结语
这篇文章对弹窗和抽屉的用法进行了总结与归纳，感谢阅读，欢迎交流～