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.