📚 Apostila Completa de Recursos UI/UX

O que é?

Mensagens temporárias que aparecem na tela para informar o usuário sobre ações realizadas, erros ou avisos importantes. Geralmente aparecem no canto da tela e desaparecem automaticamente.

Quando usar:

• Confirmar ações (salvamento, exclusão)
• Mostrar erros não críticos
• Avisos temporários
• Status de carregamento

Exemplo Prático:

O que é?

Janela sobreposta que aparece sobre o conteúdo principal, exigindo interação do usuário antes de retornar à aplicação. Bloqueia a interação com o resto da página.

Quando usar:

• Confirmações importantes
• Formulários de criação/edição
• Visualização de imagens
• Avisos críticos

Exemplo Prático:

O que é?

Menu que se expande para mostrar uma lista de opções quando clicado. Economiza espaço na interface mostrando opções apenas quando necessário.

Quando usar:

• Menus de navegação
• Seleção de opções
• Ações contextuais
• Filtros e configurações

Exemplo Prático:

O que é?

Pequena caixa de texto que aparece quando o usuário passa o mouse sobre um elemento, fornecendo informações adicionais ou explicações.

Quando usar:

• Explicar ícones ou botões
• Fornecer informações extras
• Ajuda contextual
• Definições de termos

Exemplo Prático:

O que é?

Componente que permite mostrar/ocultar seções de conteúdo de forma organizada. Apenas uma seção fica visível por vez, economizando espaço na tela.

Quando usar:

• FAQs (Perguntas Frequentes)
• Organizar grandes quantidades de informação
• Menus de navegação complexos
• Configurações categorizadas

Exemplo Prático:

O que são?

Componente que organiza conteúdo em painéis separados, permitindo alternar entre diferentes visualizações no mesmo espaço da tela.

Quando usar:

• Organizar informações relacionadas
• Economizar espaço vertical
• Configurações por categoria
• Diferentes visualizações de dados

Exemplo Prático:

O que são?

Contêineres visuais que agrupam informações relacionadas de forma organizada e visualmente atrativa, facilitando a escaneabilidade do conteúdo.

Quando usar:

• Listas de produtos ou artigos
• Dashboards e métricas
• Portfólios e galerias
• Resumos de informações

Exemplo Prático:

O que são?

Mensagens de feedback importantes que permanecem visíveis até serem dispensadas pelo usuário. Diferem dos toasts por serem persistentes.

Quando usar:

• Erros críticos que precisam de ação
• Avisos importantes sobre o sistema
• Informações que não devem ser perdidas
• Status de conectividade

Exemplo Prático:

O que é?

Indicador visual que mostra o progresso de uma tarefa ou processo, ajudando o usuário a entender quanto foi concluído e quanto resta.

Quando usar:

• Upload/download de arquivos
• Formulários de múltiplas etapas
• Processamento de dados
• Instalação de software

Exemplo Prático:

O que é?

Indicador visual animado que informa ao usuário que um processo está em andamento, mantendo-o engajado durante tempos de espera.

Quando usar:

• Carregamento de páginas
• Requisições para APIs
• Processamento de dados
• Qualquer operação que demora mais que 1 segundo

Exemplo Prático:

O que são?

Trilha de navegação que mostra ao usuário onde ele está dentro da hierarquia do site, permitindo navegação rápida para níveis anteriores.

Quando usar:

• Sites com estrutura hierárquica
• E-commerce (categoria > subcategoria > produto)
• Sistemas administrativos
• Documentação e wikis

Exemplo Prático:

O que é?

Componente que divide conteúdo extenso em páginas menores, facilitando a navegação e melhorando a performance ao carregar apenas uma parte dos dados.

Quando usar:

• Listas com muitos itens
• Resultados de busca
• Tabelas com muitos registros
• Feeds de notícias ou posts

Exemplo Prático:

O que é?

Controle que permite ao usuário alternar entre dois estados (ligado/desligado), fornecendo feedback visual imediato sobre o estado atual.

Quando usar:

• Configurações on/off
• Ativar/desativar funcionalidades
• Preferências do usuário
• Filtros binários

Exemplo Prático:

O que é?

Controle que permite ao usuário selecionar um valor dentro de um intervalo específico, movendo um marcador ao longo de uma barra.

Quando usar:

• Controle de volume
• Filtros de preço
• Configurações de qualidade
• Seleção de datas ou idades

Exemplo Prático:

O que são?

Pequenos elementos visuais que exibem informações concisas como status, categorias, contadores ou tags de forma compacta e destacada.

Quando usar:

• Indicar status (novo, ativo, pendente)
• Mostrar contadores (notificações, mensagens)
• Tags e categorias
• Níveis ou hierarquias

Exemplo Prático:

O que é?

Componente que guia o usuário através de um processo multi-etapas, mostrando o progresso e permitindo navegação entre as etapas.

Quando usar:

• Formulários de múltiplas etapas
• Processo de checkout
• Instalação de software
• Onboarding de usuários

Exemplo Prático:

O que é?

Sistema de avaliação que permite aos usuários expressar sua opinião sobre produtos, serviços ou conteúdo através de estrelas ou outros símbolos.

Quando usar:

• Avaliação de produtos
• Feedback de serviços
• Qualificação de conteúdo
• Pesquisas de satisfação

Exemplo Prático:

O que é?

Representação visual cronológica de eventos, mostrando uma sequência temporal de acontecimentos de forma organizada e fácil de entender.

Quando usar:

• Histórico de atividades
• Processo de status de pedidos
• Feed de notícias
• Linha do tempo de projetos

Exemplo Prático:

O que é?

Componente que permite exibir múltiplos itens (imagens, cards, produtos) em um espaço limitado, com navegação horizontal através de controles.

Quando usar:

• Galeria de imagens
• Destaques na homepage
• Produtos em destaque
• Depoimentos de clientes

Exemplo Prático:

O que são?

Funcionalidades que permitem aos usuários encontrar informações específicas rapidamente através de busca textual ou filtros categorizados.

Quando usar:

• Grandes volumes de dados
• E-commerce (busca de produtos)
• Listas e tabelas extensas
• Sistemas de documentação

Exemplo Prático:

O que é?

Painel lateral que contém navegação, filtros, informações complementares ou ferramentas, podendo ser fixo ou recolhível.

Quando usar:

• Navegação principal de aplicações
• Filtros avançados
• Informações de contexto
• Dashboards administrativos

Exemplo Prático:

O que é?

Ícone de menu representado por três linhas horizontais que, ao ser clicado, revela um menu de navegação, geralmente usado em dispositivos móveis.

Quando usar:

• Navegação mobile-first
• Economizar espaço em telas pequenas
• Menu principal em aplicações web
• Quando há muitas opções de menu

Exemplo Prático:

O que são?

Botões de seleção que permitem ao usuário escolher apenas uma opção de um conjunto, sendo mutuamente exclusivos dentro do grupo.

Quando usar:

• Escolha única obrigatória
• Formulários de pesquisa
• Configurações de preferências
• Seleção de método de pagamento

Exemplo Prático:

O que são?

Caixas de seleção que permitem ao usuário escolher múltiplas opções de um conjunto, sendo independentes entre si.

Quando usar:

• Seleção múltipla de opções
• Aceitar termos e condições
• Filtros de busca
• Configurações com múltiplas escolhas

Exemplo Prático:

O que é?

Campo de entrada que combina digitação livre com sugestões de opções, filtrando e exibindo resultados conforme o usuário digita.

Quando usar:

• Busca com sugestões
• Seleção de países/cidades
• Tags e categorias
• Campos com muitas opções

Exemplo Prático:

O que é?

Componente que permite selecionar múltiplos itens de uma lista, exibindo as seleções como tags removíveis.

Quando usar:

• Seleção de múltiplas categorias
• Atribuir tags a conteúdo
• Filtros avançados
• Seleção de destinatários

Exemplo Prático:

O que é?

Imagem ou ícone circular que representa um usuário ou entidade, podendo incluir iniciais, fotos ou ícones genéricos.

Quando usar:

• Perfis de usuários
• Comentários e mensagens
• Listas de membros
• Menu de navegação

Exemplo Prático:

O que são?

Campos de entrada de dados que permitem ao usuário inserir diferentes tipos de informações, como texto, números, datas, etc.

Quando usar:

• Formulários de cadastro
• Busca e filtros
• Configurações e preferências
• Entrada de dados em geral

Exemplo Prático:

O que são?

Estruturas organizadas em linhas e colunas para exibir dados tabulares de forma clara e escaneável, facilitando a comparação de informações.

Quando usar:

• Listas de dados estruturados
• Relatórios e dashboards
• Comparação de informações
• Administração de registros

Exemplo Prático:

O que são?

Menus compactos acessados através de ícones (três pontos verticais ou horizontais) que revelam ações contextuais relacionadas a um item específico.

Quando usar:

• Ações secundárias em cards ou listas
• Economizar espaço na interface
• Opções de editar/excluir/compartilhar
• Menu de configurações rápidas

Exemplo Prático:

O que são?

Tags interativos que podem ser clicados, selecionados ou removidos, representando filtros, categorias ou seleções do usuário.

Quando usar:

• Filtros ativos
• Tags de conteúdo
• Seleções em multiselect
• Categorias clicáveis

Exemplo Prático: