Como usar a interface moderna

Com temas de visualização e estilos de painel modernos, você pode criar gráficos limpos e profissionais e painéis simplificados com maior densidade de dados. Ao aplicar tipografia atualizada, hierarquia de cores intencional e layouts adaptáveis, o estilo moderno melhora a legibilidade dos dados e oferece uma experiência de visualização e edição coesa.

Para usar essas opções de estilo, o recurso em fase de pré-lançamento Interface do usuário moderna na página Pré-lançamento do painel de admin precisa estar ativado. Esse recurso em fase de pré-lançamento é compatível com todos os tipos de implantação do Looker, incluindo o Looker (original) e o Looker (Google Cloud Core), e está ativado por padrão.

Quando ativado, o recurso em fase de pré-lançamento Interface do usuário moderna apresenta as seguintes configurações e atualizações:

  • Visualizações modernas: a configuração Tema de visualização para gráficos do Looker permite que os usuários escolham um novo tema de visualização moderna para gráficos do Looker.
  • Painéis modernos: a configuração Estilo do painel permite que os usuários escolham um novo estilo moderno para os painéis do Looker.

Visualizações modernas

Quando o recurso em fase de pré-lançamento Interface do usuário moderna está ativado, é possível usar a configuração Tema de visualização para selecionar temas de visualização modernos ou clássicos para seus gráficos do Looker. Escolher o tema de visualização Moderno ajuda a criar gráficos limpos, legíveis e profissionais com uma aparência clara e moderna.

A imagem a seguir mostra uma comparação entre os temas de visualização moderno e clássico.

Tipos de gráficos compatíveis

Durante o lançamento da prévia, o tema de visualização moderno é compatível com os tipos de gráficos integrados mais usados do Looker:

Todos os outros tipos de gráfico (como boxplot, Google Maps, mapa (legado), funil, dispersão, tabela (legado), linha do tempo e cascata) não são compatíveis com o tema de visualização moderno. Se um Look ou uma Análise usar um tipo de gráfico não compatível, a configuração Tema de visualização não vai aparecer no menu de edição.

Diferenças entre os temas de visualização moderno e clássico

O tema de visualização moderno foi projetado para otimizar o layout, a tipografia, as cores e os comportamentos interativos do gráfico.

A tabela a seguir descreve as diferenças entre as visualizações que usam o tema Moderno e as que usam o estilo Clássico.

Elemento visual Tema de visualização clássico Tema de visualização moderno
Tipografia
  • Usa uma única fonte uniforme (como Roboto Regular) para todos os elementos do gráfico.
  • Todo o texto do gráfico, incluindo títulos e valores, tem a mesma cor escura.
  • Os rótulos nos eixos geralmente giram na diagonal ou são exibidos com reticências (...) para caber no espaço.
  • Google Sans: aplicada a títulos, cabeçalhos e legendas usando gradação de peso e cor intencional para uma hierarquia clara.
  • Google Sans Text: aplicada a rótulos e eixos menores para facilitar a leitura.
  • Valores monoespaçados: os números nos eixos do gráfico usam uma fonte monoespaçada para manter um alinhamento vertical limpo.
  • Escalonamento adaptável: os rótulos são redimensionados de forma dinâmica e evitam rotações diagonais ou verticais sempre que possível.
Cores padrão
  • O padrão é a coleção de cores Shoreline para novos gráficos.
  • Quando a configuração de administrador Cores de visualização padrão é definida como uma coleção de cores diferente do padrão (ou seja, diferente de Shoreline), essa configuração substitui a coleção de cores Shoreline em novos gráficos.
  • A coleção de cores Moderno não está disponível para gráficos quando o tema de visualização Clássico está selecionado.
Gráficos cartesianos (barras, colunas, linhas, áreas)
  • As linhas de grade e de eixo são bem visíveis (cinza-escuro).
  • As colunas e barras são renderizadas com cantos nítidos de 90 graus.
  • As linhas de grade e de eixo são silenciadas com uma cor mais clara e suave para focar a atenção nos dados.
  • As colunas e barras são renderizadas com bordas externas arredondadas (raio de canto de 4 px).
  • O espaçamento entre colunas e barras foi ampliado para manter uma separação clara entre os segmentos.
Gráficos de pizza e de rosca
  • As fatias são renderizadas com cantos nítidos e ficam alinhadas umas com as outras.
  • As fatias têm bordas externas arredondadas e um espaçamento sutil entre elas.
  • Os rótulos de legenda mostram valores, porcentagens ou ambos lado a lado.
Gráficos de valor único
  • Espaçamento padronizado que pode ser reduzir escalonamento horizontal maneiras inesperadas.
  • Preenchimento generoso e alturas de linha ajustadas para garantir que os títulos, valores e rótulos de comparação sejam separados e fáceis de ler.
Interações e dicas
  • Ações básicas de passar o cursor sem movimento dinâmico.
  • As dicas têm cantos nítidos e planos de fundo cinza padrão.
  • Manter o ponteiro sobre as fatias da pizza ou selecioná-las faz com que elas se expandam sutilmente ("inchem") e se separem do gráfico.
  • Manter o ponteiro sobre um gráfico de linhas engrossa um pouco essa linha específica e escurece as outras.
  • As dicas têm cantos arredondados, espaçamento refinado e fundos mais escuros para alto contraste. Compatível com telas touch screen e dispositivos móveis.
  • A lógica de filtragem cruzada e os comportamentos de detalhamento do painel permanecem inalterados.

Coleção de cores Moderno

Se o recurso em fase de pré-lançamento Interface do usuário moderna estiver ativado, a coleção de cores moderna vai aparecer como uma opção para a configuração Cores de visualização padrão. Mesmo que você não selecione a coleção de cores Moderno para essa configuração, se selecionar o tema de visualização Moderno para uma visualização, ela vai usar a coleção de cores Moderno por padrão.

A coleção de cores Modern foi desenvolvida com os seguintes objetivos:

  • Garanta contraste suficiente entre os elementos do gráfico e os planos de fundo para visibilidade e acessibilidade.
  • Use uma sequência de cores que seja diferenciável (com contraste visual distinto) para pessoas com deficiências de visão de cores.
  • Evite distrações e mantenha o foco nos dados reduzindo a intensidade da paleta de cores.

Ativar o tema de visualização Moderno (para administradores)

Para disponibilizar o tema de visualização moderno em uma instância, o recurso em fase de pré-lançamento Interface do usuário moderna na página Pré-lançamento do painel de admin precisa estar ativado. O recurso em fase de pré-lançamento é ativado por padrão.

Quando o recurso Interface do usuário moderna está ativado, o tema moderno se torna o padrão para novos gráficos de consulta. No entanto, os gráficos criados antes da ativação do recurso Interface do usuário moderna não adotam automaticamente o tema moderno.

Se você quiser definir a coleção de cores do tema Moderno como a paleta padrão para todas as novas visualizações no Looker, incluindo aquelas que não oferecem suporte a temas de visualização, selecione-a na configuração Cores de visualização padrão na página Configurações do painel de admin depois que o recurso em fase de pré-lançamento Interface do usuário moderna for ativado. Essa configuração ativa apenas as paletas de cores, não os outros recursos do tema Moderno. Se você ativar o recurso Interface do usuário moderna e quiser que as novas visualizações de todos os tipos de gráfico usem as mesmas cores de visualização padrão, selecione Moderna para essa configuração.

Como escolher temas para gráficos individuais

Para definir um tema de visualização para um gráfico, você precisa ter as permissões adequadas e usar as configurações do gráfico.

Permissões do usuário

Para usar e salvar visualizações com o tema de visualização moderno, você precisa ter as seguintes permissões do Looker:

  • Para configurar estilos modernos nas Análises: os usuários precisam ter a permissão explore para os modelos relevantes.
  • Para salvar estilos de visualização modernos em Looks individuais: os usuários precisam ter as permissões explore, save_content e save_looks. Os usuários também precisam ter o nível de acesso Gerenciar acesso, Editar para todos os Looks que quiserem editar.

Configurações do gráfico

Quando o recurso Interface do usuário moderna está ativado, é possível mudar o tema de visualização seguindo estas etapas:

Gráficos de tabela

Para gráficos de tabela, você pode escolher qual tema de visualização quer aplicar fazendo uma seleção no campo Tema da tabela.

  1. Se você estiver visualizando um Look, clique no botão Editar para editá-lo.
  2. Em um Look ou uma Análise, na guia Visualização, clique em Editar para abrir o menu de edição.
  3. Acesse a guia Plotagem do menu de edição.
  4. No campo suspenso Tema da tabela, selecione Moderno ou um dos outros temas de tabela. A visualização é atualizada para mostrar o tema escolhido.
  5. Depois de selecionar o tema, você pode salvar a visualização como um Look ou adicioná-la a um dashboard. A seleção do tema é salva como parte da configuração da visualização.

Outros gráficos

Para gráficos de colunas, barras, linhas, áreas, pizza, rosca ou valor único, é possível escolher o tema de visualização que você quer aplicar fazendo uma seleção no campo Tema de visualização.

  1. Se você estiver visualizando um Look, clique no botão Editar para editá-lo.
  2. Em um Look ou uma Análise, na guia Visualização, clique em Editar para abrir o menu de edição.
  3. Acesse a guia Plotagem do menu de edição.
  4. No campo suspenso Tema de visualização, selecione Moderno ou Clássico. A visualização é atualizada para mostrar o tema escolhido.
  5. Depois de selecionar o tema, você pode salvar a visualização como um Look ou adicioná-la a um dashboard. A seleção do tema é salva como parte da configuração da visualização.

Blocos do painel

  1. Coloque o painel no modo de edição.
  2. Abra a janela Editar bloco do bloco.
  3. Na guia Visualização, clique em Editar para abrir o menu de edição.
  4. Acesse a guia Plotagem do menu de edição.
  5. No campo suspenso Tema de visualização, selecione Moderno ou Clássico. A visualização é atualizada para mostrar o tema escolhido.
  6. Depois de selecionar o tema, clique em Salvar na janela Editar bloco e em Salvar no painel.

Elementos do dashboard do LookML

Os temas Moderno e Clássico podem ser usados em elementos de painéis do LookML para os tipos de gráfico compatíveis.

Para usar temas, use o parâmetro modern2026 e defina-o como true para o tema Moderno ou como false para o tema Clássico.

Para aplicar a coleção de cores Modern a um elemento do dashboard, use o parâmetro collection_id e defina-o como looker_2026.

Retenção de estilo personalizado

Quando você aplica o tema de visualização moderno a uma Análise ou um Look, o Looker atualiza os estilos subjacentes da visualização sem descartar as configurações personalizadas. As opções de formatação personalizada que você salvou explicitamente têm prioridade sobre os novos padrões de tema.

  • Estilos personalizados (preservados): se você tiver personalizado manualmente propriedades de formatação específicas (como inserir códigos de cores personalizados, ajustar limites de eixo para números específicos ou definir manualmente nomes de séries de gráficos), o Looker vai preservar essas substituições exatamente como estão. Suas opções personalizadas não serão substituídas pelo tema Moderno.
  • Propriedades intocadas (atualizadas): todas as configurações de estilo que você não modificou (propriedades deixadas nos estados padrão) são atualizadas automaticamente para o estilo do tema Moderno, como as novas fontes, as linhas de grade suaves e os cantos arredondados.

Por exemplo, se você tiver um gráfico de colunas com o tema Clássico em que as cores das colunas foram personalizadas para combinar com a marca da sua empresa, mudar para o tema Moderno vai preservar essas cores específicas. No entanto, as fontes, o estilo das linhas de grade e os cantos das colunas do gráfico ainda serão atualizados automaticamente para o estilo moderno.

Redefinindo para os valores padrão

Se você quiser aplicar completamente o tema Moderno a uma visualização que contém estilos personalizados, redefina as propriedades personalizadas para os estados padrão:

  1. Em um Look ou painel, entre no modo de edição da visualização.
  2. No menu Editar, localize as propriedades que você quer redefinir (como seleções de cores personalizadas ou tamanhos de fonte).
  3. Limpe os valores personalizados ou selecione as configurações padrão para remover a substituição. As propriedades vão herdar imediatamente os padrões do tema Moderno.

Limitações conhecidas

Enquanto o tema de visualização moderno está em pré-lançamento, as seguintes limitações estão presentes:

  • O tema Moderno está disponível apenas para os tipos de gráfico listados na seção Tipos de gráfico compatíveis. Todas as outras visualizações integradas do Looker, incluindo mapas, serão renderizadas usando o tema Clássico.
  • O tema de visualização moderno se aplica apenas às visualizações integradas do Looker. Isso não afeta as visualizações personalizadas desenvolvidas pelo framework de extensões do Looker ou instaladas no Marketplace do Looker.
  • Não é possível editar os temas de visualização de forma programática usando a API Looker ou o SDK de incorporação.

Painéis modernos

Quando o recurso em fase de pré-lançamento Interface do usuário moderna está ativado, os novos painéis usam o estilo moderno por padrão. O estilo de painel moderno cria painéis com uma aparência moderna e simplificada, com ênfase na densidade de dados. Como alternativa, use o estilo de painel clássico preexistente do Looker. Use a configuração Estilo do painel para selecionar os estilos de painel Moderno ou Clássico.

O uso do estilo de painel moderno não atualiza automaticamente os gráficos no painel para o tema de visualização moderno. Para usar o tema de visualização moderno nos blocos do painel, entre no modo de edição do painel e edite cada bloco que usa um tipo de gráfico compatível para usar o tema de visualização moderno.

A imagem a seguir mostra um exemplo de painel que usa o estilo Moderno com blocos que usam o tema de visualização Moderno.

O estilo de painel clássico é mostrado na documentação Como visualizar painéis.

Diferenças entre os estilos de painel Moderno e Clássico

O estilo de painel moderno foi projetado para melhorar a densidade de dados e oferecer uma experiência de edição mais precisa e coesa.

A tabela a seguir descreve como os painéis que usam o estilo Moderno diferem do estilo Clássico.

Elemento Estilo clássico do painel Estilo de painel moderno
Layout e densidade
  • Usa um layout de grade padrão com espaçamento maior entre os blocos.
  • Design de alta densidade: interface simplificada que reduz a poluição visual e foca nos dados.
Aparência
  • Apresenta elementos legados da interface do Looker e estilo de navegação.
  • Estética moderna: um design simples que segue os padrões do Google.
  • Navegação atualizada: as barras de navegação superior e esquerda foram atualizadas para uma experiência coesa com a nova experiência de análise.

Ativar o estilo de painel moderno (para administradores)

Para disponibilizar o estilo de painel moderno em uma instância, o recurso em fase de pré-lançamento Interface do usuário moderna na página Pré-lançamento do painel de admin precisa estar ativado. O recurso em fase de pré-lançamento é ativado por padrão.

Os painéis criados antes da ativação do recurso Interface do usuário moderna mantêm o estilo clássico, mas podem ser atualizados para o estilo moderno usando a configuração Estilo do painel. Os painéis criados depois que o recurso Interface do usuário moderna é ativado usam o estilo de painel moderno por padrão.

Como definir um estilo para painéis individuais

Para definir um estilo de painel, você precisa ter as permissões adequadas e usar o menu Configurações do painel.

Permissões do usuário

Para usar e salvar painéis com o estilo moderno, os usuários precisam ter a permissão save_dashboards do Looker. Os usuários também precisam ter o nível de acesso Gerenciar acesso, Editar para todos os painéis que quiserem editar.

A configuração de estilo do painel

Quando o recurso Interface do usuário moderna está ativado, o estilo de painel moderno é o padrão para novos painéis. Para definir o estilo de painéis novos ou preexistentes, siga estas etapas:

Painel definido pelo usuário

  1. Coloque o painel no modo de edição.
  2. Abra o menu Configurações do painel.
  3. Na guia Geral do menu Configurações, use a configuração Estilo do painel para selecionar o estilo Moderno ou Clássico nas opções suspensas. O painel é atualizado para mostrar o estilo selecionado.
  4. Clique em Salvar no menu Configurações.
  5. Clique em Salvar no painel para aplicar o estilo selecionado.

dashboard do LookML

Para usar o estilo de painel moderno, defina o parâmetro de painel style como modern. Para usar o estilo de painel clássico, defina o parâmetro de painel style como classic.

Painéis incorporados

Para painéis incorporados que usam temas incorporados, alguns estilos modernos vão parecer diferentes dos estilos em painéis não incorporados. Recomendamos usar o estilo de painel clássico para painéis incorporados que usam temas incorporados.

Qual é a próxima etapa?