Materyal 3 Etkileyici tasarım dili
Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Material 3 Expressive (M3), kullanıcıların modern, alakalı ve farklı deneyimler talebini karşılamak için geliştirildi. Expressive, tasarımcıların arayüzün düzeninde ve sunumunda belirli duyguları ve hisleri yansıtmasına da olanak tanır.
Renk ve tipografi
Renk sistemi, M3'ün daha derin ton paletlerini ve daha geniş bir jeton setini benimseyecek şekilde genişletiliyor. Daha basit tipografi ölçeği ise daha fazla ifade için değişken yazı tipi eksenlerinden yararlanarak etkileşimleri daha etkileyici ve keyifli hale getiriyor.
Renk teması
Yeni jetonlar, farklı temalarda ve tasarım sisteminin tamamı bağlamında daha fazla renk uygulanmasına olanak tanır.
Değişken yazı tipleri
Değişken yazı tipleri ve bunların özelleştirilebilir eksenleriyle ilgili güncellenen hususlar, benzer bir değişken eksen grubuna sahip olan Roboto Flex gibi 3. taraf kullanım alanlarına da hizmet etmek için 1. tarafın ötesine geçer.
Hareket hâlindeki değişken yazı tipi ekseni
İfadeli hareket geri bildirimi sinyali vermek için değişken yazı tipi eksenini kullanma ve etkileşimleri daha etkileyici ve keyifli hale getirme.
Örnek kullanım alanları:
- Dinamik yazı tipi kalınlığı
- Dinamik yazı tipi genişliği
- Dinamik yazı tipi kalınlığı ve genişliği
Rolleri yazma
Güncellenmiş ve optimize edilmiş bir tür ölçeğinin yanı sıra Wear'daki önemli desenlere özel olarak hizmet eden yeni tür rolleri de kullanıma sunuyoruz.
Bu yeni tür rolleri, altyazılar için Arc Text, canlı alanla proaktif içerik ve özellikle rakamlar için bir tür rolü gibi çeşitli kullanım alanlarını destekler. Bu roller, yerelleştirilmesi gerekmeyen dizeler için daha büyük ve daha stilize edilmiş metin boyutlarına olanak tanır.
Şekil ve hareket
Ayrıca, şekil dönüştürme listelerini ve düğme durumlarını desteklemek için köşe yarıçapının yuvarlatılmasını ve keskinleştirilmesini uygulamak üzere esnek kapsayıcı şekiller kullanarak şekil dilini çok daha kapsamlı ve anlamlı bir şekilde kullanıyoruz. Wear'daki yuvarlak cihazlar için yeni, kendine özgü ve ikonik bir tasarım modeli olarak kenarlara yakın düğmeleri kullanıma sunuyoruz.
Kenara yaslanan kapsayıcılar
Yuvarlak şekilleri destekleyen ve dairesel form faktöründeki alanı en üst düzeye çıkaran şekil kapsayıcılar kullanıma sunuluyor.
Şekil uygulandı
Köşe yarıçapını ve benzersiz şekilleri, etkileyici tasarımları desteklemek için kapsayıcı olarak kullanma
—keyifli yükleme animasyonları, ilgi çekici düzenler, şekil değiştirme
düğmeleri ve uyarlanabilir düğme grupları da dahil.
Köşe yarıçapı
Çeşitlilik, farklılık ve kapsayıcı şekiller arasında ilişki sağlamak için Material 3 köşe şekillerini kullanma.
Gruplandırılmış kapsayıcılar
Bileşen kapsayıcıları, mevcut alana dinamik olarak uyum sağlamak için esnek düzen tekniklerini kullanır. Bu alanı simetri için eşit şekilde dağıtabilir veya görsel hiyerarşi oluşturmak, önemli içeriği vurgulamak ve kullanıcı etkileşimini ifadeye dayalı ve harekete yönlendiren görsel ipuçlarıyla yönlendirmek için öğeleri stratejik olarak düzenleyebilirler.
Bu sayfadaki içerik ve kod örnekleri, İçerik Lisansı sayfasında açıklanan lisanslara tabidir. Java ve OpenJDK, Oracle ve/veya satış ortaklarının tescilli ticari markasıdır.
Son güncelleme tarihi: 2025-07-27 UTC.
[null,null,["Son güncelleme tarihi: 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"]]
