对话框
用于显示重要提示或请求用户进行重要操作的一种打断当前操作的模态视图。
类型
常规对话框
带输入框的对话框
如何使用
- 请谨慎使用对话框。对话框在提醒用户时,其前提会打断当前操作,确保每个对话框都只提供必要的信息和有用的操作,从而鼓励用户重视对话框。
- 不要为了提供信息而使用对话框。用户不喜欢被信息丰富却不可操作的提醒打断。如果只需要提供信息,优先寻求另一种可在相关环境中传达信息的方式,如底部弹出层或轻提示等。
- 避免为常见且可撤销的操作显示提醒,即使这类操作具有破坏性。当用户执行了无法撤销的罕见破坏性操作时,使用对话框提醒是最佳的方式,以防他们意外发起该操作。
- 避免多个对话框的重叠出现,如有需要请依次展示。
布局
对话框由三部分组成:
- 标题区。
- 内容区。
- 操作按钮区。
标题区
仅支持居中对齐方式,文字字符长度建议一行显示最佳。
内容区
按照内容的多少可以选择不同的对齐方式。非特殊情况建议使用居中对齐方式,例如:涉及排序、加载或输入框的对话框。
正常对话框
特殊对话框(涉及排序)
特殊对话框(涉及输入框)
特殊对话框(涉及加载)
操作按钮区
- 根据按钮的数量多少选择不同的布局展示,建议最多展示两个,如无必要,勿增实体。
- 当业务需要新增操作时,可以增加一个按钮,但是尽量少用,可以使用其他交互方式。
- 两个按钮的时候正向操作按钮放在右侧,三个按钮的时候从上到下依次展示正向操作和反向操作。
- 必须存在一个正向按钮,如果只有一个按钮时,必须是正向按钮。
一个按钮
两个按钮
三个按钮(特殊)
文本写作规则
标题
- 精简干练,无断句,陈述句时不添加标点。
- 感叹句、问句,需加对应标点符号(感叹号、问号)。
- 标题简明扼要,清晰描述要进行的操作。
内容
内容文本是对标题的详细解释,解释用户需要确认的内容以及确认后产生的影响、效果、影响范围等,可为疑问句或陈述句。尽量不使用辅助说明,若仍需要,避免与内容文本重合,如:错误代码。