20 Az anyagtervezés alapelvei – La Grande Dipper, Mi az anyagtervezés? Meghatározás anyagtervezés Google
Anyagtervezés, UI a Google szerint
Contents
- 1 Anyagtervezés, UI a Google szerint
- 1.1 20 Az anyagtervezés alapelvei
- 1.2 Mi az anyagtervezés ?
- 1.3 Az anyagtervezés alapelveinek listája
- 1.3.1 1. alapelv: Ismerkedjen meg a legfontosabb forrásokkal
- 1.3.2 2. alapelv: Tudd meg, mi az “anyag” az anyagtervezésben
- 1.3.3 3. alapelv: Az árnyékok használata a vizuális hierarchiák meghatározásához
- 1.3.4 4. alapelv: Használjon élénk színeket
- 1.3.5 5. alapelv: Ne hagyja figyelmen kívül az elsődleges és az ékezetes színt
- 1.3.6 6. alapelv: Jól használja ki a fehér tereket
- 1.3.7 7. alapelv: Kövesse az új élek közötti képek trendjét
- 1.3.8 8. alapelv: Mindennek reaktívnak kell lennie
- 1.3.9 9. alapelv: Méretek
- 1.3.10 10. alapelv: Ne feledje, a siker részletesen van
- 1.3.11 11. alapelv: A mozgásnak értelme kell lennie
- 1.3.12 12. alapelv: A mozgásnak hitelesnek kell lennie
- 1.3.13 13. alapelv: Gyorsulás és lassulás a mozgásokban
- 1.3.14 14. alapelv: Használja ki az ikon animációkat
- 1.3.15 15. alapelv: Készítsen különböző időzítéseket a különböző mozgásokhoz
- 1.4 Anyagtervezés, UI a Google szerint !
- 1.5 Mi az anyagtervezés ?
- 1.6 A polimer könyvtár
- 1.7 WebDesign a Google szerint
- 1.8 A Google újratervezése
- 1.9 Miért az anyagtervezés ?
- 1.10 Az anyagtervezés ellen vagy ellen ?
- 1.11 Hogyan működik ? Alkalmazás Androiddal
- 1.12 Példák az anyagtervezési interfészekre
- 1.13 Anyagtervezési ikonok
- 1.14 Néhány forrás és inspiráció
- 1.15 Következtetés
A modern forgatókönyvben, ha a mozgást szeretné bevonni, akkor valósnak kell lennie, tiszteletben kell tartania a fizika törvényeit és a dolgok funkcionalitását a való világban. Valójában a felhasználók hozzászoktak a mindennapi életükben való mozgáshoz. Ez vonzza figyelmüket, és segít jobban megérteni a dolgok funkcionalitását.
20 Az anyagtervezés alapelvei
Az anyagtervezés olyan alapelvek és iránymutatások, amelyek irányítják a modern és elegáns felhasználói interfészek (IU) kialakítását. A Google által 2014 -ben elindított vizuális nyelv célja, hogy koherens és harmonikus interfészeket hozzon létre minden eszközön, függetlenül az operációs rendszertől vagy a használt felülettől.
Az anyag kialakítása három fő oszlopon alapul: a fizikai univerzum, a szín és a tér. Minden interfészkomponensnek be kell kevernie ebbe az univerzumba, tiszteletben tartva az egyes anyagokra jellemző arányokat és színeket. A tereket szintén jól kell meghatározni, hogy a felhasználó könnyen navigálhasson az egyik elemről a másikra.
Mi az anyagtervezés ?
Ez az ?
Az anyagtervezés egy olyan tervezési szabályok, amelyeket a Google 2014 -ben hoz létre. Ez az eszköz megkönnyíti a platform összetevőinek kezelését. Valójában a Google tervezői megértették, hogy az alkatrészeknek speciális fizikai tulajdonságokkal kell rendelkezniük.
Az anyagtervezés tehát mindent tartalmaz:
- A szélesség
- Sebesség
- Az árnyék
- A tipográfia
- Rácsos
- Hely
- A szín
- A mérleg
- Képalkotás
Ilyen módon a felhasználók benyomásuk van, hogy érintkeznek a való világ fizikai elemeivel.
Hasonlóképpen, az anyagtervezés nemcsak annak a kérdésnek a kérdése, hogy megmutatja a tervezőknek, hogyan kell dolgozni a termékek és szolgáltatások megjelenésein. Ez azt is lehetővé teszi a tervezők számára, hogy szándékos terveket készítsenek.
Miért válassza az anyagtervezést ?
Mint a legtöbb tervező rendszer, az anyagtervezés is létrehozták, hogy jobb felhasználói élményt nyújtson a különféle eszközökön és platformon. A cél az, hogy a felhasználók koherens tapasztalattal rendelkezzenek .
Az anyagtervezés nem egy egyszerű stílusú iránymutatás. Ez egy teljes tervezési rendszer.
Más, a kevésbé teljes tervezési rendszerekkel ellentétben, képes kezelni a tervezési helyzeteket, összetett felhasználási esetekkel.
Hasonlóképpen, az anyagterv egy meglehetősen rugalmas tervezési könyvtár. Az irányelvek szerint a tervezés megvalósításának nagy részét teljes egészében a tervezőnek kell hagyni.
Az anyagtervezés alapelveinek listája
1. alapelv: Ismerkedjen meg a legfontosabb forrásokkal
Ha meg akarja szerezni az anyagtervezés konkrét ismereteit, akkor a legjobb megoldás az, ha konzultál a hivatalos Google erőforrással.
Folyamatosan frissítve van, és tartalmazza az összes teljes és szükséges részletet az anyagtervezéshez.
A forrás szempontjából a legjobb előnye, hogy nemcsak az Android konkrét szempontjaira korlátozódik. Éppen ellenkezőleg, az egész anyagtervezési szempontot lefedi, bármilyen projektben az alkalmazás típusát vagy az interneten.
Javasoljuk, hogy böngészjen legalább ennek az erőforrásnak az első fejezeteit, hogy megismerje magát az alapelveivel.
2. alapelv: Tudd meg, mi az “anyag” az anyagtervezésben
A név anyagtervezése messze nem ártalmatlan. Az anyagtervezés az anyag és a fizikai világ utánzata. A textúrák ihlette, még a fény tükröződése és az árnyékok vetülete miatt is. Az anyagfelületek újra feltalálják a papírt és a tintát.
Valójában az anyagtervezés alapelveinek központi gondolata a tervezés létrehozására, a valós világ tárgyainak utánozására összpontosít.
3. alapelv: Az árnyékok használata a vizuális hierarchiák meghatározásához
A fő anyagtervezési eszközök a következők:
- Szélek
- Felületek
- Világítás
- Reális árnyékok
Például az árnyékok segítenek a különféle elemek prioritásainak prioritásában a teljes kialakítás érdekében.
4. alapelv: Használjon élénk színeket
Az anyagterv kétségtelenül minimalista megközelítésben készült kialakítás. Más szavakkal, nem kell sok tervezési és stílusú eszközt használnia.
Az egyik kevés anyagi dolog, amelyet használhat, a szín. Pontosan az élénk szín. Valójában az élénk színek fontos szerepet játszanak az anyagtervezés javításában. Felhívják a felhasználók figyelmét, és arra ösztönzik őket, hogy lépjenek kapcsolatba a formatervezéssel.
5. alapelv: Ne hagyja figyelmen kívül az elsődleges és az ékezetes színt
A legjobb módja annak, hogy ezt az elvet bármilyen típusú formatervezéshez igazítsuk, ha három olyan árnyalatot választ, amelyek fő palettaként szolgálnak, olyan színű, amely kiemelésként szolgál.
Az Ön által választott elsődleges színek felhasználhatók az interfész kulcselemeiben, beleértve:
- A mezők
- Dobozok
- A háttér
- Betűtípusok stb.
És az akcentus színe, amint a neve is sugallja, hangsúlyozza és felhívja a figyelmet egy fő elemre. Ne feledje, hogy a választott akcentus színnek kontrasztosabbnak kell lennie, mint az elsődleges színeké.
6. alapelv: Jól használja ki a fehér tereket
A fehér terek kulcsszerepet játszanak a szöveg és a tipográfia elrendezésében. A valóságban a White Space olyan eszköz, amely felhívja a figyelmet, a felhasználót és a figyelmüket egy adott elemre irányítja.
Tehát ne habozzon:
- Használjon nagy tipográfiát a fő címekhez
- Adjon hozzá sok fehér teret
- Tartson elegendő üres helyet a globális kialakításában.
7. alapelv: Kövesse az új élek közötti képek trendjét
Az anyagtervek teljesen alkalmazkodnak a képhez. Tehát, ha úgy döntött, hogy képeket ad hozzá a formatervezéséhez, akkor fő szerepet kell adniuk.
Az anyagtervezésben szereplő képeknek követniük kell a szél-él módot. Vagyis nem szabad margóknak lennie, elválasztva egy kép szélét az ablak vagy a képernyő szélétől.
8. alapelv: Mindennek reaktívnak kell lennie
A képernyő méretétől függetlenül az egyes eszközökhöz hozzáférhetővé és használhatóvá tegye a dolgokat, az anyagtervezés egyik alapelve. A cél az, hogy koherens élményt nyújtson. Ilyen módon a felhasználó nem fogja zavartnak érezni magát az egyik eszközről a másikra való áttérés során, mert nem fog új felületet szerezni minden alkalommal, amikor megváltoztatja az eszközt.
Ebben az esetben a formatervezésnek reaktívnak kell lennie. Szerencsére a fejlett kereteknek köszönhetően munkád fele már megtörtént. Következésképpen a reaktív formatervezés létrehozása nem lesz nehéz feladat az Ön számára.
9. alapelv: Méretek
Az interneten a Z tengelyt a szuperpozícióhoz használják, és nem a kilátásokra. Másrészt a 3D -s világ az y tengelyen alapul.
A tervező anyag elsősorban a 3D -t használja, így az y tengely. Csak nézd meg a Google tervezését, hogy észrevegyék az izometrikus perspektívát. A tervezési módot a való világ ihlette, tehát az “anyag” név.
10. alapelv: Ne feledje, a siker részletesen van
Az anyagtervezés során mindennek egyszerűnek kell lennie. A legjobb példa lehet a skeuomorph dizájn . Ennek a technikának a célja a valós tárgyak utánozása a virtuális objektumok megtervezése során. Ezért gondoskodnia kell arról, hogy a tervezés minden eleme a lehető legnagyobb mértékben megjelenjen a valós élethez.
11. alapelv: A mozgásnak értelme kell lennie
A Google szerint a mozgás értelmet ad a formatervezésnek. Ha az anyagtervezéssel dolgozik, a mozgás olyan elem, amelyet be kell vonni.
Az anyagtervezés során a mozgásnak rendelkeznie kell ezzel a 3 tulajdonsággal:
- Légy informatív: A felhasználók számára ismerni kell, hol és mikor volt a művelet.
- Segítsen koncentrálni és irányítani a felhasználókat az oldal legfontosabb részeire.
- Legyen kifejező, és adjon hozzá egy kis személyiséget és dinamizmust a felülethez.
12. alapelv: A mozgásnak hitelesnek kell lennie
A modern forgatókönyvben, ha a mozgást szeretné bevonni, akkor valósnak kell lennie, tiszteletben kell tartania a fizika törvényeit és a dolgok funkcionalitását a való világban. Valójában a felhasználók hozzászoktak a mindennapi életükben való mozgáshoz. Ez vonzza figyelmüket, és segít jobban megérteni a dolgok funkcionalitását.
Ez az oka annak, hogy a Google az anyagtervezés irányelveinek külön részét fenntartotta, hogy részletezze a hiteles mozgás fogalmát.
13. alapelv: Gyorsulás és lassulás a mozgásokban
Világos és gyakorlati átmenetet kell kínálnia a felhasználók számára. A mozgás folyamatának valószínűnek és valósághűnek kell lennie, mivel az anyagtervezés célja a valós jelenségek reprodukciója.
A tervezőknek meg kell találniuk a legjobb időt az egyes objektummozgásokhoz.
Egyrészt az elemek túlzott lassúsága elvonhatja a felhasználókat, sőt negatív hatással lehet a felhasználók áramlására. Másrészt a túl dinamikus mozgások zavarhatják az internetes felhasználókat.
Ebben az esetben a megfelelő közepén kell lennie, biztosítva az optimális időtartamot és az animációk jó olvashatóságát. El kell adni a felhasználóknak elegendő időt a felhasználók számára, hogy észrevegyék a változásokat. De ne tegye arra, hogy várjanak. A kutatás bizonyítja, hogy a 200–500 ms a legjobb animációs sebesség.
14. alapelv: Használja ki az ikon animációkat
Időnként az ikonok létrehozhatók kontextusgombokkal, körkörös kinyilatkoztatási hatással.
Igaz, hogy az internetes felhasználók gyakran nem veszik észre ezeket a részleteket, de fontosak, hogy pozitív hatást gyakoroljanak a globális felhasználói élményre.
15. alapelv: Készítsen különböző időzítéseket a különböző mozgásokhoz
Azonban megjelenő animációs tárgyak érdekesebbek és élesebbek. Egy ilyen megközelítés lehetőséget kínál a felhasználók számára az egyes elemek megvizsgálására.
Másrészt, az oldal összes elemét egyidejűleg adja meg a felhasználókat, mert nem tudják, hol kell keresni.
Anyagtervezés, UI a Google szerint !
Az anyagterv egy vizuális és interaktív nyelv, amelyet a Google készített. De ez egyben útmutató a grafikus felület (tervező rendszer) megtervezéséhez is. Ez a formatervezés “anyag”, mert valódi tárgyak, papír és tinta ihlette, ez különbözik a lapos dizájntól. A Google az anyagtervezéshez használt alkalmazások és platformok grafikus stílusának egyesítésére. A felületének tehát az az előnye, hogy nagyon alkalmas bármilyen eszközhöz és minden megjelenítési felbontáshoz. Ő is megfizethető. Az anyagtervezés optimalizálná az UX -et, miközben forrásokat kínál a fejlesztőknek és az interfésztervezőknek. Mint minden grafikus áramnál, amatőrökkel és detraktorokkal is rendelkezik.
Az anyagtervezés mindenekelőtt metafora. Anyagi metafora, mint egy ésszerűsített tér és egy mozgási rendszer egyesítő elmélete. Az anyagot a tapintható valóságba rögzítik, amelyet a papír és a tinta tanulmányozása ihlette, de technológiailag fejlett és nyitott a képzeletre és a varázslatra.
Mi az anyagtervezés ?
Az “anyagtervezés” név egy halmaznak felel meg Tervezési szabályok A Google javasolta. Néha az “anyagtervezés” vagy a “kontextuális tervezés” fordítja le. Elsősorban a mobil alkalmazásokhoz (mobil) tervezés volt. Ezután az interfésztervezés egyik fő trendjévé vált. A Google megközelítése emlékeztet a Lapos kialakítás (vagy lapos kialakítás): Minimalizmus, geometriai alakzatok és színes, felesleges nélkül (ellentétben a skeuomorfizmussal). De ebben az esetben ez egy lapos kialakítás … vastagsággal és megkönnyebbüléssel. Valójában itt vannak a fő jellemzők:
- A metafora papír és tinta a digitális berendezésekből.
- Merész dizájn és diagram.
- A létrehozása mozgások Az engedély és az UX javítása érdekében. A felhasználó tevékenységei jelentős mikro-interakciókat okoznak.
A polimer könyvtár
Az anyagterv (papír elemek) és az alapkomponensek (alapelemek) grafikus elemeinek használatához a Google létrehozta a webes alkalmazásfejlesztők számára szánt könyvtárat, a Polimert. Azóta a Google különböző webhelyeket és eszközöket kínál, amelyek segítenek a tervezőknek a formatervezési stílusú tervezésben.
Lásd ezt a nyilatkozatot “manifeszt” formájában, amely megtalálható az Anyag Referenciahely bevezetésében.IO:
“Kihívtuk magunkat, hogy vizuális nyelvet hozzon létre azoknak a felhasználóknak, akik szintetizálják a jó tervezés klasszikus alapelveit, az innovatív és a technológia és a tudomány által kínált lehetőségeket. Hívjuk: Anyagtervezés.»
WebDesign a Google szerint
Az anyagtervezés tehát különbözik a lapos kialakítástól. Ez egy újfajta webdesign. Mondhatjuk, hogy ő a Reagáló webdesign (Automatikus adaptív) a felhasználói élményre összpontosítva. A cél az, hogy megtervezze:
- Intuitív Minden felhasználó számára (beleértve a nem tapasztalt)
- Minden tartóhoz alkalmas (számítógép, táblagép, okostelefon stb.)
- Interaktív Köszönet a dinamikus animációknak.
- Homogén az összes interfész között
A Google szerint ez a formatervezés technológiai és tudományos lehetőségeket használ fel webes megoldások biztosítására a kortárs ergonómia és a tervezési problémák számára. Az alábbi videóban a Google tervezői kifejezik a kezdeti motivációikat, a működési módot és a “fizikai” tapasztalatokat. Megjegyezzük, hogy ha ez a tervezési nyelv a valóságban van rögzítve, akkor fontos helyet hagy a felhasználó képzeletéhez. A “mágia” kifejezés gyakran visszatér az anyagtervezésről.
A Google újratervezése
A Google megközelítésének teljes megértése érdekében vissza kell térnie a Google eredetéhez és annak fontosságához, amelyet a Montain View cég megtámadott a tervezéshez. Nos, nem nagyon … az anyagtervezés kezdeményezői szerint.
A videó megtekintése jó képet ad nekünk arról, hogy fontos -e egy „jövőkép” a projekt végrehajtására: a Google újratervezése.
Miért az anyagtervezés ?
Látható az 5. verzióban.Az Android 0 -ból az anyagtervezést 2014. június 25 -én először mutatták be Matias Dury, az Android felhasználói élmény igazgatója a Google -on. Ez volt a Google I/O konferencia részeként. Ezzel az új tervezési chartával a Google létrehozta a sajátját vizuális nyelv, azonosítható, bármi is legyen a szolgáltatás vagy a termék, a mobil alkalmazásoktól a csatlakoztatott objektumokig.
Matias Duarte 2014 -ben mutatta be a Paper (Android / Material) metaforáját).
Nézze meg ezt a videót, hogy megünnepelje a tervezési megközelítés első évfordulóját. Ez volt a bevezetés után, 2015 májusában. A Matias Durate retrospektív pillantást vet az elmúlt évben, és már értékelheti a lelkesedés -tervezők, de a fejlesztőkkel is az egy évvel korábban bemutatott alapelveket.
Az anyagtervezés ellen vagy ellen ?
Ezt a kialakítást is úgy tervezték, hogy gazdagítsa a felhasználói élményt És az interfész hatékonysága (új betűtípusok több nyelven olvashatók, jobb előnyökkel …) Egy évvel később a Google többek között bemutatta a webes projektek anyagtervezési lite készletét (töltse le a készletet itt).
Az anyag kialakítása különböző reakciókat váltott ki. Néhányan jóváhagyták a lapos formatervezés „javulását” egyszerűsítettnek és unalmasnak tekintik. Valójában ez egy “folyadék” és mozgó formatervezés. A kompozícióban, a kapuk, a reagálók és a dinamikában felépítik a felületet. A terek, az igazítás és a színek nélkülözhetetlenek a tervezési szakaszban. Mindezek az elemek prioritást élveznek a tartalomra és megkönnyítik a felhasználó navigációját. Animációk, a fizika törvényei alapján, megnyugtatják a felhasználót a cselekedeteinek eredményeiről.
Másoknak azonban a Google arra törekszik, hogy kivetje annak grafikus stílus, A tervezők/grafikusok kreativitásának korlátozásának kockázatával. Az összes webhely ezután Android -alkalmazásoknak tűnik, a károsodáshoz A felhasználói élmény minősége.
Hogyan működik ? Alkalmazás Androiddal
Ne feledje, hogy ezek “anyagi elemek”. Ezért lehetetlen átlépni egy elemet. Csak a felhasználó által érintett összetevő reagál. Az anyagtervben aA környezet 3D. Minden objektum, vagy “anyag” 3 koordinátával rendelkezik: x, y, z. A Z tengely a tárgy magasságára vonatkozik. Dönthetünk a tárgy magasságáról, annak méretéről és a sérült árnyékokról, de a vastagság marad egy papírlap. Ez utóbbi nem tudja meghajolni. Másrészt az összes tengelyen mozog.
Az Android három témát nyújt (sötét vagy könnyű anyagi téma, könnyű anyagi téma a sötét akciósávral), amelyet közvetlenül az alkalmazásban valósíthat meg, ha azt akarja, ha szeretné, néhány attribútumot megváltoztatva. A szórakozás Alkalmazza az interfész objektumaira/elemeire kettő: a tween animáció (az átmenetekhez, például a kép forgatásával) és a keret animáció (több kép megjelenítése). A loadanimation lehetővé teszi, hogy betöltse őket, és az aktiválás/elindításuk kezdete/elindítása.
Példák az anyagtervezési interfészekre
Elméleti magyarázatok – az intelligens papír metafora, amely életre kel és kölcsönhatásba lép a felhasználóval – homályosnak tűnhet. Az interfészek megfigyelése azonban konkrétan megkönnyíti a Google koncepciójának megértését.
Lásd a felfelé irányuló forrásokat (történetek.felfelé irányuló jelek.com)
Egy másik forrás, gazdag példákban: Az anyagtervezési blog
Anyagtervezési ikonok
Ennek a tervező rendszernek saját ikonjait kellett előállítania. Egy nagy könyvtár elérhető a különböző forrásokon, és jelentős időt takarít meg az UI tervezői számára, ha ismeri a homogén koherens ikonok tervezésének összetettségét.
Olvassa el cikkeinket erre a témára:
Az ikonok különböző környezetekben történő használatát lásd a GitHub útmutatóban.
Egyéb anyagi ikonok (itt letölteni)
Itt letölthet sok anyagtervezési ikont
Az anyagtervezési ikonok egy másik forrása, amelyet itt tölthet le
Az anyagi ikonok nagy választéka a lapos formatervezésben, hogy felhasználhassa a projektjeit, de útmutatók is azok használatához (itt)
Néhány forrás és inspiráció
- A referencia az anyagtervezésre: Anyag.IO
- Mozgás
- Stílus
- Elrendezés
- Összetevő
- Minták
- Növekedés és kommunikáció
- Felhasználhatóság
- Platformok
- A Google Design webhelyén esettanulmányokat és gyakorlati útmutatókat talál (sok erőforrás és lehetősége van egy nagyon gazdag hírlevél feliratkozásának)
Következtetés
A Google anyagtervének előnyei vannak a A lapos formatervezés egyszerűsége. Az interfész finomítva és vizuálisan kiegyensúlyozott. Mint a lapos formatervezés, ez megfelel a követelményeknek Reszponzív dizájn. De ahol a lapos formatervezést gyakran bírálják annak miatt Az eset hiánya, Google őszinte A skeuomorfizmus része magas szintű absztrakciós szinten. Így az animációk, a tipográfiai választások és a papír metafora intelligens használata javítja a felhasználói élményt. A fejlesztőknek kínált grafikus elemek mértéke szintén lehetővé teszi annak megértését, hogy az Android anyagtervezés hogyan hódította meg az internetet … azzal a kockázattal, hogy invazív lenni. Természetesen, mint az egyes tervezési trendek esetében, az ilyen típusú tervezés használata a célzott felhasználóktól és az üzleti céloktól/márkától függ. A tervezőnek/tervezőnek, hogy eldöntse, hogy teljes mértékben követnie kell -e a Anyagi tervezési charta, Hogy inspirálja vagy elforduljon.
- Google Anyagtervezés, a formalizálás tervezése
- Mi az a szolgáltatástervezés ?
- Mit gondol a tervezés ?
- Mi az a lehetőség ?
- Mi a lapos formatervezés ?
- Mi az a skeuomorfizmus ?
- Az érzelmi tervezés meghatározása, az érzelmek helye a tervezésben
Lásd: Szolgáltatásaink:
- A rendszertervezés megtervezéséhez szükséges képzésünk
- A 2 napos gondolkodásmódú képzésünk.