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

相关推荐

  • 达内UED高薪喜报|4个月拿18W年薪,他是怎么做到的?

    达内UI设计,中国UID课程标准制定者世界上最让人心动的情话,不是我爱你,而是买!买!买!在过去的双11,你买爽了吗?或者给你另一半最真的爱“清空购物车”了吗?但是,如果你的口袋瘪瘪的,每一笔钱花的都要精打细算,你怎么给另一半带去精致的生活呢?一个月挣3000,你怎么节约也只有3000,一个月挣2万,你花掉1万,还有1万,一个月挣30万,你花掉1万,还有29万,所以不要把脑细胞浪费在天天怎么节约,一定要把心思花在,怎么赚钱、怎么开心、怎...

    2018-01-31
  • 机器学习相关——协同过滤,探索推荐引擎内部的秘密,第 3 部分: 深入推荐引擎相关算法 - 聚类

    机器学习相关——协同过滤,探索推荐引擎内部的秘密,第 3 部分: 深入推荐引擎相关算法 - 聚类 智能推荐大都基于海量数据的计算和处理,然而我们发现在海量数据上高效的运行协同过滤算法以及其他推荐策略这样高复杂的…

    2015-12-22
  • 情感化设计对互联网产品的启发

      “产品具有好的功能是重要的;产品让人易学会用也是重要的;但更重要的是,这个产品要能使人感到愉悦。”       美国认知心理学家Donald Norman在2002年提出产品设计的”情感化“理念,随着“体验经济时代”来临,…

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

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

    2017-05-29
  • 【交互基础】系列之解析移动端导航设计模式

    鉴于目前交互设计的知识体系较为混乱,我写了这个[交互基础]系列专题,旨在整理移动端交互设计基础知识。巩固自己的知识体系,也与大家共勉,打好基础,才能飞得更高!

    2017-04-30
  • 产品设计中关于表格设计的一些经验分享

    由于长时间主导后台产品的设计服务,表格的大量应用,总结了些许经验,通过半个月的断断续续的整理归纳,希望对你有所帮助,欢迎阅读!

    2017-05-18
  • 绘制用户体验

    在今年的UX Weeks大会上,Jim Kalbach组织了一场Mapping Experience的工作坊,提出在产品和服务之间关系日益密切的今天,如何形成一个服务生态系统,是商业竞争中的重点。其实阿里巴巴集团在早前就提出了“商业生态”这个概念,但是到底应该如何做?Jim提出:想要在竞争中胜出,其中非常重要的,就是必须清楚的了解自己提供的各种产品和服务是如何相互作用的,以及是怎样在用户的生活中发生影响的。

    2017-05-16
  • UI设计师扔掉PS,使用Axure是怎样一种体验?

    ——我的生活将再不会像从前那样……所以,Axure……这真的仅仅只是一个做原型的工具吗?UI设计师可以完全放弃其他工具,仅仅靠Axure完成所有工作吗?这个程序有什么优缺点呢?下面我将试着回答这些问题。最近我开始放弃Adobe Photoshop转向Axure,然后发现了它除了原型制作以外的潜能,也许我的生活将有大不同。如果有时候你不得不打开PS查看位图细节,你就会知道它到底有多慢。近年来PS功能越来越丰富,当我使用了另一个看起来明显简...

    2018-04-17
  • 国外的视觉设计好在哪里?

    最近为了团队能做好产品首页设计,我研究了很多国外to B类的相关产品设计。发现国外这类设计作品在整体水准上比国内高了不止一个档次(国内to B产品起步较晚,在设计方面的研究几乎空白),而这种差距和设计技法没有太多关系,更多的是对产品个性的把握和传达。

    2017-06-01
  • Google 内部资料:提升用户体验的三大设计原则

    想提升用户体验?在你运用自己的创意和设计思路时,请考虑这些由 Android 用户体验团队秉承用户体验至上的理念而制定的 Android 设计原则。一、让人着迷1. 以意想不到的方式让人眼前一亮漂亮的界面、精心布置的动画,或恰到好处的声效,都会带来快乐的体验。精细的效果能产生一种轻松的氛围,让人感觉自己拥有强大的力量。2. 实际对象要比按钮和菜单更有趣让用户可以直接触摸和操作你应用中的对象,这样,可以让执行任务更轻松,让用户更满意。3....

    2018-02-06