Barra lateral vs. Gaveta
Uma 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.
Veja o que cada padrão faz
Experimente cada exemplo. Depois leia sobre o trabalho para o qual ele foi feito.
Sidebar Source List
Uma Sidebar Source List é uma lista em formato de árvore na lateral de uma janela. A fonte ou grupo escolhido define o que aparece na área principal.
Uma biblioteca de fotos lista a Biblioteca, Favoritos, álbuns e grupos compartilhados. A coleção escolhida preenche a área de detalhes.
- Use-o quando
- Use-o quando grupos ou lugares estáveis controlam a visão principal e as pessoas retornam a eles frequentemente enquanto trabalham.
- Não o use quando
- Evite usar para uma lista de verificação única ou uma lista de ações curtas e planas. Cada categoria deve realmente mudar a fonte do conteúdo principal.
- Nome usado no código
NSOutlineView source-list style / SwiftUI NavigationSplitView
Gaveta
Um drawer desliza a partir da beirada da tela. Uma parte da página atrás dele continua visível.
Selecione um pedido para abrir seus detalhes pela direita. A lista de pedidos permanece visível atrás deles.
- Use-o quando
- Use-o para detalhes ou uma segunda tarefa menor quando manter o lugar atual ajuda.
- Não o use quando
- Nunca comprima um fluxo de trabalho longo com muitas etapas em uma gaveta estreita.
- Nome usado no código
Dialog + edge positioning
Comparação rápida
| Padrão de UI | Melhor para | Não para | Nome usado no código |
|---|---|---|---|
| Sidebar Source ListSidebar Source List | Use-o quando grupos ou lugares estáveis controlam a visão principal e as pessoas retornam a eles frequentemente enquanto trabalham. | Evite usar para uma lista de verificação única ou uma lista de ações curtas e planas. Cada categoria deve realmente mudar a fonte do conteúdo principal. | NSOutlineView source-list style / SwiftUI NavigationSplitView |
| GavetaDrawer | Use-o para detalhes ou uma segunda tarefa menor quando manter o lugar atual ajuda. | Nunca comprima um fluxo de trabalho longo com muitas etapas em uma gaveta estreita. | Dialog + edge positioning |
Antes de lançar
- 01
Anote o que a pessoa precisa fazer.
- 02
Teste o teclado, foco, toque, zoom, carregamento, estados vazio e de erro.
- 03
Certifique-se de que as pessoas podem obter as mesmas informações sem passar o mouse ou movimento.
- 04
Teste com conteúdo real em telas pequenas e grandes.
Pedido de comparação para copiar
Copie isso quando o seu time precisar de ajuda para escolher entre os padrões.
Escolha o melhor padrão de Sidebar Source List (Sidebar Source List), Gaveta (Drawer) para o nosso fluxo real de usuário. Use esta regra: Uma 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. Anote a tarefa, a quantidade de conteúdo e o custo de parar o fluxo. Teste o comportamento de teclado, toque, carregamento, erro e movimento reduzido. Explique sua escolha e depois construa a menor versão acessível com o sistema de design do projeto.