Moddiy tugma tugmadan ko'proq narsa

Materiallar dizayni mavzusi yordamida tugmachalarni qanday uslubda (va farqlashni)

Material Dizayn yordamida UI tarkibiy qismlarini tuzish qanchalik osonligini ko'rsatish uchun yaqinda yangilangan shakl bo'yicha qo'llanma, vositalar va amaliy ishlar nashr etildi. Yangi shakl tizimining tematik imkoniyatlarini yana bir bor namoyish etish uchun biz turli xil mavzularda "Material tugmachalari" ning jonli namunalarini yaratdik, bu Internet uchun material komponentlaridan foydalanib yaratildi. Glitch har kimga (hatto siz ham) ushbu tugmachaning misollaridan foydalanib kodni ishlatib, ularning ekspressiv imkoniyatlarini amalga oshirishga imkon beradi. Xulosa qilib aytganda, quyidagi tugma misollari, mutlaqo boshqacha vizual natijalarga erishish uchun Material Theming-dagi bir xil maqollarni burishadi. Tobora ko'proq brendlar faqat raqamli makonda mavjud bo'lganligi sababli, tematik komponentlar endi foydalanuvchilar sizning brendingizga qanday munosabatda bo'lishlari uchun logotip kabi muhimdir.

Glitch-dagi har bir tugma, gullarni etkazib berish xizmati yoki podkast ilovasi kabi uydirma tovar yoki mahsulotni aks ettirish uchun mavzularga bag'ishlangan. Ushbu qo'llanma har bir tugmachaning mavzusini marka va Material Color, Type va Shape tizimlari nuqtai nazaridan o'zgartiradi.

DIY materiali - bu tugmalarni .readme faylida ushbu tugmachalarni o'zingiz qanday qilib tuzatishni bilib oling.

Synergee

Meditatsiya bo'yicha qo'llanma

Synergee - meditatsiya bo'yicha qo'llanma bo'lib, foydalanuvchilarni meditsina sayohatlari orqali haptik texnologiya va boshqa vizual bo'lmagan vositalar orqali boshqaradi. Synergee brendi quyidagi xususiyatlarga ega: yorqin, kamtar va murakkab.

Rangi

Yengil va quyuq ranglardan foydalanish Synergee brendida ustunlik qiladi va uning yorqin va kamtarona xususiyatlari bilan gaplashadi. Osmonga qarash tuyg'usini takrorlash orqali ranglar yoqimli do'stona his etadigan ma'lum bir tanishlikni anglatadi.

$ mdc-theme-basic: # ded7ff;
$ mdc-mavzu bo'yicha-boshlang'ich: # 003db8;

Turi

Synergee o'zining murakkab brend atributini Kadson Demak tomonidan yaratilgan Tayland va Lotin yozuvidagi K2D-dan foydalanish orqali ifoda etadi. K2D o'ziga xos dumaloq va "loopy" bo'lgan an'anaviy Tayland harflarini o'z ichiga oladi, Lotin alifbosi va Tailand abugidasining dizayn xususiyatlari qandaydir o'ziga xos va hayajonli narsalarga to'planganligini ko'rish juda yoqimli.

$ mdc-typography-font-family: unquote ("K2D, sans-serif");
$ mdc-typografiya-uslublar-tugmasi: (
 shrift o'lchami: 14px,
 shriftning og'irligi: 500,
 harflar oralig'i: 0.05em,
);

Shakl

Synergee-ning yorqin atributi mavzu oldinga samimiylik va nekbinlik tuyg'usini ifoda etish kerakligini ta'kidlaydi. Buni ifoda etish uchun, Synergee-ning shakli juda katta yumaloq bo'lib, tugmachalar kabi yumaloq bo'ladi.

$ mdc-shakl-kichik-komponent-radius: (24px);

Qizil atirgullar

Gullarni etkazib berish xizmati

Red Roses - bu gullarni etkazib berish xizmati bo'lib, u berish akti orqali pozitivlikni qo'llab-quvvatlaydi va quyidagi brend atributlarini o'zida mujassam etgan: tabiiy, quvnoq va oqlangan.

Rangi

Rang tizimi atirgullarning tabiiyligiga mos keladigan qizil tonlarni ishlatadi va turli xil komponentlar o'rtasida kontrastni yaratishni osonlashtiradi. Tugmalar sukut bo'yicha sizning Material Theme-ning asosiy rangidan foydalanadilar.

$ mdc-theme-basic: # b31839;
$ mdc-theme-on-боюнча: #ffffff;

Turi

Qizil atirgullar mavzusi Google Fonts-da joylashgan gumanist sans yozuvlaridan Cabin-dan foydalanadi; Idishning harf shakllari qizil atirgullarning tabiiy va nafis brend atributlariga mos keladigan yumaloq va o'tkir konturlarni o'z ichiga oladi. (Kabin London metrosining "Underground alifbosi" dan ilhomlangan Gill Sansdan ilhom oladi).

$ mdc-typography-font-family: unquote ("Kabin, sans-serif");
$ mdc-typografiya-uslublar-tugmasi: (
 shrift o'lchami: 14px,
 shriftning og'irligi: 500,
 harflar orasidagi masofa: 0.05em,
);

Shakl

Qizil atirgullar shakli tizimi gulbarg barglariga taqlid qilib, uning quvonchli va tabiiy brendlik xususiyatlari bilan bog'lanadi. Ushbu tugmachaning alternativ radiusi (im) flora va tabiiy olamning mukammalligini aks ettiradi; rang bilan birgalikda bu shakl kuchli vizual effekt yaratadi.

$ mdc-shakl-kichik komponentli-radius: (4px 12px 4px 12px);

Bajarildi!

Vazifalarni boshqarish ilovasi

Bajarildi! bu vazifalarni boshqarish uchun ilova bo'lib, foydalanuvchilarga o'z vazifalarini bajarishda chalg'itmaslik uchun tez, ixcham tajribalarni ta'kidlaydi. Bajarildi! brend quyidagi xususiyatlarga ega: professional, tezkor va aniq.

Rangi

Bajarildi! Professional va oddiy brend atributlari bilan suhbatlashish uchun mavzu oq va juda neytral ko'klardan iborat konservativ palitradan foydalanadi. Bundan tashqari, chalg'itishni va tezkor tezlikni minimallashtirish uchun Bajarildi! Tugmachalari soyani kiritishdan saqlanishadi.

$ mdc-theme-basic: # 5973bf;
$ mdc-theme-on-боюнча: #ffffff;

Turi

Qattiq "Libre Franklin" yozuvi shafqatsiz va ishonchli, "Bajarildi!" Konservativ ranglar palitrasidan farqli o'laroq. Libre Franklin - bu gazetalar sarlavhalari yoki reklama taxtalari uchun tez-tez ishlatiladigan Franklin gotika yozuvining kengayishi; "Bajarildi!" tugmachasi ichida Libre Franklinning biznesga o'xshash xususiyatlarini ko'rish oson.

$ mdc-typography-font-family: unquote ("Libre Franklin, sans-serif");
$ mdc-typografiya-uslublar-tugmasi: (
 shrift o'lchami: 14px,
 shriftning og'irligi: 500,
 harflar oralig'i: 0.02em,
 matnni o'zgartirish: bosh harf bilan yozmoq,
);

Shakl

Donning shakli tizimi egri yoki burchakli burchaklarning vizual og'irligini qo'shishdan bosh tortib, brendning tezligi va aniqligini anglatadi.

$ mdc-shakl-kichik-komponent-radius: (0px);

Moodie

Mood ring dasturi

Moodie - bu sizning kayfiyatingizni biometrik ma'lumotlarni to'plash orqali aniqlaydigan sirli kayfiyat ohangi ilovasi. Uning brendi quyidagi tovar belgilariga ega: sirli, texnik va yoqimli.

Rangi

Moodie markasining sirli va texnik xususiyatlari atamalarning kompyuter tizimlari va grafikalari bilan bog'liq bo'lgan "terminal" yashil rangidan foydalanish bilan tavsiflanadi. Moodie ranglarini ishlatishda keng tarqalgan interfeyslardan farqli o'laroq, ko'p jihatdan markalar noaniq hikoya qiladi va kayfiyat ohangini taqlid qilish rangni o'zgartiruvchi sehr uchun asos bo'lib xizmat qiladi.

$ mdc-theme-basic: # 009b3b;
$ mdc-mavzu bo'yicha-boshlang'ich: # 003db8;

Turi

IBM Plex Mono Moodie-ning texnik atributini o'zining rang tizimiga o'xshash tarzda oshirib yuboradi; Moodie mahsuloti texnik nuqtai nazardan monososmik shriftlardan foydalanish. Sirli va yoqimli harakatga chorlash bilan birgalikda, IBM Plex Mono begona narsaga ishora qilib, substekstiya asosida ishlaydi.

$ mdc-typography-font-family: unquote ("IBM Plex Mono, sans-serif");
$ mdc-typografiya-uslublar-tugmasi: (
 shrift o'lchami: 14px,
 shriftning og'irligi: 600,
 harflar orasidagi masofa: 0.05em,
);

Shakl

Moodie noaniqlik mavzularini davom ettirib, yumshoq va qattiq, yumaloq va o'tkir bo'shliqqa e'tibor qaratib, mahsulot orqasidagi "sirli" texnologiyaga oid buzilgan, ammo o'ynoqi ko'rinishni yana bir bor ifoda etadi.

$ mdc-shakl-kichik-komponent-radius: (8px);

Vaverly

Podcast oqim ilovasi

Waverly - bu podkastlar, maqolalar, videolar yoki musiqa kabi bitta mavzu atrofida har xil tarkib uchun pleylistlarni ajratishga qaratilgan podcast oqimi xizmati. Waverly brendning quyidagi xususiyatlarini o'zida mujassam etgan: mehnatsevar, zamonaviy va ishlangan.

Rangi

Dasturlangan tarkibga asosiy e'tiborni qaratish uchun, Waverly's Material Theme - qorong'i mavzudir, ya'ni UI aksariyat qismi qorong'u rangda, uning tugmachalari singari harakatga keltiradigan elementlarni ko'rsatadigan och rang bilan urg'u berilgan. Waverlyning mehnatsevar holatida, quyuq kul rang kontekstli og'ir muhitda ierarxiyasini ta'minlash uchun yorqin to'q sariq rangni ta'kidlaydi.

$ mdc-theme-basic: # FE8A00;
$ mdc-mavzu bo'yicha-boshlang'ich: # 003db8;

Qorong'i "mavzu" qorong'u "rejim" dan farqli ekanligini ta'kidlash kerak. Qorong'u rejim foydalanuvchi tomonidan ma'lum bir harakatni amalga oshirish orqali yoqiladi, qorong'u mavzu esa marka ranglari yoki boshqa omillar asosida mavzuga tegishli bo'ladi. .

Turi

Waverly-ning zamonaviy brend atributi Buenos-Ayresning Montserrat mahallasida yashovchi Julieta Ulanovskiy tomonidan yaratilgan "Montserrat" yozuvi yordamida ifodalangan. Bir qarashda Gotham singari harflarga o'xshash, keng harflar va qalin konturlarga ega bo'lgan Montserrat, ko'plab mahsulotlarning o'ziga xosligini topib olgan yaxlit samimiyat bilan "marka yozuvlari" deb nomlanuvchi zamonaviy fenomenga mos keladi.

$ mdc-typography-font-family: unquote ("Montserrat, sans-serif");
$ mdc-typografiya-uslublar-tugmasi: (
 shrift o'lchami: 14px,
 shriftning og'irligi: 600,
 harflar orasidagi masofa: 0.05em,
) Shakl

Ushbu aniq misolda, Waverly Materialni matn tugmachasidan foydalanadi, unda hech qanday shakl yoki chiziq ko'rinmaydi. Ko'rinadigan shakl bo'lmasa ham, foydalanuvchi o'zaro ta'sirlashayotganda (masalan, kursorni siljitish yoki teginish kabi) foydalanuvchi tugmachaning chegarasi va uning shaklini ko'ra oladi. Waverly-ning shakli haqidagi hikoyasi yumshoq va sodda, materialning tanish bo'lgan boshlang'ich shaklini ishlatib, uning zamonaviy va mehnatkash xususiyatlari bilan gaplashadi.

$ mdc-shakl-kichik-komponent-radius: (4px);

Materiallar dizayni + Glitch

Materiallar dizayni har kim chiroyli mahsulotlarni tezroq qura olishlarini xohlaydi. Bizning ochiq manbali tarkibiy qismlar sizga qurilishni boshlash uchun zarur bo'lgan barcha narsalarni beradi. Glitch to'g'ridan-to'g'ri brauzerda zerikishni boshlashni osonlashtiradi va o'yin orqali o'rganishga ilhom beradi. Biz hech kimni va barchani o'zlarining tugmachalarini va o'zlarining mavzularini yaratish uchun, hatto ilgari kodlanmagan bo'lsa ham, ushbu misollarni qayta ko'rib chiqishga chaqiramiz.

Remiks qiling va nima qilganingizni baham ko'ring!
glitch.com/@material