Baca dalam bahasa Inggris

Bagikan melalui


Pola desain tampilan ganda

Memiliki dua layar memberikan kesempatan alami untuk membandingkan dua versi dari jenis konten yang sama. Anda dapat membandingkan dua gambar, dua daftar, atau dua dokumen secara berdampingan.

Anda juga dapat menampilkan informasi yang sama dengan dua cara berbeda secara bersamaan. Setiap layar bekerja dengan mulus untuk memberikan informasi lebih lanjut kepada pengguna. Misalnya, tampilkan daftar restoran di satu layar dan peta dengan lokasi di layar lainnya.

Jika Anda ingin mencapai pengalaman seperti tampilan ganda tanpa merancang dua tampilan tertentu, pertimbangkan untuk mendukung multi-instans dengan aplikasi Anda. Pendekatan ini memanfaatkan dukungan bawaan yang disediakan OS. Pengalaman ini dapat berguna untuk membandingkan dua produk yang dibuka pada dua tab atau skenario serupa lainnya.

Screenshot shows the dual view experience with similar views side by side and the same data presented different ways.

Praktik terbaik

Berikut adalah beberapa skenario yang membantu memandu Anda saat menerapkan pola desain ini:

Screenshot shows the preferred dual view contrasted with the list detail pattern.

Lakukan Jangan
Gunakan sisi kiri layar untuk menampilkan konten dalam satu tampilan saat menggunakan layar kedua untuk melihat konten yang sama dalam tampilan yang berbeda. Jangan gunakan layar kiri untuk menampilkan daftar dan layar kedua untuk menampilkan detail. Itu adalah pola desain detail daftar.

Screenshot shows visual indicators that are synchronized for the selected item on both screens.

Lakukan Jangan
Gunakan indikator visual untuk menampilkan informasi yang sama dalam dua tampilan yang berbeda. Jangan salah menggunakan visual. Tidak menggunakan indikator visual dengan cara yang tepat dapat menghasilkan tampilan detail daftar.

Screenshot shows the two screens used to compare data, instead of a list and detail display.

Lakukan Jangan
Gunakan dua layar untuk membandingkan instans produk yang sama. Tidak memiliki daftar pada satu layar dan detail di layar kedua.

Screenshot shows using the two screens to preview and edit at the same time, but not on both screens interchangeably.

Lakukan Jangan
Gunakan layar kedua untuk mengedit atau menandai perubahan dari konten pada layar pertama dalam tampilan ganda. Jangan izinkan pengguna mengedit atau menandai perubahan di kedua layar dalam tampilan ganda.

Jenis aplikasi yang mungkin mendapat manfaat dari pola ini

  • Mengedit alat yang mendapat manfaat dari memiliki sebelum/sesudah status berdampingan. Misalnya, kode markdown dan pratinjau.
  • Konten dan konteks berdampingan. Misalnya, peta dan daftar restoran.
  • Aplikasi yang memungkinkan pengguna membandingkan item serupa.
  • Memiliki dua kanvas dengan konten terkoordinasi tetapi memisahkan setiap halaman. Misalnya, kanvas di satu sisi, perhatikan mengambil yang lain.

Contoh kode

Proyek-proyek ini menunjukkan implementasi sederhana dari tampilan ganda yang dapat Anda gunakan di aplikasi Anda:

Langkah berikutnya

Pertimbangkan pola desain lainnya ini: