内容和对话,所有使用选项卡一次Content and conversations, all at once using tabs

重要

移动客户端上的选项卡Tabs on Mobile Clients

创建选项卡时,请遵循 移动电话上的选项卡指南Follow the guidance for tabs on mobile when creating your tabs. 如果您的选项卡使用身份验证,则必须将团队 JavaScript SDK 升级到版本1.4.1 或更高版本,否则身份验证将失败。If your tab uses authentication, you must upgrade your Teams JavaScript SDK to version 1.4.1 or later, or authentication will fail.

移动设备上的频道/组 (可配置) 选项卡:Channel/group (configurable) tabs on mobile:

  • 移动客户端仅显示具有值的可配置选项卡 websiteUrlMobile clients only show configurable tabs that have a value for websiteUrl. 如果希望您的选项卡显示在团队移动客户端上,则必须设置的值 websiteUrlIf you want your tab to appear on the Teams mobile clients, you must set the value of websiteUrl.
  • 移动上的默认打开行为是使用在浏览器中的外部打开 websiteUrlDefault open behavior on mobile is to open outside in browser using the websiteUrl. 对于发布到公用应用商店的应用程序,如果您希望频道选项卡在默认情况下在团队内打开,请遵循 移动电话上的选项卡指南,并转到您的支持代表以请求列入白名单。For apps published to the public App Store, if you want your channel tab to open inside teams by default, follow the guidance for tabs on mobile, and reach out to your support rep to request to be whitelisted.

选项卡是可用于在团队的随机工作流中共享内容、举行对话和托管第三方服务的画布。Tabs are canvases that you can use to share content, hold conversations, and host third-party services, all within a team’s organic workflow. 当您在 Microsoft 团队中构建一个选项卡时,它会将 web 应用程序的前端和中心放置在易于从关键对话中访问的位置。When you build a tab in Microsoft Teams, it puts your web app front and center where it’s easily accessible from key conversations.

准则Guidelines

一个合适的选项卡应显示以下特征:A good tab should display the following characteristics:

重点功能Focused functionality

当为满足特定需求而构建时,选项卡的工作效果最佳。Tabs work best when they’re built to address a specific need. 将重点放在一小部分任务或与选项卡所在通道相关的一组数据。Focus on a small set of tasks or a subset of data that’s relevant to the channel the tab is in.

简化 chromeReduced chrome

避免在选项卡中创建多个面板、添加导航层或要求用户在一个选项卡中垂直和水平滚动。换言之,请不要在选项卡中包含选项卡。Avoid creating multiple panels in a tab, adding layers of navigation, or requiring users to scroll both vertically and horizontally in one tab. In other words, try not to have tabs in your tab.

集成Integration

通过将 自适应卡 发布到对话中,查找通知用户有关选项卡活动的方法。Find ways to notify users about tab activity by posting adaptive cards to a conversation.

对话Conversational

寻找一种有助于围绕选项卡进行对话的方法。这样可确保在现有内容、数据或流程上进行对话中心。Find a way to facilitate conversation around a tab. This ensures that conversations center on the content, data, or process at hand.

精简访问Streamlined access

请确保在适当的时间授予对正确人员的访问权限。Make sure you’re granting access to the right people at the right time. 保持您的登录过程很简单将避免为发布和协作创建障碍。Keeping your sign-in process simple will avoid creating barriers to contribution and collaboration.

对窗口大小的响应Responsiveness to window sizing

在窗口大小中,可以将团队用作720px,以确保在小窗口中可用的选项卡与极高分辨率的可用性同样重要。Teams can be used in window sizes as small as 720px, so making sure that a tab is usable in a small window is just as important as usability at very high resolutions.

平面导航Flat navigation

我们要求开发人员不要将其整个门户添加到选项卡中。保持导航相对平整有助于保持更简单的会话模式。We ask developers not to add their entire portal to a tab. Keeping the navigation relatively flat helps maintain a simpler conversational model. 换言之,对话是关于事情的列表(如已会审的工作项)或一个内容(如规范)。In other words, the conversation is about a list of things, such as triaged work items, or a single thing, like a spec.

深入导航层次结构中有一些固有的导航挑战,在线程对话中。There are inherent navigational challenges with deep navigation hierarchy, within threaded conversations. 为获得最佳用户体验,应将选项卡导航保持在最少,并按如下方式设计:For the best user experience, your tab navigation should be kept to a minimum and be designed as follows:

  • 打开一个任务模块,如单个工作项或实体Opens a task module such as an individual work item or entity. 这将完全阻止聊天,并且是最佳选择,它是专门了解选项卡的聊天,而不是子实体或编辑体验。This precludes chat entirely and is the best option to keep chat specifically about the tab and not the sub-entities or editing experiences.
  • 在 iframe 中打开伪对话框Opens a pseudo dialog in an iframe. 如果与屏蔽背景一起使用,我们建议使用较亮的颜色,而不是黑色。If used with a screened background we recommend using the lighter color rather than the dark. app-gray-10 at 30%透明度工作良好。The app-gray-10 at 30% transparency works well.
  • 打开浏览器页面Opens a browser page.

特征Personality

您的选项卡画布极有机会为你的体验提供品牌。Your tab canvas presents a great opportunity to brand your experience. 您的徽标是标识的重要部分,与您的用户的连接。,因此请务必包含它:Your logo is an important part of your identity and connection with your users., so be sure to include it:

  • 将徽标放置在左右角或沿下边缘Place your logo in the left or right corner or along the bottom edge
  • 保持您的徽标较小且不引人注目Keep your logo small and unobtrusive

合并自己的颜色和布局 twill 也有助于传达个性。Incorporating your own colors and layouts twill also aid in communicating personality.

提示

请使用我们的视觉样式,让你的服务感觉像团队的一部分。Please work with our visual style so your service feels like a part of Teams. 请参阅示例 团队颜色See, for example Teams Colors


选项卡布局Tab layouts

  • Single canvas

    This is one large area where work gets done. OneNote and Wiki follow this pattern. If you have an app that doesn’t separate content into smaller components this would be a good fit.

  • List

    Lists are great for sorting and filtering large quantities of data and are great at keeping the most important things at the top. It is helpful to use sortable columns. Actions can be added to each list item under the ellipsis menu.

  • Column

    Columns are great for workflows that move an item from one column to another to indicate a new status. Consider supporting drag and drop for those scenarios. We recommend using dialogs or inline expansion for detail views.

  • Grid

    Grids are useful for showing elements which are highly visual. It helps to include a filter or search control at the top.


选项卡的类型Types of tabs

  • Wiki

  • Planner


配置页高度Configuration page height

重要

在9月2018中,选项卡 配置页面 的高度增加,而宽度保持不变。In September 2018, the height for the tab configuration page was increased while the width remained unchanged. 如果您的应用程序是为较旧的大小设计的,则选项卡配置页将具有大量的垂直空白。If your app is designed for the older size your tab configuration page will have a great deal of vertical whitespace. 从此更改中免除的旧版应用程序将需要在更新后与 Microsoft 联系,以适应新的维度。Legacy store apps exempted from this change will need to contact Microsoft after updating to accommodate the new dimensions.

选项卡配置页的尺寸:The dimensions of the tab configuration page:

sizes for config tabs

选项卡配置页面格式的准则Guidelines for tab configuration page format

  • 使固定高度图形元素上的选项卡配置页的内容区域的最小高度为基准。Base the minimum height of your content area of your tab configuration page on fixed-height graphic elements.
  • 使用) 的配置页面中的内容区域的高度计算可用的垂直空间 (window.innerHeightCalculate available vertical space (the height of the content area in the configuration page) using window.innerHeight. 这将返回 <iframe> 配置页面所驻留的大小,在将来的版本中可能会发生更改。This returns the size of the <iframe> in which your configuration page resides, which may change in future releases. 通过使用此值,你的内容将自动调整为将来的更改。By using this value your content will adjust automatically to future changes.
  • 将垂直空间分配给可变高度元素减去固定高度元素所需的值。Allocate vertical space to the variable-height elements minus what's needed for the fixed-height elements.
  • 对于 " 登录 状态",将内容垂直和水平居中。For the login state, vertically and horizontally center the content.
  • 如果您需要背景图像,则需要一个新图像,调整大小以适合 (首选) 的区域,也可以保留相同的图像并在其中进行选择:If you want a background image, you need either a new image, sized to fit the area (preferred), or you can keep the same image and choose between:
    • 与左上角对齐。aligning to the upper left hand corner.
    • 将图像缩放到合适大小。scaling the image to fit.

如果调整了适当的大小,您的选项卡配置页面应如下所示:When properly sized, your tab configuration page should look similar to this:

<img width="450px" title=""新建配置" 选项卡" src="~/assets/images/tabs/config-dialog-Contoso.png" alt="new config tab"/>

最佳做法Best practices

始终包含默认状态Always include a default state

如果您的选项卡是可配置的,则包括默认状态以使选项卡易于设置。Include a default state to make tabs easy to set up even if your tab is configurable.

深度链接Deep linking

只要有可能,卡片和 bot 应在承载的选项卡中深入链接到丰富的数据。例如,卡片可能会显示错误数据的摘要,但单击它可以在选项卡中显示整个 bug。Whenever possible, cards and bots should deep link to richer data in a hosted tab. For example, a card may show a summary of bug data, but clicking it can shows the entire bug in a tab.

名称Naming

在很多情况下,您的应用程序的名称将产生很好的选项卡名称。In many cases, the name of your app will make a great tab name. 此外,还应考虑根据它们提供的功能命名选项卡。But, also consider naming your tabs according to the functionality they provide.

选项卡通知Notifications for tabs

对于选项卡内容更改,有两种通知模式:There are two modes of notification for tab content changes:

  • 使用应用程序 api 将更改通知用户Use the app api to notify users of changes. 此消息将显示在用户的活动源和指向该选项卡的深层链接中。 请参阅 创建指向 Microsoft 团队中的内容和功能的深层链接This message will show up in the user’s activity feed and deep link to the tab. See Create deep links to content and features in Microsoft Teams
  • 使用 botUse a bot. 如果为 Tab 线程的目标,则此方法是首选方法。This method is preferred especially if the Tab thread is targeted. 结果将是,选项卡的线程对话将作为最近活动的视图移动到视图中。The result will be that the tab’s threaded conversation will be moved into view as recently active. 此方法还允许在通知的发送方式方面有一些复杂之处。This method also allows for some sophistication in how the notification is sent.

将邮件发送到选项卡线程可将对所有用户的活动的感知提高到所有用户,而无需明确通知每个人。Sending a message to a tab thread increases the awareness of activity to all users without explicitly notifying everyone. 这是不带噪音的感知。This is awareness without noise. 此外,当您 @mention 将特定用户的通知放在其源中时,会将它们直接链接到 tab 线程。In addition, when you @mention specific users the same notification will be placed in their feed, deep linking them to the tab thread directly.