Iconografia in Windows 11

L'iconografia è un insieme di immagini visive e simboli che aiutano gli utenti a comprendere e muoversi all'interno dell'app. Le icone vengono usate nell'interfaccia utente come metafore visive che rappresentano un concetto, un'azione o uno stato.

Windows 11 usa tre tipi di icone: applicazione, sistema e tipo di file. Questo articolo si concentra sulle prime due.

Icone delle applicazioni

Le icone dell'applicazione rappresentano l'app nella shell di Windows. Vengono usate principalmente per aprire l'applicazione, ma rappresentano anche l'app ovunque venga visualizzata nella shell di Windows.

Le icone dell'app devono rappresentare la funzionalità principale dell'app tramite una metafora. Per altre informazioni sulla progettazione e la costruzione dell'icona dell'app, vedi Iconografia in Windows.

Icone di sistema

Windows 11 introduce un nuovo tipo di carattere icona di sistema, Segoe Fluent Icons. Questo nuovo tipo di carattere integra la geometria in Windows 11.

Tutti i glifi in Segoe Fluent Icons vengono disegnati in uno stile monolinea. Ciò significa che vengono creati con un singolo tratto di 1 epx.

I glifi in Segoe Fluent Icons seguono tre principi estetici:

• Minimo: i glifi contengono solo i dettagli necessari per comunicare il concetto.
• Armonico: i glifi sono basati su forme semplici e geometriche.
• Evoluto: i glifi usano metafore moderne che sono facilmente comprensibili.

Dimensionamento

Le metriche dei tipi di carattere per Segoe Fluent Icons corrispondono al modo in cui i progettisti e gli sviluppatori sono abituati a lavorare con le icone SVG e bitmap.

Ogni glifo del tipo di carattere è progettato in modo che l'impronta dell'area dell'icona sia un quadrato em. Un'icona con dimensioni del carattere da 16 epx è l'equivalente di un'icona 16x16-epx, per rendere il ridimensionamento e il posizionamento più prevedibili.

Anatomia

È possibile costruire visivamente glifi dell'icona di sistema combinando un'icona di base con un'icona di modifica.

Le icone di base sono l'elemento principale di una metafora visiva. Gli elementi di base devono occupare l'intero footprint dell'icona.

Le icone del modificatore modificano il significato dell'icona di base. Gli elementi del modificatore devono essere posizionati in uno dei quadranti inferiori dell'impronta dell'icona.

Solo icona di base
Da solo, l'icona del foglio di carta comunica il concetto di file.

Icona di base + icona del modificatore
L'aggiunta di una freccia su all'icona del file modifica il significato dell'icona per rappresentare un file caricato.

Stratificazione

La sovrapposizione delle icone è una tecnica usata per sovrapporre due glifi. È consigliabile usare il layering delle icone per creare uno stato diverso della stessa icona, ad esempio uno stato attivo o selezionato.

Localizzazione

Comprendere le connotazioni culturali dei simboli. Anche se la iconografia non richiede la localizzazione nella maggior parte dei casi, alcune icone potrebbero essere accettabili in una cultura ma non in un'altra. Convalidare le scelte di iconografia con il contesto in cui verranno usate.

Esempi

Suggerimento

Apri l'applicazione WinUI 3 Gallery e vedi i principi dell'iconografia in azione. L'app Raccolta WinUI 3 include esempi interattivi della maggior parte dei controlli e delle funzionalità di WinUI 3. Scaricare l'app da Microsoft Store od ottenere il codice sorgente su GitHub