Los widgets son un componente fundamental para personalizar la pantalla principal de un usuario. A menudo, pueden ayudar a los usuarios a lograr un recorrido clave para una app con un solo toque o proporcionar un resumen rápido de los datos más importantes de una app. También se pueden personalizar para adaptarse a las necesidades del usuario y a las preferencias individuales.
La calidad de un widget puede afectar la participación de los usuarios con el contenido y las funciones de tu app. Existen tres niveles principales de calidad de widgets:
- Nivel 3: Baja calidad: No cumplen con el nivel mínimo de calidad ni proporcionan una experiencia del usuario excelente.
- Nivel 2: Estándar de calidad: Es útil, se puede usar y proporciona una experiencia de calidad.
- Nivel 1: Diferenciados: Son widgets ejemplares que ofrecen experiencias de héroe personalizadas y ayudan a los usuarios a crear pantallas principales únicas y productivas.
Nivel 3: Baja calidad
Un widget se considera de baja calidad si no cumple con los criterios estándar de diseño, color, descubrimiento y contenido. Para obtener más información sobre cómo compilar un widget de alta calidad y que siga las prácticas recomendadas, consulta los siguientes lineamientos.
Nivel 2: Estándar de calidad
Para que se considere de buena calidad, el widget debe cumplir con todos los siguientes criterios de diseño, color, descubrimiento y contenido:
Diseño
- El widget debe llenar los límites que establece la cuadrícula del selector cuando se coloca en la pantalla principal. Se puede cambiar el tamaño del widget a al menos uno de los siguientes tamaños : 2x2, 4x2 (celdas de cuadrícula del selector).
Para obtener más información, consulta los Lineamientos de tamaño.
- El widget debe alinearse correctamente con otros elementos de la pantalla principal en el eje vertical o horizontal y no debe ocupar espacio innecesario.
- El widget debe tocar al menos dos bordes opuestos de la cuadrícula. En otras palabras, los widgets no tienen que ser rectangulares. Pueden tener formas personalizadas, siempre que los bordes de la forma toquen al menos dos bordes de la cuadrícula.
- Si se pueden cambiar de tamaño, los widgets deben tener un tamaño mínimo o máximo adecuado, que se puede establecer con
minWidth
,minHeight
,maxResizeWidth
ymaxResizeHeight
en el archivo AppWidgetProviderInfo XML.- Se debe establecer el tamaño máximo si cambiar el tamaño del widget solo agrega espacio en blanco.
- El tamaño mínimo se debe establecer en función del tamaño mínimo que aún ofrece valor a tu widget y que cumple con los requisitos del objetivo táctil (48 x 48).
Color
- El texto y los botones de íconos de los widgets deben tener relaciones de contraste suficientes para cumplir con los requisitos de accesibilidad (no se incluyen las miniaturas ni las imágenes).
Descubrimiento
El widget debe tener vistas previas precisas en el selector de widgets. Esto se puede configurar con
previewImage
ypreviewLayout
en el XML de AppWidgetProviderInfo o con Vistas previas generadas.- La vista previa del widget se ve coherente con la funcionalidad que se ofrece cuando se agrega a la pantalla principal.
Video 1: Widget con una vista previa imprecisa.
Contenido
- El contenido de los widgets no debe ser obsoleto o desactualizado de forma constante.
- El widget debe actualizarse después de que el usuario complete una acción desde él.
- El widget debe actualizarse después de que el usuario complete una acción relacionada desde la app.
- El widget debe permitir que los usuarios actualicen el contenido de forma manual si se espera que los datos se actualicen con más frecuencia que la IU.
- La IU del widget debe ser funcional o el contenido se recorta.
- Los estados cero y vacíos del widget deben ser intencionales y mostrar el valor del widget o proporcionar un llamado a la acción cuando el widget está instalado, pero el usuario aún no accedió.
Nivel 1: Diferenciado
Los mejores widgets cumplen con todos los criterios del nivel 2 y con todos los siguientes criterios de diseño, color, descubrimiento y coherencia del sistema.
Diseño
- El widget ocupa todo el límite y se alinea correctamente con otros elementos de la pantalla principal en el eje vertical u horizontal, y no ocupa espacio innecesario.
- Todas las formas DEBEN tocar los cuatro bordes de los límites de la cuadrícula.
El widget admite un tamaño preferido
- Se puede cambiar el tamaño del widget a, al menos, uno de los siguientes : 2 × 2, 4 × 2
El encabezado del widget se usa y aplica de forma coherente.
- Se recomienda usar el encabezado en los siguientes casos:
- Quieres proporcionar vínculos directos a ciertas funciones de la app, como la búsqueda.
- Quieres aplicar un ícono de desarrollo de la marca de la app que también funcione como un vínculo coherente a la app cuando se presiona.
- El widget contiene contenido desplazable (lista, cuadrícula, etcétera)
- El contenido del encabezado proporciona contexto útil (nombre de la lista de tareas pendientes).
- El encabezado es opcional en los siguientes casos:
- El widget es una imagen con sangrado completo (fotos)
- El espacio es limitado (< 2 filas de altura)
- Cuando el contenido del encabezado es redundante.
- Si usas un encabezado, cumple con nuestras especificaciones:
- Ícono, título y acciones.
- El ícono siempre está presente
- El título aparece cuando hay suficiente espacio
- Acciones basadas en el contexto del widget
- Altura: 48 dp, padding: 14 dp
- Ícono, título y acciones.
- Se recomienda usar el encabezado en los siguientes casos:
Color
- El widget admite la paleta de colores según los temas del sistema, el color del contenido o el color de la marca.
- El widget admite paletas de modo claro y oscuro.
- El color dinámico es un ejemplo de temas de contexto del dispositivo.
- La extracción de color local es un ejemplo de temas basados en el contenido de la app.
- El color semántico es un ejemplo de temas basados en el contenido de la app.
Descubrimiento
- La vista previa incluye contenido del usuario o aplica el tema del sistema (API de Generated Previews o
previewLayout
en el XML de AppWidgetProviderInfo).
- El widget tiene un nombre o una descripción que ayuda a los usuarios a comprender el valor del widget.
- El nombre tiene menos de 50 caracteres.
- El nombre y la descripción son únicos dentro de la app. Por ejemplo, la app no puede tener varios widgets con el mismo nombre.
Coherencia del sistema
- Los widgets rectangulares deben usar el radio de esquina que proporciona el sistema (específico del OEM).
- Muestra un estado de carga con un indicador de progreso (dentro de un
initialLayout
con color temático o equivalente de marca).
- Usa la configuración del sistema en lugar de un punto de entrada de configuración de widget personalizado.
- Usa la transición de inicio del sistema cuando se ingresa o sale de la app al widget
Recuerda las sugerencias que se ofrecen en esta guía cuando crees tu widget. Quieres brindar la mejor calidad y una excelente experiencia del usuario. Se pueden cumplir muchas barras de calidad con los diseños canónicos. Para obtener más información sobre las barras de calidad, los diseñadores deben consultar las Plantillas de widgets de Android, y los desarrolladores deben consultar las muestras de código de diseño en nuestros ejemplos de plataforma y la Guía para desarrolladores de diseños.