Bahasa desain Ekspresif Material 3
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Material 3 Ekspresif (M3) dibuat untuk memenuhi permintaan pengguna akan pengalaman yang modern, relevan, dan berbeda. Expressive juga memungkinkan desainer mencerminkan emosi dan perasaan tertentu dalam tata letak dan presentasi antarmuka.
Warna dan tipografi
Sistem warna diperluas untuk mengadopsi palet tone M3 yang lebih dalam dan set token yang lebih luas, serta skala tipografi yang lebih sederhana menggunakan sumbu font variabel untuk lebih banyak ekspresi, sehingga interaksi menjadi lebih ekspresif dan menyenangkan.
Tema warna
Token baru memungkinkan lebih banyak warna diterapkan di berbagai tema
dan dalam konteks sistem desain secara keseluruhan.
Font variabel
Pertimbangan yang diperbarui untuk font variabel dan sumbunya yang dapat disesuaikan,
tidak hanya berlaku untuk kasus penggunaan pihak pertama, tetapi juga untuk kasus penggunaan pihak ketiga seperti Roboto Flex, yang memiliki
serangkaian sumbu variabel serupa.
Sumbu font variabel dalam gerakan
Memanfaatkan sumbu font variabel untuk memberi sinyal umpan balik gerakan ekspresif dan membuat interaksi lebih ekspresif dan menyenangkan untuk digunakan.
Contoh kasus penggunaan:
- Ketebalan font dinamis
- Lebar font dinamis
- Ketebalan dan lebar font dinamis
Mengetik peran
Selain skala huruf yang diperbarui dan dioptimalkan, kami juga memperkenalkan peran huruf baru yang secara khusus melayani pola penting di Wear.
Peran jenis baru ini mendukung beberapa kasus penggunaan—termasuk Teks Busur untuk judul permukaan, konten proaktif dengan ruang live, dan peran jenis khusus untuk Angka—yang memungkinkan ukuran teks yang lebih besar dan lebih bergaya untuk string yang tidak perlu dilokalkan.
Bentuk dan gerakan
Kami juga mengandalkan bahasa bentuk dengan cara yang jauh lebih luas dan bermakna
dengan memanfaatkan bentuk penampung yang fleksibel untuk menerapkan pembulatan dan penajaman
radius sudut guna mendukung daftar dan status tombol yang berubah bentuk. Kami memperkenalkan tombol yang menempel di tepi sebagai pola desain baru yang dapat dimiliki dan ikonik untuk perangkat bulat di Wear.
Container yang menempel di tepi
Memperkenalkan penampung bentuk yang berbentuk bulat dan memaksimalkan ruang dalam faktor bentuk melingkar.
Bentuk diterapkan
Menggunakan radius sudut dan bentuk unik sebagai penampung untuk menerapkan desain ekspresif
—hingga animasi pemuatan yang menarik, tata letak yang menarik, tombol yang berubah bentuk, dan grup tombol adaptif.
Radius sudut
Memanfaatkan bentuk sudut Material 3 untuk memungkinkan variasi, perbedaan, dan hubungan antara bentuk penampung.
Penampung yang dikelompokkan
Penampung komponen menggunakan teknik tata letak fleksibel untuk beradaptasi secara dinamis dengan
ruang yang tersedia. Mereka dapat mendistribusikan ruang ini secara merata untuk simetri, atau
mengatur elemen secara strategis untuk menetapkan hierarki visual, menekankan
konten penting, dan memandu interaksi pengguna melalui isyarat visual
yang ekspresif dan memimpin gerakan.
Konten dan contoh kode di halaman ini tunduk kepada lisensi yang dijelaskan dalam Lisensi Konten. Java dan OpenJDK adalah merek dagang atau merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-07-27 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2025-07-27 UTC."],[],[],null,["# Material 3 Expressive design language\n\nMaterial 3 Expressive (M3) was built to meet user demand for experiences that\nare modern, relevant, and distinct. Expressive also allows designers to mirror\nspecific emotions and feelings in the layout and presentation of the interface.\n\nColor and typography\n--------------------\n\nThe [color system](/design/ui/wear/guides/styles/color/system) is expanding to adopt M3's deeper tonal palettes and a\nwider token set and the simpler typography scale is utilizing variable font axes\nfor more expression, making interactions more expressive and delightful.\n\n### Color theming\n\n\nThe [new tokens](/design/ui/wear/guides/styles/color/roles-tokens) allow for more color to be applied across different themes\nand in context of the design system as a whole. \n\n\u003cbr /\u003e\n\n### Variable fonts\n\n\nThe updated considerations for variable fonts and their customizable axis,\nextend beyond 1P to also serve 3P use cases such as Roboto Flex, which has a\nsimilar set of variable axis. \n\n\u003cbr /\u003e\n\n### Variable font axis in motion\n\n\nUtilizing variable font axis to signal expressive motion feedback and making\ninteractions more expressive and delightful to use.\n\nExample use-cases:\n\n- Dynamic font weight\n- Dynamic font width\n- Dynamic font weight and width \n\n\u003cbr /\u003e\n\n### Type roles\n\n\nAlong with an updated and optimized type scale, we are also introducing new type\nroles that specifically serve notable patterns on Wear.\n\nThese new type roles support several use cases---including Arc Text for surface\ntitles, proactive content with live space, and a type role specifically for\nNumerals---that allow for bigger and more styled text sizes for strings that don't\nneed to be localized. \n\n\u003cbr /\u003e\n\nShape and motion\n----------------\n\nWe are also leaning into shape language in a much more expansive and meaningful\nway by utilizing flexible container shapes to apply rounding and sharpening of\ncorner radius to support shape morphing lists and button states. We're\nintroducing edge-hugging buttons as a new ownable and iconic design pattern for\nround devices on Wear.\n\n### Edge-hugging containers\n\n\nIntroducing shape containers that embrace round and maximize the space within\nthe circular form factor. \n\n\u003cbr /\u003e\n\n### Shape applied\n\n\nUsing corner radius and unique shapes as containers to embrace expressive design\n---extending to delightful loading animations, interesting layouts, shape-morphing\nbuttons and adaptive button groups. \n\n\u003cbr /\u003e\n\n### Corner radius\n\n\nUtilizing Material 3 corner shapes to enable variety, distinction, and\nrelationship between container shapes. \n\n\u003cbr /\u003e\n\n### Grouped containers\n\n\nComponent containers use flexible layout techniques to dynamically adapt to\navailable space. They can distribute this space evenly for symmetry, or\nstrategically arrange elements to establish visual hierarchy, emphasize\nimportant content, and guide user interaction through expressive and motion-lead\nvisual cues. \n\n\u003cbr /\u003e"]]
