Quali sono i vantaggi relativi di design piatto, design dei materiali e scettuomorfismo?


8

Ho seguito le linee guida di Google per questa cosa chiamata "material design" , e ne ho seguito alcune. Tuttavia, vedo anche molti siti che utilizzano il design piatto: Twitter , Codecademy e Gitter - e questo è solo alcuni. Poi ci sono quelli che fanno uso di gradienti CSS3, ombre, ecc. E immagini dettagliate per progettare un sito che sembra reale (correggimi se sbaglio, ma non è questo lo scuomorfismo?), Come la home page per Twitter Bootstrap 2 .

Da quanto ho capito, il design piatto riduce il carico sul traffico mobile.

Quali vantaggi (in termini di velocità / UX / ecc., In particolare) offrono ciascuno l'uno rispetto all'altro?


Penso che questa sia una domanda interessante da sollevare. Il mio pensiero iniziale è che i progetti skeuomorphic potrebbero avere uno svantaggio di velocità se si basano fortemente sulle immagini. Suppongo che questo significhi design piatto che riduce il carico del traffico mobile. Ma come contrappunto, un design skeuomorphic potrebbe ancora essere realizzato con le molte funzionalità disponibili in CSS3, quindi temo che la risposta se l'uno o l'altro sia vantaggioso in termini di velocità sarebbe "a volte sì, a volte no"
Giovanni B

@JohnB Non riesco nemmeno ad accedere al sito. Ottengo un errore di "ciclo di reindirizzamento" in Chrome --- meglio non immergersi in una discussione OT qui però.

Risposte:


11

Lo skeuomorfismo è davvero l' opposto del design piatto . "Material Design" di Google è semplicemente il loro nome commerciale per le loro interpretazioni specifiche del design piatto. È comunque design piatto. "FLat Design" è stato coniato da Apple quando hanno rilasciato iOS7. Ha preso piede perché era il primo termine usato, avrebbe potuto essere facilmente chiamato "Material Design" se Google lo avesse fatto per primo.

La pratica dello skeuomorfismo consiste nell'aggiungere elementi visivi che ci si aspetterebbe di vedere se l'oggetto fosse fisicamente reale anziché proiettato su uno schermo. Un esempio potrebbe essere ombre e luci. Esistono su tutto nel mondo reale ma su nulla nel mondo digitale. L'aggiunta di questi elementi skeuomorphic è progettata per far sentire gli umani più familiari con gli elementi digitali.

Il design piatto è l'opposto di questo. Nel "design piatto" non viene presa in considerazione la fisica e l'illuminazione del "mondo reale". Vengono creati elementi digitali, tuttavia il progettista desidera realizzarli senza preoccuparsi di ciò che la "realtà" farebbe all'elemento se l'oggetto fosse fisico.

La home page del bootstrap non è un esempio di scetticismo. È un esempio di design piatto in generale. Anche se si potrebbe sostenere che anche il rettangolo dell'inserto nel mezzo con l'effetto "rilievo" dell'inserto è scettico. Quindi forse un "ibrido" potrebbe essere la migliore descrizione.

In termini di vantaggi / svantaggi tecnicamente, non ci sono solidi ragionamenti per scegliere l'uno rispetto all'altro.

Spesso per ottenere immagini di effetti skeuomorfi credibili di alta qualità sono necessarie. Le immagini aumenteranno naturalmente le richieste HTTP e il caricamento del browser. Se si rinuncia a immagini a favore di CSS scettici, il CSS può essere estremamente complicato e di grandi dimensioni. Mentre la riduzione delle richieste HTTP richiederebbe le immagini, la dimensione aggiuntiva (kb) di un file CSS con elementi skeuomorphic potrebbe superare la riduzione delle richieste HTTP (dal punto di vista degli utenti).

Il design piatto è generalmente facilmente realizzabile con CSS3 di base. Se un'immagine è necessaria in un design piatto, la stessa immagine molto probabilmente sarebbe necessaria anche in un design skeuomorphic. Quindi si compensano in termini di vantaggi / svantaggi. Flat Design CSS è solitamente meno complesso e più facile da modificare, ma non deve essere. È del tutto possibile creare un design piatto con proprietà CSS molto complesse. La maggior parte dei disegni piatti contiene gradienti, ma non gradienti del "mondo reale" basati su ciò che la luce farebbe se l'oggetto fosse reale. Ognuna delle icone Apple iOS7-8 o Windows 8 utilizza sfumature. Semplicemente sfumature molto sottili invece di "far sembrare che sporgano" le sfumature.

Alla fine, non vi è alcuna ragione difficile per cui il design piatto può essere tecnicamente migliore o peggiore dello scettuomorfismo. Tutto dipende da una questione di preferenza da parte del designer. Sia lo skeuomorfismo che il design piatto sono semplicemente tendenze del design senza alcuna base nel ragionamento tecnico.

è simile a chiedere "Qual è tecnicamente meglio un sito Web rosso o un sito Web blu?" - non c'è altra risposta che "Qualunque cosa tu preferisca".


1
Una nota è che gli effetti skeuomorphic realizzati esclusivamente nei CSS causerebbero un enorme calo delle prestazioni dopo il semplice caricamento del file perché i gradienti, le ombre delle caselle, ecc. Sono molto intensivi
Zach Saucier,

Mi sfuggo a ciò nella risposta @ZachSaucier :)
Scott,
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.