Materiāla poga ir kas vairāk nekā poga

Kā stilizēt (un atšķirt) pogas, izmantojot materiālu noformējumu

Materiālu dizains nesen izlaida atjauninātus formas norādījumus, rīkus un gadījumu izpēti, lai parādītu, cik viegli ir UI komponentu veidošana, izmantojot Material Theming. Lai vēl vairāk ilustrētu jaunās formas sistēmas piestiprināšanas iespējas, mēs izveidojām materiāla pogas dzīvus piemērus dažādās tēmās, izmantojot materiāla komponentus tīklam Glitch. Glitch ļauj jebkuram (pat jums) remiksēt šos pogu piemērus un realizēt to izteiksmīgo potenciālu, izmantojot kodu. Īsumā šie pogu piemēri ir savērpuši tos pašus sakāmās pogas materiāla veidošanā, lai sasniegtu ļoti atšķirīgus vizuālos rezultātus. Tā kā arvien vairāk zīmolu eksistē tikai digitālajā telpā, tematiskās sastāvdaļas tagad ir tikpat svarīgas kā logotips, kā lietotāji attiecās uz jūsu zīmolu.

Katra Glitch poga ir veidota pēc tēmas, lai atspoguļotu izdomātu zīmolu vai produktu, piemēram, ziedu piegādes pakalpojumu vai aplādes lietotni. Šis ceļvedis dekonstruē katras pogas motīvu pēc markas un no materiāla krāsas, veida un formas.

Materiāls DIY - uzziniet, kā šīs pogas remiksēt pats pogas .readme failā.

Sinerģe

Meditācijas norāžu lietotne

Synergee ir meditācijas norāžu lietotne, kas palīdz lietotājiem meditācijas braucienos, izmantojot haptiskas tehnoloģijas un citus nevizuālus līdzekļus. Synergee firmas zīmei ir šādi atribūti: spilgts, pazemīgs un izsmalcināts.

Krāsa

Gaismas un tumšās krāsas blūza izmantošana dominē Synergee zīmolā un runā ar tās spilgtajām un pazemīgajām īpašībām. Atkārtojot debesu skatīšanās sajūtu, krāsas izsaka zināmu zināšanu, kas jūtas patīkami draudzīga.

$ mdc-theme-Primary: # ded7ff;
$ mdc-theme-on-basic: # 003db8;

Veids

Synergee pauž savu izsmalcināto zīmola atribūtu, izmantojot K2D - taizemiešu un latīņu burtveidolu, ko izveidojis Cadson Demak. K2D ietver tradicionālās taizemiešu burtu formas, kas pēc būtības ir apaļas un “cilpas”. Ir patīkami redzēt, kā latīņu alfabēta un Taizemes abugida dizaina īpašības tika pārveidotas par kaut ko unikālu un aizraujošu.

$ mdc-typography-font-family: unquote ("K2D, sans-serif");
$ mdc-typography-stili-button: (
 fonta lielums: 14 pikseļi,
 burtu svars: 500,
 burtu atstatums: 0,05em,
);

Forma

Synergee spilgtais zīmola atribūts nosaka, ka tēmai vajadzētu izteikt priekšstatu par draudzīgumu un optimismu. Lai to izteiktu, Synergee formas sistēma ir ļoti noapaļota, un mazas detaļas, piemēram, pogas, ir pilnīgi apaļas.

USD mdc-formas-maza komponenta rādiuss: (24 pikseļi);

Sarkanās rozes

Ziedu piegādes pakalpojums

Sarkanās rozes ir ziedu piegādes pakalpojums, kas veicina pozitivitāti, dodot dāvanu, un iemieso šādus zīmola atribūtus: dabiski, dzīvespriecīgi un eleganti.

Krāsa

Krāsu sistēmā tiek izmantoti sarkanie toņi, kas runā par rožu dabiskumu un ļauj viegli izveidot kontrastu starp dažādiem komponentiem. Pogas pēc noklusējuma izmanto materiāla motīva galveno krāsu.

$ mdc-theme-basic: # b31839;
$ mdc-theme-on-basic: #ffffff;

Veids

Motīvs Sarkanās rozes izmanto kabīni, humānistu sans burtveidolu, kas atrodams vietnē Google Fonts; Kajītes vēstuļu formas satur apaļu un asu kontūru kombināciju, kas runā par Red Roses dabisko un eleganto zīmola atribūtiem. (Kajīte iedvesmojusies no Džila Sansa, kuru iedvesmojis Londonas metro “Pazemes alfabēts”).

$ mdc-typography-font-family: unquote ("Kabīne, sans-serif");
$ mdc-typography-stili-button: (
 fonta lielums: 14 pikseļi,
 burtu svars: 500,
 burtu atstatums: 0,05em,
);

Forma

Sarkano rožu formas sistēma norāda gan uz dzīvespriecīgajām, gan dabiskajām zīmola īpašībām, atdarinot ziedu ziedlapiņas. Šīs pogas mainīgie rādiusi atspoguļo floras un dabiskās pasaules (im) pilnību; kombinācijā ar krāsu šī forma rada spēcīgu vizuālo efektu.

USD mdc-formas-neliela komponenta rādiuss: (4x12x4xx12px);

Gatavs!

Uzdevumu pārvaldības lietotne

Gatavs! ir uzdevumu pārvaldības lietotne, kas uzsver ātru, kompaktu pieredzi, lai lietotāji varētu veikt savus uzdevumus bez uzmanības novēršanas. Gatavs! zīmolam ir šādi atribūti: profesionāls, ātrs un kodolīgs.

Krāsa

Lai runātu ar Done! Profesionālajiem un vienkāršajiem zīmola atribūtiem, tēmā tiek izmantota konservatīva palete, kas sastāv no baltas un diezgan neitrālas zilas krāsas. Turklāt, lai mazinātu uzmanības novēršanu un izteiktu ātrumu, Done! Pogas neietver ēnu.

$ mdc-theme-basic: # 5973bf;
$ mdc-theme-on-basic: #ffffff;

Veids

Stingrais burtveidols Libre Franklin ir drosmīgs un uzticams pretstatā Done! Konservatīvajai krāsu paletei. Libre Franklin ir Franklin Gothic burtveidola paplašinājums, ko bieži izmantoja avīžu virsrakstos vai stendos; Pogas Gatavs kontekstā ir viegli redzēt Libre Franklin lietišķās īpašības.

$ mdc-typography-font-family: unquote ("Libre Franklin, sans-serif");
$ mdc-typography-stili-button: (
 fonta lielums: 14 pikseļi,
 burtu svars: 500,
 burtu atstarpe: 0,02em,
 teksta pārveidošana: kapitalizēt,
);

Forma

Gatavās formas sistēma ņem vērā zīmola ātrumu un kodolīgumu, atturoties no liektu vai leņķu stūru vizuālā svara pievienošanas.

$ mdc-formas-maza komponenta rādiuss: (0px);

Garastāvoklis

Garastāvokļa gredzena lietotne

Moodie ir noslēpumaina garastāvokļa aplikācija, kas nosaka jūsu noskaņojumu, apkopojot biometriskos datus. Tās zīmolam ir šādas zīmola īpašības: noslēpumains, tehnisks un apburošs.

Krāsa

Moodie noslēpumainos un tehniskos zīmola atribūtus raksturo tas, ka zīmolos tiek izmantots zaļš “termināls”, kas bieži tiek saistīts ar tradicionālajām datorsistēmām un grafiku. Pretstatā visizplatītākajām saskarnēm, Moodie krāsu izmantošana lielā mērā runā par zīmolu neviennozīmīgo stāstījumu un kalpo par pamatu krāsas maiņas maģijai, kas atdarina garastāvokļa gredzenu.

$ mdc-theme-basic: # 009b3b;
$ mdc-theme-on-basic: # 003db8;

Veids

IBM Plex Mono pārspīlē Moodie tehniskā zīmola atribūtu līdzīgi kā tā krāsu sistēma; monospace fonta izmantošana norāda uz tehnisko raksturojumu, kas saistīts ar Moodie izstrādājumu. Apvienojumā ar noslēpumaino un apburošo aicinājumu uz darbību IBM Plex Mono darbojas zem teksta, norādot uz kaut ko svešu.

$ mdc-typography-font-family: unquote ("IBM Plex Mono, sans-serif");
$ mdc-typography-stili-button: (
 fonta lielums: 14 pikseļi,
 burtu svars: 600,
 burtu atstatums: 0,05em,
);

Forma

Turpinot neskaidru tēmu, Moodie formas stāsts koncentrējas uz mīksto un stingro, apaļo un asu telpu, lai atkal izteiktu izkropļotu, bet rotaļīgu priekšstatu par produkta “noslēpumaino” tehnoloģiju.

USD mdc-formas-maza komponenta rādiuss: (8 pikseļi);

Pārliecinoši

Podcast straumēšanas lietotne

Waverly ir aplādes straumēšanas pakalpojums, kas koncentrējas uz dažādu veidu atskaņošanas sarakstu veidošanu ap vienu tēmu, piemēram, aplādes, rakstus, video vai mūziku. Waverly iemieso šādus zīmola atribūtus: strādīgs, mūsdienīgs un kurators.

Krāsa

Lai galveno uzsvaru liktu uz izstrādātu saturu, Waverly materiāla tēma ir tumša tēma, kas vienkārši nozīmē, ka lielākā daļa lietotāja saskarnes ir tumšā krāsā ar gaišas krāsas akcentiem, kas norāda uz izpildāmiem elementiem, piemēram, uz tā pogām. Rūpīgajā Waverly gadījumā tumši pelēks izceļ spilgti oranžu krāsu, lai nodrošinātu tā hierarhiju smagā vidē.

$ mdc-theme-basic: # FE8A00;
$ mdc-theme-on-basic: # 003db8;

Ir svarīgi ņemt vērā, ka tumšā “tēma” atšķiras no tumšā “režīma”. Tumšo režīmu lietotājs ieslēdz, veicot noteiktu darbību, savukārt tumšā tēma ir raksturīga tēmai, kuras pamatā ir zīmola krāsas vai citi faktori. .

Veids

Waverly mūsdienu zīmola atribūts tiek izteikts, izmantojot Montserrātu, burtveidolu, ko izveidojusi Džuljeta Ulanovska, Buenosairesas Montserratas apkārtnes iedzīvotāja. Lai gan tikai no pirmā acu uzmetiena tas ir līdzīgs burtveidoliem, piemēram, Gotham, ar platām burtu formām un trekniem kontūriem, Montserrata precīzi iekļaujas mūsdienu parādībā, kas pazīstama kā “zīmola burtveidoli”, ar noapaļotu draudzīgumu, kas ir atradis ceļu uz daudzu produktu identitāti.

$ mdc-typography-font-family: unquote ("Montserrata, sans-serif");
$ mdc-typography-stili-button: (
 fonta lielums: 14 pikseļi,
 burtu svars: 600,
 burtu atstatums: 0,05em,
); Forma

Šajā konkrētajā piemērā Waverly izmanto pogu Materiāla teksts, kurā nav kontūras vai lodziņa, lai norādītu formu. Lai arī nav redzamas formas, mijiedarbojoties (piemēram, virzot kursoru vai piesitot), lietotājs var redzēt pogas robežas un tās formu. Veverlija formas stāsts tiek mīksti izrunāts un runā ar tā mūsdienu un rūpīgajām īpašībām, izmantojot materiāla pazīstamo bāzes formu.

USD mdc-formas-maza komponenta rādiuss: (4 pikseļi);

Materiāla dizains + glitch

Materiālu dizains vēlas, lai ikviens spētu ātrāk radīt skaistus izstrādājumus. Mūsu atvērtā koda komponenti sniedz jums visu nepieciešamo, lai sāktu veidot. Ar glitch palīdzību ir viegli sākt ķiķināt tieši pārlūkprogrammā, iedvesmojot mācīties rotaļās. Mēs aicinām ikvienu un ikvienu pārjaukt šos piemērus, lai izveidotu savas pogas un savas tēmas, pat ja viņi nekad iepriekš nav kodējuši.

Remix un dalīties ar to, ko jūs darāt!
glitch.com/@material