Mulai menggunakan tata letak adaptif
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Ekosistem Wear OS terdiri dari perangkat yang memiliki berbagai ukuran
layar. Menggunakan prinsip UI adaptif sangat penting untuk memberikan pengalaman
berkualitas tertinggi bagi semua pengguna.
Apa yang dimaksud dengan UI adaptif?
UI adaptif diregangkan dan diubah untuk memanfaatkan semua ruang layar
yang tersedia sebaik mungkin, terlepas dari ukuran layar tempatnya dirender.
UI adaptif berubah secara responsif, menggunakan komponen dan metode yang dibuat langsung
ke dalam logika tata letak. Tata letak ini juga menggunakan titik henti sementara
ukuran layar—menerapkan desain yang berbeda pada ukuran layar yang berbeda—untuk menciptakan
pengalaman yang lebih kaya bagi pengguna.
Ukuran layar utama
Pelajari ukuran referensi utama yang perlu diingat saat Anda mendesain pengalaman baru
Ukuran layar
Jenis tata letak
Saat mendesain untuk tata letak adaptif di layar bulat, tampilan scroll dan
tampilan non-scroll masing-masing memiliki persyaratan unik untuk menskalakan elemen UI dan
mempertahankan tata letak dan komposisi yang seimbang.
Tampilan scroll
Semua margin atas, bawah, dan samping
harus ditentukan dalam persentase untuk menghindari pemangkasan dan memberikan
penskalaan proporsional elemen.
Tampilan non-scroll
Semua margin harus ditentukan
dalam persentase dan batasan vertikal harus ditentukan sehingga
konten utama di tengah dapat direntangkan untuk mengisi area yang tersedia.
Menambahkan nilai melalui tata letak dan praktik desain adaptif
Saat mendesain untuk tata letak adaptif di layar bulat, tampilan scroll dan
tampilan non-scroll masing-masing memiliki persyaratan unik untuk menskalakan elemen UI dan
mempertahankan tata letak dan komposisi yang seimbang.
Gambar berikut adalah saran umum; contoh hanya untuk tujuan
ilustrasi. Lihat setiap halaman komponen atau platform untuk mendapatkan panduan yang mendetail, kontekstual,
dan responsif.
Konten lainnya secara sekilas
Tata letak responsif memungkinkan lebih banyak chip, lebih banyak kartu, lebih banyak baris teks, dan
lebih banyak tombol agar sesuai di satu layar
Elemen konten lainnya terlihat
Gunakan tata letak baru, yang diterapkan pada titik henti sementara ukuran layar yang ditentukan, untuk memungkinkan
pengenalan konten baru jika memungkinkan, sehingga memberi pengguna nilai tambahan
di perangkat dengan ukuran layar yang lebih besar.
Peningkatan visibilitas
Gunakan ruang layar tambahan untuk menyediakan penampung yang lebih besar, teks yang lebih besar, cincin yang lebih tebal,
dan visualisasi data yang lebih terperinci untuk memberikan kemudahan melihat bagi pengguna.
Peningkatan kegunaan
Gunakan ruang layar tambahan untuk memberikan target ketuk yang lebih besar, hierarki visual yang lebih besar,
dan ruang tambahan di antara item konten untuk membuat antarmuka lebih mudah dan lebih
nyaman untuk berinteraksi.
Komposisi yang dioptimalkan
Manfaatkan komponen dan template yang telah diperbarui untuk menawarkan tampilan dan nuansa yang lebih baik untuk
UI di semua ukuran layar.
Kualitas aplikasi
Pedoman kualitas kami disusun ke dalam tiga tingkat. Berikan pengalaman terbaik
untuk pengguna Anda dengan memenuhi pedoman di ketiga tingkat.
Pedoman kualitas
Siap digunakan di semua ukuran layar
Pastikan aplikasi Anda memberikan pengalaman berkualitas di semua ukuran
layar. Buat tata letak yang sepenuhnya menggunakan ruang aplikasi yang tersedia.
Mulai
Responsif dan dioptimalkan
Kirimkan lebih banyak konten kepada pengguna di perangkat yang memungkinkannya, dan gunakan
tata letak responsif yang secara otomatis menyesuaikan dengan berbagai ukuran layar.
Mulai
Adaptif dan terdiferensiasi
Manfaatkan ruang tambahan dengan memanfaatkan titik henti sementara untuk menawarkan
pengalaman baru yang efektif di layar yang lebih besar yang tidak dapat dilakukan di perangkat
dengan layar yang lebih kecil.
Mulai
Menggunakan tata letak kanonis yang sudah ada
Gunakan tata letak kanonis yang sudah ditetapkan untuk membantu UI Anda beradaptasi dengan lancar di berbagai
ukuran perangkat.
Tata letak kanonis kami telah dikembangkan dengan cermat untuk menawarkan pengalaman berkualitas tinggi di semua ukuran layar.
Tata letak kanonis
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,["# Get started with adaptive layouts\n\nThe Wear OS ecosystem is made up of devices that have a wide variety of screen\nsizes. Utilizing adaptive UI principles is critical to delivering the highest\nquality experience for all users.\n\nWhat is adaptive UI?\n--------------------\n\nAdaptive UIs stretch and change to make the best possible use of all available\nscreen space, no matter what size screen they're rendered on.\n\nAdaptive UIs change responsively, using components and methods built directly\ninto the layout logic. These layouts also utilize screen size\nbreakpoints---applying a different design on different screen sizes---to create an\neven richer experience for users.\n\nKey screen sizes\n----------------\n\n\nLearn about key reference sizes to keep in mind as you design new experiences\n\n[Screen sizes](/design/ui/wear/guides/foundations/screen-sizes) \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nTypes of layouts\n----------------\n\nWhen designing for adaptive layouts on the round screen, scrolling and\nnon-scrolling views each have unique requirements for scaling UI elements and\nmaintaining a balanced layout and composition.\n\n\n**Scrolling views**\n\nAll top, bottom, and side margins\nshould be defined in percentages to avoid clipping and provide\nproportional scaling of elements. \n\n**Non-scrolling views**\n\nAll margins should be defined\nin percentages and vertical constraints should be defined such that the\nmain content in the middle can stretch to fill the available area.\n\n\u003cbr /\u003e\n\nAdd value through adaptive layouts and design practices\n-------------------------------------------------------\n\nWhen designing for adaptive layouts on the round screen, scrolling and\nnon-scrolling views each have unique requirements for scaling UI elements and\nmaintaining a balanced layout and composition.\n\nThe following images are broad suggestions; examples are for illustrative\npurposes only. View each component or surface page for detailed, contextual,\nresponsive guidance.\n\n\n**More content at a glance**\n\nResponsive layouts allow for more chips, more cards, more lines of text, and\nmore buttons to fit on a single screen \n\n**More content elements visible**\n\nUtilize new layouts, applied at defined screen size breakpoints, to allow for\nthe introduction of new content when possible, giving the user additional value\non devices with larger screen sizes.\n\n\u003cbr /\u003e\n\n\n**Improved glanceability**\n\nUse extra screen space to provide larger containers, larger text, thicker rings,\nand more granular data visualization to provide better glanceability for users. \n\n**Improved usability**\n\nUse extra screen space to provide bigger tap targets, greater visual hierarchy,\nand additional space between content items to make interfaces easier and more\ncomfortable to interact with.\n\n\u003cbr /\u003e\n\n\n**Optimized compositions**\n\nUtilize our updated components and templates to offer a better look and feel for\nour UIs across all screen sizes. \n\n\u003cbr /\u003e\n\nApp quality\n-----------\n\n\nOur quality guidelines are organized into three levels. Enable the best possible\nexperience for your users by meeting guidelines in all three tiers.\n\n[Quality guidelines](/docs/quality-guidelines/wear-app-quality) \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n*** ** * ** ***\n\n\n**Ready for all screen sizes**\n\nMake sure your app is delivering a quality experience across all screen\nsizes. Create layouts that fully use the available app space.\n\n[Get started](/design/ui/wear/guides/foundations/larger-screens-ready) \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[Get started](/design/ui/wear/guides/foundations/larger-screens-optimized) \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[Get started](/design/ui/wear/guides/foundations/larger-screens-differentiated)\n\n\u003cbr /\u003e\n\n*** ** * ** ***\n\nUtilize established canonical layouts\n-------------------------------------\n\n\nUse established canonical layouts to help your UIs adapt smoothly across a range\nof device sizes.\n\nOur canonical layouts have been developed thoughtfully to offer a high quality\nexperience across all screen sizes.\n\n[Canonical layouts](/design/ui/wear/guides/foundations/canonical-adaptive-layouts) \n\n\u003cbr /\u003e"]]
