Rozmiary ekranu i punkty przerwania

Windows aplikacje działają na wielu urządzeniach, od tabletów i laptopów po komputery stacjonarne, duże monitory i telewizory. Zamiast optymalizowania interfejsu użytkownika dla każdego rozmiaru ekranu, należy zaprojektować kilka kluczowych kategorii szerokości nazywanych punktami przerwania:

  • Mały (mniejszy niż 640 pikseli)
  • Średni (od 641px do 1007px)
  • Duży (1008 pikseli i większy)

Tip

Projektując pod kątem określonych punktów przerwania, bierz pod uwagę dostępną przestrzeń ekranową dla aplikacji (okno aplikacji), a nie fizyczny rozmiar ekranu. Gdy aplikacja jest uruchamiana w trybie pełnoekranowym, okno aplikacji jest zgodne z rozmiarem ekranu. Gdy tak nie jest, okno jest mniejsze niż ekran.

Breakpoints

W tej tabeli opisano różne klasy rozmiarów i punkty przerwania.

Punkty graniczne projektowania responsywnego

Klasa rozmiaru Breakpoints Typowy rozmiar ekranu Urządzenia Rozmiary okien
Mały maksymalnie 640 pikseli Od 20 do 65" Telewizory 480x854, 540x960
Średni 641 – 1007 pikseli Od 7 do 12" Tablety 960x540
Duży 1008 pikseli i w górę 13" i w górę Komputery pc, laptopy, Surface Hub 1024x640, 1366x768, 1920x1080

Dlaczego telewizory są uważane za "małe"?

Większość telewizorów jest fizycznie duża (od 40 do 65 cali jest powszechna) i ma wysoką rozdzielczość (HD lub 4K). Jednak projektowanie z myślą o telewizorze 1080p, który ogląda się z odległości 10 stóp, różni się od projektowania z myślą o monitorze 1080p stojącym na biurku. Jeśli uwzględnić odległość oglądania, 1080 pikseli telewizora bardziej przypomina monitor o rozdzielczości 540 pikseli, ustawiony znacznie bliżej.

System pikseli efektywnych XAML automatycznie uwzględnia odległość oglądania. Po określeniu rozmiaru kontrolki lub zakresu punktów przerwania należy użyć efektywnych pikseli. Jeśli na przykład utworzysz kod dynamiczny dla 1080 pikseli lub więcej, monitor 1080p używa tego kodu, ale telewizor 1080p nie — ponieważ chociaż telewizor ma 1080 pikseli fizycznych, ma tylko 540 pikseli skutecznych. Dzięki temu projektowanie telewizora jest podobne do projektowania na małym ekranie.

Efektywne piksele i współczynnik skalowania

XAML automatycznie dostosowuje elementy interfejsu użytkownika, aby były czytelne i łatwe w obsłudze na wszystkich urządzeniach i przy wszystkich rozmiarach ekranów.

Gdy aplikacja działa na urządzeniu, system używa algorytmu do normalizacji sposobu wyświetlania elementów interfejsu użytkownika na ekranie. Ten algorytm skalowania uwzględnia odległość i gęstość ekranu (piksele na cal), aby zoptymalizować pod kątem postrzeganego rozmiaru, a nie rozmiaru fizycznego. Algorytm zapewnia, że czcionka o rozmiarze 24 px na dużym ekranie oddalonym o 10 stóp jest tak samo czytelna jak czcionka o rozmiarze 24 px na małym ekranie oddalonym o kilka cali.

Diagram przedstawiający sposób skalowania zawartości w różny sposób na urządzeniach w różnych odległościach wyświetlania.

Podczas projektowania aplikacji XAML projektujesz w efektywnych pikselach, a nie w rzeczywistych pikselach fizycznych. Efektywne piksele (epx) to wirtualna jednostka miary używana do wyrażania wymiarów układu i odstępów niezależnie od gęstości ekranu. (W naszych wytycznych epx, ep i px są używane zamiennie.)

Podczas projektowania można zignorować gęstość pikseli i rzeczywistą rozdzielczość ekranu. Zamiast tego należy zaprojektować efektywną rozdzielczość (rozdzielczość w efektywnych pikselach) dla klasy rozmiaru.

Tip

Podczas tworzenia makiety ekranu w programach do edycji obrazów ustaw dpi na 72 i ustaw wymiary obrazu na efektywną rozdzielczość dla docelowej klasy rozmiaru.

Wielokrotności liczby 4

Obraz o rozmiarze 4 epx skalowany do wielu rozmiarów bez użycia ułamkowych pikseli.

Rozmiary, marginesy i pozycje elementów interfejsu użytkownika powinny zawsze znajdować się w wielokrotnościach 4 epx w aplikacjach XAML.

XAML obsługuje skalowanie na różnych urządzeniach przy progach skalowania 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350% i 400%. Jednostka bazowa wynosi 4, ponieważ po przeskalowaniu do tych progów daje liczby całkowite (na przykład 4 × 125% = 5, 4 × 150% = 6). Stosowanie wielokrotności czterech dopasowuje wszystkie elementy UI do pełnych pikseli i zapewnia wyraźne, ostre krawędzie. (Tekst nie ma tego wymagania; tekst może mieć dowolny rozmiar i położenie).

  • Ostatnia aktualizacja o