Guzik materiału to coś więcej niż guzik

Jak stylizować (i różnicować) przyciski za pomocą motywów Material Design

Firma Material Design opublikowała niedawno zaktualizowane wytyczne dotyczące kształtu, narzędzia i studia przypadków, aby pokazać, jak łatwo jest stylizować komponenty interfejsu użytkownika za pomocą Material Theming. Aby jeszcze bardziej zilustrować możliwości tematyczne nowego systemu kształtów, stworzyliśmy na żywo przykłady Przycisków Materiałów w różnych tematach, używając Materiałowych Składników do Sieci na Glitch. Glitch pozwala każdemu (nawet tobie) zremiksować te przykłady przycisków i wykorzystać ich ekspresyjny potencjał za pomocą kodu. W skrócie, poniższe przykłady przycisków przekręcają te same przysłowiowe pokrętła w Material Theming, aby osiągnąć bardzo różne efekty wizualne. Ponieważ coraz więcej marek istnieje wyłącznie w przestrzeni cyfrowej, komponenty tematyczne są teraz równie ważne jak logo w relacjach użytkowników do Twojej marki.

Każdy przycisk w Glitch został zaprojektowany w sposób odzwierciedlający fikcyjną markę lub produkt, taki jak usługa dostarczania kwiatów lub aplikacja do podcastów. Ten przewodnik rozszyfruje motyw każdego przycisku pod względem marki oraz systemów kolorów, typów i kształtów materiałów.

Materiał na majsterkowanie - dowiedz się, jak samodzielnie zremiksować te przyciski w pliku .readme przycisku.

Synergee

Aplikacja do medytacji

Synergee to aplikacja do prowadzenia medytacji, która prowadzi użytkowników przez podróże medytacyjne za pomocą technologii haptycznej i innych środków nie wizualnych. Marka Synergee ma następujące atrybuty: jasny, skromny i wyrafinowany.

Kolor

Zastosowanie jasnego i ciemnego błękitu dominuje markę Synergee i przemawia do jej jasnych i skromnych atrybutów. Odwzorowując wrażenie patrzenia w niebo, kolory wyrażają pewną swojskość, która jest przyjemnie przyjazna.

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

Rodzaj

Synergee wyraża swój wyrafinowany atrybut marki za pomocą K2D, tajskiego i łacińskiego kroju pisma stworzonego przez Cadson Demak. K2D zawiera tradycyjne tajskie litery, które z natury są okrągłe i „zapętlone”, fajnie jest zobaczyć, jak cechy projektowe alfabetu łacińskiego i tajskiej abugidy zostały przekształcone w coś wyjątkowego i ekscytującego.

$ mdc-typography-font-family: unquote („K2D, sans-serif”);
Przycisk $ mdc-typography-styles-style: (
 rozmiar czcionki: 14px,
 waga czcionki: 500,
 odstępy między literami: 0,05 em,
);

Kształt

Jasny atrybut marki Synergee wskazuje, że motyw powinien wyrażać poczucie życzliwości i optymizmu. Aby to wyrazić, system kształtów Synergee jest mocno zaokrąglony, a małe elementy, takie jak przyciski, są całkowicie okrągłe.

$ mdc-shape-small-component-radius: (24px);

Czerwone róże

Dostawa kwiatów

Red Roses to usługa dostarczania kwiatów, która promuje pozytywność poprzez dawanie i ucieleśnia następujące atrybuty marki: naturalne, radosne i eleganckie.

Kolor

System kolorów wykorzystuje odcienie czerwieni, które mówią o naturalności róż i ułatwiają tworzenie kontrastu między różnymi elementami. Przyciski domyślnie używają podstawowego koloru motywu materiału.

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

Rodzaj

Motyw Red Roses używa czcionki Cabin, humanistycznej czcionki bez czcionek znalezionej w czcionkach Google; Formy kabinowe mają kombinację okrągłych i ostrych konturów, które nawiązują do naturalnych i eleganckich atrybutów marki Red Roses. (Kabina czerpie inspirację z Gill Sans, zainspirowanego „Underground Alphabet” londyńskiego metra).

$ mdc-typography-font-family: unquote („Cabin, sans-serif”);
Przycisk $ mdc-typography-styles-style: (
 rozmiar czcionki: 14px,
 waga czcionki: 500,
 odstępy między literami: 0,05 em,
);

Kształt

System kształtów czerwonych róż mówi zarówno do radosnych, jak i naturalnych atrybutów marki, naśladując płatki kwiatów. Naprzemienne promienie tego przycisku odzwierciedlają (nie) doskonałość flory i świata przyrody; w połączeniu z kolorem ten kształt zapewnia silny efekt wizualny.

$ mdc-shape-small-component-radius: (4px 12px 4px 12px);

Gotowy!

Aplikacja do zarządzania zadaniami

Gotowy! to aplikacja do zarządzania zadaniami, która kładzie nacisk na szybkie, kompaktowe wrażenia, aby umożliwić użytkownikom wykonywanie zadań bez rozpraszania uwagi. Gotowe! marka ma następujące atrybuty: profesjonalny, szybki i zwięzły.

Kolor

Aby porozmawiać z profesjonalnymi i prostymi atrybutami marki Done!, Motyw wykorzystuje konserwatywną paletę złożoną z bieli i dość neutralnego niebieskiego. Dodatkowo, aby zminimalizować rozproszenie i szybkość ekspresu, przyciski Gotowe! Nie zawierają cienia.

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

Rodzaj

Sztywny krój Libre Franklin odważnie i niezawodnie kontrastuje z konserwatywną paletą kolorów Done! Libre Franklin to rozwinięcie gotyckiego kroju Franklin, który był często używany w nagłówkach gazet lub na billboardach; łatwo jest zobaczyć biznesowe cechy Libre Franklin w kontekście przycisku Gotowe!

$ mdc-typography-font-family: unquote („Libre Franklin, sans-serif”);
Przycisk $ mdc-typography-styles-style: (
 rozmiar czcionki: 14px,
 waga czcionki: 500,
 odstępy między literami: 0,02 em,
 transformacja tekstu: wielkie litery,
);

Kształt

Gotowy system kształtów mówi o szybkości i zwięzłości marki, powstrzymując się od dodawania wizualnej masy zakrzywionych lub kątowych narożników.

$ mdc-shape-small-component-radius: (0px);

Moodie

Aplikacja Ring nastroju

Moodie to tajemnicza aplikacja z pierścieniem nastroju, która określa nastrój na podstawie danych biometrycznych. Jego marka ma następujące atrybuty: tajemniczy, techniczny i zachwycający.

Kolor

Tajemnicze i techniczne atrybuty marki Moodie charakteryzują użycie przez marki „terminalowej” zieleni, często kojarzonej ze starymi systemami komputerowymi i grafiką. W przeciwieństwie do najpopularniejszych interfejsów, użycie koloru Moodie przemawia głównie do niejednoznacznej narracji marek i służy jako podstawa zmieniającej kolory magii naśladowania pierścienia nastroju.

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

Rodzaj

IBM Plex Mono przesadza techniczny atrybut marki Moodie w podobny sposób jak jego system kolorów; użycie czcionki o jednolitej przestrzeni wskazuje na kwestie techniczne związane z produktem Moodie. W połączeniu z tajemniczym i uroczym wezwaniem do działania IBM Plex Mono działa subtekstowo, sugerując coś obcego.

$ mdc-typography-font-family: unquote („IBM Plex Mono, sans-serif”);
Przycisk $ mdc-typography-styles-style: (
 rozmiar czcionki: 14px,
 waga czcionki: 600,
 odstępy między literami: 0,05 em,
);

Kształt

Kontynuując wątki dwuznaczności, historia kształtów Moodie koncentruje się na przestrzeni między miękką i sztywną, okrągłą i ostrą, aby ponownie wyrazić zniekształcony, ale zabawny pogląd na „tajemniczą” technologię kryjącą się za produktem.

$ mdc-shape-small-component-radius: (8px);

Waverly

Aplikacja do przesyłania strumieniowego podcastów

Waverly to usługa przesyłania strumieniowego podcastów, która koncentruje się na tworzeniu list odtwarzania dla różnych rodzajów treści na jeden temat, takich jak podcasty, artykuły, filmy lub muzyka. Waverly ucieleśnia następujące atrybuty marki: pracowity, współczesny i kurator.

Kolor

Aby skoncentrować się na wyselekcjonowanych treściach, motyw materiału Waverly jest ciemnym motywem, co oznacza po prostu, że większość interfejsu użytkownika jest ciemna z akcentami jasnego koloru, aby wskazać elementy możliwe do działania, takie jak przyciski. W pracowitym przypadku Waverly, ciemnoszary podkreśla jasnopomarańczowy, aby zapewnić jego hierarchię w trudnych warunkach.

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

Należy zauważyć, że ciemny „motyw” różni się od ciemnego „trybu”. Użytkownik może włączyć ciemny tryb, wykonując określone działanie, natomiast ciemny motyw jest nieodłączny od motywu opartego na kolorach marki lub innych czynnikach .

Rodzaj

Współczesny atrybut marki Waverly wyraża się za pomocą Montserrat, kroju pisma stworzonego przez Julietę Ulanovsky, mieszkającą w dzielnicy Montserrat w Buenos Aires. Choć na pierwszy rzut oka jest podobny do kroju pisma takiego jak Gotham, z szerokimi literami i pogrubionymi konturami, Montserrat doskonale wpasowuje się we współczesne zjawisko znane jako „kroje markowe” z zaokrągloną przyjaznością, która znalazła swoje odzwierciedlenie w tożsamości wielu produktów.

$ mdc-typography-font-family: unquote („Montserrat, sans-serif”);
Przycisk $ mdc-typography-styles-style: (
 rozmiar czcionki: 14px,
 waga czcionki: 600,
 odstępy między literami: 0,05 em,
);Kształt

W tym konkretnym przykładzie Waverly używa przycisku Tekst materiału, w którym nie ma konturu ani ramki wskazującej kształt. Chociaż nie ma widocznego kształtu, po interakcji (takiej jak najechanie kursorem lub stuknięcie) użytkownik może zobaczyć granice przycisku i jego kształt. Historia kształtu Waverly jest łagodna i przemawia do jej współczesnych i pracowitych atrybutów, wykorzystując znajomy podstawowy kształt Materiału.

$ mdc-shape-small-component-radius: (4px);

Material Design + Glitch

Material Design chce, aby każdy mógł szybciej tworzyć piękne produkty. Nasze komponenty open source zapewniają wszystko, czego potrzebujesz, aby zacząć budować. Glitch ułatwia majsterkowanie bezpośrednio w przeglądarce, inspirując do nauki poprzez zabawę. Zachęcamy każdego i wszystkich do remiksowania tych przykładów, aby stworzyć własne przyciski i własne motywy, nawet jeśli nigdy wcześniej nie kodowali.

Remiksuj i udostępniaj swoje dzieła!
glitch.com/@material