Maddi bir düymə bir düymədən çoxdur

Material Design temasından istifadə edərək düymələri dizayn edin (və ayırın)

Material Design, UI komponentlərinin material temalı ilə dizaynının nə qədər asan olduğunu göstərmək üçün bu yaxınlarda yenilənmiş qəlib təlimatları, alətlər və nümunə araşdırmaları yayımladı. Yeni forma sisteminin tematik imkanlarını daha da göstərmək üçün Glitch on the Web üçün Material Components istifadə edərək müxtəlif mövzularda Material düymələrinin canlı nümunələrini yaratdıq. Glitch ilə hər kəs (sizin də daxil olmaqla) bu düymə nümunələrini yenidən düzəldə bilər və koddan istifadə edərək ifadə potensialını həyata keçirə bilər. Aşağıdakı düymə nümunələri Material Theming-də eyni atalar sözləri düymələrini çevirərək çox fərqli vizual nəticələr əldə edir. Getdikcə daha çox marka yalnız rəqəmsal məkanda mövcud olduğundan tematik komponentlər indi istifadəçilərlə markanız arasındakı münasibətlər üçün bir logo qədər vacibdir.

Glitch-dəki hər düyməyə qondarma bir marka və ya məhsulu əks etdirən bir mövzu verilmişdir, məsələn. B. bir çiçək çatdırılması xidməti və ya bir podcast tətbiqi. Bu təlimat hər düymənin mövzularını marka və material rəngi, növü və forması baxımından ayırır.

Material DIY - Bu düymələri düymənin readme faylından necə qarışdıracağınızı öyrənin.

Sinerji

Meditasiya təlimatı tətbiqi

Synergee, istifadəçiləri haptik texnologiya və digər vizual olmayan vasitələrlə meditasiya səyahəti zamanı istiqamətləndirən bir düşüncə təlimatı tətbiqidir. Synergee markası aşağıdakı xüsusiyyətlərə malikdir: parlaq, təvazökar və zərif.

rəng

Açıq və tünd mavi rənglərin istifadəsi Synergee markasına üstünlük verir və açıq və təvazökar xüsusiyyətlərindən danışır. Rənglər göyə baxma hissini təkrarlayaraq toxunuş üçün xoş bir dostluq ifadə edir.

$ mdc-theme-primary: # ded7ff; $ mdc-theme-primary: # 003db8;

İncəsənət

Synergee, inkişaf etmiş marka xüsusiyyətini Cadson Demak tərəfindən yaradılan Tay və Latın qrafikası olan K2D istifadə edərək ifadə edir. K2D, təbii olaraq yuvarlaq və "əyri" olan ənənəvi Tay məktub formalarını ehtiva edir. Latın əlifbası və Tayland Abugidasının dizayn xüsusiyyətlərinin misilsiz və həyəcan verici bir şeyə necə çevrildiyini görmək çox xoşdur.

$ mdc-typography-font-family: sitat ("K2D, sans-serif"); $ mdc-typography-styles-button: (şrift ölçüsü: 14px, şrift ölçüsü: 500, hərf aralığı: 0.05em,);

Forma

Synergee'nin parlaq marka atributu mövzunun dostluq və nikbinlik hissini ifadə etməsini tələb edir. Bunu ifadə etmək üçün Synergee'nin forma sistemi yüksək dərəcədə yuvarlaqlaşdırılmışdır, düymələr kimi kiçik komponentlər tamamilə yuvarlaqdır.

$ mdc-şekil-kiçik-komponent-radius: (24px);

Qırmızı güllər

Çiçək çatdırılma xidməti

Qırmızı Roses, aşağıdakı marka atributlarını verərək müsbət təsir göstərən və təbii, xoşbəxt və zərif bir çiçək çatdırılma xidmətidir.

rəng

Rəng sistemi, güllərin təbiiliyindən danışan qırmızı çalarlardan istifadə edir və fərqli komponentlər arasında ziddiyyət yaratmağı asanlaşdırır. Varsayılan olaraq düymələr material dizaynınızın əsas rəngini istifadə edir.

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

İncəsənət

Qırmızı Gül teması, Google Fontlarda istifadə edilən humanist bir sans şrifti olan Kabindən istifadə edir. Kabin məktub formaları, Qırmızı Güllərin təbii və zərif marka atributlarından bəhs edən dəyirmi və kəskin konturların birləşməsinə malikdir. (Kabin London Metrosunun "Yeraltı Əlifbası" ndan ilham alan Gill Sansdan ilham alır.)

$ mdc-typography-font-family: sitat ("Cabin, sans-serif"); $ mdc-typography-styles-button: (şrift ölçüsü: 14px, şrift ölçüsü: 500, hərf aralığı: 0.05em,);

Forma

Qırmızı Güllərin forma sistemi ləçəkləri təqlid edərək həm şən, həm də təbii marka xüsusiyyətlərindən danışır. Bu düymə üçün dəyişən radiuslar floranın və təbii aləmin (im) mükəmməlliyini əks etdirir; Rənglə birlikdə bu forma güclü bir vizual təsir yaradır.

$ mdc-şekil-kiçik-komponent-radius: (4 x 12 x 4 x 12 x);

Bitdi!

Tapşırıq idarəetmə tətbiqi

Bitdi! , istifadəçilərin diqqətini yayındırmadan işlərini yerinə yetirmələri üçün sürətli, yığcam təcrübələri vurğulayan bir tapşırıq idarəetmə tətbiqetməsidir. Bitdi! Marka aşağıdakı xüsusiyyətlərə malikdir: peşəkar, sürətli və qısa.

rəng

Bitti professional və sadə marka atributlarından istifadə etmək! Danışmaq üçün mövzu, mühafizəkar bir ağ və kifayət qədər neytral bir mavi palitradan istifadə edir. Diqqəti azaltmaq və sürəti artırmaq üçün Bitti! Heç bir kölgə yoxdur.

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

İncəsənət

Sərt şrift Libre Franklin, Bitmişin mühafizəkar rəng palitrası ilə ziddiyyət təşkil edir. Libre Franklin, başlıqlarda və ya reklam lövhələrində tez-tez istifadə olunan Franklin Gotik şriftinin bir uzantısıdır. Libre Franklin-in işgüzar keyfiyyətlərini Bitti kontekstində görmək asandır! tanımaq.

$ mdc-typography-font-family: sitat ("Libre Franklin, sans serif"); $ mdc-typography-styles-button: (şrift ölçüsü: 14px, şrift ölçüsü: 500, hərf aralığı: 0.02em, mətnin çevrilməsi: böyük,);

Forma

Done forması sistemi əyri və ya açılı künclərin görmə ağırlığını əlavə edərək paylayaraq markanın sürətindən və yığcamlığından danışır.

$ mdc-form-kiçik-komponent-radius: (0px);

Moodie

Mood ring tətbiqi

Moodie, biometrik məlumatlar toplayaraq əhvalınızı təyin edən sirli bir əhval-ruhiyyə tətbiqidir. Marka aşağıdakı marka xüsusiyyətlərinə malikdir: sirli, texniki və çekici.

rəng

Moodie-nin əsrarəngiz və texniki marka xüsusiyyətləri, tez-tez klassik kompüter sistemləri və qrafika ilə əlaqəli olan “terminal” yaşılın istifadəsi ilə xarakterizə olunur. Ən populyar interfeyslərdən fərqli olaraq, Moodie'nin rəng istifadə etməsi, əsasən markanın mənalı olmayan povestindən danışır və əhval-ruhiyyə üzüyünü təqlid etmək üçün rəng dəyişdirən sehr üçün təməl rolunu oynayır.

$ mdc-theme-primary: # 009b3b; $ mdc-theme-primary: # 003db8;

İncəsənət

IBM Plex Mono, Moodie'nin texniki marka xüsusiyyətini rəng sistemi kimi bənzər bir şəkildə şişirtdirir. Monospace şriftinin istifadəsi Moodie məhsulunun texniki tərəfini göstərir. Gizli və ləzzətli bir hərəkət çağırışı ilə birləşdirilən IBM Plex Mono, mətn daxilində hərəkət edir və qeyri-adi bir şey təklif edir.

$ mdc-typography-font-family: sitat ("IBM Plex Mono, sans serif"); $ mdc-typography-styles-button: (şrift ölçüsü: 14px, şrift ölçüsü: 600, hərf aralığı: 0.05em,);

Forma

Moodie-nin forma hekayəsi qeyri-müəyyənlik mövzularında davam edir və məhsulun arxasındakı “sirli” texnologiyanın təhrif edilmiş, lakin oynaq bir görünüşünü bir daha ifadə etmək üçün yumşaq və sərt, yuvarlaq və kəskin arasındakı boşluğa diqqət yetirir.

$ mdc-şekil-kiçik-komponent-radius: (8px);

Waverly

Podcast axın tətbiqi

Waverly, podkastlar, məqalələr, videolar və ya musiqi kimi müəyyən bir mövzuda fərqli məzmun növləri üçün siyahıların hazırlanmasına yönəlmiş bir podcast yayım xidmətidir. Waverly aşağıdakı marka xüsusiyyətlərini özündə cəmləşdirir: çalışqan, çağdaş və yaşamış.

rəng

Əsas diqqətini hazırlanan məzmuna qoymaq üçün Waverly-nin maddi mövzusu qaranlıq bir mövzudur. Yalnız istifadəçi interfeysinin əksəriyyətinin düymələr kimi işlək elementləri göstərmək üçün açıq rəngli rənglərlə qaranlıq olması deməkdir. Məşğul Waverly vəziyyətində tünd boz kontekst ağır bir mühitdə iyerarxiyanı təmin etmək üçün parlaq narıncı rəngini vurğulayır.

$ mdc-theme-primary: # FE8A00; $ mdc-theme-primary: # 003db8;

Qaranlıq bir "temanın" qaranlıq bir "rejim" dən fərqli olduğunu qeyd etmək vacibdir. Qaranlıq bir rejim müəyyən bir hərəkət edən bir istifadəçi tərəfindən aktivləşdirilir, qaranlıq bir mövzu marka rənglərinə və ya digər amillərə əsaslanan mövzuya xasdır.

İncəsənət

Waverly'nin müasir marka xüsusiyyəti, Buenos Airesin Montserrat məhəlləsində yaşayan Julieta Ulanovskinin yaratdığı yazı tipi Montserrat ilə ifadə edilir. Montserrat, ilk baxışdan Gotham kimi bir şriftə bənzəsə də, geniş məktub formaları və cəsur konturları ilə, "markalı şriftlər" kimi tanınan çağdaş fenomenlə bir çoxlarının şəxsiyyətlərinə yol açan yuvarlaq bir dostluqla qarışıq bir şəkildə qarışır. Məhsullar tapıldı.

$ mdc-typography-font-family: sitat ("Montserrat, sans serif"); $ mdc-typography-styles-button: (şrift ölçüsü: 14px, şrift ölçüsü: 600, hərf aralığı: 0.05em,); Gestalten

Bu xüsusi nümunədə, Waverly bir forma göstərmək üçün heç bir konturu və ya çərçivəsi olmayan bir material mətn düyməsini istifadə edir. Görünən bir forma olmasa da, bir istifadəçi qarşılıqlı əlaqədə olduqda (məsələn, siçan göstəricisini hərəkət etdirərək və ya vuraraq) bir düymə bir düymənin sərhədlərini və formasını görə bilər. Waverly'nin forma tarixi yumşaq bir şəkildə danışılır və tanış olan əsas material formasını istifadə edərək müasir və çalışqan xüsusiyyətlərinə xitab edir.

$ mdc-şekil-kiçik-komponent-radius: (4px);

Material dizaynı + glitch

Material Design, hər kəsin daha sürətli gözəl məhsullar istehsal etməsini istəyər. Açıq mənbə komponentlərimiz tikintiyə başlamaq üçün lazım olan hər şeyi təklif edir. Glitch, brauzerdə zənginləşdirməyi asanlaşdırır və oyunlar vasitəsilə öyrənməyə ilham verir. Hər kəsi və hər kəsi, əvvəllər heç vaxt kodlaşdırılmasa da, öz düymələrini və mövzularını yaratmaq üçün bu nümunələri remiks etmələrini tövsiyə edirik.

Remix edin və nə etdiyinizi paylaşın! glitch.com/@material