Criando caixas de diálogo para seu aplicativo do Microsoft Teams
Você pode criar experiências pop-up modais em seu aplicativo teams com caixas de diálogo (conhecidos como módulos de tarefa no TeamsJS v1.x). Use este recurso para exibir mídia e informações avançada ou concluir uma tarefa complexa.
Kit de IU do Microsoft Teams
Você pode encontrar diretrizes de design de diálogo mais abrangentes, incluindo elementos que podem ser pegos e modificados conforme necessário, no Kit de Interface do Usuário do Microsoft Teams.
Abrir uma caixa de diálogo
As caixas de diálogo podem ser iniciadas de quase qualquer lugar do seu aplicativo.
- Guia: uma caixa de diálogo pode ser iniciada a partir de qualquer link dentro de uma guia. Use em cenários em que você deseja que o usuário se concentre em uma interação.
- Bot: uma caixa de diálogo pode ser iniciada a partir de um link dentro de uma mensagem de bot.
- Cartão Adaptável: uma caixa de diálogo pode ser iniciada a partir de um Cartão Adaptável (enviado com uma extensão de mensagem ou por um bot) quando um usuário seleciona um botão.
- Extensão de mensagem (comandos de ação): as extensões de mensagem permitem que você tome uma ação específica no conteúdo da mensagem. Selecionar uma ação abre uma caixa de diálogo.
- Extensão de mensagem (contexto da caixa de composição): na caixa de composição, você pode projetar uma extensão de mensagem para abrir uma caixa de diálogo em vez do flyout típico. Reserve caixas de diálogo para interações complexas, como concluir um formulário.
Anatomia
As caixas de diálogo fornecem uma superfície flexível para experiências de aplicativo hospedado. Eles são criados usando um iframe (desktop) ou webview (móvel), para que você possa criar caixas de diálogo com nossos modelos de interface do usuário (recomendado) ou do zero.
Eles também podem ser construídos com a estrutura Cartões Adaptáveis, que pode ser uma maneira mais simples e mais rápida para facilitar cenários comuns (como formulários).
Celular
| Contador | Descrição |
|---|---|
| 1 | Cabeçalho: tornar os cabeçalhos claros e concisos. Descreva a tarefa que você quer que os usuários concluam. |
| 2 | Nome do aplicativo: nome completo do seu aplicativo. |
| 3 | Botão Fechar: fecha a caixa de diálogo. Não aplica alterações não salvas no conteúdo do aplicativo. |
| 4 | Modo de Exibição da Web: espaço responsivo que hospeda o conteúdo do seu aplicativo. |
| 5 | Ações (opcional): botões relacionados ao conteúdo do seu aplicativo. |
Área de trabalho
| Contador | Descrição |
|---|---|
| 1 | ícone do aplicativo |
| 2 | Nome do aplicativo: nome completo do seu aplicativo. |
| 3 | Cabeçalho: tornar os cabeçalhos claros e concisos. Descreva a tarefa que você quer que os usuários concluam. |
| 4 | Botão Fechar: fecha a caixa de diálogo. Não aplica alterações não salvas no conteúdo do aplicativo. |
| 5 | iframe: espaço responsivo que hospeda o conteúdo do aplicativo. |
| 6 | Ações (opcional): botões relacionados ao conteúdo do seu aplicativo. |
Projetando com modelos de IU
Considere usar modelos para layouts comuns em suas caixas de diálogo. Cada um é formado por componentes menores para criar um design elegante e responsivo que pode ser usado fora da caixa ou personalizado ao seu cenário ou com a aparência da sua marca.
- Lista: as listas podem exibir itens relacionados em um formato que facilita a visualização e permite que os usuários executem ações em uma lista inteira ou em itens individuais.
- Formulário: os formulários são para coletar, validar e enviar a entrada do usuário de forma estruturada.
- Estado vazio: o modelo de estado vazio pode ser usado para muitos cenários, incluindo entrar, experiências de primeira execução, mensagens de erro, e muito mais.
Exemplos
Lista
As listas funcionam bem em uma caixa de diálogo porque são fáceis de examinar.
Dispositivo móvel
Desktop
Formulário
As caixas de diálogo são um ótimo lugar para criar formulários com entradas de usuário sequenciais e validação embutida. Você pode aproveitar Cartões Adaptáveis como uma maneira de incorporar elementos de formulários.
Celular
Desktop
Entrar
Crie um fluxo de entrada ou inscrição focado com uma série de caixas de diálogo, permitindo que os usuários passem facilmente por etapas sequenciais.
Dispositivo móvel
Desktop
Mídia
Insira conteúdo de mídia em uma caixa de diálogo para uma experiência de exibição focada.
Dispositivo móvel
Desktop
Estado vazio
Use para mensagens de boas-vindas, erros e sucesso.
Celular
Desktop
Galeria de imagens
Incorpore um carrossel de galeria em um iframe (área de trabalho) ou modo de exibição da Web (móvel).
Celular
Desktop
Enquete
Esse exemplo apresenta os resultados da enquete iniciados de um Cartão Adaptável. A votação também pode ser colocada dentro de uma caixa de diálogo.
Dispositivo móvel
Desktop
Práticas recomendadas
Use essas recomendações para criar uma experiência de aplicativo de qualidade.
Usabilidade
Fazer: mostrar uma caixa de diálogo por vez
Afinal, o objetivo é focar o usuário na conclusão de uma tarefa!
Não: colocar uma caixa de diálogo em cima de uma caixa de diálogo
Isso cria uma experiência de usuário confusa e sem foco.
Dinâmico
Fazer: certifique-se de que o conteúdo seja responsivo
Enquanto cartões adaptáveis hospedados em uma caixa de diálogo renderizam bem em dispositivos móveis, se você optar por usar um iframe para hospedar o conteúdo do aplicativo, verifique se a interface do usuário é responsiva e funciona bem entre dispositivos.
Não fazer: use barras de rolagem horizontal
É uma prática recomendada manter o conteúdo focado e não muito extenso. Se um rolagem for necessária, role verticalmente e não horizontalmente.
Simplicidade
Fazer: seja breve
Você pode criar facilmente um assistente de várias etapas, mas isso não significa necessariamente que você deve! Uma caixa de diálogo de várias telas pode ser problemática porque as mensagens de entrada estão distraindo e tentando que os usuários saiam. Se sua tarefa estiver realmente envolvida, saia para uma página da Web completa em vez de uma caixa de diálogo.
Não fazer: ter interações longas
Tente manter suas interações curtas e diretas.
Mensagens de erro
Fazer: usar mensagens de erro em linha
Consulte o modelo de IU de formulários para obter orientações sobre o tratamento de erros em linha.
Não fazer: colocar mensagens de erro em caixas de diálogo
Não coloque uma mensagem de erro em uma caixa de diálogo em cima de uma caixa de diálogo. Isso cria uma experiência de usuário confusa.
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