Compartilhar via

Diretrizes para configurações de aplicativos

As configurações do aplicativo são as partes personalizáveis pelo usuário do aplicativo Windows, acessadas por meio de uma página de configurações dedicada. Por exemplo, um aplicativo leitor de notícias pode permitir que o usuário especifique quais fontes de notícias exibir ou quantas colunas mostrar na tela, ao passo que um aplicativo de previsão do tempo pode permitir ao usuário escolher entre Celsius e Fahrenheit. Este artigo fornece recomendações e práticas recomendadas para criar e exibir configurações de aplicativo em aplicativos WinUI.

Quando fornecer uma página de configurações

Aqui estão exemplos de opções de aplicativos que pertencem a uma página de configurações do aplicativo:

  • 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 clima, alterar as configurações da conta de um aplicativo de email, configurações de 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 do aplicativo 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 use controles binários (liga/desliga). Um botão de alternância geralmente é o melhor controle para uma configuração binária.
  • Para os usuários, em configurações que permitem escolher 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 configurações do aplicativo na página de configurações do aplicativo.
  • Mantenha suas configuraçõ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 fazem 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 configurações do aplicativo devem ser o último item na lista de opções de navegação e ser fixadas na parte inferior. NavigationView fornece um item de configurações interno para essa finalidade – defina a propriedade IsSettingsVisible para true exibir automaticamente uma entrada configurações na parte inferior do painel de navegação.

Ponto de entrada de configurações do aplicativo para o painel de navegação

Barra de comandos

Se você estiver usando uma barra de comandos ou uma barra de ferramentas, coloque o ponto de entrada de configurações como um dos últimos itens no menu flutuante "Mais". Caso uma maior visibilidade para o ponto de entrada de configurações seja importante no contexto do seu aplicativo, coloque o ponto de entrada diretamente na barra de comandos e não dentro do menu de excedente.

Ponto de entrada de configurações do aplicativo para a barra de comandos

Layout

A página de configurações do aplicativo deve abrir a tela inteira e preencher toda a janela. Use um layout rolável com uma largura máxima restrita (cerca de 1000 a 1100 px) para que o conteúdo permaneça legível em exibições largas. Agrupar configurações relacionadas em cabeçalhos de seção usando o estilo de texto BodyStrong .

Use os controles SettingsCard e SettingsExpander do Windows Community Toolkit para criar sua página de configurações. Esses controles fornecem um layout consistente e acessível com um cabeçalho, descrição, ícone e um controle de ação alinhado ao lado direito do cartão.

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

Layout da página de configurações do aplicativo no desktop

CartãoDeConfigurações

Use um SettingsCard para configurações individuais. Cada cartão tem um Cabeçalho, uma Descrição opcional, um HeaderIcon opcional e um controle de ação (como um ToggleSwitch, ComboBoxou Button) colocado como o conteúdo do cartão. Definir a propriedade IsClickEnabled como true torna todo o cartão clicável, o que é útil para entradas no estilo de navegação.

Expansor de Configurações

Use um SettingsExpander quando uma configuração tiver sub-opções que devem ser reveladas quando necessário. O expansor exibe um controle principal de ação na linha de cabeçalho e itens adicionais SettingsCard dentro da coleção Items. Isso mantém a página compacta enquanto ainda mostra opções avançadas. Evite aninhar expansores em mais de um nível.

Configurações do tema do aplicativo

Se o aplicativo permitir que os usuários escolham o modo de cor do aplicativo, apresente essas opções usando uma caixa de combinação dentro de um SettingsCard. As opções devem ler:

  • Claro
  • Escuro
  • Usar a configuração do sistema

Talvez você também queira adicionar um hiperlink à página Cores das Configurações de Windows em que os usuários podem acessar e modificar o modo de aplicativo padrão atual. Use o texto "Configurações de cor do Windows" para o texto do hiperlink e ms-settings:colors para o URI.

Seção

Sobre a seção

Recomendamos colocar uma seção Sobre na parte inferior da página de configurações usando um SettingsExpander. A linha de cabeçalho recolhido deve mostrar o nome do aplicativo, o ícone e o número da versão. A área expandida pode incluir:

  • Um link para o repositório ou site do aplicativo.
  • Um link para relatar bugs ou solicitar recursos.
  • Uma lista de dependências e referências como HyperlinkButton controles.
  • Informações legais, como um aviso de direitos autorais, termos de uso e links da Política de Privacidade.

Seção

Conteúdo recomendado da página

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

  • Agrupar configurações semelhantes ou relacionadas em um cabeçalho de seção.

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

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

  • Use rótulos descritivos de uma palavra para cabeçalhos de configurações. Por exemplo, nomeie a configuração como "Contas" em vez de "Configurações da conta" para configurações relacionadas à conta.

  • Se uma configuração estiver diretamente vinculada à web, use os elementos clicáveis SettingsCardIsClickEnabled="True" com um ícone de ação apropriado para indicar navegação externa.

  • Combine configurações menos usadas em um SettingsExpander para que as configurações comuns possam ter suas próprias SettingsCard. Coloque conteúdo ou links que contêm apenas informações em uma seçã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:

  • Adicione uma mensagem descritiva se um dos controles estiver desabilitado. Usar a propriedade Description de SettingsCard para explicar por que a configuração não está disponível.

  • Quando um usuário altera uma configuração, o aplicativo deve refletir imediatamente a alteração , não exigir um botão de confirmação.

  • Last updated on