Observação
O acesso a essa página exige autorização. Você pode tentar entrar ou alterar diretórios.
O acesso a essa página exige autorização. Você pode tentar alterar os diretórios.
Você pode criar experiências pop-up modais em seu aplicativo Teams com caixas de diálogo (chamadas de módulos de tarefas 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 você pode pegar e modificar 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 praticamente qualquer lugar no 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 do bot.
- Cartão Adaptável: uma caixa de diálogo pode ser iniciada 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ê execute 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 de caixa de redação): na caixa de redação, você pode criar uma extensão de mensagem para abrir uma caixa de diálogo em vez do submenu típico. Reserve caixas de diálogo para interações complexas, como o preenchimento de um formulário.
Anatomia
Os diálogos fornecem uma superfície flexível para experiências de aplicativo hospedadas. Eles são criados usando um iframe (desktop) ou webview (celular), 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 o uso de modelos para layouts comuns dentro de 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
Os diálogos são um ótimo lugar para exibir formulários com entradas sequenciais do usuário 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 se movam facilmente por etapas sequenciais.
Dispositivo móvel
Desktop
Mídia
Incorpore conteúdo de mídia em uma caixa de diálogo para uma experiência de visualizaçã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
O que fazer: Mostrar uma caixa de diálogo por vez
Afinal, o objetivo é focar o usuário na conclusão de uma tarefa!
O que não fazer: 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
Embora os Cartões Adaptáveis hospedados em uma caixa de diálogo sejam renderizados 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 em todos os 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! Um diálogo em várias telas pode ser problemático porque as mensagens recebidas distraem e tentam os usuários a sair. Se sua tarefa estiver realmente envolvida, abra uma página da Web inteira 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 sobre uma caixa de diálogo. Isso cria uma experiência de usuário confusa.
Colaborar conosco no GitHub
A fonte deste conteúdo pode ser encontrada no GitHub, onde você também pode criar e revisar problemas e solicitações de pull. Para obter mais informações, confira o nosso guia para colaboradores.