为 Microsoft Teams 应用设计灯箱

灯箱是一个显示组件,它通过停用其后面的页面布局来强调重要信息。 灯箱中的信息不可编辑且不可交互。 使用 Lightbox 视图,用户可以在主 Teams 窗口的大型图面上预览媒体内容,包括图像、视频、音频文件。

Lightbox 组件设计用于快速评审、理解或验证。 它不支持编辑或协作操作。 用户可以在新 Teams 窗口中启动灯箱,也可以直接在本机应用或浏览器中打开它。

解剖

灯箱视图包括标题、中心舞台和旋转木马。

设计 Teams 中 Lightbox 视图的剖析。

计数器 说明
1 后退:用于导航到 previoius 屏幕的按钮
2 打开范围:按钮 (基本或拆分) 导航到外部窗口
3 包含内容操作的按钮:放大或缩小、共享、下载或打开聊天面板
4 幻灯片放映的雪佛龙
A 灯箱标题:可操作
B 中心阶段:主内容容器
C 轮播:可操作

调整组件的大小

下面是包含主要内容的容器的默认大小调整:

示例显示 Teams 中带有 lightbox 视图的图像大小调整。

最佳做法

为 Lightbox 推荐的最佳做法

操作:使用灯箱组件预览在全屏视图中呈现媒体的文件,例如图像、视频、音频

帮助在文件打开期间节省时间。 在主要内容顶部打开。 通过轻松浏览文件和快速软消除功能。

示例演示了如何使用灯箱组件预览文件。

不要:使用灯箱进行内容编辑或交互

灯箱中的信息不可编辑且不可交互。 在 “打开 位置”菜单中提供明确的选项,用户可以在其中开始与内容进行交互。

示例演示了如何使用灯箱组件进行内容编辑。

操作:使用 Lightbox 组件预览文档

文档,仅用于预览选项,或具有“更多”选项中的“预览”选项。

示例演示了如何使用灯箱组件来预览文档。

不要:在有助于查看实时状态的协作环境中使用灯箱

用户将无法查看文件中的其他人以及从灯箱进行更改。

示例演示了在协作环境中使用 Lightbox 组件。

做:标题中的“后退”按钮将移动到上一个屏幕,并关闭灯箱或单击主要内容的两侧

示例演示了在标题中使用带后退按钮的灯箱组件。

不要使用“更多”按钮关闭灯箱

可以通过返回到上一个屏幕或点击其外部来退出灯箱。

示例演示了将灯箱组件与更多后退按钮配合使用。

操作:突出显示聊天面板以传达有关预览文件的信息

示例演示了如何使用带突出显示的聊天面板的灯箱组件。

不要:请参阅在灯箱体验中批注

用户无法在灯箱文件中批注。

示例演示了在聊天面板中使用带批注的灯箱组件。

Do:如果文件需要更多时间来聚焦且可编辑,请在新窗口中打开该文件

示例演示了如何使用 Lightbox 组件在新窗口中打开文件。

不要:将 Lightbox 用于 Word、Excel、PowerPoint 和 PDF 形式的文件。 Lightbox 是内容预览的好组件

示例演示了如何对 Word、Excel、PowerPoint 和 PDF 格式的文件使用灯箱组件。