Material acrílico

O acrílico é um tipo de Pincel que cria uma textura translúcida. Você pode aplicar o acrílico a superfícies de aplicativos para adicionar profundidade e ajudar a estabelecer uma hierarquia visual.

APIs importantes: classe AcrylicBrush, propriedade Background, propriedade Window.SystemBackdrop, classe DesktopAcrylicBackdrop

Acrílico e o Sistema de Design Fluente

O Sistema de Design Fluente ajuda a criar uma interface do usuário arrojada e moderna que incorpora luz, profundidade, movimento, materiais e escala. O acrílico é um componente do Sistema de Design Fluente que acrescenta textura física (material) e profundidade ao aplicativo. Para saber mais, consulte Fluent Design - Material.

Tipos de mistura de acrílico

A característica mais notável do acrílico é a sua transparência. Existem dois tipos de mistura acrílica que mudam o que é visível através do material:

• O acrílico de fundo revela o papel de parede da área de trabalho e outras janelas que estão por trás do aplicativo ativo no momento, adicionando profundidade entre as janelas do aplicativo enquanto celebra as preferências de personalização do usuário.
• O Acrílico no aplicativo acrescenta uma sensação de profundidade à estrutura do aplicativo, oferecendo foco e hierarquia.

Evite colocar várias superfícies acrílicas em camadas: várias camadas de acrílico de fundo podem criar ilusões de ótica que distraem.

Quando usar o acrílico

Considere os seguintes padrões de uso para decidir a melhor forma de incorporar o acrílico ao seu aplicativo.

Superfícies transitórias

• Utilize acrílico de fundo para elementos transitórios da interface do usuário.

Para aplicativos com menus de contexto, submenus, pop-ups não modais ou painéis de descarte de luz, recomendamos que você use acrílico de plano de fundo, especialmente se essas superfícies forem desenhadas fora do quadro da janela principal do aplicativo. O uso de acrílico em cenários transitórios ajuda a manter uma relação visual com o conteúdo que disparou a interface do usuário transitória.

Muitos controles XAML desenham acrílico por padrão. MenuFlyout, AutoSuggestBox, ComboBox e controles semelhantes com pop-ups de descarte de luz usam acrílico enquanto abertos.

Suporte à interface do usuário e painéis verticais

• Use acrílico no aplicativo para dar suporte à interface do usuário, como em superfícies que podem se sobrepor ao conteúdo quando roladas ou interagidas.

Se você estiver utilizando acrílico integrado no aplicativo em superfícies de navegação, considere estender o conteúdo por baixo da superfície acrílica para melhorar a fluidez no seu aplicativo. O uso do NavigationView fará isso automaticamente. No entanto, para evitar um efeito com listras, não tente colocar várias partes acrílicas de uma borda à outra, pois isso pode criar um fio indesejado entre as duas superfícies desfocadas. O acrílico é uma ferramenta para trazer harmonia visual aos seus projetos, mas quando usado incorretamente pode resultar em ruído visual.

Para os painéis verticais ou superfícies que ajudam a separar o conteúdo por seção em seu aplicativo, é recomendável que você use uma tela de fundo opaca em vez do acrílico. Se seus painéis verticais abrem na parte superior do conteúdo, como os modos Compacto ou Mínimo do NavigationView, sugerimos usar o acrílico do aplicativo para ajudar a manter o contexto da página quando o usuário estiver com esse painel aberto.

Usabilidade e adaptabilidade

O acrílico adapta automaticamente sua aparência para uma variedade de dispositivos e contextos.

No modo Alto Contraste, os usuários continuam visualizando a cor de fundo familiar de sua escolha no lugar do acrílico. Além disso, o acrílico de fundo e o acrílico do aplicativo aparecem como uma cor sólida:

• Quando o usuário desativa os efeitos de transparência em Configurações > Personalização > de cores.
• Quando o modo de economia de bateria está ativado.
• Quando o aplicativo é executado em hardware de baixo custo.

Além disso, apenas o acrílico de fundo irá substituir a translucência e textura por uma cor sólida:

• Quando uma janela de aplicativo na área de trabalho é desativada.
• Quando o aplicativo está em execução no Xbox, HoloLens ou no modo tablet.

Considerações de legibilidade

É importante garantir que qualquer texto que seu aplicativo apresente aos usuários atenda às taxas de contraste (consulte Requisitos de texto acessível). Otimizamos os recursos de acrílico para que o texto atenda às taxas de contraste em cima do acrílico. Não recomendamos colocar texto com cores de destaque em suas superfícies acrílicas, pois essas combinações provavelmente não passarão nos requisitos mínimos de taxa de contraste no tamanho de fonte padrão de 14px. Evite colocar hiperlinks sobre elementos acrílicos. Além disso, se você optar por personalizar a cor da tonalidade acrílica ou o nível de opacidade, lembre-se do impacto na legibilidade.

Aplicar acrílico em seu aplicativo

Para saber como aplicar acrílico de fundo ou acrílico no aplicativo, incluindo como criar pincéis de acrílico personalizados, consulte Aplicar materiais Mica ou Acrílico em aplicativos de desktop para Windows 11.

O que fazer e o que não fazer

• Deve-se usar acrílico em superfícies transitórias.
• Estenda o acrílico para pelo menos uma borda do seu aplicativo para fornecer uma experiência perfeita, misturando-se sutilmente com o ambiente do aplicativo.
• Não coloque acrílico da área de trabalho em grandes superfícies de fundo do seu aplicativo.
• Não coloque vários painéis de acrílico próximos uns dos outros, pois isso resulta em uma costura visível indesejável.
• Não coloque texto de cor de destaque sobre superfícies acrílicas.

Como desenvolvemos o acrílico

Ajustamos os principais componentes do acrílico para chegar à sua aparência e propriedades únicas. Começamos com translucidez, desfoque e ruído para adicionar profundidade visual e dimensão a superfícies planas. Adicionamos uma camada de modo de exclusão da mistura para garantir o contraste e a legibilidade da interface de usuário posicionada em um fundo acrílico. Por fim, adicionamos uma tonalidade de cor para promover oportunidades de personalização. Em conjunto, essas camadas constituem um material novo e utilizável.

Receita do acrílico: fundo, desfoque, mistura de exclusão, sobreposição de cor/tonalidade, ruído

Exemplos

O aplicativo Da Galeria do WinUI 3 inclui exemplos interativos de controles e recursos do WinUI. Obtenha o aplicativo na Microsoft Store ou navegue pelo código-fonte em GitHub.

Artigos relacionados

Visão geral do Fluent Design