Ukuran layar dan titik henti

Aplikasi Windows dapat berjalan pada perangkat apa pun yang menjalankan Windows, yang mencakup tablet, desktop, TV, dan banyak lagi. Dengan sejumlah besar target perangkat dan ukuran layar di seluruh ekosistem Windows, daripada mengoptimalkan UI Anda untuk setiap perangkat, kami sarankan merancang untuk beberapa kategori lebar kunci (juga disebut "titik henti"):

• Kecil (lebih kecil dari 640px)
• Sedang (641px hingga 1007px)
• Besar (1008px dan lebih besar)

Tip

Saat merancang untuk titik henti tertentu, desain untuk jumlah ruang layar yang tersedia untuk aplikasi Anda (jendela aplikasi), bukan ukuran layar. Saat aplikasi berjalan layar penuh, jendela aplikasi berukuran sama dengan layar, tetapi ketika aplikasi tidak layar penuh, jendela lebih kecil dari layar.

Titik Henti

Tabel ini menjelaskan berbagai kelas ukuran dan titik henti.

Kelas ukuran	Titik Henti	Ukuran layar umum	Perangkat	Ukuran Jendela
Kecil	hingga 640px	20" hingga 65"	Tv	320x569, 360x640, 480x854
Medium	641 - 1007px	7" hingga 12"	Tablet	960x540
Besar	1008px ke atas	13" dan ke atas	PC, Laptop, Surface Hub	1024x640, 1366x768, 1920x1080

Mengapa TV dianggap "kecil"?

Sementara sebagian besar TV secara fisik cukup besar (40 hingga 65 inci adalah umum) dan memiliki resolusi tinggi (HD atau 4k), merancang untuk TV 1080P yang Anda lihat dari 10 kaki jauhnya berbeda dari merancang untuk monitor 1080p duduk satu kaki di meja Anda. Saat Anda memperkirakan jarak, 1080 piksel TV lebih mirip monitor 540 piksel yang jauh lebih dekat.

Sistem piksel efektif XAML secara otomatis mengambil jarak tampilan untuk Anda. Saat Anda menentukan ukuran untuk kontrol atau rentang titik henti, Anda benar-benar menggunakan piksel "efektif". Misalnya, jika Anda membuat kode responsif untuk 1080 piksel atau lebih, monitor 1080 akan menggunakan kode tersebut, tetapi TV 1080p tidak akan --karena meskipun TV 1080p memiliki 1080 piksel fisik, itu hanya memiliki 540 piksel efektif. Yang membuat desain untuk TV mirip dengan desain untuk layar kecil.

Piksel dan faktor skala yang efektif

XAML membantu dengan menyesuaikan elemen UI secara otomatis sehingga mudah terbaca dan mudah berinteraksi di semua perangkat dan ukuran layar.

Saat aplikasi Anda berjalan di perangkat, sistem menggunakan algoritma untuk menormalkan cara elemen UI ditampilkan di layar. Algoritma penskalaan ini memperhitungkan jarak tampilan dan kepadatan layar (piksel per inci) untuk mengoptimalkan ukuran yang dirasakan (bukan ukuran fisik). Algoritma penskalaan memastikan bahwa font 24 px di Surface Hub berjarak 10 kaki sama mudahnya bagi pengguna sebagai font 24 px pada ponsel 5" yang berjarak beberapa inci.

Karena cara kerja sistem penskalaan, saat Anda merancang aplikasi XAML, Anda merancang dalam piksel yang efektif, bukan piksel fisik aktual. Piksel efektif (epx) adalah unit pengukuran virtual, dan digunakan untuk mengekspresikan dimensi tata letak dan spasi, terlepas dari kepadatan layar. (Dalam pedoman kami, epx, ep, dan px digunakan secara bergantian.)

Anda dapat mengabaikan kepadatan piksel dan resolusi layar aktual saat merancang. Sebagai gantinya, rancang resolusi efektif (resolusi dalam piksel efektif) untuk kelas ukuran (untuk detailnya, lihat artikel Ukuran layar dan titik henti).

Tip

Saat membuat mockup layar dalam program pengeditan gambar, atur DPI ke 72 dan atur dimensi gambar ke resolusi efektif untuk kelas ukuran yang Anda targetkan.

Kelipatan Empat

Ukuran, margin, dan posisi elemen UI harus selalu berada di kelipatan 4 epx di aplikasi UWP Anda.

XAML menskalakan di berbagai perangkat dengan dataran tinggi penskalaan 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350%, dan 400%. Unit dasar adalah 4 karena dapat diskalakan ke dataran tinggi ini sebagai angka keseluruhan (misalnya; 4 x 125% = 5, 4 x 150% = 6). Menggunakan kelipatan empat menyelaraskan semua elemen UI dengan seluruh piksel dan memastikan elemen UI memiliki tepi tajam yang tajam. (Perhatikan bahwa teks tidak memiliki persyaratan ini; teks dapat memiliki ukuran dan posisi apa pun.)