Personalização de efeitos e experiências

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

A personalização da interface do usuário é uma categoria ampla que abrange o trabalho para uma interface do usuário bonita e com desempenho em relação às seguintes áreas:

• Respeitar e adaptar-se às configurações do usuário para efeitos
• Acomodando configurações de usuário para animações
• Otimizando a interface do usuário para os recursos de hardware fornecidos

Aqui, abordaremos como personalizar seus efeitos e animações com a Camada Visual nas áreas acima, mas há muitos outros meios para personalizar seu aplicativo para garantir uma ótima experiência ao usuário final. Estão disponíveis documentos de orientação sobre como adaptar a sua IU para vários dispositivos e criarinterfaces de utilizador responsivas.

Configurações de efeitos de usuário

Os usuários podem personalizar sua experiência do Windows por uma variedade de razões, que os aplicativos devem respeitar e se adaptar. Uma área que os utilizadores finais podem controlar é a alteração dos tipos de efeitos que vêem utilizados em todo o sistema.

Configurações de efeitos de transparência

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

Configurações

Quando ativado, qualquer efeito que use transparência aparecerá conforme o esperado. Isso se aplica a acrílico, HostBackdropBrush ou qualquer gráfico de efeito personalizado que não seja totalmente opaco.

Quando está desligado, o material acrílico voltará automaticamente para uma cor sólida porque o pincel acrílico do XAML detecta esse evento por padrão. Aqui, vemos que a aplicação da calculadora recua adequadamente para uma cor sólida quando os efeitos de transparência não estão ativados.

Calculadora

No entanto, para quaisquer efeitos personalizados, a aplicação precisa responder à propriedade UISettings.AdvancedEffectsEnabled ou ao evento AdvancedEffectsEnabledChanged e substituir o gráfico de efeito/efeito para usar um efeito que não tenha transparência. Um exemplo disso é 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

De forma semelhante, as aplicações devem ouvir e responder à propriedade UISettings.AnimationsEnabled para garantir que as animações sejam ativadas ou desativadas com base nas definições do utilizador em Configurações > Facilidade de Acesso > Exibição.

Configurações

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

Aproveitando a API de recursos

Ao utilizar as APIs de CompositionCapabilities, pode detetar quais recursos de composição estão disponíveis e têm bom desempenho num determinado hardware e personalizar o design para garantir que os utilizadores finais tenham uma experiência com desempenho elevado e visual apelativo em qualquer dispositivo. As APIs fornecem uma maneira de verificar as capacidades do sistema de hardware para implementar o dimensionamento gradual de efeitos em uma variedade de diferentes 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 deteta 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, onde o material volta a ter um efeito mais performante dependendo do cenário e do hardware.

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

1. Adquira o objeto capabilities no construtor do seu aplicativo.

   _capabilities = new CompositionCapabilities();
   

2. Registe um ouvinte de evento de alteração de capacidades para a sua aplicação.

   _capabilities.Changed += HandleCapabilitiesChanged;
   

3. Adicione conteúdo ao método de callback do evento para lidar com vários níveis de capacidades. Isso pode ou não ser semelhante ao próximo passo abaixo.

4. Ao usar efeitos, verifique primeiro o objeto de recursos. Considere o uso de verificações condicionais ou instruções de controle de alternância, dependendo de como você deseja personalizar os efeitos.

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

O código de exemplo completo pode ser encontrado no repositório GitHub da interface do Windows.

Efeitos rápidos vs. lentos

Com base nos resultados dos métodos AreEffectsSupported e AreEffectsFast da API CompositionCapabilities, a aplicação pode decidir trocar efeitos caros ou não suportados por outros efeitos otimizados para o dispositivo, à sua escolha. 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 mais livremente. Para todos os efeitos, no entanto, deve-se ter cuidado ao encadear e animar, pois alguns cenários ou combinações podem alterar as características de desempenho do gráfico de efeitos. Abaixo estão algumas características de desempenho práticas para efeitos individuais:

• Os efeitos que são conhecidos por terem alto impacto no desempenho são os seguintes: Desfoque Gaussiano, Máscara de Sombra, BackDropBrush, HostBackDropBrush e Layer Visual. Estes não são recomendados para dispositivos low-end (nível de recurso 9.1-9.3)e devem ser usados criteriosamente em dispositivos high-end.
• Os efeitos com impacto médio no desempenho incluem Color Matrix, determinados Blend Effect BlendModes (Luminosidade, Cor, Saturação e Matiz), SpotLight, SceneLightingEffect e (dependendo do cenário) BorderEffect. Esses efeitos podem funcionar com certos cenários em dispositivos low-end, mas deve-se ter cuidado ao encadear e animar. Recomenda-se limitar o uso a dois ou menos e animar apenas durante as transições.
• Todos os outros efeitos têm baixo impacto no desempenho e funcionam em todos os cenários razoáveis durante a animação e encadeamento.

Artigos relacionados

• Técnicas de design responsivo
• Orientação para adaptação de dispositivos