Grafica ed interfacce per la comunicazione Scienze della Comunicazione

Транскрипт

1 Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 20- Considerazioni sulle Graphic User Interface per sistemi mobile Lucidi tradotti e adattati da materiale presente su e

2 Considerazioni sulle GUI ( Graphical User Interface) per Android E le differenze con IPhone

3 Gli elementi dell interfaccia di Android non sono sexy!!! Ci si può girare intorno, fare finta di nulla ma è un argomento che và discusso. Spesso quando si progetta una app si debbono utilizzare necessariamente degli elementi (che poi sono caratteristici) di design già presenti per quella piattaforma quali tasti, barre e icone di sistema, molto spesso progettare App per Android è come «voler mettere del rossetto ad un maiale», ma si può fare in maniera tale da renderlo elegante. Esempio di interfaccia Android Ice Cream Sandwich (ICS) Grafica ed interfacce per la comunicazione A.A. 2013/14 3

4 Android VS Iphone Ecco due esempi di GUI (a sinistra Android a destra IPhone) a confronto Grafica ed interfacce per la comunicazione A.A. 2013/14 4

5 isogna progettare per l oggetto o per il marchio? Conoscendone un poco circa la UI di Android, e i suoi elementi di design è difficile resistere all idea di prendere una UI di IPhone e di riutilizzarla su Android «!per il bene del marchio». Ma siamo sicuri che sia la soluzione giusta? La risposta è sia negativa sia positiva. Grafica ed interfacce per la comunicazione A.A. 2013/14 5

6 L idea funziona per i giochi Qui ci sono due screenshots del gioco della Iconfactory, Frenzic. Come la maggior parte giochi, anche questa si sgancia completamente dall'interfaccia utente standard di iphone e Android, quindi ha senso riutilizzare la stessa GUI per entrambe le piattaforme perché permette al giocatore di cambiare «oggetto» senza trovarsi disorientato nel giocare. Grafica ed interfacce per la comunicazione A.A. 2013/14 6

7 L idea non funziona per i programmi Bisogna trovare un modo per bilanciare il vostro marchio, senza però perdere di vista la piattaforma che viene utilizzata. Dropbox è un grande esempio di un'applicazione che mantiene l'integrità del marchio e utilizza i controlli dell'interfaccia utente nativi della piattaforma in modo elegante ed usabile. Grafica ed interfacce per la comunicazione A.A. 2013/14 7

8 Come progettare per diverse risoluzioni La cosa bella di Android è che funziona su un molti dispositivi differenti. La cosa brutta di Android è che funziona su un molti dispositivi differenti. A differenza di Apple che ha un limitato numero di risoluzioni legate ai dispositivi, Android è stato utilizzato su un numero notevole di dispositivi differenti, dal cellulare alla televisione passando dai tablet e i lettori mp3. La cosa da ricordare quando si progetta per Android è di non utilizzare i layout a larghezza fissa. Se si proviene da un background web, bisogna pensare in termini di «layout fluidi». Layout che si estendono in base alla larghezza del browser, o in questo caso, dello schermo. Grafica ed interfacce per la comunicazione A.A. 2013/14 8

9 La Density Independent Pixel Google ha una grande documentazione su come supportare i formati multipli dello schermo. Lo potete leggere a questo indirizzo: ces/screens_support.html Non bisogna uscire «fuori di testa» quando si inizia a leggere su argomenti quali la " Density Independent Pixel ". Questo significa praticamente che la conversione tra pixel e DP (o DIP) non sarà coerente in tutte le dimensioni e risoluzioni dello schermo. Perciò se creiamo una immagine che sembra grande su uno schermo 480x800, non sarà adeguata per uno schermo 240x400 perché mentre il pixel rimane una misura fissa il DP è sganciato dal singolo pixel ma legato alla risoluzione dello schermo per il numero di pixel. 9

10 Creare tre gruppi di grafica A causa del problema di risoluzione / dimensione dello schermo di cui sopra, Android raccomanda la creazione di tre serie di grafiche per: 1. Hi Density Screens 2. Medium Density Screens 3. Low Density Screens Questo tipo di progettazione eviterà il troncamento del vostro lavoro su schermi di risoluzioni differenti. La griglia di seguito mostra le varie dimensioni dello schermo e risoluzioni si utilizza per i file di Photoshop e Gimp: Sembra parecchio lavoro, la chiave è quella di progettare per lo schermo più piccolo, e poi dimensionare per schermi più grandi. Grafica ed interfacce per la comunicazione A.A. 2013/14 10