Un'occhiata al material design di Google

2019

Nell'ultimo evento I / O 2014, Google è tornato con le sue nuove sorprese. Oltre a rilasciare ufficialmente il nuovo aggiornamento Android con nome in codice Lollipop, Google ha anche introdotto il suo nuovo linguaggio di design, Material Design . È un sistema di progettazione che non è solo concepito per i nuovi miglioramenti dell'interfaccia utente di Lollipop, ma anche per tutti i dispositivi e gli ambienti.

Material Design ha alcune caratteristiche importanti che lo differenziano tra le altre tendenze del design con i suoi modi unici. Proprio come il suo nome, è stato ispirato da materiali reali e li ha combinati in un unico sistema di design per creare un'esperienza utente elegante, intuitiva, bella e interattiva. In questo post vedremo cosa c'è all'interno del Material Design e ti forniremo una guida rapida su come implementarlo. Citando il blog di Google, dirò "This is Material Design".

Un introduzione

Material Design è un sistema di progettazione unificato, significa che è stato progettato per funzionare con tutti i dispositivi e le piattaforme oggi disponibili. Dal tablet, dallo smartphone al desktop e da Android, iOs, Windows alle piattaforme Web. Tutti gli aspetti estetici del design dovrebbero essere gli stessi ovunque si trovino.

Principi principali

Ci sono tre principi principali che costruiscono Material Design. Queste sono la parte più fondamentale di ciò che Material offre in generale.

Il materiale è la metafora . Lo sviluppo di Material è stato ispirato dallo studio di elementi tattili che usiamo ogni giorno, carta e inchiostro . Rende l'oggetto leggero, superficiale e i movimenti migliori quando interagiscono tra loro.

Grassetto, grafico e intenzionale . La tipografia, le griglie, lo spazio, la scala, il colore e l'uso delle immagini utilizzate nella progettazione di base basata sulla stampa rendono il contenuto del materiale migliore.

Il movimento fornisce un significato . Questa è una delle cose più note. In Materiale, dovresti avere un movimento significativo e appropriato, un feedback sottile e chiaro e una transizione efficiente e coerente.

I componenti

Material Design presta attenzione ad ogni dettaglio dei suoi componenti in modo che possano essere utilizzati universalmente. Questi componenti ti aiuteranno a creare app e siti straordinari. Ci sono così tanti componenti forniti da Materiale come pulsanti, interruttore, scheda, input di testo, fab (tasto di azione mobile), finestra di dialogo, pane tostato, sottomenu, scheda e altro. Ognuno di loro ha una propria regola e guida su come costruirli in modo da non avere alcun elemento irrilevante.

Cosa dei modelli

Oltre ai componenti, il materiale fornisce anche alcuni schemi di base per l'interfaccia utente aggiuntiva. Questi pattern miglioreranno l'interfaccia utente creata con i componenti di Material. I modelli inclusi il formato dei dati, il cassetto di navigazione, gli errori, i gesti, la tecnica di scorrimento, la ricerca, le impostazioni, il caricamento delle immagini, scorri per aggiornare e altro ancora.

Colori di design dei materiali

I colori in Materiale erano stati progettati in modo tale da non farti sentire a disagio, strano e piatto. Prendendo ispirazione dai nostri ambienti quotidiani come cartelli stradali, architettura contemporanea, nastro per la pavimentazione e campi sportivi, Material Design ti regala colori inaspettati e audaci. Ci sono così tante tavolozze di colori da scegliere per darti più convenienza nello sviluppo di app o siti. Puoi anche scaricare i campioni di colore per uso locale come per la tua collezione Photoshop.

Icona del materiale

Se sei uno sviluppatore Android, devi avere familiarità con alcuni pacchetti di icone gratuiti forniti da Google. Solitamente sono usati solo per l'elemento principale e la barra di azione. Mentre per altre risorse, dobbiamo cercare altre icone come cartelle, file, copia e incolla, ecc manualmente. In Material Design Google ha risolto il problema con tonnellate di pacchetti di icone che è possibile utilizzare.

Ciascuna delle icone ha attraversato un approccio progettuale che utilizza anche lo studio di materiali tattili. Stanno mantenendo anche il principio del materiale, che è coerente. Puoi scaricare queste icone su GitHub, vengono fornite con alcune opzioni per un utilizzo diverso come per iOs, web, Android o svg. Se desideri un'opzione più ampia per una facile personalizzazione, probabilmente vorresti vedere i pacchetti di icone di Material Design su FlatIcon. All'interno del pacchetto, avrai la versione vettoriale di icone (SVG e EPS), PSD e PNG.

Animazione del materiale

Questa è la caratteristica del materiale che mi piace di più. Le animazioni in Materiale sono così reali e intuitive. Ogni animazione ha una transizione temporanea significativa, coerente e giusta. La demo gif mostrata di seguito è solo una delle bellissime animazioni Material. Per fornire un'interazione coinvolgente e reattiva, il team di Google crea anche un'animazione simile a quella dell'acqua per l'effetto di input dell'utente. Viene utilizzato principalmente su pulsanti e carte.

Quelle caratteristiche che ho spiegato sono solo una piccola parte di ciò che offre Material Design. Per saperne di più sul mondo dei materiali, basta andare alla pagina della documentazione.

Implementazione

Per impostazione predefinita, Material Design viene fornito come nuovo aggiornamento dell'interfaccia utente per Android Lollipop. Tutte le linee guida che il Materiale è stato applicato al suo interno. Dal momento che il materiale è rivolto a tutti i tipi di ambienti, non sarà difficile implementarlo su un altro sistema. E grazie alle comunità, è persino molto più semplice con alcuni strumenti che hanno creato.

Questi sono molti modi che puoi ottenere per ottenere Material Design al di fuori di Android, ad esempio il web.

Utilizzo di CSS Framework

Questo è il modo più semplice se vuoi implementare Material Design nella piattaforma web. Con i framework, tutto ciò che devi fare è inizializzarlo e quindi scrivere gli elementi di cui hai bisogno. Ci sono molti framework che puoi usare come Materialise, Material UI o Polymer per nominarne alcuni. La mia scelta personale ricade in Materialise. È più facile da usare e capire e avere un'ottima documentazione con una bella demo.

Segue le linee guida

Se si desidera implementare il materiale senza l'ausilio di framework e si preferisce pasticciare maggiormente con i codici, è necessario seguire le linee guida sui materiali. Lì troverai tutte le cose da fare e da non fare che dovresti notare per ottenere i principi materiali. Vedrai tutta la guida di base per creare componenti, layout, animazioni, colori, motivi e altro ancora. Potresti voler vedere una lista di controllo del materiale per uno sviluppo più semplice.

Conclusione

Il material design è un ottimo sistema di design ed è diventato uno dei trend più attesi dell'anno. Nei prossimi due mesi, potremmo vederlo ovunque. Più app e sito saranno lucidati con questo nuovo aggiornamento di design di Google.

E con Material Design, Google ha dimostrato la sua superiorità come una delle più grandi società tecnologiche. Rende Google non solo leader nel settore dei motori di ricerca e dei sistemi operativi mobili, ma anche nel campo del design. Ormai non ci sono altre società che sviluppano questa grande cosa come ha fatto Google. Ma l'esperienza dice che non durerà a lungo. Aspettiamo semplicemente che altre aziende rispondano al Material Design di Google.