Precisando de ajuda para desenhar a navegação de seus aplicativos? Estes padrões são um bom lugar para começar.
Os padrões de navegação responsivos a seguir apresentam várias formas de lidar com a navegação em telas grandes e pequenas. Menus de navegação superior e laterais à esquerda são comuns em telas maiores, mas muitas vezes não são a melhor maneira de apresentar informações em telas pequenas por causa do tamanho reduzido da tela. Portanto, é necessário considerar a apresentação do conteúdo e facilidade de navegação para todos os tamanhos de tela.
Nota: HTML/CSS para os padrões correspondentes estarão disponíveis em breve.
Padrão 1: Menu de alternância superior
Neste padrão, conforme a largura da tela é reduzida, os itens de navegação superior reorganizam-se até não haver espaço suficiente. Neste ponto, alguns itens são movidos da barra de navegação superior para um menu suspenso (drop-down). Nas telas menores, todos os itens de navegação ficam em um menu de alternância e o usuário deve tocar para expandir o menu de alternância.
Você pode classificar as prioridades dos itens para garantir que os itens mais importantes apareçam sempre na barra de navegação superior.
Pros:
- um botão no cabeçalho maximiza o espaço para o conteúdo em uma tela pequena
- itens importantes permanecem visíveis na maioria dos tamanhos de tela e você decide a prioridade dos itens
- legibilidade dos itens de navegação é mantida com espaçamento adequado, escondendo automaticamente os itens que não se encaixam
Contras:
- itens de navegação podem ser menos visíveis porque alguns itens ficam escondidos no menu drop-down ou de alternância
- os usuários podem não notar o botão que contém um menu de navegação nas telas menores
- um passo a mais é necessário para acessar os itens de navegação ocultos
Padrão 2: Menu inferior expansível
Semelhante ao primeiro padrão, os itens de navegação superiores reorganizam-se para larguras menores até não haver espaço suficiente. Neste ponto, alguns itens são movidos da barra de navegação superior para um menu drop-down. Você pode classificar as prioridades dos itens para garantir que os itens mais importantes apareçam sempre na barra de navegação superior.
Nas telas menores, vários itens ficam na parte inferior da tela e o restante dos itens estão ocultos. O usuário pode desdobrar o menu e selecionar os itens de navegação restantes. Você pode selecionar os itens que permanecem na parte inferior.
Pros:
- menu expansível é facilmente percebido
- itens importantes estão sempre visíveis e você decide as prioridades dos itens
- legibilidade dos itens de navegação é mantida com espaçamento adequado, escondendo automaticamente os itens que não se encaixam
Contras:
- um passo a mais é necessário para acessar os itens de navegação que estão ocultos
- itens de navegação podem ser menos visíveis porque alguns itens estão ocultos
- menos espaço para o conteúdo nas telas menores
Padrão 3: Menu à esquerda oculto
O menu de navegação principal está sempre à esquerda exceto nas telas menores, onde o menu de navegação está oculto em um botão por padrão. Nas telas menores, quando o usuário toca o botão, o menu de navegação desliza para a tela e exibe os itens de navegação.
Pros:
- potencialmente mais itens de navegação são exibidos em um menu de navegação à esquerda em comparação com um menu superior
- mais itens estão sempre visíveis exceto nas telas menores
- um botão no cabeçalho maximiza o espaço para o conteúdo nas telas menores
Contras:
- itens de navegação podem ser menos visíveis porque os itens estão ocultos em um menu drop-down ou de alternância.
- os usuários podem não notar o botão que contém um menu de navegação nas telas menores
- usuários podem não notar o botão que contém um menu de navegação nas telas menores
- um passo a mais é necessário para acessar os itens de navegação que estão ocultos
