Aparência moderna e atualizada para aplicativos baseados em modelo

Os aplicativos baseados em modelo são modernizados por etapas. Cada onda atualiza o estilo, o layout e o comportamento para se alinharem com o sistema de design mais recente do Microsoft Fluent, facilitando o uso de aplicativos para que as pessoas possam atingir seus objetivos mais rapidamente. O sistema de design do Fluent fornece consistência, qualidade e coerência de plataforma em toda a Microsoft. Ele também fornece uma base sólida para extensibilidade e recursos futuros, como modo escuro.

Importante

Com o lançamento Wave 1 de 2026, todos os usuários devem usar o New Look (fase 1 do processo de modernização). Os criadores não podem reverter um aplicativo baseado em modelo para a aparência clássica. Esse requisito não inclui a renovação do cabeçalho e da navegação (onda 2).

Ondas de modernização: visão geral

Onda	O que ele inclui	Disponibilidade
Onda 1 – O novo visual	Estilo atualizado para formulários, modos de exibição, painéis, caixas de diálogo e controles; barra de comandos flutuante; grade do Power Apps; novo estilo dos controles de campo	Disponível para uso geral. Obrigatório a partir da Onda 1 de 2026.
Wave 2 - Atualização do cabeçalho e da navegação	Cabeçalho moderno do aplicativo, mapa do site simplificado, mais espaço útil em formulários com um cabeçalho condensado fixo, espaçamento reduzido, comportamento atualizado da barra de comandos	Disponível para uso geral. Aceite participar hoje.

As próximas ondas continuam a construir sobre essa base.

Onda 1: O Novo Visual

Veja o que você pode esperar na experiência do New Look:

• Design atualizado das páginas do formulário, da exibição e do painel, que inclui o uso de sombras e cores de fundo mais brilhantes para criar uma aparência elevada ou flutuante. A aparência flutuante ajuda a separar visualmente as seções e concentra a atenção no conteúdo principal.
• Novos controles baseados no Fluent em formulários, fluxos do processo empresarial e caixas de diálogo. As caixas de diálogo agora são redimensionadas automaticamente com base no conteúdo.
• Uma nova grade do Power Apps no lugar da grade somente leitura nas páginas de exibição e padrão do painel.
• Um novo mecanismo para personalizar as cores do cabeçalho do aplicativo para combinarem com sua identidade visual pessoal ou da organização. Para saber mais, confira Usar temas modernos.

Barra de comandos

A barra de comandos floating alinha-se à experiência Microsoft 365, com espaçamento consistente, cantos arredondados e elevação. No exemplo a seguir, a barra de comandos está em uma seção separada na parte superior da página.

Páginas de exibição

As páginas de exibição usam a nova barra de comandos e com áreas de grade atualizadas que aproveitam as alterações de elevação para ajudar a chamar a atenção do usuário.

A alteração mais significante nas páginas de exibição é a mudança da grade somente leitura para o controle de grade do Power Apps, que apresenta rolagem infinita para uma experiência de navegação de dados moderna. Essa grade também aparece em subgrades e grades associadas nos formulários principais e nos painéis. O controle de grade do Power Apps também dá suporte à edição embutida usando a propriedade Habilitar filtragem . Os criadores podem configurar manualmente suas grades editáveis para usar o controle de grade do Power Apps.

O exemplo a seguir mostra uma página de exibição com a aparência moderna e atualizada.

Páginas de formulário

As páginas de formulário usam a nova barra de comandos com cabeçalhos, guias, seções e fluxos de processos de negócios atualizados. Exibições rápidas, formulários de cartão, cabeçalhos, mapas de site e controles de linha do tempo também apresentam estilo atualizado.

O exemplo a seguir mostra uma página de formulário com a aparência moderna e atualizada.

Controles de campo

Controles de campo, tais como entrada de texto, entrada de ação, pesquisa e controles de caixa de seleção, são projetados e criados usando Fluent components. As atualizações futuras modernizarão mais controles de campo usando o Fluent Design.

As seções de campo, que são contêineres para os campos em um formulário, têm um design mais simplificado. Agora os ícones estão no lado direito dos rótulos dos campos. Alguns ícones redundantes foram removidos para um layout mais limpo. O estilo de entrada e mensagem de erro também é atualizado com base no design do Fluent.

O exemplo a seguir mostra um conjunto de campos com a aparência moderna e atualizada.

Página do painel

A página do painel do sistema, com subgrids e gráficos independentes, usa a nova barra de comandos e tem um estilo semelhante às seções nas páginas de formulário e exibição. Quando você ativa a experiência moderna ou quando usa o canal mensal, as grades do painel do sistema usam o novo Controle de grade do Power Apps. A nova grade não está ativada por padrão.

Controle do gráfico

Os controles de gráfico em páginas de exibição e painéis são atualizados para uma nova paleta de cores para a aparência moderna e atualizada.

Se você personalizar as cores do gráfico, o novo visual substituirá suas cores personalizadas. Para manter suas cores personalizadas, adicione a propriedade CustomColorOverride no arquivo .xml gráfico.

<Chart CustomColorOverride="true">

Onda 2: Atualização de cabeçalho e navegação

A atualização de cabeçalho e navegação (onda 2) baseia-se na Nova Aparência (onda 1) com um cabeçalho de aplicativo redesenhado, mapa de site simplificado e layout de formulário retrabalhado que dá aos usuários mais espaço para se concentrar em seu trabalho.

A imagem a seguir mostra o cabeçalho do aplicativo e o mapa do site com o cabeçalho e a atualização de navegação habilitados.

A imagem a seguir mostra o cabeçalho do formulário com as atualizações do cabeçalho e da navegação habilitadas.

Novidades na atualização de cabeçalho e navegação

• Barra de comandos em largura total: A barra de comandos retorna a um contêiner em largura total na parte superior das páginas de visualização e formulário, dando aos usuários espaço suficiente para mostrar os comandos mais importantes sem relegá-los ao menu de overflow. Esse comportamento substitui o de "comandos compactos", presente em versões preliminares anteriores desse recurso.
• Nova ordenação de comandos: comandos do sistema como Mostrar como e Mostrar Gráfico agora aparecem na terceira posição, depois de Novo e Excluir.
• Mais espaço de trabalho nos formulários: a barra de comandos agora é o único elemento fixo na parte superior da página. A área de resumo e o cabeçalho do formulário rolam para fora com o restante do formulário, dando aos usuários mais espaço para trabalhar. Quando o cabeçalho do formulário sai da vista, um cabeçalho condensado e fixo aparece abaixo da barra de comandos para que o registro seja sempre identificável.
• Cabeçalho de formulário mais responsivo: o cabeçalho do formulário se adapta a diferentes tamanhos de janela e densidades de conteúdo.
• Espaçamento e margens mais apertadas: Ajustes direcionados em todo o app melhoram a consistência, a legibilidade e a densidade geral das páginas.

Note

Se você usou a versão prévia desse recurso, os comandos compactos não estarão mais disponíveis. A barra de comandos agora ocupa toda a largura, tanto nas exibições quanto nos formulários.

Habilitar a atualização de cabeçalho e navegação para um aplicativo existente

A atualização do cabeçalho e da navegação se aplica automaticamente a todos os aplicativos gerados pelo Designer do plano. Para outros aplicativos existentes, ative essa opção seguindo estas etapas:

1. No designer de aplicativos, selecione Configurações na barra de comando.
2. Selecione Recursos e habilite Atualização de cabeçalho e navegação.

Dando continuidade à atualização do cabeçalho e da navegação (fase 2)

O cabeçalho e a atualização de navegação introduzem configurações de aparência que ajudam os usuários a personalizar sua experiência. Por exemplo, os usuários podem controlar a densidade de exibição (versão prévia) para tornar o aplicativo mais compacto ou mais espaçoso para seu fluxo de trabalho. Recursos de aparência adicionais são planejados e documentados nas configurações de Aparência para aplicativos controlados por modelos (versão prévia).

Limitações conhecidas

A aparência moderna e atualizada dos aplicativos baseados em modelo tem algumas limitações:

Aparência moderna e atualizada fora do navegador

O aplicativo de email dá suporte à aparência moderna e atualizada. Ele está ativado por padrão para ambientes no canal mensal como parte da versão de fevereiro de 2026 e será habilitado no canal semestral com a atualização de outubro de 2026.

O aplicativo móvel também dá suporte à aparência moderna e atualizada. Os administradores podem habilitá-lo adicionando a configuração de experiência moderna móvel a uma solução e atualizando o valor para o ambiente ou para aplicativos individuais (2 = ativado). Para obter diretrizes passo a passo, consulte Habilitar a aparência moderna e atualizada para aplicativos controlados por modelos em dispositivos móveis (versão prévia). Para saber mais sobre as configurações do aplicativo, consulte Gerenciar configurações de aplicativo orientadas por modelos no designer de aplicativos.

Alternar temas ou ativar o modo escuro

A troca de temas ou a ativação do modo escuro ainda não é suportada.

Honrando temas clássicos

Com o visual moderno e atualizado, Power Apps não respeita mais as personalizações de tema clássico. No entanto, você pode substituir as cores de cabeçalho do aplicativo para combinar a identidade visual da sua organização com aparência moderna, atualizada. Saiba mais em Alterar a cor do cabeçalho do aplicativo. Outras opções de personalização do tema para a aparência moderna, atualizada não estão disponíveis ainda.

Ícones personalizados

Há suporte somente a ícones de SVG. Se você utilizar outros formatos, como PNG, a navegação não os exibirá e um ícone padrão será exibido.

Perguntas frequentes (FAQs)

1. Posso usar a aparência moderna e atualizada e a densidade de exibição na estrutura de componentes Power Apps ou em componentes de código personalizados?

O tema moderno é passado para componentes do Power Apps component framework. Quando a densidade de exibição é habilitada em um aplicativo controlado por modelo, os valores de token de espaçamento com suporte refletem a densidade atual.

Para saber como aplicar o tema e fazer com que o espaçamento de layout personalizado responda à densidade, consulte Componentes de estilo com temas modernos. Para as propriedades disponíveis em context.fluentDesignLanguage, consulte a referência da API de Temas.

2. Posso usar a aparência moderna e atualizada em páginas personalizadas?

Você pode usar controles modernos com páginas personalizadas e a aparência moderna e atualizada. Atualmente, as páginas personalizadas não usam o tema moderno.

3. Posso alterar a cor do cabeçalho do aplicativo?

Você pode alterar a cor do cabeçalho do aplicativo para corresponder à sua organização ao usar a aparência moderna e atualizada. Para saber mais, confira Usar temas modernos. Outras opções de personalização do tema para a aparência moderna, atualizada não estão disponíveis ainda.

4. Perguntas frequentes sobre o cabeçalho e a atualização de navegação (onda 2)

Posso ativar o cabeçalho e a atualização de navegação sem ativar o New Look?

No. A atualização do cabeçalho e da navegação (Onda 2) se baseia no Novo Visual (Onda 1), portanto, você deve habilitar o Novo Visual para ver as atualizações no cabeçalho e na navegação.

Como habilitar a atualização de cabeçalho e navegação para aplicativos existentes?

A atualização do cabeçalho e da navegação é um recurso de adesão opcional para aplicativos existentes. Habilite-o por meio das configurações do aplicativo. Consulte Ativar a atualização do cabeçalho e da navegação para um aplicativo existente.

Por que não vejo o ícone da Ajuda na barra de comandos global no cabeçalho do aplicativo?

O painel Configurações inclui o link da Ajuda para a documentação.

Onde está o trilho do painel lateral ao lado do painel do Copilot chat?

O alternador de painel lateral fica disponível somente quando há dois ou mais painéis laterais no aplicativo. Quando o Copilot Chat é o único painel lateral, o alternador fica oculto.

Por que o sitemap de um aplicativo gerado pelo Designer de planos parece diferente do sitemap de aplicativos existentes?

Os aplicativos gerados pelo Designer de planos têm um mapa do site simplificado. Os grupos Home, Recent, Pinned e sitemap são desativados por padrão para uma lista simples simplificada de opções de navegação no mapa do site.

Reverter para o visual clássico

Note

A partir da versão 2026 wave 1 , o New Look é obrigatório para todos os usuários. Os criadores não podem mais alterar um aplicativo baseado em modelo para o visual clássico.

Os administradores podem desativar o New Look para todos os usuários atualizando a configuração do aplicativo New look for model driven apps.

1. Abra o https://make.powerapps.com/.
2. Em Soluções, abra uma solução existente com um ou mais aplicativos controlados por modelos.
3. Selecione Adicionar existente>Mais>Configuração.
4. Procure Nova aparência.
5. Selecione Nova aparência para aplicativos baseados em modelo.
6. Selecione Adicionar para adicioná-la à solução.
7. Selecione Nova aparência para aplicativos baseados em modelo no gerenciador de soluções.
8. Atualize Definir valor do ambiente como Não.
9. Adicione os aplicativos à solução para a qual você deseja desativar a nova aparência.
10. Atualize o valor dos aplicativos para Não.
11. Clique em Salvar.
12. Publique todas as personalizações.

Para saber mais sobre essa e outras configurações de aplicativo, consulte Gerenciar configurações de aplicativo orientadas por modelos no designer de aplicativos.