Il Material Design

Di cosa parliamo?

Oltre ad occuparmi dello sviluppo back-end e front-end di progetti web, realizzo applicazioni mobile per il mondo di Android; per tanto mi è sembrato doveroso illustrare di cosa stiamo parlando quando dico Material Design. Quest'ultimo è un sistema adattivo di linee guide, componenti e strumenti che entrano in gioco con l'intento di "modernizzare" il design, quindi l'interfaccia grafica, di una determinata applicazione. Come già sottolineato, è stato sviluppato da Google nel non tanto lontano 25 Giugno 2014, in occasione del Google I/O.

Dopo questa breve premessa entriamo subito nel vivo dell'articolo, andando ad elencare tutte le funzionalità di questo design in costante miglioramento e sviluppo.

• Toolbar inferiore e superiore:

Una semplice ma potente barra posta al fondo (o in cima) all'applicazione che consente di immagazzinare e gestire la navigazione e le funzionalità dell'app.



• Pulsanti di navigazione:

Questo è un componente tanto utile quanto ormai noto a tutti, dato che moltissimi sviluppatori si affidano a questa interfaccia per ottimizzare al meglio l'applicazione mobile. In poche parole questa barra permette di spostarsi in maniera intuitiva ed agevole tra una schermata e l'altra.



• Pulsanti:

Argomento semplice quanto estremamente importante, difatti non c'è bisogno di dire che i pulsanti, che ormai conosciamo benissimo, stanno alla base di qualsiasi cosa. Il Material Design però ci permette di realizzarli con un certo stile, come è possibile vedere in figura.



• "Pulsanti galleggianti":

Traducendo si chiamerebbero in questo modo ma sarebbe più convenievole chiamarli con il loro nome nativo ovvero Floating action button. A mio avviso è il componente che rappresenta maggiormente il Material Design. Si sta parlando nuovamente di un pulsante, ma si differenzia da tutti gli altri perchè tendenzialmente è di forma sferica, di colore contrastante rispetto a tutta la schermata e che ha appunto lo scopo di attirare l'attenzione dell'utente.



• Cards:

Questo è un componente che risulta particolamente importante nella gestione e nella predisposizione del layout dell'applicazione, illustrando in maniera pratica i contenuti e le azioni di un determinato "argomento". Una immagine vale più di mille parole.



• Chips:

Questi sono elementi compatti che rappresentano esaustivamente un input, un attributo od una azione. Per intenderci, la chip nella figura sottostante è lo stile grafico che viene attribuito a "Peyton Smith".



• Dialogs:

Chi non si è mai imbattuto nei dialogs? Questi informano l'utente riguardo un'azione che hanno intrapreso e contengono informazioni importanti, scelte da stabilire e passaggi da eseguire per adempiere ad un determinato scopo.



• Liste:

Le liste sono una caratteristica fondamentale per ogni applicazione che si rispetti e vengono adoperate per garantire una intuitiva comprensione e navigabilità dell'app stessa.



• Menù:

I menù, per quanto possono essere simili al componente citato subito sopra, le liste, si differenziano dal fatto che ogni voce contiene altre voci al suo interno, come è possibile vedere in figura.



• Data pickers:

Semplicemente si parla di una funzionalità che permette di selezionare una data o un'insieme di date.



• Checkboxes:

C'è poco da dire a riguardo, le checkboxes permettono all'utente di scegliere una (o più) determinata opzione oppure di espanderne una per visualizzarne altre più specifiche.



• Radioboxes:

Molto simili alle checboxes, questi permettono all'utente di scegliere una singola opzione da un elenco.



• Switches:

Componente famoso e piacevolmente estetico, permette all'utente di abilitare o disabilitare una determinata opzione da un elenco, usualmente per gestire le impostazioni generiche.



• Sheets:

Stiamo parlando di menù con contenuto supplementare riferito ad un particolare argomento, al fine di fornire più dettagli e azioni possibili.



• Sliders:

Gli sliders permettono all'utente di selezionare un valore da un determinato range.



• Snackbars:

Gli snackbars provvedono a comunicare brevi messaggi riguardo l'esito di un'eventuale processo determinato dall'utente.



• Tabs:

Questo è un componente visto e rivisto proprio perchè permette di organizzare al meglio tutti i contenuti al fine di rendere l'app veloce, semplice ed intuitiva.



• Text fields:

I campi di testo, come ormai è ben noto, permettono all'utente di inserire del testo (o password, numeri, date e così via...). Tuttavia, con il Material Design, c'è una sottile ma "simpatica" differenza, come si può vedere in figura: il placeholder, ovvero la descrizione del campo di testo, anzichè scomparire del tutto quando l'utente ci clicca sopra, si sposta leggermente, andando a posizionarsi sopra il campo di testo stesso.



• Time pickers:

I time pickers permettono all'utente di di selezionare e settare una specifica ora.



• Tooltips:

I tooltips illustrano del testo aggiuntivo quando l'utente passa sopra (o clicca) su un determinato elemento.



• Indicatori di progresso:

Gli indicatori di progresso indicano un tempo di attesa o informano sulla lunghezza di un processo.



• Tabelle:

Le tabelle mostrano una serie di informazioni suddivise in righe e colonne.



• Banners:

I banners hanno il compito di mostrare un messaggio immediato e azioni da intraprendere relative all'attività eseguita.



• Backdrop:

Il backdrop è una schermata "parzialmente nascosta" che viene mostrata appena l'utente intraprende una determinata azione.



• Navigation rail:

Questo componente è un menù di navigazione laterale che comprende da 3 a 7 destinazioni e, opzionalmente un floating action button.



• Navigation drawer:

Il navigation drawer è un componente molto potente che permette una veloce navigazione tra più destinazioni presenti nell'applicazione.