Nesta aula, discutimos o uso de modais, overlays, drawers e outros componentes de sobreposição para conduzir o foco do usuário em ações ou informações críticas. Foi abordada sua anatomia, boas práticas e estratégias de aplicação.

Pontos principais da aula:

1. O que são modais?

   • Elementos que interrompem temporariamente o fluxo principal para apresentar conteúdo ou solicitar ações específicas.

   • Úteis para decisões importantes, criação de itens, exibição de imagens ou formulários rápidos.

2. Componentes relacionados:

   • Overlays/Drawers: Abrem-se lateralmente ou de cima/baixo, oferecendo informações sem bloquear toda a interface.

   • Dialogs e Popups: Alertas rápidos ou confirmações que demandam resposta.

   • Lightboxes: Foco em imagens ou vídeos, com fundo escurecido.

3. Estrutura de uma modal:

   • Backdrop: Fundo escurecido que minimiza distrações.

   • Caixa principal: Contém cabeçalho (título), corpo (conteúdo principal) e rodapé (botões de ação).

   • Botão de fechamento: Sempre que possível, facilite a saída da modal.

4. Boas práticas de uso:

   • Use modais de forma estratégica, evitando interrupções frequentes.

   • Mantenha botões alinhados à direita, com ações organizadas em ordem de prioridade (primária, secundária, terciária).

   • Adapte padrões de design às convenções da plataforma (ex.: iOS, Android).

5. Cuidados importantes:

   • Certifique-se de que o propósito da modal seja claro e objetivo.

   • Evite usar modais sem interação prévia do usuário, a menos que seja essencial.Links extras