UX
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
TINGKAT 2 — Dioptimalkan untuk perangkat layar besar
Bagi pengguna, antarmuka pengguna adalah aplikasi. UI menentukan pengalaman pengguna,
yang menentukan kepuasan pengguna, penggunaan aplikasi, pembelian aplikasi, retensi
pelanggan.
Layar besar menawarkan ruang tampilan yang luas untuk UI yang inovatif dan akomodatif
yang memberikan UX yang tidak dapat direplikasi oleh layar kecil.
Optimalkan aplikasi Anda untuk perangkat layar besar dengan menyertakan elemen UI berikut:
- Kolom samping navigasi atau panel navigasi
- Target sentuh besar
- Menu dan dialog yang ditempatkan dengan baik
- Tata letak multipanel
Tata letak adaptif
Buat tata letak adaptif yang mengoptimalkan UI aplikasi Anda di layar besar dan kecil.
Mendesain dan mem-build untuk beberapa faktor bentuk secara bersamaan. Siapkan aplikasi Anda
untuk jenis perangkat baru.
Tata letak kanonis
Manfaatkan tata letak layar besar yang telah terbukti untuk membuat UX aplikasi Anda luar biasa.
Buat tata letak daftar-detail, panel pendukung, atau feed untuk membuat lebih banyak konten
lebih mudah dikelola dan lebih menyenangkan.
UI Responsif
Memformat elemen UI berdasarkan ukuran layar. Membatasi lebar tombol, kartu,
dan kolom teks yang memiliki lebar penuh di layar kecil ke ukuran yang sesuai
secara fungsional di perangkat layar besar. Jangan sampai kotak dialog dan jendela modal
lainnya mengisi seluruh layar. Posisikan menu konteks dan pop-up terkait elemen lainnya bersebelahan dengan elemen yang dipilih pengguna, bukan di tengah layar.
Penyematan aktivitas
Update aplikasi lama berbasis aktivitas Anda dengan tata letak multipanel di perangkat
layar besar. Tidak perlu memfaktorkan ulang kode. Konfigurasikan tata letak Anda dalam XML atau dengan
beberapa panggilan Jetpack WindowManager API.
Langkah berikutnya
Untuk mempelajari pengembangan UI untuk UX yang dioptimalkan, lihat panduan developer
berikut:
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,["# UX\n\nTIER 2 --- Large screen optimized\n| **Objective:** Make your app [large screen\n| optimized](/docs/quality-guidelines/large-screen-app-quality#large_screen_optimized) by meeting the [LS-U1](/docs/quality-guidelines/large-screen-app-quality#LS-U1) through [LS-U4](/docs/quality-guidelines/large-screen-app-quality#LS-U4) user interface requirements of the [Large screen app\n| quality](/docs/quality-guidelines/large-screen-app-quality) guidelines.\n\nTo users, the user interface is the app. The UI determines the user experience,\nwhich determines user satisfaction, app usage, app purchases, customer\nretention.\n\nLarge screens offer expansive display space for innovative, accommodative UIs\nthat provide a UX small screens can't replicate.\n\nOptimize your app for large screens by including the following UI elements:\n\n- Navigation rail or navigation drawer\n- Large touch targets\n- Well-placed menus and dialogs\n- Multipane layouts\n\nAdaptive layouts\n----------------\n\nCreate adaptive layouts that optimize your app's UI on screens large and small.\nDesign and build for multiple form factors simultaneously. Future-proof your app\nfor new device types.\n\nCanonical layouts\n-----------------\n\nTake advantage of proven large screen layouts to make your app UX exceptional.\nCreate a list‑detail, supporting pane, or feed layout to make more content\nmore manageable and more enjoyable.\n\nResponsive UI\n-------------\n\nFormat UI elements based on screen size. Constrain the width of buttons, cards,\nand text fields that are full width on small screens to a functionally\nappropriate size on large screens. Don't let dialog boxes and other modal\nwindows fill the entire screen. Position context menus and other\nelement‑related pop‑up displays adjacent to the element the user\nselected, not centered on screen.\n\nActivity embedding\n------------------\n\nUpdate your activity‑based legacy apps with multipane layouts on large\nscreens. No code refactoring required. Configure your layouts in XML or with a\nfew Jetpack WindowManager API calls.\n\nNext steps\n----------\n\nTo learn about UI development for optimized UX, see the following developer\nguides:\n\n- [About adaptive layouts](/develop/ui/compose/layouts/adaptive)\n- [Canonical layouts](/develop/ui/compose/layouts/adaptive/canonical-layouts)\n- [Build responsive navigation](/develop/ui/views/layout/build-responsive-navigation)\n- [Activity embedding](/develop/ui/views/layout/activity-embedding)"]]
