Responsif dan optimal
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Aplikasi yang responsif dan dioptimalkan menggunakan tata letak responsif yang
otomatis beradaptasi dengan berbagai ukuran layar, sehingga menawarkan beberapa nilai tambahan kepada
pengguna dan memberikan pengalaman pengguna yang produktif dan menarik.
Menambahkan nilai melalui desain responsif
Tata letak responsif secara dinamis memformat dan memosisikan elemen seperti tombol,
kolom teks, dan dialog untuk pengalaman pengguna yang optimal. Secara otomatis menawarkan
nilai tambahan kepada pengguna aplikasi Anda pada layar yang lebih besar dengan memanfaatkan praktik
desain responsif. Baik itu lebih banyak teks yang terlihat secara sekilas, lebih banyak tindakan di
layar, maupun target ketuk yang lebih besar dan lebih mudah diakses, praktik responsif memberikan
pengalaman yang lebih baik bagi pengguna dengan layar yang lebih besar.
Membangun aplikasi dan kartu responsif untuk Wear OS
UI responsif akan direntangkan dan berubah untuk memaksimalkan penggunaan semua
ruang layar yang tersedia, apa pun ukuran layarnya. Saat mendesain
tata letak responsif pada layar berbentuk lingkaran, masing-masing tampilan scroll dan non-scroll
memiliki persyaratan unik untuk mempertahankan penskalaan elemen UI, serta mempertahankan
tata letak dan komposisi yang seimbang. Untuk tampilan scroll, gunakan persentase untuk
menentukan semua margin atas, bawah, dan samping guna menghindari clipping dan memberikan
penskalaan elemen yang proporsional. Untuk tampilan non-scroll, gunakan persentase
dan batasan vertikal untuk semua margin. Dengan begitu, konten utama di tengah
dapat membentang untuk mengisi area yang tersedia.
Lihat panduan implementasi Compose dan Kartu untuk tata letak
responsif.
check_circle
Anjuran
- Gunakan komponen standar yang dirancang untuk adaptasi.
- Manfaatkan tata letak adaptif yang beradaptasi dengan lancar di seluruh
ukuran layar.
cancel
Larangan
- Melebarkan elemen UI (kolom teks, tombol, dialog) untuk mengisi ruang yang masih tersisa.
- Perbesar ukuran font (kecuali jika
untuk tujuan utama grafis).
Langkah berikutnya: adaptif dan terdiferensiasi
Aplikasi yang adaptif dan terdiferensiasi menciptakan pengalaman pengguna yang
tidak mungkin dilakukan di perangkat dengan layar yang lebih kecil.
Memulai
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,["# Responsive and optimized\n\nApps that are **responsive and optimized** utilize responsive layouts that\nautomatically adapt to different screen sizes, offering some additional value to\nusers and providing a productive, engaging user experience.\n\nAdd value through responsive design\n-----------------------------------\n\nResponsive layouts dynamically format and position elements such as buttons,\ntext fields, and dialogs for an optimal user experience. Automatically offer\nusers of your app additional value on larger screens by utilizing responsive\ndesign practices. Whether it's more text visible at a glance, more actions on\nscreen, or larger, more accessible tap targets, responsive practices provide an\nenhanced experience for users of larger screens.\n\n\nBuild responsive apps and tiles for Wear OS\n-------------------------------------------\n\nResponsive UIs stretch and change to make the best possible use of all available\nscreen space, no matter what size screen they're rendered on. When designing\nresponsive layouts on a round screen, scrolling and non-scrolling views each\nhave unique requirements to maintain UI element scaling, as well as preserve a\nbalanced layout and composition. For [scrolling views](/design/ui/wear/guides/foundations/canonical-adaptive-layouts#scrolling), use percentages to\ndefine all top, bottom, and side margins to avoid clipping and provide\nproportional scaling of elements. For [non-scrolling views](/design/ui/wear/guides/foundations/canonical-adaptive-layouts#non-scrolling), use percentages\nand vertical constraints for all margins. That way, the main content in the\nmiddle can stretch to fill the available area.\n\nSee the [Compose](/training/wearables/compose/screen-size#responsive-layouts) and [Tiles](/training/wearables/tiles/screen-size#responsive-layouts) implementation guidance for responsive\nlayouts. \ncheck_circle\n\n### Do\n\n- Use standard components which are designed for adaptation.\n- Utilize adaptive layouts which adapt smoothly across screen sizes. \ncancel\n\n### Don't\n\n- Stretch UI elements (text fields, buttons, dialogs) to fill extra space.\n- Increase the sizes of fonts (unless they're serving a primarily graphic purpose).\n\nNext step: adaptive and differentiated\n--------------------------------------\n\nApps that are **adaptive and differentiated** create a user experience that\nisn't possible on devices with smaller screens.\n\n[Get started](/design/ui/wear/guides/foundations/larger-screens-differentiated)"]]
