Skräddarsy effekter och upplevelser

WinUI ger många vackra effekter, animeringar och metoder för differentiering. Att uppfylla användarnas förväntningar på prestanda och anpassning är dock fortfarande en nödvändig del av skapandet av lyckade program. Windows App SDK-appar kan köras över en stor, varierad familj av Windows-enheter och -konfigurationer, som har olika funktioner. För att ge alla användare en inkluderande upplevelse måste du se till att dina program skalas över enheter och respektera användarinställningar. Anpassning av användargränssnittet kan vara ett effektivt sätt att utnyttja en enhets funktioner och säkerställa en trevlig och inkluderande användarupplevelse.

Anpassning av användargränssnitt är en bred kategori som omfattar arbete för ett högpresterande, vackert användargränssnitt; med avseende på följande områden:

• Respektera och anpassa till användarinställningar för effekter
• Anpassa användarinställningar för animeringar
• Optimera användargränssnittet för de angivna maskinvarufunktionerna

Här går vi igenom hur du skräddarsyr dina effekter och animeringar med det visuella lagret i områdena ovan, men det finns många andra sätt att skräddarsy ditt program för att säkerställa en bra slutanvändarupplevelse. Vägledningsdokument finns tillgängliga om hur du skräddarsyr användargränssnittet för olika enheter och skapar ett dynamiskt användargränssnitt.

Inställningar för användareffekter

Användare kan anpassa sin Windows-upplevelse av olika skäl, vilket program bör respektera och anpassa sig till. Ett område som slutanvändarna kan styra är att ändra vilka typer av effekter de ser används i hela systemet.

Inställningar för transparenseffekter

En sådan effektinställning som användarna kan anpassa är att aktivera/inaktivera transparenseffekter. Detta finns i Windows-inställningar under Anpassningsfärger > eller via Inställningar > Hjälpmedelsvisning > .

När den är aktiverad visas alla effekter som använder transparens som förväntat. Detta gäller för Akryl, HostBackdropBrush eller andra anpassade effektdiagram som inte är helt ogenomskinliga.

När det är inaktiverat återgår akrylmaterialet automatiskt till en solid färg eftersom XAML:s akrylborste har lyssnat på den här händelsen som standard. Här ser vi att kalkylatorappen på lämpligt sätt återgår till en solid färg när genomskinlighetseffekter inte är aktiverade:

För anpassade effekter måste programmet dock svara på egenskapen UISettings.AdvancedEffectsEnabled eller händelsen AdvancedEffectsEnabledChanged och byta ut effekt-/effektgraf för att använda en effekt som inte har någon transparens. Ett exempel på detta finns nedan:

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
}

Inställningar för animeringar

På samma sätt bör program lyssna och svara på egenskapen UISettings.AnimationsEnabled för att säkerställa att animeringar är aktiverade eller inaktiverade baserat på användarinställningar i Inställningar > Hjälpmedel > Visning.

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

Utnyttja funktionernas API

Genom att utnyttja API:er för CompositionCapabilities kan du identifiera vilka sammansättningsfunktioner som är tillgängliga och presterande på viss maskinvara och skräddarsy designen för att säkerställa att slutanvändarna får en högpresterande och vacker upplevelse på alla enheter. API:erna är ett sätt att kontrollera maskinvarusystemfunktioner för att implementera graciös effektskalning över en mängd olika formfaktorer. Detta gör det enkelt att skräddarsy programmet på lämpligt sätt för att skapa en vacker och sömlös slutanvändarupplevelse.

Det här API:et innehåller metoder och en händelselyssnare som kan användas för att fatta skalningsbeslut för programmets användargränssnitt. Funktionen identifierar hur väl systemet kan hantera komplexa kompositions- och återgivningsåtgärder och returnerar sedan informationen i en lättförtjänt modell som utvecklare kan använda.

Använda kompositionsfunktioner

Funktionen CompositionCapabilities används redan för funktioner som akrylmaterial, där materialet justeras till en mer högpresterande effekt beroende på scenariot och maskinvaran.

API:et kan läggas till i befintlig kod i några enkla steg.

1. Hämta funktionsobjektet i programmets konstruktor.

   _capabilities = new CompositionCapabilities();
   

2. Registrera en funktion som ändrat händelselyssnare för din app.

   _capabilities.Changed += HandleCapabilitiesChanged;
   

3. Lägg till innehåll i metoden för återanrop av händelser för att hantera olika kapacitetsnivåer. Detta kanske eller kanske inte liknar nästa steg nedan.

4. Kontrollera först funktionsobjektet när du använder effekter. Överväg att använda villkorsstyrda kontroller eller växla kontrollinstruktioner, beroende på hur du vill skräddarsy effekterna.

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

Fullständig exempelkod finns på GitHub-lagringsplatsen för Windows UI.

Snabba kontra långsamma effekter

Baserat på feedback från de angivna metoderna AreEffectsSupported och AreEffectsFast i API:et CompositionCapabilities kan programmet välja att byta dyra eller ej stödda effekter mot andra effekter som de har optimerat för enheten. Vissa effekter är kända för att konsekvent vara mer resursintensiva än andra och bör användas sparsamt, och andra effekter kan användas mer fritt. För alla effekter bör dock försiktighet användas vid sammanlänkning och animering eftersom vissa scenarier eller kombinationer kan ändra prestandaegenskaperna för effektdiagrammet. Nedan följer några tumregelns prestandaegenskaper för enskilda effekter:

• Effekter som är kända för att ha höga prestandapåverkan är följande – Gaussian Blur, Shadow Mask, BackDropBrush, HostBackDropBrush och Layer Visual. Dessa rekommenderas inte för enheter med låg prestanda (funktionsnivå 9.1-9.3)och bör användas omdömesgillt på enheter med hög prestanda.
• Effekter med medelhög prestandapåverkan inkluderar Färgmatris, vissa Blend Effect BlendModes (Luminosity, Color, Saturation, and Hue), SpotLight, SceneLightingEffect och (beroende på scenario) BorderEffect. Dessa effekter kan fungera med vissa scenarier på enheter med låg prestanda, men försiktighet bör användas vid sammanlänkning och animering. Vi rekommenderar att du begränsar användningen till två eller mindre och endast animerar övergångar.
• Alla andra effekter har låg prestandapåverkan och fungerar i alla rimliga scenarier när du animerar och kedjar.

Relaterade artiklar

• Dynamiska designtekniker
• Vägledning för enhetsanpassning