Επεξεργασία

Κοινή χρήση μέσω


Designing your Microsoft Teams app with UI templates

Design your Microsoft Teams app faster with UI templates. The templates are a collection of Fluent UI-based components that work across common Teams use cases, giving you more time to figure out the best experience for your users.

Getting started with tools and samples

The following resources can help you design and develop your app using UI templates.

Microsoft Teams UI Kit

Grab UI templates for your app design from the Microsoft Teams UI Kit, which also includes extensive information about usage, anatomy, accessibility, and best practices.

The app playbooks and UI templates are also available to help you get started for the apps extended across Microsoft 365.

Fluent UI React components

View and test individual Fluent UI React components in your browser.

Sample app

Install a sample app to see how UI templates look and behave within Teams contexts.

Calendar

In Teams, a calendar is where a user views, schedules, and manages upcoming and past events for themselves or a group.

Top use cases

  • Schedule meetings and events
  • Get reminders of upcoming meetings and events
  • View schedules

Desktop

Example shows a calendar UI template on desktop.

Dashboard

A dashboard displays different types of content in a central location (such as a Teams personal app or tab). Users should be able to customize at least some of what they see on a dashboard.

Top use cases

  • Analyze data
  • Report metrics
  • Organize different information in one place

Mobile

Example shows a dashboard UI template on mobile.

Desktop

Example shows a dashboard UI template on desktop.

Data visualization

You can use different card sizes (single, double, and full) to stack and organize data visualizations on the same page. The cards scale to fit the column layout and fill in blank spaces.

Top use cases

  • Display complex information
  • Create a dashboard

Mobile

Example shows a data visualization UI template on mobile.

Desktop

Example shows a data visualization UI template on desktop.

Empty state

The empty state template can be used for many scenarios, including sign in, first-run experiences, error messages, and more. It's highly flexible⁠—adapt it to use one, a few, or all of the components in the following design.

Top use cases

  • Sign in
  • Welcome messages and first-run experiences
  • Success messages
  • Error messages

Mobile

Example shows an empty state UI template on mobile.

Desktop

Example shows an empty state UI template on desktop.

Filter

A filter allows you to reduce the information you see based on the criteria selected. You can include filters with tables, lists, cards, and other components that organize content.

Top use cases

Organizing content in:

  • Lists
  • Tables
  • Dashboards
  • Data visualization

Example shows a filter template.

Form

Forms are used to collect, validate, and submit user input in a structured way. Clear labeling and logical groupings of input fields are critical for a good user experience.

Top use cases

  • Sign in
  • User profiles
  • Settings
  • User input collection

Mobile

Example shows a form UI template on mobile.

Desktop

Example shows a form UI template on desktop.

List

You can use a list to display related items in a scannable format and allow users to take actions on an entire list or individual items.

Top use cases

  • Display data
  • Contextual actions on app content

Mobile

Example shows a list UI template on mobile.

Desktop

Example shows a list UI template on desktop.

Sign in

You can design app sign-in flows for different Teams contexts and identity providers. The following example includes single sign-on (SSO), which we recommend for the simplest authentication experience.

Top use case

Authenticate users

Mobile

Example shows a sign in UI template on mobile.

Desktop

Example shows a sign in UI template on desktop.

Settings

Settings screens are where users can configure their preferences with your app.

Note

Settings is a container for basic UI components.

Top use case

Manage app features

Example shows a settings template.

Task board

A task board, sometimes called a kanban board or swim lanes, is a collection of cards often used to track the status of work items or tickets. It can also be used to sort any type of content into categories. You can edit and move the cards between columns.

Top use cases

  • Project management. Assigning tasks and tracking status.
  • Brainstorming. Adding ideas in different categories.
  • Sorting exercises. Organizing any kind of information into buckets.

Mobile

Example shows a task board UI template on mobile.

Desktop

Example shows a task board UI template on desktop.

Wizard

A wizard guides a user through several screens to complete a task (such as a setup process).

Top use cases

  • Setup
  • Onboarding
  • First-run experiences

Mobile

Example shows a wizard UI template on mobile.

Desktop

Example shows a wizard UI template on desktop.

See also