Windows Dev Center

Diretrizes para barras de comandos

[Algumas informações relacionam-se ao produto de pré-lançamento, o qual poderá ser substancialmente modificado antes do lançamento comercial. A Microsoft não faz nenhuma garantia, expressa ou implícita, com relação às informações fornecidas aqui.]

[Este artigo contém informações que são específicas a aplicativos da Plataforma Universal do Windows (UWP) e ao Windows 10. Para obter as diretrizes do Windows 8.1, baixe o PDF de diretrizes do Windows 8.1 .]

As barras de comandos fornecem aos usuários acesso fácil a ações e podem ser usadas para mostrar comandos ou opções específicas ao contexto do usuário, como o modo de desenho ou seleção de fotos. Elas também podem ser usadas para navegação entre páginas ou seções do aplicativo. As barras de comandos podem ser usadas com qualquer padrão de navegação.

Exemplo de uma barra de comandos com ícones

As barras de comandos consistem em dois componentes: o espaço de ação para colocar os comandos ou itens de navegação que devem ficar visíveis e área "Mais", que é representada na barra de comandos com um sinal de reticências [•••]. A área "Mais" abre um menu de exibição de lista suspensa para comandos e itens de navegação que são acessados com menos frequência. Ao selecionar o botão [•••], é aberto um menu que mostra os rótulos de texto de cada item no espaço de ação. Se não houver nenhum item em "Mais", o menu suspenso não é aberto, embora os rótulos de texto dos itens no espaço de ação sejam mostrados.

Posicionamento da barra de comandos

As barras de comandos podem ser posicionadas na parte superior, na parte inferior ou na parte superior e inferior da tela e incorporadas.

Exemplo 1 de posicionamento da barra de aplicativos

  • Para dispositivos móveis, se você estiver colocando apenas uma barra de comandos no aplicativo, coloque-o na parte inferior da tela para facilitar a acessibilidade. Se o aplicativo tiver guias na parte inferior, considere a possibilidade de colocar a barra de comandos na parte superior para que a interface do usuário não fique muito pesada na parte de baixo.
  • Em telas maiores, se estiver colocando apenas uma barra de comandos, recomendamos colocá-la na parte superior da tela.
  • Você também pode colocar as barras de comando incorporadas, para que as pessoas possam usá-las para ações contextuais.

As barras de comandos podem ser posicionadas nas seguintes regiões da tela, em telas de exibição única (exemplo à esquerda) e em telas com várias exibições (exemplo à direita). Barras de comandos incorporadas podem ser colocadas em qualquer lugar no espaço da ação.

Exemplo 2 de posicionamento da barra de aplicativos

Posicionamento de ações

Priorize as ações que aparecem na barra de comandos de acordo com sua visibilidade.

  • Coloque os comandos mais importantes, aqueles que devem ficar visíveis na barra, nos primeiros slots do espaço de ação. Nas telas menores (largura de 320 epx), entre 2 e 4 itens devem caber no espaço de ação da barra de comandos, dependendo da outra interface do usuário na tela.
  • Coloque os comandos menos importantes no espaço de ação da barra depois ou nos primeiros slots da área "Mais". Esses comandos ficarão visíveis quando a barra tiver espaço real na tela, mas estarão no menu suspenso da área "Mais" quando não houver espaço suficiente.
  • Coloque os comandos menos importantes na área "Mais". Esses comandos sempre aparecerão no menu suspenso.

Os itens no espaço de ações podem ser visualizados em ícones ou botões. Ao usar somente ícones, inclua um rótulo de texto. O rótulo de texto aparece abaixo do ícone o [•••] é selecionado.

Se houver um comando que aparece consistentemente nas páginas, é melhor manter esse comando em um local consistente. Recomendamos colocar os comandos Aceitar, Sim e OK à esquerda de Rejeitar, Não e Cancelar. A consistência dá aos usuários confiança para se movimentar pelo sistema e os ajuda a transferir seu conhecimento de navegação de um aplicativo para outro.

Embora seja possível colocar todas as ações dentro do menu suspenso "Mais" para que somente o [•••] fique visível na barra de comandos, tenha em mente que ocultar todas as ações pode confundir os usuários.

Submenus e dicas de ferramenta da barra de comandos

Considere agrupamentos lógicos dos comandos como, por exemplo, colocar Responder, Responder a Todos e Encaminhar em um menu Responder.

Exemplo de submenus em uma barra de comandos

Como rótulos de texto ficam ocultos para ações da barra de comando, a menos que [•••] seja selecionado, considere usar dicas de ferramentas para os ícones de ações.

A área "Mais"

Exemplo de barra de comandos com área "Mais"

  • A funcionalidade "Mais" [•••] é o ponto de entrada visível do menu e fica na extremidade direita da barra de ferramentas ao lado das ações principais.
  • Cada ação no espaço da ação principal é representada por um ícone. Selecionar o menu de estouro revela rótulos de texto de cada uma das ações no espaço da ação principal.
  • O espaço do menu de estouro é alocado para ações que são usadas com menos frequência.
  • Ações podem ir e vir entre o espaço de ação principal e o menu de estouro nos pontos de interrupção. Você também pode designar ações para sempre permanecer no espaço de ação principal, independentemente do tamanho da tela ou da janela do aplicativo.
  • Ações usadas com pouca frequência podem permanecer no menu estouro de mesmo quando a barra de aplicativos é expandida em telas maiores.

Diretriz responsiva

  • O mesmo número de ações na barra de aplicativos deve ficar visível na orientação retrato e na paisagem, reduzindo a carga cognitiva do usuário. O número de ações disponíveis deve ser determinado pela largura do dispositivo na orientação retrato.
  • Com o direcionamento de pontos de interrupção, você pode colocar e tirar ações do menu conforme o tamanho da tela ou da janela do aplicativo muda.

Tópicos relacionados

Noções básicas de design de comando

 

 

Mostrar:
© 2015 Microsoft