02 弹窗的组成
弹窗的基本组成可以拆解为:
- 遮罩
- 弹窗主体(容器、标题、内容、动作按钮)
- 关闭入口(不必要/模态弹窗没有)
1. 遮罩
为了使用户更聚焦于弹窗,我们会在弹窗容器下方页面上方加一层遮罩, 通常这种遮罩是半透明黑色,如果遮罩颜色越深,用户越能够专注于当前页面; 遮罩颜色越浅,用户的跳出感越小,产品也更亲民。
当页面中出现多个弹窗时,也就意味着多个遮罩层,这个时候遮罩层的颜色该怎么确定呢?
根据各大规范,弹窗叠弹窗不建议超过三个,当弹窗大于等于3个时,遮罩的颜色就不再改变。这里再补充一点, 当弹窗数量过多,一个叠一个,用户容易迷失放向,这时候可以采用位置错层的方法。
2. 弹窗主体
弹窗主体可以拆解为标题、内容、动作按钮。
弹窗的标题和内容的书写规则,在后文中有详细描述,这里不再赘述。
弹窗的动作按钮一般不超过3个:
1个按钮: 那一定是可以关闭弹窗的操作,比如信息公告类的弹窗的“我知道了”。