正确使用控件-警告框

在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. 警告框是一种对用户的操作打断比较大的控件，在日常的设计中，应该在什么情况下使用警告框？

2. 请查看你手机里的APP，尝试找到一个警告框使用错误的地方，和使用正确的地方。这将帮你理解如何正确地使用警告框。

本文为小密圈“交互小殿堂”本周主题“场景思维”的节选内容。文章后半部分将介绍流程的完整性。感兴趣的朋友可加入小密圈“交互小殿堂”查看原文。

关于小密圈“交互小殿堂”

交互小殿堂设置了6个主题，帮助你系统学习交互：

- 场景思维（2周）

- 心理模型（1周）

- 流程设计（5周）

- 正确使用控件（15周）

- 测试方案（3周）

- 用研（3周）

以上这些专题，将每周固定发布在我的小密圈“交互小殿堂”。

同时，为了让大家更好地掌握每周的专题，安排每周的计划如下：

- 周一在小密圈“交互小殿堂”独家发布一篇主文，介绍本周主题；

- 周二至周五解答圈友们关于本周主题的问题；

- 周六分享优秀交互设计案例，并带领大家解析设计亮点；

- 周日总结本周所学。

6个专题结束后，会为大家提供7个需求，供大家实战，锻炼之前学到的技能。

具体的安排如下：

第一周，给出需求说明和重点提示；

第一周剩下的几天以及第二周，大家根据需求进行交互方案设计；

第三周集中点评大家的方案，给出建议。

欢迎加入，和大家一起系统学习交互。

加入小密圈方法

点击链接加入http://t.xiaomiquan.com/MBiq7qV