小雨点

最近在公司整理设计规范,记得上一次整理弹窗时,我仅仅将几种弹窗样式整理了出来,但是真正在使用时发现使用场景很有限,导致后期需要重新调整。另外,之前的规范仅考虑了设计上的统一和协作性,并未考虑到和前端之间的对接,导致上线出现了一系列的问题。因此写这篇文章的初衷是,写让前段、技术都能看懂的设计规范,同时能够规避场景覆盖不全面、文案不统一、混淆使用等问题。

 

目录

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语雀弹窗规范

http://1t.click/VHr百度统计

 

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

转载请注明:unibet网址网 » 一个弹窗引发的思考,我竟写了5000字的分享(上)

登录收藏
 
你可能喜欢的:
你必须知道的5种搜索页面样式你必须知道的5种搜索页面样式
如何从设计角度评价产品设计的好坏如何从设计角度评价产品设计的好坏
业务之上,体验之下业务之上,体验之下
Material Design Layout Pixel density 密度与分辨率Material Design Layout Pixel density 密度与分辨率
关于ZAO——聊聊按钮设计关于ZAO——聊聊按钮设计
Material Design Understanding layout 布局指南Material Design Understanding layout 布局指南
如何衡量交互成本2.0如何衡量交互成本2.0
网易云音乐 | LOOK直播页改版设计网易云音乐 | LOOK直播页改版设计
产品体验设计-交互篇(二)产品体验设计-交互篇(二)
Material Design Environment Light and shadowsMaterial Design Environment Light and shadows