Icone della visualizzazione elenco

Le icone della visualizzazione elenco hanno un aspetto molto simile alle icone delle finestre di dialogo, ma hanno un'ombra interna nel punto in cui la fonte di luce si trova sopra l'oggetto. Inoltre, sono progettati per essere utilizzati solo in un elemento ListView. Alcuni esempi sono l'applicazione Impostazioni.

Come descritto nella sezione Fornire set di icone specifici per densità, devi creare set di icone separati per le schermate a bassa, media e alta densità. Ciò garantisce che le icone vengano visualizzate correttamente nell'intervallo di dispositivi su cui può essere installata l'applicazione. Consulta la Tabella 1 per un elenco delle dimensioni finali consigliate delle icone per ciascuna densità. Inoltre, consulta la sezione Suggerimenti per i designer per suggerimenti su come utilizzare più insiemi di icone.

Tabella 1. Riepilogo delle dimensioni dell'icona di visualizzazione elenco terminate per ognuna delle tre densità di schermo generalizzate.

ldpi (120 dpi)
(Schermo a bassa densità)
mdpi (160 dpi)
(Schermo a media densità)
hdpi (240 dpi)
(Schermo ad alta densità)
xhdpi (320 dpi)
(Schermo ad altissima densità)
Dimensioni icona visualizzazione elenco 24 x 24 px 32 x 32 px 48 x 48 px 64 x 64 px

La grafica finale deve essere esportata come file PNG trasparente. Non includere un colore di sfondo.

I modelli per la creazione di icone in Adobe Photoshop sono disponibili nel Pacchetto di modelli di icone.

Tutte le versioni di Android

Le seguenti linee guida descrivono come progettare icone delle visualizzazioni elenco per tutte le versioni della piattaforma Android.

Struttura

  • Un'icona di visualizzazione elenco ha normalmente un frame sicuro da 1 px, ma è consentito utilizzare l'area SafeFrame per il bordo dell'anti-alias di una forma rotonda.
  • Tutte le dimensioni specificate si basano su una scheda grafica di 32 x 32 pixel in Photoshop. Mantieni 1 pixel di spaziatura interna intorno al riquadro di delimitazione all'interno del modello.
Una visualizzazione della struttura
dell'icona Visualizzazione elenco.

Figura 1. SafeFrame e gradiente di riempimento per le icone della visualizzazione elenco. La dimensione dell'icona è 32 x 32.

Luce, effetti e ombre

Le icone della Visualizzazione elenco sono piatte e raffigurate a faccia in giù, con un'ombra interna. Realizzate da un gradiente chiaro e da un'ombra interna, risaltano bene su uno sfondo scuro.

Una vista di luci, effetti e ombre per le icone della visualizzazione elenco.

Figura 2. Luci, effetti e ombre per le icone della visualizzazione elenco.

1.Ombra interna:nero | opacità 57 % | angolo 120° | modalità di fusione normale | distanza 1 px | dimensione 1 px
2.Contesto:nero | colore di sistema standard
Queste icone vengono mostrate solo nelle visualizzazioni elenco.
Nota: l'icona della visualizzazione elenco si trova su una lavagna da 32 x 32 px in Photoshop, senza SafeFrame.

Istruzioni dettagliate

  1. Aggiungi gli effetti mostrati nella Figura 2 per il filtro appropriato.
  2. Esporta l'icona nel formato 32 x 32 come file PNG con la trasparenza attivata.
  3. Crea le forme di base con uno strumento come Adobe Illustrator.
  4. Importa la forma in uno strumento come Adobe Photoshop e ridimensiona per adattarla a un'immagine di 32 x 32 px su uno sfondo trasparente.