Butang Bahan Lebih Daripada Butang

Bagaimana dengan gaya (dan membezakan) butang menggunakan Reka bentuk Bahan tema

Reka bentuk Bahan baru-baru ini dibebaskan panduan bentuk, alat dan kajian kes dikemaskini untuk menunjukkan betapa mudahnya menggunakan komponen UI dengan menggunakan Material Theming. Untuk menggambarkan keupayaan menyusun sistem bentuk baharu, kami mencipta contoh langsung Bahan Butang dalam pelbagai tema menggunakan Bahan Komponen untuk Web pada Glitch. Glitch membolehkan sesiapa (walaupun anda) untuk mengemas semula contoh butang ini dan menyedari potensi ekspresif mereka menggunakan kod. Ringkasnya, contoh butang berikut memutar butang peribahasa yang sama dalam Material Theming untuk mencapai hasil visual yang jauh berbeza. Oleh kerana semakin banyak jenama wujud secara eksklusif dalam ruang digital, komponen bertema kini sama pentingnya dengan logo bagaimana pengguna berkaitan dengan jenama anda.

Setiap butang pada Glitch telah bertemakan untuk mencerminkan jenama atau produk fiksyen seperti perkhidmatan penghantaran bunga atau aplikasi podcast. Panduan ini akan menyusun semula setiap tema butang dari segi jenama dan sistem Warna, Jenis, dan Bentuk sistem.

Bahan DIY - Ketahui cara mengulang semula butang ini sendiri dalam fail .readme butang.

Synergee

Aplikasi bimbingan meditasi

Synergee adalah aplikasi panduan meditasi yang membimbing pengguna menerusi perjalanan meditasi melalui teknologi haptik dan cara bukan visual yang lain. Jenama Synergee mempunyai ciri-ciri berikut: terang, rendah hati, dan canggih.

Warna

Penggunaan blues cahaya dan gelap menguasai jenama Synergee dan bercakap dengan sifat yang cerah dan sederhana. Dengan mereplikasi perasaan memandang ke langit, warna-warna mengungkapkan keakraban tertentu yang terasa ramah.

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

Taipkan

Synergee mengekspresikan sifat jenamanya yang canggih melalui penggunaan K2D, taip Thai dan Latin yang dicipta oleh Cadson Demak. K2D merangkumi bentuk huruf Thai tradisional yang secara semula jadi bulat dan "berselubung," adalah keren untuk melihat bagaimana ciri-ciri reka bentuk abjad Latin dan abugida Thai telah berubah menjadi sesuatu yang unik dan menarik.

$ mdc-typography-font-family: unquote ("K2D, sans-serif");
$ mdc-typography-styles-button: (
 saiz fon: 14px,
 font-weight: 500,
 surat jarak: 0.05em,
);

Bentuk

Ciri-ciri jenama terang Synergee menetapkan bahawa tema itu harus meluahkan rasa persahabatan dan keyakinan ke hadapan. Untuk menyatakan ini, sistem bentuk Synergee sangat bulat dengan komponen kecil seperti butang yang sama sekali bulat.

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

Mawar merah

Perkhidmatan penghantaran bunga

Red Roses adalah perkhidmatan penghantaran bunga yang mempromosikan positif melalui tindakan memberikan dan merangkumi ciri-ciri jenama berikut: semula jadi, gembira, dan elegan.

Warna

Sistem warna menggunakan warna merah yang bercakap dengan keaslian mawar, dan memudahkan untuk membuat kontras antara komponen yang berbeza. Butang menggunakan warna utama Tema Bahan anda secara lalai.

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

Taipkan

Tema Red Roses menggunakan kabin, tafsiran humanis yang terdapat pada Google Font; Borang surat kabin mempunyai kombinasi bulat dan garis tajam yang bercakap dengan sifat jenama semula jadi dan elegan Red Roses. (Kabin mengambil inspirasi dari Gill Sans, yang diilhamkan oleh "Bawah Tanah Alphabet" London Underground).

$ mdc-typography-font-family: unquote ("Cabin, sans-serif");
$ mdc-typography-styles-button: (
 saiz fon: 14px,
 font-weight: 500,
 surat jarak: 0.05em,
);

Bentuk

Sistem bentuk Red Roses bercakap dengan sifat jenama gembira dan semulajadi dengan meniru kelopak bunga. Radiangan bergantian untuk butang ini mencerminkan kesempurnaan (im) flora dan dunia semula jadi; dalam kombinasi dengan warna, bentuk ini menghasilkan kesan visual yang kuat.

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

Selesai!

Aplikasi pengurusan tugas

Selesai! adalah aplikasi pengurusan tugas yang menekankan pengalaman yang cepat dan kompak untuk membolehkan pengguna menyelesaikan tugas mereka, bebas gangguan. Selesai! jenama mempunyai atribut berikut: profesional, cepat dan ringkas.

Warna

Untuk berbicara dengan sifat jenama profesional dan mudah Done!, Tema ini menggunakan palet konservatif yang terdiri daripada warna putih dan biru yang agak neutral. Di samping itu, untuk mengurangkan gangguan dan kelajuan ekspres, butang Selesai! Menjauhkan diri dari termasuk bayangan.

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

Taipkan

Tafsiran yang tegar Percuma Franklin berdiri tegak dan dipercayai berbeza dengan palet warna konservatif Done! Percuma Franklin adalah pengembangan jenis huruf Franklin Gothic, yang sering digunakan untuk tajuk berita atau papan iklan; adalah mudah untuk melihat kualiti perniagaan seperti Franklin dalam konteks Butang!.

$ mdc-typography-font-family: unquote ("Percuma Franklin, sans-serif");
$ mdc-typography-styles-button: (
 saiz fon: 14px,
 font-weight: 500,
 surat jarak: 0.02em,
 teks-transform: memanfaatkan,
);

Bentuk

Sistem bentuk siap bercakap dengan kelajuan dan ketepatan jenama dengan menahan diri daripada menambahkan berat visual sudut lengkung atau sudut sudut.

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

Moodie

App cincin Mood

Moodie adalah aplikasi cincin mood misteri yang menentukan mood anda dengan mengumpul data biometrik. Jenama mempunyai ciri-ciri jenama berikut: misteri, teknikal, dan menarik.

Warna

Ciri-ciri jenama misteri dan teknikal Moodie dicirikan oleh jenama menggunakan "terminal" hijau, sering dikaitkan dengan sistem komputer dan grafik vintaj. Berbeza dengan antara muka yang paling biasa, penggunaan warna Moodie bercakap secara besar-besaran untuk merek naratif samar-samar dan berfungsi sebagai asas untuk sihir mengubah warna meniru cincin mood.

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

Taipkan

IBM Plex Mono membesar-besarkan atribut jenama teknikal Moodie dengan cara yang sama dengan sistem warna; penggunaan font fon monospace pada teknik yang terlibat dengan produk Moodie. Bersama-sama dengan panggilan tindakan yang misteri dan menarik, IBM Plex Mono bertindak secara subteksual, membayangkan sesuatu yang asing.

$ mdc-typography-font-family: unquote ("IBM Plex Mono, sans-serif");
$ mdc-typography-styles-button: (
 saiz fon: 14px,
 font-weight: 600,
 surat jarak: 0.05em,
);

Bentuk

Berlanjut pada tema kekaburan, cerita bentuk Moodie memberi tumpuan kepada ruang antara lembut dan tegar, bulat dan tajam, sekali lagi menyuarakan pandangan yang menyimpang tetapi suka bermain tentang teknologi 'misteri' di sebalik produk.

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

Waverly

Aplikasi streaming podcast

Waverly adalah perkhidmatan streaming podcast yang memberi tumpuan kepada penguripan senarai main untuk pelbagai jenis kandungan di sekeliling topik tunggal seperti podcast, artikel, video, atau muzik. Waverly merangkumi ciri-ciri jenama berikut: rajin, kontemporari, dan curated.

Warna

Untuk meletakkan fokus utama pada kandungan yang dikodkan, Tema Bahan Waverly adalah tema gelap, yang hanya bermaksud majoriti UI berwarna gelap dengan aksen warna cahaya untuk menunjukkan unsur-unsur yang boleh dilukai, seperti butangnya. Dalam kes keras Waverly, kelabu gelap menyoroti oren terang untuk memastikan hierarki dalam persekitaran berat konteks.

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

Adalah penting untuk ambil perhatian bahawa "tema" gelap adalah berbeza daripada mod "gelap." Mod gelap dihidupkan oleh pengguna dengan melaksanakan tindakan tertentu, sementara tema gelap adalah tema yang berasaskan warna jenama atau faktor lain .

Taipkan

Atribut jenama kontemporari Waverly diungkapkan menggunakan Montserrat, sebuah taip huruf yang dicipta oleh Julieta Ulanovsky, penduduk kawasan Montserrat di Buenos Aires. Walaupun hanya sekadar pandangan yang serupa dengan jenis huruf seperti Gotham, dengan bentuk surat yang luas dan garis besar berani, Montserrat sangat sesuai dengan fenomena kontemporari yang dikenali sebagai "tipografi jenama" dengan keramahan yang bulat yang telah menemui identiti banyak produk.

$ mdc-typography-font-family: unquote ("Montserrat, sans-serif");
$ mdc-typography-styles-button: (
 saiz fon: 14px,
 font-weight: 600,
 surat jarak: 0.05em,
); Bentuk

Dalam contoh khusus ini, Waverly menggunakan butang Teks bahan di mana tidak ada garis besar atau kotak untuk menunjukkan bentuk. Walaupun tidak ada bentuk yang kelihatan, apabila interaksi (seperti melayang dengan kursor atau mengetik) pengguna dapat melihat batas butang dan bentuknya. Kisah bentuk Waverly lembut diucapkan dan bercakap kepada atribut kontemporari dan tegasnya dengan memanfaatkan bentuk baseline yang biasa Bahan.

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

Reka bentuk Bahan + Glitch

Reka bentuk Bahan mahu sesiapa sahaja dapat membina produk yang cantik, lebih cepat. Komponen sumber terbuka kami memberikan anda semua yang anda perlukan untuk memulakan bangunan. Glitch memudahkan untuk memulakan tinkering secara langsung dalam pelayar, belajar inspirasi melalui mainan. Kami menggalakkan sesiapa dan semua orang untuk mencipta semula contoh-contoh ini untuk membuat butang mereka sendiri dan tema mereka sendiri, walaupun mereka tidak pernah kod sebelumnya.

Remix dan kongsi apa yang anda buat!
glitch.com/@material