覆盖层#

推荐示例

用户点击「删除」后，直接操作；出现 Message 告知用户操作成功，并提供用户「撤销」的按钮；用户进行下一个操作或者 1 分钟内不进行任何操作， Message 消失，用户无法再「撤销」。

推荐示例

特例：在执行某些无法「撤销」的操作时，可以点击「删除」后，出现 Popconfirm 进行二次确认，在当前页面完成任务。

不推荐示例

滥用 Modal 进行二次确认，就像「狼来了」一样，既打断用户心流（无法将上下文带到弹出框中），也无法避免失误的发生。

二次确认覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝试，给用户机会「撤销」即可。

详情覆盖层示例

通过「点击」图标查看更多详情信息。

详情覆盖层：一般在列表中，通过用户「悬停」/「点击」某个区块，在当前页加载该条列表项的更多详情信息。

注：使用「悬停」激活时，当鼠标移入时，需要设置 0.5 秒左右的延迟触发；当鼠标移出时，立刻关闭覆盖层

输入覆盖层示例

鼠标「点击」图标触发；鼠标「点击」悬浮层以外的其他区块后，直接保存输入结果并退出。

输入覆盖层：在覆盖层上，让用户直接进行少量字段的输入。

嵌入层#

列表嵌入层示例

列表嵌入层：在列表中，显示某条列表项的详情信息，保持上下文不中断。

标签页示例

标签页：将多个平级的信息进行整理和分类了，一次只显示一组信息。

虚拟页面#

在交互过程中，「覆盖层」可以在当前页面上方显示附加内容和交互链接；「嵌入层」可以在页面内部实现同样效果；而「虚拟页面」不局限机械时代的「页面」，可以利用信息时代的特点构建一种新型「页面」。

流程处理#

长期以来，Web 实现流程的方式就是把每个步骤放在一个单独的页面上。虽然这种做法是分解问题最简单的方式，但并不是最佳解决方案。对于某些「流程处理」而言，让用户始终待在同一个页面上则更有必要。

渐进式展现示例

渐进式展现：基于用户的操作/某种特定规则，渐进式展现不同的操作选项。

配置程序示例

配置程序：通过提供一系列的配置项，帮助用户完成任务或者产品组装。

弹出框覆盖层示例

弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用「步骤条」来管理复杂流程也是可行的。