警报
警报用于在不中断其工作流程的情况下吸引用户的注意力并为他们提供有用的信息。
§何时使用
它旨在向用户更新系统的当前状态,报告错误和警告,并为用户提供尽快更正这些错误的说明、链接或命令。
§类型
视情况而定,用户可能会看到以下警报类型之一(类型):
- Danger 用于通知用户当前无法继续进行基础场景(例如,无法访问对象),或者进一步的用户操作可能会导致数据或资源的永久丢失。
- 警告用于告知用户进一步的操作可能很困难或备用场景可能不可用。
- 成功用于通知用户系统处于正面状态或任何其他积极变化。例如,关于成功完成漫长手术。
- 信息用于显示有关如何组织系统工作的建议(应明确显示)或宣布其他系统功能。
- 普通主要用于突出显示文本,例如简短的帮助、示例代码、计算结果等。
不要仅仅为了吸引用户注意而替换类型,例如在带有警告或错误类型的警报中显示参考信息。
除了说明外,Alert 还提供许多命令来帮助用户找到解决方案并采取行动。
§何时不使用
由于警报具有破坏性(尤其是在选择了错误的警报类型时),因此应谨慎使用警报。
- 我们不建议使用警报来显示与单独的表单或对话框字段相关的错误、警告或帮助消息。在这种情况下,最好在字段组件上使用错误状态,或者在字段旁边显示纯文本消息或带有图标的文本。
- 我们不建议在同一个页面(表单、对话框)上放置多个警报,例如 “危险” 和 “警告”,因为这会使确定消息的优先级变得困难。
- 请勿将 Alert 用于其预期目的以外的任何用途,例如直观地突出显示页面上的任何区块:标题、表单字段等。
- 请勿使用警报来确认操作已完成。对于这些类型的任务,使用 Dialog。
- 不要使用警报来显示用户启动的操作的状态。为此,请使用烤面包机。
§内容
必需的警报元素包括描述和图标。除此之外,警报还可能包括标题(标题)、关闭按钮(关闭)以及最多三个带操作的附加按钮(操作)。
§图标
默认情况下,警报显示与其类型相对应的图标。但是,您可以为组件选择自己的图标,同时保持背景颜色不变。对于警报类型 “正常”,该图标是可选的,默认情况下不显示。
§文本
标题和描述文本应尽可能简短,并以大写字母开头。如果您想向用户提供更多信息,最好使用链接或 “帮助”、“文档” 和 “了解更多” 按钮将用户定向到单独的帮助页面或网站。
标题应清楚地传达信息的主题。但是,它不应该重复描述。如果选择论文并将其变成标题很困难,请使用没有标题的描述。
标题不应以句号结尾。
§纽扣
根据设计要求和约束条件,其他按钮可能会显示在文本的右侧(水平布局)或其下方(垂直布局)。
如果按钮及其标签在不创建不必要的换行符的情况下为描述和标题留出了足够的空间,则将按钮放在右边。如果警报的宽度小于 500-600 像素,请选择垂直视图。
默认情况下,其他按钮使用普通样式。但是,根据消息的语义,它们可以是操作、对比正态和各种类型的大纲(大纲信息、大纲危险等)。我们建议保持所有三个按钮的样式一致。仅使用一个 “操作” 按钮,并确保考虑页面的上下文,例如是否已经存在其他操作按钮。
警报有一个十字按钮,如果用户由于消息无关而想要隐藏该消息,则应显示该按钮。
§选项
警报的宽度不受限制:它可以占用页面(表单或对话框)上的全部可用空间,也可以使用由主要内容的宽度确定的固定宽度。
如果警报设计为在靠近页面边界(表单、对话框)的地方显示并占据整个宽度(例如,关于更新浏览器或网站上存储 Cookie 条件的消息),则无需将警报容器的角落变圆。
如果设计不要求警报主动吸引用户的注意力,则可以使用轮廓视图,其语义类型与填充视图相同。