Design dell'interfaccia utente Android Icon Design

Proprio come le app iOS dovrebbero emulare l'aspetto della piattaforma iOS, le applicazioni Android di livello professionale dovrebbero essere progettate per integrarsi perfettamente con il resto della piattaforma Android. Oggi, siamo divergenti rispetto alle esercitazioni incentrate sullo sviluppatore e forniamo un'introduzione di base alla progettazione di icone appropriate per la piattaforma Android.

Il team di sviluppo Android fornisce una serie di linee guida per la progettazione di icone per gli sviluppatori di applicazioni e i progettisti dell'interfaccia utente. Non riteniamo che una rapida discussione sul design delle icone di Android si allontani troppo dall'argomento. In varie conferenze del settore, il team di Android ha raccomandato agli sviluppatori di Android di assumere grafici professionisti per progettare la grafica e le icone dell'applicazione. Sebbene questo sia probabilmente lo scenario ottimale, abbiamo riscontrato che lo sviluppatore di app per dispositivi mobili spesso indossa un numero di cappelli e, pertanto, a volte questi compiti grafici ricadono meno inclini graficamente (noi stessi inclusi). Pertanto, riteniamo che questo argomento sia degno di un breve tutorial.

Icon Design Tools

È possibile progettare icone per la piattaforma Android utilizzando diversi strumenti di progettazione grafica. Ti consigliamo di trovarne uno che supporti il ​​formato di file .PSD (formato di file nativo di Adobe Photoshop) e il formato PNG (ideale per la maggior parte della grafica mobile). Utilizziamo i prodotti Adobe Creative Suite, come Photoshop e Illustrator, che supportano questi formati di file. La suite di applicazioni Adobe è ciò che ci è familiare, ma ci sono molti altri programmi disponibili che supportano anche questi formati. Trova uno, e attenersi ad esso!

Passaggio 1: creare icone compatibili

Le applicazioni Android possono utilizzare la gerarchia di file di risorse alternative per fornire risorse (inclusa la grafica) per diversi tipi di dispositivi. Le risorse grafiche dell'applicazione Android (chiamate drawable) sono organizzate in una gerarchia di directory di risorse utilizzando etichette speciali. In particolare per la progettazione di icone, è possibile fornire versioni alternative di icone per dispositivi specifici con densità di schermo diverse.

Ad esempio, le icone sono memorizzate in una directory etichettata ldpi sarebbe stato progettato per adattarsi agli schermi dei dispositivi a bassa densità. Al contrario, le icone sono memorizzate in una directory delle risorse etichettata hdpi sarebbe progettato per adattarsi ai dispositivi dello schermo ad alta densità. Esistono quattro categorie principali di dispositivi specifici per dpi:

  • Il ldpi l'etichetta può essere utilizzata per specificare le risorse delle icone per gli schermi a bassa densità (~ 120 dpi).
  • Il MDPI etichetta può essere utilizzata per specificare risorse di icone per schermi a media densità (~ 160 dpi).
  • Il hdpi l'etichetta può essere utilizzata per specificare le risorse delle icone per gli schermi ad alta densità (~ 240 dpi).
  • Il xhdpi etichetta può essere utilizzata per specificare risorse di icone per schermi ad alta densità (~ 320 dpi).

Nota: ciascuna versione alternativa di un file di icona (memorizzata nella sua directory dpi specifica) deve avere lo stesso nome delle sue alternative nelle altre directory.

Passaggio 2: Scarica l'ultimo pacchetto di icone

Puoi trovare tutte le diverse versioni di un'icona che devi creare per la tua applicazione specifica, oppure puoi utilizzare il pratico pacchetto di icone di icone Android disponibile sul sito web degli sviluppatori Android per aiutarti a generare i file appropriati.

Ti consigliamo di dare un'occhiata al Template Pack e vedere se funziona per te. Il Team Android rilascia una nuova versione ogni tanto, quindi controlla il sito Web per la revisione più recente, che, a partire da ottobre 2011, è su Android Icon Templates Pack, v4.0 (zip, 1,5 MB).

Scarica il file zip ed estrailo sul tuo computer. Ha un README e un certo numero di directory che contengono i modelli di file Photoshop (.PSD) per ogni icona grafica di dimensioni che dovresti creare in circostanze diverse.

Passaggio 3: Esplora il pacchetto di modelli di icone

Android Icon Templates Pack è organizzato nelle directory richieste per diversi tipi di icone. Le icone sono utilizzate per una varietà di scopi. Non avrai bisogno di tutte le icone per ogni applicazione. Alcuni vengono utilizzati solo con tipi specifici di controlli dell'interfaccia utente. I tipi di icone supportati nel pacchetto modelli includono:

  • Le icone di avvio sono forse l'icona più comune che vorresti creare. Questi sono mostrati in posti come la lista delle applicazioni e le schermate Home e cliccati per avviare la tua applicazione.
  • Le icone del menu vengono visualizzate quando l'utente preme il pulsante Menu nella tua applicazione.
  • Le icone della barra delle azioni sono visualizzate nella barra delle azioni dell'applicazione (in precedenza le voci del menu Opzioni).
  • Le icone di dialogo sono visualizzate nell'angolo in alto a sinistra di un controllo della finestra di dialogo, accanto alla finestra di dialogo.
  • Le icone delle liste sono mostrate sui controlli ListView che hanno icone e controlli di testo.
  • Le icone delle schede sono visualizzate sui controlli TabView con icone e etichette di testo.
  • Le icone della barra di stato vengono visualizzate quando si verifica una notifica associata all'applicazione.

Passaggio 4: identificare i tipi di icona necessari

Successivamente è necessario determinare i tipi di icone appropriate per la propria applicazione specifica. Ad esempio, la tua semplice applicazione potrebbe avere due schermi, ciascuno con un controllo ListView. Pertanto, potrebbe essere necessario un set di icone di avvio e diversi set di icone di elenchi.

Ogni "set" di icone dovrebbe avere un singolo nome file condiviso su tutte le versioni di quell'icona per diversi tipi di schermo. I nomi dei file delle icone devono essere in minuscolo e contenere solo lettere, numeri e caratteri di sottolineatura. Il sito Web di sviluppo Android consiglia di assegnare un nome alle icone con il prefisso "ic_" seguito dal tipo, un altro carattere di sottolineatura e infine il nome descrittivo. Ad esempio, "ic_list_songs" o "ic_tab_highscores" sono nomi adatti.

Passaggio 5: creazione di icone di avvio

Diamo un'occhiata ad un rapido esempio di come potresti creare icone di avvio per la tua applicazione Android. All'interno di Android Icon Templates Pack, trova la sottodirectory ic_launcher_template. Ha quattro sottodirectory, ognuna con un file PSD della configurazione dell'icona appropriata. Carica ogni file PSD nel programma di grafica di tua scelta, disegna l'icona usando i parametri del modello e salvalo (idealmente come file PNG) con il nome ic_launcher.png sotto la sua directory, come "drawable_hdpi". Dopo aver creato tutte le versioni appropriate del file ic_launcher.png, trasferirle nella directory delle risorse equivalenti / res / drawable- * nei file del progetto Android (come all'interno di Eclipse). Ciò includerà i file di risorse come parte del pacchetto dell'applicazione. Questo è tutto!

Passaggio 6: supporto di più SDK

Potresti aver notato attraverso varie versioni di Android che cambiano le linee guida di progettazione per le icone. Che cosa devi fare se vuoi fornire la grafica con uno stile corretto per ciascuna delle principali revisioni delle linee guida (1.0, 2.0, 2.3 e ora 4.0)? La semplice risposta è semplicemente fornire grafici in una directory di risorse con nome appropriato. I qualificatori di risorse possono anche essere applicati a livello di API, quindi è sempre possibile aggiungere il livello API appropriato alla fine della directory delle risorse. Ad esempio, potresti avere drawable_hdpi_v14 per memorizzare risorse disegnabili applicabili solo a Ice Cream Sandwich. Vedrai alcuni di questi stili di denominazione nei download del pacchetto di modelli.

Conclusione

Progettare le tue applicazioni Android utilizzando le linee guida di stile fornite dal team di Android conferisce alla tua applicazione un aspetto professionale. Le icone sono uno dei modi più semplici per rendere la tua applicazione completamente integrata con la piattaforma Android. Il team di sviluppo Android fornisce un set di modelli di file per la rapida creazione di icone per vari tipi di controlli dell'interfaccia utente utilizzando le specifiche appropriate per supportare diversi tipi di schermi di dispositivi Android.

Riguardo agli Autori

Gli sviluppatori mobili Lauren Darcey e Shane Conder hanno coautore diversi libri sullo sviluppo di Android: un libro di programmazione approfondito intitolato Sviluppo di applicazioni wireless Android, seconda edizione e Sams ti insegna a sviluppare applicazioni Android in 24 ore, seconda edizione. Quando non scrivono, passano il loro tempo a sviluppare software mobile presso la loro azienda ea fornire servizi di consulenza. Possono essere contattati via email a [email protected], tramite il loro blog su androidbook.blogspot.com e su Twitter @androidwireless.

Hai bisogno di più aiuto nella scrittura di app per Android? Consulta i nostri ultimi libri e risorse!