Icone per le app di Windows

Le icone sintetizzano graficamente un'azione, un concetto o un prodotto. Comprimendo il significato in un'immagine simbolica, le icone possono superare le barriere linguistiche e aiutare a conservare una risorsa preziosa: lo spazio sullo schermo.

Icone efficaci si armonizzano con gli elementi tipografici e con il resto del linguaggio di progettazione. Non mescolano le metafore e comunicano solo ciò che è necessario, nel modo più rapido e semplice possibile.

Le icone possono apparire sia all'interno delle app che al di fuori di esse:

Icone all'interno dell'app

All'interno della tua app, usi le icone per rappresentare un'azione, come copiare un testo o andare alla pagina delle impostazioni.

Icone all'esterno dell'app

Al di fuori della tua applicazione, Windows utilizza un'icona per rappresentare l'applicazione nel menu Start e nella barra delle applicazioni. Se l'utente sceglie di aggiungere la tua applicazione al menu Start, il riquadro di avvio della tua applicazione può presentare l'icona dell'applicazione. L'icona dell'applicazione appare sulla barra del titolo e puoi scegliere di creare una schermata iniziale con il logo dell'applicazione.

Questo articolo descrive le icone all'interno dell'app. Per conoscere le icone esterne alla tua applicazione (icone delle app), consulta l'articolo Iconography in Windows .

Sapere quando usare le icone

Le icone consentono di risparmiare spazio, ma quando è consigliabile usarle?

Usa un'icona per le azioni, come tagliare, copiare, incollare e salvare, o per le voci di un menu di navigazione.

Usa un'icona se ne esiste già una per il concetto che vuoi rappresentare. Per vedere se è presente un'icona, controlla l'elenco delle icone Segoe.

Usa un'icona se il suo significato è intuitivo per l'utente e l'icona risulta abbastanza chiara nelle dimensioni più piccole.

Non usare un'icona se il suo significato non è chiaro o se per renderla chiara è necessaria una forma complessa.

Usa il giusto tipo di icona

Un'icona può essere creata in molti modi. Puoi usare un carattere simbolo come Segoe MDL2 Assets. Puoi creare la tua immagine vettoriale. Puoi anche usare un'immagine bitmap, sebbene non sia consigliabile. Ecco un riepilogo dei modi in cui puoi aggiungere un'icona alla tua app.

Icona predefinita

Microsoft fornisce più di 1.000 icone sotto forma di font Segoe MDL2 Assets. Potrebbe non essere intuitivo ricavare un'icona da un font, ma la tecnologia di visualizzazione dei font di Windows fa sì che queste icone appaiano nitide e definite su qualsiasi display, a qualsiasi risoluzione e a qualsiasi dimensione. Per le istruzioni, vedi Icone Segoe MDL2 Assets.

Tipo di carattere

Non è necessario utilizzare il font Segoe MDL2 Assets. Puoi utilizzare qualsiasi font che l'utente ha installato sul suo sistema, come Wingdings o Webdings.

SVG file

Le risorse Scalable Vector Graphics (SVG) sono ideali per le icone, perché appaiono sempre nitide a qualsiasi dimensione o risoluzione. La maggior parte delle applicazioni di disegno possono effettuare l'esportazione in SVG. Per istruzioni, vedi SVGImageSource.

Oggetto geometrico

Come i file SVG, le geometrie sono risorse vettoriali, pertanto appaiono sempre nitide. Tuttavia, la creazione di una geometria è complicata perché devi specificare singolarmente ogni punto e ogni curva. È una buona scelta solo se hai bisogno di modificare l'icona mentre la tua applicazione è in esecuzione (per esempio per animarla). Per istruzioni, vedi Comandi di spostamento e disegno per geometrie.

Immagine bitmap

Puoi utilizzare un'immagine bitmap (come PNG, GIF o JPEG), anche se non lo consigliamo.

Le immagini bitmap vengono create con una dimensione specifica, pertanto devono essere ridimensionate in base alla grandezza desiderata per l'icona e la risoluzione dello schermo. Quando l'immagine viene ridimensionata (rimpicciolita), può apparire sfocata. Quando viene ridimensionata, può apparire bloccata e pixelata. Se devi usare un'immagine bitmap, ti consigliamo di usare un PNG o un GIF piuttosto che un JPEG.

Fai in modo che un'icona faccia qualcosa

Dopo aver ottenuto un'icona, il passo successivo è quello di farle fare qualcosa associandola a un comando o a un'azione di navigazione. Il modo migliore è aggiungere l'icona a un pulsante o a una barra di comando.

Puoi anche animare un'icona per attirare l'attenzione su un componente dell'interfaccia utente, come il pulsante successivo in un tutorial, o per riflettere l'azione associata all'icona in modo divertente e interessante. Per maggiori informazioni, vedi AnimatedIcon.

Creare un pulsante icona

Puoi inserire un'icona su un pulsante standard. Dato che i pulsanti possono essere utilizzati in una grande varietà di posti, l'utilizzo di un'icona in questo modo ti offre una maggiore flessibilità per quanto riguarda la posizione dell'icona dell'azione.

Ecco un modo per aggiungere un'icona a un pulsante:

Passaggio 1
Imposta la famiglia di caratteri del pulsante su Segoe MDL2 Assets e la sua proprietà content sul valore Unicode del glifo che vuoi utilizzare:

<Button FontFamily="Segoe MDL2 Assets" Content="&#xE102;" />

Passaggio 2
Utilizza uno degli oggetti icona: BitmapIcon, FontIcon, PathIcon, ImageIcon, o SymbolIcon. Questa tecnica ti permette di avere più tipi di icone tra cui scegliere. Inoltre, se vuoi, puoi combinare icone e altri tipi di contenuti, come il testo.

<Button>
    <StackPanel>
        <SymbolIcon Symbol="Play" />
        <TextBlock>Play the movie</TextBlock>
    </StackPanel>
</Button>

Crea una serie di icone sulla barra dei comandi

Quando hai una serie di comandi che vanno insieme, come ad esempio taglia/copia/incolla o una serie di comandi di disegno per un programma di fotoritocco, mettili insieme in una barra dei comandi . Una barra dei comandi può includere uno o più pulsanti della barra dell'app o pulsanti interruttori della barra dell'app, ognuno dei quali rappresenta un'azione. Ogni pulsante ha una proprietà Icon che puoi utilizzare per controllare quale icona visualizzare. Esistono diversi modi per specificare l'icona.

Il modo più semplice è quello di utilizzare l'elenco di icone predefinite. Basta specificare il nome dell'icona, ad esempio Back o Stop, e il sistema la disegnerà:

<CommandBar>
    <AppBarToggleButton Icon="Shuffle" Label="Shuffle" Click="AppBarButton_Click" />
    <AppBarToggleButton Icon="RepeatAll" Label="Repeat" Click="AppBarButton_Click"/>
    <AppBarSeparator/>
    <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/>
</CommandBar>

Per l'elenco completo dei nomi delle icone, vedi il riferimento all'enumerazione Symbol.

Esistono altri modi per fornire icone per un pulsante sulla barra dei comandi:

• FontIcon: L'icona è basata su un glifo della famiglia di font specificata.
• BitmapIcon: L'icona si basa su un file immagine bitmap con l'URI specificato.
• PathIcon: L'icona si basa sui dati di Path .
• ImageIcon: L'icona è basata su un tipo di file immagine che la classe Image supporta.

Per saperne di più sulle barre di comando, consulta l'articolo Barra dei comandi .

Articoli correlati

• Logo e icone delle app
• Icona animata