这是《后台产品设计指南》系列文章的第5篇内容，更多精彩可以点击下方链接查看。
弹窗是后台产品中比较常见的组件，本文会和大家一起了解下弹窗的定义，使用场景及相关规范。
弹窗的定义
弹窗是一种中断用户当前操作的组件，引导用户进行下一步操作。
弹窗包括模态弹窗和非模态弹窗，前者是指会中断用户操作，需要用户进行交互的弹窗；后者则是指不影响用户当前操作的弹窗。
模态弹窗
非模态弹窗
弹窗的构成
弹窗组件可以看做由主体区域、关闭入口、遮罩层三部分组成。主体区域包括相关文案，操作按钮；关闭按钮一般在右上方；遮罩层是半透明的黑色，有些弹窗支持点击遮罩层关闭，和关闭按钮效果是一致的。
弹窗
主体区域
主题区域的内容往往千差万别，但可以总结为提示信息类和引导操作类。
提示信息类主要是显示关键信息，用户只需要确认即可。比如toast提示，tips提示就是这个类型。
而引导操作类则一般需要填写内容，保存确认，会与其他数据产生交互。
操作提示
引导操作
关闭入口
弹窗中的关闭入口主要包括以下几种：
1.弹窗右上角，用户关闭弹窗一般都会点击右上角关闭按钮，所以要设计的尽可能的明显。
2.弹窗主体区域内，经常会和确认按钮一起出现，但并是绝对的。比如上面的弹窗截图就只有一个确认按钮，这里点击确认也会关闭弹窗。
3.遮罩层，在一些系统中支持点击遮罩层关闭弹窗，这个操作确实比较方便，但有时候也会因为误操作导致带来麻烦。可以通过存储草稿或者弹窗确认的形式来降低误操作风险。
4.ESC键，虽然很多人不知道或者不使用ESC键，但这个快捷键对于部分人来说确实是一个很舒服的体验，我们在设计弹窗时也可以考虑进去
遮罩层
遮罩层是半透明的黑色，具体的色值和透明度需要单独设计，过深和过浅的设计都会影响用户使用。
在后台产品多层弹窗是经常出现的，在设计中应该尽可能控制在2层以内。过多的层级会让用户困惑，不知道自己当前所处的步骤；同时过多的层级在程序处理上也会相对麻烦一点。
弹窗常见类型
下面会列举一下常见的弹窗类型，基本上覆盖了后台产品中的各种使用场景。需要说明的是弹窗的内容没有固定的限制，是根据产品的功能来自行设计的，千万不能生搬硬套。
密码错误提示
成功登录提示
新增分类
新增设备
分步录入
文件上传
用户详情
弹窗使用注意事项
1.新页面一般用于比较复杂的表单操作，而弹窗适用于轻量的操作。如果内容较多，仍使用弹窗时可以考虑通过合理的分组，分步、排列来降序用户学习的复杂度。
2.弹窗的宽度是遵循一定的规范的，过大的弹窗在笔记本及低分辨率显示器上体验很不友好
3.弹窗内的文案内容也是有规范，这里推荐大家学习一下有赞设计语言系统，里面的很多规范都可以直接借鉴。
我们在设计产品时需要根据使用场景来选择合适的弹窗，同时要尽可能地满足交互规范和用户体验，保证用户操作体验的连贯性和数据的安全性。
在写作过程中，如果有意见或者想法，欢迎有兴趣的读者添加我的微信一起交流探索，共同进步。
网友评论