Creare le icone dei prodotti non è così difficile come potrebbe sembrare a prima vista. Scopri di più su come progettare da zero l'icona della tua prima app Android!
Indipendentemente dal mercato o dal servizio attraverso il quale viene distribuita un'app, l'icona dell'app è la prima cosa che un potenziale utente noterebbe. Le prime impressioni sono di fondamentale importanza quando si cerca di attirare nuovi utenti, il che significa che le icone sono componenti chiave di qualsiasi applicazione. E, indipendentemente dall’intento dell’app, creare una bella icona dell’applicazione dovrebbe essere una parte importante della fase di sviluppo di ogni app. Sebbene molti sviluppatori di applicazioni tecniche lascino la grafica a designer dedicati, comprendendo il fondamenti del design e applicarli è qualcosa che chiunque può fare, dato un talento per la sperimentazione e analisi. Le icone delle app non fanno eccezione!
Questa guida illustra la creazione di un'icona adattiva per un'app Android di esempio utilizzando un software open source. Anche se il risultato finale potrebbe non essere nel formato richiesto, molti dei suggerimenti di progettazione discussi qui rimarranno validi su più piattaforme.
Dopo il rilascio delle “icone adattive” con Android Oreo, l'icona di un'app può essere costituita da tre livelli fondamentali: an strato di sfondo opaco, uno strato di primo piano con supporto alla trasparenza, e a maschera che definisce la forma dell'icona. Tutti questi livelli hanno una dimensione di 108 x 108 dp, sebbene solo quello interno di 72 x 72 dp possa essere visibile all'utente; l'altra regione, tagliata via dalla maschera in alto, viene utilizzata per effetti speciali all'interno dell'interfaccia utente per far apparire dinamica l'icona. Per chi non lo sapesse, d.p O pixel indipendente dal display rappresenta un'unità di misura per tutta l'interfaccia di Android ed è definita come uguale alla dimensione di un pixel su un display da 160 punti per pollice.)
Nick Butcher di Google parla di un cerchio da 66 dp al centro dell’icona che nessuna maschera può togliere, chiamata “zona sicura”. È qui che verranno inseriti gli elementi primari del design delle nostre icone in seguito, quando arriveremo alla progettazione vera e propria. Tutto ciò che va oltre questo raggio di 33 dp potrebbe non essere visibile nell'icona mentre è attiva una maschera di forma.
Poiché è meglio che le icone siano immagini vettoriali a causa del ridimensionamento dell'interfaccia utente, avremo bisogno di un editor di grafica vettoriale per creare la nostra icona. Inkscape è open source e un'ottima alternativa al software più costoso, quindi sarà la nostra scelta ai fini di questo tutorial. Ho anche progettato un file di progetto disponibile qui che ha la zona sicura e la linea chiave del design di Google contrassegnati e un'elegante maschera di livello che ci consente di visualizzare in anteprima la forma dell'icona.
Con il file di progetto aperto in Inkscape e il file Riempi e traccia (Maiusc+Ctrl+F), Esporta immagine PNG (Maiusc+Ctrl+E) e Strati (Shift+Ctrl+L) si aprono i pannelli, siamo pronti per iniziare. Il pannello Livelli è dove risiede la carne del progetto, con il file Primo piano E Sfondo strati destinati a ospitare i loro componenti titolari, e Linee guida E Maschera destinati ad essere attivati e disattivati (facendo clic sull'icona dell'occhio piccolo accanto a loro) come riferimento.
Un'icona è un'espressione dell'identità di un'app. In quanto tale, deve incorporare sia il carattere della personalità dell'app sia le linee guida di progettazione specifiche della piattaforma, come quelle di Android Il linguaggio del design dei materiali ha da offrire. A scopo dimostrativo, supponiamo di lavorare su un'app meteo che utilizza elementi Material. Potremmo usare il classico motivo del sole e delle nuvole per informare l'utente dello scopo dell'app, e aggiungerne un po' gira su questo design di base utilizzando ombre esterne e geometria per farlo fondere bene nel suo ambiente Android.
Sfondo
Cominciamo con l'impostazione dello sfondo, che sarà composto da un cielo azzurro e un sole giallo al centro. Girando Maschera invisibile, seleziono e rendo visibile il Strato di sfondo, riempi l'intera tela con il Crea rettangoli e quadrati strumento (F4) e imposta il colore di riempimento del rettangolo Riempi e traccia a 64B5F6FF (un azzurro) in conformità con il Tavolozza dei colori dei materiali. Seleziono quindi il Crea cerchi, puntini di sospensione e archi (F5) e tenendo premuto Shift e Ctrl, disegna un cerchio dal centro della linea chiave al secondo cerchio più grande e imposta il suo colore su FFEE58FF, che ci dà un piccolo sole caldo. È sempre bene attenersi alla geometria di base in qualsiasi tipo di progettazione e il linguaggio di progettazione di Android in particolare incoraggia la semplicità. Per rispettare le linee guida sui materiali, concedo anche al sole una sottile ombra esterna Filtri → Ombre e bagliori → Sfalsa ombra.
Primo piano
Venendo a Primo piano, Disegno un gruppo di nuvole attorno al sole disegnando cerchi dalle circonferenze di altri cerchi e do a tutti un colore di riempimento EEEEEEFF. Quindi raggruppo i cerchi in modo appropriato facendo clic con il pulsante destro del mouse su più oggetti e selezionando Gruppoed esegui il generatore di ombre esterne sulle due forme finali che ottengo alla fine. Girando Linee guida invisibile e commutabile Primo piano E Sfondo in alternativa si possono vedere gli strati costitutivi dell’icona della nostra app meteo. Se l'icona dell'app viene trascinata sulla schermata iniziale, le nuvole cadranno a cascata contro un sole stazionario!
Risultato
Maschera ora può essere reso visibile e modificato Modifica percorsi per nodi (F2) per provare a simulare maschere di forme diverse. Inoltre, i due livelli possono essere esportati separatamente utilizzando il file Esporta immagine PNG pannello per l'utilizzo nell'Android Studio, e insieme per a Icona di Google Play.
Durante la creazione dell'icona di un prodotto, è sempre buona pratica provare a prendere lo scopo di un'applicazione, distillarlo nella sua forma visiva più astratta e rappresentarlo utilizzando una geometria semplice. Quanto più semplice è un componente del design, tanto meglio e in modo più affidabile funziona, e questo vale anche nel graphic design. Per la maggior parte degli scopi, la forma di un oggetto in primo piano e un colore a tinta unita o un motivo sullo sfondo (o viceversa) funziona bene, ma come nel nostro caso di esempio, è possibile utilizzare un altro strato di oggetti se in feltro necessario; un eccessivo impilamento o l'utilizzo di ombre esterne complicherà solo il design dell'icona.
Puoi leggere ulteriori informazioni sul design delle icone nelle interfacce Material sul sito ufficiale Sito web dei materialie prendi icone di sistema gratuite da utilizzare nel design delle icone da lo stesso sito web.