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

规范是最标准的情况,场景是千变万化的,具体运用的时候还是需要根据场景来灵活应用。警告框是一种紧急的打扰(提示),以告知用户一个发生了的情况。警告框传达了你的应用或设备某种状态的重要信息,并且常常需要用户来进行操作。


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

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

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

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

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

iOS和Android警告框

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

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

Google Material Design

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

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

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

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

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

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

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

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

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

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

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

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

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

有标题的警告框

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

iOS Human Interface Guideline

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

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

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

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

几种警告框

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

  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)对比

 

作者:新设计青年,微信公众号:新设计青年。

本文由 @新设计青年 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/23224/

(0)
CatherineCatherine
上一篇 2017-05-04 14:22
下一篇 2017-05-04 16:19

相关推荐

  • 用户体验在人工智能下的改变

    用户体验在人工智能下的改变安全性越接近系统底层的技术越影响用户体验,例如手机中毒或者信息被盗都会对用户产生巨大影响;如果关系到国家安全,整个社会的秩序都会被扰乱,所以安全性是产品以及用户体验的基础。效率1.实时性随着计算能力和算法的提升,计算机可以做到实时反馈结果。在以往的重要直播上,视频会显示实时字幕,这是通过给原有直播信号增加5-10分钟的延时,速记员在这短暂的时间内快速整理并输出字幕,但这需要消耗多名速记员的大量体力和脑力。在人工...

    2018-03-24
  • 使用 Sketch 搭建动态布局

    如果你在设计交互,你可能会经常遇到一些重复性的元素,比如列表中的行,或者网格化元素。尽管Sketch提供了一些方法,通过使用Symbols将一些样式应用到元素中,但如果你想让布局更有适应性或者动态变化,它恐怕就很…

    2017-12-28
  • 交互设计七大定律之Tesler's Law 泰思勒定律(复杂性守恒定律)

      最近在整理交互设计七大定律,发现了这篇老文,内容很精彩,翻译下与大家分享。 最近在整理交互设计七大定律,文章要系统的看。 目录:【交互设计七大定律】关于交互设计法则“除非有更好的选择,否则就遵从…

    交互设计 2015-08-27
  • 译文|为什么产品思考将成为交互设计中的一大重要的步骤

    生命有限,不能去浪费时间去做一些没人用的东西“明确用户想要什么,不是用户本身的责任” – Steve Jobs“沉浸在一个问题当中,而不是一个具体的解决方案。”- Laura Javier“创造功能很容易,但是创造出合适的功能给需要的人就很具有挑战了。”

    2017-05-29
  • APP常见的几种刷新类型

    这两天无意看到一些内容刷新案例,发现原来光一个刷新操作,也是有不同的刷新类型区分的,所以在这里记录一下。

    2017-05-30
  • 移动设备上的劝导式设计(译)

    本文围绕劝导式设计(persuasive design)而展开,介绍了移动终端上banner广告、push信息等典型的劝服失败案例,并从用户与移动设备之间的情感联系出发,探讨了移动劝导策略的几个切入点。所谓劝导式设计,是指通过说…

    2015-08-04
  • 响应式网页图片库设计的九个注意事项

    响应式设计 无疑是当前网页设计 领域当中,不可忽略的必要组成部分。而响应式网页中的图片显示又是老生常谈的问题,许多争论集中在响应式网站的图片应当怎么展示。继续延伸开来,那么响应式网站中的图片库应当如何设计呢?

    2017-05-25
  • 40个全屏图片背景的网站设计欣赏

    Web设计灵感总是帮助我们走在新趋势, 设计结构、颜色和总体设计过程。有很多灵感的网站列出的主题就是我想要这一个是不同的。所以在这个今天的帖子我收集了40个全屏图片背景的网站设计欣赏,为你找设计的灵感。

    2017-06-03
  • 关于Axure8.0中继器的使用1

    废话少说,请开始你的表演!!!1.拖入一个中继器,将中继器多余的行删除;2.在中继器中添加三列(可以直接双击编辑),分别命名:name、sex、age;3.双击拖入的中继器会跳转类似动态面板的“(中继器)(page2)”新页面;4.在(中继器)(page2)中再添加两个和已有矩形大小一直的矩形,分别命名:name、sex、age;关于中继器的准备工作完毕,因为中继器需要存放动态数据,所以需要在页面增加动态数据的输入入口。5.回到拖入中继...

    2018-03-10
  • apple watch 中文手册:Apple Watch Xcode项目 配置过程

    Xcode会将Watch应用和WatchKit应用扩展打包,然后放进现有的iOS应用包中。Xcode提供了一个搭建Watch应用的模板,其中包含了创建应用、glance,以及自定义通知界面所需的所有资源。该模板在现有的iOS应用中创建一个…

    2015-06-15