Directrices para la configuración de una aplicación

La configuración de la aplicación es la parte personalizable por el usuario de la aplicación de Windows, a la que se accede a través de una página de configuración dedicada. 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. En este artículo se proporcionan recomendaciones y procedimientos recomendados para crear y mostrar la configuración de la aplicación en aplicaciones WinUI.

Cuándo se debe proporcionar una página de configuración

Estos son ejemplos de opciones de aplicación que pertenecen a una página de configuración de la aplicación:

• Opciones de configuración que afectan al comportamiento de la aplicación y no requieren reajuste frecuente, como elegir entre Celsius o Fahrenheit como unidades predeterminadas para la temperatura en una aplicación meteorológica, cambiar la configuración de la cuenta para una aplicación de correo, la configuración de las notificaciones o las opciones de accesibilidad.
• Opciones que dependen de las preferencias del usuario, como música, efectos de sonido o temas de color.
• Información de la aplicación a la que no se accede con mucha frecuencia, como la directiva de privacidad, la ayuda, la versión de la aplicación o la información de copyright.

Los comandos que forman parte del flujo de trabajo de aplicación típico (por ejemplo, cambiar el tamaño del pincel en una aplicación de arte) no deben estar en una página de configuración. Para obtener más información sobre la selección de ubicación de comandos, consulte Conceptos básicos de diseño de comandos.

Recomendaciones generales

• Mantenga las páginas de configuración simples y use controles binarios (activados y desactivados). Un interruptor de alternancia suele ser el mejor control para una configuración binaria.
• Para la configuración que permite a los usuarios elegir un elemento de un conjunto de hasta 5 opciones mutuamente excluyentes, relacionadas, use botones de radio.
• Cree un punto de entrada para toda la configuración de la aplicación en la página de configuración de la aplicación.
• Mantenga la configuración sencilla. Defina los valores predeterminados inteligentes y mantenga el número de configuraciones como mínimo.
• Cuando un usuario cambia una configuración, la aplicación debe reflejar inmediatamente el cambio.
• No incluya comandos que formen parte del flujo de trabajo de la aplicación común.

Punto de entrada

La forma en que los usuarios acceden a la página de configuración de la aplicación deben basarse en el diseño de la aplicación.

Panel de navegación

Para un diseño NavigationView , la configuración de la aplicación debe ser el último elemento de la lista de opciones de navegación y anclarse a la parte inferior. NavigationView proporciona un elemento de configuración integrado para este propósito: establezca la propiedad IsSettingsVisible en true para mostrar una entrada Configuración en la parte inferior del panel de navegación automáticamente.

Barra de comandos

Si usa una barra de comandos o una barra de herramientas, coloque el punto de entrada de configuración como uno de los últimos elementos del menú de desbordamiento "Más". Si es importante una mayor detectabilidad del punto de entrada de configuración para tu aplicación, coloca el punto de entrada directamente en la barra de comandos y no dentro del desbordamiento.

Diseño

La página de configuración de la aplicación debe abrirse en pantalla completa y rellenar toda la ventana. Use un diseño desplazable con un ancho máximo restringido (alrededor de 1000–1100 px) para que el contenido permanezca legible en pantallas anchas. Agrupa la configuración relacionada con los encabezados de sección mediante el estilo de texto BodyStrong .

Use los controles SettingsCard y SettingsExpander de la Windows Community Toolkit para crear la página de configuración. Estos controles proporcionan un diseño coherente y accesible con un encabezado, una descripción, un icono y un control de acción alineados al lado derecho de la tarjeta.

Para obtener ejemplos de implementación completos, consulte la página de configuración de la Galería WinUI y el ejemplo Windows Community Toolkit SettingsControls.

TarjetaDeConfiguración

Utilice una SettingsCard para los ajustes individuales. Cada tarjeta tiene un encabezado, una descripción opcional, un HeaderIcon opcional y un control de acción (como , ToggleSwitchComboBoxo Button) colocado como contenido de la tarjeta. Establecer la IsClickEnabled propiedad en true hace que toda la tarjeta sea clicable, lo que resulta útil para las entradas de estilo de navegación.

Expansor de Configuración

Use un SettingsExpander cuando una configuración tenga subopciones que se deban mostrar a petición. El expansor muestra un control de acción principal en la fila de encabezado y elementos adicionales SettingsCard dentro de la Items colección. Esto mantiene la página compacta mientras sigue apareciendo opciones avanzadas. Evite anidar expansores a más de un nivel de profundidad.

Configuración del tema de la aplicación

Si la aplicación permite a los usuarios elegir el modo de color, presente estas opciones mediante un cuadro combinado dentro de SettingsCard. Las opciones deben leer:

• Ligero
• Oscuro
• Usar la configuración del sistema

También puede agregar un hipervínculo a la página Colores de Windows Configuración donde los usuarios pueden acceder y modificar el modo de aplicación predeterminado actual. Utilice la cadena "Configuración de color de Windows" como el texto del hipervínculo y ms-settings:colors para el URI.

Acerca de la sección

Se recomienda colocar una sección Acerca de en la parte inferior de la página de configuración usando un SettingsExpander. La fila de encabezado contraída debe mostrar el nombre de la aplicación, el icono y el número de versión. El área expandida puede incluir:

• Vínculo al repositorio o sitio web de la aplicación.
• Enlace para archivar errores o solicitar características.
• Lista de dependencias y referencias como controles HyperlinkButton .
• Información legal, como un aviso de copyright, términos de uso y vínculos de declaración de privacidad.

Contenido de la página recomendado

Una vez que tenga una lista de elementos que desea incluir en la página de configuración de la aplicación, tenga en cuenta estas directrices:

• Agrupa una configuración similar o relacionada en un encabezado de sección.

• Intente mantener el número total de configuraciones en un máximo de cuatro o cinco.

• Muestra la misma configuración independientemente del contexto de la aplicación. Si algunas opciones de configuración no son relevantes en un contexto determinado, desactive el SettingsCard estableciendo IsEnabled a false.

• Use etiquetas de una sola palabra y descriptivas para los encabezados de configuración. Por ejemplo, asigne un nombre a la configuración "Cuentas" en lugar de "Configuración de la cuenta" para la configuración relacionada con la cuenta.

• Si una configuración se vincula directamente a la web, use un SettingsCard con IsClickEnabled="True" clicable y un icono de acción apropiado para indicar la navegación externa.

• Combine la configuración menos usada en un SettingsExpander para que cada configuración común pueda tener su propio SettingsCard. Coloque contenido o vínculos que solo contengan información en una sección "Acerca de".

• Presente contenido de arriba a abajo en una sola columna, desplazable si es necesario.

• Use los siguientes controles para la configuración de la aplicación:

  • Interruptores de palanca: para permitir que los usuarios establezcan valores en encendido o apagado.
  • Botones de radio: para permitir que los usuarios elijan un elemento de un conjunto de hasta 5 opciones mutuamente excluyentes y relacionadas.
  • Cuadros combinados: para permitir que los usuarios elijan entre un conjunto de opciones en una lista desplegable compacta.
  • Cuadros de entrada de texto: para permitir que los usuarios escriban texto. Use el tipo de cuadro de entrada de texto que corresponde al tipo de texto que recibe del usuario, como un correo electrónico o una contraseña.
  • Hipervínculos: para llevar al usuario a otra página dentro de la aplicación o a un sitio web externo.
  • Botones: para permitir que los usuarios inicien una acción inmediata.

• Agregue un mensaje descriptivo si uno de los controles está deshabilitado. Use la Description propiedad de SettingsCard para explicar por qué la configuración no está disponible.

• Cuando un usuario cambia una configuración, la aplicación debe reflejar inmediatamente el cambio; no necesite un botón de confirmación.

Artículos relacionados

• SettingsCard y SettingsExpander (Windows Community Toolkit)
• Conceptos básicos del diseño de los comandos
• Directrices para controles de progreso
• Almacenar y recuperar datos de la aplicación