1. Introduzione
Ultimo aggiornamento: 08/04/22
A partire da Android 13, gli utenti possono applicare un tema alle icone in Avvio app adattive. Con questa funzionalità, le icone delle app nei launcher Android supportati vengono colorate per ereditare la colorazione dello sfondo scelto dall'utente e di altri temi.
Crea facilmente tutte le risorse di sistema necessarie per la tua app per Android, incluse le nuove icone a colori adattive.
Obiettivi didattici
- Una comprensione dei diversi tipi di icone delle app e suggerimenti per la loro progettazione.
- Come utilizzare il modello Figma di Avvio app Android.
- Come utilizzare il generatore di asset di Android Studio.
- Come visualizzare l'anteprima dell'icona di avvio con l'emulatore Android Studio.
Prerequisiti
- Conoscenza di base di Figma
- (Facoltativo) Grafica dell'icona dell'app (primo piano, sfondo e monocromatica)
Che cosa ti serve
- Un account Figma
- Un file Figma designlab
- (Facoltativo) Un PC con Android Studio installato
2. Inizia
Configurazione
Per iniziare, devi accedere al file Figma dell'icona dell'app per Android.
Per prima cosa, accedi a Figma o crea un account.
Duplicare dalla community di Figma
Vai al file Modello di avvio app Android o cerca Migrazione ai caratteri variabili all'interno della community di Figma. Fai clic su Ottieni una copia nell'angolo in alto a destra per copiare il file nei tuoi file.
Utilizzare il modello
Il modello di icona Android è composto da due pagine:
- La pagina di copertina illustra brevemente i concetti pertinenti e come utilizzare il modello.
- La pagina del modello include tutto ciò che ti serve per creare le risorse richieste,suddivise in tre frame (Colore, Forma, Play Store).
Nota:nel riquadro Livelli a sinistra, la maggior parte dei livelli e dei gruppi è bloccata e deve rimanere tale. Potrai posizionare le copertine all'interno dei gruppi di copertine sbloccati.
Ma prima di iniziare a creare asset, vediamo cosa creeremo...
3. Icone di sistema Android
Icone in Avvio app
Le icone di avvio, o icone delle app, sono una parte essenziale dell'esperienza di avvio dell'app. Le icone di avvio vengono visualizzate nella schermata Home come punto di accesso all'app.
Forma adattiva
Un'icona adattiva, o AdaptiveIconDrawable, può essere visualizzata in modo diverso a seconda delle funzionalità del singolo dispositivo e dei temi dell'utente. Le icone adattive vengono utilizzate principalmente dal launcher nella schermata Home, ma possono essere utilizzate anche nelle scorciatoie, nell'app Impostazioni, nelle finestre di dialogo di condivisione e nella schermata Panoramica.
Un'icona adattiva può mostrare una varietà di forme su diversi modelli di dispositivi. Ad esempio, può visualizzare una forma circolare su un dispositivo OEM e un quadrato arrotondato su un altro dispositivo. Ogni OEM del dispositivo deve fornire una maschera, che il sistema utilizza per eseguire il rendering di tutte le icone adattive con la stessa forma.
La capacità di adattarsi alla forma consente inoltre al sistema di applicare vari effetti di animazione con l'interazione dell'utente.
Colore adattivo
Ora le icone adattive possono utilizzare il colore dinamico per consentire icone delle app a tema personalizzate.
Se un utente ha attivato le icone delle app a tema (ovvero ha attivato il pulsante di attivazione/disattivazione delle icone a tema nelle impostazioni di sistema) e il launcher supporta questa funzionalità, il sistema utilizza la colorazione dello sfondo e del tema scelti dall'utente per determinare il colore della tinta.
Proprio come le icone che si adattano alla forma, le icone a colori adattive sono composte da un primo piano e uno sfondo. È necessario fornire solo un asset icona monocromatico in primo piano, il sistema si occuperà dello sfondo e del colore con la combinazione di colori estratta.
Puoi anche utilizzare la stessa icona monocromatica per un'icona di notifica.
Legacy
Le icone legacy devono essere incluse per supportare i dispositivi con versioni precedenti di Android o che non supportano le funzionalità adattive (pre-8.0).
Non avranno risorse di primo piano e di sfondo e potranno avere una forma libera. Se utilizzi il modello fornito, l'artwork finale della forma adattiva verrà esportato nelle dimensioni necessarie per l'icona precedente.
Icone di notifica
Una notifica è un messaggio che Android mostra al di fuori della UI dell'app per fornire all'utente promemoria, comunicazioni da altre persone o altre informazioni tempestive dalla tua app. Il sistema mostra le notifiche in posizioni e formati diversi, ad esempio un'icona nella barra di stato, una voce più dettagliata nel riquadro delle notifiche, un badge sull'icona dell'app e sui dispositivi indossabili accoppiati automaticamente.
Artwork dello store
Puoi utilizzare un'immagine in primo piano, screenshot, una breve descrizione e video per mettere in risalto e promuovere la tua app su Google Play e su altri canali promozionali di Google.
L'icona dell'app non sostituisce l'icona in Avvio applicazioni dell'app, ma deve essere una versione a risoluzione e fedeltà superiore.
Analogamente all'icona di avvio, l'artwork può occupare l'intero spazio delle risorse oppure puoi progettare e posizionare elementi dell'artwork come i loghi sulla griglia delle linee guida.
Per pubblicare la scheda dello Store, devi fornire un'icona dell'app quadrata di 512 x 512 px. Se utilizzi il modello di icona dell'app per Android, questo viene fornito durante l'esportazione utilizzando l'elemento grafico Forma adattiva.
4. Best practice per la progettazione
Le icone in Avvio applicazioni avviano l'app per l'utente. In quanto voci della tua app, devono essere riconoscibili e leggibili. Di seguito sono riportate alcune best practice per garantire queste qualità nell'icona del launcher.
Semplifica la grafica. Evita più livelli, molti effetti e testo. Questi dettagli andranno persi o saranno difficili da vedere in dimensioni ridotte. 
Evita forme complesse. inclusi i loghi. Se possibile, utilizza un logo semplificato o prendi in considerazione una simbologia che gli utenti associano alla tua app. Una forma leggibile e distinta contribuisce a creare unità in modo che gli utenti possano riconoscere facilmente la tua app in diversi contesti (colore adattivo e notifiche). 
Utilizzare una griglia. Sfrutta una griglia o delle linee guida per assicurarti che l'artwork in primo piano funzioni quando viene ritagliato, inclusi gli artwork illustrativi a pagina intera. 
Considera il contrasto. Per le icone adattive e legacy, assicurati che il primo piano e lo sfondo dell'icona abbiano un contrasto leggibile. Evita di utilizzare ombreggiature pesanti, che possono essere scambiate per l'ombra del sistema. 
Mantieni le copertine all'interno delle zone sicure. Mantieni gli asset in primo piano entro 72 x 72 px (a meno che tu non voglia utilizzare il formato a pagina intera). Mantieni gli sfondi a 108 x 108 px. Nota: il frame dell'artwork del modello di icona è più grande di 72 x 72 px per consentirti di creare l'artwork dell'icona. Gli asset verranno ridimensionati per rispettare le specifiche.
Formato vettoriale. Prova a utilizzare illustrazioni in formato vettoriale (ad esempio file SVG, AI, PDF ed EPS) anziché in formato raster (ad esempio file PNG, JPG e GIF). In questo modo, la tua grafica è compatibile con le funzionalità più recenti ed è più facile da modificare. 
5. Icone di notifiche e colori adattivi
Ora tocca a te creare le tue icone di sistema Android.
- Individua il file Figma delle icone delle app per Android.
- All'interno del file, individua il frame Colore adattivo. Nel riquadro dei livelli a sinistra, cerca Colore adattivo > Componenti > art > Area grafica dell'icona > Grafica dell'icona a tema < aggiungi la tua icona. Se hai un'icona monocromatica pronta, copiala qui per sostituire l'icona di esempio di Bugdroid e passa al passaggio 6.
- Se non hai un'icona monocromatica, inizia con un logo o un'icona correlati alla tua app. Segui i suggerimenti di progettazione per aggiornare l'icona. Inizia semplificando ed evitando forme complesse. Ad esempio, le illustrazioni utilizzate in-app sono semplificate con forme delle foglie meno complesse. Ombre e dettagli delle linee vengono simulati con spazi bianchi.
- Ora aggiorna le dimensioni utilizzando la griglia di linee guida. Qui abbiamo impostato il ridimensionamento su Scala e ci siamo assicurati che l'illustrazione si trovi all'interno della zona sicura in primo piano. Il modello è configurato con la grafica a 4x e viene ridimensionato automaticamente per l'esportazione, in modo da poter progettare le icone su una scala più ampia.
- Il file è configurato per funzionare con lo strumento per la creazione di temi Material per visualizzare l'anteprima del colore dinamico. Collega lo stile del colore dell'icona in primo piano a Variante su superficie.
- Ora, aprendo Material Theme Builder dal riquadro dei plug-in,puoi rimescolare il colore di origine o aggiungere un'immagine per aggiornare i colori utilizzando il colore di origine estratto.
- Come apparirà nelle diverse risoluzioni o in una schermata Home? Il modello è configurato in modo che le illustrazioni inserite nei relativi frame vengano visualizzate nei vari contesti di anteprima.
- Il sistema utilizza l'icona monocromatica come notifica e la visualizza come tale nelle anteprime.
6. Icone adattive e legacy
Ora creeremo le icone adattive e legacy per garantire un ampio supporto dell'icona.
- All'interno del file, individua il Frame della forma. Nel riquadro dei livelli a sinistra, cerca Sfondo icona < aggiungi la tua icona*. Se hai un'icona pronta, copiala qui per sostituire l'icona di esempio di Bugdroid e passa al passaggio 5.* Se non hai un'icona, inizia con un logo o un'icona correlata alla tua app o riutilizza l'icona monocromatica.
- Aggiorna l'icona in primo piano tenendo presente le best practice per le icone. Qui ho ripristinato i colori originali dell'illustrazione, ma ho mantenuto i dettagli minimali.
- Ora aggiorna le dimensioni utilizzando la griglia di linee guida. Qui abbiamo impostato il ridimensionamento su Scala e ci siamo assicurati che l'illustrazione si trovi all'interno della zona sicura in primo piano.
- Le icone delle app con forma adattiva possono anche avere uno sfondo distinto. In questo modo, i livelli dell'icona possono essere ritagliati in sicurezza e fornire effetti di movimento sottili durante l'interazione. Puoi anche utilizzare e definire uno sfondo a tinta unita in Android Studio.
- Le anteprime vengono aggiornate per mostrare l'aspetto combinato di primo piano e sfondi, nella schermata Home, con forme ritagliate diverse e come icona legacy.
La forma utilizzata per il ritaglio può essere aggiornata nell'anteprima della schermata Home selezionando le icone e modificando l'opzione della variante della forma. 
7. In fase di esportazione
Ottimo, ora hai aggiornato il modello con le icone dell'app. Esportiamoli per l'implementazione.
- Assicurati che non sia selezionato nulla sul canvas.
- Vai al menu Figma > File > Esporta (Maiusc + Cmd + E).
- Nel menu di esportazione, conferma l'esportazione. Verranno scaricati gli asset dal modello.
Che cosa contiene l'esportazione?
Gli asset esportati contengono tutti i file necessari per implementare l'icona dell'app, come segue
- Figma esporta l'icona monocromatica in primo piano per il colore adattivo come file SVG, insieme al primo piano e allo sfondo per le icone di forma adattiva.
- Figma fornisce anche icone legacy in diverse directory mipmap organizzate per risoluzione.
È tutto. La tua icona è pronta per essere inviata al team di sviluppo.
In alternativa, se vuoi visualizzare l'anteprima delle icone in Android Studio e convertire i file SVG nel formato finale dell'asset, vai al passaggio successivo.
8. Utilizzare Image Asset Studio
Inizia a utilizzare Android Studio
- Scarica e installa Android Studio.
- Avvia Android Studio.
Android Studio ti offre opzioni per avviare un nuovo progetto o selezionare progetti esistenti.
- Per il momento, seleziona un nuovo progetto. Le schermate seguenti ti guideranno nella configurazione del nuovo progetto.
- Seleziona un modello qualsiasi tra quelli iniziali, poiché prenderemo in considerazione solo le icone di avvio.
- Dopodiché, assegna un nome al nuovo progetto e seleziona Fine. La creazione del nuovo progetto richiederà alcuni istanti.
Utilizzare Image Asset Studio
Ora possiamo aggiungere le icone al progetto utilizzando uno strumento utile, Asset Studio.
- Per accedere a questo strumento, seleziona Menu File > Nuovo > Asset immagine.
- Quando si apre Image Asset Studio, aggiungi il livello in primo piano selezionando l'icona della cartella in Percorso. Scegli il file SVG esportato come drawable-anydpi/ic_launcher.svg
- Seleziona la scheda Livello di sfondo e scegli il livello di sfondo che è stato esportato. In alternativa, scegli Tipo di asset: Colore per avere uno sfondo di Avvio app a tinta unita.
- Torna al livello in primo piano e controlla che l'immagine rientri nella zona sicura. Ridimensiona l'icona in modo che sia visivamente più efficace.
- Al termine, fai clic su Avanti. Ti verrà chiesto dove devono essere inserite le icone all'interno del progetto (lascia l'impostazione predefinita o passa a Principale). Poi fai clic su Fine. Potrai trovare le risorse di avvio app in res > drawable. Se fai doppio clic, si aprirà un'anteprima dei drawables vettoriali finali.
- Copia e incolla manualmente l'asset del livello monocromatico in res/drawable o res/drawable-v24 oppure importa manualmente il livello monocromatico facendo clic con il tasto destro del mouse sulla cartella res e selezionando Nuovo > Asset vettoriale.
- In res/mipmap-anydpi-v26/ic_launcher.xml e res/mipmap-anydpi-v26/ic_launcher_round.xml aggiungi o modifica l'attributo android:monochrome="path/to/monochrome/asset esistente in modo che punti all'asset monocromatico corretto.
9. Anteprima e risorse
Anteprima nell'emulatore
Abbiamo eseguito questa operazione per aggiungerli al progetto dell'app, in modo da poter visualizzare l'anteprima su un dispositivo reale o un emulatore. Vediamo come appariranno le nostre icone nella realtà.
Per impostazione predefinita, dovresti avere una configurazione dell'emulatore, ma in caso contrario, crea un dispositivo virtuale Android. Fai clic sul pulsante di riproduzione verde. Il progetto verrà creato e l'emulatore verrà aperto.
Asset finali
Ottimo, hai potuto controllare l'aspetto dell'icona del launcher su un dispositivo utilizzando l'emulatore e l'hai aggiunta a un progetto di app. In questo modo, sono stati convertiti nella loro forma di produzione finale. Ma dove sono?
Gli asset sono risorse di un'app per Android e possono essere individuati aprendo il riquadro Risorse (in genere sul lato sinistro). Vai in dettaglio nell'app, quindi trova la cartella Res. Fai clic con il tasto destro del mouse per aprire un menu e seleziona Apri nel Finder (su Mac). Si aprirà una finestra del Finder. Se vuoi, puoi risparmiare tempo di sviluppo e QA convertendo e testando il resto degli asset della tua app utilizzando una procedura simile. Se hai convertito il resto degli asset dell'app, questa cartella può essere condivisa con lo sviluppo.
10. Complimenti
Ottimo lavoro. Hai imparato a conoscere le icone di sistema Android necessarie per creare un'app per Android, progettare le tue icone, esplorare la risorsa del modello di icona e, magari, hai anche approfondito Android Studio per visualizzare l'anteprima e convertire gli asset per la produzione.
Per eventuali domande, non esitare a contattarci in qualsiasi momento utilizzando @MaterialDesign su Twitter.
Continua a seguirci per altri contenuti e tutorial di design su youtube.com/MaterialDesign.