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