暖夏少年|交互组件「弹窗」设计规范( 三 ) 编辑导语：我们在使用软件时经常会遇到

因此凝练概括的标题文案、简短明确、主次有序的内容，才能够让用户快速获取信息、关闭弹窗、继续操作，尽可能降低业务跳出率。
根据阅读心理学，这里有几个原则需要注意：

使用直白表意的语句，不要人为制造词汇；
理解需要知识储备，人借助心智模型识别内容；人们偏好短行信息；
电子屏幕更难阅读，高对比度、大字体能提供帮助。

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

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

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

本文由 @崔宇雄原创发布于人人都是产品经理。未经许可，禁止转载
【暖夏少年|交互组件「弹窗」设计规范】题图来自Unsplash ，基于CC0协议