|交互组件——运营类活动「弹窗」( 三 )

电子屏幕更难阅读，高对比度、大字体能提供帮助。

本文插图

3. 遮罩
弹窗是一种模态组件，在用户和弹窗之间进行明确的交互之前，页面上的其他内容不能被点触操作。
遮罩提高了弹窗的页面层级，遮罩背景透明度的选择由弹窗需要用户付出的聚焦程度有关，越需要用户聚焦，遮罩越暗。

本文插图
【|交互组件——运营类活动「弹窗」】

4. 操作按钮
根据弹窗场景，操作按钮可能由主按钮、辅助按钮、安全关闭icon等单独或组合使用，在某些营销场景下，也可能出现拟物化的按钮。
操作按钮要足够大且明晰，颜色选择突出品牌色，且区别主从按钮。
按钮文案要明确易懂或有“煽动性” ，比如“取消自动定投”的弹窗操作文案，设计主按钮“确定” ，辅助按钮“取消” ，就容易产生歧义；考虑主按钮“确认取消” ，辅助按钮文案“关闭”则可以避免。
安全关闭icon一般放置在弹窗下方，符合‘拇指定律’ ，容易触达。
5. 其它组件
可视情况，在弹窗中加入其它附属组件，比如：订阅提醒和操作，可默认勾选、投教内容、品牌宣传、氛围元素。
五、优化体验
1. 自动收起
减少用户操作，可以对弹窗自动收起的功能设计，比如“3s自动收下” ，但是一定要用倒计时进行提示，提供足够的可见性来保证操控感。
2. 弹窗多级内容演示
某些营销场景下，可以在一个弹窗中整合多个内容；像Banner一样，这些内容卡片自动切换展示，也可以手动滑动查看。
注意后面的内容露出十分有限，只能给人同级内容很多的映像，滑动查看的概率很小，最好能有固定位置的入口承接。

本文插图

3. 弹窗关闭后的引导
弹窗具有不可回溯的特点，且大概率用户不会仔细研究弹窗内容只想尽快关闭弹窗，进行自己的业务操作。
这时候针对某些场景，比如应用升级，可以设计一个固定位置的通知栏（snackbar）来继承用户在完成操作后的应用升级引导；又或者可以在页面设置固定位置浮层按钮，并在收起弹窗时用动效提示映射关系，方便用户再次查看。