Dimensioni dello schermo e punti di interruzioneScreen sizes and breakpoints

Le app di Windows possono essere eseguite su dispositivi Windows, inclusi telefoni, tablet, desktop, TV e altro ancora.Windows apps can run on any device running Windows, which includes phones, tablets, desktops, TVs, and more. In seguito al numero altissimo di dispositivi di destinazione e di dimensioni dello schermo nell'ecosistema di Windows 10, anziché ottimizzare l'interfaccia utente di ogni dispositivo, consigliamo di concentrare la progettazione su poche categorie di larghezze chiave, note anche come "punti di interruzione":With a huge number of device targets and screen sizes across the Windows 10 ecosystem, rather than optimizing your UI for each device, we recommended designing for a few key width categories (also called "breakpoints"):

  • Piccole dimensioni (inferiore a 640 pixel)Small (smaller than 640px)
  • Medie dimensioni (da 641 a 1007 pixel)Medium (641px to 1007px)
  • Grandi dimensioni (1008 pixel e oltre)Large (1008px and larger)

Suggerimento

Durante la progettazione per punti di interruzione specifici, tieni conto della quantità di spazio sullo schermo disponibile per la tua app (finestra dell'app), non delle dimensioni dello schermo.When designing for specific breakpoints, design for the amount of screen space available to your app (the app's window), not the screen size. Quando l'app è in esecuzione a schermo intero, la finestra dell'app ha le stesse dimensioni dello schermo, ma quando l'app non è a schermo intero, la finestra è più piccola dello schermo.When the app is running full-screen, the app window is the same size as the screen, but when the app is not full-screen, the window is smaller than the screen.

Punti di interruzioneBreakpoints

In questa tabella vengono descritte le diverse classi di dimensioni e i punti di interruzione.This table describes the different size classes and breakpoints.

Punti di interruzione per il responsive design

Classe di dimensioniSize class Punti di interruzioneBreakpoints Dimensioni tipiche dello schermo (diagonale)Typical screen size (diagonal) DispositiviDevices Dimensioni della finestraWindow sizes
PiccoloSmall Fino a 640 px640px or less Da 4" a 6"; da 20" a 65"4" to 6"; 20" to 65" Telefoni, TVPhones, TVs 320x569, 360x640, 480x854320x569, 360x640, 480x854
MedioMedium Da 641 px a 1007 px641px to 1007px Da 7" a 12"7" to 12" Phablet, tabletPhablets, tablets 960x540960x540
GrandeLarge Da 1008 px in avanti1008px or greater Da 13" in su13" and larger PC, portatili, Surface HubPCs, laptops, Surface Hubs 1024x640, 1366x768, 1920x10801024x640, 1366x768, 1920x1080

Perché le TV sono considerate di "piccole dimensioni"?Why are TVs considered "small"?

Sebbene la maggior parte dei televisori sia fisicamente abbastanza grande (da 40 a 65 pollici è una dimensione comune) e ad alta risoluzione (HD o 4K), la progettazione di una TV 1080P da 10 piedi di distanza è diversa dalla progettazione di un monitor 1080p alla distanza di un piede dalla tua scrivania.While most TVs are physically quite large (40 to 65 inches is common) and have high resolutions (HD or 4k), designing for a 1080P TV that you view from 10 feet away is different from designing for a 1080p monitor sitting a foot away on your desk. Quando si tiene conto della distanza, i 1080 pixel della TV sono più simili a un monitor da 540 pixel che è molto più vicino.When you account for distance, the TV's 1080 pixels are more like a 540-pixel monitor that's much closer.

L'efficace sistema pixel UWP (Universal Windows Platform) prende automaticamente in considerazione la distanza di visualizzazione.UWP's effective pixel system automatically takes viewing distance in account for you. Quando specifichi una dimensione per un controllo o un intervallo di punti di interruzione, stai in realtà utilizzando pixel "effettivi".When you specify a size for a control or a breakpoint range, you're actually using "effective" pixels. Ad esempio, se crei un codice reattivo per 1080 pixel o per un valore superiore, un monitor 1080 utilizzerà quel codice, ma una TV a 1080p non lo farà perché anche se una TV 1080p ha 1080 pixel fisici, ha solo 540 pixel effettivi.For example, if you create responsive code for 1080 pixels and higher, a 1080 monitor will use that code, but a 1080p TV will not--because although a 1080p TV has 1080 physical pixels, it only has 540 effective pixels. Il che rende la progettazione di una TV simile alla progettazione di un telefono.Which makes designing for a TV similar to designing for a phone.

Pixel effettivi e fattore di scalaEffective pixels and scale factor

Le app UWP ridimensionano automaticamente l'interfaccia utente per garantire che la tua app possa essere leggibile in tutti i dispositivi Windows 10.UWP apps automatically scale your UI to guarantee that your app will be legible on all Windows 10 devices. Windows si ridimensiona automaticamente per ogni visualizzazione in base ai relativi valori DPI (punti per pollice) e alla distanza di visualizzazione del dispositivo.Windows automatically scales for each display based on its DPI (dots-per-inch) and the viewing distance of the device. Gli utenti possono ignorare il valore predefinito passando alla pagina delle impostazioni da Impostazioni > Schermo > Scala e layout.Users can override the default value and by going to Settings > Display > Scale and layout settings page.

Indicazioni generaliGeneral recommendations

PiccoloSmall

  • Imposta i margini sinistro e destro della finestra su 12 pixel per creare una separazione visiva tra i bordi sinistro e destro della finestra dell'app.Set left and right window margins to 12px to create a visual separation between the left and right edges of the app window.
  • Imposta le barre dell'app ancorate alla parte inferiore della finestra per migliorare la raggiungibilità.Dock app bars to the bottom of the window for improved reachability.
  • Usa una colonna o un'area alla volta.Use one column/region at a time.
  • Usa un'icona per rappresentare la ricerca (non visualizzare una casella di ricerca).Use an icon to represent search (don't show a search box).
  • Imposta il riquadro di spostamento in modalità di sovrimpressione per risparmiare spazio sullo schermo.Put the navigation pane in overlay mode to conserve screen space.
  • Se usi il modello master/dettagli, usa la modalità di presentazione in pila per risparmiare spazio sullo schermo.If you're using the master details pattern, use the stacked presentation mode to save screen space.

MedioMedium

  • Imposta i margini sinistro e destro della finestra su 24 pixel per creare una separazione visiva tra i bordi sinistro e destro della finestra dell'app.Set left and right window margins to 24px to create a visual separation between the left and right edges of the app window.
  • Posiziona gli elementi di comando come le barre dell'app nella parte superiore della finestra dell'app.Put command elements like app bars at the top of the app window.
  • Usa fino a due colonne/aree geografiche.Use up to two columns/regions.
  • Visualizza la casella di ricerca.Show the search box.
  • Imposta il riquadro di spostamento in modalità frammento, per mantenere sempre visualizzata una striscia stretta di icone.Put the navigation pane into sliver mode so a narrow strip of icons always shows.
  • Valuta la possibilità di personalizzare ulteriormente l'esperienza d'uso del televisore.Consider further tailoring for TV experiences.

GrandeLarge

  • Imposta i margini sinistro e destro della finestra su 24 pixel per creare una separazione visiva tra i bordi sinistro e destro della finestra dell'app.Set left and right window margins to 24px to create a visual separation between the left and right edges of the app window.
  • Posiziona gli elementi di comando come le barre dell'app nella parte superiore della finestra dell'app.Put command elements like app bars at the top of the app window.
  • Usa fino a tre colonne/aree geografiche.Use up to three columns/regions.
  • Visualizza la casella di ricerca.Show the search box.
  • Imposta il riquadro di spostamento in modalità ancorata in modo che sia sempre visualizzato.Put the navigation pane into docked mode so that it always shows.