Gaveta Sistema de projeto

Abra o conteúdo secundário enquanto mantém o contexto da tela principal.

8 verificações · 3 grupos de conteúdo

Conteúdo do checklist

Progresso da revisão

Estrutura e significado

Compare as informações e a apresentação no contexto de uso.

Indique o conteúdo do painelUse o título para saber se se trata de navegação, insight ou edição.Escolher gaveta ao visualizar o conteúdo principal ainda ajuda na tarefa.Exemplo O painel “Detalhes do pedido” abre à direita, a lista de pedidos permanece no final.Escolha uma borda aberta consistenteMantenha a orientação de abertura adequada à função e o espaço amplo o suficiente para a leitura do conteúdo.Especifique a largura mínima e máxima para cada tipo de painel; A mesma função deve abrir da mesma borda para manter as expectativas.Indica que o painel está abertoAssocie o botão aberto ao painel e reflita o estado aberto ou fechado.O nome do botão aberto precisa indicar qual conteúdo irá aparecer; O estado aberto deve ser atualizado mesmo que a gaveta seja fechada com Escape.Gerencie o foco por tipo de painelCom gavetas modais, mantenha o foco no interior e retorne o botão de abertura quando fechado.Suporte de gaveta próximo ao conteúdo e gavetas modais possuem regras diferentes; Não bloqueie o foco quando o usuário ainda precisar interagir com ambas as áreas.

Interação e usabilidade

Experimente a operação, altere o status e continue trabalhando.

Há um caminho claroPermite fechar, escapar e botões de fundo quando apropriado, sem perder dados.Mantenha o botão Fechar visível ao rolar; Se forem necessários rascunhos de avisos não salvos, todos os fechamentos deverão usar as mesmas regras.Mantenha o conteúdo longo acessívelPara rolar o conteúdo, não cubra títulos ou ações finais.Teste em tela estreitaAjuste a largura, o teclado e as posições dos botões quando o painel ocupar a tela inteira.Quando o painel ficar em tela cheia, verifique retorno, área segura e teclado; Não minimize apenas a área de trabalho.

Complete a experiência

Verifique se há detalhes que são fáceis de perder ao colocar o design em uso.

Organize a área de ação da gavetaQuando uma gaveta suporta edição, mantenha as ações de salvar e cancelar em um local estável e distinto do conteúdo de rolagem.Se você mantiver os pés do painel no lugar, deixe espaço suficiente no final do conteúdo para não cobrir o último campo; no seu telefone, experimente também com o teclado aberto.

O progresso é salvo automaticamente neste navegador.

ORIENTAÇÕES

Como revisar

Indique o conteúdo do painel

Escolher gaveta ao visualizar o conteúdo principal ainda ajuda na tarefa.

EXEMPLOS

Exemplos de uso

Indique o conteúdo do painel

O painel “Detalhes do pedido” abre à direita, a lista de pedidos permanece no final.

Gaveta Sistema de projeto

Estrutura e significado

Interação e usabilidade

Complete a experiência

Como revisar

Indique o conteúdo do painel

Exemplos de uso

Indique o conteúdo do painel

Direção de abertura do painel

Detalhes

Fundo e foco

Detalhes

Layout do painel

Detalhes

Encontrar um checklist

Nenhum checklist encontrado

Gaveta Sistema de projeto

Estrutura e significado

Interação e usabilidade

Complete a experiência

Como revisar

Indique o conteúdo do painel

Exemplos de uso

Indique o conteúdo do painel

Variantes e casos de uso

Direção de abertura do painel

Fundo e foco

Layout do painel