设计Viva Connections快速视图

项目
03/21/2023

原则

创建快速视图以提供更详细的信息 (例如: 包含数据的详细列表)，或在不打开应用的情况下完成快速任务 (例如简单表单)。

下面是一些快速视图示例:

快速视图的各种示例的屏幕截图。

提示

快速视图的示例自适应卡片设计可从 GitHub 获取

快速视图体验基于单个 JSON，可以在不同平台和外形规格中使用。这在控件上的可用样式设置和放置方面引入了一些限制。不应期望对 Web/iOS 或 Android 上呈现的快速视图进行完美地相同或像素比较。

提示

JSON 是一种开放标准文件格式和数据交换格式，它使用可读文本存储和传输由属性–值对和数组 (或其他可序列化值) 组成的数据对象。它是一种常见的数据格式，在数据交换中具有多种功能，包括 Web 应用程序与服务器的通信。 JSON 是一种与语言无关的数据格式。它派生自 JavaScript，但包括用于生成和解析 JSON 格式数据代码的许多新式编程语言。 JSON 文件名使用扩展名 .json。

布局

卡片的屏幕截图，其中焦点位于标头和内容区域，包括容器、元素、输入。

标头
1. 撤消快速视图
2. 卡片名称，由仪表板卡标题定义
3. 打开链接的应用 (可选)
内容区域 - 可滚动，可以包含自适应卡架构定义的以下元素:
1. 容器
  1. 容器
  2. ImageSet
  3. FactSet
  4. ColumnSet
  5. 表格
2. 元素
  1. TextBlock
  2. RichTextBlock
  3. 图像
  4. 媒体
  5. ActionSet
3. 输入
  1. Input.Text
  2. Input.Date
  3. Input.Time
  4. Input.Number
  5. Input.ChoiceSet
  6. Input.Toggle

交互

快速视图是垂直滚动的，独立于界面接口的其余部分，不应水平滚动。

后退堆栈

避免在快速视图中添加过多导航级别。最好保持简单，以便用户可以轻松快速完成任务。

虽然可以从父级快速视图打开多个子级快速视图，但我们建议不要向下导航多个级别。

访问注册表单任务的移动图像，它引出了注册 FAQ 卡片。

快速视图与 Web 视图

尽管它们在视觉上很相似，但它们是用于不同的情况的两个不同的界面。

注册表单卡片和 Microsoft dot com 的 Web 浏览器选项卡的屏幕截图。

快速视图

此 UI 界面是使用 JSON 代码生成的。与通过 Web 视图调用的网页相比，这是执行快速操作或填充简单窗体或以更快的加载时间呈现更多信息的一种平均值。

Web 视图

可用于加载网页及其可提供的所有内容，包括更复杂的布局和更好的样式，加载速度可以比快速视图慢。

在移动设备上打开的任何网页都将呈现在 Web 视图中，如果在 SharePoint 上打开，它将是新的浏览器选项卡。

主题

Web

快速视图将遵循 SharePoint 默认和自定义公司创建的主题。

显示在网页上查看的卡片在浅色模式和深色模式下的显示方式的屏幕截图。

移动设备

iOS 和 Android 移动版上的快速视图目前不支持深色主题。

显示在移动设备上查看的卡片在浅色模式和深色模式下的显示方式的屏幕截图。

链接和单一登录的行为

对于某些卡片，你将使用指向 URL 的链接。根据内容的位置，指向 URL 的链接可能会在 Microsoft Teams 或其他位置显示内容，而单一登录 (SSO) 行为可能有所不同。获取有关指向 URL 和 SSO 的链接的行为方式如何因要链接到的内容位置而不同的详细信息。了解更多

通过