Diretrizes para configurações de aplicativosGuidelines for app settings

As configurações do aplicativo são as partes personalizáveis pelo usuário do aplicativo do Windows acessadas por meio de uma página de configurações.App settings are the user-customizable portions of your Windows app accessed through an app settings page. 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.For example, a news reader app might let the user specify which news sources to display or how many columns to display on the screen, while a weather app could let the user choose between Celsius and Fahrenheit. Este artigo fornece recomendações e melhores práticas para criação e exibição das configurações do aplicativo.This article provides recommendations and best practices for creating and displaying app settings.

Quando fornecer uma página de configuraçõesWhen to provide a settings page

Aqui estão exemplos de opções do aplicativo que pertencem a uma página de configurações do aplicativo:Here are examples of app options that belong in an app settings page:

  • 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 previsão do tempo, a alteração das configurações da conta do aplicativo de email, as configurações de notificações ou opções de acessibilidade.Configuration options that affect the behavior of the app and don't require frequent readjustment, like choosing between Celsius or Fahrenheit as default units for temperature in a weather app, changing account settings for a mail app, settings for notifications, or accessibility options.
  • Opções que dependem das preferências do usuário, como músicas, efeitos sonoros ou temas de cores.Options that depend on the user's preferences, like music, sound effects, or color themes.
  • Informações sobre o aplicativo que não são acessadas com frequência, como a política de privacidade, a ajuda, a versão do aplicativo ou as informações de direitos autorais.App information that isn't accessed very often, such as privacy policy, help, app version, or copyright info.

Os comandos que fazem parte do fluxo de trabalho normal do aplicativo (por exemplo, alterar o tamanho do pincel em um aplicativo de desenho) não devem estar na página de configurações.Commands that are part of the typical app workflow (for example, changing the brush size in an art app) shouldn't be in a settings page. Para saber mais sobre o posicionamento de comandos, consulte Noções básicas de design de comandos.To learn more about command placement, see Command design basics.

Recomendações geraisGeneral recommendations

  • Mantenha as páginas de configurações simples e utilize controles binários (ativar/desativar).Keep settings pages simple and make use of binary (on/off) controls. Os switches de alternância geralmente são o melhor controle para uma configuração binária.A toggle switch is usually the best control for a binary setting.
  • Para configurações que permitem aos usuários escolher um item em um conjunto de até cinco opções relacionadas mutuamente exclusivas, use botões de opção.For settings that let users choose one item from a set of up to 5 mutually exclusive, related options, use radio buttons.
  • Crie um ponto de entrada para todas as configurações do aplicativo na página de configurações de seu aplicativo.Create an entry point for all app settings in your app setting's page.
  • Mantenha suas configurações simples.Keep your settings simple. Defina padrões inteligentes e mantenha o número de configurações em um mínimo.Define smart defaults and keep the number of settings to a minimum.
  • Quando um usuário muda uma configuração, o aplicativo deve refletir essa mudança imediatamente.When a user changes a setting, the app should immediately reflect the change.
  • Não inclua comandos que fazem parte do fluxo de trabalho comum do aplicativo.Don't include commands that are part of the common app workflow.

Ponto de entradaEntry point

A maneira como os usuários acessam a página de configurações do aplicativo deve ser baseada no layout do aplicativo.The way that users get to your app settings page should be based on your app's layout.

Painel de navegaçãoNavigation pane

Para um layout de painel de navegação, as configurações do aplicativo devem ser o último item na lista de opções de navegação e serem fixadas na parte inferior:For a nav pane layout, app settings should be the last item in the list of navigational choices and be pinned to the bottom:

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

Barra de aplicativosApp bar

Se você estiver usando uma barra de aplicativos ou uma barra de ferramentas, coloque o ponto de entrada de configurações como um dos últimos itens do menu de excedentes "Mais".If you're using an app bar or tool bar, place the settings entry point as one of the last items in the "More" overflow menu. Se for importante para o aplicativo ter maior capacidade de descoberta do ponto de entrada de configurações, coloque-o diretamente na barra de aplicativos, e não na área de excedentes.If greater discoverability for the settings entry point is important for your app, place the entry point directly on the app bar and not within the overflow.

ponto de entrada de configurações do aplicativo para a barra de aplicativos

HubHub

Se você estiver usando um layout de Hub, o ponto de entrada de configurações do aplicativo deve ser colocado dentro do menu de excedentes, "Mais", da barra de aplicativos.If you're using a hub layout, the entry point for app settings should be placed inside the "More" overflow menu of an app bar.

Guias/pivôsTabs/pivots

Para um layout de guias ou pivôs, não recomendamos colocar o ponto de entrada das configurações do aplicativo como um dos primeiros itens da navegação.For a tabs or pivots layout, we don't recommended placing the app settings entry point as one of the top items within the navigation. Em vez disso, o ponto de entrada de configurações do aplicativo deve ser colocado dentro do menu de excedentes, "Mais", da barra de aplicativos.Instead, the entry point for app settings should be placed inside the "More" overflow menu of an app bar.

Mestre/detalhesMaster-details

Em vez de esconder totalmente o ponto de entrada das configurações do aplicativo em um painel de detalhes mestres, faça com que ele seja o último item fixado no nível superior do painel mestre.Instead of burying the app settings entry point deeply within a master-details pane, make it the last pinned item on the top level of the master pane.

LayoutLayout

A janela de configurações do aplicativo deve ser aberta em tela inteira e preencher toda a janela.The app settings window should open full-screen and fill the whole window. Se o menu de configurações do aplicativo tiver até quatro grupos de nível superior, esses grupos deverão estar em uma coluna de cascata para baixo.If your app settings menu has up to four top-level groups, those groups should cascade down one column.

layout da página de configurações do aplicativo na área de trabalho

Configurações do "Modo de cor""Color mode" settings

Se o aplicativo permitir que os usuários escolham o modo de cor do aplicativo, apresente essas opções usando botões de opção ou uma caixa de combinação com o cabeçalho "Escolher um modo de aplicativo".If your app allows users to choose the app's color mode, present these options using radio buttons or a combo box with the header "Choose an app mode". As opções devem ser as seguintesThe options should read

  • LeveLight
  • EscuroDark
  • Padrão do WindowsWindows default

Também recomendamos adicionar um hiperlink para a página de Cores do aplicativo de Configurações do Windows, na qual os usuários poderão acessar e modificar o modo de aplicativo padrão atual.We also recommend adding a hyperlink to the Colors page of the Windows Settings app where users can access and modify the current default app mode. Use a cadeia de caracteres de "Configurações de cores do Windows" para o texto do hiperlink e ms-settings:colors para o URI.Use the string "Windows color settings" for the hyperlink text and ms-settings:colors for the URI.

Seção "Escolher um modo"

Seção Sobre e botão ComentáriosAbout section and Feedback button

É recomendável colocar a seção "Sobre este aplicativo" como uma página dedicada ou uma seção própria do seu aplicativo.We recommend placing "About this App" section in your app either as a dedicated page or in its own section. Se quiser disponibilizar um botão "Enviar comentários", coloque-o na parte inferior da página "Sobre este aplicativo".If you want a "Send Feedback" button, place that toward the bottom of the "About this App" page.

No subcabeçalho "Legal", coloque eventuais "Termos de uso" e "Política de privacidade" (devem ser botões de hiperlink com o texto em quebra automática), bem como informações jurídicas adicionais, como direitos autorais, por exemplo.Under a "Legal" subheader, place any "Terms of Use" and "Privacy Statement" (should be hyperlink buttons with wrapping text) as well as additional legal information, such as copyright.

seção "sobre este aplicativo" com o botão "fornecer comentários"

Assim que você tiver uma lista de itens que deseja incluir na página de configurações do aplicativo, considere estas diretrizes:Once you have a list of items that you want to include in your app settings page, consider these guidelines:

  • Agrupe configurações semelhantes ou relacionadas em um rótulo de configurações.Group similar or related settings under one settings label.

  • Tente manter o número total de configurações em um máximo de quatro ou cinco.Try to keep the total number of settings to a maximum of four or five.

  • Exiba as mesmas configurações, independentemente do contexto do aplicativo.Display the same settings regardless of the app context. Se algumas configurações não forem relevantes em determinado contexto, desabilite-as no submenu Configurações do aplicativo.If some settings aren't relevant in a certain context, disable those in the app settings flyout.

  • Use rótulos descritivos de uma palavra para configurações.Use descriptive, one-word labels for settings. Por exemplo, chame a configuração de "Contas" em vez de "Configurações de contas" para configurações relacionadas a contas.For example, name the setting "Accounts" instead of "Account settings" for account-related settings. Se você deseja somente uma opção para as configurações e elas não permitirem um rótulo descritivo, use "Opções" ou "Padrões".If you only want one option for your settings and the settings don't lend themselves to a descriptive label, use "Options" or "Defaults."

  • Se uma configuração se vincular diretamente à Web e não a um submenu, informe isso ao usuário com uma dica visual, como "Ajuda (online)" ou "Fóruns na Web" formatada como um hiperlink.If a setting directly links to the web instead of to a flyout, let the user know this with a visual clue, such as "Help (online)" or "Web forums" styled as a hyperlink. Procure agrupar vários links para a Web em um submenu com uma única configuração.Consider grouping multiple links to the web into a flyout with a single setting. Por exemplo, uma configuração"Sobre" pode abrir um submenu com links para os termos de uso, a política de privacidade e o suporte do aplicativo.For example, an "About" setting could open a flyout with links to your terms of use, privacy policy, and app support.

  • Combine configurações menos utilizadas em uma única entrada para que as configurações mais comuns possam ter sua própria entrada.Combine less-used settings into a single entry so that more common settings can each have their own entry. Coloque conteúdo ou links que incluam somente informações em uma configuração "Sobre".Put content or links that only contain information in an "About" setting.

  • Não duplique a funcionalidade no painel "Permissões".Don't duplicate the functionality in the "Permissions" pane. O Windows fornece esse painel por padrão e não é possível modificá-lo.Windows provides this pane by default and you can't modify it.

  • Adicionar conteúdo de configurações a submenus ConfiguraçõesAdd settings content to Settings flyouts

  • Apresente o conteúdo de cima para baixo em uma única coluna, com rolagem, se necessário.Present content from top to bottom in a single column, scrollable if necessary. Limite a rolagem para no máximo de duas vezes a altura da tela.Limit scrolling to a maximum of twice the screen height.

  • Use os seguintes controles para configurações do aplicativo:Use the following controls for app settings:

    • Switches de alternância: para permitir que os usuários definam valores como "ativado" ou "desativado".Toggle switches: To let users set values on or off.
    • Botões de opção: para permitir que os usuários escolham um item dentre um conjunto de até cinco opções relacionadas e mutuamente exclusivas.Radio buttons: To let users choose one item from a set of up to 5 mutually exclusive, related options.
    • Caixa de entrada de texto: para permitir que os usuários insiram texto.Text input box: To let users enter text. 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.Use the type of text input box that corresponds to the type of text you're getting from the user, such as an email or password.
    • Hiperlinks: para direcionar o usuário a outra página dentro do aplicativo ou a um site externo.Hyperlinks: To take the user to another page within the app or to an external website. Quando um usuário clicar em um hiperlink, o submenu Configurações será ignorado.When a user clicks a hyperlink, the Settings flyout will be dismissed.
    • Botões: para permitir que os usuários iniciem uma ação imediata sem ignorar o submenu Configurações atual.Buttons: To let users initiate an immediate action without dismissing the current Settings flyout.
  • Adicione uma mensagem descritiva se um dos controles estiver desativado.Add a descriptive message if one of the controls is disabled. Coloque esta mensagem acima do controle desativado.Place this message above the disabled control.

  • Anime o conteúdo e os controles como um bloco único depois que o submenu Configurações e o cabeçalho forem animados.Animate content and controls as a single block after the Settings flyout and header have animated. Anime o conteúdo usando a animação enterPage ou EntranceThemeTransition com um deslocamento à esquerda de 100px.Animate content using the enterPage or EntranceThemeTransition animations with a 100px left offset.

  • Use cabeçalhos de seção, parágrafos e rótulos para ajudar a organizar e esclarecer conteúdo, se necessário.Use section headers, paragraphs, and labels to aid organize and clarify content, if necessary.

  • 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.If you need to repeat settings, use an additional level of UI or an expand/collapse model, but avoid hierarchies deeper than two levels. 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.For example, a weather app that provides per-city settings could list the cities and let the user tap on the city to either open a new flyout or expand to show the settings options.

  • 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.If loading controls or web content takes time, use an indeterminate progress control to indicate to users that info is loading. Para obter mais informações, consulte Diretrizes de controles de progresso.For more info, see Guidelines for progress controls.

  • Não use botões para navegação ou para confirmar alterações.Don't use buttons for navigation or to commit changes. 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.Use hyperlinks to navigate to other pages, and instead of using a button to commit changes, automatically save changes to app settings when a user dismisses the Settings flyout.