Personalização de efeitos e experiências

O WinUI fornece muitos efeitos bonitos, animações e meios para diferenciação. No entanto, atender às expectativas do usuário para desempenho e personalização ainda é uma parte necessária da criação de aplicativos bem-sucedidos. Os aplicativos do SDK de Aplicativos Windows podem ser executados em uma família grande e diversificada de dispositivos e configurações do Windows, que possuem características e capacidades diferentes. Para fornecer uma experiência inclusiva para todos os usuários, você precisa garantir que seus aplicativos sejam dimensionados entre dispositivos e respeitar as preferências do usuário. A adaptação da interface do usuário pode fornecer uma maneira eficiente de aproveitar os recursos de um dispositivo e garantir uma experiência agradável e inclusiva do usuário.

A personalização da interface do usuário é uma categoria ampla que abrange o trabalho para criar uma interface de usuário performática e esteticamente agradável em relação às seguintes áreas:

Respeitando e adaptando-se às configurações do usuário para efeitos
Acomodando as configurações do usuário para animações
Otimizando a interface do usuário para os recursos de hardware especificados

Aqui, abordaremos como adaptar seus efeitos e animações com a Camada Visual nas áreas acima, mas há muitos outros meios para adaptar seu aplicativo para garantir uma ótima experiência do usuário final. Documentos de diretrizes estão disponíveis sobre como personalizar seu de interface do usuário para vários dispositivos e criarde interface do usuário responsivas.

Configurações de efeitos do usuário

Os usuários podem personalizar sua experiência do Windows por uma variedade de motivos, aos quais os aplicativos devem respeitar e se adaptar. Uma área que os usuários finais podem controlar é alterar os tipos de efeitos que eles veem usados em todo o sistema.

Configurações de efeitos de transparência

Um desses efeitos que os usuários podem personalizar é ativar/desativar os efeitos de transparência. Isso pode ser encontrado nas Configurações do Windows em Personalização > Cores >, ou por meio de Facilidade de Acesso > Exibição >.

Opção de Transparência nas Configurações

Quando ativado, qualquer efeito que use transparência será exibido conforme o esperado. Isso se aplica a Acrílico, HostBackdropBrush ou qualquer grafo de efeito personalizado que não seja totalmente opaco.

Quando o material acrílico é desativado, ele retornará automaticamente a uma cor sólida porque o pincel acrílico de XAML reage a esse evento por padrão. Aqui, vemos o aplicativo de calculadora revertendo apropriadamente para uma cor sólida quando os efeitos de transparência não estão habilitados.

Calculadora com acrílico respondendo às configurações de transparência

No entanto, para quaisquer efeitos personalizados, o aplicativo precisa responder à propriedade UISettings.AdvancedEffectsEnabled ou ao evento AdvancedEffectsEnabledChanged e alterar o grafo de efeito/efeito para utilizar um efeito que não possua transparência. Um exemplo disso está abaixo:

public MainPage()
{
   var uisettings = new UISettings();
   bool advancedEffects = uisettings.AdvancedEffectsEnabled;
   uisettings.AdvancedEffectsEnabledChanged += Uisettings_AdvancedEffectsEnabledChanged;
}

private void Uisettings_AdvancedEffectsEnabledChanged(UISettings sender, object args)
{
    // TODO respond to sender.AdvancedEffectsEnabled
}

Configurações de animações

Da mesma forma, os aplicativos devem escutar e responder à propriedade UISettings.AnimationsEnabled para garantir que as animações estejam ativadas ou desativadas com base nas configurações do usuário na Exibição de Facilidade de Acesso > das Configurações>.

Opção de animações nas Configurações

public MainPage()
{
   var uisettings = new UISettings();
   bool animationsEnabled = uisettings.AnimationsEnabled;
   // TODO respond to animations settings
}

Aproveitando a API de funcionalidades

Ao aproveitar as APIs de CompositionCapabilities, você pode detectar quais recursos de composição estão disponíveis e têm alto desempenho em determinado hardware, e adaptar o design para garantir que os usuários finais obtenham uma experiência que seja tanto de alto desempenho quanto esteticamente agradável em qualquer dispositivo. As APIs fornecem um meio de verificar os recursos do sistema de hardware a fim de implementar o escalonamento de efeitos suave em uma variedade de fatores de forma. Isso facilita a adaptação adequada do aplicativo para criar uma experiência de usuário final bonita e perfeita.

Essa API fornece métodos e um ouvinte de eventos que podem ser usados para tomar decisões de dimensionamento de efeito para a interface do usuário do aplicativo. O recurso detecta o quão bem o sistema pode lidar com operações complexas de composição e renderização e, em seguida, retorna as informações em um modelo fácil de consumir para os desenvolvedores utilizarem.

Usando recursos de composição

A funcionalidade CompositionCapabilities já está sendo aproveitada para recursos como material acrílico, em que o material volta a ter um efeito mais funcional, dependendo do cenário e do hardware.

A API pode ser adicionada ao código existente em algumas etapas fáceis.

Adquira o objeto capabilities no construtor do aplicativo.
```
_capabilities = new CompositionCapabilities();
```
Registre um ouvinte para eventos de mudança de funcionalidades no seu aplicativo.
```
_capabilities.Changed += HandleCapabilitiesChanged;
```
Adicione conteúdo ao método de retorno de chamada de evento para lidar com vários níveis de capacidades. Isso pode ou não ser semelhante à próxima etapa abaixo.

Ao usar efeitos, verifique primeiro o objeto de funcionalidades. Considere usar verificações condicionais ou alternar instruções de controle, dependendo de como você deseja adaptar os efeitos.

if (_capabilities.AreEffectsSupported())
{
    // Add incremental effects updates here

    if (_capabilities.AreEffectsFast())
    {
        // Add more advanced effects here where applicable
    }
}

Código de exemplo completo pode ser encontrado no repositório GitHub da interface do usuário do Windows.

Efeitos rápidos versus lentos

Com base no feedback dos métodos AreEffectsSupported e AreEffectsFast na API CompositionCapabilities, o aplicativo pode decidir trocar efeitos caros ou sem suporte por outros efeitos de sua escolha que sejam otimizados para o dispositivo. Alguns efeitos são conhecidos por serem consistentemente mais intensivos em recursos do que outros e devem ser usados com moderação, e outros efeitos podem ser usados com mais liberdade. Para todos os casos, no entanto, é necessário ter cuidado ao encadear e animar, pois alguns cenários ou combinações podem alterar as características de desempenho do grafo de efeito. Abaixo estão algumas características de desempenho geral para efeitos individuais:

Os efeitos que são conhecidos por terem um impacto de alto desempenho são os seguintes : Gaussian Blur, Shadow Mask, BackDropBrush, HostBackDropBrush e Layer Visual. Eles não são recomendados para dispositivos low-end (nível de recurso 9.1-9.3) e devem ser usados de forma criteriosa em dispositivos high-end.
Efeitos com impacto de desempenho médio incluem Matriz de Cores, certos BlendModes de Efeito de Mistura (Luminosidade, Cor, Saturação e Matiz), SpotLight, SceneLightingEffect e (dependendo do cenário) BorderEffect. Esses efeitos podem funcionar com determinados cenários em dispositivos de baixo desempenho, mas deve-se ter cuidado ao encadear e animar. É recomendável restringir o uso a dois ou menos e animar somente em transições.
Os outros efeitos não têm impacto significativo no desempenho e funcionam em todos os cenários razoáveis ao serem animados e encadeados.

Comentários

Esta página foi útil?

Last updated on 2026-03-17