Uma tooltip dá uma dica curta. Um popover pode guardar mais textos, escolhas ou botões.
Use uma tooltip quando algumas palavras forem suficientes. Use um popover quando a pessoa precisar ler ou fazer mais sem sair da página. Abrir guiaCompare padrões de UI que são fáceis de confundir
Dois padrões podem parecer semelhantes, mas desempenham funções diferentes. Use estas regras curtas para escolher o correto.
Um modal para a página até a tarefa acabar. Um popover fica do lado do botão e deixa a página continuar funcionando.
Use um modal para uma tarefa que deve ser concluída primeiro. Use um popover para detalhes extras ou uma pequena ação. Abrir guia Menu Dropdown & Contextual — Pacote de AprendizadoDropdown & Context Menu — Learning Bundle vs. SelecionarSelect vs. Caixa de combinação editávelEditable Combobox
Um dropdown menu executa ações. Um select escolhe de uma lista fixa. Um combobox também deixa você digitar ou pesquisar.
Use um menu para ações. Use um seletor para uma lista curta e fixa. Use uma caixa de combinação para uma lista longa ou pesquisável. Abrir guiaAs abas alternam entre seções de conteúdo. Um controle segmentado altera um modo, filtro ou valor pequeno na mesma visualização.
Use abas para seções de conteúdo separadas. Use um controle segmentado para poucas opções curtas que mudam o mesmo conteúdo. Abrir guiaUm acordeão abre seções numa página e pode deixar várias abertas. Abas mostram uma seção por vez num mesmo espaço.
Use um acordeão para perguntas ou seções que as pessoas possam ler juntas. Use abas para algumas visualizações separadas quando apenas uma importa de cada vez. Abrir guiaUm toast é uma mensagem curta que não interrompe a tarefa. Um alerta fica ou interrompe porque não deve ser ignorado.
Use um toast para confirmar uma ação concluída. Use um alerta para falha, perigo ou escolha que precise de atenção imediata. Abrir guiaUma tooltip dá um rótulo curto ou dica. Um hover card mostra uma prévia mais rica de uma pessoa, item ou link.
Use uma tooltip quando algumas palavras forem suficientes. Use um hover card quando uma pré-visualização puder evitar a ida a outra página. Também deve funcionar com teclado e toque. Abrir guia macOS Context MenumacOS Context Menu vs. Menu Dropdown & Contextual — Pacote de AprendizadoDropdown & Context Menu — Learning Bundle
Um menu de contexto mostra ações para o item que você clica ou pressiona. Um dropdown abre a partir de um botão visível com um propósito claro.
Use um menu de contexto como um atalho extra, não como o único caminho. Use um dropdown quando as pessoas precisarem ver de onde o menu abre. Abrir guiaUm carrossel mostra slides separados com controles. Um marquee mantém uma linha de conteúdo em movimento.
Use um carrossel quando cada item precisar de tempo e controles. Use um letreiro apenas para decoração sem importância que pode pausar e parar de se mover quando solicitado. Abrir guiaUm lightbox é um modal feito para imagens ou vídeos. Um modal normal guarda uma escolha, um formulário ou uma tarefa curta.
Use uma lightbox para ampliar imagens ou vídeos. Use um modal quando a função principal for agir ou decidir. Abrir guiaA alvenaria organiza cartões de diferentes alturas em colunas. Uma grade bento usa tamanhos de cartões planejados para mostrar o que é mais importante.
Use masonry para muitos itens separados com alturas diferentes. Use uma grade tipo bento para um conjunto pequeno cujo tamanho mostra importância. Abrir guiaUma barra lateral fica no layout da página. Um drawer desliza por um curto período de tempo e pode cobrir ou empurrar a página.
Use uma barra lateral para ferramentas ou links que as pessoas usam com frequência quando houver espaço. Use uma gaveta para tarefas menos comuns ou telas pequenas, e facilite o fechamento. Abrir guiaUm botão de três linhas abre a navegação. Um botão de três pontos abre mais ações para um item próximo.
Use três linhas para navegação oculta, principalmente em telas pequenas. Use três pontos quando as ações de itens extras não couberem, e nomeie o botão como “Mais ações.” Abrir guiaFacilitação segue uma curva de tempo definida. Uma mola se move como uma mola real e para sozinha.
Use easing para desvanecimentos, mudanças de cor e etapas temporizadas. Use uma mola para objetos que se movem ou seguem um arrasto. Abrir guiaUm stepper muda um número em passos fixos. Um slider escolhe um lugar ao longo de uma faixa.
Use um stepper para mudanças pequenas e precisas. Use um slider quando a posição aproximada for mais importante do que digitar um número exato. Sempre mostre o valor e ofereça suporte ao teclado. Abrir guiaUma sheet pertence a uma janela e guarda uma tarefa curta. Um alerta mostra uma mensagem curta ou uma escolha que precisa de atenção agora.
Use uma folha para configurações, salvamento ou um formulário curto vinculado a um documento. Use um alerta para um aviso, falha ou verificação de um passo. Abrir guia Estado Vazio, Erro & Sucesso — Pacote de AprendizagemEmpty, Error & Success State — Learning Bundle vs. EsqueletoSkeleton
Um estado vazio significa que não há conteúdo. Um esqueleto significa que o conteúdo ainda está carregando e seu formato é conhecido.
Use um estado vazio para explicar por que nada está lá e o que fazer a seguir. Use um esqueleto para um carregamento rápido quando você souber o layout. Abrir guiaUma barra de ferramentas põe ações comuns dentro de uma janela. A barra de menu mantém todos os comandos do app no topo da tela.
Coloque ações comuns de documento ou seleção na barra de ferramentas. Mantenha todos os comandos, atalhos de teclado e ações menos comuns na barra de menu. Abrir guia