iOS和Android规范解析——警告框(Alerts)对比

在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. 确保警告框在竖屏、横屏条件下都显示正常。

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

标题和描述信息

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

标题要尽量简洁,字越少越好。标题可以考虑使用疑问句或者简短的陈述句。对于描述信息,首先它不是必须的。如果一定需要描述信息,则尽量保证描述信息尽可能短(一到两行)。另外,在写这些文案的时候,要尽量避免显得“指责”、“审判”和“羞辱”(国内应该没有哪个应用敢出一个有羞辱意思的警告框吧,不要命了吧,呵呵呵呵)。因为用户都知道,警告框的出现,是来告知他们出现了问题或者比较危险的情况的,所以文案要明确地告知这些信息。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规范中对于警告框的规定。还是那句话,规范是最标准的情况,场景是千变万化的,具体运用的时候还是需要根据场景来灵活应用。这就像先掌握数学公式,之后遇到不同的题目,运用公式来灵活解题。

各位如果有不同见解,欢迎留言讨论。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容