Mi a különbség a material design és a flat design között?
2015 első nagy kérdése ez. Látszólag nem sok. Avatatlan szemnek semmi. Az elmúlt 2–3 évben megszoktuk a nagy laposságot a material is ilyen. Mégis ahogy a nevében is benne van, anyagszerűséget visz a túlságosan kilapult felületekbe. Kellett ez nekünk? Ha nem bánod, egy kicsit megnézem mi volt előtte:
Amikor egy trend hosszú időre megveti a lábát és beépül a mindennapokba már nem trend, és borítékolható, hogy az idők folyamán változáson megy keresztül. A UI designban a 2007 óta volt jelen az Apple un. skeuomorph grafika fogalma, de előtte is — a grafikus felületek megjelenése óta — folyamatosan arra törekedtek a grafikusok, hogy a designelemeket nagyon élethűen ábrázolják — az akkori felhasználási szokásoknak megfelelően könnyebb volt megszokni egy igazi naptárra hasonlító felületet ebben a furcsa digitális világban…
A magas szintű grafika az Apple esetében ráadásul magas árfekvéssel párosult, az első iPhone sikere nagyban köszönhető a skeumorph felületeknek.
Mára a felület teljesen kisimult, de az Applenél ikon szinten még mindig fellelhető, a flat felületek sikere nyomán folyamatosan írtják ki az oprendszerekből a skeumorph grafikákat.
A flat, azaz lapos design a másik rivális céghez köthető, aki a Windows újragondolásával vezette be a Metro stílust. Nem ők találták ki, mert már sok helyen megjelent ez a típusú puritán egyszerűség webszerte, de innen eredeztethető a lapos felületek térhódítása.
A Microsoft azonban megbukott a Windows 8-al, túl sokat változtattak a Windowson és a felhasználók sosem üdvözlik az ilyen mértékű újításokat, már kisebbektől is kiakadnak. Aki winen szocializálódott és nem találta a Start menüt ott ahol megszokta, az a világégéssel volt egyenlő. Jelenleg a Win10 már ötvözi a régi felépítést az új lapos designnal — és közben eltelt pár év, volt idejük beleszokni a usereknek.
A lapos designra már megérettek a felhasználói szokások, azaz 2010 után már sokkal fontosabb volt, hogy egy felület átlátható és funkcionális legyen, mint az, hogy úgy nézzen ki, mint nagyanyám receptfüzete. A mobilalkalmazások és mobilra optimalizált felületek hozták meg az igazi áttörést, ahogy a díszes grafikus felület inkább hátráltatta a használatot pl. már senkit nem kell arra megtanítani, hogy egy digitális számológépet ugyanúgy használandó, mint egy kézzel fogható.
Ez a fajta megjelenítés nem csak egyszerűbbé és átláthatóbbá tette a használatot, de a tervezők, fejlesztők számára egy idő és energiatakarékosabb munkát is lehetővé tett. A grafikai elemek nélküli design ráadásul kilobyteban is jelentősen kisebb, gyorsabban települő alkalmazásokat, gyorsabban letöltődő weboldalakat eredményez.
A flat designt ma már a legtöbb gyakran használt alkalmazás felvette, a tartalomra, funkciókra, használhatóságra koncentráló megjelenés mindent felülír. Viszont a tavalyi évben már érezhető volt, hogy az uniformizálás, a mindenhol ugyanolyan felületek, egyforma weboldalak okán változások fognak beállni. Az első ilyen változás az un. long shadow, azaz hosszú árnyék alkalmazása volt, ami egy egyszerű optikai trükkel a lapos ikont térbe emeli ki. Ikonokon és gombokon alkalmazzák előszeretettel, hiszen a kiemeléssel a láthatóság, kattinthatóság és ezzel a konverzió is javulhat.
Nyilván mindenre nem lehet hosszú árnyékot vetni, elég zavaró lenne, így más vizuális elemekkel lehet egy kis változatosságot vinni a hiperlapos designba, vigyázva arra, hogy a funkcionalitás ne sérüljön, sőt!
Főleg a flat illusztrációk használnak textúrákat, amellyel a különböző alakzatokat teszik anyagszerűbbé, így jobban elkülönülnek egymástól. Itt megfigyelhető egy felezett árnyékolás is, ami a long shadowhoz hasonlóan térbeliesíti a grafikát, ebben segít a színátmenetes színezés is.
És kezdünk is lassan megérkezni az anyagszerűséggel a címben említett material designhoz, amely elnevezés ismét egy céghez kötődik, amely nem más mint a Google.
Aki semmi mást nem tett, mint jó marketing érzékkel felismerte, hogy az Apple elvesztette a design ikon díjat, a Microsoft pedig mindig is béna volt az ilyesmiben, levonta a következtetéseket és “megalkotta” a material design fogalmat. Ami viszont nem a flat design feltupírozása, mert teljesen más elvekkel közelíti meg a tervezést. Elég terjedelmes dokumentációt mellékelt hozzá a Google — http://www.google.com/design/spec/material-design/introduction.html#introduction-principles
A jelentős különbség az un. Z-tengely, ami felfelé térbe, rétegesen építkezik.
Az anyagszerűség nem textúrákból fakad, hanem abból fénnyel és árnyékokkal jön létre egy 3d-s alakzat, sokkal finomabb szórt árnyékokat, akár kétirányú fényforrást használva.
Míg a flat designnak nincsenek ilyen kötött szabályai, a material színekben is előre meghatározott palettából dolgozik, azonos színhőmérséklettel, a flatnél teltebb színekkel. http://materialcolors.com/
Így ha material design készítésre adjuk a fejünket, akkor alaposan át kell tanulmányozni, hogy mit lehet és mit nem (fix magasság, fix fontkészlet stb.) és a grafikán túl is kell látnunk, hiszen a designon túl az animációk szerepe is jelentős:
De ami még nem derült ki, mire is jó ez? Miért használjuk a Google irányelveit, ha már a flat bevált?
- mivel alaposan kidolgozott, átgondolt ezért nem olyan esetleges, mint minden amit a flat design alá soroltunk eddig ami lapos
- a rétegekben gondolkodás rengeteg új lehetőséget rejt magában, hogy a kis mobil felületeken hatékonyan tudjunk sok információt elhelyezni
- jól néz ki! A skeumorph és a flat a jelenlegi alfa és omega, a material pedig az egészséges középút, amellyel úgy tudsz dolgozni, hogy bármilyen design túlzásba esnél a használhatóság kárára!
- míg a flat design sok esetben statikus, és nem ad választ a felhasználónak a cselekedeteire, addig a material designt használva az animációknak köszönhetően mindig kap visszajelzést, magától érthetődő mi történik, vagy mit kell csinálni. Nyilván ehhez tervezőként be kell tartani az irányelveket, valószínűleg a Google kicsit jobban ismeri a felhasználók szokásait, mint te a kis öntudatos kreatív.
Remélem sikerült egy oldalban körülbelüli választ adnom az amúgy egy könyvet is megérne a téma kérdésre, amelyet többen feltették az elmúlt napokban.
