Una guida pratica alle icone delle app Android: spiegazione delle icone adattive (e come generarle correttamente)
È una sorpresa comune per gli sviluppatori Android alle prime armi: lucidi un singolo PNG quadrato per l'icona della tua app, lo esporti in un formato ordinato 512x512 e sembra perfetto nel tuo editor di immagini. Quindi installi una build di debug su un telefono Samsung e l'icona appare improvvisamente ritagliata e leggermente decentrata, come se parte del logo fosse stata tagliata via. Non c'è niente di sbagliato nel file stesso. Il problema è che una singola immagine quadrata non sarebbe mai sopravvissuta al contatto con il mondo reale dei launcher Android, ognuno dei quali ritaglia, maschera e rimodella le icone in modo diverso. Se non ti sei ancora imbattuto in questo, è solo questione di tempo prima che lo faccia, quindi esaminiamo cosa sta succedendo sotto il cofano e come farlo bene la prima volta.
Perché un singolo PNG quadrato non è più sufficiente
Nei primi anni di Android, le icone delle app erano esattamente come apparivano: un singolo PNG quadrato (o occasionalmente a forma libera) che ogni launcher mostrava così com'è. Ha funzionato bene fino a quando i produttori non hanno iniziato a differenziare visivamente i loro telefoni e uno dei posti più facili per farlo era la schermata principale. Samsung voleva quadrati arrotondati, alcune skin OEM cinesi volevano trattamenti degli angoli diversi e Android di serie alla fine optò per i cerchi. All'improvviso, lo stesso identico file di icone appariva notevolmente diverso, e talvolta visibilmente peggiore, a seconda del telefono su cui era atterrato.
La risposta di Google, introdotta con Android 8.0 Oreo, è stata il sistema di icone adattive. Invece di fornire una forma fissa, gli sviluppatori forniscono grafica a più livelli che il sistema operativo stesso maschera in qualunque forma preferisca un dato launcher. L'identità visiva rimane coerente; cambia solo la silhouette esterna.
Cos'è esattamente un'icona adattiva?
Un'icona adattiva è costituita da due livelli separati, ciascuno dei quali occupa una tela da 108 dp per 108 dp: un livello di sfondo e un livello di primo piano. Android unisce i due insieme e quindi applica qualunque forma di maschera utilizzi l'attuale launcher, che si tratti di un cerchio, un quadrato arrotondato, una lacrima o qualcos'altro di completamente diverso. La struttura a due livelli è ciò che consente ad Android di aggiungere anche sottili effetti di parallasse ed effetti di movimento, poiché i livelli possono spostarsi in modo indipendente quando si tocca o si trascina un'icona.
Nelle risorse di un'app, questo viene solitamente definito tramite un file XML come mipmap-anydpi-v26/ic_launcher.xml, che punta semplicemente ai drawable in background e in primo piano anziché contenere i dati pixel stessi. Un tradizionale ic_launcher.png piatto è ancora mantenuto come riserva per i dispositivi con Android 7.1 o versioni precedenti, che precedono completamente il sistema di icone adattive.
Perché la zona sicura è importante
Ecco la parte che fa inciampare di più le persone. Anche se la tela per ogni livello è 108 dp per 108 dp, solo il cerchio interno da 66 dp per 66 dp, centrato in quella tela, è garantito per essere visibile indipendentemente dalla forma della maschera applicata. Questa regione interna è comunemente chiamata zona sicura. Qualunque cosa al di fuori di essa potrebbe essere mostrata su una maschera circolare e poi improvvisamente ritagliata su una maschera squircle o a goccia più aggressiva, o viceversa.
Questo è esattamente il tipo di problema che si presenta quando un logo viene disegnato vicino ai bordi della tela per massimizzare la sua dimensione visiva: può sembrare perfetto su una maschera circolare ma ritagliarsi in modo non uniforme sulla maschera squircle di Samsung. La soluzione non è una riprogettazione, ma solo un leggero restringimento della grafica in modo che il contenuto significativo rimanga all'interno della zona sicura, indipendentemente dalla forma che alla fine viene applicata.
Forme di avvio che incontrerai
| Forma | Dove lo vedrai |
|---|---|
| Cerchio | Stock Android, Pixel Launcher (l'impostazione predefinita di lunga data) |
| Squircle (quadrato arrotondato) | Samsung One UI e molte altre skin Android |
| Quadrato arrotondato (superellisse) | iOS, applicato automaticamente dal sistema senza controllo da parte dello sviluppatore |
| Lacrima | Offerto come opzione selezionabile su alcune versioni del software Samsung |
| Quadrato con angoli morbidi | Varie skin di avvio di altri produttori |
Il vantaggio pratico è che non puoi scegliere quale di queste forme indosserà la tua icona. Gli utenti che utilizzano launcher Android di serie possono spesso persino scegliere la forma preferita da un menu delle impostazioni. La tua unica vera leva è assicurarti che l'opera d'arte stessa sopravviva a tutti con grazia, che è esattamente ciò che la zona sicura è lì per garantire.
Costruire le risorse: dimensioni e densità di cui hai bisogno
| Secchio di densità | Dimensioni dell'icona del programma di avvio |
|---|---|
| mdpi | 48 x 48 pixel |
| hdpi | 72 x 72 pixel |
| xhdpi | 96 x 96 pixel |
| xxhdpi | 144 x 144 pixel |
| xxxhdpi | 192 x 192 pixel |
| Icona della scheda del Play Store | 512 x 512 pixel |
Se spedisci l'app anche su iOS, aggiungi completamente un altro set, poiché i requisiti delle icone dell'App Store di Apple raggiungono il massimo a 1024x1024 e utilizzano un formato completamente diverso, senza livelli e senza alcuna trasparenza.
Il metodo manuale rispetto all'utilizzo di un generatore
Puoi assolutamente produrre ognuna di queste dimensioni a mano in un editor di immagini o tramite Image Asset Studio integrato di Android Studio, che gestisce il ridimensionamento della densità e le anteprime delle maschere abbastanza bene per un singolo progetto. Il punto in cui questo diventa noioso è quando mantieni un sistema di progettazione su diverse app, hai bisogno di abbinare le esportazioni iOS dalla stessa opera d'arte principale o semplicemente desideri un modo rapido per ricontrollare il comportamento di un progetto in ogni forma prima di impegnarti.
Genera ogni dimensione da un'immagine principale
Il nostro Generatore di icone dell'app prende una singola immagine sorgente ad alta risoluzione e produce il set completo di contenitori di densità Android, la struttura adattiva di primo piano/sfondo delle icone e le dimensioni dell'elenco del Play Store, il tutto da un unico caricamento, quindi non devi esportare e rinominare manualmente una dozzina di file.
Estrazione di icone da un APK esistente
A volte il bisogno va nella direzione opposta. Forse hai ereditato un progetto senza i suoi file di progettazione originali, o vuoi vedere esattamente come un concorrente ha strutturato la sua icona prima di progettarne una tua, o hai semplicemente bisogno di estrarre un'icona da un APK creato per riutilizzarla in uno strumento correlato o risorsa di marketing. Poiché un APK è effettivamente un archivio strutturato contenente tutte le risorse di un'app, i file delle icone di avvio sono fisicamente presenti al suo interno e possono essere estratti direttamente, anziché ricostruiti da zero.
Il nostro Estrattore di icone estrae esattamente questi file da qualsiasi APK caricato, fornendoti le risorse delle icone grezze a qualunque risoluzione fornita dallo sviluppatore originale, che spesso è il modo più veloce per recuperare un file sorgente perduto o studiare come un'altra app ha affrontato lo stesso problema di progettazione.
Errori comuni relativi alle icone che vengono segnalati durante la revisione
- Cottura con imbottitura extra o UI cromata. Un effetto ombra esterna, bordo o angolo arrotondato aggiunto manualmente all'interno dell'immagine è in conflitto con il mascheramento del sistema e spesso appare raddoppiato o disallineato.
- Utilizzando uno sfondo bianco puro senza bordi distinti. Sui launcher a tema luminoso, l'icona può diventare quasi invisibile sullo sfondo della schermata iniziale.
- Dettagli eccessivamente fini. Il testo e il disegno al tratto intricato che sembrano nitidi a 512 px si trasformano spesso in una macchia illeggibile una volta ridotti a 48 px, che è il modo in cui la maggior parte degli utenti lo vede quotidianamente.
- Una mancata corrispondenza tra l'icona dell'elenco del Play Store e l'icona che viene installata. Sia i revisori che gli utenti notano quando questi due non corrispondono e il risultato appare sciatto o, peggio, sospetto.
- Dimenticando completamente il fallback legacy. Se la tua app supporta ancora le versioni Android precedenti alla 8.0, saltare il fallback PNG piatto può lasciare gli utenti con un'icona rotta o dall'aspetto generico.
Testare l'icona sulle forme prima della spedizione
Prima di finalizzare un'icona, vale la pena visualizzarla in anteprima almeno sotto una maschera circolare e una maschera squircle affiancate, piuttosto che dare per scontato che si tradurrà in modo pulito. Image Asset Studio di Android Studio include un'anteprima dal vivo su diverse forme di avvio proprio per questo motivo, e ci vuole solo un minuto per individuare un problema che altrimenti emergerebbe solo dopo la pubblicazione, quando un utente sulla forma di avvio "sbagliata" segnala che qualcosa sembra fuori posto.
Punti chiave
- Le icone adattive utilizzano due livelli, sfondo e primo piano, su una tela da 108 dp, che il sistema maschera in forme diverse per ogni launcher.
- Solo la zona sicura interna da 66 dp è garantita visibile su ogni forma di maschera; mantenere al suo interno opere d'arte significative.
- Hai ancora bisogno di un'icona legacy piatta per i dispositivi con Android 7.1 o versioni precedenti.
- Un generatore può produrre ogni densità richiesta e dimensione dell'elenco del Play Store da un'immagine principale, risparmiando un notevole lavoro di esportazione manuale.
- Le icone possono essere estratte direttamente da un APK esistente quando i file sorgente vengono persi o devi studiare le risorse di un'altra app.
Domande Frequenti (FAQ)
Qual è la dimensione in pixel effettiva richiesta per l'icona di un'inserzione nel Play Store?
512x512 pixel, un PNG a 32 bit con un canale alfa. Questo è separato dalle dimensioni delle icone di avvio raggruppate all'interno dell'APK stesso.
Il livello di sfondo della mia icona adattiva deve essere in tinta unita?
Non necessariamente un colore piatto, ma generalmente dovrebbe essere opaco e semplice, poiché può essere spostato, ridimensionato o mascherato in modi che non puoi controllare completamente. Gli sfondi occupati o trasparenti tendono a sembrare incoerenti tra i vari launcher.
Posso riutilizzare il design adattivo delle mie icone Android direttamente per iOS?
Non direttamente. iOS utilizza un'unica immagine quadrata piatta con arrotondamento degli angoli applicato dal sistema anziché livelli separati, quindi in genere esporti una versione appiattita semplificata della stessa grafica per iOS.
Perché la mia icona viene visualizzata correttamente sul mio telefono ma è sfocata nell'elenco del Play Store?
Questo di solito accade quando l'icona dell'elenco è stata ingrandita da una piccola immagine sorgente. Inizia sempre da un file master di almeno 1024x1024 pixel ed esporta ogni dimensione richiesta a partire da quello.
Cosa succede se ignoro il fallback dell'icona legacy per le versioni Android precedenti?
I dispositivi con Android 7.1 o versioni precedenti, che non supportano le icone adattive, potrebbero ricorrere a un'icona di sistema generica o visualizzare l'icona in modo errato. Puoi saltare l'operazione solo se la versione minima supportata di Android dalla tua app è 8.0 o successiva.
Non hai bisogno di una conoscenza della teoria del design per nulla di tutto ciò, solo della consapevolezza che la tua icona verrà rimodellata in modi che non controlli nel momento in cui lascerà le tue mani. Progetta per la zona sicura, mantieni un fallback legacy, genera tutte le dimensioni richieste da un file master pulito e la tua icona resisterà indipendentemente dal launcher su cui si trova.