Material Design: uno sguardo più approfondito alla nuova interfaccia di Android L

03 Luglio 2014 54

Material Design, la nuova interfaccia adottata da Android L il cui stile viene ripreso su tutto l'ecosistema Google presentato allo scorso Google I/O, taglia i ponti con il passato rappresentato da Holo, lo stile adottato per Android dalla versione 4.0 sino alla più recente 4.4.4.

Google fa una scelta che guarda avanti e propone una serie di accorgimenti grafici e non volti a rendere la nuova interfaccia fluida, semplice e efficace, attraverso un sapiente gioco di animazioni coerenti con il loro scopo, l'utilizzo di elementi molto più colorati e un'interfaccia generale flat che poi alla fine tanto flat poi non è.


Il concetto di profondità è infatti lo spunto da cui si deve partire per parlare di Material Design. Google propone un'interfaccia basata sul posizionamento degli elementi su diversi layer, dando a ciascuno il suo giusto collocamento in base alla sua importanza.

In questo modo avremmo lo sfondo nello strato più basso, al quale si sovrappone la card che ospita il contenuto da visualizzare, seguito dal nuovo Floating Action button, dalla status bar e, infine, dalla Navigation Bar, la quale risulta sempre in primo piano, pur presentando degli effetti di trasparenza che non nascondono gli elementi presenti sotto di essa.

Questi elementi sono dei punti cardine sia per Google che per gli sviluppatori, i quali possono realizzare applicazione che si avvantaggiano della profondità dell'interfaccia per offrire il proprio contenuto in maniera coerente e chiara rispetto al resto del sistema operativo e delle applicazioni già integrate nel sistema.

Tutto questo viene arricchito da effetti di ombreggiatura calcolati in tempo reale, sia per le schede che per i caratteri, dal momento che il sistema operativo tiene conto di una reale fonte di illuminazione nel creare l'ombra di ogni elemento dell'interfaccia.


Il Floating Action Button, FAB da ora, è un altro elemento dell'interfaccia che merita particolare attenzione. L'attuale applicazione di Google+ per Android ci mostra già un esempio di quello che diventerà uno standard per le future applicazioni su Android L.

Nell'app dedicata al social network di Google, è possibile notare un tasto circolare nella parte destra dell'applicazione in grado apparire e scomparire in base all'utilizzo che stiamo facendo dell'applicazione e ci permette di inserire un post al volo senza dover andare a cercare un ulteriore comando in altri elementi della schermata.

FAB avrà la stessa funzione in Android L, proponendoci un comando rapido sempre attivo e in primo piano, in grado di offrire delle funzionalità accessibili velocemente e contestualizzate in base all'applicazione che ne fa uso: può espandersi per integrare una lista di azioni o diventare il tasto play/stop in un lettore musicale, le possibilità sono infinite.


Il colore è uno degli elementi che caratterizza in maniera drastica il passaggio da Holo a Material Design. Se, sino ad ora, sono state scelte delle linee squadrate accompagnate dall'abbondanza di neri e blu, diventati neri e bianchi con KitKat, ora l'interfaccia lascia il posto a un'esplosione di colori in grado di rendere ancora più gradevoli le nuove linee morbide adottate da Material Design.

Grazie a Palette, un tool pensato per le applicazioni, gli sviluppatori possono scegliere un colore predominante da utilizzare per le loro applicazioni, il quale verrà riproposto in diverse variazioni Dark Muted, Dark Vibrant, Muted, Vibrant, Light Muted, e Light Vibrant ognuna delle quali verrà utilizzata per un diverso elemento dell'interfaccia dell'applicazione.

In questo modo è possibile sfruttare delle combinazioni di default per ogni applicazione, anche se rimane la possibilità di impostare manualmente ogni singolo colore in base alle esigenze dello sviluppatore.


Android L vede anche l'introduzione di un nuovo font dedicato al testo, una rivisitazione del classico Roboto adottato da ice Cream Sandwich in poi.

Come per il resto dell'interfaccia, anche qui le differenze principali si notano in un arrotondamento generale del carattere, il quale perde i puntini squadrati nelle i e nelle j, in favore di un design tondeggiante che favorisce una più piacevole lettura del testo a schermo. Anche la R subisce una modifica abbastanza evidente, assumendo un design più bilanciato e semplice rispetto al passato.


Google non tralascia neanche le immagini, alle quali dedica un maggiore importanza, sia nel definire il loro scopo che la loro posizione. Per prima cosa, Google suggerisce che le immagini utilizzate all'interno delle app debbano essere coerenti con il contenuto e con il design generale dell'applicazione, senza mischiare stili e generi differenti che possano cozzare tra loro.

L'utilizzo di un'immagine deve offrire informazioni utili e in grado di coinvolgere l'utente. Per fare questo, Google definisce anche la differenza tra un avatar e un'anteprima evidenziando come gli avatar debbano rappresentare persone, entità o società e vadano racchiusi in cornici circolari, mentre le anteprime debbano essere posizionate in elementi quadrati, con la possibilità di interagire con esse tramite un tap della stessa.

Ma le immagini non si limitano a questo, dal momento che possono anche diventare lo sfondo stesso di un'applicazione, tuttavia ci deve essere una grossa distinzione tra le immagini principali e quelle di sfondo, dal momento che queste devono dare profondità o fare da texture, senza rubare l'attenzione rispetto agli altri elementi dell'interfaccia.


Affinché tutto risulti ordinato e al proprio posto, è necessario definire dei valori e dei canoni entro il quale gli elementi devo essere collocati. Per fare in modo che questo accada, Google si affida alle griglie, suggerendo i valori ottimali per l'inserimento di testi e icone all'interno dei vari elementi dell'interfaccia. Solitamente non si fa molto caso a questi dettagli, tuttavia, un elemento collocato in una maniera scorretta, salta subito all'occhio e rende poco accattivante e gradevole l'utilizzo di un'applicazione.

Le griglie sono quegli elementi di cui nessuno si accorge se sono fatti bene, ma che sono impossibili da non notare se non sono coerenti con il sistema nel quale sono collocate. Per questo motivo Google si impegna fornire distanze e valori chiave da rispettare affinché tutto risulti in ordine.

Per finire, tutti questi elementi statici devono essere messi in movimento e animati dalle animazioni che li caratterizzano. Anche in questo caso Google suggerisce il modo in cui gli elementi debbano animarsi, producendo effetti di continuità rispetto alla schermata precedente.

Ogni animazione deve essere indirizzata in modo da identificare al primo sguardo quali siano gli elementi importanti della schermata e deve offrire la possibilità di capire verso dove ci si muove quando cambia una schermata; nel caso di un menù secondario, l'effetto di transizione deve accompagnare l'utente verso la nuova sezione facendogli intuire la direzione da seguire per tornare all'elemento precedente in maniera naturale. Le animazioni devono produrre effetti attesi, senza disorientare o creare effetti scenici belli alla vista ma poco pratici per l'utente.

Android L introduce, grazie a Material Design, uno dei cambiamenti più grossi e importanti nell'interfaccia di Android, stravolgendo completamente i concetti e le soluzioni adottate sino ad ora. Il nuovo design verrà presto integrato nelle future applicazioni, e in quelle attuali, una volta che il sistema operativo di Google verrà aggiornato in maniera definitiva. Siamo quindi curiosi di vedere quali cambiamenti verranno implementati e sin dove si spingerà la creatività degli sviluppatori.

Il TOP di gamma più piccolo di Apple? Apple iPhone SE, in offerta oggi da Mobzilla a 427 euro oppure da Media World a 479 euro.

54

Commenti

Regolamento Commentando dichiaro di aver letto il regolamento e di essere a conoscenza delle informazioni e norme che regolano le discussioni sul sito. Clicca per info.
Caricamento in corso. Per commentare attendere...
Gark121

Neanche con PC companion? Comunque io flasho di solito gli ftf quando so che non ci sono bug evidenti. Mai usati gli ota e nemmeno installato companion... ;)

KlausAC

Io sto con il tablet z che ancora devono aggiornare a KK..l'aggiornamento è stato rilasciato il 21 maggio..4 luglio ancora niente..

nuccio03

Vedremo come i vari produttori personalizzeranno il tutto.

Gark121

Ha ricevuto la 4.4.4 prima dei GPE, e kitkat regolarmente insieme agli altri top gamma (10-15 giorni di differenza da s4...). I tempi in cui Sony aggiornava anni dopo sembra che siano passati. Speriamo...

KlausAC

L'idea che vuole dare è proprio di profondità..

KlausAC

Prima che aggiorni su z1c ad android L si fara natale (del 2015 però)..

Darkat

Per la prima volta sembra che a Google sviluppatori e grafici abbiano collaborato per fare un bel lavoro, è quasi da non credere...non vedo l'ora di vedere l'integrazione con la Sense e la Miui, con le quali penso si sposerà abbastanza bene, specialmente con l'interfaccia HTC visto che alcuni elementi sono già comuni. Samsung invece ha da poco introdotto una nuova interfaccia su S5, è stato un parto cambiare la touchwiz un minimo, figuriamoci quanto tempo ci vorrà prima di vedere un'integrazione con L :/

Alessio Capogrosso

Per le app hai perfettamente ragione, ci sarebbe da fare un controllo sulle app troppo brutte (e purtroppo ce ne sono in abbondanza) un po' come fa iOS, per le UI invece è giusto che ogni produttore sviluppi la propria, il codice Android è open, chiunque può prenderlo e modificarlo come vuole.

Stockdroid

Sono pienamente d'accordo con la tua opinione. Il Material design è perfetto così com'è in tutto: semplicità e leggerezza.

Alessio Capogrosso

Dite quello che volete, sarà ispirato alla grafica di iOS, sarà ispirato a quella di Microsoft (ma poi dove sono ste somiglianze che io non le vedo?!?) ma questo Material design è semplicemente spettacolare.

talme94

touchwiz?

talme94

non in tutte le app

Andreoid

Pare che a Cupertino siano iniziati i lavori di sviluppo di iBUGos 9 dopo il Google I/O. Cosa ci possiamo aspettare nel prossimo BUGos di Apple? il floating action button, che chiameranno Magic Ball? il nuovo multitasking di Android L che chiameranno iMultitasking?

Bè dopo la tastiera di iBUGos 8 e il centro notifiche c'è da aspettarsi di tutto ;)

Bigeagle

io ho provato talon su nexus 7 con la preview di android l, e purtroppo si ancora ha l'effetto di oscuramento quando si ruota. ho provato talon perchè fino ad ora è l'unica app con material design che è uscita, almeno da quello che so.

giorgio085

ma non ridi tu stesso di ciò che dici?

Gark121

non ho mai detto che lascio android. ho detto che non aggiorno ad L, finchè non trovo un modo per evitare quella tendina orrenda, confusionaria e non comoda. col cavolo che lascio lo z1c, manco morto.

Gark121

mi spieghi perchè rispondi una c@zzata biblica tipo "launcher you know" c@zzo me ne faccio di nova per migliorare la tendina delle notifiche? oppure l'estetica delle impostazioni?

Marco Luciano

a guardarlo cosi lo direi anch'io ma poi una volta provato lo trovi molto bello e comunque gusti personali

Marco Luciano

veramente gira tutto a 60fps anche grazie al completamento di Project Butter di Jelly Bean

Marco Luciano

ma se fino a poco fa c'erano ancora le app che non supportavano lo schermo dell'iphone 5 e poi inutile che fai tanto il gradasso perchè apple non ha cambiato grafica per 2007-2013 quindi voglio dire che non ci vedo niente di male a cambiare a cambiare interfacce e grafica cosi da spronare gli sviluppatori a creare app belle e con un senso logico. nulla da togliere alla apple che però preferivo prima di ios7 perchè adesso ha i colori troppo sparati e troppo bianco.(possessore di apple)

Callea

Cambiare di nuovo l'interfaccia quando la stragrande maggioranza delle app hanno ancora la grafica orribile pre ICS.

Questo sembra solo un esercizio di sperimentazione, un laboratorio fine a sé stesso che non trova mai una maturazione e non avrà mai un vero effetto pratico sulla maggior parte degli utenti.

Quando Android L avrà raggiunto un 20% di diffusione, tra un paio di anni, allora ci sarà una ancora una nuova interfaccia.

Tutto ciò non fa che confondere e complicare la vita agli sviluppatori che si rivolgono sempre di più all'unica piattaforma seria come IOS.

E a confondere gli utenti che vedono in Android come un qualcosa di confusionario e incapace ad incanalare una linea evolutiva progressiva e coerente.

rasty++

dalle prev è fluido di KK..

Eliuss

con tutte quelle animazioni la vedo dura a mantenere un livello stabile di fluidità....

wallera

in kitkat è trasparente.... lo sarà pure in android L

Drak69

Ho un nexus perche sono un purista (e perche mi piace avere subito gli aggiornamenti)...mi piace mantenere l'interfaccia grafica esattamente come l'ha pensata chi l'ha creata. Infine non ho il root xD

Enri

sicuro? XD

AleW1S3

Comunque il Floating Action Button (FAB) c'è da Android 4.3 all'interno della parte dell'orologio dedicata alla sveglia!

Enri

bella domanda! anche io sarei curioso di saperlo... :) Con un design adattativo e gestito in quel modo perchè dovrebbero mantenere sta schifezza xD ahah c'è qualcuno che lo sa?

peduncolo

secondo me è molto bello il M.D. , spero però sia ottimizzato a dovere nei riguardi di batteria e fluidità (e qui, temo, cadrà l'asino...).

Abaddon

Qualcuno riferisse a Google che questa barra di navigazione nera ha un pò scocciato!!! E' difficile farla trasparente o al massimo farla come la dock di iOS7?

Eros Nardi

Bello bello mi piace!
E magari la sovrapposizione può essere sfruttata per creare un leggerissimo effetto parallasse (pochi pixel) se si inclina lo schermo!
p.s. quando si ruota lo schermo si ha un riordino fluido dell'interfaccia? o c'è ancora l'effetto osceno rotazione+oscuramento?

Nicolas Mariniello

Una meraviglia. L'unica cosa che spero e che google costringa gli sviluppatori ad aggiornare le app col materiale design come ha fatto Apple con ios7 altrimenti gli sforzi fattibper android l saranno inutili

Andrea Saba

Non mi dilungherò in lunghi discorsi, lascio un commento flash per mancanza di tempo...
Per la.prima volta Android Stock mi ha emozionato, lo trovo veramente BELLISSIMO il material design

rasty++

launcher, you know?! lol

asd555

Esistono anche altri sistemi, suvvia... Inoltre uno svecchiamento grafico è gradito, forse non necessario ma ogni tanto ci vuole.
Magari torni ad Android quando ti piacerà nuovamente...

Gark121

più la guardo meno mi piace. caccia alle app "non-material" ufficialmente aperta. poi se pensano che accetterò mai quella tendina delle notifiche sono matti. resto kk a vita piuttosto.

8riga9

Se hai un nexus allora probabilmente ci avrai fatto il root e basta un'applicazione per cambiarli scegliendo tra quanti ne vuoi

rasty++

su nexus 5

Andrea Ci

ripetimi su che hardware, scusa..

Andrea Ci

iphone? non fa per me!

e io non ho MAI detto quello.
ho detto che NON è possibile che nel playstore ci siano app che
- spillino soldi essendo totalmente inutili
- app che hanno come unico scopo rubare i dati (torce che accendono il gps???)
- app tutte identiche, che non rimuovono neanche se gli fai la richiesta perchè hanno violato il tuo copyright

poi sei libero di installarle da dove vuoi, dal play store no.

Andreoid

Quello che più mi ha colpito del material design é la fluidità delle animazioni. Lo stile é minimale ma funzionale.

SteDS

Ma dov'è scritto che rigidità vuol dire bene e libertà di utilizzo/sviluppo/scelta vuol dire male? ognuno ha gusti propri, se non ti sta bene continua a usare iphone ma non stressare noi altri che preferiamo (e nel mio caso di gran lunga) la personalizzazione e la liberà che offre android,

Oliver Thomas Cervera

Purtroppo lo faranno per pigrizia. Sfido chiunque sviluppatore a fare una interfaccia meglio organizzata (la bellezza, poi, è soggettiva)
Inoltre solo ADESSO alcune app sono state aggiornate in Holo...

Giovanni

a me piace

Nicolas Zannerini

come design nulla da dire, veramente molto interessante. Il problema è che il 90% degli sviluppatori continuerà a sviluppare come *azzo gli pare e resterà bene o male tutto com'è adesso. Android è troppo frammentato e indipendente per poter imporre un design unificato

Monty81

Il problema è che poi Android diverrebbe politicamente simile a WindowsPhone, dove i produttori non possono personalizzare praticamente nulla!

Monty81

Infatti manca solo la X, poi potranno presentare il prossimo Nexus targato Sony! :D

lore_rock

Bello, finalmente hanno creato una interfaccia che abbia uno scopo pratico.
Ora come ora solo Microsoft prima e google dopo hanno creato un'interfaccia con lo scopo di essere utile, Apple purtroppo non l'ha capito e chi crede che ios7 sia una rivoluzione grafica forse non ha capito bene il concetto di usabilità

Andrea Ci

ma se non è rigida neanche a controllare che non siano app pericolose...

baldanx

A me piacciono e soprattutto sono coerenti con tutto il resto

Recensione Sony Xperia 1 II: tra eccellenze e black out

La carica degli Snapdragon 765: sono gli smartphone del momento | Video

Recensione LG Velvet: il nuovo design ci piace ma serve un rinnovamento software

Recensione Huawei P30 Pro New Edition: può ancora dire la sua