目录
1、弹窗基本构成
2、弹窗的设计规范
3、弹窗的使用方法
4、易混淆文案的区别
5、弹窗应用场景
弹窗是系统让用户执行命令、向用户提问、向用户提供信息或进度反馈的辅助窗口,简单来说就是系统和用户进行交互的窗口,弹窗主要由信息区和操作区组成,如下图:
根据业务需要,信息区可以是纯文本、带图片、输入框、其他等信息。
1)纯文本
多用于系统中流程化提示弹窗,比如警示框、系统提示弹窗等,根据需要其展现形式有标题+描述、只有标题两种。
2)带图片
多用于产品中需要情感化表达的一些场景。比如:发布动态设置、成功提示等。
3)带输入框
当使用场景中有需要用户输入内容时,可根据字数范围设置单行或多行的输入框。
4)其他弹窗
其他弹窗一般在特殊场景中使用,比如授权弹窗、运营弹窗等。
操作区是针对信息区的操作入口,也是构成产品和人互动的入口,从排版来说分为横向排版、纵向排版;从数量来说分为单按钮、双按钮、多按钮等。
另外,辅助按钮颜色可以采用灰色或主题色,这取决于按钮的重要程度,如果按钮重要程度低就采用灰色,重要程度较高就采用主题色,同时将主操作按钮文字加粗。
弹窗的设计规范主要从三个方面进行整理:尺寸规范、按钮规范、文案规范。
尺寸规范和前端的对接息息相关,标注时需要考虑各种适配场景。弹窗尺寸需要掌握弹窗的宽高、弹窗的适配标注。
1)确定弹窗的宽高
目前一些公司为了各分辨率下有好的呈现效果,针对大屏会单独调整;但是对于一些中小公司投入资源有限,因此希望最好能一套尺寸适配所有机型,该怎么办呢?
一般解决方案看你的尺寸能否适配最小分辨率640×1334,为了让数据更有信服感,我分别整理了安卓和iOS端分辨率的占比情况(数据截止为2019年6月)。
只要保证该尺寸下能正常展示即可。这时候我们就能计算出弹窗的最大宽度和高度(在iPhone下弹窗左右上下分别留出50px的留白)。
弹窗最大宽度:640px(最小分辨率)-100px(留白)=540px
弹窗最大高度:1136px(最小分辨率)-40px(状态栏)-88px(导航栏)-98px(标签栏)-100(留白)=810px
因此在设计时弹窗宽高不要超过540x810px这个尺寸。这样一套弹窗就可以适配安卓和iOS中的各种尺寸了。
2)弹窗的适配标注
设计师在标注时,由于是给前端看的规范,因此在标注时尽量详尽,按照代码编写的规范来标注,以纯文本为例,我们需要标注弹窗的安全距离、以及参数设置。
按钮的使用很少有规范细化到这里,因此如果你的产品原型图上没有把所有的弹窗都画出来,而交给前端自己补充时,就会出现一些问题。
1)尽可能使用双按钮
单按钮往往只有一个行为操作按钮,没有取消,无法控制情况,因此不推荐用在警示框中,多用于系统通知中。当按钮中明确需要用户操作的内容,仍然需要加一个关闭的入口,降低用户心理预期。
2)主操作按钮统一放到右边
由于iOS和安卓端系统弹窗的按钮位置正好相反,苹果原生主操作在左,辅助操作在右,安卓原生主操作在右,辅助操作在左。
3)识别破坏性按钮
如果弹窗中有导致破坏的操作,比如删除内容,这时候我可以将按钮进行差异化设计,或者设置破坏性的文案,提示人们谨慎操作。
文案规范作为设计师其实很少关注这个问题,在大多公司都是产品、交互负责,但是对于中小公司来说,文案规范这块真的是空白,产品没时间想这些,设计觉得没义务做这块。但是文案的好坏直接会影响用户的交互操作,下面我总结了五点文案规范。
1)标题描述要简洁
对标题和描述的要求有两点:明确、简练。
明确:让人一眼就能知道这个弹窗的作用,不需要过多思考。
简练:标题或描述要尽可能短,让内容保持在一行或两行内,防止滚动;同时标题尽量采用具体的文字,少用抽象的文字,帮助用户理解。
2)避免出现指责、判断或侮辱
我们知道弹窗一般是通知我们相关问题和提醒的时候出现的,这时候我们需要设置友好的语气,文字描述需要消极和直接,不要出现指责、判断、侮辱等文字,比如”是否XXXX”、”你XXXX”。
3)按钮文案要统一
产品中统一类型的弹窗按钮的文案应该保持一致,比如“确定”“取消”在所有的弹窗中都应该统一为这两个文案,不要一些是“确定”,一些是“确认”。
4)避免解释警示按钮
当你的弹窗标题和文案标题清晰,一眼就能看懂该如何操作,就不用解释按钮的功能了,直接用“确定”能减少用户操作时的判断成本。
不过当遇到删除或退出的警告弹窗时,确定和取消的使用就会引起用户误解,这时候可以将文字设置成不易误解的文字,比如“删除”“确定退出”。
5)按钮文案要符合逻辑
按钮文案在设置时,尽可能用和弹窗标题和描述相关的动词,比如确定、查看全部、回复、忽略等,避免使用是/否等指向不明确的词语。
由于篇幅较长,今天就和大家分享弹窗的基本构成和弹窗的设计规范。下周一在和大家分享弹窗的使用方法、弹窗中易混淆的文案、弹窗的使用场景三个方面。下面针对今天的内容整理下重点:
1、弹窗的最大尺寸为540x810px,弹窗内容过多时,进行滚动显示(尽量不要让弹窗滚动)。
2、按钮尽可能使用双按钮,比较符合用户预期,不会引起反感,推荐使用。
3、标题和描述要简洁,避免采用是否、你等判断不明和侮辱性的词语。
4、当标题和描述已经表述清楚时,不需要在对按钮进行解释。
5、弹窗中文案做到统一,不要一些是确认,一些是确定。
参考引文
http://1t.click/VHm浅谈用户交互关于“对话框”的使用分类
http://1t.click/VHn弹窗按钮:场景不同,文案也不同
http://1t.click/VHp引导好评弹窗该怎么玩?
http://1t.click/VHq语雀弹窗规范
http://1t.click/VHr百度统计