Materialski gumb je več kot gumb

Kako oblikovati (in razlikovati) gumbe s tematskim oblikovanjem materiala

Material Design je pred kratkim izdal posodobljene smernice za obliko, orodja in študije primerov, ki kažejo, kako enostavno je komponente uporabniškega vmesnika oblikovati s pomočjo Material Theming. Za nadaljnjo ponazoritev tematskih zmožnosti novega sistema oblik smo ustvarili žive primere gumbov Material v različnih temah z uporabo Material Components for Web on Glitch. Glitch omogoča vsakomur (tudi vam), da te primere gumbov prenaša in realizira njihov izrazni potencial s pomočjo kode. Na kratko, naslednji primeri gumbov zasukajo enake pregovorne gumbe znotraj materiala Theming, da dosežejo zelo različne vizualne rezultate. Ker vse več blagovnih znamk obstaja izključno v digitalnem prostoru, so tematske komponente zdaj enako pomembne kot logotip, kako se uporabniki povežejo z vašo blagovno znamko.

Vsak gumb na Glitch je tematski, da odraža izmišljeno blagovno znamko ali izdelek, na primer storitev dostave cvetja ali podcast. V tem priročniku bo tema vsakega gumba dekonstruirana glede na blagovno znamko in sisteme Barva, vrsta in oblika materiala.

Material DIY - Naučite se, kako te gumbe prestaviti sami v datoteko za branje v gumbu.

Sinergej

Aplikacija za vodenje meditacije

Synergee je aplikacija za usmerjanje meditacije, ki uporabnike vodi skozi meditacijska potovanja s pomočjo haptične tehnologije in drugih ne-vizualnih sredstev. Blagovna znamka Synergee ima naslednje lastnosti: svetle, skromne in prefinjene.

Barva

Uporaba svetlega in temnega bluesa prevladuje blagovno znamko Synergee in govori o njenih svetlih in skromnih lastnostih. Barve s ponavljanjem občutka pogleda v nebo izražajo določeno domačnost, ki se počuti prijetno prijazno.

$ mdc-tema-primarna: # ded7ff;
$ mdc-tema-glavna: # 003db8;

Vtipkajte

Synergee izraža svoj prefinjen atribut znamke z uporabo K2D, tajske in latinske pisave, ki jo je ustvaril Cadson Demak. K2D vključuje tradicionalne tajske črke, ki so po svoji naravi okrogle in "zanke", je kul, če vidimo, kako so oblikovalske značilnosti latinske abecede in tajske abugide pretočene v nekaj edinstvenega in vznemirljivega.

$ mdc-typography-font-family: unquote ("K2D, sans-serif");
$ mdc-tipografija-stili-gumb: (
 velikost pisave: 14px,
 teža pisave: 500,
 razmik med črkami: 0,05em,
);

Oblika

Synergeejev svetel atribut blagovne znamke narekuje, da mora tema izražati občutek prijaznosti in optimizma. Če želite to izraziti, je sistem oblik Synergee močno zaokrožen z majhnimi sestavnimi deli, kot so gumbi popolnoma okrogli.

$ mdc-oblika-polmer majhnih komponent: (24px);

Rdeče vrtnice

Dostava cvetja

Red Roses je storitev dostave cvetja, ki spodbuja pozitivnost z dejanjem dajanja in uteleša naslednje atribute blagovne znamke: naravno, veselo in elegantno.

Barva

Barvni sistem uporablja rdeče tone, ki govorijo o naravnosti vrtnic in olajšajo ustvarjanje kontrasta med različnimi komponentami. Gumbi privzeto uporabljajo osnovno barvo vaše teme materiala.

$ mdc-tema-primarna: # b31839;
$ mdc-tema-glavna: #ffffff;

Vtipkajte

Tema Red Roses uporablja Cabin, humanistično pisavo sans, ki jo najdemo v Googlovih pisavah; Oblike črk kabine imajo kombinacijo okroglih in ostrih obrisov, ki govorijo o naravnih in elegantnih lastnostih blagovne znamke Red Roses. (Cabin črpa navdih pri Gillu Sansu, ki ga je navdihnila londonska podzemna "Underground Alphabet").

$ mdc-typography-font-family: unquote ("Kabina, sans-serif");
$ mdc-tipografija-stili-gumb: (
 velikost pisave: 14px,
 teža pisave: 500,
 razmik med črkami: 0,05em,
);

Oblika

Sistem oblik Rdeče vrtnice govori tako o svojih radostnih kot naravnih lastnostih, ki posnemajo cvetne liste. Izmenični polmeri tega gumba odražajo (ne) popolnost flore in naravnega sveta; ta oblika v kombinaciji z barvo ustvarja močan vizualni vpliv.

$ mdc oblika-polmer majhnih komponent: (4px 12px 4px 12px);

Končano!

Aplikacija za upravljanje nalog

Končano! je aplikacija za upravljanje nalog, ki poudarja hitre, kompaktne izkušnje, ki uporabnikom omogočajo dokončanje nalog, brez motenj. Končano! znamka ima naslednje lastnosti: profesionalno, hitro in jedrnat.

Barva

Da bi spregovorili o profesionalnih in preprostih lastnostih znamke Done !, tema uporablja konzervativno paleto, sestavljeno iz bele in dokaj nevtralne modre barve. Poleg tega, da bi zmanjšali moteče in hitro izrazili, gumbi Gone! Ne vključujejo sence.

$ mdc-tema-primarna: # 5973bf;
$ mdc-tema-glavna: #ffffff;

Vtipkajte

Trd pisav Libre Franklin stoji krepko in zanesljivo v nasprotju s konzervativno barvno paleto Done! Libre Franklin je razširitev pisave Franklin iz gotike, ki so jo pogosto uporabljali za časopisne naslove ali panoje; enostavno je videti poslovne lastnosti Libre Franklin v kontekstu gumba Gotovo!

$ mdc-tipography-font-family: unquote ("Libre Franklin, sans-serif");
$ mdc-tipografija-stili-gumb: (
 velikost pisave: 14px,
 teža pisave: 500,
 razmik med črkami: 0,02em,
 preoblikovanje besedila: veliko začetnico,
);

Oblika

Donesen sistem oblik govori o hitrosti in jedrnosti blagovne znamke, saj ne dodaja vizualne teže ukrivljenih ali poševnih vogalov.

$ mdc-oblika-polmer majhnih komponent: (0px);

Moodie

Aplikacija Mood ring

Moodie je skrivnostna aplikacija za razpoloženje, ki določi vaše razpoloženje z zbiranjem biometričnih podatkov. Njegova blagovna znamka ima naslednje lastnosti blagovne znamke: skrivnostne, tehnične in prijetne.

Barva

Za skrivnostne in tehnične lastnosti blagovne znamke Moodie je značilno, da blagovne znamke uporabljajo "terminalsko" zeleno, pogosto povezano z vintage računalniškimi sistemi in grafiko. V nasprotju z večino običajnih vmesnikov Moodiejeva barva v veliki meri govori o dvoumnih pripovedih blagovnih znamk in služi kot osnova za spreminjanje barve čaranja oponašanja razpoloženja.

$ mdc-tema-primarna: # 009b3b;
$ mdc-tema-glavna: # 003db8;

Vtipkajte

IBM Plex Mono pretirava svojstvo tehnične blagovne znamke Moodie na podoben način kot svoj barvni sistem; uporaba pisave monospace namiguje na tehničnost izdelka Moodie. IBM Plex Mono v kombinaciji s skrivnostnim in prijetnim pozivom k dejanju deluje podtekstualno in namiguje na nekaj tujega.

$ mdc-tipography-font-family: unquote ("IBM Plex Mono, sans-serif");
$ mdc-tipografija-stili-gumb: (
 velikost pisave: 14px,
 teža pisave: 600,
 razmik med črkami: 0,05em,
);

Oblika

Nadaljevanje tematik dvoumnosti se zgodba o oblikovanju Moodie osredotoča na vmesni prostor mehkega in togega, okroglega in ostrega, da znova izrazi izkrivljen, a igriv pogled na 'skrivnostno' tehnologijo, ki stoji za izdelkom.

$ mdc-oblika-polmer majhnih komponent: (8px);

Valovito

Aplikacija za pretakanje podcast

Waverly je storitev pretakanja podcastov, ki se osredotoča na oblikovanje seznamov predvajanja za različne vrste vsebine okoli ene teme, kot so podcasti, članki, videoposnetki ali glasba. Waverly pooseblja naslednje atribute blagovne znamke: priden, sodoben in kuriran.

Barva

Če se osredotočite na vsebino izbranih vsebin, je Waverly's Material Theme temna tema, kar pomeni, da je večina uporabniškega vmesnika temne barve z poudarki svetle barve, da nakazujejo uporabne elemente, kot so njegovi gumbi. V delavnem primeru Waverly temno siva poudarja svetlo oranžno barvo, ki zagotavlja njeno hierarhijo v okoliščinah, težkih.

$ mdc-tema-primarna: # FE8A00;
$ mdc-tema-glavna: # 003db8;

Pomembno je upoštevati, da je temna "tema" drugačna od temne "mode". Temen način uporabnik vklopi z določenim dejanjem, temna tema pa je lastna temi, ki temelji na barvah blagovne znamke ali drugih dejavnikih .

Vtipkajte

Atribut sodobne blagovne znamke Waverly je izražen z uporabo Montserrata, pisave, ki jo je ustvarila Julieta Ulanovsky, prebivalka soseske Montserrat v Buenos Airesu. Čeprav je na prvi pogled podoben črki, kot je Gotham, s širokimi črkami in krepkimi obrisi, se Montserrat tesno prilega sodobnemu fenomenu, znanemu kot "tipkovnice blagovne znamke", z zaobljeno prijaznostjo, ki je našla pot v identiteto številnih izdelkov.

$ mdc-tipography-font-family: unquote ("Montserrat, sans-serif");
$ mdc-tipografija-stili-gumb: (
 velikost pisave: 14px,
 teža pisave: 600,
 razmik med črkami: 0,05em,
); Oblika

V tem konkretnem primeru Waverly uporablja gumb Text Text, v katerem ni orisa ali polja, ki bi označeval obliko. Čeprav ni vidne oblike, lahko uporabnik ob interakciji (na primer s kazalcem ali tapkanjem) vidi robove gumba in njegovo obliko. Zgodba o obliki Waverlyja je mehko govorjena in govori o svojih sodobnih in delavnih lastnostih, saj uporablja materialno znano osnovno obliko materiala.

$ mdc-oblika-polmer majhnih komponent: (4px);

Material Design + glitch

Material Design želi, da bi lahko kdo hitreje sestavil čudovite izdelke. Naše odprtokodne komponente vam nudijo vse, kar potrebujete, da začnete graditi. Glitch olajša začetek tinkarniranja neposredno v brskalniku in navdihuje učenje z igro. Spodbujamo vsakogar in vsakogar, da te primere remiksira, da ustvarijo svoje gumbe in lastne teme, čeprav jih še nikoli niso kodirali.

Remix in delite, kar ste naredili!
glitch.com/@material