Az Anyaggomb több, mint egy gomb

A gombok stílusa (és megkülönböztetése) az Anyagtervezés segítségével

Az Anyagtervezés a közelmúltban kiadott frissített alak útmutatásokat, eszközöket és esettanulmányokat, amelyek megmutatják, hogy mennyire könnyű a felhasználói felület komponenseinek stílusa a Material Theming segítségével. Az új alakrendszer köszöntési képességének további szemléltetése érdekében élő példákat készítettünk az Anyaggombokról különféle témákban, a Anyagkomponensek webes használatával a Glitch-en. A Glitch lehetővé teszi bárki számára (még te is), hogy újrakeverje ezeket a gombpéldákat, és kód segítségével realizálja kifejező potenciáljukat. Dióhéjban, a következő gombpéldák csavarják ugyanazokat a közmondó gombokat az Anyagmeghatározásban, hogy rendkívül eltérő vizuális eredményeket érjenek el. Mivel egyre több márka létezik kizárólag a digitális térben, a témájú alkotóelemek ugyanolyan fontosak, mint a logó abban, hogy a felhasználók hogyan viszonyulnak az Ön márkájához.

A Glitch minden gombjának témája egy kitalált márka vagy termék, például virágszállítás vagy podcast alkalmazás tükrözése. Ez az útmutató dekonstruálja az egyes gombok témáját márka, anyagi szín, típus és alak rendszerek szerint.

Anyag barkácsolás - Tanulja meg, hogyan keverheti össze ezeket a gombokat a gomb .readme fájljában.

Synergee

Meditációs útmutató

A Synergee egy meditációs útmutató, amely útmutatást ad a felhasználóknak meditációs utazásokon haptikus technológián és más nem vizuális eszközökön keresztül. A Synergee márkája a következő tulajdonságokkal rendelkezik: fényes, alázatos és kifinomult.

Szín

A világos és a sötét blues használata uralja a Synergee márkáját, és fényes és szerény tulajdonságainak felel meg. Az ég felé néző érzés megismétlésével a színek egy bizonyos ismereteket fejeznek ki, amelyek kellemesen barátságosak.

$ mdc-theme-Primary: # ded7ff;
$ mdc-téma-az-elsődleges: # 003db8;

típus

A Synergee kifinomult márkatulajdonságát a Cadson Demak által létrehozott thaiföldi és latin betűtípus K2D használatával fejezi ki. A K2D tartalmaz a hagyományos thaiföldi betűleveleket, amelyek eredendően kerek és „hurkolósak”. Jó látni, hogy a latin ábécé és a thai abugida formatervezési tulajdonságai valami egyedi és izgalmasvá változtak.

$ mdc-typography-font-family: unquote ("K2D, sans-serif");
$ mdc-typography-stílus-button: (
 betűméret: 14 képpont,
 betűsúly: 500,
 betűköz: 0,05em,
);

Alak

A Synergee fényes márkatulajdonsága azt sugallja, hogy a témának kifejeznie kell a barátságosság és az optimizmus érzetét. Ennek kifejezésére a Synergee alakzatának rendszere erősen lekerekített, apró alkatrészekkel, mint például a gombok, teljesen kerekek.

$ mdc-alak-kis-komponens-sugár: (24 képpont);

Vörös rózsák

Virágszállítás

A Red Roses egy virágszállítás, amely az adás révén elősegíti a pozitivitást, és a következő márkatulajdonságokat testesíti meg: természetes, vidám és elegáns.

Szín

A színrendszer olyan vörös színeket használ, amelyek a rózsa természetességére utalnak, és megkönnyítik a kontraszt létrehozását a különféle alkotóelemek között. A gombok alapértelmezés szerint az Anyag téma elsődleges színét használják.

$ mdc-téma-elsődleges: # b31839;
$ mdc-theme-on-Primary: #ffffff;

típus

A Vörös Rózsa téma a Cabin-t használja, amely a Google Fontsban található humanista sans betűtípus; A kabin levélpapírjai kerek és éles körvonalak kombinációját tartalmazzák, amelyek a Red Roses természetes és elegáns márkajellemzőivel kapcsolatosak. (A kabin Gill Sans ihletéséből származik, amelyet a London Underground „Underground Alphabet” ihlette).

$ mdc-typography-font-family: unquote ("Kabin, sans-serif");
$ mdc-typography-stílus-button: (
 betűméret: 14 képpont,
 betűsúly: 500,
 betűköz: 0,05em,
);

Alak

A Vörös Rózsa alakú rendszer a virágszirmok utánozásakor mind örömteli, mind természetes márkajellemzőire utal. Ennek a gombnak a váltakozó sugarai tükrözik a növény és a természet (im) tökéletességét; a színnel kombinálva ez az alak erős vizuális hatást fejt ki.

$ mdc-alak-kicsi-komponens-sugár: (4x12x12xxxx12x);

Kész!

Feladatkezelő alkalmazás

Kész! egy olyan feladatkezelő alkalmazás, amely hangsúlyozza a gyors, kompakt tapasztalatokat, hogy lehetővé tegyék a felhasználók számára a feladatok elvégzését, a zavaró funkciótól mentesen. Kész! A márka a következő tulajdonságokkal rendelkezik: profi, gyors és tömör.

Szín

A Done! Professzionális és egyszerű márkatulajdonságaival való beszélgetés érdekében a téma egy konzervatív palettát használ, amely fehér és meglehetősen semleges kék színű. Ezen túlmenően, a figyelmeztetés és a sebesség minimalizálása érdekében a Kész! Gombok tartózkodnak az árnyék beillesztésétől.

$ mdc-téma-elsődleges: # 5973bf;
$ mdc-theme-on-Primary: #ffffff;

típus

A merev Libre Franklin betűtípus merészen és megbízhatóan áll szemben a Done! Konzervatív színpalettájával. A Libre Franklin a Franklin gótikus betűtípus kibővítése, amelyet gyakran használták újságcímekben vagy hirdetőtáblákban; könnyű belátni a Libre Franklin üzleti jellegű tulajdonságait a Kész! gomb összefüggésében.

$ mdc-typography-font-family: unquote ("Libre Franklin, sans-serif");
$ mdc-typography-stílus-button: (
 betűméret: 14 képpont,
 betűsúly: 500,
 betűköz: 0,02em,
 szöveg-transzformáció: nagybetűs,
);

Alak

A Done alakzatrendszere a márka sebességére és tömörségére utal, mivel nem ad hozzá hozzá ívelt vagy ferde sarkok vizuális súlyát.

$ mdc-alak-kis-komponens-sugár: (0px);

Moodie

Mood ring app

A Moodie egy titokzatos hangulatjelző alkalmazás, amely meghatározza a hangulatát biometrikus adatok gyűjtésével. Márkája a következő márkatulajdonságokkal rendelkezik: titokzatos, technikai és kellemes.

Szín

A Moodie rejtélyes és technikai márkajellemzőit a „terminál” zöld márkák használata jellemzi, gyakran a szüreti számítógépes rendszerekkel és a grafikával. A leggyakoribb interfészekkel ellentétben a Moodie színek használata nagyrészt a márkák kétértelmű narratívájához szól, és alapjául szolgál a hangulatgyűrű utánozásának színváltó varázslatához.

$ mdc-téma-elsődleges: # 009b3b;
$ mdc-téma-az-elsődleges: # 003db8;

típus

Az IBM Plex Mono a színrendszeréhez hasonlóan eltúlozza a Moodie műszaki márkatulajdonságát; a monospace betűkészlet használata utal a Moodie termékével kapcsolatos technikai követelményekre. Egy titokzatos és elragadó cselekvésre ösztönző üzenettel kombinálva az IBM Plex Mono szubtexmálisan viselkedik, valami idegenre utalva.

$ mdc-typography-font-family: unquote ("IBM Plex Mono, sans-serif");
$ mdc-typography-stílus-button: (
 betűméret: 14 képpont,
 betűsúly: 600,
 betűköz: 0,05em,
);

Alak

Folytatva a kétértelműség témáit, a Moodie alakja a lágy és merev, kerek és éles tér középpontjában áll, hogy ismét torz, de játékos képet adjon a termék mögött álló „titokzatos” technológiáról.

$ mdc-alak-kis-komponens-sugár: (8 képpont);

Waverly

Podcast streaming app

A Waverly egy podcast streaming szolgáltatás, amely a különféle tartalmak lejátszási listáinak létrehozására összpontosít egyetlen téma körül, például podcast, cikk, videó vagy zene. Waverly a következő márkatulajdonságokat testesíti meg: szorgalmas, kortárs és kurátus.

Szín

Annak érdekében, hogy elsősorban a kurátus tartalomra összpontosítson, a Waverly anyagi témája egy sötét téma, ami azt jelenti, hogy a felhasználói felület nagy része sötét színű, világos színű kiemelésekkel, jelezve a cselekvő elemeket, például a gombjaikat. Waverly szorgalmas esetben a sötét szürke fényes narancssárga színűt húz ki annak hierarchiájának biztosítása érdekében nehéz környezetben.

$ mdc-téma-elsődleges: # FE8A00;
$ mdc-téma-az-elsődleges: # 003db8;

Fontos megjegyezni, hogy a sötét „téma” különbözik a sötét „módtól”. A sötét módot a felhasználó bekapcsolja egy meghatározott művelet végrehajtásával, míg a sötét témát a márkanév színei vagy más tényezők alapján a témához tartozik. .

típus

A Waverly kortárs márkatulajdonsága a Montserrat felhasználásával fejeződik ki, egy betűkészlettel, amelyet Julieta Ulanovsky készített, a Buenos Aires-i Montserrat szomszédságában lakó személy. Noha első látásra csak egy olyan betűtípushoz hasonló, mint a Gotham, széles betűformákkal és félkövér körvonalakkal, a Montserrat jól illeszkedik a „márka betűtípusoknak” nevezett kortárs jelenséghez, lekerekített barátságával, amely sok termék identitásába került.

$ mdc-typography-font-family: unquote ("Montserrat, sans-serif");
$ mdc-typography-stílus-button: (
 betűméret: 14 képpont,
 betűsúly: 600,
 betűköz: 0,05em,
);Alak

Ebben a konkrét példában Waverly olyan Anyagszöveg gombot használ, amelyben nincs körvonal vagy négyzet az alak jelölésére. Bár nincs látható alak, az interakció során (például a kurzor lebegtetése vagy megérintése) a felhasználó láthatja a gomb határait és alakját. A Waverly alakú történet puhán beszélt és kortárs és szorgalmas tulajdonságainak felel meg az Anyag ismerős kiindulási alakjának kihasználásával.

$ mdc-alak-kis-komponens-sugár: (4px);

Anyagtervezés + Glitch

Anyagtervezés azt akarja, hogy bárki képes legyen gyönyörű termékek gyorsabb gyártására. Nyílt forráskódú összetevőink mindent megadnak az építés megkezdéséhez. A Glitch megkönnyíti a keresés megkezdését közvetlenül a böngészőben, inspirálva a játékon keresztüli tanulást. Arra biztatunk bárkit és mindenkit, hogy keverje újra ezeket a példákat, hogy készítsen saját gombokat és saját témájukat, még akkor is, ha soha nem voltak kódolva.

Remix és ossza meg mit csinál!
glitch.com/@material