Personnaliser les effets & expériences à l’aide de l’interface utilisateur WindowsTailoring effects & experiences using Windows UI

L’interface utilisateur Windows fournit de nombreux effets, animations et moyens magnifiques pour la différenciation.Windows UI provides many beautiful effects, animations, and means for differentiation. Toutefois, la satisfaction des attentes des utilisateurs en matière de performances et de personnalisation est toujours un élément indispensable à la création d’applications réussies.However, meeting user expectations for performance and customizability is still a necessary part of creating successful applications. Le plateforme Windows universelle prend en charge une large gamme d’appareils variés, qui ont des fonctionnalités et des fonctionnalités différentes.The Universal Windows Platform supports a large, diverse family of devices, which have different features and capabilities. Pour fournir une expérience inclusive à tous vos utilisateurs, vous devez vous assurer que vos applications sont mises à l’échelle sur les appareils et respectent les préférences de l’utilisateur.In order to provide an inclusive experience for all your users, you need to ensure your applications scale across devices and respect user preferences. La personnalisation de l’interface utilisateur peut fournir un moyen efficace de tirer parti des fonctionnalités d’un appareil et de garantir une expérience utilisateur agréable et inclusive.UI tailoring can provide an efficient way to leverage a device’s capabilities and ensure a pleasant and inclusive user experience.

La personnalisation de l’interface utilisateur est une catégorie étendue qui englobe le travail pour une interface utilisateur performante et performante pour les domaines suivants :UI tailoring is a broad category encompassing work for performant, beautiful UI with respect to the following areas:

  • Respect et adaptation aux paramètres utilisateur pour les effetsRespecting and adapting to user settings for effects
  • Prise en accueillir des paramètres utilisateur pour les animationsAccommodating user settings for animations
  • Optimisation de l’interface utilisateur pour les fonctionnalités matérielles donnéesOptimizing UI for the given hardware capabilities

Ici, nous allons aborder l’adaptation de vos effets et animations à la couche visuelle dans les zones ci-dessus, mais il existe de nombreux autres moyens de personnaliser votre application pour garantir une expérience utilisateur optimale.Here, we'll cover how to tailor your effects and animations with the Visual Layer in the areas above, but there are many other means to tailor your application to ensure a great end user experience. Des documents d’aide sont disponibles sur la façon d' adapter votre interface utilisateur à différents appareils et de créer une interface utilisateur réactive.Guidance docs are available on how to tailor your UI for various devices and create responsive UI.

Paramètres des effets utilisateurUser effects settings

Les utilisateurs peuvent personnaliser leur expérience Windows pour diverses raisons, quelles applications doivent respecter et s’adapter à.Users may customize their Windows experience for a variety of reasons, which applications should respect and adapt to. Un utilisateur final peut contrôler la modification des types d’effets qu’ils voient utilisés dans tout le système.One area end users can control is changing the types of effects they see used throughout their system.

Paramètres des effets de transparenceTransparency effects settings

L’un des paramètres d’effet que les utilisateurs peuvent personnaliser est l’activation ou la désactivation des effets de transparence.One such effect setting users can customize is turning transparency effects on/off. Cela se trouve dans l’application paramètres, sous personnalisation > couleurs, ou via l’application paramètres > facilité d’accès > afficher.This can be found in the Settings app under Personalization > Colors, or through Settings app > Ease of Access > Display.

Option de transparence dans les paramètres

Lorsqu’il est activé, tout effet qui utilise la transparence s’affiche comme prévu.When turned on, any effect that uses transparency will appear as expected. Cela s’applique à acrylique, HostBackdropBrush ou n’importe quel graphique d’effet personnalisé qui n’est pas entièrement opaque.This applies to Acrylic, HostBackdropBrush, or any custom effect graph that is not fully opaque.

Lorsque cette option est désactivée, le matériau acrylique repasse automatiquement à une couleur unie, car le pinceau acrylique de XAML a écouté cet événement par défaut.When turned off, acrylic material will automatically fall back to a solid color because XAML's acrylic brush has listened to this event by default. Ici, nous voyons que l’application de calculatrice revient à une couleur unie lorsque les effets de transparence ne sont pas activés :Here, we see the calculator app appropriately falling back to a solid color when transparency effects are not enabled:

Calculatrice avec  calculatrice acrylique avec acrylique répondant aux paramètres de transparenceCalculator with Acrylic Calculator with Acrylic Responding to Transparency Settings

Toutefois, pour les effets personnalisés, l’application doit répondre à la propriété uisettings. AdvancedEffectsEnabled ou à l’événement AdvancedEffectsEnabledChanged et faire basculer le graphique effet/effet pour utiliser un effet sans transparence.However, for any custom effects the application needs to respond to the UISettings.AdvancedEffectsEnabled property or AdvancedEffectsEnabledChanged event and switch out the effect/effect graph to use an effect that has no transparency. Voici un exemple :An example of this is below:

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
}

Paramètres des animationsAnimations settings

De même, les applications doivent écouter et répondre à la propriété uisettings. AnimationsEnabled pour s’assurer que les animations sont activées ou désactivées en fonction des paramètres utilisateur dans paramètres > la facilité d’accès > afficher.Similarly, applications should listen and respond to the UISettings.AnimationsEnabled property to ensure animations are turned on or off based on user settings in Settings > Ease of Access > Display.

Option animations dans les paramètres

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

Tirer parti de l’API des fonctionnalitésLeveraging the capabilities API

En tirant parti des API CompositionCapabilities , vous pouvez détecter les fonctionnalités de composition disponibles et performantes sur le matériel donné et adapter la conception pour s’assurer que les utilisateurs finaux bénéficient d’une expérience performante et complète sur n’importe quel appareil.By leveraging the CompositionCapabilities APIs, you can detect which composition features are available and performant on given hardware and tailor the design to ensure end users get a performant and beautiful experience on any device. Les API offrent un moyen de vérifier les capacités du système matériel afin d’implémenter une mise à l’échelle de l’effet normal sur divers facteurs de forme.The APIs provide a means to check hardware system capabilities in order to implement graceful effect scaling across a variety of form factors. Cela facilite la personnalisation de l’application afin de créer une expérience utilisateur de bout parfaite et transparente.This makes it easy to appropriately tailor the application to create a beautiful and seamless end user experience.

Cette API fournit des méthodes et un écouteur d’événements qui peuvent être utilisés pour prendre des décisions en matière de mise à l’échelle de l’interface utilisateur de l’application.This API provides methods and an event listener that can be used to make effect scaling decisions for the application UI. La fonctionnalité détecte la manière dont le système peut gérer les opérations complexes de composition et de rendu, puis renvoie les informations dans un modèle facile à utiliser, que les développeurs peuvent utiliser.The feature detects how well the system can handle complex composition and rendering operations and then returns the information in an easy-to-consume model for developers to utilize.

Utilisation des fonctionnalités de compositionUsing composition capabilities

La fonctionnalité CompositionCapabilities est déjà exploitée pour des fonctionnalités telles que le matériel acrylique, où le matériel revient à un effet plus performant en fonction du scénario et du matériel.The CompositionCapabilities functionality is already being leveraged for features like Acrylic material, where the material falls back to a more performant effect depending on the scenario and hardware.

L’API peut être ajoutée au code existant en quelques étapes simples.The API can be added to existing code in a few easy steps.

  1. Obtenez l’objet de fonctionnalités dans le constructeur de votre application.Acquire the capabilities object in your application’s constructor.

    _capabilities = CompositionCapabilities.GetForCurrentView();
    
  2. Inscrit un écouteur d’événements de fonctionnalités modifiées pour votre application.Register a capabilities changed event listener for your app.

    _capabilities.Changed += HandleCapabilitiesChanged;
    
  3. Ajoutez du contenu à la méthode de rappel d’événement pour gérer différents niveaux de fonctionnalités.Add content to the event callback method to handle various capabilities levels. Cela peut ou non être similaire à l’étape suivante.This may or may not be similar to the next step below.

  4. Lorsque vous utilisez Effects, vérifiez d’abord l’objet Capabilities.When using effects, check the capabilities object first. Envisagez d’utiliser des vérifications conditionnelles ou des instructions de contrôle de commutateur, en fonction de la façon dont vous souhaitez adapter les effets.Consider using conditional checks or switch control statements, depending on how you want to tailor the effects.

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

Vous trouverez un exemple de code complet dans l' [interface utilisateur Windows GitHub référentiel](https://github.com/microsoft/WindowsCompositionSamples/tree/master/SampleGallery/Samples/SDK 15063/CompCapabilities).Full example code can be found on the [Windows UI Github repo](https://github.com/microsoft/WindowsCompositionSamples/tree/master/SampleGallery/Samples/SDK 15063/CompCapabilities).

Effets rapides et lentsFast vs. slow effects

En fonction des commentaires des méthodes AreEffectsSupported et AreEffectsFast fournies dans l’API CompositionCapabilities, l’application peut décider d’échanger des effets coûteux ou non pris en charge pour d’autres effets de leur choix qui sont optimisés pour l’appareil.Based on feedback from the provided AreEffectsSupported and AreEffectsFast methods in the CompositionCapabilities API, the application can decide to swap expensive or unsupported effects for other effects of their choice that are optimized for the device. Certains effets sont connus pour être plus gourmands en ressources que d’autres et doivent être utilisés avec modération, et d’autres effets peuvent être utilisés plus librement.Some effects are known to consistently be more resource intensive than others and should be used sparingly, and other effects can be used more freely. Toutefois, pour tous les effets, vous devez être prudent lorsque vous utilisez le chaînage et l’animation, car certains scénarios ou combinaisons peuvent modifier les caractéristiques de performances du graphique d’effet.For all effects, however, care should be used when chaining and animating as some scenarios or combinations may change the performance characteristics of the effect graph. Voici quelques-unes des caractéristiques de performances de la règle de curseur pour des effets individuels :Below are some rule of thumb performance characteristics for individual effects:

  • Les effets connus pour avoir un impact élevé sur les performances sont les suivants : Flou gaussien, masque Shadow, BackDropBrush, HostBackDropBrush et visuel de couche.Effects that are known to have high performance impact are as follows – Gaussian Blur, Shadow Mask, BackDropBrush, HostBackDropBrush, and Layer Visual. Celles-ci ne sont pas recommandées pour les appareils bas de gamme (niveau de fonctionnalité 9.1-9.3)et doivent être utilisées judicieusement sur les appareils haut de gamme.These are not recommended for low end devices (feature level 9.1-9.3), and should be used judiciously on high end devices.
  • Les effets avec impact moyen sur les performances incluent la matrice de couleurs, certains effets de fusion BlendModes (luminosité, couleur, saturation et teinte), SpotLight, SceneLightingEffect et (selon le scénario) BorderEffect.Effects with medium performance impact include Color Matrix, certain Blend Effect BlendModes (Luminosity, Color, Saturation, and Hue), SpotLight, SceneLightingEffect, and (depending on scenario) BorderEffect. Ces effets peuvent fonctionner avec certains scénarios sur des appareils de bas niveau, mais la prudence doit être utilisée lors du Chaînage et de l’animation.These effects may work with certain scenarios on low end devices, but care should be used when chaining and animating. Recommander la restriction d’utilisation à deux ou moins et l’animation sur les transitions uniquement.Recommend restricting use to two or less and animating on transitions only.
  • Tous les autres effets ont un impact faible sur les performances et fonctionnent dans tous les scénarios raisonnables lors de l’animation et du Chaînage.All other effects have low performance impact and work in all reasonable scenarios when animating and chaining.