Presentamos el diseño móvil para los paneles rápidos de Amazon

Los equipos que dependen de paneles para tomar decisiones diarias a menudo deben pellizcar y hacer zoom para interactuar con controles diseñados originalmente para pantallas más grandes. Verificar los ingresos durante una reunión matutina, revisar las métricas del proceso entre reuniones o monitorear las operaciones mientras se viaja requiere un esfuerzo adicional cuando el panel se creó para una pantalla de escritorio.

Mobile Layout para los paneles de Amazon Quick Free Form resuelve este problema al representar automáticamente los paneles como una vista táctil optimizada de una sola columna que llena la pantalla del dispositivo. Los lectores obtienen acceso inmediato a sus datos sin cambiar el tamaño ni desplazarse horizontalmente. El diseño móvil para paneles de formato libre ahora está disponible en cada región de AWS admitida. Mobile Layout transforma el lienzo del escritorio en una experiencia de desplazamiento continuo de una sola columna del tamaño del dispositivo. Las imágenes llenan el ancho de la pantalla, mantienen su relación de aspecto y permanecen interactivas.

Los autores no necesitan realizar cambios para que esto surta efecto. Los lectores del panel obtienen acceso inmediato y sin fricciones a sus datos en cualquier teléfono o tableta. En esta publicación, le mostramos cómo funciona Mobile Layout y qué puede hacer para optimizar sus paneles.

La siguiente animación muestra un panel de control de formato libre que se abre en un teléfono en Mobile Layout, con el lector desplazándose por indicadores clave de rendimiento (KPI) y gráficos en una alimentación vertical continua.

Diseño móvil explicado

Mobile Layout es un modo de renderizado para paneles de formato libre. Cuando un lector abre un panel de formato libre en un dispositivo con una ventana gráfica pequeña, Amazon Quick detecta el tamaño de la pantalla y muestra la vista móvil. El lector obtiene una fuente de imágenes de desplazamiento vertical y de una sola columna, cada una con un tamaño que ocupa todo el ancho de la pantalla.

La detección se basa en la ventana gráfica del dispositivo. Cuando la ventana gráfica está dentro de las dimensiones del teléfono o tableta, se activa Mobile Layout. En pantallas más grandes, se utiliza la representación de escritorio estándar.

Capacidades

Mobile Layout incluye las siguientes capacidades para paneles de formato libre.

Desplazamiento continuo. Los elementos visuales se apilan en una sola columna. Cada objeto visual ocupa todo el ancho de la ventana gráfica. Se conservan las relaciones de aspecto: las imágenes en forma de retrato se mantienen altas, las imágenes en forma de paisaje se mantienen anchas.

Representación con reconocimiento de grupo. Los paneles de formato libre suelen utilizar elementos visuales superpuestos (por ejemplo, valores de KPI superpuestos sobre un fondo de color). Mobile Layout respeta los límites del grupo. Los elementos visuales agrupados se representan juntos como una sola unidad, preservando el diseño en capas.

Controles del lector. En la aplicación móvil Quick, los lectores pueden usar un conmutador de vista incorporado para alternar entre la vista móvil (desplazamiento continuo) y la vista de escritorio (la representación original). En la web (navegador móvil), la orientación vertical brinda la experiencia móvil y la orientación horizontal brinda la experiencia de escritorio.

Actuación. Mobile Layout utiliza una ruta de renderizado optimizada que reduce el consumo de recursos en dispositivos móviles. Los paneles que antes tenían dificultades para renderizarse en teléfonos ahora se cargan y se desplazan sin problemas.

La siguiente imagen muestra el mismo panel en la vista de escritorio (izquierda) y la vista de desplazamiento continuo móvil (derecha).

El mismo panel se muestra uno al lado del otro en la vista de escritorio a la izquierda y en la vista de desplazamiento continuo móvil a la derecha.

Acciones requeridas

Para lectores del panel: Nada. Mobile Layout funciona para paneles de control de formato libre existentes. No hay ninguna configuración que activar, ninguna migración que realizar ni nada que actualizar. Abra un panel en un teléfono o tableta y acceda a la vista móvil inmediatamente.

Para autores y administradores: no se requiere nada. Los autores de paneles de formato libre se benefician automáticamente porque sus paneles publicados ya se muestran en diseño móvil en pantallas más pequeñas. Los autores que utilizan diseños Tiled o Classic no se ven afectados. Esos tipos de diseño conservan su comportamiento de respuesta existente. Los administradores no necesitan configurar nada. El diseño móvil está activo de forma predeterminada para los paneles de formato libre en toda la cuenta.

Obtener la mejor experiencia móvil con grupos

Los autores que utilizan elementos visuales superpuestos pueden tomar un paso opcional para verificar que su diseño se traduzca bien en dispositivos móviles: organizar esos elementos visuales en Grupos.

En el diseño de formato libre, los autores suelen superponer elementos visuales uno encima del otro. Puede colocar los valores de KPI encima de un fondo de color o apilar tarjetas de comparación sobre un contenedor.

En el escritorio, estos elementos superpuestos se representan según lo previsto. En dispositivos móviles, el motor de diseño debe decidir cómo manejarlos.

Sin agrupar, cada imagen se convierte en su propia tarjeta en el desplazamiento móvil. Un KPI que se encuentra sobre una imagen de fondo aparece como elementos separados: el fondo representado como una tarjeta, cada KPI representado como una tarjeta separada. Las imágenes aún se representan correctamente, pero pierden su relación de capas.

Con la agrupación, todos los elementos visuales del grupo se representan juntos como una sola unidad. El fondo y los KPI permanecen juntos, preservando el banner tal como lo diseñó el autor.

Para obtener documentación sobre cómo trabajar con grupos visuales en un diseño de formato libre, consulte Personalización de elementos visuales en un diseño de formato libre.

La siguiente animación compara imágenes agrupadas (donde el banner de KPI permanece como una unidad) con imágenes desagrupadas (donde los KPI aparecen como tarjetas separadas) en dispositivos móviles.

Animación que compara imágenes agrupadas, donde el banner de KPI permanece como una unidad, con imágenes desagrupadas, donde los KPI aparecen como tarjetas separadas en dispositivos móviles.

Cómo agrupar imágenes superpuestas

Para agrupar imágenes, complete los siguientes pasos.

Abra su análisis en el modo de creación rápida de Amazon. Mantenga presionada la tecla Mayús y seleccione cada objeto visual que debe permanecer unido (por ejemplo, un rectángulo de fondo y los objetos visuales de KPI encima de él). Abra el menú contextual y elija Grupo.

No hay límite en el número de grupos por hoja. Cada grupo es tratado como una única unidad visual en el móvil.

La siguiente animación muestra la vista de creación rápida de Amazon con el menú contextual del botón derecho y la opción Grupo.

Animación de la vista de creación rápida de Amazon que muestra el menú contextual (clic derecho) con la opción Grupo

Cómo se dimensionan las imágenes en el móvil

Cuando Mobile Layout representa imágenes en desplazamiento continuo, aplica las siguientes barreras de seguridad.

Cada objeto visual ocupa todo el ancho de la ventana gráfica. Se conservan las relaciones de aspecto. Un gráfico de barras alto se mantiene alto. Un gráfico de líneas anchas permanece proporcionalmente corto. Una altura mínima de 272 píxeles significa que los elementos del gráfico (leyendas, etiquetas de ejes, botones de clasificación) permanecen visibles. Un límite de altura máxima evita que los elementos visuales excedan la ventana gráfica. Las tablas con muchas columnas se representan en todo su ancho con el desplazamiento horizontal activado.

Si un objeto visual se vuelve demasiado corto para representar sus elementos internos, aparece un ícono informativo. El lector puede cambiar al modo de escritorio o girar a horizontal para ver la imagen completa.

empezar

Mobile Layout elimina la necesidad de pellizcar y hacer zoom en paneles diseñados para pantallas de escritorio. Está disponible hoy en Amazon Quick. Para probarlo siguiendo estos pasos.

Abra un panel de Free Form en su teléfono o tableta usando la aplicación móvil Quick. Desplácese por sus imágenes en la vista de desplazamiento continuo. Utilice el selector de vistas para alternar entre los modos Móvil, Escritorio y Paisaje. Si tiene elementos visuales superpuestos, abra su análisis, selecciónelos, abra el menú contextual y elija Agrupar.

La siguiente imagen muestra el control del conmutador de vistas en la aplicación móvil.

Animación del control del conmutador de vista en la aplicación móvil Quick alternando entre los modos Móvil, Escritorio y Paisaje

Para obtener más información, consulte los siguientes recursos:

Agradecemos los comentarios a través del mecanismo de comentarios rápidos de la consola.

Sobre los autores

Rushabh Vora

Rushabh Vora

Rushabh es director principal de productos de Amazon Quick en Amazon Web Services, donde dirige las capacidades de IA generativa para el análisis y la visualización de datos. Rushabh se centra en permitir a las organizaciones transformar conjuntos de datos sin procesar en información procesable a través del lenguaje natural, reduciendo el tiempo desde los datos hasta la decisión de horas a minutos. Le apasiona hacer que la exploración de datos y la creación de paneles sean accesibles para todos los usuarios empresariales, independientemente de su experiencia técnica.

Cristóbal Lott

Cristóbal Lott

Christopher es arquitecto principal de soluciones de Amazon Quick. Tiene 25 años de experiencia en desarrollo de software empresarial. Chris vive en Sacramento, California, y disfruta de la jardinería, la cocina, la aviación general/aeroespacial y viajar por el mundo.

Nachiketha Sagri Hayavadana Upadhya

Nachiketha es ingeniera sénior de front-end en Amazon QuickSight. Con más de 6 años de experiencia en el equipo de QuickSight, Nachiketha se especializa en crear capacidades de temática y creación de estructuras que permitan a los clientes crear experiencias analíticas visualmente ricas y coherentes con la marca.

Sai Dinesh Garapati

Sai Dinesh Garapati es ingeniero front-end de Amazon QuickSight, donde trabaja en paneles y experiencia en creación de análisis. Creó funciones interactivas que ayudan a los autores a crear y personalizar paneles de control de manera más efectiva.