Nota
L'accesso a questa pagina richiede l'autorizzazione. Puoi provare ad accedere o a cambiare directory.
L'accesso a questa pagina richiede l'autorizzazione. Puoi provare a cambiare directory.
L'acrilico è un tipo di pennello che crea una trama traslucida. Puoi applicare l'acrilico sulle superfici delle app per aggiungere profondità e consentire di stabilire una gerarchia visiva.
API importanti: classe AcrylicBrush, proprietà Background, proprietà Window.SystemBackdrop, classe DesktopAcrylicBackdrop
Acrilico in tema chiaro 
Acrilico in tema scuro 
L'acrilico e il sistema di progettazione Fluent Design
Il sistema di progettazione Fluent Design ti consente di creare un'interfaccia utente moderna e vivace che incorpora luminosità, profondità, movimento, materiale e ridimensionamento. L'acrilico è un componente del sistema di progettazione Fluent Design che aggiunge trama fisica (materiale) e profondità alla tua app. Per altre informazioni, vedere Fluent Design - Material.
Tipi di sfumature acriliche
La caratteristica più evidente dell'acrilico è la trasparenza. Esistono due tipi di miscela acrilica che modificano ciò che è visibile attraverso il materiale:
- L'effetto acrilico di sfondo rivela lo sfondo del desktop e altre finestre che si trovano dietro l'app attualmente attiva, aggiungendo profondità tra le finestre dell'applicazione rispettando le preferenze di personalizzazione dell'utente.
- L'acrilico in-app aggiunge un senso di profondità all'interno della cornice dell'app, fornendo sia messa a fuoco che gerarchia.
Evita di sovrapporre più superfici di acrilico: l'uso di più strati di acrilico di sfondo può causare illusioni ottiche distraenti.
Quando usare l'acrilico
Prendere in considerazione i modelli di utilizzo seguenti per decidere come incorporare l'acrilico nell'app.
Superfici temporanee
- Usa l'acrilico di sfondo per gli elementi temporanei dell'interfaccia utente.
Per le app con menu di scelta rapida, riquadri a comparsa, popup non modali o riquadri di chiusura chiara, è consigliabile usare l'acrilico di sfondo, soprattutto se queste superfici disegnano all'esterno della cornice della finestra principale dell'app. L'uso dell'acrilico in scenari temporanei consente di mantenere una relazione visiva con il contenuto che ha attivato l'interfaccia utente temporanea.
Sfondo del desktop visibile attraverso un menu contestuale aperto utilizzando il background acrylic
Molti controlli XAML disegnano l'acrilico per impostazione predefinita. MenuFlyout, AutoSuggestBox, ComboBox e controlli simili con popup che scompaiono quando si tocca lo schermo utilizzano tutti l'acrilico quando sono aperti.
Supporto dei riquadri dell'interfaccia utente e dei riquadri verticali
- Usare l'acrilico in-app per supportare l'interfaccia utente, ad esempio nelle superfici che possono sovrapporsi al contenuto quando si scorre o vi si interagisce.
Se usi l'acrilico in-app su superfici di navigazione, prova a estendere il contenuto sotto il pannello acrilico per migliorare il flusso nell'app. L'uso di NavigationView eseguirà automaticamente questa operazione. Tuttavia, per evitare un effetto striato, cerca di non inserire più aree di acrilico in posizione adiacente poiché questo può generare una linea di giunzione indesiderata tra le due superfici sfocate. L'acrilico è uno strumento che consente di fornire un'armonia visiva ai tuoi progetti, ma può causare disturbi visivi se è usato in modo errato.
Per i riquadri o le superfici verticali che consentono di separare le sezioni di contenuto dell'app, è consigliabile usare uno sfondo opaco anziché l'acrilico. Se i riquadri verticali vengono aperti in primo piano rispetto al contenuto, come nella modalità Compact o Minimal di NavigationView, è consigliabile usare l'acrilico in-app per consentire la gestione del contesto della pagina quando l'utente ha questo riquadro aperto.
Nota
Il rendering delle superfici di acrilico può comportare un utilizzo intensivo della GPU e, di conseguenza, aumentare il consumo di energia del dispositivo e ridurre la durata della batteria. Gli effetti acrilici vengono disabilitati automaticamente quando un dispositivo entra in modalità Risparmio batteria. Gli utenti possono disabilitare gli effetti acrilici per tutte le app disattivando gli effetti trasparenza in Impostazioni > Personalizzazione > Colori.
Usabilità e adattamento
L'acrilico adatta automaticamente il proprio aspetto in base a una vasta gamma di dispositivi e contesti.
Nella modalità Contrasto elevato, gli utenti continuano a vedere il consueto colore di sfondo selezionato al posto dell'acrilico. Inoltre, sia l'acrilico di sfondo che l'acrilico in-app appaiono come un colore a tinta unita.
- Quando l'utente disattiva Effetti di trasparenza in Impostazioni > Personalizzazione > Colori.
- Quando viene attivata la modalità di risparmio batteria.
- Quando l'app viene eseguita su hardware di fascia bassa.
Inoltre, solo l'acrilico di sfondo sostituirà la sua traslucenza e trama con un colore a tinta unita.
- Quando una finestra dell'app sul desktop viene disattivata.
- Quando l'app è in esecuzione su Xbox, HoloLens o in modalità tablet.
Considerazioni sulla leggibilità
È importante assicurarsi che qualsiasi testo presentato dall'app agli utenti soddisfi i rapporti di contrasto (vedi Requisiti di testo accessibili). Abbiamo ottimizzato le risorse acriliche in modo che il testo soddisfi i rapporti di contrasto sopra l'acrilico. Non è consigliabile posizionare testo con il colore principale sulle superfici acriliche poiché è molto probabile che queste combinazioni non soddisfino i requisiti minimi relativi al rapporto di contrasto con dimensioni dei caratteri di 15 pixel. Cerca di evitare di posizionare collegamenti ipertestuali sugli elementi acrilici. Inoltre, se scegli di personalizzare il colore della tinta acrilica o il livello di opacità, tieni presente l'impatto sulla leggibilità.
Applicare l'acrilico nell'app
Per informazioni su come applicare l'acrilico di sfondo o l'acrilico in-app nella tua app, incluso come creare pennelli acrilici personalizzati, vedi Applicare materiali Mica o Acrilici nelle app desktop per Windows 11.
Cosa fare e cosa non fare
- Usare l'acrilico sulle superfici temporanee.
- Estendi l'acrilico ad almeno un bordo dell'app per fornire un'esperienza fluida integrandosi con l'ambiente circostante dell'app.
- Non utilizzare l'acrilico desktop su ampie superfici di sfondo della tua app.
- Non posizionare più riquadri acrilici l'uno accanto all'altro perché ciò comporta una giunzione visibile indesiderata.
- Non posizionare il testo di colore acceso sulle superfici acriliche.
Come abbiamo progettato l'acrilico
Abbiamo ottimizzato i componenti chiave dell'acrilico per arrivare all'aspetto e alle proprietà uniche. Abbiamo iniziato con traslucidenza, sfocatura e rumore per aggiungere profondità visiva e dimensione alle superfici piatte. Abbiamo aggiunto un livello con modalità di fusione esclusione per garantire il contrasto e la leggibilità dell'interfaccia utente posizionata su uno sfondo acrilico. Abbiamo infine aggiunto una tinta di colore per offrire opportunità di personalizzazione. Tutti insieme, questi livelli costituiscono un materiale nuovo e di facile utilizzo.
La ricetta dell'acrilico: sfondo, sfocatura, modalità di fusione esclusione, sovrapposizione colore/tono, rumore
Esempi
La Raccolta WinUI 3 ti consente di esplorare e sfogliare esempi interattivi di controlli, caratteristiche e funzionalità di WinUI 3. Ottenere l'app da Microsoft Store o ottenere il codice sorgente in GitHub.
Articoli correlati
Collabora con noi su GitHub
L'origine di questo contenuto è disponibile su GitHub, dove è anche possibile creare ed esaminare problemi e richieste pull. Per ulteriori informazioni, consulta la nostra guida per i collaboratori.
