Reglas del sistema, aplicadas a todo. Cuatro raíces con barra globo (Escuchar · Explorar · Alarmas · Ajustes); las pantallas de segundo nivel entran empujadas con cabecera de 56 px, flecha atrás y sin barra de pestañas; lo modal sube como hoja sobre un velo. Superficie de lista opaca #102532, cristal solo en el cromo y en la tarjeta activa. Miniatura de emisora 44–68 px, arte grande solo en reproductor y coche. Android Auto reproduce el árbol real de
ConstructorArbolAuto: Favoritos · Todas las emisoras · Mis emisoras · Música Local, sin carpeta de ecualizador. La barra de 3a sigue siendo la navegable; aquí va estática en su pestaña. Ecualización en dos niveles: el base vive en Ajustes y cubre todas las emisoras; el de una emisora concreta se define desde su propia reproducción (bandeja de herramientas) y manda sobre el base, con «Volver al base» siempre a mano.4aMóvil · raíces y reproductor
1 · Escuchar (raíz)
2 · Reproductor completo (empujado)
3 · Explorar (raíz)
4bMóvil · segundo nivel de Explorar y toda la rama de alarmas
4 · Tus emisoras · grupos (empujada)
5 · Explorar › Países (empujada)
6 · Búsqueda con resultados y filtros activos
7 · Alarmas (raíz)
8 · Editor de alarma (hoja)
9 · Alarma sonando (pantalla completa)
9 bis · Alarmas › Vacaciones (gestor de rangos)
4cMóvil · ajustes, detalles y estados
10 · Ajustes (raíz) · 12 paneles → 4 grupos
11 · Ajustes › Ecualizador (empujada)
12 · Ajustes › Grabaciones (empujada)
13 · Estados: sin conexión, cargando, reconectando
14 · Bienvenida y PRO (14 días)
4dAndroid Auto · 1360×720 · el árbol real de
ConstructorArbolAuto: Favoritos · Todas las emisoras · Mis emisoras · Música Local. Filas de 96 px, texto desde 22 px, dos niveles como máximo y ninguna carpeta de ecualizador (el preset por dispositivo se aplica solo al conectar el coche).A1 · Raíz
A2 · Favoritos › grupos
A3 · Todas las emisoras · rejilla (CONTENT_STYLE_PLAYABLE_HINT = 2)
A4 · Ahora suena (plantilla de reproducción)
A5 · Música Local › carpeta · acciones de reproducción y paginación
Set completo: 15 pantallas de móvil (4a · 4b · 4c) y 5 de Android Auto (4d). Siguientes pasos: "haz navegable también 4b" · "añade Géneros y Tendencias" · "diseña el widget y la notificación" · "prepara el handoff para desarrollo".
Navega de verdad: pincha las cuatro pestañas y la burbuja se desplaza cambiando de pantalla; el chip «Ecualizador, grabar, calidad» abre la bandeja de herramientas y el fondo la cierra. Con cuatro pestañas la celda pasa de 74 a 92 px, así que la burbuja respira más y las etiquetas caben sin recortarse. Ajustes era el pendiente: sus 12 paneles apilados (
_AjustesContent) pasan a cuatro grupos de filas con el valor actual a la derecha, que es lo que se viene a comprobar.3aEscuchar · Explorar · Alarmas · Ajustes, con la barra globo de 4 celdas y la bandeja de herramientas.
Pincha las pestañas y el chip de herramientas. Siguientes pasos posibles: "añade la pantalla de país/género de Explorar" · "haz la versión de Android Auto con esta jerarquía" · "monta el editor de alarma".
Interactivo: pincha las pestañas para ver moverse la burbuja. La barra plana y la burbuja comparten un mismo color, así que la silueta se lee como un único globo alargado que se infla justo donde está el foco; el contorno sale de una sombra proyectada sobre la unión de las dos formas, no de un borde, para que no aparezca costura. Al cambiar de pestaña la burbuja se desliza con una curva ligeramente elástica: la etiqueta anterior se cierra en vertical y la nueva se abre. Altura de la barra: 74 px → 52 px (el abultamiento se sale por encima y flota sobre el contenido, así que no ocupa maquetación).
2aGlobo vertical — la burbuja crece hacia arriba y saca la etiqueta. Iconos legibles a 24 px en vez de las ilustraciones de 512 px.
Detalle a 2× · misma barra, mismo estado
La burbuja mide 1,19 veces el ancho de una celda, así que se ensancha un poco más allá de su pestaña: es lo que hace que la deformación parezca elástica y no un simple rectángulo que se mueve. En Flutter esto es un
AnimatedPositioned para la burbuja + AnimatedSlide y AnimatedSize por pestaña, con Curves.easeOutBack.Pruébala pinchando las pestañas. Luego puedes pedirme: "aplica la barra globo a 1b y 1c" · "hazla aún más baja" · "que la burbuja rebote un poco más".
1Diagnóstico y primera ronda
Supuestos de partida
Leo el código de
pluriwave/lib, no de memoria: paleta y radios salen de pluriwave_tokens.dart, la tipografía es Plus Jakarta Sans, y el arte de emisora son los cuatro PNG reales de assets/images. Mantengo teal #21D4D9, coral #F4B860, menta #7EE4C2 y el fondo aurora. Prioridad de uso que asumo, según tu respuesta: volver a lo que ya escuchas > descubrir > alarmas. Y todo lo que decida tiene que sobrevivir a Android Auto: objetivos grandes, favoritos primero, jerarquía de dos niveles.Qué mide mal hoy · medido en el código, no a ojo
1 · La cabecera cuesta 171 px, cinco veces
PluriScreenHeader repite orbe de 56 px, banner, marca de agua, dos orbes decorativos y dos pastillas de estado en Inicio, Buscar, Favoritos y Alarmas. Ninguno de esos píxeles es accionable.2 · En Inicio se ven 0 emisoras completas
Cabecera + Cerca de ti + Radar + Géneros = 583 px. Con
bottomChromeInset: 146 y childAspectRatio: 0.78, del grid solo asoma una franja.3 · Favoritos es el 80% del uso y la 3.ª pestaña
Cada fila mide ~100 px: anillo
SweepGradient de 58 px, dos IconButton apilados y un contador. Entran 5 favoritas por pantalla.4 · Buscar pide 330 px antes del primer resultado
Tres paneles de filtros (país, idioma, calidad) siempre desplegados, cada uno en su propia tarjeta de cristal, encima de los resultados.
5 · El reproductor: 62% de adorno, 3 controles
El círculo ocupa
width*0.62+40. Ecualizador y favorito viven escondidos en la AppBar; el temporizador es un TextButton al fondo; grabar ocupa una fila entera.6 · Iconos de 512 px dibujados a 34 px
Las pestañas usan ilustraciones detalladas (
pluri_home.png y compañía). A tamaño de pestaña son manchas azules indistinguibles, y solo la activa lleva etiqueta.Sistema que propongo
Cristal con presupuesto
Un solo elemento translúcido por pantalla, y siempre el cromo (nav + mini-reproductor). Las listas pasan a superficie opaca #102532: mismo color, cero coste de lectura.
La imagen manda, el adorno no
El arte se queda grande donde se mira (reproductor, tarjeta de la emisora activa) y se convierte en miniatura nítida de 56–64 px en listas. Lo que quito son orbes, marcas de agua y anillos de degradado.
Cabecera de una línea
171 px → 56 px. Título + la única acción real de la pantalla. El nombre de la app no se repite en cada pestaña.
Movimiento con función
La animación se reserva para estado: la onda solo late si suena, el anillo de conexión gira solo al conectar. Nada se mueve por decorar.
1aActual · recreación fiel del código para comparar. Los recortes son reales: el contenido se corta donde se corta hoy.
Inicio
Buscar
Favoritos
Reproductor
Alarmas
1bEvolución — misma piel, la mitad del peso. Cabecera de 56 px, lo que suena arriba y accionable, favoritas a un toque, grid de 3, filtros en una sola barra. El cristal se reserva para el cromo y la tarjeta activa; las listas pasan a superficie opaca. Iconos de pestaña legibles a 24 px. Mini-reproductor y barra de pestañas fusionan sus márgenes: 146 px → 66 px.
Inicio · 6 emisoras a la vista + favoritas + géneros
Buscar · resultados desde el píxel 160
Favoritos · 8 filas visibles, grupos como pestañas
Reproductor · 9 acciones visibles en lugar de 3
Alarmas · la hora es lo primero que se lee
1cReforma — "Ahora" como pantalla raíz y una sola jerarquía para móvil y coche. Cuatro pestañas (Escuchar · Explorar · Alarmas · Ajustes): favoritos deja de ser un destino y se convierte en el cuerpo de la pantalla de inicio. El reproductor completo pasa a ser opcional — pausar, saltar y cambiar de emisora se hacen sin abrirlo. La misma jerarquía de dos niveles (Favoritas → emisora) es la que Android Auto necesita, así que móvil y coche dejan de divergir.
Escuchar · reproductor + tus emisoras en una pantalla
Explorar · una superficie para buscar y descubrir
Bandeja de herramientas · sube desde el reproductor, no lo tapa
Android Auto · 1360×720 · misma jerarquía, objetivos de 96 px
Esto es el punto de partida y el diagnóstico. Dime si te cuadra y sigo con las propuestas, o pídeme ya: "enséñame la evolución" · "quiero ver la versión más radical" · "añade la pantalla de Android Auto".