Materijalna tipka je više od gumba

Kako stilizirati (i razlikovati) gumbe pomoću teme dizajna materijala

Material Design nedavno je objavio ažurirane smjernice oblika, alate i studije slučaja koji pokazuju kako je jednostavno oblikovati komponente korisničkog sučelja koristeći Material Theming. Kako bismo dodatno ilustrirali tematske mogućnosti novog sustava oblika, stvorili smo žive primjere Materijalskih gumba u različitim temama koristeći materijalne komponente za web on Glitch. Glitch omogućuje bilo kome (čak i vama) da promiješa primjere tih gumba i ostvari svoj izražajni potencijal pomoću koda. Ukratko, sljedeći primjeri gumba uvrštavaju iste posložene gumbe unutar materijala Theming kako bi se postigli krajnje različiti vizualni rezultati. Kako sve više i više marki postoji isključivo u digitalnom prostoru, tematske komponente sada su jednako važne kao i logotip u odnosu korisnika na vašu marku.

Svaki je gumb na tipki Glitch tematski odraz fiktivne marke ili proizvoda, poput usluge isporuke cvijeća ili podcast aplikacije. Ovaj vodič će dekonstruirati temu svakog gumba s obzirom na marku i sustave boja, vrste i oblika materijala.

Materijalni uradi sam - naučite kako sami pomiješati ove gumbe u .readme datoteci gumba.

Synergee

Aplikacija za meditacijsko usmjeravanje

Synergee je aplikacija za meditacijsko usmjeravanje koja vodi korisnike meditacijskim putovanjima putem haptičke tehnologije i drugih ne-vizualnih sredstava. Synergee robna marka ima sljedeće atribute: svijetla, skromna i sofisticirana.

Boja

Korištenje svijetlog i tamnog bluza dominira Synergeejevom markom i govori o njenim svijetlim i skromnim osobinama. Replicirajući osjećaj gledanja u nebo, boje izražavaju određeno poznanstvo koje se osjeća ugodno prijateljski.

$ mdc-tema-primarna: # ded7ff;
$ mdc-tema-na primarnom: # 003db8;

Tip

Synergee izražava svoj sofisticirani atribut marke upotrebom K2D, tajlandskog i latinopisnog teksta koji je stvorio Cadson Demak. K2D uključuje tradicionalne tajlandske oblike slova koji su inherentno okrugli i "petljasti", cool je vidjeti kako su dizajnerske karakteristike latinične abecede i tajlandske abugide pretočene u nešto jedinstveno i uzbudljivo.

$ mdc-typography-font-family: unquote ("K2D, sans-serif");
$ mdc-tipografija-stilovi-gumb: (
 veličina slova: 14px,
 težina slova: 500,
 razmak slova: 0,05em,
);

Oblik

Synergeeov sjajni atribut robne marke diktira da tema treba izraziti osjećaj naklonosti i optimizma prema naprijed. Da biste to izrazili, sustav oblika Synergee je jako zaobljen s malim komponentama poput gumba koji su potpuno okrugli.

$ mdc-oblik-polumjer malih komponenti: (24px);

Crvene ruže

Usluga dostave cvijeća

Red Roses je usluga dostave cvijeća koja promovira pozitivnost činom davanja i utjelovljuje sljedeće atribute marke: prirodne, radosne i elegantne.

Boja

Sustav boja koristi tonove crvene boje koji govore prirodnosti ruža i olakšavaju stvaranje kontrasta između različitih komponenti. Gumbi prema zadanim postavkama koriste osnovnu boju vaše Materijalne teme.

$ mdc-primarna tema: # b31839;
$ mdc-tema-na primarnom: #ffffff;

Tip

Tema Crvene ruže koristi Cabin, humanistički sans utipkan u Google Fontima; Oblici slova u kabini imaju kombinaciju okruglih i oštrih kontura koje govore prirodnim i elegantnim atributima marke Red Roses. (Cabin uzima inspiraciju od Gill Sans-a, koji je inspiriran londonskim Underground-om "Underground Alphabet").

$ mdc-typography-font-family: unquote ("Kabina, sans-serif");
$ mdc-tipografija-stilovi-gumb: (
 veličina slova: 14px,
 težina slova: 500,
 razmak slova: 0,05em,
);

Oblik

Sustav oblika Crvene ruže govori i o svojim radosnim i prirodnim svojstvima brenda oponašajući cvjetne latice. Naizmjenični radijusi za ovaj gumb odražavaju (ne) savršenstvo flore i prirodnog svijeta; u kombinaciji s bojom, ovaj oblik stvara snažan vizualni utjecaj.

$ mdc-oblik-polumjer malih komponenti: (4px 12px 4px 12px);

Gotovo!

Aplikacija za upravljanje zadacima

Gotovo! je aplikacija za upravljanje zadacima koja naglašava brza, kompaktna iskustva koja omogućuju korisnicima da dovrše svoje zadatke, bez ometanja. Gotovo! marka ima sljedeće osobine: profesionalna, brza i sažet.

Boja

Kako bi razgovarala sa profesionalnim i jednostavnim atributima marke Done !, tema koristi konzervativnu paletu koja se sastoji od bijele i prilično neutralne plave boje. Uz to, za minimiziranje ometanja i brzinu izražavanja, gumbi Gotovo! Suzdrže se od uključivanja sjene.

$ mdc-tema-primarna: # 5973bf;
$ mdc-tema-na primarnom: #ffffff;

Tip

Čvrsta slova Libre Franklin hrabro i pouzdano stoje u kontrastu s konzervativnom paletom boja Done! Libre Franklin je proširenje Franklin gotičkog teksta koji se često koristio za naslove novina ili ploče; lako je vidjeti poslovne kvalitete Libre Franklin u kontekstu gumba Gotovo!

$ mdc-tipography-font-family: unquote ("Libre Franklin, sans-serif");
$ mdc-tipografija-stilovi-gumb: (
 veličina slova: 14px,
 težina slova: 500,
 razmak slova: 0,02em,
 pretvaranje teksta: velika i velika slova,
);

Oblik

Gotov sustav oblika govori o brzini i jezgrovitosti marke uzdržavajući se od dodavanja vizualne težine zakrivljenih ili nagnutih uglova.

$ mdc-oblik-polumjer malih komponenti: (0px);

Moodie

Aplikacija Mood ring

Moodie je tajanstvena aplikacija za otkrivanje raspoloženja koja određuje vaše raspoloženje prikupljanjem biometrijskih podataka. Njegova marka ima sljedeće atribute marke: tajanstvene, tehničke i dopadljive.

Boja

Moodiejeve tajne i tehničke karakteristike robne marke karakteriziraju upotreba marki „terminalne“ zelene boje, često povezane s vintage računalnim sustavima i grafikom. Za razliku od većine sučelja, Moodieova boja u velikoj mjeri govori dvosmislenom narativu i služi kao osnova za čaroliju promjene boje oponašanja prstena raspoloženja.

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

Tip

IBM Plex Mono pretjeruje u Moodie-ovoj tehničkoj marki na sličan način kao i sustav boja; upotreba monospace fonta nagovještava tehničku sposobnost proizvoda Moodie. U kombinaciji s tajanstvenim i simpatičnim pozivom na akciju, IBM Plex Mono djeluje podtekstualno, nagovještavajući nešto strano.

$ mdc-tipography-font-family: unquote ("IBM Plex Mono, sans-serif");
$ mdc-tipografija-stilovi-gumb: (
 veličina slova: 14px,
 težina slova: 600,
 razmak slova: 0,05em,
);

Oblik

Nastavljajući teme nejasnoće, Moodieva priča o obliku fokusira se na prostor mekog i krutog, okruglog i oštrog, kako bi opet izrazio iskrivljen, ali razigran pogled na 'misterioznu' tehnologiju koja stoji iza proizvoda.

$ mdc-oblik-polumjer malih komponenti: (8px);

Waverly

Podcast streaming aplikacija

Waverly je usluga podcast streaminga koja se fokusira na izradi popisa za reprodukciju različitih vrsta sadržaja oko jedne teme, poput podcasta, članaka, videozapisa ili glazbe. Waverly utjelovljuje sljedeće atribute marke: marljiv, suvremen i kuriran.

Boja

Kako bi se primarno usredsredio na odabrani sadržaj, Waverly's Material Theme je mračna tema, što samo znači da je većina korisničkog sučelja tamne boje s naglascima svijetle boje da označavaju djelotvorne elemente, poput njegovih gumba. U marljivom slučaju Waverlyja, tamno siva ističe svijetlo narančastu kako bi osigurala njegovu hijerarhiju u okruženju s teškim uvjetima.

$ mdc-primarna tema: # FE8A00;
$ mdc-tema-na primarnom: # 003db8;

Važno je napomenuti da je tamna "tema" drugačija od tamne "modu". Tamni način rada uključuje korisnik obavljanjem određene radnje, dok je tamna tema svojstvena temi koja se temelji na bojama marke ili drugim čimbenicima. ,

Tip

Atribut suvremene robne marke Waverly izražen je Montserrat-om, pisanim pločama koju je stvorila Julieta Ulanovsky, stanovnica četvrti Montserrat u Buenos Airesu. Iako je na prvi pogled sličan sloju poput Gothama, širokim obrascima slova i podebljanim obrisima, Montserrat se čvrsto uklapa u suvremeni fenomen poznat pod nazivom „marki od tipa marke“ sa zaobljenom ljubaznošću koja je pronašla put u identitet mnogih proizvoda.

$ mdc-typography-font-family: unquote ("Montserrat, sans-serif");
$ mdc-tipografija-stilovi-gumb: (
 veličina slova: 14px,
 težina slova: 600,
 razmak slova: 0,05em,
);Oblik

U ovom konkretnom primjeru, Waverly koristi gumb teksta teksta u kojem nema obrisa ili okvira za označavanje oblika. Iako nema vidljivog oblika, nakon interakcije (poput lebdenja pokazivačem ili dodirivanja) korisnik može vidjeti granice gumba i njegov oblik. Priča o obliku Waverlyja meko se govori i govori o njenim suvremenim i marljivim atributima, koristeći utjecaj poznatog osnovnog oblika materijala.

$ mdc-oblik-polumjer malih komponenti: (4px);

Dizajn materijala + glitch

Material Design želi da bilo tko brže može izgraditi prekrasne proizvode. Naše komponente otvorenog koda daju vam sve što je potrebno za početak izgradnje. Glitch olakšava započinjanje tinkarniranja izravno u pregledniku, nadahnjujući učenje putem igre. Potičemo sve i sve da promijene ove primjere kako bi stvorili vlastite gumbe i vlastite teme, čak i ako ih dosad nisu šifrirali.

Remix i podijelite ono što napravite!
glitch.com/@material