图片灯箱和对话框怎么选？
一句话做出判断
图片灯箱是专门看图片或视频的对话框。普通对话框用来做选择、填表单或完成短任务。
要放大图片或视频时，用图片灯箱。主要工作是操作或做决定时，用普通对话框。
看看每个界面模式会做什么
先试试每个例子，再看它适合处理什么工作。
Lightbox
↗ 灯箱查看器
灯箱查看器会把图片或视频放大，并让周围页面变暗。
<dialog>点击照片后会打开全尺寸页面，并显示说明、“上一张”“下一张”和“关闭”按钮。
- 什么时候用
- 想仔细查看媒体，又不想丢失当前在图库中的位置时，就使用灯箱。
- 什么时候不要用
- 需要复杂编辑或持续并排比较时，不要使用灯箱。
- 代码里的名称
<dialog>
Modal Dialog
↗ 模态对话框
模态对话框是一个聚焦的小窗口，在关闭或完成前，会挡住当前页面的其他操作。
确认删除账户时，键盘焦点会留在对话框内；取消后，焦点会回到原来的按钮。
- 什么时候用
- 简短决定或小任务需要完整注意力时，就使用模态对话框。
- 什么时候不要用
- 不要在对话框上再叠另一个对话框，也不要用它显示普通低风险信息。
- 代码里的名称
<dialog> / role="dialog" aria-modal="true"
快速比较
| 界面模式 | 最适合 | 不适合 | 代码里的名称 |
|---|---|---|---|
| 灯箱查看器Lightbox | 想仔细查看媒体，又不想丢失当前在图库中的位置时，就使用灯箱。 | 需要复杂编辑或持续并排比较时，不要使用灯箱。 | <dialog> |
| 模态对话框Modal Dialog | 简短决定或小任务需要完整注意力时，就使用模态对话框。 | 不要在对话框上再叠另一个对话框，也不要用它显示普通低风险信息。 | <dialog> / role="dialog" aria-modal="true" |
上线前检查
- 01
先写下用户要完成什么事。
- 02
测试键盘、焦点、触控、缩放、加载、空白与错误状态。
- 03
不用鼠标悬停或动画，也要能取得相同信息。
- 04
放入真实内容，并在小屏幕和大屏幕上测试。
04
可以直接复制的比较需求
团队还不知道该选哪一种界面模式时，可以复制这段需求。
请在 灯箱查看器（Lightbox）、模态对话框（Modal Dialog） 中，为真实用户流程选出最合适的界面模式。判断规则：图片灯箱是专门看图片或视频的对话框。普通对话框用来做选择、填表单或完成短任务。。请写下任务、内容量和打断流程的代价，并检查键盘、触控、加载、错误与减少动态效果。说明选择理由，再沿用项目的设计系统，做出最小且无障碍的版本。