Este documento destaca los principios y pautas para cualquier persona que esté diseñando configuraciones de plataforma Android, configuraciones principales de GMS (Configuraciones de Google) o cualquier desarrollador que diseñe configuraciones para su aplicación de Android.
Criterios de diseño
Proporcionar una buena descripción general
Los usuarios deberían poder echar un vistazo a las pantallas de configuración y comprender todas las configuraciones individuales y sus valores.
Figura 1. Las configuraciones y sus valores actuales se presentan en la pantalla de nivel superior
Organiza elementos intuitivamente
Coloque las configuraciones de uso frecuente en la parte superior de la pantalla. Limite el número de configuraciones en una pantalla. Mostrar más de 10 a 15 elementos puede resultar abrumador. Cree menús intuitivos moviendo algunas configuraciones a una pantalla separada.
Figura 2. Las configuraciones comunes se encuentran en la parte superior de la pantalla.
Haga que la configuración sea fácil de encontrar
En algunos casos, puede resultar útil duplicar una configuración individual en dos pantallas diferentes. Diferentes situaciones pueden hacer que los usuarios cambien una configuración, por lo que incluir la configuración en varios lugares ayudará a los usuarios a encontrar este elemento.
Para configuraciones duplicadas, cree una pantalla separada para la configuración y tenga puntos de entrada desde diferentes lugares.
 |  |
Figuras 3 y 4. El "Sonido de notificación predeterminado" aparece en las pantallas "Notificación" y "Sonido".
Utilice un título y un estado claros
Haga que los títulos de sus configuraciones sean breves y significativos. Evite el uso de títulos vagos como "Configuración general". Debajo del título, muestra el estado para resaltar el valor de la configuración. Muestre los detalles específicos en lugar de simplemente describir el título.
Los títulos deben:
- Coloque primero el texto más importante de su etiqueta.
- Reformule palabras negativas como "no" o "nunca" en términos neutrales como "bloquear".
- Utilice etiquetas impersonales como "Notificaciones" en lugar de "Notificarme". Excepción: si es necesario hacer referencia al usuario para comprender la configuración, utilice la segunda persona ("usted") en lugar de la primera ("yo").
Los títulos deben evitar:
- Términos genéricos, como establecer, cambiar, editar, modificar, administrar, usar, seleccionar o elegir.
- Repetir palabras del divisor de sección o del título de la subpantalla.
- Jerga técnica.
Tipos de página
Lista de configuraciones
Este es el tipo de pantalla más común. Permite colocar múltiples configuraciones juntas. Las listas de configuración pueden ser una combinación de controles, como interruptores, menús y controles deslizantes.
Si hay muchas configuraciones en una categoría, se pueden agrupar. Consulte Agrupaciones y divisores para obtener más detalles.
Figura 5. Ejemplo de lista de configuraciones
Vista de la lista
La vista de lista se utiliza para mostrar una lista de elementos como aplicaciones, cuentas, dispositivos y más. Se pueden agregar controles para filtrar u ordenar a la pantalla.
Figura 6. Ejemplo de vista de lista
Pantalla de entidad
La pantalla de entidad se utiliza para presentar la configuración de un elemento distinto, como una aplicación, cuenta, dispositivo, red Wi-Fi, etc.
Visualmente, la entidad se muestra en la parte superior con un icono, título y subtítulo. Todas las configuraciones en esta pantalla deben estar relacionadas con esta entidad.
Figura 7. Ejemplo de pantalla de entidad utilizada en la información de la aplicación
Figura 8. Ejemplo de pantalla de Entidad utilizada en Almacenamiento
Configuración maestra
La configuración principal se utiliza mejor cuando se puede activar o desactivar una función completa, como Wi-Fi o Bluetooth. Al utilizar un interruptor en la parte superior de la pantalla, el usuario puede controlar fácilmente esta función. El uso de la configuración principal para desactivar la función desactiva todas las demás configuraciones relacionadas.
Si una función necesita una descripción de texto más larga, se puede utilizar la configuración principal, ya que este tipo de pantalla permite un texto de pie de página más largo.
Si es necesario duplicar o vincular una configuración desde varias pantallas, utilice la configuración principal. Dado que la configuración principal es una pantalla separada, evitará tener varios interruptores en diferentes lugares para la misma configuración.
Figura 9. Ejemplo de configuración principal utilizada en la pantalla de notificaciones de la aplicación; Al desactivar el interruptor principal se desactiva toda la función de esta aplicación.
Figura 10. Ejemplo de configuración principal utilizada en la pantalla de notificaciones de la aplicación con el interruptor principal desactivado
Pantalla de selección de botones de opción
Esta pantalla se utiliza cuando el usuario necesita realizar una selección para una configuración. Los botones de opción se pueden mostrar en un cuadro de diálogo o en una pantalla separada. Los botones de radio no deben usarse junto con controles deslizantes, menús o interruptores.
La pantalla de un botón de opción puede contener una imagen en la parte superior y un texto de pie de página en la parte inferior. Los botones de opción individuales pueden tener subtexto junto con un título.
Figura 11. Los botones de radio no deben usarse en la lista de configuraciones
Figura 12. Así es como se usan los botones de opción correctamente en la configuración
Componentes
Encabezamiento
A partir de Android 8.0, la barra de herramientas de acciones presenta búsqueda y ayuda junto con otras acciones relacionadas. Se desaconsejan los menús adicionales ya que es posible que los usuarios no descubran acciones ocultas en estos menús.
Para barras de herramientas sin acciones específicas de pantalla. Mostrar acciones de búsqueda y ayuda.
Figura 13. Barra de herramientas con acciones de búsqueda y ayuda
Para barras de herramientas con una acción : presente la acción antes de la búsqueda.
Figura 14. Barra de herramientas con una acción antes de las acciones de búsqueda y ayuda
Para barras de herramientas con más de una acción : considere colocar la acción principal antes de la búsqueda, mientras coloca las acciones avanzadas en el menú adicional.
Si todas las acciones son avanzadas o solo son útiles para un pequeño grupo de usuarios, considere colocar todas las acciones en el menú adicional.
Figura 15. Barra de herramientas con un menú adicional para acciones
encabezado de entidad
El encabezado de la entidad puede mostrar solo un encabezado o un encabezado con subtexto (se permiten varias líneas para el subtexto). La siguiente acción es opcional. Puedes tener un máximo de dos acciones.
Figura 16. Encabezado de entidad
La parte del ícono y el encabezado (Aplicación1) se desplazarán debajo del encabezado (Información de la aplicación).
Figura 17. El título de información de la aplicación aquí es parte de la barra de herramientas, mientras que el resto de la pantalla se desplazará debajo de ella.
Enlace de menú
El título es obligatorio. También debe mostrar un subtexto que resalte el estado de la configuración. Usar un ícono es opcional.
Intente que el texto del título sea conciso. Si los títulos son largos, pueden continuar en la siguiente línea en lugar de truncarse. No habilite menús o acciones al presionar prolongadamente.
Ejemplos:
Figura 18. Enlace de menú con icono, título y subtexto
Figura 19. Enlace de menú con título y subtexto
Figura 20. Enlace de menú solo con título
Enlace de menú con ícono, título, subtexto y un objetivo de impacto separado a la derecha
Otros objetivos táctiles deben usar el color del tema.
Figura 21. Ejemplo de menú de destino de dos toques
Enlace de menú con icono, título, subtexto y estadísticas/número/icono de alerta
Los valores numéricos como el porcentaje y el tiempo se pueden mostrar a la derecha junto con el subtexto, mientras que debajo se puede mostrar un gráfico de barras.
Por lo general, los valores numéricos se presentan a la derecha para que los usuarios puedan verlos y compararlos fácilmente.
Figura 22. Ejemplo de menú con ícono, título, estadística y gráfico
Agrupaciones y divisores
Si una pantalla tiene muchas configuraciones, se pueden agrupar y separar mediante un divisor. A diferencia de las versiones anteriores de Android, los divisores ahora se utilizan para agrupar configuraciones en un grupo, en lugar de separar configuraciones individuales.
Si las configuraciones de un grupo están estrechamente relacionadas, puede agregar un encabezado de grupo. Si utiliza un encabezado de grupo, siempre debe incluir un divisor.
Figura 23. Configuraciones agrupadas con divisores
Cambiar
Cambiar con ícono, título y subtexto
Figura 24. Cambiar con ícono, título y subtexto
Cambiar con título y subtexto
Figura 25. Cambiar con título y subtexto
Cambiar solo con título
Los títulos pueden ir acompañados de un icono a la izquierda.
Figura 26. Cambiar solo con título
Elemento de lista + interruptor
Puede combinar un elemento de la lista con un interruptor. Tocar el lado izquierdo de la línea vertical actúa como un enlace y lleva al usuario a la siguiente pantalla. El lado derecho se comporta como un interruptor estándar.
Para el elemento de la lista del lado izquierdo, es obligatorio un título. El icono y el subtexto son opcionales.
Figura 27. Elemento de lista y un interruptor
control deslizante
El icono es opcional en el control deslizante.
Figura 28. Control deslizante
Botón en pantalla
Las acciones positivas usan el color del tema, mientras que las acciones negativas son grises. Las acciones positivas pueden incluir abrir una aplicación, instalar una aplicación, agregar un elemento nuevo, etc. Las acciones negativas incluyen borrar datos, desinstalar una aplicación, eliminar elementos, etc.
Figura 29. Botones grises para "Desinstalar" y "Forzar detención"
Figura 30. Botón azul para "Encender ahora"
Divulgación progresiva (Avanzado)
Las configuraciones que no se utilizan con frecuencia deben ocultarse. Utilice "Avanzado" sólo cuando haya al menos 3 elementos para ocultar.
Aquí, el subtexto muestra los títulos de las configuraciones que están ocultas. El subtexto debe tener una sola línea. El texto adicional se trunca con puntos suspensivos.
Figura 31. Avanzado utilizado en la pantalla "Display"
Menú desplegable
Hay menús desplegables disponibles, pero lo ideal sería utilizar un cuadro de diálogo o una pantalla de selección de botones de opción. Se recomienda esto para simplificar la configuración, ya que actualmente hay tres patrones diferentes para una selección única.
Si es necesario, se pueden utilizar menús desplegables en los casos en que la configuración tenga opciones simples.
Figura 32. Menú desplegable
Caja
Utilice interruptores sobre casillas de verificación cuando sea posible.
Se pueden utilizar casillas de verificación:
- Para acciones negativas como restringir aplicaciones o bloquear un servicio.
- Para evitar tener demasiados interruptores en la pantalla.
Figura 33. Las casillas de verificación se utilizan para reducir la cantidad de cambios en esta pantalla
Enlaces
No se recomienda el uso de enlaces en la configuración. Utilice enlaces únicamente cuando sea absolutamente necesario. Los enlaces deben utilizar un color destacado sin subrayado.
Figura 34. Enlace utilizado en la configuración
Pie de página
El texto del pie de página se puede utilizar para agregar contenido explicativo. El pie de página siempre debe tener un divisor en la parte superior. El pie de página se muestra en la parte inferior de la pantalla. Los pies de página pueden tener enlaces, si es necesario.
Figura 35. Texto de pie de página
Patrones
Datos
Los datos críticos se pueden mostrar en un gráfico como un gráfico de barras o circular. Estos datos se pueden mostrar en el encabezado de la entidad. Los ejemplos incluyen datos y almacenamiento móviles.
Otros datos menos críticos se pueden presentar utilizando una vista de lista normal.
Figura 36. Ejemplo que muestra Almacenamiento
Figura 37. Ejemplo que muestra la red
Educación del usuario
Es posible que algunas funciones necesiten una explicación o educación para el usuario. Puede utilizar una animación o una imagen junto con el texto. La animación o imagen debe presentarse en la parte superior de la pantalla, mientras que el texto del pie de página se puede utilizar para agregar una explicación.
Figura 38. Configuración mediante animación y texto de pie de página
Formularios
Si el formulario tiene un campo de entrada, utilice un cuadro de diálogo normal. Esto proporciona una manera fácil para que los usuarios ingresen una sola entrada.
Sin embargo, si el formulario tiene varios campos, considere usar un cuadro de diálogo de pantalla completa . Esto proporciona más espacio en pantalla para organizar los campos en un patrón claro.
Figura 39. Formulario con un diálogo normal
Resultados de la búsqueda
Los resultados de la búsqueda muestran el título, el subtexto (si está disponible) y la ubicación de la ruta de navegación de la configuración.
Figura 40. Resultado de la búsqueda