Material Design: creare app Android con un’interfaccia utente moderna

Material Design, creare app Android con un'interfaccia utente moderna
glp-auto-700x150
SANCARLO50-700
mywell
previous arrow
next arrow

Material Design è una delle più recenti tendenze nell’ambito dell’informatica, della tecnologia e dello sviluppo di App. Si tratta infatti di un linguaggio di design messo a punto da Google per la creazione e la progettazione di interfacce grafiche. Uno strumento quindi utilissimo per sviluppatori e designer, così come anche per gli utenti, che possono confrontarsi con prodotti in grado di offrire una straordinaria user experience.

Vediamo insieme di cosa si tratta, quali sono le sue caratteristiche e i vantaggi che offre.

Che cos’è il Material Design?

Material Design è un sistema di progettazione messo a punto da Google per il design visivo, animato ed interattivo dello sviluppo app Android. Introdotto nel 2014, si tratta di uno stile, un linguaggio di design. Lo scopo è quello di fornire linee guida, strumenti, componenti e principi flessibili che permettano agli sviluppatori di creare un’interfaccia reattiva avendo a disposizione le migliori pratiche di progettazione.

lapagliara
sancarlolab-336-280
previous arrow
next arrow

Il risultato finale è ottenere interfacce grafiche che si comportano come materiali reali, imitandone quindi superfici o texture. Il Material Design, infatti, presenta bordi e superfici fisiche. Questo nuovo linguaggio di design elaborato da Google si basa su carta e inchiostro, potendosi così espandere o restringere in maniera intelligente.

Attualmente, Material Design è disponibile per piattaforme e dispositivi iOS, Android, Flutter e web.

Il concetto che sta alla base del Material Design è proprio il termine “material”, inteso come metafora. Material infatti è inteso come un oggetto.

Perché utilizzare il Material Design?

Material Design è un linguaggio universale e neutro, utile sia agli sviluppatori che ai designer. Attraverso questo strumento, Google indica il modo migliore per fare le cose nonché gli strumenti più adatti per riprodurle. Si tratta di una guida che è di grande aiuto al designer nella progettazione di un layout grafico.

Utilizzando Material Design per i tuoi progetti design di interfacce, hai la possibilità di:

  • Creare: Material Design è l’interpretazione del linguaggio visivo offerta da Google, per sintetizzare i principi classici e il buon design, basandosi sull’innovazione delle tecnologie
  • Personalizzare: espandere il linguaggio visivo per l’innovazione e l’espressione del proprio progetto
  • Uniformare: sviluppare un sistema che unifica la user experience

Come utilizzare il Material Design

Ovviamente, per usare Material Design occorre scaricarlo e configurarlo come stile principale dell’applicazione. Le versioni base sono tre:

  • Material: versione di default caratterizzata da toni scuri
  • Material.Light: versione chiara
  • Material.Light.DarkActionBar: variante per la versione Light con ActionBar scura

Alcune proprietà dello stile sono utili per personalizzare i colori da utilizzare, in modo da adattarli ai colori del proprio brand.

Il Material Design è un grandissimo riferimento per i designer che si approcciano all’User Interface, ponendo le basi per creare un modo di disegnare e progettare i prodotti destinati al web, sulla base di una serie di aspetti mai considerati fino ad ora.

Parte fondamentale del linguaggio del web sono le icone, che devono essere comprensibili a livello universale e servono a riconoscere le funzioni senza usare le parole. Material Design si basa su 2 tipologie di icone:

  • “Product”: rappresentano l’applicazione e comunicano l’idea che sta alla base del prodotto. Hanno dimensioni di 48 dp
  • di sistema: individuano i comandi e le azioni possibili. Hanno dimensione pari a 28dp

È possibile creare queste icone personalizzandole anche per quanto riguarda forma e colore.

Per il colore, Material Design propone una ricchissima gamma, che include palette con diverse gamme cromatiche. Si può scegliere fra le varie sfumature di un solo colore primario oppure creare un contrasto tra un colore primario ed un colore secondario.

L’intero processo di scelta è assistito da un generatore di colori che consente di creare la combinazione più adatta sulla base del risultato che si desidera ottenere.

Anche il testo è un elemento grafico di primaria importanza. Per questo, Material fornisce linee guida chiare e precise per la gestione della scrittura in tutte le parti dell’interfaccia utente.

Al fine di rendere l’interfaccia utente più fruibile e facilmente navigabile, i testi devono essere brevi e concisi, facilmente leggibili e disposti secondo un ordine gerarchico e per campi.
I caratteri tipografici standard scelti da Google per gestire la piattaforma sono Noto e Roboto.

Material Design dà grande attenzione al layout per migliorare la coerenza tra gli ambienti, facendo uso di strumenti come modelli strutturali e griglie di base. Ovviamente, tali layout possono adattarsi alle diverse dimensioni dei supporti su cui vengono visualizzati (smartphone, desktop o tablet).

Ecco nel dettaglio quali sono le componenti base previste dal Material Design.

  • Barra di navigazione in basso che semplifica il passaggio tra l’app delle visualizzazioni di primo livello con un tocco
  • Menu con pulsanti per scegliere l’azione o l’opzione desiderata
  • Pulsanti: in versione flat e in rilievo
  • Cursori, per selezionare il valore in un intervallo di valori spostando il pollice del dispositivo di scorrimento
  • Schede, per passare da una vista all’altra
  • Bottom sheets, che scivolano dal basso per mostrare più contenuto
  • Finestre di dialogo, con informazioni specifiche
  • Tooltip: etichette di testo che compaiono quando l’utente si posiziona su specifici elementi
  • Elenchi
  • Cards: “punti d’ingresso” per informazioni ulteriori
  • Finestre espandibili: indipendenti o in combinazione con altre cards, permettono di modificare il contenuto
  • Progress bar: indica in maniera visiva e progressiva quando l’app sta caricando un contenuto
  • Dividers: “regola” verticale che raggruppa il contenuto in layout di pagina o elenco
  • Snack bar e Toast: feedback dopo l’esecuzione dell’operazione

Vantaggi di utilizzare Material Design

Nella progettazione di applicazioni web e mobile, Material Design offre numerosi vantaggi.

  • Fornisce linee guida minimali e stabili
  • È facile da integrare
  • È semplice da mantenere
  • Offre una ricca color palette
  • È strutturato in vari componenti a cui attingere
  • Mette a disposizione una grande varietà di forme e di iconografie, spunti visivi anche animati e interattivi al tatto

Esaminiamo nel dettaglio quali sono i principali punti di forza del Material Design.

  • Superfici digitali: ogni elemento di una interfaccia grafica diventa una superficie reale tangibile, di spessore pari a 1 dpi (dot per inch). Ciò permette agli elementi di acquisire ombre realistiche
  • Adattabilità. Tutte le interfacce grafiche devono essere responsive, ovvero potersi adattare ad ogni dispositivo da cui si accede
  • Animazioni intelligenti, in cui il movimento focalizza l’attenzione tramite l’uso di transizioni coerenti e sottili feedback. Aspetto di fondamentale importanza è che l’animazione parta dal punto esatto in cui il dispositivo riceve l’input (tocco o click)

Esperienza utente (UX) e Material Design

Grazie alle sue caratteristiche e alle potenzialità che offre, Material Design è uno strumento molto utile e vantaggioso per sviluppatori e designer, così come anche uno strumento che offre una eccellente esperienza utente. Vediamo come.

Le superfici tattili permettono di strutturare i vari elementi secondo una disposizione gerarchica, uno sopra l’altro. Di fatto, la suddivisione in livelli delle superfici digitali si trasforma in una sorta di tridimensionalità, che va a migliorare l’esperienza utente in quanto permette di concentrare la sua attenzione su quelli che sono gli elementi più importanti della pagina.

Le ombreggiature, posizionate sul menu di navigazione o sui bottoni in maniera strategica, permettono di ottenere un effetto naturale molto gradevole, pur mantenendo uno stile fine, sia nelle linee che nei colori.

Grazie all’adattabilità, poi, l’utente può leggere o guardare immagini e video e immagini allo stesso modo su qualsiasi dispositivo con cui accede all’applicazione (smarphone, tablet, desktop…).

Le animazioni, pensate in maniera intelligente, non creano disturbo all’utente durante la navigazione. Si attivano infatti a seguito di una specifica azione dell’utente, come ad esempio il tocco dello schermo.