瑶瑶

文章开始前和大家说下写作的背景,由于在产品验收时发现弹窗样式不统一、文案不统一、混淆使用等问题,因此想总结一份给前端看的弹窗使用指南,希望在后期的产品设计中能规避这些问题。

需要看上一篇的伙伴,点击下方标题即可:

《一个弹窗引发的思考,我竟写了5000字的分享》

 

目录

1、弹窗基本构成

2、弹窗的设计规范

3、弹窗的使用方法

4、易混淆文案的区别

5、弹窗应用场景

 

弹窗的使用方法

上一篇文章和大家分享了弹窗的基本构成,弹窗的设计规范,今天继续和大家分享弹窗的使用方法。由于是整理给前端的一份弹窗使用规范文档,因此在我们需要考虑更细致一点。在具体的应用中复杂的运营弹窗、信息提交、引导弹窗等,都有专门的设计师去设计,然而系统提示、警示框、授权等弹窗,设计师不会将所有弹窗都设计出来,大多是出一个弹窗规范。但是如果我们只是给他们设计用的规范显然是不够的,我们还需要考虑更多的常见,比如基础样式、极大值、以及多场景的应用等,下面具体来看看弹窗的使用方法。 

1、纯文本+单按钮

这种组合一般用于系统提示、版本更新、消息通知等场景。在做规范时需要考虑3种情况:基础样式、极大值、扩展样式等。

规范要点:

1)基础样式使用区别:基础样式中标题+内容、纯内容描述,在使用上的区别是看是否能够一句话将内容描述清楚,能描述情况推荐使用纯内容描述的样式。

2)极大值:当内容超过设定的弹窗高度时,超出内容在弹窗内滑动。

3)拓展操作:在基础样式上,可发起操作,并可一起提交,拓展操作根据业务需要后期还可做拓展。

4)文案区别:单按钮弹窗根据业务场景主要有“我知道了”、“好的”、“操作动词”三种情况。其区别是,“我知道了”用于协议、通知类弹窗,表示已阅并同意的意思;“好的”用户多流程下的确认操作,表示肯定;“操作动词”多用于需要用户去操作的常见,比如“去设置”“去开启通知”等。

 

2、纯文本+双按钮

这种组合一般用于发起操作后,需要用户操作、并给用户提供取消的场景,多用于警示框中。在做规范时仍然需要考虑3种情况:基础样式、极大值、扩展样式等。

规范要点:

1)取消在左、确定或”操作“在右,需要符合用户操作系统。

2)同场景文案需统一,比如当需要用户做决定时,统一用”确定“。

3)当弹窗需要用户上传信息时调用,在设计时根据文案多少设置输入框的最大高度,超出后将内容进行滑动。

 

3、纯文本+多按钮

这种组合一般用于版本更新、诱导分享等弹窗;在做规范时仍然需要考虑3种情况:基础样式、极大值等。

规范要点:

1)设置弹窗极大值情况,超出部分进行滑动。

2)按钮的设置顺序为:主操作按钮/子流程/退出。

最后,图片样式可根据场景具体组合,由于图片这块设计师都会出图,因此这里就弱化这块了。

 

易混淆文案的区别

弹窗的使用场景不同,使用的文案也有所差异,产品中我们常见的文案有“确定”、“确认”、“好的”、“我知道了”等词,由于有些词意义相近,在使用时很容易被混淆,因此这里分别来对比下。

1、确定&确认

确定,是指明确肯定、做决定的意思;确认,是指对事物做决定的过程。比如:经过确认……,我确定了……

因此确认一般用在用户配置等需要用户确认是否可行的弹窗中,且用于描述中;而确定往往用于需要用户做决定,会造成严重后果的弹窗中,描述和按钮均可使用。

 

2、好的&我知道了

好的,是指对某个事情表示同意、赞同;我知道了,是指对某事已经了解了。

二者的使用场景类似,都是告知用户某个信息,不需要用户做出反馈,只需要点击按钮退出弹窗即可。二者的区别在于,好的表示对这件事情已经知晓,弹窗只是最后告知你我们做了某个事;而我知道了是提前不知道这个事情,现在通过弹窗告知用户,这里有了解并的意思。因此好的用于某项操作后的告知;我知道了用户用户协议等需要用户了解的场景。 

 

弹窗的使用场景

1、系统提示

系统提示主要有,电量不足、网络提示等,电量不足往往用的基础弹窗样式,而网络提示为了缓解用户情绪,往往会设计情感化的带图片弹窗。

2、版本更新

版本更新样式主要有默认的纯文本样式和带图片的样式,当开发周期有限直接使用基础样式即可,当在后期版本迭代中可考虑做带图片的样式。

 

3、消息通知

消息通知和版本更新类似,当产品周期有限时直接用弹窗基础样式即可,当后期迭代或周期较多时,可用带图片的弹窗。

 

4、操作反馈

当我们在执行操作时,比如上传、编辑、删除等,为了避免误操作,系统都会让用户进行确认,这类弹窗一般直接采用系统弹窗即可。

 

5、运营&广告

运营广告在CRM客户管理系统中运用较少,多用于目标群体为C端用户的产品应用较多

 

6、授权弹窗

授权弹窗一般情况为系统基本样式,不过目前较成熟的产品为了用户体验做成带图片的样式,或者将权限合到一起。

 

7、功能引导

产品新增功能时,往往会添加功能引导弹窗,多采用带图片的弹窗,引导用户去使用和操作。

 

划重点

下面我将弹窗规范中要注意的要点都整理下,主要有一下5点:
1、弹窗的最大尺寸为540x810px,弹窗内容过多时,进行滚动显示(尽量不要让弹窗滚动)。
2、按钮尽可能使用双按钮,比较符合用户预期,不会引起反感,推荐使用。
3、标题和描述要简洁,避免采用是否、你等判断不明和侮辱性的词语。
4、当标题和描述已经表述清楚时,不需要在对按钮进行解释。
5、弹窗中文案做到统一,不要一些是确认,一些是确定。 

 

参考引文:
http://1t.click/Yky知道这些后,再也不会“滥用”弹窗了
http://1t.click/VHm浅谈用户交互关于“对话框”的使用分类
http://1t.click/VHn弹窗按钮:场景不同,文案也不同
http://1t.click/VHp引导好评弹窗该怎么玩?
http://1t.click/VHq语雀弹窗规范
http://1t.click/VHr百度统计

 

原文地址:海盐社(公众号)
作者:风筝KK

转载请注明:学UI网 » 写给前端的弹窗使用指南!(下)

登录收藏
 
你可能喜欢的:
如何衡量交互成本2.0如何衡量交互成本2.0
网易云音乐 | LOOK直播页改版设计网易云音乐 | LOOK直播页改版设计
产品体验设计-交互篇(二)产品体验设计-交互篇(二)
Material Design Environment Light and shadowsMaterial Design Environment Light and shadows
你过来,我有1个设计技巧想对你说你过来,我有1个设计技巧想对你说
为什么你的设计无法让别人记住(一)?为什么你的设计无法让别人记住(一)?
圆角矩形背后的含义|深度解析圆角矩形背后的含义|深度解析
交互基础——页面加载方式交互基础——页面加载方式
一篇文章读懂交互设计7大定律一篇文章读懂交互设计7大定律
音频 | 开屏页设计,看这篇就够了!音频 | 开屏页设计,看这篇就够了!