Dimensioni dello schermo e punti di interruzione

Windows le app vengono eseguite su un'ampia gamma di dispositivi, da tablet e portatili a desktop, monitor di grandi dimensioni e TELEVISORi. Invece di ottimizzare l'interfaccia utente per ogni dimensione dello schermo, progettare alcune categorie di larghezza chiave denominate punti di interruzione:

  • Piccole dimensioni (inferiore a 640 pixel)
  • Medie dimensioni (da 641 a 1007 pixel)
  • Grandi dimensioni (1008 pixel e oltre)

Suggerimento

Quando progetti per punti di interruzione specifici, progetta la quantità di spazio sullo schermo disponibile per la tua app (la finestra dell'app), non le dimensioni fisiche dello schermo. Quando l'app viene eseguita a schermo intero, la finestra dell'app corrisponde alle dimensioni dello schermo. In caso contrario, la finestra è più piccola dello schermo.

Punti di interruzione

In questa tabella vengono descritte le diverse classi di dimensioni e i punti di interruzione.

Punti di interruzione per il responsive design

Classe di dimensione Punti di interruzione Dimensioni dello schermo tipiche Dispositivi Dimensioni finestra
Piccolo fino a 640 px Da 20" a 65" Televisori 480x854, 540x960
Medio 641 - 1007 px Da 7" a 12" Tablet 960x540
Grande 1008 px e su 13" e oltre PC, portatili, Surface Hub 1024x640, 1366x768, 1920x1080

Perché le TV sono considerate di "piccole dimensioni"?

La maggior parte dei televisori è fisicamente grande (da 40 a 65 pollici è comune) e ha risoluzioni elevate (HD o 4K). Tuttavia, la progettazione per una TV a 1080p che si visualizza da 10 metri di distanza è diversa dalla progettazione per un monitor da 1080p sulla scrivania. Quando si tiene conto della distanza di visualizzazione, i 1080 pixel della TV sono più simili a un monitor da 540 pixel molto più vicino.

L'effettivo sistema pixel di XAML consente di visualizzare automaticamente la distanza. Quando si specifica una dimensione per un controllo o un intervallo di punti di interruzione, si usano pixel effettivi . Ad esempio, se si crea codice responsivo per 1080 pixel o più, un monitor 1080p utilizza quel codice, ma un televisore 1080p no, perché, sebbene il televisore abbia 1080 pixel fisici, ha solo 540 pixel effettivi. Questo rende la progettazione per una TV simile alla progettazione per uno schermo piccolo.

Pixel effettivi e fattore di scala

XAML regola automaticamente gli elementi dell'interfaccia utente in modo che siano leggibili e facili da interagire con su tutti i dispositivi e le dimensioni dello schermo.

Quando l'app viene eseguita in un dispositivo, il sistema usa un algoritmo per normalizzare la modalità di visualizzazione degli elementi dell'interfaccia utente sullo schermo. Questo algoritmo di ridimensionamento tiene conto della distanza di visualizzazione e della densità dello schermo (pixel per pollice) per ottimizzare le dimensioni percepite anziché le dimensioni fisiche. L'algoritmo garantisce che un tipo di carattere da 24 px su uno schermo grande a 10 metri di distanza sia leggibile come un tipo di carattere da 24 px su uno schermo piccolo a pochi centimetri di distanza.

Diagramma che mostra come il contenuto viene ridimensionato in modo diverso nei dispositivi a distanze di visualizzazione diverse.

Quando si progetta l'app XAML, si progetta in pixel effettivi, non in pixel fisici effettivi. I pixel effettivi (epx) sono un'unità virtuale di misura usata per esprimere dimensioni e spaziatura del layout, indipendentemente dalla densità dello schermo. Nelle nostre indicazioni, i termini epx, ep e px sono interscambiabili.

È possibile ignorare la densità dei pixel e la risoluzione effettiva dello schermo durante la progettazione. Progettare invece la risoluzione effettiva (la risoluzione in pixel effettivi) per una classe di dimensioni.

Suggerimento

Quando si creano mockup dello schermo nei programmi di modifica delle immagini, impostare il valore DPI su 72 e impostare le dimensioni dell'immagine sulla risoluzione effettiva per la classe di dimensioni di destinazione.

Multipli di quattro

Immagine da 4 epx ridimensionata a molte dimensioni senza pixel frazionari.

Le dimensioni, i margini e le posizioni degli elementi dell'interfaccia utente devono essere sempre in multipli di 4 epx nelle app XAML.

XAML si adatta a una gamma di dispositivi con livelli di ridimensionamento pari a 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350% e 400%. L'unità di base è 4 perché viene ridimensionata su questi altipiani come numero intero (ad esempio, 4 × 125% = 5, 4 × 150% = 6). L'uso di multipli di quattro allinea tutti gli elementi dell'interfaccia utente su pixel interi e garantisce contorni netti e ben definiti. Il testo non ha questo requisito. Il testo può avere qualsiasi dimensione e posizione.

  • Last updated on