Tingkat 2 — Dioptimalkan untuk adaptif

Aplikasi yang dioptimalkan sepenuhnya mendukung semua jenis layar dan status perangkat, termasuk transisi status.

Penggambaran tiga tingkat kualitas sebagai lapisan yang ditumpuk secara vertikal dengan tingkat menengah disoroti.

Panduan

Bangun aplikasi Anda agar dapat beradaptasi dengan semua ukuran layar dan status perangkat.

Antarmuka pengguna

Guideline ID Test IDs Description
Responsive_adaptive_layouts T-Layout_Flow

Aplikasi memiliki tata letak responsif dan adaptif yang dirancang untuk semua ukuran layar. Semua tata letak responsif (lihat Memigrasikan UI ke tata letak responsif). Implementasi tata letak adaptif ditentukan oleh class ukuran jendela.

UI aplikasi dapat mencakup hal berikut:

  • Kolom samping navigasi tepi terdepan yang membentang pada ukuran jendela yang lebih besar ke panel navigasi penuh
  • Tata letak petak yang menskalakan jumlah kolom untuk mengakomodasi perubahan ukuran jendela
  • Kolom teks di layar besar
  • Panel tepi geser yang terbuka secara default di ukuran layar desktop; tertutup, pada layar yang lebih kecil

Buat tata letak multi-panel (jika memungkinkan) untuk memanfaatkan ruang layar besar. Lihat Tata letak kanonis.

Penyematan aktivitas memungkinkan aplikasi berbasis aktivitas membuat tata letak multi-panel dengan menampilkan aktivitas secara berdampingan.
UI_Secondary_Elements T-Layout_Flow

Modal, menu konteks, dan elemen sekunder lainnya diformat dengan benar di semua jenis layar dan status perangkat, misalnya:

  • Sheet bawah tidak memiliki lebar penuh di layar besar. (Terapkan lebar maksimum untuk menghindari peregangan.) Lihat Perilaku di Sheet: bawah.
  • Tombol tidak memiliki lebar penuh di layar besar. Lihat Perilaku di Tombol.
  • Kolom teks dan kotak tidak membentang hingga lebar penuh di layar besar. Lihat Perilaku di Kolom teks.
  • Menu atau modal edit kecil tidak mencakup seluruh layar dan mempertahankan konteks untuk pengguna sebaik mungkin. Lihat Menu.
  • Menu konteks muncul di samping item yang dipilih pengguna. Lihat topik "Menu konteks" di Menu.
  • Kolom samping navigasi menggantikan menu navigasi untuk ergonomi yang lebih baik pada layar besar. Lihat Kolom samping navigasi.
  • Panel navigasi diupdate ke kolom samping navigasi yang diperluas. Lihat Panel navigasi.
  • Kotak dialog diupdate ke komponen material terbaru. Lihat Dialog.
  • Gambar ditampilkan dengan resolusi yang sesuai dan tidak direntangkan atau dipangkas.
Target Sentuh T-Touch_Targets Target sentuh setidaknya 48dp. Lihat panduan Tata letak dan tipografi Desain Material.
Drawable_Focus T-Drawable_Focus Status difokuskan dibuat untuk drawable kustom yang interaktif. Drawable kustom adalah elemen UI visual yang tidak disediakan oleh framework Android. Jika pengguna dapat berinteraksi dengan drawable kustom, drawable itu harus dapat difokuskan saat perangkat tidak sedang dalam Mode Sentuh, dan indikasi visual status difokuskan harus terlihat.

Keyboard, mouse, dan trackpad

Guideline ID Test IDs Description
Keyboard_Navigation T-Keyboard_Navigation Alur tugas utama di aplikasi mendukung navigasi keyboard, termasuk navigasi Tab dan tombol panah. Lihat Membuat aplikasi yang lebih mudah diakses.
Keyboard_Shortcuts T-Keyboard_Shortcuts Aplikasi mendukung pintasan keyboard untuk tindakan yang biasa digunakan seperti pilih, potong, salin, tempel, urungkan, dan ulangi. Lihat Kompatibilitas input.
Keyboard_Media_Playback T-Keyboard_Media_Playback Keyboard dapat digunakan untuk mengontrol pemutaran media; misalnya, tombol Spasi memutar dan menjeda media.
Keyboard_Send T-Keyboard_Send Tombol Enter di keyboard menjalankan fungsi kirim di aplikasi komunikasi.
Context_Menus T-Context_Menus Menu konteks dapat diakses dengan perilaku klik kanan mouse dan trackpad (tombol mouse sekunder atau ketuk sekunder).
Content_Zoom T-Content_Zoom Konten aplikasi dapat di-zoom menggunakan roda scroll mouse (bersama dengan menekan tombol Control, atau Ctrl) dan gestur cubit trackpad.
Hover_States T-Hover_States Elemen UI yang dapat ditindaklanjuti memiliki status pengarahan kursor (jika memungkinkan) untuk menunjukkan kepada pengguna mouse dan trackpad bahwa elemen tersebut bersifat interaktif.

Pengujian

Untuk memastikan aplikasi Anda dioptimalkan dan responsif terhadap semua konfigurasi layar, lakukan pengujian berikut.

Antarmuka pengguna

Test ID Guideline IDs Description
T-Layout_Flow Responsive_adaptive_layouts,
UI_Secondary_Elements

Jalankan aplikasi di perangkat yang memiliki berbagai ukuran layar, termasuk ponsel, ponsel foldable, tablet kecil dan besar, serta perangkat desktop. Jalankan aplikasi dalam mode multi-aplikasi di perangkat.

Pastikan tata letak aplikasi merespons dan beradaptasi dengan berbagai ukuran layar dan jendela. Periksa apakah aplikasi meluaskan dan menciutkan kolom samping navigasi, menskalakan jumlah kolom dalam tata letak petak, mengalirkan teks ke dalam kolom, dan sebagainya. Amati apakah elemen UI diformat untuk estetika dan fungsi.

Untuk aplikasi yang menggunakan penyematan aktivitas, uji apakah aktivitas ditampilkan berdampingan di layar besar, dan ditumpuk di layar kecil.
T-Touch_Targets Touch_Targets Pastikan target sentuh mempertahankan ukuran dan posisi yang konsisten dan dapat diakses serta tidak tersembunyi atau tertutup oleh elemen UI lain untuk semua ukuran dan konfigurasi tampilan. Untuk mengetahui informasi tentang aksesibilitas, lihat Accessibility Scanner.
T-Drawable_Focus Drawable_Focus Pada setiap layar aplikasi yang berisi drawable kustom interaktif, pastikan drawable dapat difokuskan menggunakan keyboard eksternal, D‑pad, atau perangkat lain yang memungkinkan elemen UI difokuskan. Pastikan indikasi visual status difokuskan terlihat jelas. Untuk informasi terkait, lihat Mode Sentuh.

Keyboard, mouse, dan trackpad

Test ID Guideline IDs Description
T-Keyboard_Navigation Keyboard_Navigation Jelajahi komponen aplikasi yang dapat difokuskan menggunakan tombol Tab dan panah pada keyboard eksternal.
T-Keyboard_Shortcuts Keyboard_Shortcuts Gunakan pintasan keyboard pada keyboard eksternal untuk melakukan tindakan pilih, potong, salin, tempel, urungkan, dan ulangi.
T-Keyboard_Media_Playback Keyboard_Media_Playback Gunakan keyboard eksternal untuk memulai, menghentikan, menjeda, memutar ulang, dan mempercepat pemutaran media.
T-Keyboard_Send Keyboard_Send Gunakan tombol Enter di keyboard eksternal untuk mengirim atau mengirimkan data.
T-Context_Menus Context_Menus Gunakan tombol mouse sekunder atau kemampuan ketuk sekunder trackpad untuk mengakses menu konteks pada elemen interaktif.
T-Content_Zoom Content_Zoom Gunakan roda scroll mouse (bersama dengan tombol Control, atau Ctrl) dan gestur cubit trackpad untuk memperbesar dan memperkecil konten.
T-Hover_States Hover_States Arahkan kursor mouse atau trackpad ke atas elemen UI yang dapat ditindaklanjuti untuk mengaktifkan status pengarahan kursor elemen.