Cómo usar la interfaz de usuario moderna

Con los temas de visualización y los estilos de panel modernos, puedes crear gráficos claros y profesionales, y paneles optimizados con una mejor densidad de datos. Con la aplicación de una tipografía actualizada, una jerarquía de colores intencional y diseños adaptativos, el diseño moderno mejora la legibilidad de los datos y proporciona una experiencia de visualización y edición coherente.

Para usar estas opciones de diseño, se debe habilitar la función en versión preliminar de la interfaz de usuario moderna en la página Versión preliminar del panel de administrador. Esta función en versión preliminar es compatible con todos los tipos de implementación de Looker, incluidos Looker (original) y Looker (Google Cloud Core), y está habilitada de forma predeterminada.

Cuando se habilita, la función de versión preliminar de la interfaz de usuario moderna introduce los siguientes parámetros de configuración y actualizaciones:

  • Visualizaciones modernas: El parámetro de configuración Tema de visualización para los gráficos de Looker permite a los usuarios elegir un nuevo tema de visualización moderno para los gráficos de Looker.
  • Paneles modernos: El parámetro de configuración Estilo del panel permite a los usuarios elegir un nuevo estilo moderno para los paneles de Looker.

Visualizaciones modernas

Cuando la función de versión preliminar de la interfaz de usuario moderna está habilitada, puedes usar el parámetro de configuración Tema de visualización para seleccionar temas de visualización modernos o clásicos para tus gráficos de Looker. Elegir el tema de visualización Moderno te ayuda a crear gráficos claros, legibles y profesionales con un aspecto moderno y nítido.

En la siguiente imagen, se muestra una comparación entre los temas de visualización Moderno y Clásico.

Tipos de gráficos admitidos

Durante el lanzamiento de la versión preliminar, el tema de visualización Moderno admite los tipos de gráficos integrados más populares de Looker:

El tema de visualización moderno no admite todos los demás tipos de gráficos (como el de caja, el de Google Maps, el de mapa (heredado), el de embudo, el de dispersión, el de tabla (heredado), el de cronograma y el de cascada). Si un Look o una exploración usan un tipo de gráfico no admitido, el parámetro de configuración Tema de visualización no aparecerá en su menú de edición.

Diferencias entre los temas de visualización Moderno y Clásico

El tema de visualización Modern se diseñó para optimizar el diseño, la tipografía, los colores y los comportamientos interactivos de los gráficos.

En la siguiente tabla, se describe cómo difieren las visualizaciones que usan el tema Modern de las que usan el estilo Classic.

Elemento visual Tema de visualización clásico Tema de visualización moderno
Tipografía
  • Usa una sola fuente uniforme (como Roboto Regular) para todos los elementos del gráfico.
  • Todo el texto del gráfico, incluidos los títulos y los valores, comparte el mismo color oscuro.
  • Las etiquetas de los ejes suelen rotar en diagonal o mostrarse con puntos suspensivos (…) para ajustarse al espacio.
  • Google Sans: Se aplica a títulos, encabezados y leyendas con una gradación intencional de grosor y color para una jerarquía clara.
  • Google Sans Text: Se aplica a etiquetas y ejes más pequeños para mejorar la legibilidad.
  • Valores monoespaciados: Los números a lo largo de los ejes del gráfico usan una fuente monoespaciada para mantener una alineación vertical clara.
  • Ajuste de escala adaptable: Las etiquetas cambian de tamaño de forma dinámica y evitan las rotaciones diagonales o verticales siempre que sea posible.
Colores predeterminados
  • De forma predeterminada, se usa la colección de colores Shoreline para los gráficos nuevos.
  • Cuando el parámetro de configuración del administrador Colores de visualización predeterminados se establece en una colección de colores que no es la predeterminada (en otras palabras, se establece en una colección de colores que no es Shoreline), ese parámetro de configuración anula la colección de colores de Shoreline en los gráficos nuevos.
  • La colección de colores Moderna no está disponible para los gráficos cuando se selecciona el tema de visualización Clásico.
Gráficos cartesianos (de barras, de columnas, de líneas y de áreas)
  • Las líneas de cuadrícula y los ejes son muy visibles (gris oscuro).
  • Las columnas y las barras se renderizan con esquinas nítidas de 90 grados.
  • Las líneas de cuadrícula y las líneas de los ejes se atenúan con un color más claro y suave para centrar la atención en los datos.
  • Las columnas y las barras se renderizan con bordes exteriores redondeados (radio de esquina de 4 px).
  • Se expande el espaciado entre columnas y barras para mantener una separación clara entre los segmentos.
Gráficos circulares y de anillo
  • Las divisiones se renderizan con esquinas definidas y se apoyan al ras una contra la otra.
  • Las secciones tienen bordes exteriores redondeados y un espaciado sutil entre ellas.
  • Las etiquetas de leyenda muestran valores, porcentajes o ambos uno al lado del otro.
Gráficos de un solo valor
  • Espaciado estandarizado que podría escalar de formas inesperadas.
  • Se agregó un padding generoso y se ajustaron las alturas de línea para garantizar que los títulos, los valores y las etiquetas de comparación estén separados y se puedan analizar fácilmente.
Interacciones y Tooltips
  • Acciones básicas de desplazamiento sin movimiento dinámico.
  • Las sugerencias tienen esquinas definidas y fondos grises estándar.
  • Si mantienes el puntero sobre las porciones del gráfico circular o las seleccionas, estas se expanden (“hinchan”) y se separan sutilmente del gráfico.
  • Si mantienes el puntero sobre un gráfico de líneas, esa línea específica se engrosará ligeramente, mientras que las demás se atenuarán.
  • Las sugerencias tienen esquinas redondeadas, espaciado refinado y fondos más oscuros para un alto contraste. Es compatible con pantallas táctiles y dispositivos móviles.
  • La lógica de filtrado cruzado y los comportamientos de desglose del panel no cambian.

La colección de colores Modern

Si está habilitada la función de versión preliminar de la interfaz de usuario moderna, verás la colección de colores modernos como una opción para el parámetro de configuración de colores de visualización predeterminados. Incluso si no seleccionas la colección de colores Modern para este parámetro de configuración, si seleccionas el tema de visualización Modern para una visualización, se usará la colección de colores Modern de forma predeterminada.

La colección de colores Modern se desarrolló con los siguientes objetivos:

  • Asegúrate de que haya suficiente contraste entre los elementos del gráfico y los fondos para garantizar la visibilidad y la accesibilidad.
  • Usa una secuencia de colores que sea diferenciable (que tenga un contraste visual claro) para las personas con deficiencias en la visión de los colores.
  • Reduce la intensidad de la paleta de colores para evitar distracciones y mantener la concentración en los datos.

Cómo habilitar el tema de visualización Moderno (para administradores)

Para que el tema de visualización Modern esté disponible en una instancia, se debe habilitar la función de versión preliminar de la interfaz de usuario moderna en la página Versión preliminar del panel de administrador. La función de vista previa está habilitada de forma predeterminada.

Cuando se habilita la función Interfaz de usuario moderna, el tema Moderno se convierte en el tema predeterminado para los gráficos de consultas nuevos. Sin embargo, los gráficos que se crean antes de que se habilite la función de interfaz de usuario moderna no adoptan automáticamente el tema moderno.

Si deseas establecer la colección de colores del tema Moderno como la paleta predeterminada para todas las visualizaciones nuevas en Looker, incluidas las visualizaciones que no admiten temas de visualización, puedes seleccionarla en el parámetro de configuración Colores de visualización predeterminados en la página Configuración del panel de administración una vez que se habilite la función de versión preliminar de la interfaz de usuario moderna. Este parámetro de configuración solo habilita las paletas de colores, no las otras funciones del tema Moderno. Si habilitas la función Interfaz de usuario moderna y deseas que las visualizaciones nuevas de todos los tipos de gráficos usen los mismos colores de visualización predeterminados, selecciona Moderna para este parámetro de configuración.

Cómo elegir temas para gráficos individuales

Para establecer un tema de visualización para un gráfico, debes tener los permisos adecuados y usar la configuración del gráfico.

Permisos de usuario

Para usar y guardar visualizaciones con el tema de visualización Moderno, debes tener los siguientes permisos de Looker:

  • Para configurar los estilos modernos en las Exploraciones: Los usuarios deben tener el permiso explore para los modelos pertinentes.
  • Para guardar los estilos de visualización modernos en Looks individuales , los usuarios deben tener los permisos explore, save_content y save_looks. Los usuarios también deben tener el nivel de acceso Administrar acceso, Editar para los Looks que deseen editar.

Configuración del gráfico

Cuando la función Interfaz de usuario moderna está habilitada, puedes cambiar el tema de visualización siguiendo estos pasos:

Gráficos de tabla

En el caso de los gráficos de tabla, puedes elegir el tema de visualización que deseas aplicar seleccionando una opción en el campo Tema de tabla.

  1. Si estás viendo un Look, haz clic en el botón Editar para editarlo.
  2. En un Look o en Explore, en la pestaña Visualización, haz clic en Editar para abrir el menú de edición.
  3. Navega a la pestaña Trazado del menú de edición.
  4. En el campo desplegable Table Theme, selecciona Modern o uno de los otros temas de tabla. La visualización se actualiza para mostrar el tema elegido.
  5. Una vez que hayas seleccionado el tema que prefieras, podrás guardar la visualización como una vista o agregarla a un panel. La selección del tema se guarda como parte de la configuración de la visualización.

Otros gráficos

En el caso de los gráficos de columnas, barras, líneas, áreas, circulares, circulares múltiples o de un solo valor, puedes elegir el tema de visualización que deseas aplicar seleccionando una opción en el campo Tema de visualización.

  1. Si estás viendo un Look, haz clic en el botón Editar para editarlo.
  2. En un Look o en Explore, en la pestaña Visualización, haz clic en Editar para abrir el menú de edición.
  3. Navega a la pestaña Trazado del menú de edición.
  4. En el campo desplegable Tema de visualización, selecciona Moderno o Clásico. La visualización se actualiza para mostrar el tema elegido.
  5. Una vez que hayas seleccionado el tema que prefieras, podrás guardar la visualización como una vista o agregarla a un panel. La selección del tema se guarda como parte de la configuración de la visualización.

Mosaicos del panel

  1. Coloca el panel en modo de edición.
  2. Abre la ventana Editar tarjeta de la tarjeta.
  3. En la pestaña Visualización, haz clic en Editar para abrir el menú de edición.
  4. Navega a la pestaña Trazado del menú de edición.
  5. En el campo desplegable Tema de visualización, selecciona Moderno o Clásico. La visualización se actualiza para mostrar el tema elegido.
  6. Una vez que hayas seleccionado el tema que prefieras, puedes guardar el cambio haciendo clic en Guardar en la ventana Editar tarjeta y, luego, en Guardar en el panel.

Elementos del panel de LookML

Los temas Moderno y Clásico se pueden usar en los elementos del panel de LookML para los tipos de gráficos admitidos.

Para usar temas, usa el parámetro modern2026 y configúralo como true para el tema Moderno o como false para el tema Clásico.

Para aplicar la colección de colores Modern a un elemento del panel, usa el parámetro collection_id y configúralo como looker_2026.

Retención de estilo personalizado

Cuando aplicas el tema de visualización Moderno a un Explore o Look existente, Looker actualiza los estilos subyacentes de tu visualización sin descartar tus configuraciones personalizadas. Las opciones de formato personalizadas que guardaste explícitamente tienen prioridad sobre los nuevos valores predeterminados del tema.

  • Estilos personalizados (conservados): Si personalizaste manualmente propiedades de formato específicas (como ingresar códigos de color personalizados, ajustar los límites del eje a números específicos o definir manualmente los nombres de las series de gráficos), Looker conserva estas anulaciones exactamente como están. Tus elecciones personalizadas no se reemplazarán con el tema Moderno.
  • Propiedades sin modificar (actualizadas): Todos los parámetros de configuración de diseño que no modificaste (propiedades que se dejaron en su estado predeterminado) se actualizan automáticamente al diseño del tema Moderno, como las nuevas fuentes, las líneas de cuadrícula atenuadas y las esquinas redondeadas.

Por ejemplo, si tienes un gráfico de columnas con el tema Clásico en el que personalizaste los colores de las columnas para que coincidan con la marca de tu empresa, cambiar al tema Moderno conservará esos colores específicos de la marca. Sin embargo, las fuentes, el diseño de las líneas de cuadrícula y las esquinas de las columnas del gráfico se actualizarán automáticamente al diseño moderno.

Cómo restablecer la configuración predeterminada

Si deseas aplicar por completo el tema Moderno a una visualización que contiene estilos personalizados, puedes restablecer las propiedades personalizadas a sus estados predeterminados:

  1. Desde un Look o un panel, ingresa al modo de edición de la visualización.
  2. En el menú Editar, busca las propiedades que deseas restablecer (como las selecciones de color personalizadas o los tamaños de fuente).
  3. Borra los valores personalizados o selecciona la configuración predeterminada para quitar la anulación. Las propiedades heredarán de inmediato los valores predeterminados del tema Moderno.

Limitaciones conocidas

Mientras el tema de visualización Moderno se encuentre en versión preliminar, se aplicarán las siguientes limitaciones:

  • El tema Moderno solo está disponible para los tipos de gráficos que se enumeran en la sección Tipos de gráficos admitidos. Todas las demás visualizaciones integradas de Looker, incluidos los mapas, se renderizarán con el tema clásico.
  • El tema de visualización Moderno solo se aplica a las visualizaciones integradas de Looker. No afecta las visualizaciones personalizadas que se desarrollan a través del framework de extensiones de Looker ni las que se instalan desde Looker Marketplace.
  • Los temas de visualización no se pueden editar de forma programática a través de la API de Looker ni el SDK de Embed.

Paneles modernos

Cuando se habilita la función de versión preliminar de la Interfaz de usuario moderna, los paneles nuevos usan de forma predeterminada el estilo de panel moderno. El uso del estilo de panel Moderno crea paneles con una apariencia moderna y optimizada, y un énfasis en la densidad de los datos. También puedes usar el estilo de panel clásico preexistente de Looker. Usa el parámetro de configuración Estilo del panel para seleccionar los estilos de panel Moderno o Clásico para tus paneles.

Usar el estilo de panel moderno no actualiza automáticamente los gráficos del panel al tema de visualización moderno. Para usar el tema de visualización Moderno en los mosaicos del panel, debes ingresar al modo de edición del panel y editar cada mosaico que use un tipo de gráfico compatible para usar el tema de visualización Moderno.

En la siguiente imagen, se muestra un ejemplo de un panel que usa el estilo de panel moderno con tarjetas que usan el tema de visualización moderno.

El estilo del panel clásico se muestra en la documentación de Visualización de paneles.

En qué se diferencian los estilos de panel modernos y clásicos

El estilo de panel moderno está diseñado para mejorar la densidad de los datos y proporcionar una experiencia de edición más precisa y cohesiva.

En la siguiente tabla, se describe cómo difieren los paneles que usan el estilo moderno de los que usan el estilo clásico.

Elemento Estilo de panel clásico Estilo de panel moderno
Diseño y densidad
  • Usa un diseño de cuadrícula estándar con un espaciado más amplio entre las tarjetas.
  • Diseño de alta densidad: Interfaz optimizada que reduce el desorden visual y se enfoca en los datos.
Apariencia y estilo
  • Incluye elementos de la IU y diseño de navegación heredados de Looker.
  • Estética moderna: Un diseño limpio que se alinea con los estándares de diseño de Google
  • Navegación actualizada: Se actualizaron las barras de navegación superior y lateral para brindar una experiencia coherente con la nueva experiencia de Explorar.

Cómo habilitar el estilo de panel moderno (para administradores)

Para que el estilo de panel moderno esté disponible en una instancia, se debe habilitar la función en versión preliminar de la interfaz de usuario moderna en la página Versión preliminar del panel de administración. La función de vista previa está habilitada de forma predeterminada.

Los paneles creados antes de que se habilite la función de interfaz de usuario moderna conservan el estilo de panel clásico, pero se pueden actualizar al estilo moderno con el parámetro de configuración Estilo del panel. Los paneles creados después de que se habilita la función de Interfaz de usuario moderna se establecen de forma predeterminada en el estilo de panel moderno.

Cómo establecer un estilo para paneles individuales

Para establecer un estilo de panel, debes tener los permisos adecuados y usar el menú Configuración del panel.

Permisos de usuario

Para usar y guardar paneles con el estilo moderno, los usuarios deben tener el permiso de Looker save_dashboards. Los usuarios también deben tener el nivel de acceso Administrar acceso, Editar para los paneles que deseen editar.

El parámetro de configuración Estilo del panel

Cuando se habilita la función Interfaz de usuario moderna, el estilo de panel moderno es el predeterminado para los paneles nuevos. Para establecer el estilo del panel en paneles nuevos o existentes, sigue estos pasos:

Panel definido por el usuario

  1. Coloca el panel en modo de edición.
  2. Abre el menú de Configuración del panel.
  3. En la pestaña General del menú Configuración, usa el parámetro de configuración Estilo del panel para seleccionar el estilo del panel Moderno o Clásico en las opciones del menú desplegable. El panel se actualiza para mostrar el diseño seleccionado.
  4. Haz clic en Guardar en el menú Configuración.
  5. Haz clic en Guardar en el panel para aplicar el diseño seleccionado.

panel de LookML

Para usar el estilo de panel moderno, establece el parámetro style del panel en modern. Para usar el estilo de panel clásico, establece el parámetro style del panel en classic.

Paneles incorporados

En el caso de los paneles incorporados que usan temas incorporados, algunos diseños modernos se verán diferentes a los diseños de los paneles no incorporados. Te recomendamos que uses el estilo de panel clásico para los paneles integrados que usan temas integrados.

Pasos siguientes: