Google se compromete a avanzar en la equidad racial para las comunidades negras. Ver cómo.
Se usó la API de Cloud Translation para traducir esta página.
Switch to English

Directrices de diseño Android Configuraciones

Este documento destaca los principios y directrices para cualquier persona que esté ya sea diseñando configuración de la plataforma Android, GMS ajustes básicos (Ajustes de Google) o cualquier desarrolladores el diseño de la configuración de su aplicación para Android.

Criterios de diseño

Proporcionar una visión general buena

Los usuarios deben ser capaces de echar un vistazo a las pantallas de configuración y entender todos los valores individuales y sus valores.

Figura 1. Ajustes y sus valores actuales se presentan en la pantalla de nivel superior

Organizar los elementos de forma intuitiva

Coloque los ajustes utilizados con frecuencia en la parte superior de la pantalla. Limitar el número de ajustes en una pantalla. Mostrando más de 10-15 artículos puede ser abrumador. Crear menús intuitivos moviendo algunos ajustes a una pantalla separada.

Configuración de la Figura 2. comunes son en la parte superior de la pantalla

Para hacer ajustes fáciles de encontrar

En algunos casos, puede ser útil para duplicar un ajuste individual en dos pantallas diferentes. Diferentes situaciones pueden desencadenar los usuarios cambiar un ajuste, por lo que incluir el ajuste en varios lugares ayudará a los usuarios a encontrar este artículo.

Para la configuración de duplicados, crear una pantalla separada para el ajuste y tienen puntos de entrada de diferentes lugares.

Figura 3 y 4. Aparece "sonido de notificación por defecto" en tanto la "notificación" y las pantallas de "sonido"

Utilice un título y el estado clara

Hacen su configuración títulos breves y significativa. Evitar el uso de títulos vagos como "Configuración general". Debajo del título, mostrar el estado para resaltar el valor de la configuración. Mostrar los detalles específicos en lugar de limitarse a describir el título.

Los títulos deben:

  • Poner el texto más importante de su primera etiqueta.
  • Rephrase palabras negativas como "no" o "no" en términos neutros como el "bloque".
  • Utilice etiquetas impersonales como "Notificaciones" en lugar de "Notificar". Excepción: Si se refiere a que el usuario es necesaria para la comprensión de la configuración, usar la segunda persona ( "usted") en lugar de la primera persona ( "I").

Los títulos deben evitar:

  • Los términos genéricos, tales como establecer, cambiar, editar, modificar, gestionar, utilizar, seleccionar, o elegir.
  • La repetición de palabras de la sección de divisor o título subpantalla.
  • Jerga técnica.

tipos de página

lista de ajustes

Este es el tipo más común de la pantalla. Permite múltiples configuraciones para ser colocados juntos. listas de ajustes pueden ser una mezcla de los controles, como interruptores, menús y controles deslizantes.

Si hay muchos ajustes en una categoría, que se pueden agrupar juntos. Ver Agrupación y divisores para más detalles.

Figura 5. Ejemplo de lista de ajustes

Vista de la lista

La vista de lista se utiliza para mostrar una lista de elementos como aplicaciones, cuentas, dispositivos, y mucho más. Controles para filtrar u ordenar se pueden agregar a la pantalla.

Figura 6. Ejemplo de vista Lista

pantalla de entidad

La pantalla entidad se utiliza para la configuración actual de un elemento distinto, como una aplicación, cuenta, equipos, redes Wi-Fi, etc.

Visualmente, la entidad se muestra en la parte superior con un icono, el título y subtítulo. Todos los parámetros de esta pantalla deben estar relacionados con esta entidad.

Figura 7. Ejemplo de pantalla de Entidad utilizado en App info

Figura 8. Ejemplo de pantalla de Entidad utiliza en almacenamiento

configuración maestro

La configuración maestra se utiliza mejor cuando una función entera puede ser activada o desactivada, tales como Wi-Fi o Bluetooth. Mediante el uso de un interruptor en la parte superior de la pantalla, el usuario puede controlar fácilmente esta característica. Usando la configuración maestra para desactivar la función desactiva todos los otros ajustes relacionados.

Si una característica necesita una descripción de texto más largo, el ajuste principal se puede utilizar como pantalla de este tipo permite el texto del pie más largo.

Si un ajuste tiene que ser duplicado o vinculados a partir de múltiples pantallas, utilice la configuración maestra. Puesto que el ajuste principal es una pantalla separada, evitará tener múltiples interruptores en diferentes lugares por el mismo entorno.

Figura 9. Ejemplo de configuración maestro usado en pantalla de la aplicación notificaciones; apagar el interruptor principal a su vez, de la totalidad de la característica de esta aplicación

Figura 10. Ejemplo de maestro ajuste utilizado en pantalla de la aplicación notificaciones con el maestro de palanca desactivado

pantalla de selección del botón de opción

Esta pantalla se utiliza cuando el usuario tiene que hacer una selección de una configuración. Los botones de radio o bien se pueden mostrar en un cuadro de diálogo o en una pantalla separada. Los botones de radio no deben usarse junto con deslizadores, menús o interruptores.

Una pantalla de botón de radio puede contener una imagen en el texto superior y pie de página en la parte inferior. Los botones de radio individuales pueden tener subtexto junto con un título.

Figura 11. Los botones de radio no se deben utilizar en la lista de ajustes

Figura 12. Esto es cómo usar correctamente los botones de radio en entornos

componentes

A partir de Android 8.0, la acción de la barra de herramientas de búsqueda y presenta ayuda junto con otras acciones relacionadas. menús de desbordamiento no se animan ya que los usuarios no pueden descubrir las acciones ocultas en estos menús.

Para barras de herramientas sin acciones específicas de la pantalla. Mostrar las acciones de búsqueda y ayuda.

Figura 13. Barra de herramientas con las acciones de búsqueda y ayuda

Para barras de herramientas con una sola acción: Presentar la acción antes de la búsqueda.

Figura 14. Barra de herramientas con una acción antes de que las acciones de búsqueda y ayuda

Para barras de herramientas con más de 1 acción: Considere colocar la acción primaria antes de búsqueda, mientras que poner acciones avanzadas en el menú de desbordamiento.

Si todas las acciones son avanzado o sólo es útil para un pequeño grupo de usuarios, considerar la colocación de todas las acciones en el menú de desbordamiento.

Figura 15. Barra de herramientas con un menú adicional para las acciones

cabecera entidad

La cabecera entidad sólo puede mostrar una partida, o de encabezamiento con subtexto (múltiples líneas están permitidos para el subtexto). La acción de abajo es opcional. Puede tener un máximo de dos acciones.

Cabecera Figura 16. Entidad

El icono y el rumbo parte (App1) se desplazará bajo la cabecera (Información de la aplicación).

Figura 17. Datos de Aplicación título aquí es parte de la barra de herramientas, mientras que el resto de la pantalla se desplazará debajo de ella

El título es obligatorio. También debe mostrar subtexto que pone de relieve el estado de la configuración. El uso de un icono es opcional.

Trate de mantener título conciso texto. Si los títulos son largos, pueden continuar en la línea siguiente en lugar de ser truncado. No permitir que los menús o las acciones de pulsación larga.

Ejemplos:

Figura 18. Menú de enlace con el icono, el título y subtexto

Figura enlace 19. Menú con título y subtexto

Enlace del menú Figura 20. con título solamente

Enlace del menú con el icono, el título, subtexto y un objetivo golpe por separado a la derecha

Otros objetivos de emisión deberían utilizar el color del tema.

Figura 21. Ejemplo de menú objetivo de los dos grifo

Enlace del menú con el icono, el título, subtexto y estadísticas / número / icono de alerta

Los valores numéricos como porcentaje y el tiempo se pueden mostrar en la derecha junto con el trasfondo, mientras que un gráfico de barras que puede ser mostrado a continuación.

Por lo general, los valores numéricos se presentan a la derecha para que los usuarios pueden fácilmente vistazo y compararlos.

Figura 22. Ejemplo de menú con el icono, título, stat y el gráfico

Agrupación y divisores

Si una pantalla tiene muchos ajustes, pueden ser agrupados y separados por un divisor. A diferencia de las versiones anteriores de Android, divisores ahora se utilizan para agrupar los ajustes en un grupo, en lugar de separar los ajustes individuales.

Si la configuración de un grupo están estrechamente relacionados, se puede añadir una cabecera de grupo. Si utiliza una cabecera de grupo, siempre debe incluir un divisor.

Figura Ajustes 23. agrupados con los divisores

Cambiar

Interruptor con el icono, el título y subtexto

Figura 24. Interruptor con el icono, el título y subtexto

Switch con título y subtexto

Figura 25. Interruptor con título y subtexto

Interruptor con título solamente

Los títulos pueden ser acompañados por un icono de la izquierda.

Figura 26. Interruptor con título solamente

Interruptor artículo + lista

Se puede combinar un elemento de la lista con un interruptor. Al tocar en la parte izquierda de la línea vertical que actúa como un enlace y lleva al usuario a la pantalla siguiente. Se comporta el lado derecho como un interruptor estándar.

Para el elemento de la lista en el lado izquierdo, un título es obligatorio. El icono y el trasfondo son opcionales.

Elemento Figura Lista 27. y un conmutador

deslizador

El icono es opcional en el control deslizante.

Figura 28. deslizante

Botón en pantalla

Las acciones positivas usan el color del tema, mientras que las acciones negativas son de color gris. Las acciones positivas pueden incluir abrir una aplicación, la instalación de una aplicación, la adición de un nuevo elemento, etc. Las acciones negativas incluyen la limpieza de los datos, la desinstalación de una aplicación, la eliminación de elementos, etc.

Figura 29. gris botones para "Desinstalar" y "Forzar detención"

Figura 30. Botón azul de "Activar ahora"

divulgación progresiva (avanzado)

Los ajustes que no se utilizan con frecuencia deben ser ocultados. Use "avanzada" sólo cuando hay al menos 3 elementos de ocultar.

Aquí, el subtexto muestra los títulos de los ajustes que están ocultos. El subtexto debe ser sólo una línea. El texto adicional se trunca con una elipsis.

Figura 31. avanzada utiliza en el "Display '" pantalla

Menús desplegables están disponibles, pero lo ideal es que utilice una pantalla de selección de botón de diálogo o la radio en su lugar. Esta configuración se recomienda simplificar, en la actualidad hay tres patrones diferentes para la selección individual.

Si es necesario, los menús desplegables se pueden utilizar en los casos en que el ajuste tiene opciones simples.

Figura 32. Menú desplegable

Caja

Uso conmuta casillas de verificación cuando sea posible.

Las casillas de verificación se pueden utilizar:

  • Para las acciones negativas como la restricción de aplicaciones o bloquear un servicio.
  • Para evitar tener demasiados interruptores en la pantalla.

Figura 33. Las casillas de verificación se utilizan para reducir el número de conmutadores en esta pantalla

No se recomienda el uso de enlaces en configuración. Sólo utilice los enlaces cuando sea absolutamente necesario. Los enlaces deben usar un acento de color sin ningún subrayado.

Figura 34. Enlace utilizado en entornos

Texto de pie 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. Pies de página pueden tener enlaces, si es necesario.

Texto Figura 35. Pie de página

Patrones

Datos

Los datos críticos se pueden mostrar en un gráfico como un gráfico de barras o pastel. Estos datos se pueden mostrar en la cabecera entidad. Los ejemplos incluyen datos móviles y de almacenamiento.

Otros datos menos críticos pueden ser presentadas mediante el uso de una vista de lista regular.

Figura 36. Ejemplo muestra el almacenamiento

Figura 37. Ejemplo mostrando Red

La formación de usuarios

Algunas características pueden necesitar una explicación o la educación del usuario. Se puede utilizar una animación o imagen junto con el texto. La animación o imagen se deben presentar en la parte superior de la pantalla, mientras que el texto de pie de página se puede utilizar para agregar una explicación.

Figura 38. Ajuste utilizando la animación y el pie de página de texto

formas

Si la forma tiene un campo de entrada, utilice un cuadro de diálogo normal. Esto proporciona una manera fácil para que los usuarios entran en una sola entrada.

Sin embargo, si el formulario tiene varios campos, considerar el uso de un diálogo de pantalla completa . Esto proporciona más espacio de pantalla para organizar los campos en un patrón claro.

Figura Forma 39. con un cuadro de diálogo normal de

Resultados de la búsqueda

Resultados de la búsqueda muestran el título, subtexto (si está disponible), y la ubicación de ruta de navegación de la configuración.

Figura 40. Resultado de la búsqueda