Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Ekspresif Material 3 mengandalkan bahasa bentuk dengan cara yang jauh lebih luas dan bermakna dengan memanfaatkan bentuk penampung fleksibel untuk menerapkan pembulatan dan penajaman radius sudut guna mendukung daftar pengubahan bentuk dan status tombol.
Sistem desain ini juga memperkenalkan tombol yang menempel di tepi sebagai pola desain yang dapat dimiliki dan ikonik untuk perangkat Wear OS berbentuk bulat.
Mempertahankan penskalaan elemen UI
Saat mendesain tata letak di layar bulat, tampilan yang dapat di-scroll dan tidak dapat di-scroll masing-masing memiliki persyaratan unik untuk mempertahankan penskalaan elemen UI dan mempertahankan tata letak dan komposisi yang seimbang.
Tampilan scroll
Untuk tampilan yang dapat di-scroll, gunakan persentase untuk menentukan semua margin atas, bawah, dan samping
guna menghindari pemangkasan dan memberikan penskalaan elemen yang proporsional.
Semua margin atas, bawah, dan samping harus ditentukan dalam persentase untuk menghindari pemangkasan dan memberikan penskalaan elemen yang proporsional.
Tampilan non-scroll
Untuk tampilan yang tidak dapat di-scroll, gunakan persentase dan batasan vertikal untuk semua
margin. Dengan begitu, konten utama di tengah dapat diregangkan untuk mengisi area yang tersedia.
Semua margin harus ditentukan dalam persentase dan batasan vertikal harus
ditentukan sehingga konten utama di tengah dapat direntangkan untuk mengisi
area yang tersedia.
Tingkatan pedoman kualitas
Pedoman kualitas kami disusun dalam tiga tingkat. Berikan pengalaman terbaik kepada pengguna Anda dengan memenuhi pedoman di ketiga tingkat.
Siap untuk semua ukuran layar
Pastikan aplikasi Anda memberikan pengalaman berkualitas di semua ukuran layar.
Buat tata letak yang sepenuhnya menggunakan ruang aplikasi yang tersedia.
Responsif dan dioptimalkan
Sampaikan lebih banyak konten kepada pengguna di perangkat yang memungkinkan hal tersebut, dan gunakan tata letak responsif yang otomatis menyesuaikan dengan berbagai ukuran layar.
Adaptif dan berbeda-beda
Manfaatkan real estate tambahan secara maksimal dengan menggunakan titik henti sementara untuk menawarkan pengalaman baru yang canggih di layar yang lebih besar yang tidak mungkin dilakukan di perangkat dengan layar yang lebih kecil.
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-26 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-26 UTC."],[],[],null,["# Design quality tiers\n\nMaterial 3 Expressive leans into shape language in a much more expansive and\nmeaningful way by utilizing flexible container shapes to apply rounding and\nsharpening of corner radii to support shape morphing lists and button states.\nThe design system also introduces edge-hugging buttons as an ownable and iconic\ndesign pattern for round devices on Wear OS.\n\nMaintain UI element scaling\n---------------------------\n\nWhen designing layouts on a round screen, scrolling and non-scrolling\nviews each have unique requirements to maintain UI element scaling and preserve\na balanced layout and composition.\n\n\n**Scrolling views**\n\nFor scrolling views, use percentages to define all top, bottom, and side\nmargins to avoid clipping and provide proportional scaling of elements.\n\nAll top, bottom, and side margins should be defined in percentages to avoid\nclipping and provide proportional scaling of elements. \n**Non-scrolling views**\n\nFor non-scrolling views, use percentages and vertical constraints for all\nmargins. That way, the main content in the middle can stretch to fill the\navailable area.\n\nAll margins should be defined in percentages and vertical constraints should be\ndefined such that the main content in the middle can stretch to fill the\navailable area.\n\n\u003cbr /\u003e\n\nTiers of quality guidelines\n---------------------------\n\nOur quality guidelines are organized into three tiers. Enable the best possible\nexperience for your users by meeting guidelines in all three tiers.\n\n\n**Ready for all screen sizes**\n\nEnsure your app is delivering a quality experience across all screen sizes.\nCreate layouts that fully use the available app space. \n\n**Responsive and optimized**\n\nDeliver more content to users on devices which allow for it, and utilize\nresponsive layouts that automatically adapt to different screen sizes. \n\n**Adaptive and differentiated**\n\nMake the most of additional real estate by utilizing breakpoints to offer\npowerful new experiences on larger screens which are not possible on devices\nwith smaller screens.\n\n\u003cbr /\u003e\n\n| **Caution:** A larger display size should *never* display less information than ones that are smaller than it, this is especially relevant for custom behaviors added in at the breakpoint. A common example of this is when components or text sizes are increased past the breakpoint and end up showing less are the larger screens. Screens should always show \"more value\" and never \"less value\" with increasing size."]]
