Dialog 弹窗

伴随遮罩出现的常驻容器。

    适用

    • 在用户开始操作之前,告知一些重要信息

    • 这个信息很重要,你需要打断用户的流程来获取注意力

    • 用户在不丢失当前页面上下午的同时,进入一个短暂的新流程

    • 用户在当前流程中,有一个附加的步骤,并希望用户在完成该附加步骤后继续之前的流程

    不适用

    • 不丢失当前页面的同时,并行进入一个新流程,并能够在两个流程之间随时切换。此时可以使用新开浏览器标签页面的形式

    • 一段无需操作的简单信息想要告知用户,且又不阻断用户当前的流程,请使用 Notice

    • 过于丰富的信息量和复杂的操作,请考虑使用全屏模态弹窗

    通用原则

    • 模态搭配遮罩:模态弹窗层级最高,它的出现将遮罩页面的所有内容。遮罩背后的元素不可交互,除非关闭模态弹窗。

    • 始终可被关闭:用户可点击弹窗外的遮罩来关闭弹窗;除此之外,模态弹窗还需要独立的「关闭」入口

    • 谨慎克制:需要谨慎地使用,因为它阻断了用户当前的操作流程;需要克制地使用,避免在模态弹窗中唤起另一层模态弹窗;承载的内容应该有所克制,尽量控制在一屏内,繁重的操作和密集的信息更适合设计为独立的页面

    • **聚焦:**模态弹窗是聚焦的,它始终居中于页面,吸引用户所有的注意力。

    • 操作明确:模态弹窗中的操作要非常明确,用户可以快速做出选择,并继续回到上一个流程中去。

    类型

    类型 何时使用
    Basic 基础型 最常用的类型,既可作为用户操作流程的开端,也可穿插在其他流程中使用。
    Compound 复合型 通常作为用户操作流程的开端时使用,因为其内部信息量大,结构复杂,用户无法做出快速响应,所以不合适穿插在其他流程中。
    Alert 提醒型 仅用于二次确认时使用

    Basic 基础型

    结构简单、通用性强的基础弹窗。允许进入二级页面。

    Compound 复合型

    包含侧栏结构的弹窗、自定义底部操作的弹窗, 用于复杂操作场景。

    Alert 提醒型

    构成

    1. Header

      1. 标题:标题应清晰传达当前模态弹窗的目的,文案请遵循文案与语气中的规范

      2. 关闭:用户可主动点击来关闭当前的模态弹窗

      3. **后退:**在有层级递进的场景下,让用户能够返回上一层级的内容

    2. 操作区

      1. 首要操作位于最右侧,建议并列放置 2 个操作项

      2. 如果只提供一个操作,则必须是确认操作

      3. 如果提供了两个操作,则必须一个是确认,一个是取消

    3. 侧边栏( Compound 复合型使用)

      1. 默认定位在第一个菜单,用户可随时切换菜单。
    4. 扩展区

      1. Footer 左侧为扩展区,可以承载独立操作项、行内提醒、辅助说明信息等;如果放置 Link,则必须为新开浏览器标签页面的形式。

    1. 容器:可关闭

    2. 图标+标题+描述

      1. 标题不允许折行,描述中不允许有链接。
    3. 操作区

    行为

    出现

    • 任何控件都可触发模态弹窗。

    • 「提醒型」弹窗可能会在页面加载完成后立刻出现。

    • 模态弹窗会中断用户当前任务流程。应谨慎使用它们,因为不是每个选择或任务都需要中断。

    内部滚动

    • 模态弹窗的高度取决于内容。

    • 当弹窗底部达到与浏览器窗口的最小间距 48px 的时候, Body 区域即激活内部滚动。

    • Header 与 Footer 始终固定。

    尺寸过渡

    在部分场景中,前后两个步骤会需要不同的弹窗尺寸,这时弹窗容器可以使用动画来做过渡。

    层级递进

    • 层级递进能够让用户在同一个模态弹窗内完成不同的步骤,并方便的返回上一步骤。

    • 除一级步骤外,其余步骤中的弹窗 Header 会激活返回图标按钮,用于返回上一步骤。

    关闭

    用户有三种方法关闭当前的模态弹窗:

    • 点击弹窗右上角的关闭图标按钮

    • 使用键盘中的 ESC 键,在严重情况下可禁用

    • 点击弹窗外的遮罩区域,在严重情况下可禁用


    样式

    布局

    尺寸

    组件/元素 L M S XS XXS
    Dropdown Menu 下拉菜单 320 280 240 200
    Select 选择器 320 280 240 200
    Ballon 气泡(非Tooltip类型) 360 320 280 240 200
    Dialog 弹窗 1200 920 680 440 320