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 da interface do usuário moderna na página Pré-lançamento do painel de administração 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 moderna é compatível com os tipos de gráficos integrados mais usados do Looker:

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

Como os temas de visualização moderna e clássica são diferentes

O tema de visualização "Moderno" foi criado para otimizar o layout, a tipografia, as cores e os comportamentos interativos dos gráficos.

A tabela a seguir descreve como as visualizações que usam o tema moderno diferem daquelas 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, compartilha a mesma cor escura.
  • Os rótulos nos eixos costumam girar na diagonal ou são mostrados com reticências (...) para caber no espaço.
  • Google Sans:aplicada a títulos, cabeçalhos e legendas usando peso e gradação de cores intencionais para uma hierarquia clara.
  • Texto Google Sans:aplicado a rótulos e eixos menores para facilitar a leitura.
  • Valores monoespaçados:os números ao longo dos eixos do gráfico usam uma fonte monoespaçada para manter o 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 da padrão (ou seja, diferente de "Linha costeira"), essa configuração substitui a coleção de cores "Linha costeira" 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" é selecionado.
Gráficos cartesianos (barras, colunas, linhas, área)
  • As linhas de grade e de eixo são altamente 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 atenuadas 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 é 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 niveladas umas com as outras.
  • As fatias têm bordas externas arredondadas e um espaçamento sutil entre elas.
  • Os rótulos da 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 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 retos e planos de fundo cinza padrão.
  • Ao passar o cursor ou selecionar fatias do gráfico de pizza, elas se expandem ("incham") e se separam sutilmente do gráfico.
  • Ao manter o ponteiro sobre um gráfico de linhas, a linha específica fica um pouco mais grossa, enquanto as outras ficam mais escuras.
  • As dicas têm cantos arredondados, espaçamento refinado e planos de fundo mais escuros para alto contraste. Compatível com telas sensíveis ao toque e dispositivos móveis.
  • A lógica de filtragem cruzada e os comportamentos de detalhamento do painel permanecem inalterados.

A coleção de cores Modern

Se o recurso em fase de pré-lançamento da interface do usuário moderna estiver ativado, a coleção de cores moderna vai aparecer como uma opção na configuração de cores de visualização padrão. Mesmo que você não selecione a coleção de cores "Moderno" para essa configuração, se escolher o tema de visualização "Moderno" para uma visualização, ela 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 diferenciável (com contraste visual distinto) para pessoas com deficiências na 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 moderna em uma instância, é necessário ativar o recurso em fase de pré-lançamento da interface do usuário moderna na página Pré-lançamento do painel de administração. O recurso de prévia é 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 quiser definir a coleção de cores do tema moderno como a paleta padrão para todas as novas visualizações no Looker, incluindo as que não suportam temas de visualização, selecione essa opção na configuração de cores padrão da visualizaçã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áficos usem as mesmas cores padrão, selecione Moderna nessa configuração.

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 moderna, 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 os Looks que querem editar.

Configurações do gráfico

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

Gráficos de tabela

Para gráficos de tabela, escolha o tema de visualização que você quer aplicar no campo Tema da tabela.

  1. Se você estiver visualizando uma análise detalhada, clique no botão Editar para fazer mudanças.
  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 preferido, você pode salvar a visualização como um Look ou adicioná-la a um dashboard. Sua seleção de tema é salva como parte da configuração da visualização.

Outros gráficos

Para gráficos de colunas, barras, linhas, áreas, pizza, rosca, múltiplos ou de valor único, escolha o tema de visualização que você quer aplicar no campo Tema de visualização.

  1. Se você estiver visualizando uma análise detalhada, clique no botão Editar para fazer mudanças.
  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 preferido, você pode salvar a visualização como um Look ou adicioná-la a um dashboard. Sua seleção de 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 preferido, clique em Salvar na janela Editar bloco e em Salvar no painel para salvar a mudança.

Elementos do dashboard do LookML

Os temas Moderno e Clássico podem ser usados em elementos de painel do LookML para os tipos de gráficos compatíveis.

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

Para aplicar a coleção de cores modernas 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 moderna a uma análise ou um Look, o Looker atualiza os estilos da visualização sem descartar suas configurações personalizadas. As opções de formatação personalizadas que você salvou explicitamente têm prioridade sobre os novos padrões de tema.

  • Estilos personalizados (preservados): se você personalizou manualmente propriedades de formatação específicas (como inserir códigos de cores personalizados, ajustar os limites do eixo para números específicos ou definir manualmente nomes de séries de gráficos), o Looker preserva essas substituições exatamente como estão. Suas opções personalizadas não serão substituídas pelo tema moderno.
  • Propriedades não modificadas (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, linhas de grade discretas e cantos arredondados.

Por exemplo, se você tiver um gráfico de colunas do tema clássico em que personalizou as cores das colunas para corresponder à marca da sua empresa, a mudança para o tema moderno vai preservar essas cores específicas da marca. 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.

Redefinir para os valores padrão

Se 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áficos listados na seção Tipos de gráficos 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 moderna só se aplica às visualizações integradas do Looker. Isso não afeta as visualizações personalizadas desenvolvidas com o framework de extensões do Looker ou instaladas no Marketplace do Looker.
  • Não é possível editar temas de visualização de forma programática usando a API Looker ou o SDK de incorporação.

Dashboards modernos

Quando o recurso em fase de pré-lançamento da Interface do usuário moderna está ativado, os novos painéis usam por padrão o estilo moderno. Usar o estilo de painel moderno cria painéis com uma aparência moderna e simplificada e ê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 estilos modernos ou clássicos para seus painéis.

Usar o 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.

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

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

Como os estilos de painel moderno e clássico são diferentes

O estilo de painel moderno foi criado 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 se concentra nos dados.
Aparência
  • Apresenta elementos legados da interface do Looker e estilo de navegação.
  • Estética moderna:um design minimalista alinhado aos padrões de design do Google.
  • Navegação atualizada:barras de navegação superior e esquerda atualizadas para uma experiência coesa com a nova experiência de análise detalhada.

Ativar o estilo de dashboard moderno (para administradores)

Para disponibilizar o estilo de dashboard moderno em uma instância, o recurso em fase de pré-lançamento da interface do usuário moderna precisa estar ativado na página Prévia do painel de administração. O recurso de prévia é 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.

Definir um estilo para painéis individuais

Para definir um estilo de painel, é necessário 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 os painéis que querem 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 do painel em painéis novos ou já existentes, 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 opção Estilo do painel para selecionar o estilo Moderno ou Clássico nas opções do menu suspenso. 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 style do painel como modern. Para usar o estilo de painel clássico, defina o parâmetro 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?