Progettazione di materiale, interfaccia utente secondo Google

Nello scenario moderno, se vuoi includere il movimento, dovrai renderlo reale, rispettando le leggi della fisica e la funzionalità delle cose nel mondo reale. In effetti, gli utenti sono abituati a sentire il movimento nella loro vita quotidiana. Questo attira le loro attenzioni e li aiuta a comprendere meglio la funzionalità delle cose.

20 Principi di base della progettazione del materiale

Il design del materiale è un insieme di principi e linee guida che guidano la progettazione di interfacce utente moderne ed eleganti (IU). Lanciato da Google nel 2014, questo linguaggio visivo mira a creare interfacce coerenti e armoniose su tutti i dispositivi, indipendentemente dal sistema operativo o dall’interfaccia utilizzata.

Il design del materiale si basa su tre pilastri principali: l’universo fisico, il colore e lo spazio. Ogni componente di interfaccia deve fondersi in questo universo, rispettando le proporzioni e i colori specifici per ciascun materiale. Gli spazi devono anche essere ben definiti in modo che l’utente possa facilmente navigare da un elemento a un altro.

Qual è il design del materiale ?

È cosa ?

Il design del materiale è una serie di regole di progettazione, create da Google nel 2014. Questo strumento facilita la gestione dei componenti della piattaforma. In effetti, i progettisti di Google hanno capito che i componenti devono avere proprietà fisiche specifiche.

Il design del materiale include quindi direttive per tutto:

• La larghezza
• Velocità
• L’ombra

• La tipografia
• Grates
• Spazio
• Il colore
• La scala
• Imaging

In questo modo, gli utenti hanno l’impressione di essere in contatto con elementi fisici del mondo reale.

Allo stesso modo, il design del materiale non è solo una questione di mostrare ai progettisti come lavorare sulle apparenze di prodotti e servizi. Consente inoltre ai progettisti di creare progetti intenzionali.

Perché optare per il design del materiale ?

Come la maggior parte dei sistemi di progettazione, è stato creato materiale per fornire una migliore esperienza utente su vari dispositivi e piattaforme. L’obiettivo è che gli utenti abbiano un’esperienza coerente .

Il design del materiale non è un semplice insieme di linee guida di stile. Questo è un sistema di progettazione completo.

A differenza di altri sistemi di progettazione meno completi, può gestire situazioni di progettazione, con casi d’uso complessi.

Allo stesso modo, il design del materiale è una libreria di design abbastanza flessibile. Nelle direttive, gran parte delle specificità dell’attuazione del design sono interamente lasciate al designer.

Elenco dei principi della progettazione del materiale

Principio 1: familiarizzare con le risorse chiave

Se desideri acquisire conoscenze specifiche della progettazione del materiale, la soluzione migliore è consultare la risorsa di Google ufficiale.

Viene continuamente aggiornato e contiene tutti i dettagli completi e necessari, per la progettazione di progetti di materiali.

Il miglior vantaggio relativo a questa risorsa è che non è solo limitato a aspetti specifici in Android. Al contrario, copre l’intero aspetto di progettazione del materiale, in qualsiasi progetto il tipo di applicazione o sul Web.

È consigliabile navigare almeno i primi capitoli di questa risorsa, per poter familiarizzare con i suoi principi fondamentali.

Principio 2: sapere cosa è “materiale” nella progettazione del materiale

Il design del materiale del nome è tutt’altro che innocuo. Il design del materiale è un’imitazione del materiale e del mondo fisico. È ispirata dalle sue trame, anche dal riflesso della luce e dalla proiezione delle ombre. Le superfici del materiale reinventano la carta e gli inchiostri.

In effetti, l’idea centrale dei principi del design del materiale si concentra sulla creazione di design, imitando gli oggetti del mondo reale.

Principio 3: Usa le ombre per definire le gerarchie visive

Gli strumenti principali di progettazione del materiale sono:

• Bordi
• Superfici
• Illuminazione
• Ombre realistiche

Ad esempio, le ombre ti aiutano a dare la priorità ai diversi elementi, per avere un design completo.

Principio 4: usa colori vivaci

Il design del materiale è senza dubbio un design realizzato in un approccio minimalista. In altre parole, non è necessario utilizzare molti strumenti di design e stile.

Una delle poche cose materiali che puoi usare è il colore. Proprio, il colore brillante. In effetti, i colori vivaci svolgono un ruolo importante nel migliorare il design del materiale. Attirano l’attenzione degli utenti e li incoraggiano a interagire con il design.

Principio 5: non trascurare il colore primario e il colore dell’accento

Il modo migliore per adattare questo principio a qualsiasi tipo di design è scegliere tre tonalità che serviranno da tavolozza principale, con un colore che fungerà da accento.

I colori primari che scegli possono essere utilizzati negli elementi chiave dell’interfaccia, incluso:

• I campi
• Scatole
• Gli sfondi
• Caratteri, ecc.

E il colore dell’accento è, come suggerisce il nome, sottolinea e attira l’attenzione su un elemento principale. Ricorda che il colore dell’accento scelto dovrebbe essere più contrastante di quello dei colori primari.

Principio 6: fare buon uso degli spazi bianchi

Gli spazi bianchi svolgono un ruolo chiave nel layout del testo e della tipografia. In realtà, lo spazio bianco è uno strumento per attirare l’attenzione, l’utente e indirizzare la propria attenzione su un elemento particolare.

Quindi non esitare a:

• Usa una tipografia di grandi dimensioni per i titoli principali
• Aggiungi molti spazi bianchi
• Mantieni abbastanza spazio vuoto nel tuo design globale.

Principio 7: Segui la nuova tendenza delle immagini da bordo a bordo

I design dei materiali sono completamente adattati all’immagine. Quindi, se hai deciso di aggiungere immagini al tuo design, devono avere un ruolo principale.

Le immagini incluse nel design del materiale devono seguire la modalità Edge-to-Edge. Vale a dire, non ci devono essere margini, separando il bordo di un’immagine dal bordo della finestra o dello schermo.

Principio 8: tutto deve essere reattivo

Rendere le cose accessibili e utilizzabili su ciascun dispositivo, indipendentemente dalle dimensioni dello schermo, è uno dei principi di base della progettazione del materiale. L’obiettivo è offrire un’esperienza coerente. In questo modo, l’utente non si sentirà confuso durante il passaggio da un dispositivo all’altro, perché non otterrà una nuova interfaccia ogni volta che cambierà il dispositivo.

In questo caso, il design deve essere reattivo. Fortunatamente, grazie ai quadri avanzati, la metà del tuo lavoro è già fatta. Di conseguenza, la creazione di un design reattivo non sarà un compito difficile per te.

Principio 9: Dimensioni

Sul web l’asse z viene utilizzato per la sovrapposizione e non per il potenziale cliente. D’altra parte, il mondo 3D si basa sull’asse y.

Il materiale di design utilizza principalmente 3D in modo che l’asse y. Guarda il design di Google, per notare la prospettiva isometrica. Questo modo di design è ispirato al mondo reale, da cui il nome “materiale”.

Principio 10: Ricorda, il successo è in dettaglio

Nel design del materiale, tutto deve essere semplice. Il miglior esempio potrebbe essere il design skeuomorfo . Questa tecnica mira a imitare oggetti reali durante la progettazione di oggetti virtuali. È quindi necessario assicurarsi che ogni elemento del tuo design sembri, per quanto possibile, alle cose della vita reale.

Principio 11: il movimento deve avere un significato

Secondo Google, il movimento dà significato a un design. Quando lavori con il design del materiale, il movimento è un componente che deve essere incluso.

Nel design del materiale, il movimento deve avere queste 3 caratteristiche:

1. Sii informativo: deve essere noto agli utenti dove e quando l’azione era disponibile.
2. Aiutare a concentrarsi e guidare gli utenti nelle parti più importanti della pagina.
3. Sii espressivo e aggiungi un po ‘di personalità e dinamismo all’interfaccia.

Principio 12: il movimento deve essere autentico

Nello scenario moderno, se vuoi includere il movimento, dovrai renderlo reale, rispettando le leggi della fisica e la funzionalità delle cose nel mondo reale. In effetti, gli utenti sono abituati a sentire il movimento nella loro vita quotidiana. Questo attira le loro attenzioni e li aiuta a comprendere meglio la funzionalità delle cose.

Questo è il motivo per cui Google ha riservato una sezione separata delle direttive della progettazione dei materiali, per dettagliare il concetto di movimento autentico.

Principio 13: accelerazione e rallentamento dei movimenti

È necessario offrire una transizione chiara e pratica per gli utenti. Il processo di movimento deve essere probabile e realistico, poiché il design del materiale mira alla riproduzione dei fenomeni del mondo reale.

I designer devono trovare il tempo migliore, per ogni movimento dell’oggetto.

Da un lato, una lentezza eccessiva degli elementi può distrarre gli utenti e persino avere un impatto negativo sul flusso di utenti. D’altra parte, movimenti troppo dinamici possono disturbare gli utenti di Internet.

In questo caso, devi essere nel mezzo destro, garantendo una durata ottimale e una buona leggibilità delle animazioni. È necessario dare agli utenti abbastanza tempo in modo che possano notare le modifiche. Ma non farli aspettare. La ricerca dimostra che da 200 a 500 ms sono le migliori velocità di animazione.

Principio 14: Approfitta delle animazioni di icona

A volte le icone possono essere create con pulsanti di contesto con un effetto di rivelazione circolare.

È vero che gli utenti di Internet non notano spesso questi dettagli, ma sono importanti per creare un’influenza positiva sull’esperienza utente globale.

Principio 15: creare tempi diversi per movimenti diversi

Gli oggetti animati che appaiono uno per uno sono più interessanti e più vivi. Tale approccio offre agli utenti la possibilità di guardare ogni articolo.

D’altra parte, presenta tutti gli elementi della pagina allo stesso tempo confonde gli utenti, perché non sanno dove cercare.

Progettazione di materiale, interfaccia utente secondo Google !

Il design del materiale è un linguaggio visivo e interattivo creato da Google. Ma è anche una guida per progettare un’interfaccia grafica (sistema di progettazione). Questo design è “materiale” perché è ispirato da oggetti reali, carta e inchiostro cosa, differisce dal design piatto. Google ha usato il design dei materiali per unificare lo stile grafico delle sue applicazioni e piattaforme. La sua interfaccia ha quindi il vantaggio di essere molto adatto per l’uso per qualsiasi dispositivo e tutte le risoluzioni di visualizzazione. È anche conveniente. La progettazione del materiale ottimizzerebbe la UX, offrendo risorse a sviluppatori e designer di interfacce. Come con qualsiasi corrente grafica, ha i suoi dilettanti e detrattori.

Il design del materiale è soprattutto una metafora. Una metafora materiale come teoria unificante di uno spazio razionalizzato e un sistema di movimento. Il materiale è ancorata alla realtà tattile, ispirata allo studio della carta e dell’inchiostro, ma tecnologicamente avanzato e aperto all’immaginazione e alla magia.

Qual è il design del materiale ?

Il nome “Material Design” corrisponde a un set di Regole di progettazione proposto da Google. A volte è tradotto da “design del materiale” o “design contestuale”. Prima di tutto era un design destinato alle applicazioni mobili (Mobile First). Quindi è diventato una delle tendenze principali nella progettazione dell’interfaccia. L’approccio di Google ricorda il Design piatto (o design piatto): minimalismo, forme geometriche e colorate, senza superflui (a differenza del skeuomorfismo). Ma in questo caso, è un design piatto … con spessore e sollievo. In effetti, ecco le caratteristiche principali:

• Una metafora carta e inchiostro da attrezzature digitali.
• Un design audace e grafico.
• La creazione di movimenti Per migliorare la convenienza e la UX. Le azioni dell’utente causano micro-interazioni significative.

La libreria polimerica

Per utilizzare gli elementi grafici della progettazione del materiale (elementi cartacei) e dei componenti di base (elementi core), Google ha creato la sua libreria, polimero, destinata agli sviluppatori di applicazioni Web. Da allora, Google ha offerto diversi siti e strumenti per aiutare i designer a progettare con questo stile di design.

Vedi questa dichiarazione sotto forma di “Manifesto”, che si trova nell’introduzione del sito di riferimento del materiale.IO:

“Ci siamo sfidati a creare un linguaggio visivo per i nostri utenti che sintetizzano i principi classici di buon design, innovativi e possibilità offerte dalla tecnologia e dalla scienza. Lo chiamiamo: design del materiale.»

Webdesign secondo Google

Il design del materiale è quindi diverso dal design piatto. È un nuovo tipo di web design. Possiamo dire che è un Web design reattivo (Adattivo automatico) incentrato sull’esperienza utente. L’obiettivo è ottenere un design:

• Intuitivo Per tutti gli utenti (inclusi non esperti)
• Adatto a tutti i supporti (Computer, tablet, smartphone, ecc.)
• Interattivo Grazie alle animazioni dinamiche.
• Omogeneo tra tutte le interfacce

Secondo Google, questo design utilizza possibilità tecnologiche e scientifiche per fornire soluzioni Web all’ergonomia contemporanea e ai problemi di progettazione. Nel video qui sotto, i progettisti di Google esprimono le loro motivazioni iniziali, il modo in cui lavoravano e le esperienze “fisiche” condotte. Notiamo che se questo linguaggio di design è ancorata in realtà, lascia un posto importante all’immaginazione dell’utente. Il termine “magia” spesso ritorna sul design del materiale.

Riprogettazione di Google

Per comprendere appieno l’approccio di Google, devi tornare alle origini di Google e all’importanza che l’azienda di Montain View abbia attaccato il design. Beh non molto … secondo gli iniziatori del design del materiale.

Vedere questo video ci dà una buona idea dell’importanza di trasportare una “visione” per intraprendere questo progetto: riprogettare Google.

Perché il design del materiale ?

Visibile nella versione 5.0 di Android, il design del materiale è stato presentato per la prima volta il 25 giugno 2014 da Matias Durate, direttore dell’esperienza utente Android presso Google. Faceva parte della conferenza I/O di Google. Con questo nuovo charter di design, Google ha creato il proprio linguaggio visivo, identificabile qualunque sia il servizio o il prodotto, dalle applicazioni mobili agli oggetti connessi.

Matias Duarte ha mostrato la metafora per la carta (Android / Materiale) nel 2014 nel 2014).

Guarda questo video per celebrare il primo anniversario di questo approccio al design. È stato uno dopo il lancio, nel maggio 2015. Matias Durate dà uno sguardo retrospettivo allo scorso anno e potrebbe già apprezzare con ciò che i progettisti dell’entusiasmo, ma anche gli sviluppatori, avevano appropriato i principi presentati un anno prima.

Per o contro la progettazione del materiale ?

Questo design è stato progettato anche per Arricchisci l’esperienza dell’utente E l’efficacia dell’interfaccia (nuovi caratteri leggibili in più lingue, migliore convenienza …) Un anno dopo, Google ha svelato, tra le altre cose, il kit di design materiale per progetti Web (scarica il kit qui).

Il design del materiale ha suscitato reazioni diverse. Alcuni hanno approvato questo “miglioramento” di un design piatto considerato semplicistico e noioso. In effetti, è un design “fluido” e in movimento. Nella composizione, gate, reade e dinamiche, struttura l’interfaccia. Gli spazi, l’allineamento e i colori sono essenziali nella fase di progettazione. Tutti questi elementi danno la priorità al contenuto e facilitano la navigazione dell’utente. Le animazioni, in base alle leggi della fisica, rassicurono l’utente in merito al risultato delle sue azioni.

Tuttavia, per altri, Google cerca di imporre il suo stile grafico, A rischio di limitare la creatività di designer/grafici. Tutti i siti Web inizierebbero quindi ad apparire come applicazioni Android, a scapito del Qualità dell’esperienza dell’utente.

Come funziona ? Applicazione con Android

Dobbiamo tenere presente che questi sono “elementi materiali”. Quindi, è impossibile attraversare un elemento. Solo il componente interessato all’utente reagirà. Nel design del materiale, ilL’ambiente è 3d. Ogni oggetto, o “materiale”, ha 3 coordinate: x, y, z. L’asse z riguarda l’elevazione dell’oggetto. Possiamo decidere l’elevazione dell’oggetto, le sue dimensioni e le ombre danneggiate, ma lo spessore rimane quello di un foglio di carta. Quest’ultimo non può piegarsi. D’altra parte, si muove su tutti gli assi.

Android fornisce tre temi (tema del materiale oscuro o leggero, tema del materiale leggero con barbar scuro) da implementare direttamente nell’applicazione modificando, se lo si desidera, alcuni degli attributi. IL divertimento Applicare su oggetti/elementi dell’interfaccia sono due: l’animazione di Tween (per le transizioni, ad esempio ruotando sull’immagine) e l’animazione del frame (visualizzazione di diverse immagini). La caricanimazione ti consente di caricarli e l’avvio di attivarli/lanciarli.

Esempi di interfacce di progettazione del materiale

Le spiegazioni teoriche – la metafora di un documento intelligente che si diverte e interagisce con l’utente – può sembrare oscura. Ma osservare le interfacce facilitano concretamente la comprensione del concetto di Google.

Guarda le fonti sugli uplab (storie.Uplabs.com)

Un’altra fonte, ricca di esempi: The Material Design Blog

Icone di progettazione del materiale

Questo sistema di progettazione doveva produrre le proprie icone. Una grande biblioteca è disponibile su siti di fonti diverse, risparmiando tempo considerevole per i progettisti dell’interfaccia utente quando conosci la complessità di un design di icone coerenti omogenee.

Rileggi i nostri articoli su questo argomento:

Vedi la Guida GitHub per l’uso di queste icone in ambienti diversi.

Altre icone materiali (da scaricare qui)

Puoi scaricare qui molte icone di progettazione di materiali

Un’altra fonte di icone di progettazione di materiali da scaricare qui

Grande scelta di icone di materiale nella progettazione piatta da utilizzare sui tuoi progetti, ma anche guida per usarli (qui)

Alcune fonti e ispirazioni

• Il riferimento sulla progettazione del materiale: materiale.io
  • Movimento
  • Stile
  • Disposizione
  • Componente
  • Modelli
  • Crescita e comunicazioni
  • Usabilità
  • Piattaforme
  • Sul sito di Google Design, troverai casi di studio e guide pratiche (molte risorse e possibilità di abbonarsi a una newsletter molto ricca)

  Conclusione

  Il design del materiale di Google beneficia del Semplicità di design piatto. L’interfaccia è raffinata e visivamente bilanciata. Come il design piatto, soddisfa i requisiti di Design reattivo. Ma dove il design piatto è spesso criticato per il suo Mancanza di convenienza, Google Honest Una parte dello skeuomorfismo ad un alto livello di astrazione. Pertanto, l’uso intelligente di animazioni, scelte tipografiche e la metafora della carta migliorano l’esperienza dell’utente. L’entità degli elementi grafici offerti agli sviluppatori consente anche di capire come il design del materiale Android ha conquistato il Web … A rischio di essere invasivi. Naturalmente, come per ogni tendenza del design, la scelta di utilizzare questo tipo di design dipende dagli utenti mirati e dagli obiettivi aziendali/marchio. Al designer/designer per decidere se deve seguire completamente il Carta di progettazione del materiale, Per essere ispirato da esso o allontanarsi.

  • Google Material Design, una formalizzazione di progettazione
  • Cos’è la progettazione del servizio ?
  • Cos’è il pensiero del design ?
  • Qual è la convenienza ?
  • Cos’è il design piatto ?
  • Cos’è lo skeuomorfismo ?
  • Definizione di design emotivo, il luogo delle emozioni nel design

  Vedi i nostri servizi:

  • La nostra formazione per progettare una progettazione di sistema
  • La nostra formazione per il design pensante di 2 giorni.