Splendide implementazioni del design dei materiali nelle app mobili

Molte persone in questi giorni cercano bellissime implementazioni di Material Design nelle app mobili per trarne ispirazione.

Sì, il design dei materiali è arrivato e ha cambiato la storia del design e negli ultimi due anni è stato molto popolare nella progettazione di app mobili e c'è un gran numero di bellissime implementazioni di design dei materiali nelle app mobili.

Ma prima, cerchiamo di capire cos'è il Material Design e perché è diventato il linguaggio di design più popolare e di successo.

Cos'è il design dei materiali?

Material Design è un linguaggio di design sviluppato nel 2014 da Google. Espandendo i motivi "carta" che hanno debuttato in Google Now, Material Design fa un uso più liberale di layout basati su griglia, animazioni e transizioni reattive, riempimento ed effetti di profondità come luci e ombre.

A partire dal 2015 la maggior parte delle applicazioni mobili di Google per Android aveva applicato il nuovo linguaggio di progettazione, inclusi Gmail, YouTube, Google Drive, Google Documenti, Fogli e Presentazioni, Google Maps, Posta in arrivo.

Tutte le applicazioni a marchio Google Play e, in misura minore, il browser Chrome e Google Keep. Anche le interfacce Web desktop di Google Drive, Documenti, Fogli, Presentazioni e Posta in arrivo lo hanno incorporato.

L'implementazione canonica di Material Design per le interfacce utente delle applicazioni web si chiama Polymer.

È costituito dalla libreria Polymer, uno shim che fornisce un'API dei componenti Web per i browser che non implementano lo standard in modo nativo e un catalogo di elementi, inclusa la "raccolta di elementi di carta" che presenta elementi visivi del Material Design.

Il sistema, che si concentra su layout basati su griglia, effetti di transizione e profondità, è presto entrato nelle app Android e ha portato il sistema allo standard di progettazione di iOS.

I principi del Material Design

Spunti visivi ispirati

Google usa il termine "realtà tattile" per descrivere la sua filosofia di design, perché le superfici e i bordi all'interno del design dei materiali sono ispirati da studi reali su carta e inchiostro.

Questo aiuta gli utenti a comprendere visivamente l'interfaccia digitale sul proprio schermo senza alcuna difficoltà. Il design basato sulla realtà rende gli oggetti sullo schermo riconoscibili e facili da interagire.

Estetica audace

Le scelte di colore nel design dei materiali sono audaci e deliberate. Le accattivanti combinazioni di colori funzionano con le tecniche di progettazione di base basate sulla stampa per immergere l'utente nell'esperienza.

Lo spazio bianco intenzionale, le immagini da bordo a bordo e la tipografia di grandi dimensioni vengono utilizzati per porre l'accento sulle azioni dell'utente. In questo modo, l'utente comprende rapidamente lo scopo e la funzionalità dell'interfaccia sul proprio schermo.

Post correlato: Errori più comuni nella progettazione di app mobili

Significato fatto attraverso il movimento

Invece di animazioni artificiali e meccaniche, il movimento nel design dei materiali appare fluido e naturale. Google consiglia di farlo in diversi modi:

• Accelerazione e decelerazione naturali: per evitare movimenti innaturali, gli elementi su una pagina devono accelerare e decelerare in modo graduale. Avviamenti, arresti improvvisi e cambi di direzione stridono e distraggono l'utente.
• Continuità visiva: una transizione tra due stati visivi dovrebbe essere fluida e senza sforzo in modo che l'utente non venga sviato. Troppi campanelli e fischietti mentre un sito Web o un'app si sposta da una pagina all'altra non sono necessari.
• Tempistica gerarchica: gli elementi che contengono il contenuto più importante dovrebbero essere enfatizzati posizionandoli sul percorso più facile da seguire per l'occhio. In altre parole, è importante attirare l'attenzione su elementi importanti.
• Coreografia coerente: gli elementi animati non dovrebbero passare in modo casuale, poiché ciò può distrarre. Invece, dovrebbero viaggiare in percorsi ordinati che abbiano un senso.

Material Design non crea solo ordine, ma crea ordine con uno scopo e un significato. È un'espressione sensoriale del marchio di Google.

Se trova l'acquisto, potrebbe essere la prima seria minaccia all'apparente monopolio di Apple sull'esperienza utente sublime. Come devoto di iPhone, devo confessare che per la prima volta ho iniziato a lanciare sguardi obliqui alla maniera di Android.

La specificità che intorpidisce la mente del Material Design è una risposta a due fatti:

• Se è possibile che uno sviluppatore rovini un'interfaccia utente, lo farà.
• L'alternativa al buon design non è nessun design, è un cattivo design.

Ora, ecco alcune delle più belle implementazioni di Material Design nelle app mobili.

Chi può implementare il Material Design meglio di chi lo ha creato. Google Calendar è una delle più belle implementazioni di Material Design nelle app mobili. Con oltre 1.000.000 di download, fa sicuramente impazzire la festa.

Google Calendario

Per cominciare, l'app di Google ha finalmente eliminato il tradizionale design skeuomorphic utilizzato dalla maggior parte delle app di calendario che imita il layout di un pianificatore fisico.

Non c'è più alcuna restrizione per la necessità di annotare su carta il nostro programma. Il calendario di Google ti offre un layout verticale e posiziona il giorno corrente nella parte superiore della pagina.

In questo modo, vedrai solo i giorni e gli eventi imminenti. I giorni in cui non sta succedendo nulla sono condensati e questo snellisce ulteriormente l'esperienza per mostrarti solo ciò che è effettivamente utile.

Questa singola modifica all'interfaccia consente contemporaneamente all'utente di rimanere al centro dell'esperienza in modo che l'interfaccia utente si muova intorno a loro. Aggiungi un po' di scorrimento in parallasse e avrai un'app davvero fantastica che combina.

Evernote

Evernote è spesso elogiato per la sua interpretazione del design dei materiali ed è un esempio accattivante delle bellissime implementazioni di Material Design nelle app mobili

L'app ha una combinazione di colori forte e coerente ed è tanto ben progettata quanto funzionale. Le icone indicano in modo chiaro ed efficiente se si tratta di una nota di testo, una nota scritta a mano o una foto che stai per scattare.

L'icona dell'elefante è semplice ed elegante, mentre anche il sito Web, le app iOS e Windows 10 sono progettate e strutturate con cura.

Microsoft Salute

Microsoft Health è in realtà uno dei migliori esempi sul Play Store.

L'app è progettata per funzionare con il fitness tracker Band e mostra tutte le tue statistiche in un semplice layout verticale insieme a icone bianche piane. Quando si fa clic su una di queste intestazioni, il pannello si "aprirà" per rivelare le tue statistiche.

L'interfaccia utente è ottima per consentirti di avere una panoramica a colpo d'occhio pur avendo la possibilità di approfondire se necessario, il che è un segno distintivo di una buona progettazione dell'app.

Favoloso: Motivami

Molte persone pensano che Fabulous: Motivate Me sia l'implementazione del design dei materiali più precisa e profondamente ponderata nelle app mobili.

L'app esplora i nuovi principi di progettazione dei materiali in tutti i modi normali con le sue immagini nitide e piatte e i colori vivaci, ma ha anche alcune delle animazioni più interessanti sul Play Store.

L'elenco non sarebbe completo senza l'applicazione mobile di Facebook Live.

L'app è un esempio molto minimale, ma efficace di Material Design. Usa l'ombreggiatura in un modo che non si vede tipicamente; utilizzando ombre chiare anziché scure per fornire profondità.

Fa un uso interessante dell'iconografia, dell'animazione e del design dell'interazione, aspetti chiave del materiale.