认识达内从这里开始

我们在上文中给大家简单介绍了弹窗功能的概念与应用设计需求等内容，而今天我们就再来了解一下，弹窗设计规范与常见弹窗类型。

一、模态(对话框)弹窗

一个模态(对话框)弹窗基本由「四部分」组成，包含标题、内容、操作按钮、蒙层，部分类型弹窗的样式与内容会有所不同，但是所包含元素必然有「内容」。

标题

标题一般在弹窗框架的顶部，用于明确提示内容的主题与中心，让用户快速了解这是怎样的信息，精简为主，切忌采用长文案。

个人建议控制在7字以内，根据「2±7法则」，过多的文字会造成短期识别与记忆压力，所以尽量控制(能用“超流量提醒”，就不要用“检测到您的流量已经超额”这样的话)。

注：如果内容文案简单，只有一小段话，那么可以省略标题，避免造成重复信息的干扰。

内容

内容一般是说明性文字，用来告知用户主要信息，也是补充标题描述信息。作用既然是告知信息，引导信息，那么就不能够太过复杂，表述简洁清晰。

如果遇到长文案时，适当进行分行，适当进行页面可滑动操作(内容尽量删减，字数应在“5-30字”内佳，长文案支持上下滑动，避免适配问题)。

注：尽量避免句号“。”和感叹号“!”，容易给用户强硬的语气压力;还有这类弹窗尽量少用，内容过多可考虑新页面。

操作

操作一般是指对对话弹窗的交互操作，一般有“确定”、“取消”、“关闭”等。

作用是让用户拥有控制权，也是可用性原则中重要的一点(按钮一般可以进行颜色区分，以侧重需要突出的信息，也有提示类弹窗，那么也存在单按钮情况)。

注：

按钮文案不宜过长，注意操作人群的使用习惯进行左右分布;

选择类信息一定要提供关闭按钮，应用的强制更新除外;

不可逆操作应进行颜色区分，提醒用户将进行重要选择。

蒙层

蒙层是指对话弹窗后面的黑色的遮罩层，一般是带有透明度的，作用是为了让用户更好区分对话弹窗与原本界面(透明度可根据产品特性调整，也可以根据实际情况去除)。

二、其他弹窗

升级/警告弹窗

用于提示与警告用，常用于升级、警告、内测公告等内容。

此类弹窗必备的内容也是4要素，特别注意进行操作按钮区分。

活动类弹窗

用户告诉用户特殊的信息、活动的信息，一般以好看的元素搭配吸引用户点击。

此类弹窗比较特殊，特别注意需要保留关闭按钮，不可隐藏。

三、非模态(提示框)弹窗

提示类的弹窗，一般也是Toast和Snackbar，主要是轻量信息的反馈，既不影响用户的当前操作与当前视觉，也不去要求用户需要进行交互，在呈现一定时间后消失(一般不超过5-7s)，一般置于界面的顶层。

反馈图标

反馈图标一般包括几种状态，成功、失败、异常等;图形元素更能够吸引视觉焦点，比文字更生动形象，一般2s内很难抓住用户焦点，所以图标效果更佳(非必要，根据产品特性选择是否需要图标)。

反馈文案

文案一般非常简短，在有限的时间内尽量清晰，让用户快速知道发生了什么(不可超过两行)。

框背景

一般是为了在界面上层让信息更加清晰，在复杂的界面中，如果此提示不加框的话，容易被其他元素所影响，造成了视觉干扰。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请在707945861群中学习了解。