Anpassen von Effekten und Erfahrungen mithilfe der Windows-Benutzeroberfläche

Artikel
01/18/2024

Die Windows-Benutzeroberfläche bietet viele schöne Effekte, Animationen und Mittel zur Differenzierung. Die Erfüllung der Benutzererwartungen in Bezug auf Leistung und Anpassungsfähigkeit ist jedoch nach wie vor ein notwendiger Bestandteil der Entwicklung erfolgreicher Anwendungen. Die Universelle Windows-Plattform unterstützt eine große, vielfältige Gerätefamilie mit unterschiedlichen Features und Funktionen. Um all Ihren Nutzern ein umfassendes Erlebnis zu bieten, müssen Sie sicherstellen, dass Ihre Anwendungen geräteübergreifend skalierbar sind und die Vorlieben der Nutzer berücksichtigen. Die Anpassung der Benutzeroberfläche kann eine effiziente Möglichkeit sein, die Leistungsfähigkeit eines Geräts zu nutzen und eine angenehme und umfassende Benutzererfahrung zu gewährleisten.

Die Anpassung der Benutzeroberfläche ist eine weit reichende Kategorie, die die Arbeit an einer leistungsfähigen und schönen Benutzeroberfläche in den folgenden Bereichen umfasst:

Berücksichtigung und Anpassung der Benutzereinstellungen für Effekte
Anpassen von Benutzereinstellungen für Animationen
Optimieren der Benutzeroberfläche für die jeweiligen Hardwarefunktionen

In diesem Abschnitt werden wir uns damit befassen, wie Sie Ihre Effekte und Animationen mit dem Visual Layer in den oben genannten Bereichen anpassen können, jedoch gibt es noch viele andere Möglichkeiten, Ihre Anwendung so anzupassen, dass sie für den Endbenutzer ein großartiges Erlebnis bietet. Es stehen Anleitung-Dokumente zur Verfügung, wie Sie Ihre Benutzeroberfläche an unterschiedliche Geräte anpassen und eine reaktionsfähige Benutzeroberfläche erstellen können.

Einstellungen für Benutzereffekte

Die Benutzer können ihr Windows-Erlebnis aus verschiedenen Gründen anpassen, was von den Anwendungen respektiert und berücksichtigt werden sollte. Ein Bereich, den Endbenutzer kontrollieren können, ist die Änderung der Effekttypen, die sie in ihrem System sehen.

Einstellungen der Transparenzeffekte

Eine solche Effekteinstellung, die Benutzer anpassen können, ist das Aktivieren/Deaktivieren von Transparenzeffekten. Diese finden Sie in der Einstellungen-App unter Personalisierung der >Farben oder über die Einstellungen-App >Erleichterte Bedienung>.

Transparency Option in Settings

Wenn diese Option aktiviert ist, wird jeder Effekt, der Transparenz verwendet, wie erwartet angezeigt. Dies gilt für Acrylic, HostBackdropBrush oder jede benutzerdefinierte Effektgrafik, die nicht vollständig undurchsichtig ist.

Wenn Sie diese Option deaktivieren, wird das Acrylmaterial automatisch wieder zu einer Volltonfarbe, da der Acrylpinsel von XAML standardmäßig auf dieses Ereignis reagiert hat. Hier sehen wir, dass die Rechner-App ordnungsgemäß auf eine Volltonfarbe zurückfällt, wenn Transparenzeffekte nicht aktiviert sind:

Calculator with Acrylic Calculator with Acrylic Responding to Transparency Settings

Bei benutzerdefinierten Effekten muss die Anwendung jedoch auf die Eigenschaft UISettings.AdvancedEffectsEnabled oder das Ereignis AdvancedEffectsEnabledChanged reagieren und den Effekt/das Effektdiagramm ausschalten, um einen Effekt ohne Transparenz zu verwenden. Ein Beispiel hierfür wird unten gezeigt:

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
}

Animationseinstellungen

Ähnlich sollten Anwendungen auf die Eigenschaft UISettings.AnimationsEnabled reagieren, um sicherzustellen, dass Animationen auf der Grundlage der Benutzereinstellungen in Einstellungen > Erleichterte Bedienung > Anzeige aktiviert oder deaktiviert sind.

Animations Option in Settings

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

Nutzen der API-Funktionen

Indem Sie die CompositionCapabilities-APIs nutzen, können Sie erkennen, welche Anordnungs-Funktionen auf der jeweiligen Hardware verfügbar und funktionsfähig sind, und das Design so anpassen, dass die Endbenutzer auf jedem Gerät ein funktionsfähiges und schönes Erlebnis haben. Die APIs bieten die Möglichkeit, die Fähigkeiten des Hardwaresystems zu überprüfen, um eine anmutige Effektskalierung über eine Vielzahl von Formfaktoren zu implementieren. Dies erleichtert es ihnen, die Anwendung entsprechend anzupassen, um eine schöne und nahtlose Endbenutzerumgebung zu schaffen.

Diese API stellt Methoden und einen Ereignislistener bereit, der verwendet werden kann, um Effektskalierungs-Entscheidungen für die Benutzeroberfläche der Anwendung zu treffen. Das Feature erkennt, wie gut das System komplexe Anordnungs- und Renderingvorgänge verarbeiten kann, und gibt dann die Informationen in einem einfach zu nutzenden Modell zurück, das Entwickler nutzen können.

Verwenden von Anordnungsfunktionen

Die CompositionCapabilities-Funktionalität wird bereits für Features wie Acrylmaterial genutzt, wo das Material je nach Szenario und Hardware auf einen leistungsleistungsfähigeren Effekt zurückfällt.

Die API kann in einigen einfachen Schritten zum vorhandenem Code hinzugefügt werden.

Rufen Sie das Funktionalitäts-Objekt im Konstruktor Ihrer Anwendung ab.
```
_capabilities = CompositionCapabilities.GetForCurrentView();
```
Registrieren Sie einen Listener für das Ereignis Fähigkeiten geändert für Ihre App.
```
_capabilities.Changed += HandleCapabilitiesChanged;
```
Fügen Sie der Ereignis-Rückruf-Methode Inhalte hinzu, um verschiedene Fähigkeitsgrade zu verarbeiten. Dies kann dem nächsten Schritt unten ähneln, muss es aber nicht.
Überprüfen Sie bei der Verwendung von Effekten zuerst das Funktionalitäts-Objekt. Ziehen Sie die Verwendung von bedingten Prüfungen oder Switch-Control-Anweisungen in Betracht, je nachdem, wie Sie die Effekte anpassen möchten.
```
if (_capabilities.AreEffectsSupported())
{
    // Add incremental effects updates here

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

Den vollständigen Beispielcode finden Sie im Windows UI Github Repo.

Schnelle und langsame Effekte

Auf der Grundlage des Feedbacks der bereitgestellten Methoden AreEffectsSupported und AreEffectsFast in der CompositionCapabilities-API kann die Anwendung entscheiden, teure oder nicht unterstützte Effekte gegen andere Effekte ihrer Wahl auszutauschen, die für das Gerät optimiert sind. Einige Effekte sind bekanntermaßen durchweg ressourcenintensiver als andere und sollten sparsam eingesetzt werden, während Sie bei anderen Effekten freier agieren können. Bei allen Effekten sollten Sie jedoch vorsichtig sein, wenn Sie sie verketten und animieren, da einige Szenarien oder Kombinationen die Leistungsmerkmale des Effektdiagramms verändern können. Im Folgenden finden Sie einige Faustregeln für die Leistungsmerkmale der einzelnen Effekte:

Effekte, die sich bekanntermaßen stark auf die Leistung auswirken, sind folgende: Gaussian Blur, Shadow Mask, BackDropBrush, HostBackDropBrush und Layer Visual. Diese werden für Low-End-Geräte (Featureebene 9.1-9.3) nicht empfohlen und sollten auf High-End-Geräten mit Bedacht verwendet werden.
Zu den Effekten mit mittlerer Auswirkung auf die Leistung gehören Color Matrix, bestimmte Blend Effect BlendModes (Helligkeit, Farbe, Sättigung und Farbton), SpotLight, SceneLightingEffect und (je nach Szenario) BorderEffect. Diese Effekte können bei bestimmten Szenarien auf Low-End-Geräten funktionieren, aber bei der Verkettung und Animation sollten Sie vorsichtig sein. Wir empfehlen, die Verwendung auf zwei oder weniger zu beschränken und nur bei Übergängen zu animieren.
Alle anderen Effekte wirken sich nur geringfügig auf die Leistung aus und funktionieren in allen sinnvollen Szenarien beim Animieren und Verketten.