iOS和Android规范解析:警告框(Alerts)

8 评论 22116 浏览 169 收藏 10 分钟

规范是最标准的情况,场景是千变万化的,具体运用的时候还是需要根据场景来灵活应用。

在iOS的设计规范以及Android的MD规范中,都有警告框(Alerts)这个组件。笔者研究了这个组件,发现在两种系统中,它们有以下两个共同点:

1.都出现在页面的中央且自带蒙层;

iOS和Android警告框

2.警告框的选项通常是两个,且应避免“是/否“这样的选项,选项应明确告知用户操作的结果。

在其它方面,两种规范都存在着各自的特点。下面我们来一起探究一下。

Google Material Design

先来说说设计师相对不熟悉的Android。MD规范对于警告框的定义是这样神儿的:

警告框是一种紧急的打扰(提示),以告知用户一个发生了的情况。

需要注意的是,警告框和之前提到的snackbars都是在用户进行操作之后出现的提示框,那么同样是提示框,他们出现的时机有什么区别呢?警告框可以看作是操作的确认,可以理解为操作的“最后一步”,只有当用户点击了“确认”按钮这个操作才算是真正完成;但snackbars是当用户真正操作完了之后才出现的提示信息,其信息的重要程度比警告框要低。另外,在很多情况下,snackbars会有“撤销”按钮,留给用户反悔的余地。

MD规范把警告框分成两种:有标题的和没有标题的。

MD规范认为大多数的警告框应该都是没有标题的,用一到两句描述一个告知决定的文案。在写这句文案时,有两点需要注意:

  1. 使用疑问句,例如:“删除这个对话?”
  2. 文案与警告框中的按钮文案要相关联

按钮的文案,应告知用户操作的结果。尽量避免使用“是/否”这样的文案。如下图:

左边的警告框,按钮文案“删除”明确地告知了操作的结果;右边的按钮文案,回答了上面“删除草稿吗?”这个问题,但是没有告知操作的结果(其实也就是告知的不直接),所以不被建议使用。

对于有标题的警告框,MD提出,“只在高风险的操作时使用(如,操作将导致网络失去连接)”。并且,用户通过标题和操作按钮,就应该能明白是在做什么选择。

对于标题,需注意以下两点:

  1. (与无标题的Alerts一样)使用询问操作的疑问句,例如,“清除USB存储内容?”
  2. 避免道歉或者有歧义的问句,例如,“警告!”、“你确定吗?(Are you sure?)”

有标题的警告框

以上是MD规范中对于警告框的介绍。

iOS Human Interface Guideline

在iOS规范中,对于警告框的定义是酱紫的:

警告框传达了你的应用或设备某种状态的重要信息,并且常常需要用户来进行操作。

规范中,对警告框包含的元素做出了如下规定:标题(必选)、描述信息(可选)、输入框(可选)、按钮(必选)。同时,警告框的样式都是磨砂效果的圆角白框,不可更改。如下图所示:

几种警告框

关于警告框的使用,苹果给出了两个原则:

  1. 尽量少使用。苹果认为警告框只用在重要的场景下,像是购买、删除、报错。警告框不常出现,确保了它能够引起用户足够的重视。一定要确保每一个警告框都提供重要的信息和有用的操作选项。
  2. 确保警告框在竖屏、横屏条件下都显示正常。

关于iOS警告框中的标题、描述信息和按钮这三个元素,苹果又分别给出了指导原则。

标题和描述信息

由于这两部分都是文案,所以苹果放在一起进行了介绍。

标题要尽量简洁,字越少越好。标题可以考虑使用疑问句或者简短的陈述句。对于描述信息,首先它不是必须的。如果一定需要描述信息,则尽量保证描述信息尽可能短(一到两行)。

另外,在写这些文案的时候,要尽量避免显得“指责”、“审判”和“羞辱”(国内应该没有哪个应用敢出一个有羞辱意思的警告框吧,不要命了吧,呵呵呵呵)。因为用户都知道,警告框的出现,是来告知他们出现了问题或者比较危险的情况的,所以文案要明确地告知这些信息。It’s better to be negative and direct than positive and oblique(传达坏消息但文案直截了当也比传达好消息但文案表意模糊要更好一些)。最后,尽量避免使用“你”、“你的”、“我”、“我的”这样的文案,有时候它们会被理解为带有羞辱意味或者高傲的。

按钮

对于按钮的设计,有以下几点需要注意:

  1. 通常情况下,使用两个按钮。只有一个按钮的警告框通常用于告知(重要信息)。如果需要三个按钮,苹果建议考虑使用上拉菜单(action sheets)。
  2. 按钮的文案建议使用能够描述操作结果的文案。避免使用“是/否”这样的文案。(这一点和MD规范相同)
  3. 一般来说,左边放“取消”按钮,右边放用户最可能点击的按钮。苹果建议左边那个表达取消操作的按钮都叫作“取消”,不要使用别的词(“撤销”、“不要~~~”? 之类)。如果想强调取消按钮,可以将它加粗。如果按钮中包含毁灭性操作,如删除,则在样式上应该让按钮文案体现出这个感觉。
  4. Home键自带取消警告框功能。如果页面上有一个警告框,此时用户按了iPhone上的Home键而退出了应用,那么用户再次回到应用,警告框应该消失(相当于在按了Home键的时候取消了警告框)。

以上介绍了iOS和Android规范中对于警告框的规定。还是那句话,规范是最标准的情况,场景是千变万化的,具体运用的时候还是需要根据场景来灵活应用。这就像先掌握数学公式,之后遇到不同的题目,运用公式来灵活解题。

欢迎大家留言讨论,共同提高,在讨论中获得人生的升华。

相关阅读:

iOS和Android规范解析:提示框(Toast)对比

#专栏作家#

沐风,微信公众号:“沐风与体验设计”。人人都是产品经理专栏作家,2017年度作家评选最佳人气奖。爱奇艺Phone和PC端交互团队负责人。留德海龟,曾任职腾讯微生活、网易、宜信。6年交互设计经验,专注设计领域,欢迎关注。

本文原创发布于人人都是产品经理。未经许可,禁止转载。

题图来自 Unsplash,基于CC0协议。

专栏作家
沐风,微信公众号:沐风与体验设计。人人都是产品经理专栏作家,2017年度作家评选最佳人气奖。爱奇艺资深交互设计师。留德海龟,曾任职腾讯微生活、网易、宜人贷。6年交互设计经验,专注设计领域,欢迎关注。

本文原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 这篇文章提到的“snackbars会有“撤销”按钮,留给用户反悔的余地。”和上一篇文章提到的“注意,snackbar不能包含使其消失的“取消”按钮!”有冲突。

    来自天津 回复
    1. 这里不冲突的。解释一下:这篇文章的“撤销”,是撤销某个动作,类似于Windows的ctrl+z。上一篇的“取消”按钮,是指让snackbar自己消失的取消按钮。所以两者是不同的。

      回复
    2. 解释完了我也没有理解,是不是我太笨了 😥 ;不过还是感谢

      来自陕西 回复
    3. 0202了我还在看17年的文章hhh,只是虽然更新但是逻辑相同~

      snackbars的使用场景是,用户完成某个操作后,出现提示。
      此时【撤销】的含义是 取消之前完成的操作,可能涉及到内容的状态等的变更;【取消】是不影响之前的操作,而是让snackbars提示框消失,这个与设定时间自动消失的逻辑冲突,所以不能【取消】,但可以【撤销】

      来自北京 回复
  2. 只有我觉得,警告框,放是否比说结果好吗,进入到这个界面,就已经有结果了,删除>删除吗>删除。。。。or删除>删除吗>是的

    来自浙江 回复
    1. 我觉得按钮上放“删除”比“是”,要更直接一些。因为删除就直接说要干啥,是的话还要再想一下,“是删除”。

      来自北京 回复
    2. 关键还是在于标题和描述信息是怎么表达的 不过我觉得尽量还是以“是否”为选项的基础上去编写标题和描述信息 这样用户在选择的时候可以更流畅的做出判断

      来自吉林 回复
    3. 有些警告框的提示内容是负向性的,直接表达结果比用“是”“否”更容易理解

      来自广东 回复