Skärmstorlekar och brytpunkter

Windows appar körs på en mängd olika enheter, från surfplattor och bärbara datorer till stationära datorer, stora bildskärmar och TV-apparater. I stället för att optimera användargränssnittet för varje skärmstorlek utformar du några nyckelbreddskategorier som kallas brytpunkter:

  • Liten (mindre än 640px)
  • Medel (641px till 1007px)
  • Stor (1008px och större)

Tip

När du utformar för specifika brytpunkter utformar du för mängden skärmutrymme som är tillgängligt för din app (appens fönster), inte den fysiska skärmstorleken. När appen körs i helskärmsläge matchar appfönstret skärmstorleken. När det inte gör det är fönstret mindre än skärmen.

Breakpoints

Den här tabellen beskriver de olika storleksklasserna och brytpunkterna.

Dynamiska designbrytningar

Storleksklass Breakpoints Typisk skärmstorlek Devices Fönsterstorlekar
Liten upp till 640px 20 till 65 tum tv-apparater 480x854, 540x960
Medium 641 – 1 007px 7 till 12 tum Surfplatta 960x540
Stort 1008px och uppåt 13 tum och uppåt Datorer, bärbara datorer, Surface Hub 1024x640, 1366x768, 1920x1080

Varför anses TV-apparater vara "små"?

De flesta TV-apparater är fysiskt stora (40 till 65 tum är vanligt) och har höga upplösningar (HD eller 4K). Men att designa för en 1080p TV som du ser från 3 meter bort skiljer sig från att designa för en 1080p-bildskärm på skrivbordet. När du tar hänsyn till visningsavståndet är TV:ns 1 080 bildpunkter mer som en bildskärm på 540 bildpunkter som är mycket närmare.

XAML:s system för effektiva pixlar tar automatiskt hänsyn till visningsavståndet. När du anger en storlek för en kontroll eller ett brytpunktsintervall använder du effektiva bildpunkter. Om du till exempel skapar dynamisk kod för 1 080 bildpunkter eller mer använder en 1080p-bildskärm den koden, men en 1 080p-TV inte – för även om TV:n har 1 080 fysiska pixlar har den bara 540 effektiva pixlar. Detta gör design för en TV som liknar design för en liten skärm.

Effektiva pixlar och skalningsfaktor

XAML justerar automatiskt gränssnittselement så att de är läsbara och enkla att interagera med på alla enheter och skärmstorlekar.

När appen körs på en enhet använder systemet en algoritm för att normalisera hur gränssnittselement visas på skärmen. Den här skalningsalgoritmen tar hänsyn till visningsavstånd och skärmdensitet (bildpunkter per tum) för att optimera för upplevd storlek snarare än fysisk storlek. Algoritmen ser till att ett 24 px teckensnitt på en stor skärm 3 meter bort är lika läsbart som ett 24 px teckensnitt på en liten skärm några tum bort.

Diagram som visar hur innehållet skalas på olika sätt på enheter på olika visningsavstånd.

När du utformar din XAML-app designar du i effektiva pixlar, inte faktiska fysiska pixlar. Effektiva bildpunkter (epx) är en virtuell måttenhet som används för att uttrycka layoutdimensioner och avstånd, oberoende av skärmdensitet. (I våra riktlinjer används epx, ep och px omväxlande.)

Du kan ignorera pixeldensitet och den faktiska skärmupplösningen när du designar. Designa i stället för den effektiva upplösningen (upplösningen i effektiva bildpunkter) för en storleksklass.

Tip

När du skapar skärmutval i bildredigeringsprogram anger du DPI till 72 och ställer in bilddimensionerna på den effektiva upplösningen för den storleksklass som du riktar in dig på.

Multiplar av fyra

En 4 epx-bild skalas till många dimensioner utan bråkbildpunkter.

Storlek, marginaler och positioner för gränssnittselement bör alltid finnas i multiplar med 4 epx i dina XAML-appar.

XAML skalar över ett antal enheter med skalningsplatåer på 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350%och 400%. Basenheten är 4 eftersom den skalar till dessa platåer som ett heltal (till exempel 4 × 125% = 5, 4 × 150% = 6). Om du använder multiplar av fyra justeras alla gränssnittselement med hela bildpunkter och ger skarpa, skarpa kanter. (Texten har inte det här kravet. Texten kan ha valfri storlek och position.)

  • Last updated on