Porting Windows Phone Silverlight ke UWP untuk faktor bentuk dan UX

Topik sebelumnya adalah Porting bisnis dan lapisan data.

Windows aplikasi berbagi tampilan dan nuansa umum di seluruh PC, perangkat seluler, dan banyak jenis perangkat lainnya. Antarmuka pengguna, input, dan pola interaksi sangat mirip, dan pengguna yang bergerak di antara perangkat akan menyambut pengalaman yang akrab. Perbedaan antara perangkat seperti ukuran fisik, orientasi default, dan faktor resolusi piksel yang efektif ke dalam cara aplikasi Universal Windows Platform (UWP) dirender oleh Windows 10. Kabar baiknya adalah bahwa banyak pengangkatan berat ditangani untuk Anda oleh sistem menggunakan konsep cerdas seperti piksel yang efektif.

Faktor bentuk dan pengalaman pengguna yang berbeda

Perangkat yang berbeda memiliki beberapa kemungkinan potret dan resolusi lanskap, dalam berbagai rasio aspek. Bagaimana aspek visual antarmuka, teks, dan asetnya dari skala aplikasi UWP Anda? Bagaimana Anda dapat mendukung sentuhan serta input mouse dan keyboard? Dan dengan aplikasi yang mendukung sentuhan pada perangkat berukuran berbeda dengan jarak pandang yang berbeda, bagaimana kontrol keduanya dapat menjadi target sentuhan berukuran tepat pada kepadatan piksel yang berbeda dan kontennya dapat dibaca pada jarak yang berbeda? Bagian berikut membahas hal-hal yang perlu Anda ketahui.

Berapa ukuran layarnya?

Jawaban singkatnya adalah bahwa itu subjektif, karena tidak hanya tergantung pada ukuran objektif tampilan tetapi juga pada seberapa jauh dari itu Anda. Subjektivitas berarti bahwa kita harus menempatkan diri kita dalam sepatu pengguna, dan itu adalah sesuatu yang dilakukan pengembang aplikasi yang baik dalam kasus apa pun.

Secara objektif, layar diukur dalam satuan inci, dan piksel fisik (mentah). Mengetahui kedua metrik tersebut memungkinkan Anda mengetahui berapa banyak piksel yang sesuai dengan satu inci. Itu adalah kepadatan piksel, juga dikenal sebagai DPI (titik per inci), juga dikenal sebagai PPI (piksel per inci). Dan timbal balik DPI adalah ukuran fisik piksel sebagai pecahan inci. Kepadatan piksel juga dikenal sebagai resolusi, meskipun istilah tersebut sering digunakan secara longgar untuk berarti jumlah piksel.

Ketika melihat jarak meningkat, semua metrik tujuan tersebut tampak lebih kecil, dan mereka menyelesaikan ke ukuran efektif layar, dan resolusi efektifnya. Telepon Anda biasanya dipegang paling dekat dengan mata Anda; tablet Anda kemudian monitor PC Anda berikutnya, dan yang terjauh Surface Hub perangkat dan TV. Untuk mengimbangi, perangkat cenderung menjadi lebih besar secara objektif dengan jarak pandang. Saat Anda mengatur ukuran pada elemen UI, Anda mengatur ukuran tersebut dalam unit yang disebut piksel efektif (epx). Dan Windows 10 akan memperhitungkan DPI, dan jarak pandang khas dari perangkat, untuk menghitung ukuran terbaik elemen UI Anda dalam piksel fisik untuk memberikan pengalaman menonton terbaik. Lihat Melihat/efektif piksel, melihat jarak, dan faktor skala.

Meskipun demikian, kami sarankan Anda menguji aplikasi dengan banyak perangkat yang berbeda sehingga Anda dapat mengonfirmasi setiap pengalaman sendiri.

Resolusi sentuh dan resolusi tampilan

Keseharian (widget UI) harus berukuran tepat untuk disentuh. Jadi, target sentuhan perlu lebih atau kurang mempertahankan ukuran fisiknya di berbagai perangkat yang mungkin memiliki kepadatan piksel yang berbeda. Piksel efektif juga membantu Anda di sini: diskalakan pada perangkat yang berbeda—dengan mempertimbangkan kepadatan piksel—untuk mencapai ukuran fisik konstan yang lebih atau kurang yang ideal untuk target sentuhan.

Teks harus berukuran tepat untuk dibaca (teks 12 titik pada jarak pandang 20 inci adalah aturan praktis yang baik), dan gambar harus berukuran tepat dan resolusi efektif, untuk jarak pandang. Pada perangkat yang berbeda, penskalakan piksel efektif yang sama membuat elemen UI tetap berukuran tepat dan dapat dibaca. Teks dan grafik berbasis vektor lainnya menskalakan secara otomatis, dan sangat baik. Grafik berbasis Raster (bitmap) juga diskalakan secara otomatis jika pengembang menyediakan aset dalam satu ukuran besar. Namun, sebaiknya pengembang menyediakan setiap aset dalam berbagai ukuran sehingga yang sesuai untuk faktor penskalaan perangkat target dapat dimuat secara otomatis. Untuk informasi selengkapnya tentang itu, lihat Melihat/efektif piksel, melihat jarak, dan faktor skala.

Tata letak, dan Visual State Manager adaptif

Kami telah menjelaskan faktor-faktor yang terlibat dalam pemahaman yang bermakna tentang ukuran layar. Sekarang, mari kita pikirkan tata letak aplikasi Anda, dan cara menggunakan real estat layar tambahan saat tersedia. Pertimbangkan halaman ini dari aplikasi yang sangat sederhana yang dirancang untuk berjalan pada perangkat seluler yang sempit. Seperti apa tampilan halaman ini pada layar yang lebih besar?

the ported windows phone store app

Versi seluler dibatasi pada orientasi khusus potret karena itulah rasio aspek terbaik untuk daftar buku; dan kami akan melakukan hal yang sama untuk halaman teks, yang paling baik disimpan ke satu kolom di perangkat seluler. Tetapi, layar PC dan tablet besar dalam orientasi, sehingga batasan perangkat seluler tampaknya seperti batasan yang tidak perlu pada perangkat yang lebih besar.

Secara optik memperbesar tampilan aplikasi agar terlihat seperti versi seluler, hanya lebih besar, tidak memanfaatkan perangkat dan ruang tambahannya, dan itu tidak melayani pengguna dengan baik. Kita harus berpikir untuk menampilkan lebih banyak konten, daripada konten yang sama lebih besar. Bahkan pada phablet, kita bisa menampilkan beberapa baris konten lagi. Kita bisa menggunakan ruang ekstra untuk menampilkan konten yang berbeda, seperti iklan, atau kita dapat mengubah kotak daftar menjadi tampilan daftar dan membungkus item menjadi beberapa kolom, kapan bisa, untuk menggunakan ruang seperti itu. Lihat Panduan untuk kontrol tampilan daftar dan kisi.

Selain kontrol baru seperti tampilan daftar dan tampilan kisi, sebagian besar jenis tata letak yang ditetapkan dari Windows Phone Silverlight memiliki yang setara di Universal Windows Platform (UWP). Misalnya, Canvas, Grid, dan StackPanel. Porting sebagian besar UI yang menggunakan jenis ini harus mudah, tetapi selalu cari cara untuk memanfaatkan kemampuan tata letak dinamis panel tata letak ini untuk mengubah ukuran dan menjabarkan ulang secara otomatis pada perangkat dengan ukuran yang berbeda.

Melampaui tata letak dinamis yang disertakan dalam kontrol sistem dan panel tata letak, kita dapat menggunakan fitur Windows 10 baru yang disebut Adaptive Visual State Manager.

Modalitas input

Antarmuka Windows Phone Silverlight bersifat khusus sentuhan. Dan antarmuka aplikasi port Anda tentu saja juga harus mendukung sentuhan, tetapi Anda dapat memilih untuk mendukung modalitas input lainnya selain itu, seperti mouse dan keyboard. Di UWP, input mouse, pena, dan sentuhan disatukan sebagai input penunjuk. Untuk informasi selengkapnya, lihat Menangani input penunjuk, dan Interaksi keyboard.

Memaksimalkan markup dan penggunaan ulang kode

Lihat kembali daftar memaksimalkan markup dan penggunaan kembali kode untuk teknik berbagi UI Anda ke perangkat target dengan berbagai faktor bentuk.

Info selengkapnya dan panduan desain