Personalizzare effetti ed esperienze

WinUI offre molti effetti belli, animazioni e mezzi per la differenziazione. Tuttavia, soddisfare le aspettative degli utenti per le prestazioni e la personalizzazione è ancora una parte necessaria della creazione di applicazioni riuscite. Le app di Windows App SDK possono essere eseguite in un'ampia famiglia di dispositivi e configurazioni Windows, con funzionalità e funzionalità diverse. Per offrire un'esperienza inclusiva per tutti gli utenti, è necessario garantire la scalabilità delle applicazioni tra dispositivi e rispettare le preferenze utente. La personalizzazione dell'interfaccia utente può offrire un modo efficiente per sfruttare le funzionalità di un dispositivo e garantire un'esperienza utente piacevole e inclusiva.

La personalizzazione dell'interfaccia utente è un'ampia categoria che comprende il lavoro per prestazioni elevate e belle dell'interfaccia utente rispetto alle aree seguenti:

• Rispetto e adattamento alle impostazioni utente per gli effetti
• Accomodamento delle impostazioni utente per le animazioni
• Ottimizzazione dell'interfaccia utente per le funzionalità hardware indicate

In questo caso verrà illustrato come personalizzare gli effetti e le animazioni con il livello visivo nelle aree precedenti, ma esistono molti altri mezzi per personalizzare l'applicazione per garantire un'esperienza utente finale ottimale. La documentazione sulle linee guida è disponibile su come personalizzare la tua interfaccia utente per vari dispositivi e creare interfacce utente reattive.

Impostazioni degli effetti utente

Gli utenti possono personalizzare l'esperienza di Windows per diversi motivi, a cui le applicazioni devono rispettare e adattarsi. Gli utenti finali possono controllare un aspetto cambiando i tipi di effetti utilizzati in tutto il sistema.

Impostazioni degli effetti di trasparenza

Uno di questi effetti che gli utenti possono personalizzare è attivare o disattivare gli effetti di trasparenza. Questa opzione è disponibile in Impostazioni di Windows sotto Personalizzazione > Colori, o tramite Impostazioni > Accessibilità > Schermo.

Opzione Trasparenza nelle Impostazioni

Quando è attivato, qualsiasi effetto che usa la trasparenza verrà visualizzato come previsto. Questo vale per Acrylic, HostBackdropBrush, o qualsiasi grafico di effetti personalizzati che non sia completamente opaco.

Quando è disattivato, il materiale acrilico tornerà automaticamente a un colore a tinta unita perché il pennello acrilico di XAML ha ascoltato questo evento per impostazione predefinita. Qui vediamo l'app Calcolatrice che ritorna appropriatamente a un colore a tinta unita se gli effetti di trasparenza non sono abilitati.

Tuttavia, per qualsiasi effetto personalizzato, l'applicazione deve rispondere alla proprietà UISettings.AdvancedEffectsEnabled o all'evento AdvancedEffectsEnabledChanged e sostituire l'effetto/grafico dell'effetto con uno che non abbia trasparenza. Di seguito è riportato un esempio:

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
}

Impostazioni delle animazioni

Analogamente, le applicazioni devono ascoltare e rispondere alla proprietà UISettings.AnimationsEnabled per garantire che le animazioni siano attivate o disattivate in base alle impostazioni utente in Impostazioni > Facilità di accesso > Display.

Opzione

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

Sfruttare le capacità dell'API

Sfruttando le API CompositionCapabilities , è possibile rilevare quali funzionalità di composizione sono disponibili ed efficienti su hardware specifico e personalizzare la progettazione per garantire agli utenti finali un'esperienza efficiente e accattivante su qualsiasi dispositivo. Le API forniscono un modo per verificare le funzionalità del sistema hardware per implementare un ridimensionamento fluido degli effetti su una varietà di formati. In questo modo è facile personalizzare in modo appropriato l'applicazione per creare un'esperienza utente finale accattivante e senza problemi.

Questa API fornisce metodi e un listener di eventi che possono essere usati per prendere decisioni di ridimensionamento effettive per l'interfaccia utente dell'applicazione. La funzionalità rileva il livello di gestione delle operazioni complesse di composizione e rendering e quindi restituisce le informazioni in un modello facile da utilizzare per gli sviluppatori.

Uso delle funzionalità di composizione

La funzionalità CompositionCapabilities è già in uso per funzionalità come il materiale acrilico, in cui il materiale torna a un effetto più efficiente a seconda dello scenario e dell'hardware.

L'API può essere aggiunta al codice esistente in pochi semplici passaggi.

1. Acquisire l'oggetto capabilities nel costruttore dell'applicazione.

   _capabilities = new CompositionCapabilities();
   

2. Registrare un listener di eventi modificato per l'app.

   _capabilities.Changed += HandleCapabilitiesChanged;
   

3. Aggiungere contenuto al metodo di callback dell'evento per gestire vari livelli di funzionalità. Questo potrebbe essere o meno simile al passaggio successivo seguente.

4. Quando si usano gli effetti, controllare prima l'oggetto capabilities. È consigliabile usare controlli condizionali o istruzioni di controllo switch, a seconda di come si desidera personalizzare gli effetti.

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

Il codice di esempio completo è disponibile nel repository GitHub dell'interfaccia utente di Windows.

Effetti rapidi e lenti

In base al feedback dei metodi AreEffectsSupported e AreEffectsFast forniti nell'API CompositionCapabilities, l'applicazione può decidere di scambiare effetti costosi o non supportati per altri effetti di propria scelta ottimizzati per il dispositivo. Alcuni effetti sono noti per essere costantemente più a elevato utilizzo di risorse rispetto ad altri e devono essere usati con moderazione, e altri effetti possono essere usati più liberamente. Per tutti gli effetti, tuttavia, è necessario prestare attenzione quando si esegue il concatenamento e l'animazione, poiché alcuni scenari o combinazioni possono modificare le caratteristiche delle prestazioni del grafico degli effetti. Di seguito sono riportate alcune indicazioni di massima sulle caratteristiche prestazionali degli effetti individuali.

• Gli effetti noti per avere un impatto elevato sulle prestazioni sono i seguenti: sfocatura gaussiana, maschera d'ombra, BackDropBrush, HostBackDropBrush e livello visivo. Questi non sono consigliati per i dispositivi di fascia bassa (livello di funzionalità 9.1-9.3)e devono essere usati in modo giudizioso sui dispositivi di fascia alta.
• Gli effetti con impatto medio sulle prestazioni includono Matrice dei colori, alcuni BlendMode di effetto blend (luminosità, colore, saturazione e tonalità), SpotLight, SceneLightingEffect e (a seconda dello scenario) BorderEffect. Questi effetti possono funzionare con determinati scenari su dispositivi di fascia bassa, ma è necessario prestare attenzione quando si esegue il concatenamento e l'animazione. È consigliabile limitare l'uso a due o meno e animare solo le transizioni.
• Tutti gli altri effetti hanno un impatto ridotto sulle prestazioni e funzionano in tutti gli scenari ragionevoli durante l'animazione e il concatenamento.

Articoli correlati

• Tecniche di progettazione reattive
• Guida alla personalizzazione dei dispositivi