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.
Berikut adalah beberapa skenario yang membantu memandu Anda saat menerapkan pola desain ini:
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. |
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. |
Lakukan | Jangan |
---|---|
Gunakan dua layar untuk membandingkan instans produk yang sama. | Tidak memiliki daftar pada satu layar dan detail di layar kedua. |
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. |
- 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.
Proyek-proyek ini menunjukkan implementasi sederhana dari tampilan ganda yang dapat Anda gunakan di aplikasi Anda:
Pertimbangkan pola desain lainnya ini: