Qual è la differenza tra "stile piatto" e "design del materiale"?


20

Dopo l'uscita di Windows 8, tutti hanno parlato di "Metro UI" e successivamente del "Design piatto". Ora, dopo l'uscita di Android Lollipop, tutti parlano di "Material design". Qualcuno può spiegare la differenza tra "Material design" e "Flat style"?

Risposte:


20

Il design del materiale non è correlato al design piatto nei suoi principi. Il design del materiale è scettico in quanto è un tentativo di rendere il web design più realistico nel modo in cui ritrae gli elementi, usando i livelli e l'animazione in un modo che ha un senso al di fuori del browser. Il design visivamente piatto e il design dei materiali sono simili al momento, ma il design dei materiali può essere applicato a progetti diversi da quelli piatti.

Segue 3 principi

  1. Il materiale è la metafora
  2. Sii audace, grafico, intenzionale
  3. Fornisci significato con movimento

La stratificazione nella progettazione del materiale viene eseguita spostando gli elementi in avanti o indietro lungo l'asse z, da e verso l'utente, e aggiungendo ombre realistiche per trasmettere più significato. Gli elementi di animazione, come la presenza di un'animazione che influisce sulla posizione quando viene rimosso un elemento dell'elenco, ha lo scopo di migliorare il flusso e la comprensione dell'utente, rendendo l'esperienza più fluida. In tal modo, è possibile rappresentare più significato attraverso la progettazione materiale che nella progettazione piana


I designer di Google hanno realizzato modelli di carta per capire la stratificazione e le ombre per il loro design dei materiali.

Esistono altre linee guida di progettazione riguardanti spaziatura, colore, usabilità e maggiori dettagli sul posizionamento e l'animazione che puoi consultare nella pagina Web di Google sull'argomento .

Un buon modo per saperne di più sul design dei materiali e su come implementarlo è utilizzare le app che Google ha creato utilizzando il design dei materiali e per leggere i dettagli del design , questo è di Brian Lovin sull'app Inbox.

Le persone possono presumere che il design dei materiali sia una sorta di estensione del design piatto, ma in realtà i principi sono diversi. La tendenza attuale è quella di realizzare un design pulito e piatto che Google utilizza per ora, ma i principi della progettazione dei materiali si estendono oltre questi limiti e possono essere applicati anche ad altri metodi di progettazione.


In quel Material Design, visivamente, usa molte icone e stili di design piatti, direi che sono sicuramente correlati in questo senso. Il Material Design, ovviamente, è più che l'aspetto visivo, come si fa notare, però.
DA01,

@ DA01 Grazie, ho cercato di chiarire il mio punto nella modifica più recente
Zach Saucier,

In una nota correlata, questo articolo è ottimo per confrontare iOS con Material Design e imparare di più su ciascuno.
Zach Saucier,

5

Design piatto = un termine generico che si riferisce all'estetica moderna alla moda dell'interfaccia utente di icone piatte a blocchi e blocchi di colore.

Metro Design = nuovo design dell'interfaccia utente di Microsoft (ora chiamato linguaggio di progettazione Microsoft ) per Windows 8 che utilizza l' estetica visiva del design piatto .

Material Design = nuovo design dell'interfaccia utente di Google per Android che utilizza l' estetica visiva del design piatto .

(Si noti che sia Metro che Material sono molto più che semplici estetiche di design piatto. Parlano anche di design di interazione, flussi, librerie di modelli, ecc.)

Grazie a Johannes per aver notato la modifica del nome per l'interfaccia utente di Microsoft.


Non penso che questo sia abbastanza nel dettaglio di ciò che sono realmente . Sembra essere molto di più su ciò su cui vengono utilizzati
Zach Saucier,

@ZachSaucier giusto. L'OP chiedeva principalmente la differenza. Direi che la differenza è che uno è un termine generico per uno stile visivo, gli altri due sono termini specifici per le linee guida dell'interfaccia utente con marchio.
DA01,

1
@ DA01, voglio solo sottolineare che l'interfaccia utente di Microsoft non è stata denominata Metro dal 2012. È invece chiamata sorgente "Microsoft design language" . Mi rendo conto che anche la domanda dei PO l'ha menzionata con questo nome, ma non è corretto.
Hanna,

@Johannes sì, questa è una buona nota.
DA01,

Material Design può essere utilizzato non solo con Android ma anche Web design e progettazione di app desktop.
vovahost l'

3

Il design del materiale non è piatto, è un mucchio di strati piatti di "materiale" che sono distanziati un po 'sull'asse Z. Ciò significa che questi oggetti hanno ombre e dovrebbero provenire da qualche parte quando appaiono sullo schermo e lasciare da qualche parte quando non sono più necessari. Ciò significa che non svaniscono solo dentro e fuori.

Ci sono anche una serie di linee guida di progettazione che specificano il colore, la spaziatura e molti altri aspetti del layout.

Eccone alcuni, ma puoi trovare molto di più con poche ricerche su Google.

http://www.google.com/design/spec/material-design/introduction.html#


-1

"Design piatto" è come ti hanno spiegato lassù, e il design "Material Design" non è proprio "skeuomorphic" ma "Skeuomorphed Flat Design". "Material Design" usa elementi piatti e allineali sull'asse Z per avere un "Design piatto 3D". Spero abbia aiutato.


-2

In realtà, il design piatto apparirà più semplicistico sullo sfondo del materiale, inoltre, tutte queste animazioni sono rivolte più all'interazione dell'utente con i dispositivi mobili, piuttosto che al sito. Inoltre, nessuno proibisce l'uso di questi due approcci in un singolo prodotto, se si avvicinano al lavoro sul design in modo più consapevole e filosofico. Per quanto riguarda lo skeuomorfismo, ha cercato di portare elementi dell'interfaccia in un modo più familiare e user-friendly: come questo o quell'oggetto apparirebbe nel mondo reale, ma molte persone hanno visioni diverse delle cose circostanti, quindi la creazione di un singolo lo stile di tale approccio era quasi impossibile ... Alcune informazioni da aggiungere Qual è la differenza: Design piatto vs Materiale design

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.