Pengantar perangkat layar ganda

Perangkat layar ganda adalah perangkat portabel dengan dua layar simetris yang bekerja sama dengan cara unik untuk memberikan produktivitas dalam faktor bentuk yang fleksibel.

Dengan perangkat layar ganda seperti Microsoft Surface Duo, orang dapat menyelesaikan pekerjaan dengan lebih cepat dari sebelumnya: membuat catatan di satu layar dan meninjau proposal proyek lengkap di layar lainnya saat transit; duduk di meja untuk menulis email yang bijaksan menggunakan keyboard perangkat lunak atau perangkat keras sambil menunggu makan siang; lalu tonton video, telusuri web, atau baca buku saat Anda kembali ke kehidupan Anda.

Meskipun perangkat layar ganda membuka kemungkinan baru untuk aplikasi Anda, aplikasi yang ada akan berfungsi seperti yang diharapkan pada perangkat, dan ada peningkatan yang akan Anda dapatkan tanpa melakukan pekerjaan apa pun. Dokumentasi ini akan menunjukkan hal tersebut, sambil juga menunjukkan cara baru untuk meningkatkan pengalaman aplikasi Anda dengan membuat aplikasi Anda mengetahui sifat perangkat layar ganda.

Meskipun ada perangkat layar ganda yang berbeda sekarang di pasar dan lebih banyak yang akan datang, kami percaya ada cara umum untuk mendekati desain aplikasi untuk perangkat ini. Kami berharap ini akan membantu aplikasi Anda menjangkau lebih banyak perangkat tanpa merancang ulang dari awal untuk setiap perangkat.

Dalam artikel ini, kita berbicara tentang pola dan konsep desain umum yang berlaku terlepas dari sistem operasi yang Anda targetkan atau bahasa pengembangan yang Anda gunakan. Untuk informasi spesifik platform tentang mengembangkan aplikasi untuk perangkat layar ganda, lihat Kotlin dan Java, React Native, Xamarin, pengembangan game Unity, teknologi Web, atau Windows.

Teknologi masih berkembang dan panduan kami di sini dapat berubah seiring kemajuan kami. Umpan balik Anda dipersilakan.

Gambaran umum layar ganda

Perangkat layar ganda dapat hadir dalam berbagai variasi desain perangkat keras dan industri. Surface Duo yang baru dirilis, bersama dengan perangkat terencana lainnya, dimaksudkan untuk membantu menentukan kategori, tetapi perangkat lain mungkin dilengkapi dengan layar yang lebih besar atau desain engsel yang bervariasi. Saat Merancang aplikasi, perlu diingat bahwa Anda harus menghindari merancang ke spesifikasi perangkat tertentu yang tersedia saat ini.

Semua perangkat layar ganda dapat melipat, membalik, dan memutar. Kedua layar dapat digunakan sebagai tampilan, atau satu layar dapat bertindak sebagai keyboard. Berbagai faktor bentuk mendukung berbagai aktivitas dan memungkinkan pengguna untuk menyesuaikan perangkat dengan situasi mereka. Dengan memanfaatkan berbagai mode dengan aplikasi, Anda akan membantu pengguna mencapai lebih banyak hal.

Saat pengguna meluncurkan aplikasi, jendela intinya terbuka dimaksimalkan dan menempati lebar dan tinggi penuh satu layar. Pengguna dapat membuka beberapa aplikasi sekaligus dengan cara ini, memungkinkan penggunaan aplikasi secara berdampingan dan skenario seret dan letakkan yang intuitif.

Aplikasi juga dapat muncul di kedua layar, yang dikenal sebagai tata letak yang terbenam . Secara default, aplikasi akan bertindak seolah-olah ditampilkan di layar yang lebih besar. Anda dapat memodifikasi tata letak aplikasi yang ada untuk mengakomodasi jahitan di antara dua layar, atau Anda dapat melaju lebih jauh dan merancang aplikasi menggunakan kontrol tata letak yang dibuat khusus untuk memanfaatkan sepenuhnya perangkat layar ganda. Hal ini akan dibahas secara lebih rinci nanti di artikel ini.

Merangkul dan meningkatkan fitur yang ada

Ada banyak fitur yang mungkin sudah Anda manfaatkan dengan aplikasi Anda yang akan terus bekerja dengan sedikit-ke-tanpa upaya pada perangkat layar ganda yang didukung oleh Microsoft dan akan terus memberikan pengalaman aplikasi yang baik. Kami akan membahasnya sebelum mendiskusikan cara mendesain aplikasi Anda khusus untuk skenario layar ganda.

Tata letak aplikasi responsif

Jika Anda merancang aplikasi sehingga menggunakan tata letak responsif, itu akan terlihat hebat di setiap perangkat, terlepas dari ukuran dan orientasi layar perangkat. Gunakan teknik tata letak yang ada untuk platform UI pilihan Anda yang secara otomatis menskalakan untuk mengisi layar. Jika Anda memiliki elemen layar yang bergantung pada ukuran dan rasio aspek, gunakan API yang disediakan oleh platform UI Anda untuk menyesuaikan tata letak Anda saat ukuran atau rasio aspek berubah.

Karena aplikasi Anda berjalan di banyak perangkat yang berbeda, Anda mungkin sudah mengembangkannya untuk menangani berbagai ukuran layar dan jendela, dan itu harus terus bekerja dengan lancar. Namun, perlu diingat bahwa Anda mungkin perlu mempertimbangan ukuran layar baru dan rasio aspek yang tidak khas untuk PC dan perangkat seluler, seperti potret (tampilan yang lebih tinggi), lanskap (tampilan yang lebih luas), potret ganda (lebar potret ganda), dan lanskap ganda (tinggi lanskap ganda).

Pertimbangkan semua orientasi perangkat

Kami mengharapkan pengguna untuk kreatif dalam menggunakan perangkat layar ganda dengan cara yang berfungsi untuk mereka. Ini berarti aplikasi Anda mungkin tidak selalu digunakan dalam orientasi umum; potret untuk Android, atau lanskap untuk Windows. Pertimbangkan untuk mendukung semua orientasi dan konfigurasi layar. Misalnya, jika aplikasi Anda dirancang terutama untuk orientasi potret tetapi mendukung banyak entri teks, pengguna mungkin lebih mungkin menggunakannya dalam orientasi lanskap pada perangkat layar ganda, dengan keyboard di layar bawah.

Tata letak layar ganda dapat memberikan lingkungan yang lebih baik untuk multi-tugas. Anda tidak akan selalu tahu dalam mode apa pengguna akan menahan perangkat; tetapi mengetahui mode potensial memungkinkan Anda mengoptimalkan aplikasi untuk mode yang paling masuk akal untuk aplikasi Anda.

Studi kami menunjukkan bahwa pengguna lebih nyaman mengetik atau menulis di permukaan datar. Jika aplikasi Anda sangat berorientasi input, seperti aplikasi pengambilan catatan, Anda dapat mengoptimalkannya untuk digunakan dalam tata letak lanskap (jika belum).

Mendukung berbagai input

Banyak perangkat, termasuk perangkat layar ganda baru, mendukung berbagai input, termasuk pengetikan, sentuhan, dan pena. Fleksibilitas perangkat layar ganda memungkinkan pengguna beralih antar mode dengan cepat agar sesuai dengan tugas mereka. Untuk memastikan pengalaman pengguna yang hebat, pastikan aplikasi Anda mendukung semua jenis input yang tersedia, sehingga pengguna tetap memegang kendali dan dapat berinteraksi dengan aplikasi Anda dengan cara yang mereka sukai.

Seret dan letakkan

Memastikan aplikasi Anda mendukung seret dan letakkan adalah cara lain untuk memastikan pengalaman pengguna yang hebat saat menggunakan berbagai jenis input, tidak hanya untuk perangkat layar ganda, tetapi juga untuk semua jenis perangkat lainnya.

Seret dan letakkan adalah fitur yang sudah dapat Anda manfaatkan. Namun, perangkat layar ganda yang menjalankan aplikasi secara berdampingan terutama meminjamkan dirinya sendiri untuk menarik dan menghilangkan interaksi untuk pengalaman aplikasi yang hebat.

Untuk mengaktifkan seret dan letakkan di aplikasi Anda, pikirkan skenario saat pengguna dapat langsung memanipulasi teks, tautan, gambar, atau objek kaya ke dalam dan keluar dari pengalaman aplikasi Anda, lalu:

1. Di mana saja Anda dapat memotong, menyalin, dan menempel, mengaktifkan seret dan letakkan.
2. Di mana saja Anda dapat berbagi konten, pertimbangkan untuk mengaktifkan seret dan letakkan.

Multi-instans untuk aplikasi Anda

Pengguna mungkin ingin memanfaatkan layar kedua untuk melihat konten yang berbeda dari aplikasi yang sama. Untuk mengaktifkan ini, pertimbangkan untuk mendukung multi-instans, di mana beberapa instans aplikasi Anda berjalan berdampingan.

Gambar dalam pengalaman gambar untuk media Anda

Jika Anda membuat aplikasi media yang dapat memperoleh manfaat dari terus memutar video di latar depan saat aplikasi lain berjalan, pertimbangkan untuk mendukung pengalaman gambar dalam gambar. Dengan lebih banyak real estat layar, ini memberi pengguna kesempatan untuk multi-tugas dengan menonton video dan melakukan tugas lain pada saat yang sama.

Pertimbangan pengalaman pengguna layar ganda

Di bagian sebelumnya, kami berbicara tentang fitur yang dapat Anda dukung di aplikasi yang tidak spesifik untuk perangkat layar ganda, tetapi dapat meningkatkan pengalaman pengguna saat aplikasi Anda berjalan di perangkat layar ganda. Sekarang kita akan melihat hal-hal yang dapat Anda lakukan untuk memberikan pengalaman unik hanya saat aplikasi Anda berjalan di perangkat layar ganda.

Di perangkat layar ganda, aplikasi Anda dapat berjalan pada satu layar, atau di kedua layar. Saat satu aplikasi disajikan di dua layar, kami mengatakan itu membentangan. Bagaimana aplikasi Anda merespons berada dalam keadaan terbenam dapat berdampak besar pada pengalaman pengguna. Mode unik yang diaktifkan perangkat layar ganda dapat membuka kunci cara yang belum pernah digunakan aplikasi Anda. Misalnya, perangkat yang memiliki jahitan di tengah meminjamkan diri dengan baik untuk skenario produktivitas yang mendapat manfaat dari kompartementalisasi konten.

Berikut adalah beberapa prinsip yang harus Anda perhitungkan sebelum memutuskan teknik desain layar ganda tertentu yang mungkin sesuai untuk aplikasi Anda:

• Berikan nilai berkelanjutan
  • Status spanned harus memperkaya pengalaman pengguna sebagai bagian dari alur tugas end-to-end yang mereka lakukan dengan aplikasi Anda. Seharusnya bukan status kustom yang hanya berharga sesaat. Daripada memikirkan layar tertentu, pikirkan gambaran keseluruhan.
• Tidak semua tentang rentang
  • Aplikasi seharusnya tidak hebat hanya ketika membenteng. Jangan mengubur fungsionalitas mendasar dalam status membentang, sehingga pengguna harus menjangkau aplikasi kami untuk dapat melakukan tugas dasar.
• Pengguna selalu memegang kendali
  • Untuk menghindari pengalaman yang tidak dapat diprediksi (atau berpotensi merusak) bagi pengguna Anda, aplikasi tidak boleh secara otomatis memasuki status membentang tanpa tindakan yang disengaja dan dimulai pengguna. Biarkan pengguna memutuskan.
• Membuat rentang dapat diprediksi
  • Pahami niat pengguna Anda untuk menjangkau dan merancangnya. Pastikan hasil rentang dapat diprediksi dan menambahkan nilai pada waktu tertentu.

Rentang adalah pilihan pengguna

Pengguna diberdayakan untuk memiliki kontrol penuh atas cara mereka menggunakan aplikasi Anda, termasuk saat mereka ingin menjangkau aplikasi Anda. Beberapa aplikasi, seperti kalkulator, mungkin tidak terlihat hebat atau mendapatkan manfaat apa pun dari konfigurasi ini, tetapi masih menjadi pilihan pengguna. Namun, Anda mungkin memutuskan bahwa karena sebagian besar pengguna tidak akan memilih untuk menjangkau aplikasi Anda, tidak apa-apa untuk tidak melakukan apa pun untuk mengakomodasi tindakan pengguna.

Meskipun artikel ini menyediakan beberapa ide berbeda tentang bagaimana Anda mungkin ingin menangani tata letak multi-layar, buat pilihan yang tepat untuk pengguna dan aplikasi Anda.

Pertimbangkan niat pengguna dan orientasi perangkat

Saat Anda merancang pengalaman aplikasi untuk memanfaatkan dua layar, penting untuk mempelajari niat pengguna Anda di balik rentang, baik dalam konfigurasi lanskap ganda maupun dual-portrait. Meskipun ada lebih banyak studi yang harus dilakukan, kami mulai mengamati kecenderungan untuk preferensi pengguna ini:

• Dalam lanskap ganda, pengguna ingin menggunakan lebih banyak real estat layar, sehingga kedua layar digunakan untuk memperluas area konten.
• Dalam potret ganda, pengguna lebih suka aktivitas multi-tugas atau produktivitas, sehingga kedua layar digunakan untuk memisahkan dan mengelompokkan konten.

Ingatlah hal ini saat memutuskan cara menerapkan pola desain layar ganda. Apakah pengguna mendapat manfaat jika Anda sepenuhnya menyesuaikan tata letak dan pengalaman aplikasi Anda, atau dapatkah Anda mendukung rentang hanya dengan mengatur kontrol dan elemen aplikasi Anda sehingga tidak dikaburkan oleh jahitan?

Pertimbangkan semua tata letak yang didukung

Ada empat skenario tata letak yang perlu dipertimbangkan saat merancang pengalaman aplikasi Anda untuk perangkat layar ganda, tergantung pada apakah aplikasi berada di satu layar atau membenbung, dan apakah tampilan default atau layar penuh.

• Default Tunggal

  • Secara default, aplikasi terbuka dalam status maksimal dan menempati satu layar. Dalam mode layar ganda, pengguna dapat menjalankan dua aplikasi di samping satu sama lain untuk membandingkan, mengonsumsi, atau mereferensikan konten secara bersamaan.
  • Didukung secara default. Jika aplikasi Anda dirancang untuk menangani berbagai ukuran layar dan orientasi potret dan lanskap seperti yang dijelaskan sebelumnya, tidak ada lagi yang perlu Anda lakukan.

• Spanned-Default

  • Saat perangkat berada dalam mode layar ganda (potret ganda atau lanskap ganda), pengguna dapat memperluas satu aplikasi di kedua layar, memungkinkan lebih banyak ruang untuk konten. Pengguna bertanggung jawab untuk mencakup aplikasi, ini bukan status yang dimasukkan aplikasi secara terprogram.
  • Dukungan bersifat opsional. Mode spanned unik untuk perangkat layar ganda. Jika Anda tidak melakukan modifikasi pada aplikasi, itu akan bertingkah seolah-olah ditampilkan di satu layar besar. Namun, Anda dapat menerapkan berbagai pengoptimalan tata letak untuk membuat aplikasi Anda memanfaatkan fitur unik perangkat layar ganda. Ini dibahas secara lebih rinci nanti dalam artikel ini.

• Layar Penuh Tunggal

  • Ini mirip dengan tata letak default, kecuali UI sistem (Bilah Tugas, Baki Sistem, Bilah Aplikasi, Judul Aplikasi) disembunyikan untuk menciptakan pengalaman yang sepenuhnya imersif, ideal untuk game dan pemutaran video.
  • Dukungan bersifat opsional. Anda dapat menggunakan API yang tersedia untuk menempatkan aplikasi Anda dalam mode layar penuh.

• Layar Spanned-Full

  • Anda dapat memperluas aplikasi secara terprogram untuk menggunakan mode layar penuh saat membentang. Jika aplikasi yang ditampilkan pada satu layar dalam mode layar penuh dibenamkan oleh pengguna, aplikasi akan tetap layar penuh.
  • Dukungan bersifat opsional. Pertimbangkan manfaat layar penuh dalam mode spanned serta layar tunggal.

Cara bekerja dengan jahitan

Tata letak yang terbentang terjadi saat satu aplikasi disajikan di dua layar. Secara default, jika aplikasi tidak disesuaikan untuk skenario ini, sistem memberi tahu aplikasi bahwa sekarang menempati lebar dan tinggi layar yang lebih besar dan UI aplikasi akan mengubah ukurannya sendiri agar sesuai dengan dimensi layar baru.

Saat aplikasi membenit di dua layar, akan ada jahitan — ruang di antara dua layar. Ini adalah produk sampingan dari membuat perangkat layar ganda. Bagian ini berbicara tentang beberapa ide dan teknik yang mungkin Anda pertimbangkan untuk membuat aplikasi Anda berfungsi dengan jahitan.

Apakah saya selalu mengakomodasi jahitan?

Tergantung pada aplikasi Anda, beberapa UI mungkin baik-baik saja untuk digunakan apa adanya. Jika pengguna dapat memanipulasi konten aplikasi untuk menghindari penghalang oleh jahitan, Anda mungkin memutuskan untuk tidak melakukan pekerjaan khusus untuk mengakomodasi jahitan.

Misalnya, aplikasi peta dapat menjangkau kedua layar untuk memanfaatkan real estat layar, tetapi tidak melakukan apa pun untuk menangani jahitan karena pengguna dapat memindahkan konten peta untuk menghindari jahitan. Ini dibahas secara lebih rinci nanti di bagian Kanvas diperpanjang .

Gambar berikut menunjukkan UI kisi yang dapat dengan mudah digulir pengguna untuk menghindari jahitan. Namun, jika UI tidak menggulir, seperti toolbar di atas kisi, Anda mungkin mempertimbangkan untuk memposisikan ke batas, yang merupakan salah satu teknik yang kami atasi nanti. Kami menyarankan agar Anda menguji berbagai ide desain dengan pengguna untuk memutuskan opsi terbaik untuk aplikasi Anda.

Menghindari jahitan

Memindahkan sesuatu ke satu sisi

Karena ada jahitan yang jelas di tengah dua layar, beberapa UI—terutama elemen yang berpusat di dalam tata letak aplikasi Anda—dapat dikaburkan oleh jahitan saat pengguna menjangkau aplikasi Anda. Ini tidak menyebabkan masalah fungsi dan aplikasi akan terus berfungsi; namun, mungkin memberikan pengalaman yang lebih baik jika UI harus digeser ke satu sisi layar. Ini adalah aturan praktis yang baik untuk menghindari tampilan teks atau konten di jahitan karena dapat memengaruhi keterbacaan dan kegunaan aplikasi Anda.

Dialog yang diluncurkan aplikasi harus berpindah ke salah satu layar alih-alih membentang di keduanya, terutama ketika ada tombol atau tindakan yang perlu diambil pengguna.

Menu bawah harus dipindahkan ke satu sisi atau yang lain alih-alih membentang di kedua layar.

Menu konteks yang dipanggil pengguna harus memperlakukan jahitan sebagai batas, terutama jika dipanggil dekat dengan tepi layar.

Menu drop-down dalam aplikasi atau kontainer yang dapat diperluas harus mengubah arah ekspansi.

Saat aplikasi terbenam, pindahkan UI ke tengah layar atas atau kiri alih-alih ke tengah seluruh wilayah aplikasi.

Memposiskan ke jahitan

Sejajarkan ke tepi jahitan dengan jumlah kolom genap

Saat UI Anda memiliki kisi atau tata letak tabular, mungkin lebih mudah bagi pengguna untuk melihat dan menggunakan aplikasi Anda jika garis vertikal atau horizontal selaras dengan jahitan.

Gunakan jumlah kolom yang merata di kisi Anda, terutama untuk kontainer, tabel, dll. dan pertimbangan margin ke arah jahitan.

Selain itu, banyak aplikasi memanfaatkan UI layar parsial yang dilapisi di atas konten aplikasi. Tergantung pada ukurannya, Anda mungkin ingin antarmuka pengguna yang dilapisi mengambil semua layar kedua sebagai gantinya. Ini dapat membuat aplikasi Anda lebih dapat digunakan dan lebih bersih secara visual. Perlu diingat bahwa UI parsial yang dilapisi terkadang mungkin menyiratkan bahwa UI tersebut dapat diciutkan atau bersifat sementara, jadi perhatikan implikasi interaksi saat mengubah perilaku ini. Teknik ini mungkin lebih sesuai untuk perangkat berukuran lebih kecil.

Menyusun ulang elemen UI

Pindah ke salah satu sisi jahitan

Salah satu teknik tata letak responsif yang dapat Anda gunakan untuk mengoptimalkan perangkat layar ganda adalah mengatur ulang konten Anda saat orientasi layar atau ukuran berubah. Alih-alih meregangkan elemen aplikasi secara seketika di dua layar, Anda dapat mengatur ulang dengan pengelompokan yang lebih baik untuk menyesuaikan konten aplikasi Anda dengan lebih sengaja.

Masking dan pemisahan

Ada dua cara jahitan dapat ditangani oleh perangkat lunak. Salah satunya adalah masker, yang lain adalah untuk membagi.

Teknik masker merender gambar di belakang jahitan. Ketika gambar terhambat sebagian, otak kita secara alami menghubungkan bagian yang "tidak jelas". Teknik ini biasanya lebih baik untuk media (video, foto, dll.) serta untuk skenario jenis kanvas di mana menjaga kelangsungan gambar lebih penting daripada memastikan semua konten ditampilkan.

Teknik pemisahan merender gambar dengan memotongnya dan menariknya terpisah. Ini adalah perilaku yang sama dengan yang Anda alami saat aplikasi ditampilkan di beberapa monitor. Teknik ini berfungsi dengan baik untuk aplikasi yang memiliki banyak kontrol seperti tombol yang mungkin muncul di tengah dua layar.

Ada manfaat untuk setiap opsi tergantung pada jenis aplikasi yang dibuat, dan kami terus mempelajari tentang perilaku default terbaik untuk kasus yang berbeda.

Pola aplikasi layar ganda

Teknik yang sebelumnya dibahas terutama untuk mengakomodasi jahitan sehingga aplikasi terus memberikan nilai kepada pengguna. Pola berikut memungkinkan Anda memanfaatkan fakta ada dua layar.

Berikut adalah 5 pola layar ganda yang perlu Anda pertimbangkan. Ini bukan satu-satunya pola untuk perangkat layar ganda, tetapi disediakan di sini sebagai titik awal agar imajinasi Anda tumbuh.

Kanvas yang diperluas

Pola kanvas yang diperluas adalah pola layar ganda yang paling sederhana, tetapi sangat kuat. Anda dapat mempertimbangkan pola ini jika Anda memerlukan kanvas yang lebih besar untuk tugas seperti menggambar, atau jika aplikasi Anda memiliki kanvas yang mengalir bebas yang dapat digulir pengguna dengan bebas untuk menghindari jahitan jika beberapa konten penting dikaburkan. Ini memberikan manfaat memberi aplikasi Anda lebih banyak layar real estat, daripada membatasinya ke satu layar atau layar lainnya.

Pola ini hanya berlaku untuk bagian kanvas UI. Anda mungkin masih perlu menggunakan salah satu teknik lain untuk mengakomodasi jahitan jika akan mengaburkan bagian non-kanvas aplikasi.

Nilai kunci:

Memperluas kanvas memungkinkan pengguna untuk memanfaatkan real estat layar yang lebih besar yang disediakan oleh perangkat layar ganda.

Jenis aplikasi yang mungkin mendapat manfaat dari pola ini:

• Memetakan aplikasi
• Menggambar aplikasi kanvas

Detail daftar

Pola detail daftar memiliki panel utama (biasanya dengan tampilan daftar) dan panel detail untuk konten. Saat item dalam daftar dipilih, panel detail diperbarui. Pola ini secara alami baik ketika Anda memiliki area tampilan yang lebih luas. Ini sering digunakan untuk email dan buku alamat.

Memanfaatkan dua layar berbeda dan memposisikan ke batas alami, Anda dapat menggunakan satu layar untuk menampilkan daftar "item" dan yang lainnya untuk menampilkan detail item yang dipilih.

Seperti disebutkan sebelumnya, kami mulai mengamati kecenderungan pengguna untuk lebih memilih menggunakan tampilan lanskap ganda untuk memanfaatkan real estat layar yang lebih besar. Karena itu, Anda mungkin mempertimbangkan untuk menampilkan tampilan daftar dan detail secara berdampingan dalam mode potret ganda tetapi mengubah untuk hanya menampilkan tampilan daftar atau hanya tampilan detail dalam mode lanskap ganda.

Nilai kunci:

Memisahkan navigasi atau gambaran umum dari detail memungkinkan pengguna untuk menelusuri lebih dalam konten sambil tetap membumi mengenai posisi mereka dalam daftar/agregat keseluruhan.

Jenis aplikasi yang mungkin mendapat manfaat dari pola ini:

• Aplikasi yang memiliki daftar atau galeri
• Aplikasi email
• Aplikasi penjadwalan
• Aplikasi kurasi foto atau gambar
• Aplikasi musik dengan daftar putar dan detail lagu
• Aplikasi dengan struktur navigasi yang kuat

Dua halaman

Beberapa aplikasi secara alami cenderung memiliki pengalaman penomor seperti buku. Anda dapat menggunakan batas alami untuk menampilkan beberapa item dari koleksi—seperti halaman atau gambar—yang mungkin mengharuskan pengguna untuk melihatnya satu per satu.

Bergantung pada aplikasi, Anda dapat memutuskan untuk paginate per 2 halaman atau memajukan satu halaman pada satu waktu.

Nilai kunci:

Memanfaatkan metafora skeuomorphic buku untuk menampilkan satu halaman di setiap layar, sehingga lebih kondusif untuk membaca.

Jenis aplikasi yang mungkin mendapat manfaat dari pola ini:

• Aplikasi berorientasi dokumen
• Aplikasi dengan konten yang dipaginasi
• Aplikasi yang dibuat untuk dibaca
• Aplikasi dengan kanvas item (misalnya catatan, papan seni)

Tampilan ganda

Memiliki dua layar memberikan kemampuan alami untuk membandingkan dan membedakan dua versi dari jenis konten yang sama berdampingan, seperti dua gambar, daftar, atau dokumen.

Ini juga dapat digunakan untuk menampilkan informasi yang sama dengan dua cara yang berbeda pada saat yang sama, dengan setiap layar bekerja dengan mulus untuk memberikan informasi lebih lanjut kepada pengguna. Misalnya, 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 untuk memanfaatkan dukungan bawaan yang disediakan OS. Ini bisa berguna untuk membandingkan dua produk yang dibuka pada dua tab atau skenario serupa lainnya.

Nilai kunci:

Memiliki beberapa tampilan aplikasi yang sama dalam kontainer yang sama, memungkinkan perbandingan konten jenis serupa berdampingan.

Jenis aplikasi yang mungkin mendapat manfaat dari pola ini:

• Alat pengeditan yang mendapat manfaat dari memiliki status sebelum/sesudah 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)

Panel Pendamping

Pola panel pendamping adalah kesempatan besar untuk memanfaatkan real estat layar tambahan dengan mengambil permukaan tingkat kedua yang disembunyikan dan mengeksposnya saat aplikasi membentang.

Anda juga dapat memanfaatkan dua layar dengan menempatkan kanvas aplikasi di satu layar dan menggunakan layar lainnya untuk menyimpan alat yang memanipulasi konten kanvas. Saat menggunakan panel pendamping untuk skenario perkakas, karena ergonomi, kemungkinan lebih cocok untuk alat berada di kanan atau bawah, tetapi uji aplikasi Anda untuk melihat apa yang paling sesuai untuk aplikasi Anda.

Nilai kunci:

Perlihatkan konteks pelengkap untuk menambah tugas pengguna, biasanya dengan hubungan primer/sekunder, dengan meningkatkan ke permukaan fungsionalitas tingkat 2 yang sebelumnya terkubur untuk akses yang lebih cepat.

Memisahkan konten untuk dikonsumsi dari alat untuk interaksi memudahkan pengguna mengurai dan fokus pada konten. Ini memberikan pengalaman yang lebih ergoomi dengan memiliki alat yang lebih dekat ke tangan, terutama dalam mode lanskap ganda.

Jenis aplikasi yang mungkin mendapat manfaat dari pola ini:

• Aplikasi produktivitas yang memiliki informasi tambahan yang muncul di samping konten utama
• Alat kreatif seperti aplikasi gambar gambar
• Aplikasi editor musik atau video
• Aplikasi game

Langkah berikutnya

Pilih platform pengembangan untuk mempelajari cara membuat aplikasi layar ganda:

• Kotlin dan Java
• Flutter
• React Native
• Xamarin
• Pengembangan game Unity
• Teknologi web
• Windows