Diretrizes para configurações de aplicativos

As definições da aplicação são as partes personalizáveis pelo utilizador da sua aplicação Windows, acedidas através de uma página dedicada às definições. Por exemplo, um aplicativo leitor de notícias pode permitir que o usuário especifique quais fontes de notícias exibir ou quantas colunas exibir na tela, enquanto um aplicativo de clima pode permitir que o usuário escolha entre Celsius e Fahrenheit. Este artigo fornece recomendações e boas práticas para criar e exibir definições de aplicações em aplicações WinUI.

Quando fornecer uma página de configurações

Eis alguns exemplos de opções de aplicações que pertencem a uma página de definições da aplicação:

• Opções de configuração que afetam o comportamento do aplicativo e não exigem reajustes frequentes, como escolher entre Celsius ou Fahrenheit como unidades padrão de temperatura em um aplicativo de meteorologia, alterar as configurações da conta para um aplicativo de email, configurações para notificações ou opções de acessibilidade.
• Opções que dependem das preferências do usuário, como música, efeitos sonoros ou temas de cores.
• Informações de aplicativos que não são acessadas com muita frequência, como política de privacidade, ajuda, versão do aplicativo ou informações de direitos autorais.

Os comandos que fazem parte do fluxo de trabalho típico do aplicativo (por exemplo, alterar o tamanho do pincel em um aplicativo de arte) não devem estar em uma página de configurações. Para saber mais sobre o posicionamento de comandos, consulte Noções básicas de design de comandos.

Recomendações gerais

• Mantenha as páginas de configurações simples e faça uso de controles binários (on/off). Um interruptor de alternância é geralmente o melhor controle para uma configuração binária.
• Para configurações que permitem que os utilizadores escolham um item de um conjunto de até 5 opções mutuamente exclusivas e relacionadas, use botões de opção.
• Crie um ponto de entrada para todas as definições da aplicação na página de definições da sua aplicação.
• Mantenha as suas definições simples. Defina padrões inteligentes e mantenha o número de configurações no mínimo.
• Quando um usuário altera uma configuração, o aplicativo deve refletir imediatamente a alteração.
• Não inclua comandos que façam parte do fluxo de trabalho comum do aplicativo.

Ponto de entrada

A maneira como os usuários acessam a página de configurações do aplicativo deve ser baseada no layout do aplicativo.

Painel de navegação

Para um layout NavigationView , as definições da aplicação devem ser o último elemento na lista de opções de navegação e estar fixadas no final. NavigationView fornece um item de definições incorporado para este propósito — defina a propriedade IsSettingsVisible para true mostrar automaticamente uma entrada de Definições no fundo do painel de navegação.

Barra de comandos

Se estiver a usar uma barra de comandos ou barra de ferramentas, coloque o ponto de entrada das configurações como um dos últimos itens no menu de sobrefluxo "Mais". Se uma maior visibilidade do ponto de entrada das definições for importante para o seu aplicativo, coloque o ponto de entrada diretamente na barra de comandos e não dentro do menu de opções adicionais.

Esquema

A página de definições da aplicação deve abrir em ecrã completo e preencher toda a janela. Use um layout deslocável com uma largura máxima limitada (cerca de 1000–1100 px) para que o conteúdo permaneça legível em ecrãs largos. Agrupe definições relacionadas sob cabeçalhos de secção usando o estilo de texto BodyStrong.

Usa os controlos SettingsCard e SettingsExpander do Community Toolkit Windows para construir a tua página de definições. Estes controlos proporcionam um layout consistente e acessível com um cabeçalho, descrição, ícone e um controlo de ação alinhados no lado direito do cartão.

Para exemplos completos de implementação, consulte a página de definições da Galeria WinUI e o exemplo Windows Community Toolkit SettingsControls.

Cartão de Configurações

Use um SettingsCard para definições individuais. Cada carta tem um Cabeçalho, uma Descrição opcional, um Ícone de Cabeçalho opcional e um controlo de ação (como um ToggleSwitch, ComboBox, ou Button) colocados como conteúdo da carta. Definir a IsClickEnabled propriedade para true torna toda a carta clicável, o que é útil para entradas ao estilo navegação.

ExpansorDeConfigurações

Usa um SettingsExpander quando uma definição tiver subopções que devem ser reveladas a pedido. O expander mostra um controle de ação principal na linha de cabeçalho e itens adicionais SettingsCard no interior da coleção Items. Isto mantém a página compacta enquanto ainda apresenta opções avançadas. Evite aninhar expansores em mais de um nível.

Definições do tema da aplicação

Se a sua aplicação permite aos utilizadores escolher o modo de cor da aplicação, apresente estas opções usando uma caixa combinada dentro de um SettingsCard. As opções devem ser:

• Light
• Dark
• Usar configuração do sistema

Também pode querer adicionar um hiperlink para a página Colors das Definições do Windows, onde os utilizadores possam aceder e modificar o modo de aplicação predefinido atual. Use a cadeia "Definições de cor do Windows" para o texto do hiperlink e ms-settings:colors para o URI.

Secção Sobre

Recomendamos colocar uma secção Sobre no final da sua página de definições usando um SettingsExpander. A linha de cabeçalho colapsada deve mostrar o nome da sua aplicação, ícone e número de versão. A área expandida pode incluir:

• Um link para o repositório ou site da sua aplicação.
• Um link para relatar erros ou solicitar funcionalidades.
• Uma lista de dependências e referências como controlos HyperlinkButton .
• Informação legal como um aviso de direitos de autor, Termos de Utilização e links para Declaração de Privacidade.

Conteúdo recomendado da página

Depois de ter uma lista de itens que deseja incluir na página de configurações do aplicativo, considere estas diretrizes:

• Agrupe definições semelhantes ou relacionadas sob um cabeçalho de secção.

• Tente manter o número total de configurações para um máximo de quatro ou cinco.

• Exiba as mesmas configurações, independentemente do contexto do aplicativo. Se algumas definições não forem relevantes num determinado contexto, desative SettingsCard definindo IsEnabled para false.

• Use etiquetas descritivas de uma palavra para os cabeçalhos das definições. Por exemplo, nomeie a configuração "Contas" em vez de "Configurações de conta" para configurações relacionadas à conta.

• Se uma configuração estiver diretamente ligada à web, use um SettingsCard clicável com IsClickEnabled="True" e um ícone de ação apropriado para indicar a navegação para fora.

• Combine os cenários menos usados num SettingsExpander para que os cenários comuns possam ter os seus SettingsCardpróprios . Coloque conteúdos ou links que contenham apenas informação numa secção "Sobre".

• Apresente o conteúdo de cima para baixo em uma única coluna, rolável se necessário.

• Use os seguintes controles para as configurações do aplicativo:

  • Alternar interruptores: para permitir que os usuários definam valores ativados ou desativados.
  • Botões de opção: para permitir que os utilizadores escolham um item de um conjunto de até 5 opções mutuamente exclusivas, relacionadas.
  • Caixas combinadas: Para permitir que os utilizadores escolham entre um conjunto de opções num menu suspenso compacto.
  • Caixas de introdução de texto: Para permitir que os utilizadores introduzam texto. Use o tipo de caixa de entrada de texto que corresponde ao tipo de texto que você está recebendo do usuário, como um e-mail ou senha.
  • Hiperlinks: para levar o usuário para outra página dentro do aplicativo ou para um site externo.
  • Botões: Para permitir que os utilizadores iniciem uma ação imediata.

• Adicione uma mensagem descritiva se um dos controles estiver desativado. Use a Description propriedade de SettingsCard para explicar porque é que o cenário está indisponível.

• Quando um utilizador altera uma definição, a aplicação deve refletir imediatamente a alteração — não é necessário um botão de confirmação.

Artigos relacionados

• SettingsCard e SettingsExpander (Windows Community Toolkit)
• Noções básicas de design de comandos
• Orientações para os controlos dos progressos realizados
• Armazene e recupere dados de aplicativos