Vibulário
Menu
Aparência e idioma
Termos por tópico · 147 guias

Interface

Aprenda os nomes de botões, menus, formulários e outras partes que as pessoas usam em uma tela.

01 / Atlas

Todos os termos de Interface

Abrir um termo para um significado simples, um exemplo, quando usá-lo, quão oficial ele é, e seu nome de código.

  1. 01 · Centro

    Abas Tabs

    Abas usam rótulos para alternar o conteúdo em um painel compartilhado. A tarefa principal continua aberta.

  2. 02 · Centro

    Accordion Accordion

    Um acordeão empilha seções cujos títulos abrem ou fecham o próprio conteúdo.

  3. 03 · Centro

    Ações em massa Bulk Actions

    Ações em massa permitem que alguém escolha muitos itens e execute uma ação em todo o conjunto escolhido.

  4. 04 · Mais detalhes

    Alça de Redimensionamento Resize Handle

    Um controle de redimensionamento é um ponto visível em uma borda ou canto. As pessoas o arrastam para mudar o tamanho de um painel, campo, coluna ou objeto.

  5. 05 · Centro

    Alerta Alert

    Um alerta é uma mensagem curta e importante que é anunciada sem mover o foco do teclado. Ele não pede que o usuário responda imediatamente.

  8. 08 · Centro

    Área de Texto Textarea

    Uma textarea é uma caixa para digitar várias linhas de texto. Seu tamanho pode ficar fixo ou ser ajustável.

  10. 10 · Centro

    Avaliação Rating

    Uma avaliação mostra uma opinião em uma escala fixa. A escala pode usar estrelas, números ou níveis com nome.

  11. 11 · Centro

    Avatar Avatar

    Um avatar é uma foto pequena, iniciais ou um símbolo. Ajuda a identificar uma pessoa, equipe, robô ou conta.

  12. 12 · Mais detalhes

    Barra de ferramentas Toolbar

    Uma barra de ferramentas é um grupo nomeado de controles que as pessoas usam com frequência. Tab entra no grupo uma vez, depois as setas movimentam dentro dele.

  13. 13 · Mais detalhes

    Barra de menus Menubar

    Uma barra de menu é um menu que permanece visível, frequentemente em uma linha horizontal. Seus itens abrem comandos ou submenus com regras de teclado no estilo de aplicativos.

  15. 15 · Centro

    Barra de progresso Progressbar

    Uma barra de progresso mostra quanto de uma tarefa cronometrada foi concluída. As pessoas podem lê-la, mas não a controlam diretamente.

  17. 17 · Centro

    Botão Button

    Um botão é um controle que você aperta para fazer algo acontecer na tela atual.

  18. 18 · Mais detalhes

    Botão de incremento Spinbutton

    Spinbutton é o nome ARIA para um controle que seleciona um valor de um intervalo definido. Normalmente, as pessoas podem digitar um valor ou aumentá-lo e diminuí-lo. Um stepper numérico é uma forma de como ele pode se apresentar.

  19. 19 · Mais detalhes

    Botão de menu Menu Button

    Um botão de menu abre uma lista de ações ou opções. Ele informa ao software se o menu está aberto.

  21. 21 · Mais detalhes

    Bottom Sheet Bottom Sheet

    Uma bottom sheet é um painel fácil de usar no toque. Ela sobe de baixo e pode parar em alturas definidas.

  22. 22 · Centro

    Breadcrumb Breadcrumb

    Uma trilha de navegação é um caminho de links que mostra a página atual e suas páginas pai.

  25. 25 · Mais detalhes

    caixa de listagem Listbox

    Uma lista suspensa é uma lista personalizada de escolhas. Ela gerencia qual escolha está ativa e como as teclas de seta se movem pela lista.

  26. 26 · Centro

    Caixa de seleção Checkbox

    Uma caixa de seleção é uma caixa que você pode marcar ou desmarcar. Cada escolha pode ser independente.

  28. 28 · Centro

    Campo de Texto Text Field

    Um text field é uma caixa de uma linha com rótulo, onde as pessoas digitam ou editam textos.

  29. 29 · Centro

    Campo do Formulário Form Field

    Uma unidade completa de input com um label visível, um controle, ajuda opcional, estado de validação e uma mensagem de erro ligada.

  31. 31 · Centro

    Card Card

    Um cartão é um grupo com limites claros que mostra um assunto, seus detalhes e ações relacionadas.

  32. 32 · Centro

    Carousel Carousel

    Um carrossel mostra um ou alguns painéis de cada vez. As pessoas o movimentam com setas, pontos ou deslizes.

  33. 33 · Centro

    Carregador Spinner

    Um spinner roda sem parar para mostrar que há trabalho acontecendo quando não existe um número de conclusão útil.

  34. 34 · Mais detalhes

    Cartão de Passeio Hover Card

    Um hover card é uma preview rica. Ele abre quando você passa o mouse ou foca numa referência, sem bloquear a página.

  35. 35 · Mais detalhes

    Cascader Cascader

    Um Cascader mostra as escolhas um nível de cada vez. Uma escolha abre a próxima lista correspondente.

  38. 38 · Centro

    Chip Chip

    Um chip é um pequeno item interativo que representa uma entrada, filtro, escolha ou item removível. Sua ação exata deve ser clara.

  39. 39 · Centro

    Citar Quote

    Uma citação repete as palavras de alguém e diz claramente de onde essas palavras vieram.

  45. 45 · Mais detalhes

    Diálogo de alerta Alert Dialog

    Um diálogo de alerta é uma janela que pede uma escolha urgente. As pessoas precisam entender o resultado antes de continuar.

  46. 46 · Centro

    Diálogo Modal Modal Dialog

    Uma janela modal é uma tela focada. Ela bloqueia a tela atual até alguém fechar ou terminar o que estava fazendo.

  47. 47 · Centro

    Dica de ferramenta Tooltip

    Uma tooltip é uma nota curta sobre um controle. Ela abre quando o mouse passa por cima ou o teclado foca no controle. As pessoas não podem usá-la como um botão.

  48. 48 · Centro

    Distintivo Badge

    Um badge é uma marca pequena, não clicável, anexada a outro item. Ele mostra uma contagem, status ou sinal curto e é um padrão de design, não um padrão web.

  50. 50 · Centro

    Divisor Divider

    Um divider é uma linha visível ou semântica entre grupos, controles ou partes de um tópico.

  51. 51 · Centro

    Divulgação Disclosure

    Uma divulgação é um botão que mostra ou oculta uma seção relacionada. Ele também informa ao software se a seção está aberta.

  52. 52 · Centro

    Esqueleto Skeleton

    Um skeleton é um espaço simples no formato do conteúdo que ainda está carregando.

  53. 53 · Centro

    Estado de Erro Error State

    Um estado de erro permanece visível quando uma ação ou página falha. Ele explica o problema específico e fornece uma maneira segura de se recuperar.

  54. 54 · Centro

    Estado de Sucesso Success State

    Um estado de sucesso confirma que uma ação foi concluída. Ele mostra o resultado duradouro e qualquer próximo passo útil.

  55. 55 · Centro

    Estado vazio Empty State

    Um estado vazio aparece quando uma lista ou espaço de trabalho não tem conteúdo no momento. Ele explica o motivo e fornece um próximo passo útil.

  57. 57 · Centro

    Estatística Statistic

    Um Statistic destaca um valor. Seu rótulo, unidade, período de tempo e contexto explicam o significado.

  58. 58 · Centro

    Etiqueta Tag

    Uma tag é um rótulo curto que geralmente não pode ser clicado. Ela agrupa um item ou mostra um status constante. Uma tag é um padrão de design, não um padrão web.

  59. 59 · Centro

    FAQ FAQ

    Uma FAQ reúne perguntas que as pessoas costumam fazer antes de decidir ou pedir ajuda. As respostas usam palavras e situações que essas pessoas conhecem.

  60. 60 · Centro

    Fieldset e legenda Fieldset and Legend

    `<fieldset>` e `<legend>` são elementos HTML integrados para um grupo de controles de formulário relacionados. A legenda indica a pergunta que eles compartilham.

  61. 61 · Centro

    Filtro Filter

    Um filter é um controle ou regra que mostra só os itens que correspondem às condições escolhidas. Ele não muda os dados originais.

  63. 63 · Centro

    Formulário de entrada Sign-In Form

    Um formulário que junta detalhes da conta para entrar. Ele deve ter recuperação, gerenciadores de senhas, erros claros e envio seguro.

  65. 65 · Centro

    Gaveta Drawer

    Um drawer desliza a partir da beirada da tela. Uma parte da página atrás dele continua visível.

  67. 67 · Centro

    Gerenciamento de foco Focus Management

    O gerenciamento de foco move o ponto ativo do teclado após a mudança de página. Ele também retorna o foco quando uma superfície temporária é fechada.

  69. 69 · Mais detalhes

    Grade ARIA ARIA Grid

    Uma grade ARIA é um conjunto interativo de linhas e células. As teclas de seta movem o foco para cima, para baixo, para a esquerda e para a direita.

  70. 70 · Mais detalhes

    Grade de árvore Treegrid

    Um treegrid é uma tabela interativa com linhas que podem ter linhas filhas. As pessoas podem abrir os níveis das linhas enquanto as células ainda se alinham em colunas.

  71. 71 · Mais detalhes

    Grade de dados Data Grid

    Um grid de dados é uma tabela parecida com aplicativo. As pessoas podem mover, selecionar, classificar ou editar muitos dados.

  72. 72 · Mais detalhes

    Gráfico Chart

    Um Gráfico transforma dados em uma imagem. Ele pode mostrar comparações, tendências, intervalos ou ligações.

  76. 76 · Centro

    HTML Semântico Semantic HTML

    HTML Semântico significa escolher elementos HTML pelo que eles fazem, não apenas por como eles aparecem. A página mantém sua estrutura e comportamento embutido mesmo sem CSS.

  77. 77 · Centro

    Ícone Icon

    Um ícone é um pequeno símbolo que ajuda a reconhecer uma ação, objeto, status ou grupo.

  78. 78 · Centro

    Imagem Image

    Uma Imagem é uma foto dentro do conteúdo. Precisa de regras de tamanho, carregamento, corte e texto alternativo que sirvam para seu objetivo.

  79. 79 · Centro

    Indicador de progresso Progress Indicator

    Um indicador de progresso mostra que o trabalho ainda está acontecendo. Uma barra ou um anel mostra um progresso conhecido. Um spinner significa que o tempo de espera é desconhecido.

  80. 80 · Mais detalhes

    Índice de aba móvel Roving tabindex

    O índice de aba móvel dá ao grupo um ponto de parada na aba. As teclas de seta então movem o foco entre os itens dentro do grupo.

  83. 83 · Mais detalhes

    Lightbox Lightbox

    Um lightbox abre a mídia num visualizador maior e escurece a página ao redor.

  84. 84 · Centro

    Linha do tempo Timeline

    Uma linha do tempo põe eventos, estados ou marcos em ordem pelo tempo em um caminho visível.

  85. 85 · Centro

    Link Link

    Um link é um texto ou mídia que abre outra página, arquivo ou lugar.

  86. 86 · Centro

    Link de Pular Skip Link

    Um Skip Link ajuda quem usa teclado a pular menus repetidos. Ele move o foco para o conteúdo principal ou outra área importante.

  87. 87 · Centro

    Lista List

    Uma lista mostra itens relacionados numa ordem útil ou fácil de seguir.

  89. 89 · Centro

    Marco Landmark

    Um ponto de referência é uma área principal de uma página. A tecnologia assistiva permite que as pessoas saltem diretamente para essa área.

  90. 90 · Centro

    Marco do Banner Banner Landmark

    Um marco banner é a área principal do cabeçalho de um site inteiro. Uma faixa de anúncio ampla também pode ser chamada de banner, mas é um padrão de design diferente.

  91. 91 · Centro

    Matriz de permissões Permission Matrix

    Uma matriz de permissões mostra quais funções podem realizar cada ação em uma área escolhida. Ela facilita a comparação das regras de acesso.

  92. 92 · Centro

    Medidor Meter

    Um medidor exibe uma medição dentro de um intervalo conhecido. Ele também pode marcar os intervalos baixo, alto e ideal.

  94. 94 · Centro

    Menu Menu

    Um menu de comandos é um grupo de ações ou escolhas com regras especiais de foco de teclado. Ele geralmente abre a partir de um botão ou de outra área de comando.

  95. 95 · Mais detalhes

    Menu de Contexto Context Menu

    Um menu de contexto mostra comandos para o objeto ou área que o abriu. Ele geralmente é aberto com um clique direito ou a tecla de menu de contexto.

  98. 98 · Centro

    Menu Hamburger Hamburger Menu

    Um botão de menu com três linhas. Abre a navegação principal do site quando não há espaço suficiente para mostrá-la.

  99. 99 · Centro

    Menu suspenso Dropdown Menu

    Um menu suspenso é um menu de comando de curta duração que abre a partir de um botão e permanece ao lado dele. Seu padrão semântico usual é um botão de menu mais um menu.

  100. 100 · Mais detalhes

    Modo de Cores Forçadas Forced Colors Mode

    O modo de cores forçadas usa uma paleta do sistema escolhida pelo usuário em vez de muitas cores da página. Isso pode tornar controles e textos mais fáceis de distinguir.

  102. 102 · Centro

    Nome Acessível Accessible Name

    Um nome acessível é o rótulo que o software calcula para um controle ou imagem. Leitores de tela o usam para identificar o item.

  103. 103 · Centro

    Notificação toast Toast

    Um toast é uma mensagem curta de status. Ele não bloqueia a página e costuma sumir sozinho.

  104. 104 · Mais detalhes

    Notificação Web Web Notification

    Uma notificação web é uma mensagem que o navegador ou sistema operacional exibe fora da página. O usuário deve dar permissão, e a mensagem segue as regras do sistema.

  105. 105 · Centro

    Ordem do foco Focus Order

    A ordem do foco é o caminho que o foco do teclado segue através de uma página. Deve coincidir com a ordem de leitura e de tarefas.

  106. 106 · Mais detalhes

    Padrão de Feed ARIA ARIA Feed Pattern

    O padrão de feed ARIA é um fluxo de itens semelhantes a artigos que muda. Pode adicionar novos itens ou remover antigos à medida que as pessoas navegam por ele.

  107. 107 · Centro

    Página de configurações Settings Page

    Uma página de configurações mantém escolhas que mudam como um aplicativo funciona em várias tarefas. Bons padrões permitem que a maioria das pessoas comece imediatamente.

  108. 108 · Centro

    Paginação Pagination

    Paginação divide uma coleção em páginas numeradas e mostra qual página está aberta.

  111. 111 · Centro

    Passos Steps

    Os passos mostram a posição de uma pessoa em um processo curto. O processo tem uma ordem fixa e um fim.

  112. 112 · Centro

    Pesquisa Global Global Search

    A pesquisa global encontra diferentes tipos de coisas em um aplicativo a partir de um local de pesquisa compartilhado.

  113. 113 · Centro

    Ponteiro & Cursor Pointer & Cursor

    Um ponteiro ou cursor marca onde o mouse ou dispositivo de toque está na tela. O formato dele pode significar selecionar, digitar, arrastar, mudar o tamanho, esperar ou indisponível.

  114. 114 · Centro

    Popover Popover

    Um popover é um pequeno painel ligado ao controle que o abriu. Ele pode ter conteúdo organizado e ações sem bloquear a página.

  115. 115 · Centro

    Prova social Social Proof

    Prova social é a evidência que as pessoas podem verificar. Mostra que pessoas ou grupos relevantes usam, confiam ou valorizam um produto.

  116. 116 · Centro

    Quadro Kanban Kanban Board

    Um quadro Kanban mostra os passos reais pelos quais o trabalho passa. Os cartões representam trabalho, e limites de WIP impedem muitos inícios.

  118. 118 · Mais detalhes

    Região Viva Live Region

    Uma região ao vivo informa à tecnologia assistiva quando o texto importante da página muda. Ela pode anunciar a atualização sem mover o foco.

  119. 119 · Mais detalhes

    Registro de Atividades Activity Log

    Um registro de atividades lista ações de produtos em ordem cronológica. Cada linha indica quem fez o quê, em qual item e quando.

  120. 120 · Centro

    Reprodutor de Mídia Media Player

    Um media player é um conjunto de controles para áudio ou vídeo. Ele inclui play, progresso, volume, legendas e outras escolhas de reprodução.

  121. 121 · Centro

    Resumo de Erro Error Summary

    Um resumo de erros é uma lista curta no topo de um formulário. Cada item explica um erro e vincula ao seu campo.

  122. 122 · Centro

    Rodapé do Site Site Footer

    O rodapé do site é a área final usada em todo o site. Ele guarda links secundários, detalhes legais, formas de contato e informações de confiança.

  125. 125 · Centro

    Seção Hero Hero Section

    Uma hero section é a principal área de abertura de uma página. Ela explica rápido a promessa, para quem é, a prova e qual a próxima ação.

  126. 126 · Mais detalhes

    Seleção de Árvore Tree Select

    Um Tree Select mostra escolhas aninhadas em uma árvore que dá para abrir. Ele pode permitir uma ou várias escolhas.

  127. 127 · Centro

    Seleção de Texto Text Selection

    Seleção de Texto é o intervalo de texto marcado. As pessoas selecionam texto para copiar, substituir, anotar ou editar.

  128. 128 · Centro

    Selecionar Select

    Um select abre uma lista fixa e deixa a pessoa escolher um valor.

  129. 129 · Centro

    Seletor de Cores Color Picker

    Um Color Picker permite que as pessoas escolham uma cor. Ele pode mostrar um campo de cor, barra de matiz, valores ou amostras.

  130. 130 · Centro

    Seletor de Data Date Picker

    Um seletor de datas é um controle para digitar ou escolher um dia em um calendário. Ele não escolhe um horário do dia.

  132. 132 · Centro

    Seletor de tempo Time Picker

    Um seletor de horário é um controle para digitar ou escolher um horário local do dia. Seu tamanho de passo e formato de exibição local devem estar claros.

  133. 133 · Centro

    Separador Separator

    Um separador é uma linha visível que também pode marcar uma quebra real entre partes. Se as pessoas podem focar e movê-lo, ele se torna um divisor ajustável.

  134. 134 · Centro

    Switch Switch

    Um switch liga ou desliga uma configuração, e a mudança normalmente acontece na mesma hora.

  135. 135 · Centro

    Tabela Table

    Uma tabela alinha fatos relacionados em linhas e colunas com rótulos. Normalmente, é só para leitura ou tem apenas ações simples.

  137. 137 · Centro

    Tamanho alvo Target Size

    O tamanho alvo é a área total que uma pessoa pode clicar ou tocar para usar um controle. Pode ser maior que o ícone visível.

  138. 138 · Centro

    Texto Alternativo Alternative Text

    O texto alternativo explica o significado útil de uma imagem quando alguém não consegue ver a imagem. Ele deve corresponder à função da imagem naquela página.

  139. 139 · Centro

    Trilho de navegação Navigation Rail

    Uma barra de navegação é uma lista vertical curta de lugares principais ao longo da borda de uma tela. É um padrão de design comum, não um padrão da web.

  140. 140 · Centro

    UI de chat Chat UI

    Uma interface de chat reúne mensagens, nomes de remetentes, uma caixa de escrita, estados de envio e anexos. Ela também mostra formas de corrigir erros.

  143. 143 · Mais detalhes

    Véu Scrim

    Um scrim é uma camada escura e transparente atrás de uma janela sobreposta. Ele separa a janela e mostra que a página abaixo está bloqueada.

  144. 144 · Centro

    Visão salva Saved View

    Uma visualização salva lembra como uma lista é filtrada, ordenada e exibida, para que a mesma visualização útil possa ser aberta novamente.

  147. 147 · Centro

    Voltar ao topo Back to Top

    "Voltar ao topo" é um atalho em páginas longas. Ele leva a visão e o foco perto do começo.