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

相关推荐

  • 2017 年你应该尝试的:七个最有前景的设计工具

    随着新工具的发布,现有工具版本的更新迭代,2016 年显然是设计类工具蓬勃发展的一年。在本文中,我挑选了一些在 2017 年值得我们关注的设计工具。这些工具在设计工具类的社区中都拥有着大量的人气,所以挑选出来与大家一同分享。Have Fun!注:本文版权归原作者所有,仅用于学习与交流。

    2017-05-08
  • 欧洲(非英国)交互设计申请攻略

    今天为大家带来欧洲(非英国)地区交互设计专业留学申请攻略,从学校/专业/费用等方便分析每个学校的优缺点,让大家在选择学校时更有的放矢。 1.代尔夫特理工大学/Technische Universiteit Delft 学位:Master of S…

    2015-11-04
  • 澳洲留学 | 交互设计专业硕士大解析

    📢:1⃣️条信息,足以改变你的未来!欢迎关注本平台交互设计在中国是一个新兴的产业,但是随着中国电子系统对人们生活影响的逐渐扩大,中国交互设计师将面临一个很大的缺口。什么是交互设计专业?1.words 语言语言是互动的最基础部分。人与人之间的互动是通过语言来进行基本交流。人也通过语言与机器进行交流。这里的语言可以是文字形式、语音形式、或动作形式等。在美国,一个好的交互设计师,也是一个很好地copy writer,需要具备良好的语言沟通和文...

    2018-04-06
  • 产品原型设计(2):母板的创建和使用

    Axure母板:可以将一些页面中的共同之处,比如导航、背景部分等,提取出来,制作为母板。将母板应用于某个页面,则该页 面相当于将模板的内容复制过来。如果有很多页面具有相同的内容,这些页面如果需要修改这些相同的内容时,仅需要在模板中即可完成所有页面的修改。方式一:直接创建母板步骤一:创建Axure母板:在“母板”区直接创建母板里创建了一个名称为“Axure学习平台”的模板步骤二:使用母板选中“Axure学习平台”母板,邮件选择“添加到页面...

    2018-04-08
  • 交互新人,请不要再犯这几个错误了!

    不知不觉,我已经正式在交互设计的路上越走越远,了解得越多,就觉得交互设计需要学习和掌握的知识越多;同时犯的错也会越多。然而犯错并不是一件坏事,怕的是犯过的错误不能够被积极地思考,我们不能及时把错误化作成长。根据目前我的一些浅薄经验,总结出了交互新人往往容易犯的一些错误,以及关于错误的一些思考。

    2017-05-22
  • 如何基于反馈迭代用户体验?

    作为互联网从业者,大家都知道,任何一款互联网产品的迭代,都一定离不开用户反馈和数据。如何通过这两个部分对产品的现状进行分析,并且提出产品功能迭代和体验优化是所有产品经理和设计师日常工作都需要面对的课题。作为一名城市规划建筑师,你接到一个任务,是要在横穿城市是一条河上造一座桥,你拿到这个任务的时候你会想些什么,“我该在哪个位置造这座桥?”,“我该造一座什么样的桥呢,斜拉桥还是拱桥?”还是“这座桥是木制、铸铁还是钢筋混凝土?”,这些都不对,首先应该想的是“为什么要建桥?”,如果你得到的答案是需要将人送到河对岸去,那么基于这个目标,你还觉得一定需要造桥,挖个隧道是不是也可以,建个轮渡也行啊。如果答案是需要将某些信息送到对岸去呢?整个命题就发生了巨大的变化。这就是设计思维在思考问题时的重要意义。

    2017-05-20
  • 网易资深设计师:ToB产品的6条交互设计经验

    网易UEDC –李东岳:本文希望能够总结一些B端产品的设计经验,帮助大家更好的进行ToB产品的交互设计 工作。

    2017-09-26
  • Justinmind 和 Axure谁更适合做原型?

    Justinmind 和 Axure 都是目前很强大的原型设计工具,被业界推为原型设计神器,在很多项目中起着不可估量的作用,但这两者的之间的作用是相互竞争还是相辅相成呢,我们应该客观地进行分析,使之更好地服务于我们的…

    Axure 2015-08-25
  • 全新的交互体验 | 三星Bixby中文版首发体验视频

    在三星盖乐世 S8 | S8+发布之时,三星还发布了全新语音助手“Bixby”,但中文适配需要时间所以让国内的星粉久等了!为了可以让国内小伙伴快速上手,饼饼特地做了 Bixby中文版体验视频,快速了解 Bixby来这里看就对了!三星Bixby不同于一般的语音助手,在满足一般功能操作的同时还可以进行更深度操作,比如发微博、微信发红包、打开相机自动拍照以及导航等;有关更多Bixby的深度功能,我们期待与大家共同挖掘!点击下方“阅读原文”,了...

    2018-01-30
  • 阿里交互新手小记 | 交互工作流程的梳理

    头疼就是脑子里有什么正在激烈地进行改变,可能就是你从困难上学会的东西。—— 写这篇文章的人

    2017-05-23