Bir Malzeme Düğmesi Bir Düğmeden Daha Fazlasıdır

Materyal Tasarımı temasını kullanarak düğmeleri nasıl stillendirir (ve ayırt eder)

Material Design kısa süre önce UI bileşenlerini Material Theming kullanarak şekillendirmenin ne kadar kolay olduğunu göstermek için güncellenmiş şekil rehberliği, araçlar ve vaka çalışmaları yayınladı. Yeni şekil sisteminin tema yeteneklerini daha iyi göstermek için, Glitch'teki Web için Malzeme Bileşenlerini kullanarak çeşitli temalarda Canlı Düğme Düğmeleri örnekleri oluşturduk. Glitch, herkesin (hatta sizin) bu düğme örneklerini remikslemesine ve kod kullanarak ifade potansiyellerini gerçekleştirmelerine izin verir. Özet olarak, aşağıdaki düğme örnekleri, çok farklı görsel sonuçlar elde etmek için Materyal Temaları içindeki aynı atasöz topuzları döndürün. Sadece dijital alanda gittikçe daha fazla marka bulunduğundan, temalı bileşenler artık kullanıcıların markanızla olan ilişkilerinde bir logo kadar önemli.

Glitch üzerindeki her düğmeye, çiçek teslimat hizmeti veya podcast uygulaması gibi kurgusal bir marka veya ürünü yansıtacak şekilde tema verilmiştir. Bu kılavuz, her bir düğmenin temasını marka ve Malzeme Rengi, Tip ve Şekil sistemleri açısından yapıştıracaktır.

Materyal DIY - Düğmelerin .readme dosyasında bu düğmelerin nasıl kendinize karıştırılacağını öğrenin.

Synergee

Meditasyon rehberlik uygulaması

Synergee, dokunsal teknoloji ve diğer görsel olmayan araçlarla meditasyon yolculuklarında kullanıcıları yönlendiren bir meditasyon rehberlik uygulamasıdır. Synergee’nin markası aşağıdaki özelliklere sahiptir: parlak, mütevazı ve sofistike.

Renk

Açık ve koyu mavilerin kullanılması Synergee’nin markasına hükmediyor ve parlak ve mütevazı özellikleriyle konuşuyor. Gökyüzüne bakma hissini çoğaltarak, renkler hoş karşılanan bir aşinalık ifade eder.

$ mdc-temalı-birincil: # ded7ff;
birincil olarak $ mdc-tema: # 003db8;

tip

Synergee, sofistike marka özelliğini Cadson Demak'ın yarattığı Tayca ve Latince bir yazı tipi olan K2D'yi kullanarak ifade ediyor. K2D, içsel olarak yuvarlak ve “loopy” olan geleneksel Tayland harf biçimlerini içerir. Latin alfabesi ve Tay abugida'nın tasarım özelliklerinin benzersiz ve heyecan verici bir şey haline nasıl getirildiğini görmek çok güzel.

$ mdc-tipografi-yazı tipi ailesi: unquote ("K2D, sans-serif");
$ mdc-tipografi-stilleri-düğmesi: (
 yazı tipi boyutu: 14 piksel,
 yazı tipi ağırlığı: 500,
 harf aralığı: 0,05em,
);

şekil

Synergee’nin parlak marka niteliği, temanın bir ileri dostluk ve iyimserlik duygusu ifade etmesi gerektiğini belirtir. Bunu ifade etmek için, Synergee’nin şekil sistemi, düğmeler gibi tamamen yuvarlak olan küçük bileşenlerle yoğun şekilde yuvarlanır.

$ mdc-şekli-küçük-bileşen-yarıçapı: (24px);

Kırmızı güller

Çiçek teslimat hizmeti

Kırmızı Güller, aşağıdaki marka özelliklerini verme ve somutlaştırma yoluyla pozitifliği destekleyen bir çiçek teslimat hizmetidir: doğal, neşeli ve zarif.

Renk

Renk sistemi, güllerin doğallığı ile konuşan kırmızı tonları kullanır ve farklı bileşenler arasında kontrast oluşturmayı kolaylaştırır. Düğmeler, varsayılan olarak Malzeme Temanızın ana rengini kullanır.

$ mdc-temalı-birincil: # b31839;
birincil olarak $ mdc-theme-#ffffff;

tip

Kırmızı Güller teması, Google Fonts'ta bulunan hümanist bir sans yazısı olan Cabin kullanıyor; Kabin mektup formları, Red Roses'in doğal ve zarif marka özelliklerine hitap eden yuvarlak ve keskin ana hatların bir kombinasyonuna sahiptir. (Kabin, London Underground’ın “Underground Alphabet” ından ilham alan Gill Sans’ten ilham alır).

$ mdc-tipografi-yazı tipi ailesi: unquote ("Kabin, sans-serif");
$ mdc-tipografi-stilleri-düğmesi: (
 yazı tipi boyutu: 14 piksel,
 yazı tipi ağırlığı: 500,
 harf aralığı: 0,05em,
);

şekil

Red Roses’in şekli sistemi, çiçek yapraklarını taklit ederek hem neşeli hem de doğal marka özelliklerini ifade ediyor. Bu düğme için alternatif yarıçaplar (im) floranın ve doğal dünyanın kusursuzluğunu yansıtır; renk ile birlikte, bu şekil güçlü bir görsel etki yaratır.

$ mdc-şekli-küçük-bileşen-yarıçapı: (4px 12px 4px 12px);

Bitti!

Görev yönetimi uygulaması

Bitti! kullanıcıların görevlerini dağıtmalarını engellemek için hızlı ve kompakt deneyimler vurgulayan bir görev yönetimi uygulamasıdır. Bitti! marka aşağıdaki özelliklere sahiptir: profesyonel, hızlı ve özlü.

Renk

Done! 'In profesyonel ve basit marka öznitelikleriyle konuşmak için, tema beyaz ve oldukça nötr mavi olan muhafazakar bir palet kullanır. Ek olarak, dikkat dağınıklığını en aza indirmek ve hızı artırmak için, Bitti! 'Nin düğmeleri gölge kullanmaktan kaçınır.

$ mdc-temalı-birincil: # 5973bf;
birincil olarak $ mdc-theme-#ffffff;

tip

Sert yazı tipi Libre Franklin, Done! 'In muhafazakar renk paletinin aksine, cesur ve güvenilir bir şekilde duruyor. Libre Franklin, genellikle gazete manşetleri veya reklam panoları için kullanılan Franklin Gotik yazı tipinin genişlemesidir; Libre Franklin’in işletme benzeri niteliklerini Bitti! düğmesinin bağlamında görmek kolaydır.

$ mdc-tipografi-yazı tipi ailesi: unquote ("Libre Franklin, sans-serif");
$ mdc-tipografi-stilleri-düğmesi: (
 yazı tipi boyutu: 14 piksel,
 yazı tipi ağırlığı: 500,
 harf aralığı: 0.02em,
 metin dönüşümü: büyük harf kullanımı,
);

şekil

Yapılan şekillendirme sistemi, kavisli veya açılı köşelerin görsel ağırlığını eklemekten kaçınarak, markanın hız ve özlülüğüyle konuşuyor.

$ mdc şeklinde küçük bileşen yarıçapı: (0 piksel);

Moodie

Mood yüzük uygulaması

Moodie biyometrik veri toplayarak ruh halinizi belirleyen gizemli bir ruh hali halkası uygulaması. Markası aşağıdaki marka özelliklerine sahiptir: gizemli, teknik ve keyifli.

Renk

Moodie’in gizemli ve teknik marka özellikleri, genellikle vintage bilgisayar sistemleri ve grafikleriyle ilişkilendirilen “terminal” yeşilini kullanan markalarla karakterizedir. Yaygın olarak kullanılan arabirimlerin aksine, Moodie’nin renk kullanımı büyük ölçüde belirsiz anlatılara değinerek markalara hitap ediyor ve bir ruh halini taklit eden renk değiştiren büyünün temelini oluşturuyor.

$ mdc-teması-birincil: # 009b3b;
birincil olarak $ mdc-tema: # 003db8;

tip

IBM Plex Mono, Moodie’nin teknik marka özelliğini, renk sistemine benzer şekilde abartıyor; bir monospace fontunun kullanılması, Moodie’nin ürünüyle ilgili teknik özelliklere işaret eder. IBM Plex Mono, gizemli ve keyifli bir harekete geçirme ifadesi ile birlikte, uzaylı bir şeye işaret ederek alt metne göre hareket eder.

$ mdc-tipografi-yazı tipi ailesi: unquote ("IBM Plex Mono, sans serif");
$ mdc-tipografi-stilleri-düğmesi: (
 yazı tipi boyutu: 14 piksel,
 yazı tipi ağırlığı: 600,
 harf aralığı: 0,05em,
);

şekil

Belirsizlik temalarına devam eden Moodie’nin şekil hikayesi, ürünün arkasındaki ‘gizemli’ teknolojisinin çarpık ama eğlenceli bir görünümünü tekrar ifade etmek için yumuşak ve sert, yuvarlak ve keskin alanlara odaklanmaktadır.

$ mdc şeklinde-küçük bileşenli yarıçap: (8 piksel);

Waverly

Podcast akış uygulaması

Waverly, podcast'ler, makaleler, videolar veya müzik gibi tek bir konunun etrafındaki farklı içerik türleri için çalma listelerinin odaklanmasına odaklanan bir podcast akış hizmetidir. Waverly aşağıdaki marka özelliklerini içerir: çalışkan, çağdaş ve küratörlü.

Renk

Birincil odağı küratörlü içeriğe yerleştirmek için, Waverly’nin Materyal Teması koyu renkli bir temadır; bu, UI’nın çoğunluğunun, düğmeleri gibi harekete geçirilebilir öğeleri belirtmek için açık renk tonlarıyla koyu renk olduğu anlamına gelir. Çalışkan Waverly'de koyu gri, bağlam ağır bir ortamda hiyerarşisini sağlamak için parlak bir turuncuya vurgu yapar.

$ mdc-temalı-birincil: # FE8A00;
birincil olarak $ mdc-tema: # 003db8;

Karanlık bir “temanın” karanlık bir “moddan” farklı olduğunu belirtmek önemlidir. Karanlık mod belirli bir eylem gerçekleştirerek bir kullanıcı tarafından açılırken, karanlık bir tema marka renklerine veya diğer faktörlere dayalı temaya özgüdür. .

tip

Waverly’nin çağdaş marka özelliği, Buenos Aires’in Montserrat mahallesinde yaşayan Julieta Ulanovsky’nin yarattığı bir yazı tipi olan Montserrat kullanılarak ifade edildi. İlk bakışta Gotham gibi bir yazı tipine ilk bakışta benzer olmasına rağmen, geniş yazı biçimleri ve koyu renkli ana hatları ile Montserrat, birçok ürünün kimliğine girmiş yuvarlak bir dostu olan “marka yazı tipleri” olarak bilinen çağdaş olguya kolayca uyuyor.

$ mdc-tipografi-yazı tipi ailesi: unquote ("Montserrat, sans-serif");
$ mdc-tipografi-stilleri-düğmesi: (
 yazı tipi boyutu: 14 piksel,
 yazı tipi ağırlığı: 600,
 harf aralığı: 0,05em,
); Şekil

Bu özel örnekte, Waverly, bir şekli belirtecek anahat veya kutunun olmadığı bir Malzeme metni düğmesini kullanıyor. Görünür bir şekil olmamasına rağmen, etkileşimin üzerine (bir imleçle gezmek veya dokunarak), kullanıcı bir düğmenin sınırlarını ve şeklini görebilir. Waverly’nin şekil hikayesi yumuşaktır ve Materyal’in tanıdık taban çizgisi şeklinden yararlanarak çağdaş ve çalışkan nitelikleriyle konuşur.

$ mdc şeklinde-küçük bileşenli yarıçap: (4 piksel);

Malzeme Tasarımı + Glitch

Materyal Tasarımı, herkesin daha hızlı ve güzel ürünler üretmesini istiyor. Açık kaynaklı bileşenlerimiz, inşaata başlamak için ihtiyacınız olan her şeyi size sunar. Glitch, doğrudan tarayıcıya göz atmayı ve oyun yoluyla öğrenmeyi teşvik etmeyi kolaylaştırır. Daha önce hiç kodlamamış olsalar bile, herkesi ve herkesi bu örnekleri remikslemek için kendi düğmelerini ve kendi temalarını oluşturmak için teşvik ediyoruz.

Remix'i ve yaptıklarınızı paylaşın!
glitch.com/@material