Share
Non molto tempo fa, Google ha introdotto Material Design, un nuovo set di linee guida per designer e sviluppatori. Material Design introduce una nuova prospettiva sulle interfacce utente, sul movimento e sugli stati di interazione e costituisce una base fondamentale per la creazione di un prodotto.
In sostanza, puoi riepilogare il material design di Google con due componenti:
Materiale fornisce un contesto nel design, la superficie e il bordo di un "materiale" ci fornisce indicazioni visive. Paragoniamo questo alla vita reale. Comprendiamo le dimensioni di una stanza, perché vediamo i muri. Allo stesso tempo, l'interno ci fornisce una comprensione del contesto della stanza. La tua cucina sembra molto diversa dal tuo bagno, ad esempio.
Lo stesso è applicato in Material Design. La combinazione di stile e contenuto fornisce contesto all'utente in uno spazio digitale, molto simile a pareti fisiche e interni. Un utente ha una migliore comprensione dell'interfaccia utente, perché il materiale progettato fornisce il contesto per l'interfaccia.
Una scheda fornisce un design contestuale ed è un elemento comunemente usato in Material Design. Una carta fornisce un contesto in sé, oltre ad avere una relazione con altre carte.Il concetto di Movimento in Material Design ha una storia molto simile. Motion fornisce il contesto in un design attraverso il flusso di un'applicazione, specialmente quando si tratta di continuità di un prodotto, un utente ha la sensazione di essere ininterrotto. Non ci sono ostacoli, come l'inconsistenza nel design o una navigazione confusa.
Come funziona esattamente il movimento? Ecco un esempio. C'è un feed a casa che consiste in un elenco di carte. Quando tocchi una singola carta, il materiale della carta si espande fino a diventare l'intera larghezza e altezza dello schermo anziché le dimensioni di una singola carta.
Nota come questo esempio applica sia il materiale che il movimento. Una carta è il materiale. Quando un utente interagisce con esso, attraverso il movimento si espanderà per mostrare più contenuti. Ciò fornisce continuità all'utente in quanto mostra come il loro input influisce sull'interfaccia utente.
Esploriamo il materiale un po 'di più. In sostanza, il materiale è la combinazione dei tuoi elementi di design statico. Pensa a forme, colori, tipografia e alla varietà di strumenti che utilizzi per creare disegni. Tutto ciò insieme costituisce un materiale.
Il colore è una grande cosa per i progettisti e gli utenti. Ha un'enorme influenza sull'aspetto grafico di un design, così come sugli effetti psicologici su un utente. Il colore può rendere un design affidabile, eccitante, utilitario e molto altro. In Material Design, abbiamo accesso a una vasta gamma di colori, che possiamo utilizzare come base per la progettazione di un prodotto.
Consiglio vivamente di avere il seguente riferimento di colori salvati come segnalibro, è un comodo riferimento per progettare una tavolozza di colori per un'interfaccia utente.
Roboto, il font standard per Android, è stato ottimizzato per migliorarlo per l'utilizzo multipiattaforma. Per i designer che non hanno molta familiarità con la tipografia, Material Design fornisce linee guida che gestiscono il design della tipografia per te.
Il modo più semplice per iniziare questa griglia è scaricare il seguente foglio di adesivi. Le linee guida ti forniranno una struttura per la tua tipografia quando inizi un nuovo design.
La progettazione di un layout in Material Design utilizza alcuni dei principi fondamentali del design della stampa, che Google indica come fonte di ispirazione per Material Design. C'è una forte enfasi sulla costruzione di interfacce utente che si adattino bene tra diversi tipi di dispositivi. Come saprai, la scalabilità è diventata cruciale per la progettazione di prodotti che hanno successo su più dispositivi.
Questa illustrazione visualizza il concetto di profondità nelle interfacce utente.Uno dei concetti chiave è impilamento. Quando si progetta un'interfaccia utente con Material Design, si utilizzano ombre esterne, contrasto di colore e posizionamento z per dare all'utente un senso di profondità nell'interfaccia utente. La profondità crea contesto per gli utenti. Gli elementi mobili in cima alle pile, come un pulsante, enfatizzano l'invito all'azione in un'interfaccia utente.
Esempio di tre livelli di profondità: un menu, la barra di navigazione superiore e l'area del contenuto.Per i progettisti più avanzati, le linee guida includono le griglie di riferimento. La pagina relativa alle metriche e alle linee chiave nelle linee guida sulla progettazione dei materiali fornisce informazioni dettagliate e fornisce le risorse per sperimentare.
Se preferisci lavorare con un layout predefinito, puoi scaricare il modello di cornici bianche di Google.
Esempio di un layout progettato. Il movimento va di pari passo con il materiale come descritto in precedenza nell'esempio della carta. Il movimento è ciò che rende vivo il materiale progettato.
Quando inizi a imparare le basi della progettazione del movimento, uno dei primi principi che imparerai a conoscere è l'alleggerimento.
Quando allevi un'animazione, provi a fare un movimento più naturale. Invece di animare il movimento di un oggetto a una velocità costante, aumenti la velocità all'inizio dell'animazione e riduci la velocità alla fine dell'animazione.
Pensa a un'auto in movimento nel traffico e a come un'auto accelera e frena, è un movimento molto naturale. Easing cerca di replicarlo in modo che un utente ritenga naturale il movimento di un oggetto.
Il modo più semplice per familiarizzare con l'easing è vedere alcuni esempi di design. Le seguenti risorse sono un ottimo segnalibro:
Questa illustrazione mostra l'easing, come descritto in "Principi di animazione in UI Design: Understanding Easing".Quando un utente interagisce con un elemento di progettazione, nella maggior parte dei casi l'elemento deve fornire feedback. In Material Design, l'obiettivo è quello di deliziare l'utente con il feedback sul movimento e fornire il contesto per il materiale con cui l'utente interagisce. La bellezza del movimento reattivo è che riconosci l'azione dell'utente, che migliora l'usabilità del tuo prodotto.
L'esempio più bello che ho visto è l'increspatura del tocco, un punto culminante visivo quando l'utente interagisce con un particolare elemento.
Un altro esempio è l'apertura o l'espansione di elementi. Quando tocchi un particolare elemento per espanderlo, il nuovo materiale si espande dal punto toccato dall'utente. La crescita di un elemento sembra naturale quando cresce direttamente dal centro del tocco dell'utente. Per ulteriori esempi di interazione reattiva, visita il sito web di Material Design di Google.
Ultimo ma non meno importante, il transizioni tra interfacce è importante per l'interazione reattiva. È la forma più cruciale di movimento per progettare la continuità per l'utente. Per gli schermi in entrata e in uscita, il punto di origine fornisce il contesto. Un'interfaccia utente può crescere ed espandersi dinamicamente, offrendo ai progettisti molto spazio per giocare con transizioni fantastiche. E soprattutto, possono renderli significativi.
Di seguito sono riportati alcuni esempi eccezionali di Material Design creati da designer eccellenti.
Google: esplorazione materiale di Aurélien Salomon
Allarme Materiale UI di Ehsan Rahimi
Aviasales L (Material Design) di Mark MQuesta è una breve introduzione al Material Design. Se uno qualsiasi di questi ha suscitato il tuo interesse, consiglio vivamente di leggere di più nel linee guida ufficiali da Google.
Si prega di affrontare Material Design con una mentalità creativa. Molto di ciò che viene presentato è un promemoria di ciò che rende grande l'ottimo design. Allo stesso tempo, lo sono solo linee guida, il che significa che per crescere come designer siete più che benvenuti a dare il vostro tocco personale.
Incoraggio tutti voi a creare un design con queste linee guida in mente. Potrebbe significare che stai adottando un approccio diverso dal solito, il che è fantastico per mantenere le tue abilità al limite e crescere come designer.
Cosa ne pensi di Material Design? Quali sono state le tue esperienze finora? Per favore, condividilo sotto nei commenti, sono molto curioso e sono sicuro che molti altri lo siano.
Accentsconagua