Materiaalne nupp on midagi enamat kui nupp

Nuppude kujundamine (ja eristamine), kasutades nende kujundamist

Materjalidisain andis hiljuti välja ajakohastatud kujujuhised, tööriistad ja juhtumianalüüsid, mis näitavad, kui lihtne on UI komponentide stiilsus materjali kujundamise abil. Uue kujundussüsteemi köitmisvõimaluste täiendavaks illustreerimiseks lõime materiaalsete nuppude reaalajas näiteid erinevates teemades, kasutades materjalikomponente veebis Glitchis. Häire võimaldab kõigil (isegi teie) neid nupunäiteid remiksida ja koodi abil nende väljenduslikku potentsiaali realiseerida. Lühidalt - järgmised nupunäited keeravad materjali kujunduses samu vanasõnalisi nuppe, et saada väga erinevaid visuaalseid tulemusi. Kuna üha enam kaubamärke eksisteerib eranditult digitaalses ruumis, on temaatilised komponendid nüüd sama olulised kui logo, kuidas kasutajad su brändiga suhestuvad.

Glitchi iga nupp on kujundatud väljamõeldud kaubamärgi või toote, näiteks lillede kättetoimetamise teenuse või taskuhäälingusaate rakenduse kajastamiseks. See juhend dekonstrueerib iga nupu teema brändi ning materjali värvi, tüübi ja kuju osas.

Materjal DIY - saate teada, kuidas neid nuppe ise remiksida nupu .readme failis.

Sünergee

Meditatsiooni juhendamise rakendus

Synergee on meditatsiooni juhendamise rakendus, mis juhendab kasutajaid meditatsioonireisidel haptilise tehnoloogia ja muude mittevisuaalsete vahendite abil. Synergee kaubamärgil on järgmised atribuudid: särav, alandlik ja kogenud.

Värv

Heledate ja tumedate bluuside kasutamine domineerib Synergee kaubamärgis ja kõneleb selle eredaid ja tagasihoidlikke atribuute. Korrates taevasse vaatamise tunnet, väljendavad värvid teatavat tuttavust, mis tundub meeldivalt sõbralik.

$ mdc-teema-primaarne: # ded7ff;
$ mdc-teema-esmasel: # 003db8;

Tüüp

Synergee väljendab oma keeruka kaubamärgi atribuuti Cadson Demaki loodud Tai ja Ladina kirjatüübi K2D abil. K2D sisaldab Tai traditsioonilisi kirjavorme, mis on oma olemuselt ümarad ja “loopilised”. Lahe on näha, kuidas ladina tähestiku ja Tai abugida kujundusomadused muudeti millekski ainulaadseks ja põnevaks.

$ mdc-typography-font-family: unquote ("K2D, sans-serif");
$ mdc-typography-stiil-button: (
 kirjasuurus: 14 pikslit,
 kirjasuurus: 500,
 tähtede vahe: 0,05em,
);

Kuju

Synergee helge kaubamärgiomadus dikteerib, et see teema peaks väljendama edaspidise sõbralikkuse ja optimismi tunnet. Selle väljendamiseks on Synergee kuju süsteem tugevalt ümardatud, väikesed komponendid, näiteks nupud, on ümarad.

$ mdc-kuju-väikese komponendi raadius: (24 pikslit);

Punased roosid

Lillede kättetoimetamise teenus

Punased roosid on lillede kättetoimetamisteenus, mis edendab kingituse kaudu positiivsust ja kehastab järgmisi kaubamärgi atribuute: loomulik, rõõmus ja elegantne.

Värv

Värvisüsteem kasutab punaseid toone, mis räägivad rooside loomulikkusest ja võimaldavad erinevate komponentide vahel kontrasti luua. Nupud kasutavad vaikimisi teie materjali teema põhivärvi.

$ mdc-teema-esmane: # b31839;
$ mdc-teema-esmasel: #ffffff;

Tüüp

Punaste rooside teema kasutab salongi, Googleist Fonts leiduvat humanistlikku sans-tüüpi kirjatüüpi; Salongi kirjavormidel on kombinatsioon ümaratest ja teravatest piirjoontest, mis räägivad Red Rooside loomuliku ja elegantse kaubamärgi atribuutidest. (Kabiin on inspireeritud Gill Sansilt, mille inspiratsiooniks on Londoni metroo “Underground Alphabet”).

$ mdc-typography-font-family: unquote ("Kabiin, sans-serif");
$ mdc-typography-stiil-button: (
 kirjasuurus: 14 pikslit,
 kirjasuurus: 500,
 tähtede vahe: 0,05em,
);

Kuju

Punaste Rooside kuju süsteem räägib lille kroonlehtede jäljendamisega nii oma rõõmsast kui ka loomulikust kaubamärgiomadusest. Selle nupu vahelduvad raadiused peegeldavad taimestiku ja loodusmaailma (im) täiuslikkust; koos värviga loob see kuju tugeva visuaalse efekti.

$ mdc-kuju-väikese komponendi raadius: (4x12xxxxx12x);

Valmis!

Ülesannete haldamise rakendus

Valmis! on ülesannete haldamise rakendus, mis rõhutab kiireid ja kompaktseid kogemusi, et kasutajad saaksid oma ülesanded täielikult häirida. Valmis! brändil on järgmised atribuudid: professionaalne, kiire ja sisutihe.

Värv

Valmis!! Professionaalsete ja lihtsate brändiatribuutidega rääkimiseks kasutab teema konservatiivset paletti, mis koosneb valgest ja üsna neutraalsest sinisest. Häirimise minimeerimiseks ja kiiruse väljendamiseks hoidub Done! Nupud varju lisamast.

$ mdc-teema-esmane: # 5973bf;
$ mdc-teema-esmasel: #ffffff;

Tüüp

Jäik kirjatüüp Libre Franklin seisab vastupidiselt Done !'i konservatiivsele värvipaletile julgelt ja usaldusväärselt. Libre Franklin on Franklini gooti kirjatüübi laiendus, mida kasutati sageli ajalehtede pealkirjade või stendide jaoks; Libre Franklini ärilaadseid omadusi on nupu Done kontekstis lihtne näha.

$ mdc-typography-font-family: unquote ("Libre Franklin, sans-serif");
$ mdc-typography-stiil-button: (
 kirjasuurus: 14 pikslit,
 kirjasuurus: 500,
 tähtede vahe: 0,02em,
 teksti teisendamine: suurtähtede kasutamine,
);

Kuju

Valmiskujundussüsteem vastab brändi kiirusele ja sisutihedusele, hoidudes lisamast kaardus või nurga all nurkade visuaalset kaalu.

$ mdc-kuju-väikese komponendi raadius: (0px);

Meeleolu

Meeleolu ringrakendus

Moodie on salapärane meeleolu rõngasrakendus, mis määrab teie tuju biomeetrilisi andmeid kogudes. Selle kaubamärgil on järgmised kaubamärgi atribuudid: salapärane, tehniline ja veetlev.

Värv

Moodie salapäraseid ja tehnilisi kaubamärgi atribuute iseloomustab roheline terminali brändide kasutamine, mida sageli seostatakse vanade arvutisüsteemide ja graafikaga. Vastupidiselt enamlevinud liidestele räägib Moodie värvikasutus brändidele suures osas mitmetähendusliku narratiivina ja on aluseks meeleolurõnga jäljendamise värvimuutusmaagiale.

$ mdc-teema-esmane: # 009b3b;
$ mdc-teema-esmasel: # 003db8;

Tüüp

IBM Plex Mono liialdab Moodie tehnilise kaubamärgi atribuudiga sarnaselt oma värvisüsteemiga; üheruumilise fondi kasutamine vihjab Moodie toote tehnilisusele. Koos salapärase ja veetleva üleskutsega tegutseb IBM Plex Mono subtekstiliselt, vihjates millelegi võõrale.

$ mdc-typography-font-family: unquote ("IBM Plex Mono, sans-serif");
$ mdc-typography-stiil-button: (
 kirjasuurus: 14 pikslit,
 kirjasuurus: 600,
 tähtede vahe: 0,05em,
);

Kuju

Jätkates ebaselgusega seotud teemasid, keskendub Moodie kujuke pehme ja jäiga, ümmarguse ja terava ruumi vahepealsele ruumile, et väljendada jälle moonutatud, kuid mängulist vaadet toote salapärase tehnoloogia kohta.

$ mdc-kuju-väikese komponendi raadius: (8 pikslit);

Laineliselt

Netisaadete voogesituse rakendus

Waverly on taskuhäälingusaadete voogesituse teenus, mis keskendub ühe teema eri tüüpi sisu, näiteks taskuhäälingusaadete, artiklite, videote või muusika, esitusloendite kureerimisele. Waverly kehastab järgmisi kaubamärgi atribuute: töökas, kaasaegne ja kureeritud.

Värv

Kujutatud sisule keskendumiseks on Waverly aineline teema tume teema, mis tähendab lihtsalt seda, et suurem osa kasutajaliidest on tumedat värvi ja rõhutatud heledate värvidega, mis tähistavad teostatavaid elemente, näiteks nuppe. Waverly töökas puhul tõstab tumehall esile heleoranži, et tagada selle hierarhia raskes keskkonnas.

$ mdc-teema-esmane: # FE8A00;
$ mdc-teema-esmasel: # 003db8;

Oluline on arvestada, et tume teema on teistsugune kui tume režiim. Tumeda režiimi lülitab kasutaja sisse konkreetse toimingu tegemise ajal, samas kui tume teema on brändivärvidel või muudel teguritel põhineva teema jaoks omane. .

Tüüp

Waverly tänapäevase kaubamärgi atribuut väljendatakse Montserrat abil, mille on loonud Buenos Airese naabruses Montserrat asuv Julieta Ulanovsky. Ehkki esmapilgul sarnane kirjatüübiga nagu Gotham, on laiade kirjavormide ja julgete kontuuridega Montserrat sobitunud hästi tänapäevase nähtusega, mida tuntakse kaubamärgi kirjatüüpidena, ümara sõbralikkusega, mis on leidnud tee paljude toodete identiteeti.

$ mdc-typography-font-family: unquote ("Montserrat, sans-serif");
$ mdc-typography-stiil-button: (
 kirjasuurus: 14 pikslit,
 kirjasuurus: 600,
 tähtede vahe: 0,05em,
); Kuju

Selles konkreetses näites kasutab Waverly nuppu Materiaalse teksti nupp, milles puudub kuju või ruut kuju tähistamiseks. Ehkki nähtavat kuju pole, saab kasutaja interaktsiooni ajal (näiteks kursori hõljumine või koputamine) näha nupu piire ja selle kuju. Waverly kuju lugu on pehmelt öeldud ja räägib selle tänapäevastest ja töökatest atribuutidest, võimendades materjali tuttavat algkuju.

$ mdc-kuju-väikese komponendi raadius: (4 pikslit);

Materjalidisain + glitch

Materjalidisain soovib, et keegi saaks kauneid tooteid kiiremini ehitada. Meie avatud lähtekoodiga komponendid annavad teile kõik, mida ehituse alustamiseks vajate. Glitch võimaldab hõlpsalt otsima brauseris nokitsemist, inspireerides õppimist mängu kaudu. Soovitame kõigil ja kõigil neid näiteid uuesti segada, et luua oma nupud ja oma teemad, isegi kui nad pole seda kunagi kodeerinud.

Remix ja jaga, mida teed!
glitch.com/@material