Tata letak aplikasi
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Saat mendesain aplikasi untuk Wear OS, pertimbangkan tata letak yang dipilih secara cermat
setiap pengalaman. Karena Wear OS berjalan pada tampilan melingkar dan clipping akan lebih
umum dibandingkan perangkat genggam, ada dua kategori tata letak kanonis
yang harus dipertimbangkan saat mendesain aplikasi Anda.
Tata letak non-scrolling berfokus pada informasi yang mudah dilihat dan menawarkan nilai kepada pengguna
sedikit atau bahkan tidak ada interaksi sama sekali. Oleh karena itu, membangun sistem desain
perilaku responsif ke dalam tata letak ini:
- Menguji berbagai kombinasi bahasa, penskalaan font, perangkat, dan variabel
saat ini.
- Gunakan tata letak yang tidak dapat di-scroll hanya jika konten diketahui atau dikontrol
sebelumnya, atau jika Anda harus
menggunakan desain tertentu.
- Terapkan margin atas, bawah, dan samping yang direkomendasikan ke tata letak.
- Menentukan margin dalam nilai persentase di tempat konten mungkin sebaliknya
akan diklip.
- Mengatur elemen untuk memanfaatkan ruang di dalam seoptimal mungkin
layar dan menjaga keseimbangan
di berbagai ukuran perangkat.
Untuk halaman yang berisi lebih banyak informasi daripada yang dapat dimuat dalam satu layar, atau
yang diperlukan untuk mendukung perjalanan yang lebih lama
dan lebih imersif, gunakan scroll
{i>view<i}.
Tampilan scroll yang menggunakan praktik desain responsif biasanya beradaptasi dengan berbagai
ukuran layar. Namun, dalam beberapa kasus khusus, Anda
bisa menggunakan titik henti sementara untuk
mengganti dimensi dan meningkatkan tata letak yang menampilkan opsi tambahan, meningkatkan
tampilan yang baik, atau membuat konten
lebih pas di layar. Contoh berikut
menunjukkan bagaimana, pada layar yang lebih besar, dua tombol bawah dilebarkan:
Kit desain Figma
Kunjungi halaman download kit desain untuk menjelajahi tata letak desain dengan fitur bawaan
komponen, opsi, dan rekomendasi untuk membuat aplikasi dan kartu yang berbeda
desain yang mengikuti praktik terbaik.
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,["# App layouts\n\nWhen designing apps for Wear OS, be intentional about the layouts you choose for\neach experience. Because Wear OS runs on circular displays and clipping is more\ncommon than on handheld devices, there are two categories of canonical layouts\nthat you should consider when designing your app.\n\nNon-scrolling app layouts\n-------------------------\n\nNon-scrolling layouts focus on glanceable information and offer users value with\nlittle or no interaction. Because of that, it can be challenging to build\nresponsive behavior into these layouts:\n\n### Build for responsive non-scrolling views\n\n- Test on a combination of languages, font scaling, devices, and variable content.\n- Use non-scrollable layouts only when the content is known or controlled ahead of time, or if you must use a specific design.\n- Apply the [recommended top, bottom, and side margins](/design/ui/wear/guides/components/dialogs#adaptive-layouts) to the layout.\n- Define margins in percentage values in places where content might otherwise be clipped.\n- Arrange elements to make the best possible use of the space within the screen and maintain balance across different device sizes.\n\nScrolling app layouts\n---------------------\n\nFor pages that contain more information than can fit on a single screen, or\nwhich are required to support longer and more immersive journeys, use a scroll\nview.\n\n### Build for responsive scroll views\n\n- Apply the [recommended top, bottom, and side margins](/design/ui/wear/guides/components/dialogs#adaptive-layouts).\n- Define outer margins in percentage values to prevent clipping at the beginning and end of the scrollable container.\n- Apply margins in fixed DP values between UI elements.\n\n### How to build for adaptive scroll views using a screen size breakpoint\n\nScroll views that use responsive design practices usually adapt to a range of\nscreen sizes. However, in some special cases, you can use a breakpoint to\noverride dimensions and augment layouts which show additional options, improve\nglanceability, or make content fit better on screen. The following example\nshows how, on larger screens, the bottom two buttons are widened:\n\nFigma design kits\n-----------------\n\n[Visit the design kit downloads page](/design/ui/wear/guides/foundations/download) to explore design layouts with built-in\ncomponents, options, and recommendations to create different app and tile\ndesigns that follow best practices."]]
