Az elmúlt 2014-es I / O-esemény során a Google új meglepetéssel jött vissza. Amellett, hogy hivatalosan is kiadta az új Android frissítést a Lollipop kódnévvel, a Google bemutatta a friss új design nyelvét, a Material Designot . Ez egy olyan tervezési rendszer, amely nemcsak az új Lollipop felhasználói felület fejlesztésekre szolgál, hanem az eszközök és a környezetek számára is.
Az Anyagtervezésnek van néhány főbb jellemzője, amelyek megkülönböztetik azt más tervezési trendek között, egyedi módon. Csakúgy, mint a neve, az valóságos anyagok ihlette, és egy tervrendszerbe egyesítette őket, hogy elegáns, intuitív, szép és leginkább interaktív felhasználói élményt hozzon létre. Ebben a bejegyzésben megnézzük, hogy mi van az Anyagtervezésben, és gyors útmutatást adunk arról, hogyan kell végrehajtani. A Google blogjának idézésével elmondom: „Ez az anyagi tervezés”.
Bevezetés
Az Material Design egy egységes tervezési rendszer, ami azt jelenti, hogy az összes rendelkezésre álló mai eszközzel és platformtal dolgozott. A tablet, okostelefon és az Android, az iO, a Windows és a webes platformok között. Minden designnak ugyanolyannak kell lennie, hogy bárhol is legyen.
Főbb elvek
Három alapelv létezik az Anyagtervezés kialakításában. Ezek az alapanyagok általánosságban lényeges részét képezik.
- Az anyag a metafora . Az Anyag fejlesztését inspirálta a mindennapos tapintható elemek, papír és tinta tanulmányozása . Az objektum fényét, felületét és mozgásait jobbá teszi, ha kölcsönhatásba lépnek egymással.
- Merész, grafikus és szándékos . A nyomdai tervezés alapjaiban használt tipográfia, rácsok, tér, méret, szín és felhasználás teszi az anyag tartalmát jobbá.
- A Motion jelentést jelent . Ez az egyik legismertebb dolog. Az Anyagban érdemes és megfelelő mozgást, finom és világos visszajelzést és hatékony és koherens átmenetet kell biztosítani.
A komponensek
Az Material Design figyelmet fordít a komponenseinek minden részletére, így azokat általánosan használhatják. Ezek az összetevők segítenek abban, hogy csodálatos alkalmazásokat és webhelyeket építsenek ki. Olyan sok összetevőt biztosít az Anyag, mint a gombok, a kapcsoló, a kártya, a szövegbevitel, a fab (lebegő művelet gomb), a párbeszédpanel, a pirítós, az almenü, a lap és több. Mindegyiknek van saját szabálya és útmutatója arról, hogyan kell építeni őket, így nem lesz semmilyen következetlen elem.
Minták Dolog
Az összetevők mellett az Anyag további alapmintákat is biztosít a további felhasználói felülethez. Ezek a minták javítják az anyag összetevőivel létrehozott felhasználói felületet. A minták, beleértve az adatformátumot, a navigációs fiókot, a hibákat, a gesztusokat, a görgetési technikát, a keresést, a beállításokat, a képek betöltését, a frissítéshez való ujjlenyomatot és így tovább.
Anyagtervezési színek
Az Anyag színei úgy lettek tervezve, hogy ne okozzon kényelmetlenséget, furcsa és lapos érzést. Az Anyagtervezés inspirálja a napi környezetünket, mint például az útjelző táblákat, a kortárs építészetet, a járdák jelölő szalagát és a sportpályákat, és váratlan és magas színvonalú színeket eredményez. Olyan sok színpaletta van, hogy több kényelmet nyújtson az alkalmazások vagy webhelyek fejlesztésekor. A helyi használatra szánt színmintákat is letöltheti, például a Photoshop gyűjteményhez.
Anyag ikonja
Ha Ön Android fejlesztő, akkor ismernie kell a Google által biztosított ingyenes csomagcsomagokat. Ezeket általában csak a főelemre és a műveleti sávra használják. Míg más erőforrások esetén más ikonokat kell keresni, mint például a mappa, a fájl, a másolás és beillesztés stb. Az Anyagtervezésben a Google rögzítette a problémát az általunk használt ikonokkal .
Az ikonok mindegyike olyan tervezési megközelítésen ment keresztül, amely a tapintható anyagok tanulmányozását is használja. Ők is fenntartják az Anyag elvét, ami következetes. Ezeket az ikont a GitHub-on töltheti le, néhány opcióval rendelkeznek a különböző használathoz, mint például az iOs, web, Android vagy svg. Ha szélesebb választási lehetőséget szeretne az egyszerű testreszabáshoz, valószínűleg látni szeretné a Material Design ikon csomagokat a FlatIcon-on. A csomag belsejében megjelenik az ikonvektor (SVG és EPS), a PSD és a PNG verzió.
Anyag animációja
Ez az anyag jellemzői, amiket a legjobban szeretem. Az Anyag animációja annyira valóságos és intuitív. Minden animációnak értelmes, következetes és megfelelő időzítési átmenete van. Az alább látható gif demó csak egyike a gyönyörű Anyagi animációnak. Ahhoz, hogy érdekes és érzékeny interakciót nyújtson, a Google csapata a vízbevezetéshez hasonló animációt hoz létre a felhasználói bevitel hatására. Leginkább a gombokon és a kártyákon használatos.
Az általam elmagyarázott jellemzők csak egy kis részét képezik az anyagtervezésnek. Ha többet szeretne megtudni az Anyagi világról, csak menjen át a dokumentációs oldalra.
Végrehajtás
Alapértelmezés szerint az Anyagtervezés az Android Lollipop új felhasználói felületének frissítése. Minden olyan iránymutatás, amelyet az Anyag az általa alkalmazott. Mivel az Anyag mindenféle környezetet céloz meg, egy másik rendszerbe való bevezetése nem lesz nehéz. És köszönhetően a közösségeknek, ez még sokkal könnyebb a létrehozott eszközökkel.
Ezek többféleképpen érhetők el az Anyagtervezés Androidon, weben kívüli eléréséhez.
CSS keretek használata
Ez a legegyszerűbb módja, ha a Webes platformon szeretné megvalósítani az Anyagtervezőt. Keretekkel mindössze annyit kell tennie, hogy inicializálja, majd írja be a szükséges elemeket. Számos keretrendszer használható, mint például a Materialize, Material UI vagy a Polymer. Az én személyes választásom a valóságba kerül. Könnyebb használni és megérteni, és nagyszerű dokumentációval rendelkezik szép demóval.
Az útmutatót követi
Ha az Anyagot keretrendszer nélkül szeretné megvalósítani, és a legtöbbet szeretne kódolni, akkor követnie kell az Anyag irányelveket. Ott megtalálod az összes tennivalót és tennivalót, amit érdemes észrevenni az Anyagi elvek eléréséhez. Az összes alapvető útmutatót láthatja az összetevők, az elrendezés, az animáció, a szín, a minták stb. Létrehozásához. A könnyebb fejlesztés érdekében érdemes megtekinteni egy anyagellenőrző listát.
Következtetés
Az anyagtervezés nagyszerű tervezési rendszer, és az év egyik leginkább várt trendjévé vált. A következő néhány hónapban mindenhol láthatjuk. Az új Google tervezési frissítésével több alkalmazás és webhely lesz csiszolva.
Az Anyagtervezés mellett a Google bizonyította, hogy az egyik legnagyobb technológiai vállalat a jobb. A Google nemcsak a keresőmotorok és a mobil operációs rendszerek területén, hanem a tervezési területen is vezető szerepet tölt be. Mostanra nincsenek olyan cégek, amelyek kifejlesztik ezt a nagy dolgot, mint a Google. De a tapasztalat azt mondja, hogy nem tart sokáig. Várjunk csak egy másik cégnek, hogy válaszoljanak a Google Anyagtervezésére.
