为 Microsoft Teams 应用设计灯箱

  • 项目

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

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

解剖

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

设计 Teams 中 Lightbox 视图的剖析。

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

调整组件的大小

下面是包含main内容的容器的默认大小调整：

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

最佳做法

为 Lightbox 推荐的最佳做法

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

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

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

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

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

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

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

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

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

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

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

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

Do：标题中的“后退”按钮将打开上一个屏幕，然后关闭灯箱或单击main内容的两侧

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

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

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

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

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

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

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

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

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

操作：如果文件需要更多时间来聚焦且可编辑，请在新窗口中打开该文件。

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

不要：将 lightbox 用于文件作为Word、Excel、PowerPoint 和 PDF。 Lightbox 是内容预览的好组件。

示例演示了将灯箱组件用作文件Word、Excel、PowerPoint 和 PDF。