Projetando seu aplicativo do Microsoft Teams com modelos de interface do usuário
Crie seu aplicativo do Microsoft Teams mais rapidamente com modelos de interface do usuário. Os modelos são uma coleção de componentes baseados em interface do usuário fluentes que funcionam em casos comuns de uso do Teams, dando mais tempo para descobrir a melhor experiência para seus usuários.
Introdução a ferramentas e exemplos
Os recursos a seguir podem ajudá-lo a projetar e desenvolver seu aplicativo usando modelos de interface do usuário.
Kit de IU do Microsoft Teams
Pegue modelos de interface do usuário para seu design de aplicativo no Kit de Interface do Usuário do Microsoft Teams, que também inclui informações abrangentes sobre uso, anatomia, acessibilidade e práticas recomendadas.
Os guias estratégicos do aplicativo e os modelos de interface do usuário também estão disponíveis para ajudar você a começar a usar os aplicativos estendidos no Microsoft 365.
Biblioteca de Interface do Usuário do Microsoft Teams
Exiba e teste modelos individuais de interface do usuário do Teams e componentes relacionados em seu navegador.
Importe esses modelos e componentes relacionados diretamente para seu projeto do aplicativo Teams.
Aplicativo de exemplo
Instale um aplicativo de exemplo para ver como os modelos de interface do usuário parecem e se comportam nos contextos do Teams.
Calendário
No Teams, um calendário é onde um usuário exibe, agenda e gerencia eventos futuros e passados para si ou para um grupo.
Casos de uso superiores
- Agendar reuniões e eventos
- Obter lembretes de reuniões e eventos futuros
- Exibir agendamentos
Desktop
Painel
Um dashboard exibe diferentes tipos de conteúdo em um local central (como um aplicativo pessoal ou guia do Teams). Os usuários devem ser capazes de personalizar pelo menos parte do que veem em um dashboard.
Casos de uso superiores
- Analisar dados
- Métricas de relatório
- Organizar informações diferentes em um só lugar
Dispositivo móvel
Desktop
Visualização de dados
Você pode usar diferentes tamanhos de cartão (único, duplo e completo) para empilhar e organizar visualizações de dados na mesma página. Os cartões são dimensionados para ajustar o layout da coluna e preencher espaços em branco.
Casos de uso superiores
- Exibir informações complexas
- Criar um dashboard
Dispositivo móvel
Desktop
Estado vazio
O modelo de estado vazio pode ser usado para muitos cenários, incluindo entrada, experiências de primeira execução, mensagens de erro e muito mais. É altamente flexível: adapte-o para usar um, alguns ou todos os componentes no design a seguir.
Casos de uso superiores
- Entrar
- Mensagens de boas-vindas e experiências de primeira execução
- Mensagens de sucesso
- Mensagens de erro
Dispositivo móvel
Desktop
Filter
Um filtro permite reduzir as informações que você vê com base nos critérios selecionados. Você pode incluir filtros com tabelas, listas, cartões e outros componentes que organizam o conteúdo.
Casos de uso superiores
Organizando conteúdo em:
- Listas
- Tabelas
- Painéis
- Visualização de dados
Formulário
Os formulários são usados para coletar, validar e enviar entrada do usuário de forma estruturada. A rotulagem clara e os agrupamentos lógicos de campos de entrada são fundamentais para uma boa experiência do usuário.
Casos de uso superiores
- Entrar
- Perfis de usuário
- Configurações
- Coleção de entrada do usuário
Dispositivo móvel
Desktop
Listar
Você pode usar uma lista para exibir itens relacionados em um formato digitalizável e permitir que os usuários tomem ações em uma lista inteira ou itens individuais.
Casos de uso superiores
- Exibir dados
- Ações contextuais no conteúdo do aplicativo
Dispositivo móvel
Desktop
Entrar
Você pode criar fluxos de entrada de aplicativo para diferentes contextos do Teams e provedores de identidade. O exemplo a seguir inclui o SSO (logon único), que recomendamos para a experiência de autenticação mais simples.
Caso de uso superior
- Autenticar usuários
Dispositivo móvel
Desktop
Configurações
As telas de configurações são onde os usuários podem configurar suas preferências com seu aplicativo.
Observação
As configurações são um contêiner para componentes básicos da interface do usuário.
Caso de uso superior
- Gerenciar recursos do aplicativo
Quadro de tarefas
Um quadro de tarefas, às vezes chamado de placa kanban ou pistas de natação, é uma coleção de cartões frequentemente usados para acompanhar o status de itens de trabalho ou tíquetes. Ele também pode ser usado para classificar qualquer tipo de conteúdo em categorias. Você pode editar e mover as cartas entre colunas.
Casos de uso superiores
- Gerenciamento de projetos. Atribuindo tarefas e status de acompanhamento.
- Debate. Adicionando ideias em diferentes categorias.
- Exercícios de classificação. Organizando qualquer tipo de informação em buckets.
Dispositivo móvel
Desktop
Assistente
Um assistente orienta um usuário através de várias telas para concluir uma tarefa (como um processo de instalação).
Casos de uso superiores
- Configurar
- Integração
- Experiências de primeira execução
Dispositivo móvel
Desktop
Confira também
Comentários
Em breve: Ao longo de 2024, eliminaremos os problemas do GitHub como o mecanismo de comentários para conteúdo e o substituiremos por um novo sistema de comentários. Para obter mais informações, consulte https://aka.ms/ContentUserFeedback.
Enviar e exibir comentários de