Material Design 组件图鉴 —— Dialog

Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.

对话框(模态化)通知用户进行某特别任务,或会包含一些关键重要信息,要求用户做出决定,有可能会包含数个任务。

几种 dialog 应用 context:

  • 作为警告类(Alert)
  • 作为简易菜单(Simple menus)—— 展示对应对象的更多选项,如点击打电话让用户选择拨打电话一还是电话二
  • 作为操作确认对话框(Confirmation dialogs)——要求用户进行一次操作确认

行为

对话框只是模态窗口的其中一种。

对话框应该尽量少出现,因为它会打断用户当前进行的任务。

对话框表意一定要简单明白,避免双重否定等复杂情况(除非你想套路用户)。

避免在对话框上面又弹一个对话框。 避免出现可以滚动的对话框。

例外一:全屏对话框 全屏对话框也是对话框,但是全屏对话框之上可以再出现一次对话框,因为在全屏的状态下,再出现一个对话框并不让 app 的 z 轴方向视觉效果太过复杂。

例外二:内容一定是可滚动的对话框 一些对话框的内容因为太长可能会让对话框必须可以滚动,譬如说选铃声。滚动时,对话框的title位置是固定的。如果 title 不固定,那么操作按钮也一定要是固定的。


警告

警告立即打断用户操作,告知用户一些重要信息。

警告与 Snackbar 使用的场景完全不同,Snackbar 是不会打断用户操作的,Snackbar 会在用户已经把任务执行完了之后才出现,并可能会提供撤销操作的选择。

不带标题的警告对话框 大部分的警告型对话框都是不需要带标题的。

  • 对话框内容表意要足够明确足够简单
  • 对话框按钮使用的文字要与任务相关联

带标题的警告对话框 只有当有可能会造成较为严重后果的情况时才使用带有标题的警告对话框。此时标题会作为问题,而正文则作为标题的补充。

  • 不要出现“警告”,“你确定吗”之类的问题,不要恐吓用户。


简易菜单

只应用于移动端与平板端。

为表项提供更详细选项并快速选择的菜单,点击后立即生效并关闭菜单

当选项少而且操作足够简单的时候,简易菜单会比常规的 dialog 更不容易打断用户。


简易对话框

简易对话框为用户提供更多的细节以及操作,他可以显示图像、文字与一个相关的操作,但不存在独立按钮。

点击立即生效并关闭菜单

点击框外区域即可关闭对话框。

距离屏幕左右边缘至少要有 40dp,而距离屏幕上下边缘至少要有 24dp,框内容与框边缘距离是 24dp。内容不可截字。

尽量少用。

确定对话框

需要点击 ok 进行操作确认,picker 就是一种确定对话框

按钮通常是: CANCEL - OK

全屏对话框

只有移动端(手机)适用,由于屏幕尺寸有限,当内容过于复杂时,多多考虑使用全屏对话框。

如,在日历里面建立一个时间就是一个全屏对话框。

使用

在遇到一下几个情况的时候使用全屏对话框:

  • 对话框内容需要用到一些IME(input method editor,例如picker以及键盘输入)。
  • 修改不会立即生效,而是要输入更多详细的东西。
  • 没有存草稿功能。
  • 进行批量操作或是改变排序的时候

动作

由于全屏对话框需要输入的内容可能很多,所以在退出的时候会要求用户确认一下。且一般来说右上角会有保存按钮。

dialog 是要使用 X 作为退出按钮的,操作之后要点击保存。 如果是←按钮的话,那么说明这个页面并不是一个对话框,里面进行了的操作也会立即生效。

标题

标题绝对不能过长


尺寸

对话框一般会有内容、标题(可选)、动作。

一般在很有必要的情况下才会使用标题,标题就是一句简单的疑问句,然后 content 变为对标题的补充与解释。

前进属性按钮考右边,回退属性按钮靠左。

对话框的操作按钮不能超过两个,不会有中间选项,要么前进,要么后退。例如learn more 按钮,就会将用户带离这个页面,让原本要完成的任务没有完成。

没有大小写区分的语言

有些语言没有大小写的区分,一定要保持一致性,放置好按钮。

前进按钮是有可能处于 disable 状态的,后退按钮一定是一直都是 enable 状态的。

标准尺寸

对话框 内容与其他元素边距:24dp 标题与正文距离:20dp 按钮组与其他元素边距:8dp 按钮高度:36dp 操作区域高度:52dp 对话框z轴高度:24dp

按钮 文字居中摆放 按钮高度:36dp 最小宽度:64dp 文字边距:8dp 按钮边距:8dp 按钮区域高度:52dp

横排按钮与竖拍按钮

当有足够的位置摆放的时候一般都采用横排按钮,但如果横排按钮过长,那么就要考虑竖排摆放了

按钮的宽度会由里面的文字大小决定,而建议的最大按钮宽度则由窗口的宽度来决定。

计算公式如下: (窗口宽度-8dp-8dp-8dp)/2

譬如说一个窗口的宽度是 280,那么按钮超过了建议最大按钮宽度 128dp 的话,就要采用竖排摆放样式。

竖排摆放的情况下,前进按钮位于后退按钮上方。

简易对话框

全屏对话框

App bar 高度:56dp 标题距离左边边框:72dp 标题文字大小:20sp 标题文字上下边距:20dp 关闭按钮左边距:16dp 前进按钮右边距:16dp 前进按钮字号:14dp