Partilhar via


Noções básicas de comando

Em um aplicativo do Windows, os elementos de comando são elementos interativos da interface do usuário que permitem que os usuários executem ações como enviar um email, excluir um item ou enviar um formulário. Interfaces de comando são compostas por elementos de comando comuns, as superfícies de comando que as hospedam, as interações que suportam e as experiências que proporcionam.

Forneça a melhor experiência de comando

O aspeto mais importante de uma interface de comando é o que você está tentando deixar um usuário realizar. Ao planejar a funcionalidade do seu aplicativo, considere as etapas necessárias para realizar essas tarefas e as experiências do usuário que você deseja habilitar. Depois de concluir um rascunho inicial dessas experiências, você pode tomar decisões sobre as ferramentas e interações para implementá-las.

Aqui estão algumas experiências comuns de comando:

  • Envio ou submissão de informações
  • Seleção de configurações e opções
  • Pesquisa e filtragem de conteúdo
  • Abrir, guardar e eliminar ficheiros
  • Editar ou criar conteúdo

Seja criativo com o design de suas experiências de comando. Escolha quais dispositivos de entrada seu aplicativo suporta e como seu aplicativo responde a cada dispositivo. Ao oferecer suporte à mais ampla gama de recursos e preferências, você torna seu aplicativo o mais utilizável, portátil e acessível possível (consulte Design de comandos para aplicativos do Windows para obter mais detalhes).

Escolha os elementos de comando certos

Usar os elementos certos em uma interface de comando pode fazer a diferença entre um aplicativo intuitivo e fácil de usar e um aplicativo difícil e confuso. Um conjunto abrangente de elementos de comando está disponível no aplicativo do Windows. Aqui está uma lista de alguns dos elementos de comando UWP mais comuns.

imagem do botão

Botões

Botões acionam uma ação imediata. Os exemplos incluem o envio de um e-mail, o envio de dados de formulário ou a confirmação de uma ação em uma caixa de diálogo.

imagem da lista

Listas

Listas apresentam itens em uma lista interativa ou em uma grelha. Geralmente usado para muitas opções ou itens de exibição. Os exemplos incluem lista suspensa, caixa de listagem, vista de lista e vista de grelha.

imagem de controle de seleção

Controlos de seleção

Permite que os usuários escolham entre algumas opções, como ao preencher uma pesquisa ou definir as configurações do aplicativo. Os exemplos incluem CheckBox, RadioButton e Toggle switch.

Imagem do calendário

Seletores de calendário, data e hora

Os seletores de calendário, data e hora permitem que os usuários visualizem e modifiquem informações de data e hora, como ao criar um evento ou definir um alarme. Os exemplos incluem seletor de data do calendário, modo de exibição de calendário, seletor de data, seletor de hora.

Imagem de entrada de texto preditiva

Introdução de texto preditiva

Fornece sugestões à medida que os usuários digitam, como ao inserir dados ou executar consultas. Exemplos incluem AutoSuggestBox.

Para obter uma lista completa, consulte Controles e elementos da interface do usuário

Colocar comandos na superfície correta

Você pode colocar elementos de comando em várias superfícies em seu aplicativo, incluindo a tela do aplicativo ou contêineres de comando especiais, como uma barra de comandos, submenu da barra de comandos, barra de menus ou caixa de diálogo.

Sempre tente permitir que os usuários manipulem o conteúdo diretamente em vez de por meio de comandos que atuam sobre o conteúdo, como arrastar e soltar para reorganizar itens de lista em vez de botões de comando para cima e para baixo.

No entanto, isso pode não ser possível com determinados dispositivos de entrada ou ao acomodar habilidades e preferências específicas do usuário. Nesses casos, forneça o maior número possível de recursos de comando e coloque esses elementos de comando em uma superfície de comando em seu aplicativo.

Aqui está uma lista de algumas das superfícies de comando mais comuns.

imagem da tela do aplicativo

Tela do aplicativo (área de conteúdo)

Se um comando for constantemente necessário para que os usuários concluam cenários principais, coloque-o na tela. Como você pode colocar comandos perto (ou sobre) os objetos que eles afetam, colocar comandos na tela os torna fáceis e óbvios de usar. No entanto, escolha os comandos que você coloca na tela com cuidado. Muitos comandos na tela do aplicativo ocupam espaço valioso na tela e podem sobrecarregar o usuário. Se o comando não for usado com frequência, considere colocá-lo em outra superfície de comando.

imagem da barra de comandos

Barras de comandos e barras de menus

Barras de comandos ajudam a organizar comandos e torná-los fácil de aceder. As barras de comandos podem ser colocadas na parte superior do ecrã, na parte inferior do ecrã ou na parte superior e inferior do ecrã (uma MenuBar também pode ser utilizada quando a funcionalidade da sua aplicação é demasiado complexa para uma barra de comandos).

imagem do menu de contexto

Menus e menus de contexto

Menus e menus de contexto economizam espaço organizando comandos e ocultando-os até que o usuário precise deles. Os usuários normalmente acessam um menu ou menu de contexto clicando em um botão ou clicando com o botão direito do mouse em um controle.

O CommandBarFlyout é um tipo de menu contextual que combina os benefícios de uma barra de comandos e um menu de contexto em um único controle. Ele pode fornecer atalhos para ações comumente usadas e fornecer acesso a comandos secundários que só são relevantes em determinados contextos, como área de transferência ou comandos personalizados.

A UWP também fornece um conjunto de menus tradicionais e menus de contexto; para obter mais informações, consulte Menus e menus de contexto.

Fornecer retorno sobre o comando

O feedback do comando comunica aos usuários que uma interação ou comando foi detetado, como o comando foi interpretado e manipulado e se o comando foi bem-sucedido ou não. Isso ajuda os usuários a entender o que fizeram e o que podem fazer em seguida. Idealmente, o feedback deve ser integrado naturalmente na sua interface do usuário, para que os usuários não precisem ser interrompidos ou tomar medidas adicionais, a menos que seja absolutamente necessário.

Observação

Forneça feedback apenas quando necessário e somente se ele não estiver disponível em outro lugar. Mantenha a interface do usuário do aplicativo limpa e organizada, a menos que você esteja agregando valor.

Eis algumas formas de fornecer comentários na sua aplicação.

imagem da área de conteúdo da barra de comandos

Barra de comandos

A área de conteúdo do CommandBar é um local intuitivo para comunicar o estado aos utilizadores, caso pretendam ver o feedback.

Imagem de menu suspenso

Menus Desdobráveis

Flyouts são pop-ups contextuais leves que podem ser encerrados tocando ou clicando em algum lugar fora do flyout.

imagem da caixa de diálogo

Controles de Diálogo

Controles de diálogo são sobreposições modais da interface de utilizador que fornecem informações contextuais do aplicativo. Na maioria dos casos, as caixas de diálogo bloqueiam as interações com a janela do aplicativo até serem explicitamente descartadas e, muitas vezes, solicitam algum tipo de ação do usuário. As caixas de diálogo podem causar interrupções e só devem ser usadas em determinadas situações. Para mais informações, consulte a seção Quando confirmar ou desfazer ações.

Sugestão

Tenha cuidado com o quanto seu aplicativo usa caixas de diálogo de confirmação; Eles podem ser muito úteis quando o usuário comete um erro, mas são um obstáculo sempre que o usuário está tentando executar uma ação intencionalmente.

Quando confirmar ou desfazer ações

Não importa quão bem projetada seja a interface do usuário do seu aplicativo, todos os usuários executam uma ação que gostariam de não ter feito. Seu aplicativo pode ajudar nessas situações exigindo a confirmação de uma ação ou fornecendo uma maneira de desfazer ações recentes.

Para ações que não podem ser desfeitas e têm consequências importantes, recomendamos o uso de uma caixa de diálogo de confirmação. Exemplos de tais ações incluem:

  • Sobrescrevendo um ficheiro
  • Não guardar um ficheiro antes de fechar
  • Confirmação da exclusão permanente de um arquivo ou dados
  • Fazer uma compra (a menos que o usuário opte por não solicitar uma confirmação)
  • Enviar um formulário, como inscrever-se para algo

Oferecer um comando simples de desfazer é geralmente suficiente para ações que podem ser desfeitas. Exemplos de tais ações incluem:

  • Eliminar um ficheiro
  • Eliminar um e-mail (não permanentemente)
  • Modificar conteúdo ou editar texto
  • Renomeando um arquivo

Otimizar para tipos de entrada específicos

Consulte a cartilha Interaction para obter mais detalhes sobre como otimizar as experiências do utilizador relativamente a um tipo de entrada ou dispositivo específico.