Diretrizes para configurações de aplicativos (aplicativos da Windows Store)

O Windows fornece um painel Configurações por padrão para cada aplicativo da Windows Store. A parte superior do painel Configurações lista "pontos de entrada" para as configurações do seu aplicativo. Cada ponto de entrada abre um submenu Configurações que exibe as opções de configuração propriamente ditas. Este tópico descreve as práticas recomendadas para criar e exibir configurações do aplicativo.

Veja este recurso em ação como parte da nossa série sobre recursos para aplicativos, do início ao fim:  Interface do usuário de aplicativo da Windows Store, do início ao fim

Exemplo

Os usuários passam o dedo a partir da lateral da tela para exibir os botões e depois pressionam o botão Configurações para exibir um painel Configurações.

O submenu de configurações para o aplicativo OneDrive.

Observação  O Windows adiciona dois pontos de entrada padrão para cada painel Configurações em um aplicativo da Windows Store: Permissões e Classificar e dar opinião. Observe que se o seu aplicativo não for instalado pela Windows Store (se, por exemplo, ele for um aplicativo corporativo de sideload), o painel Configurações do seu aplicativo não incluirá um ponto de entrada Classificar e dar opnião. A parte inferior do painel Configurações inclui as configurações do sistema, como volume, brilho e energia.

O meu aplicativo deve incluir configurações do aplicativo?

Todos os aplicativos da Windows Store incluem um painel Configurações com as seções Permissões e Classificar e dar opinião, por padrão. A seguir são apresentados exemplos de configurações adicionais que pertencem ao painel Configurações:

  • As opções de configuração que afetam o comportamento do aplicativo e que não necessitam de reajuste frequente, como a seleção entre Celsius ou Fahrenheit como a unidade padrão de temperatura em um aplicativo de tempo ou a alteração das configurações da conta de aplicativo de email.
  • Opções que dependem das preferências do usuário, como músicas, efeitos sonoros ou temas de cores.
  • Informações sobre o aplicativo que não são acessadas com frequência, como as políticas de privacidade, a ajuda, a versão do aplicativo ou as informações de direitos autorais.
  • Um link para sua Política de Privacidade se você tiver uma Conexão com a Internet declarada em seus recursos. Esquecer de se vincular a essa política é a causa mais comum de bloqueio de certificação! Para obter informações detalhadas, consulte Requisitos para certificação de aplicativos da Windows Store.

Os comandos que fazem parte do fluxo de trabalho típico do aplicativo (por exemplo, alterar o tamanho do pincel, em um aplicativo de desenho) não devem estar no painel Configurações. Em vez disso, coloque os comandos geralmente usados na barra superior ou inferior do aplicativo. Para saber mais sobre o pocionamento de comandos, consulte Padrões de comando. Guidelines for app bars fornece recomendações para o uso da barra de aplicativos.

O que fazer e o que não fazer

Princípios gerais

  • Crie pontos de entrada para todas as configurações do aplicativo no painel Configurações.
  • Mantenha suas configurações simples. Defina padrões inteligentes e mantenha o número de configurações em um mínimo.
  • Se necessário, crie um link de elementos da interface do usuário do aplicativo para o painel Configurações ou um link profundo para um submenu Configurações específico. Por exemplo, você pode vincular ao seu submenu Configurações de ajuda de um botão "Ajuda" na barra inferior do aplicativo e também de um ponto de entrada da "Ajuda" no painel Configurações.
  • Quando um usuário muda uma configuração, o aplicativo deve refletir essa mudança imediatamente. Aplique as alterações na configuração imediatamente ou assim que um usuário tiver concluído a interação com o submenu.
  • Use os controles do submenu Configurações disponíveis para WinJS (WinJS.UI.SettingsFlyout) e XAML (Windows.UI.Xaml.Controls.SettingsFlyout). Esses controles implementam as diretrizes de design da interface do usuário (descritas na seção Projete uma interface do usuário de Configurações) por padrão.
  • Não inclua comandos que fazem parte de um fluxo de trabalho comum do aplicativo, como alterar a cor do pincel em um aplicativo de desenho. Esses comandos devem estar na barra de aplicativos ou na tela. Para saber mais, veja Padrões de comandos para obter uma visão geral conceitual e Diretrizes para barras de aplicativos.
  • Não use um ponto de entrada no painel Configurações para realizar uma ação diretamente. Os pontos de entrada devem abrir submenus Configurações.
  • Não use o painel Configurações para navegação. Quando o painel Configurações for fechado, o usuário deve estar no mesmo local do aplicativo em que estava quando clicou no botão Configurações. A barra de aplicativos superior é um local mais adequado para navegação.
  • Não use as classes do submenu Configurações como controles para todos os fins. Elas se destinam apenas a submenus Configurações iniciados de pontos de entrada no painel Configurações.

Pontos de entrada

Pontos de entrada são rótulos que aparecem na parte superior do painel Configurações e abrem submenus de configurações, nos quais é possível exibir uma ou mais opções de configuração. Depois de obtida a lista das configurações que você quer concluir, considere estas diretrizes sobre pontos de entrada:

  • Agrupe configurações semelhantes ou relacionadas juntas em um mesmo ponto de entrada. Evite adicionar mais do que quatro pontos de entrada em seu painel Configurações.
  • Exiba os mesmos pontos de entrada, independentemente do contexto do aplicativo. Se algumas configurações não forem relevantes em determinado contexto, desabilite-as no submenu Configurações.
  • Use rótulos descritivos de uma palavra para seus pontos de entrada quando possível. Por exemplo, para configurações relacionadas a contas, chame o ponto de entrada de "Contas" em vez de "Configurações de Contas". Se você desejar somente um ponto de entrada para suas configurações e as configurações não derem margem a um rótulo descritivo, use "Opções" ou "Padrões".
  • Se um ponto de entrada estiver vinculado diretamente à Web em vez de a um submenu, informe o usuário com uma dica visual, por exemplo, "Ajuda (online)" ou "Fóruns na Web", formatada como um hiperlink. Procure agrupar vários links para a Web em um submenu com um único ponto de entrada. Por exemplo, um ponto de entrada "Sobre" pode abrir um submenu com links para os termos de uso, a política de privacidade e o suporte do aplicativo.
  • Combine configurações menos utilizadas em um único ponto de entrada para que configurações mais comuns possam ter seu próprio ponto de entrada. Coloque conteúdo ou links que incluam somente informações em um ponto de entrada "Sobre".
  • Não duplique a funcionalidade no painel "Permissões". O Windows fornece esse painel por padrão e não é possível modificá-lo.

Projete uma interface do usuário de Configurações

Observação  Os controles do submenu Configurações disponíveis em WinJS e em XAML seguem essas diretrizes por padrão, exceto aqueles pertencentes a cor do cabeçalho e da borda. Use esses controles (WinJS.UI.SettingsFlyout ou Windows.UI.Xaml.Controls.SettingsFlyout) para garantir que seus submenus Configurações sigam as diretrizes da interface do usuário e forneçam uma experiência do usuário consistente.

  • Sempre inicie um submenu Configurações a partir de pontos de entrada em seu painel Configurações.
  • Use uma superfície do tipo "light-dismiss" que apareça na parte superior do conteúdo principal do aplicativo e desapareça quando o usuário clica fora do submenu ou redimensiona o aplicativo. Isso permite que o usuário altere uma configuração rapidamente e retorne ao aplicativo.
  • Certifique-se de que seu submenu Configurações apareça no mesmo lado da tela, como os botões e o painel Configurações. Use a propriedade SettingsEdgeLocation para determinar em qual lado da tela o botão Configurações vai aparecer.
  • Deslize o submenu no mesmo lado da tela que o painel Configurações, e não na parte inferior ou superior da tela.
  • Um submenu deve ser da altura da tela inteira, independentemente da orientação, e deve ser estreito (346 pixels) ou largo (646 pixels). Escolha a largura adequada para o conteúdo e não crie tamanhos personalizados.
  • O cabeçalho do submenu deve incluir um botão Voltar, o nome do ponto de entrada que abriu o submenu e o ícone do aplicativo.
  • A cor da tela de fundo do cabeçalho deve ser igual à cor da tela de fundo do bloco.
  • A cor da borda deve ser da mesma cor que o cabeçalho, mas 20% mais escura.
  • Exiba o conteúdo de Configurações em um fundo branco.

Adicionar conteúdo de configurações a submenus de Configurações

  • Apresente o conteúdo de cima para baixo em uma única coluna, com rolagem, se necessário. Limite a rolagem para no máximo de duas vezes a altura da tela.
  • Use os seguintes controles para configurações do aplicativo:

    • Botões de alternância: para permitir que os usuários definam valores como "habilitado" ou "desabilitado".
    • Botões de opção: para permitir que os usuários escolham um item de um conjunto de até cinco opções relacionadas exclusivas.
    • Controle de seleção: para permitir que os usuários escolham um item de um conjunto de seis ou mais itens somente texto.
    • Caixa de entrada de texto: para permitir que os usuários insiram texto. Use o tipo da caixa de entrada de texto que corresponde ao tipo de texto que você está obtendo do usuário, como um email ou senha.
    • Hiperlinks: Para conduzir o usuário para outra página dentro do aplicativo ou para um site externo. Quando um usuário clica em um hiperlink, o submenu Configurações será ignorado.
    • Botões: para permitir que os usuários iniciem uma ação imediata sem descartar o submenu Configurações atual.
  • Adicione uma mensagem descritiva se um dos controles estiver desativado. Coloque esta mensagem acima do controle desativado.
  • Anime o conteúdo e os controles como um bloco único depois que o submenu Configurações e o cabeçalho forem animados. Anime o conteúdo usando a animação enterPage ou EntranceThemeTransition com um deslocamento à esquerda de 100px.
  • Use cabeçalhos de seção, parágrafos e rótulos para ajudar a organizar e esclarecer conteúdo, se necessário.
  • Se for necessário repetir configurações, use um nível adicional da interface do usuário ou um modelo expandir/recolher, mas evite hierarquias com mais de dois níveis. Por exemplo, um aplicativo de previsão do tempo que disponibiliza configurações por cidade pode listar as cidades e deixar que o usuário toque na cidade para abrir um novo submenu ou expandir para mostrar as opções de configurações.
  • Se o carregamento de controles ou de conteúdo da Web for demorado, use um controle de progresso indeterminado para indicar aos usuários que as informações estão sendo carregadas. Para saber mais, veja Diretrizes para controles de progresso.
  • Não use botões para navegação ou para confirmar alterações. Use hiperlinks para navegar para outras páginas e, em vez de usar um botão para confirmar as mudanças, salve-as automaticamente nas configurações do aplicativo quando um usuário ignorar o submenu Configurações.

Tópicos relacionados

Para designers
Layout
Padrões de comando
Guidelines for app help
Guidelines for app bars
Para desenvolvedores (aplicativos da Windows Store em JavaScript e HTML)
Definindo o layout da interface do usuário
WinJS.UI.SettingsFlyout
SettingsCommand
ApplicationSettings
Quickstart: Adding app settings
Quickstart: Add app help
Lista de controles
Para desenvolvedores (aplicativos da Windows Store em C#/VB/C++ e XAML)
Definindo o layout da interface do usuário
Windows.UI.Xaml.Controls.SettingsFlyout
SettingsCommand
ApplicationSettings
Quickstart: Add app settings
Quickstart: Add app help
Lista de controles
Exemplos
Amostra de configurações do aplicativo

 

 

Mostrar:
© 2014 Microsoft. Todos os direitos reservados.