Directrices para la configuración de una aplicaciónGuidelines for app settings

La configuración de la aplicación es la parte que puede personalizar el usuario de una aplicación de Windows a la que se accede mediante una página de configuración de la aplicación.App settings are the user-customizable portions of your Windows app accessed through an app settings page. Por ejemplo, una aplicación del lector de noticias puede permitir al usuario especificar qué fuentes de noticias o cuántas columnas se deben mostrar en la pantalla, mientras que una aplicación meteorológica podría permitir al usuario elegir entre Celsius y 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. En este artículo se proporcionan los procedimientos recomendados para crear y mostrar la configuración de aplicaciones.This article provides recommendations and best practices for creating and displaying app settings.

Cuándo se debe proporcionar una página de configuraciónWhen to provide a settings page

Estos son ejemplos de opciones de la aplicación que pertenecen a una página de configuración de la aplicación:Here are examples of app options that belong in an app settings page:

  • Las opciones de configuración que afectan al comportamiento de la aplicación y que no se ajustan con frecuencia, como cuando eliges entre Celsius o Fahrenheit como unidades de temperatura predeterminadas en una aplicación del tiempo, cuando cambias la configuración de una cuenta para una aplicación de correo, la configuración de las notificaciones o las opciones de accesibilidad.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.
  • Opciones que dependen de las preferencias del usuario, como música, efectos de sonido o temas de colores.Options that depend on the user's preferences, like music, sound effects, or color themes.
  • La información sobre la aplicación a la que no se tiene acceso muy a menudo, como la directiva de privacidad, la ayuda, la versión de la aplicación o la información de copyright.App information that isn't accessed very often, such as privacy policy, help, app version, or copyright info.

Los comandos que forman parte del flujo de trabajo habitual de la aplicación (por ejemplo, cambiar el tamaño del pincel en una aplicación de dibujo) no deben estar en una página de configuración.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 obtener información sobre la colocación de los comandos, consulta los Conceptos básicos del diseño de comandos.To learn more about command placement, see Command design basics.

Recomendaciones generalesGeneral recommendations

  • Simplificar las páginas de configuración y hacer uso de los controles binarios (encendido/apagado).Keep settings pages simple and make use of binary (on/off) controls. Un modificador para alternar suele ser el mejor control para una configuración binaria.A toggle switch is usually the best control for a binary setting.
  • Para ofrecer una configuración que permita a los usuarios elegir un elemento de un conjunto de hasta 5 opciones relacionadas que sean mutuamente excluyentes, usa botones de radio.For settings that let users choose one item from a set of up to 5 mutually exclusive, related options, use radio buttons.
  • Crea un punto de entrada para todas las configuraciones de tu página de configuración de la aplicación.Create an entry point for all app settings in your app setting's page.
  • Haz que tu configuración sea sencilla.Keep your settings simple. Define valores predeterminados inteligentes y reduce el número de configuraciones tanto como sea posible.Define smart defaults and keep the number of settings to a minimum.
  • Cuando un usuario cambia una opción de configuración, la aplicación debería reflejar el cambio inmediatamente.When a user changes a setting, the app should immediately reflect the change.
  • No incluyas comandos que formen parte del flujo de trabajo común de la aplicación.Don't include commands that are part of the common app workflow.

Punto de entradaEntry point

La manera en la que los usuarios acceden a la página de configuración de la aplicación debe basarse en el diseño de la aplicación.The way that users get to your app settings page should be based on your app's layout.

Panel de navegaciónNavigation pane

Para el diseño del panel de navegación, el elemento Configuración de la aplicación debe ser el último de la lista de navegación de opciones y estar anclado en la 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:

punto de entrada de la configuración de la aplicación para el panel de navegación

Barra de la aplicaciónApp bar

Si usa una barra de aplicaciones o barra de herramientas, coloque el punto de entrada de configuración como uno de los últimos elementos en el menú de desbordamiento "Más".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. Si es importante tener una mayor detectabilidad del punto de entrada de configuración de la aplicación, colócalo directamente en una barra de la aplicación y no en el desbordamiento.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.

punto de entrada de la configuración de la aplicación para la barra de la aplicación

HubHub

Si usas un diseño de navegación centralizada, el punto de entrada de la configuración de la aplicación debe colocarse en el menú de desbordamiento "Más" de una barra de la aplicación.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.

Pestañas y tablas dinámicasTabs/pivots

Para un diseño de pestañas o tablas dinámicas, no se recomienda colocar el punto de entrada de la configuración de la aplicación como uno de los elementos principales de la navegación.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. En su lugar, el punto de entrada de la configuración de la aplicación debe colocarse en el menú de desbordamiento "Más" de una barra de la aplicación.Instead, the entry point for app settings should be placed inside the "More" overflow menu of an app bar.

Detalles principalesMaster-details

En lugar de esconder el punto de entrada de la configuración de la aplicación en lo más profundo de un panel de detalles maestro, conviértelo en el último elemento anclado en el nivel superior del panel maestro.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.

DiseñoLayout

La ventana de configuración de la aplicación debe abrirse en pantalla completa y llenar toda la ventana.The app settings window should open full-screen and fill the whole window. Si el menú de configuración de la aplicación tiene hasta cuatro grupos de nivel superior, estos grupos deben estar en cascada descendente en una columna.If your app settings menu has up to four top-level groups, those groups should cascade down one column.

diseño de la página de configuración de la aplicación en un equipo de escritorio

Configuración de "Modo de color""Color mode" settings

Si la aplicación permite a los usuarios elegir el modo de color de la aplicación, presenta estas opciones usando botones de radio o un cuadro combinado con el encabezado "Elegir un modo de aplicación".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". En las opciones debe haber lo siguiente:The options should read

  • LigeroLight
  • OscuroDark
  • Valor predeterminado de WindowsWindows default

También te recomendamos que agregues un hipervínculo a la página Colores de la aplicación Configuración de Windows, en que los usuarios puedan acceder al modo de aplicación predeterminado actual y modificarlo.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. Usa la cadena "Configuración de color de Windows" para el texto del hipervínculo.Use the string "Windows color settings" for the hyperlink text.

Sección "Elegir un modo"

Sección Acerca de y botón ComentariosAbout section and Feedback button

Te recomendamos que coloques la sección "Acerca de esta aplicación" en la aplicación como una página dedicada o en su propia sección.We recommend placing "About this App" section in your app either as a dedicated page or in its own section. Si quieres usar un botón "Enviar comentarios", colócalo en la parte inferior de la página "Acerca de esta aplicación".If you want a "Send Feedback" button, place that toward the bottom of the "About this App" page.

En un subtítulo "Condiciones de uso", coloca los "Términos de uso" y la "Declaración de privacidad" (deberían ser botones de hipervínculo con ajuste de texto), así como información legal adicional, como el copyright.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.

Sección "Acerca de esta aplicación" con un botón "Enviar comentarios"

Cuando tengas una lista de elementos que quieras incluir en la página de configuración de la aplicación, ten en cuenta las siguientes directrices:Once you have a list of items that you want to include in your app settings page, consider these guidelines:

  • Agrupar opciones relacionadas o similares en una etiqueta de configuración.Group similar or related settings under one settings label.

  • Intenta limitar el número total de opciones de configuración a un máximo de cuatro o cinco.Try to keep the total number of settings to a maximum of four or five.

  • Muestra las mismas opciones de configuración sin importar el contexto de la aplicación.Display the same settings regardless of the app context. Si algunas opciones de configuración no son relevantes en un determinado contexto, deshabilítalas en el control flotante de la configuración de la aplicación.If some settings aren't relevant in a certain context, disable those in the app settings flyout.

  • Usa etiquetas descriptivas de una sola palabra para la configuración.Use descriptive, one-word labels for settings. Por ejemplo, denomina a la configuración "Cuentas" en lugar de "Configuración de cuentas" en el caso de la configuración relacionada con la cuenta.For example, name the setting "Accounts" instead of "Account settings" for account-related settings. Si solo quieres una opción para la configuración y las opciones no se prestan para una etiqueta descriptiva, usa "Opciones" o "Valores predeterminados".If you only want one option for your settings and the settings don't lend themselves to a descriptive label, use "Options" or "Defaults."

  • Si una opción de configuración vincula directamente a la web en lugar de a un control flotante, házselo saber al usuario con una pista visual, como, "Ayuda (en línea)" o "Foros Web" con estilo de hipervínculo.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. Contempla agrupar varios vínculos de la Web en un control flotante con una sola opción de configuración.Consider grouping multiple links to the web into a flyout with a single setting. Por ejemplo, una opción de configuración "Acerca de" podría abrir un control flotante con vínculos a los términos de uso, la política de privacidad y el soporte técnico de la aplicación.For example, an "About" setting could open a flyout with links to your terms of use, privacy policy, and app support.

  • Combina las opciones menos usadas en una sola entrada para que las opciones más habituales puedan tener su propia entrada.Combine less-used settings into a single entry so that more common settings can each have their own entry. Coloca el contenido o los vínculos que solo contienen información en la opción de configuración "Acerca de".Put content or links that only contain information in an "About" setting.

  • No dupliques la funcionalidad en el panel "Permisos".Don't duplicate the functionality in the "Permissions" pane. Windows proporciona este panel de forma predeterminada y no puedes modificarlo.Windows provides this pane by default and you can't modify it.

  • Agregar contenido de configuración a los controles flotantes ConfiguraciónAdd settings content to Settings flyouts

  • Presenta el contenido de arriba a abajo en una sola columna, desplazable si fuera necesario.Present content from top to bottom in a single column, scrollable if necessary. Limita el desplazamiento a un máximo del doble del alto de pantalla.Limit scrolling to a maximum of twice the screen height.

  • Usa los controles siguientes para la configuración de la aplicación:Use the following controls for app settings:

    • Modificadores para alternar: para permitir que los usuarios activen o desactiven valores.Toggle switches: To let users set values on or off.
    • Botones de radio: para permitir a los usuarios elegir un elemento de un conjunto de hasta 5 opciones relacionadas que sean mutuamente excluyentes.Radio buttons: To let users choose one item from a set of up to 5 mutually exclusive, related options.
    • Cuadro de entrada de texto: para permitir que los usuarios escriban texto.Text input box: To let users enter text. Usa el tipo de cuadro de texto que corresponda al tipo de texto que obtienes del usuario, como correo electrónico o contraseña.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.
    • Hipervínculos: para dirigir a los usuarios a otra página dentro de la aplicación o a un sitio web externo.Hyperlinks: To take the user to another page within the app or to an external website. Cuando un usuario haga clic en un hipervínculo, el control flotante de configuración se descarta.When a user clicks a hyperlink, the Settings flyout will be dismissed.
    • Botones: para permitir que los usuarios inicien una acción inmediata sin descartar el control flotante de configuración actual.Buttons: To let users initiate an immediate action without dismissing the current Settings flyout.
  • Agrega un mensaje descriptivo si se desactiva uno de los controles.Add a descriptive message if one of the controls is disabled. Coloca este mensaje por encima del control deshabilitado.Place this message above the disabled control.

  • Anima controles y contenido como un solo bloque después de que se hayan animado el control flotante de configuración y el encabezado.Animate content and controls as a single block after the Settings flyout and header have animated. Anima el contenido mediante las animaciones enterPage o EntranceThemeTransition, con un desplazamiento izquierdo de 100 píxeles.Animate content using the enterPage or EntranceThemeTransition animations with a 100px left offset.

  • Usa encabezados de sección, párrafos y etiquetas para ayudar a organizar y aclarar el contenido, si fuera necesario.Use section headers, paragraphs, and labels to aid organize and clarify content, if necessary.

  • Si necesitas repetir la configuración, usa un nivel adicional de interfaz de usuario o un modelo de expandir/contraer, pero evita las jerarquías de más de dos niveles.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 ejemplo, una aplicación sobre el clima que proporciona una configuración por ciudad podría enumerar las ciudades y permitir que el usuario pulse sobre la ciudad para abrir un control flotante nuevo o expandirse para mostrar las opciones de configuración.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.

  • Si la carga de controles o de contenido web tarda, usa un control de progreso indeterminado para indicar al usuario que se está cargando la información.If loading controls or web content takes time, use an indeterminate progress control to indicate to users that info is loading. Para obtener más información, consulta Directrices sobre controles de progreso.For more info, see Guidelines for progress controls.

  • No uses botones para la navegación o para confirmar cambios.Don't use buttons for navigation or to commit changes. Usa hipervínculos para ir a otras páginas y, en lugar de usar un botón para confirmar los cambios, guárdalos automáticamente en la configuración de la aplicación cuando el usuario descarte el control flotante de configuración.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.