Ler em inglês

Compartilhar via


Padrões de comando

Você pode colocar comandos e controles em várias superfícies do seu aplicativo da Windows Store, incluindo a tela do aplicativo, pop-ups, caixas de diálogo e barras do aplicativo. Escolher a superfície certa no momento certo pode fazer a diferença entre um aplicativo fácil ou difícil de usar.

Nos aplicativos da Windows Store, os comandos são os elementos interativos da interface que o usuário pode utilizar para executar ações. Os comandos são diferentes dos elementos de navegação no sentido de que os elementos de navegação levam o usuário para outra página, enquanto o comando permite que o usuário realize uma ação na página atual. Os elementos de navegação tornam o aplicativo utilizável. Os comandos tornam o aplicativo útil.

Para saber mais sobre as diferentes superfícies de comando nos aplicativos, consulte Estabelecendo o layout da sua interface do usuário.

Tipos de comando

Filtro

Os comandos de filtro removem ou ocultam conteúdo em um conjunto de dados, com base em alguns critérios. Por exemplo, o usuário pode optar por exibir apenas os jogos da Windows Store que estejam classificados como "Aventura".

 

Pesquisa de jogos de Aventura na Windows Store

 

Pivô

Os comandos de pivô reorganizam o conteúdo em um conjunto de dados e proporcionam uma exibição diferente dos dados com base no pivô. Por exemplo, o usuário pode optar por organizar as músicas por álbum, artista ou música.

 

Aplicativo Xbox Music

 

Classificação

Os comandos de classificação alteram a ordem em que o conteúdo é exibido em um conjunto de dados. Por exemplo, o usuário pode escolher destinos em um aplicativo de viagem por popularidade.

 

Aplicativo Viagem Bing

 

Exibição

Os comandos de exibição alteram o estilo ou método no qual o conteúdo é exibido. Por exemplo, em um aplicativo que localiza hotéis, o usuário pode escolher exibir os hotéis em um mapa em vez de em uma lista.

 

Aplicativo da Expedia

 

Dica

Você pode colocar comandos de dicas na tela, se achar que elas beneficiarão os usuários. Por exemplo, no aplicativo Email do Windows 8.1, existe o comando "reticências" que sugere opções adicionais. Ao clicar nele, é exibida uma barra de aplicativos, além dos métodos convencionais do Windows que exibem uma barra de aplicativos.

 

Aplicativo Email com dica na barra de aplicativo

 

Você pode criar essas dicas para atender ao estilo de seu aplicativo. Esse aplicativo de notícias usa a mesma dica de barra de aplicativos, mais um sinalizador com um ícone de menu que exibe uma página de opções de menu.

 

Aplicativo News Bento com dicas na barra de menus e aplicativos

 

Outros

Qualquer elemento interativo da interface que permita ao usuário executar uma ação na exibição atual é um comando. Veja alguns exemplos.

 

Exemplos de outros comandos

 

Exemplos de comandos personalizados

Posicionamento de comandos

Na tela

Se um comando (ou um menu de comando) for essencial e constantemente necessário para que o usuário complete os principais cenários, coloque-o na tela. Por exemplo, no aplicativo Email do Windows 8.1, os comandos principais como responder, novo e excluir aparecem na tela quando um email é selecionado.

 

O aplicativo Email com os comandos na tela

 

Barra de aplicativos inferior

Às vezes, você não quer comandos atravancando a tela e afetando a capacidade do usuário de consumir o conteúdo do aplicativo. Use a barra de aplicativos inferior para exibir comandos aos usuários por demanda. A barra de aplicativos inferior mostra os comandos relevantes ao contexto do usuário, normalmente a página ou a seleção atual.

A barra de aplicativos inferior funciona bem com comandos de seleção simples e múltipla. Você pode programar seu aplicativo de forma que a barra de aplicativos apareça quando o usuário selecionar objetos.

 

objetos selecionados, a barra de aplicativos aparece

 

Diretrizes de posicionamento de comandos

Você pode variar o posicionamento dos comandos na barra de aplicativos, mas deve considerar o seguinte:

  • Previsibilidade Até onde for possível, use interação e posicionamento de comandos consistentes em todos os modos de exibição de seu aplicativo.
  • Ergonomia Considere como o posicionamento de comandos específicos pode aumentar a velocidade ou facilidade com que um comando pode ser acionado.
  • Estética Limite o número de comandos para evitar que a barra de aplicativos pareça complicada. Escolha ícones fáceis de entender ou prever. Mantenha rótulos de texto curtos.

Recomendamos as seguintes diretrizes de posicionamento de comandos:

Coloque os comandos persistentes ou padrão à direita da barra de aplicativos. Se houver apenas alguns comandos, a barra de aplicativos pode terminar com comandos apenas à direita.

Neste exemplo, para os comandos de pesquisa, o conjunto de comandos de exibição e o conjunto de filtro/classificação são persistentes.

Comandos persistentes posicionados à direita

 

Use as bordas. Se houver um grande número de comandos, separe conjuntos de comandos diferentes à esquerda ou à direita para equilibrar a barra de aplicativos e para que os comandos tenham um acesso mais ergonômico.

Neste exemplo, decidimos mover o conjunto de comandos de exibição para a esquerda e manter o conjunto de filtragem/classificação à direita. Quando a exibição de mapa está ativa, os comandos de exibição de mapa aparecem à direita do conjunto de comandos de exibição.

Comandos separados nas margens esquerda e direita

 

Mostre/oculte comandos desabilitados. Esses são os comandos que não são relevantes dem determinadas situações. Quando aparecerem, eles não devem perturbar a ordem de comandos persistentes.

Neste exemplo, a exibição de mapa está ativa e os comandos de exibição de mapa aparecem à direita do conjunto de comandos de exibição.

Comandos com um comando desabilitado

 

Insira comandos de seleção. Comandos que aparecem como resultado da seleção do usuário ficam na extrema esquerda, deslizando sobre quaisquer comandos que possam existir. Isso torna os comandos de seleção mais notáveis e mais fáceis de acessar.

Neste exemplo, o conjunto de comandos de exibição desliza para a direita para dar espaço para o conjunto de comandos de seleção.

Comandos de seleção na extremidade esquerda

 

Posicionamento de comandos comuns

Alguns comandos são comuns e aparecem em muitos aplicativos. Para gerar consistência e instilar confiança, recomendamos seguir estas diretrizes ao decidir onde colocar comandos comuns na barra de aplicativos.

Coloque comandos de seleção na extrema esquerda, quer eles sejam comandos contextuais que aparecem ao selecionar ou comandos que afetam a seleção.

Neste exemplo, antes que os usuários selecionem qualquer coisa, um comando "Selecionar tudo" aparece à esquerda. Depois que os usuários selecionam alguma coisa, os outros comandos de seleção aparecem à esquerda.

Comandos de seleção contextual substituindo o comando Selecionar tudo depois que o usuário seleciona algo

 

Coloque comandos de novo item na borda direita da barra. Os comandos de novo item podem incluir a adição, criação, redação ou qualquer comando que crie uma nova entidade. Os comandos de novo item devem ser facilmente acessíveis usando os polegares.

Neste exemplo, o comando "Nova revisão" permite que os usuários criem uma nova revisão do restaurante. Outros comandos, relacionados à "Nova revisão", são colocados ao lado dele à esquerda.

O glifo + só deve ser usado para representar o comando "Novo" e não deve aparecer em nenhum outro lugar em uma barra de aplicativos.

Comando Novo item na extremidade direita da barra

 

Coloque comandos de exclusão à esquerda dos comandos de novo item. Use Excluir/Novo se o aplicativo gerenciar entidades individuais que podem persistir fora de seu aplicativo específico, como em um aplicativo de email ou câmera. Excluir/Novo sempre devem aparecer nesta ordem.

Comandos da barra de aplicativo para Excluir e Novo

 

Coloque comandos de remoção à esquerda dos comandos de adição. Use Remover/Adicionar se o aplicativo gerenciar uma lista, como uma lista de tarefas, uma lista de cidades em um aplicativo de previsão do tempo ou uma lista de restaurantes marcados com indicador. Remover/Adicionar sempre devem aparecer nesta ordem.

Comandos da barra de aplicativo para Remover e Adicionar

 

Coloque comandos de limpeza à esquerda dos comandos de novo item. Use limpar se você estiver executando uma ação destrutiva em todos os itens possíveis. Use o rótulo do comando para ser explícito sobre o que o comando fará, como "Limpar seleção".

Comandos da barra de aplicativo para Limpar e Novo

 

Para exemplos de posicionamento de comandos na barra de aplicativos inferior, consulte a galeria de aplicativos da Windows Store.

Agrupando comandos em menus

Às vezes, é mais eficiente agrupar vários comandos em um menu de comando. Os menus permitem apresentar mais opções em menos espaço. Eles podem incluir controles interativos.

Neste exemplo, o comando de classificação exibe um menu simples que facilita a escolha de uma opção de classificação pelos usuários. O comando de filtro exibe um conjunto de controles em um menu que permite que os usuários filtrem itens por critérios mais complexos.

comandos da barra de aplicativos agrupados em menus

 

Menus de contexto

Muitas vezes, os menus de contexto contêm ações da área de transferência, como recortar, copiar e colar. Os menus de contexto também podem conter comandos que se aplicam a conteúdo que não pode ser selecionado, como uma imagem em uma página da Web. O sistema fornece aplicativos com menus de contexto padrão para texto e hiperlinks. Para texto, o menu de contexto padrão mostra os comandos da área de transferência. Para hiperlinks, o menu padrão mostra comandos para copiar e para abrir o link.

Os usuários invocam menus de contexto pressionando e segurando o conteúdo em dispositivos sensíveis ao toque ou clicando com o botão direito do mouse no conteúdo com um mouse.

 

menu de contexto de um link no Bing

 

Observação  

Utilize os botões

Ao criar um aplicativo da Windows Store, você tem quatro comandos bastante úteis nos botões: pesquisar, compartilhar, dispositivos e configurações. Os usuários invocam os botões passando o dedo da borda direita da tela ou apontando o cursor do mouse para o canto superior ou inferior direito da tela.

 

Passe o dedo da borda direita para ver os botões

 

Pesquisar: permite que os usuários pesquisem rapidamente o conteúdo do aplicativo de qualquer lugar do sistema, inclusive de outros aplicativos.botões
Compartilhar: permite que os usuários compartilhem conteúdo do seu aplicativo com outras pessoas ou aplicativos, e recebam conteúdo compartilhado.
Iniciar: o botão Iniciar leva o usuário à tela inicial. Os aplicativos não interagem com esse botão. O comportamento é automático e é sempre o mesmo.
Dispositivos: permite que os usuários curtam áudio, vídeo ou imagens transmitidas do seu aplicativo para outros dispositivos da rede doméstica.
Configurações: consolida todas as suas configurações em um mesmo local e permite que os usuários configurem o seu aplicativo usando um mecanismo comum com o qual já estão familiarizados.

 

Evite duplicar a funcionalidade do contrato de aplicativos na tela ou barra de aplicativos.

Tópicos relacionados

Diretrizes de barras de aplicativos

Diretrizes de menus de contexto

Diretrizes de comandos da área de transferência

Botões e contratos