Sistem desain adalah kumpulan keputusan desain yang dapat digunakan kembali yang dinyatakan sebagai panduan, komponen, dan pola. Sistem dapat dibagi menjadi primitif desain terkecil: hal-hal seperti warna, jenis, atau bentuk yang menjadi bagian komponen yang lebih besar. Misalnya, ikon dan label teks membentuk komponen tombol, sedangkan beberapa tombol dan permukaan membentuk kartu. Sistem desain juga dilengkapi dengan serangkaian panduan yang terdiri dari keputusan desain yang sudah ada seputar komponen dan pola.
Desain Material adalah sistem desain open source yang dikembangkan oleh Google untuk membantu Anda membuat produk yang menarik dan berfokus pada pengguna. Material 3 adalah iterasi terbaru dari Desain Material.
Komponen Desain Material
Desain Material menyediakan array komponen yang didukung kode yang merupakan elemen penyusun interaktif untuk membuat antarmuka pengguna. Komponen ini dapat diatur ke dalam lima kategori berdasarkan tujuannya: tindakan, containment, navigasi, pilihan, dan input teks.
Komponen tindakan
Komponen tindakan membantu orang mencapai suatu tujuan.
Material memiliki beberapa jenis tombol untuk membantu menentukan prioritas tindakan dan interaksi dalam konteks yang berbeda. Mulai dari FAB atau FAB yang diperluas untuk tindakan utama hingga mendukung tombol ikon hingga memilih opsi dengan tombol tersegmentasi.
Komponen komunikasi
Komponen komunikasi memberikan informasi yang berguna, dengan memberi tahu badge kepada pengguna, menginformasikan status melalui indikator progres, dan memberikan pesan proses singkat dengan snackbar.
Komponen penahanan
Komponen containment menyimpan informasi dan tindakan – termasuk komponen lain seperti tombol, menu, atau chip. Sebagian besar komponen Material menggunakan pemuatan eksplisit, mengelompokkan konten dan tindakan terkait dengan objek visual: kartu, dialog, sheet bawah, sheet samping, carousel, dan tooltip. Daftar dapat diberikan dengan containment implisit atau eksplisit dengan menampilkan pembagi yang terlihat. Komponen ini memberikan pola umum untuk menampilkan kelompok konten.
Komponen navigasi
Komponen navigasi membantu orang berpindah melalui UI. Untuk seluler, menu navigasi atau panel navigasi berisi tujuan navigasi utama Anda. Tab, panel aplikasi bawah, dan panel aplikasi atas menyediakan cara yang berbeda untuk menavigasi informasi dan tindakan pendukung. Baca selengkapnya tentang cara menggunakan navigasi dalam tata letak Anda.
Komponen pilihan
Komponen pilihan memungkinkan orang menentukan pilihan. Baik membuat formulir dengan kotak centang maupun tombol pilihan, memfilter menggunakan chip, atau mengalihkan setelan dengan tombol dan penggeser, komponen pemilihan memungkinkan pengguna mengontrol dan memasukkan keputusan mereka.
Komponen input teks
Komponen input teks memungkinkan orang memasukkan dan mengedit teks. Kolom teks memungkinkan pengguna memasukkan teks ke dalam UI.
Sistem desain untuk Compose
Baca Sistem desain di Compose untuk mengetahui detail tentang cara menggunakan Compose untuk menerapkan sistem desain dengan lebih lancar serta memberi aplikasi Anda tampilan dan nuansa yang konsisten dengan tema, komponen, dan aspek sistem desain lainnya.