Linee guida per le cornici di visualizzazione arrotondate

Panoramica

Come parte del nuovo linguaggio di progettazione unico di Windows 11, gli angoli arrotondati svolgono un ruolo integrale nell'aspetto e nell'aspetto dell'interfaccia utente. La percezione complessiva dell'arrotondamento nel sistema è modellata sia dall'arrotondamento software, controllata dal sistema operativo che dall'arrotondamento hardware, controllata dai partner OEM. Questo argomento fornisce indicazioni Microsoft per i partner OEM relativi all'arrotondamento delle cornici di visualizzazione hardware per ottenere la migliore esperienza utente e sviluppatore.

Anche se i partner OEM sono liberi di differenziare le loro progettazioni hardware con diversi raggi hardware arrotondamento hardware e proprietà di visualizzazione, il sistema operativo supporta solo l'arrotondamento fornito con Windows 11. Non supportiamo i raggi arbitrari per il software in modo che corrispondano a raggi arbitrari per l'hardware a causa di una complessità elevata nell'implementazione del sistema e per evitare di inserire il carico nell'ecosistema di sviluppatori dell'app per programmare contro un numero illimitato di combinazioni di raggi software e hardware. Pertanto, questo argomento consente di calcolare i pixel effettivi che l'arrotondamento hardware ritaglierà in base al fattore di scala di visualizzazione in modo da poter sapere quale intervallo di radi hardware usare in modo sicuro senza degradare l'interfaccia utente.

Nota

Tutti i fattori di scala in questo argomento fanno riferimento al ridimensionamento di Desktop.

Ridimensionamento lineare arrotondamento software

Windows 11 viene fornito con due raggi disponibili per l'arrotondamento – 4 px per i controlli, ad esempio pulsanti e campi di input, e 8 px per i menu a comparsa e le finestre dell'app principale. Ai fini di questo argomento, il raggio 8 px è il raggio di arrotondamento software predefinito.

La progettazione dell'arrotondamento software in Windows 11 si basa su un raggio di 8 px a 96 DPI e questa scala in modo lineare, come illustrato nella tabella seguente:

Fattore di scala DPI	Pixel finestra arrotondati
100%	8
150%	12
200%	16

Questa semplice relazione lineare consente di illustrare il modo in cui Windows ridimensiona il suo arrotondamento, ma la quantità di ritaglio dipende dalla risoluzione nativa del display e dal fattore di scala. Ad esempio, un display con un fattore di scala predefinito del 200% ritaglierà l'interfaccia utente minore dello stesso display impostato sul 100% perché il 100% renderebbe il contenuto più piccolo rispetto al 200%. In questo esempio viene visualizzato un pixel effettivo uguale a un pixel fisico al 100%, quindi vengono ritagliati più pixel.

Calcolo del fattore di scalabilità predefinito di Windows e risoluzione efficace

La quantità di ritaglio dell'interfaccia utente che arrotondare le cornici influirà sul fattore di scala del sistema operativo e sulla risoluzione e le dimensioni della visualizzazione, un valore predefinito per il quale viene scelto dal sistema in base alle formule e alle variabili seguenti.

Importante

Poiché quasi tutti gli utenti non modificano il fattore di scala predefinito, deve essere la linea di base per tutti i calcoli relativi al ritaglio dell'interfaccia utente con le cornici arrotondate.

Densità pixel

La prima variabile nella formula del fattore di scala predefinita che Windows deve conoscere è la densità di pixel per pollice (DPI) dello schermo. Questo è dato dalla formula seguente e viene predeterminato dal produttore di display:

Visualizzazione distanza

Poiché la distanza di visualizzazione influisce sul modo in cui gli oggetti sullo schermo vengono visualizzati dall'utente quando vengono combinati con dpi nativi, i fattori di sistema vengono inseriti nei calcoli quando si decide su un fattore di scala predefinito. La distanza di visualizzazione di un display è approssimativamente basata sulla dimensione fisica e sul tipo di dispositivo, come illustrato nella tabella seguente:

Nota

Questo elenco non è esaustivo per tutti i possibili tipi di dispositivo.

Tipo di dispositivo	Visualizzazione distanza (in pollici)
Piccolo tablet	16.3
Tablet	20
Laptop	24.5
Desktop	28
TV	84

Zoom ottimale

Lo zoom ottimale è il livello decimale preciso di ridimensionamento che Windows ritiene sia migliore per un display. Questo esegue il mapping approssimativamente al fattore di scala predefinito, che accetta lo zoom ottimale e si arrotonda al 25% più vicino all'interno di un intervallo con ambito. Windows calcola il livello di zoom ottimale per un display basato sulla distanza di visualizzazione e dpi nativa. Si noti che 96 è il dpi predefinito e 28 è la distanza di visualizzazione predefinita nel sistema.

Fattore di scala massima

Le informazioni finali di Windows richiedono di determinare un fattore di scala predefinito è il fattore di scala massimo di un display o il livello superiore al quale non ridimensiona il contenuto per evitare problemi di accessibilità (ad esempio, una finestra di messaggio così grande che il pulsante OK è fuori dalla schermata). Il fattore di scala massimo è determinato dalla risoluzione verticale del display.

Risoluzione verticale	Fattore di scala massima
< 900	100%
>= 900 e < 1080	125%
>= 1080 e < 1440	150%
>= 1440 e < 1800	200%
>= 1800	250%

Fattore di scalabilità predefinito

Infine, il fattore di scala predefinito viene deciso in base allo zoom ottimale. In modo efficace, il fattore di scala predefinito esegue semplicemente l'arrotondamento ottimale verso l'incremento del 25% più vicino, con un minimo del 100% e un massimo di Max Scale Factor.

Zoom ottimale	Fattore di scalabilità predefinito
< 1.2	100%
>= 1.2 e < 1.43	125%
>= 1,43 e < 1,78	150%
>= 1,78 e < 2,32	200%
>= 2.32 e < Max Scale Factor	250%
> Fattore di scala massima	Fattore di scala massima

Calcolo della risoluzione effettiva

Una volta noto il fattore di scala predefinito, la risoluzione nativa viene ridimensionata per determinare la risoluzione effettiva per la visualizzazione.

Procedura dettagliata - Misurazione di pixel effettivi ritagliati da cornici hardware arrotondate

Quando si valuta l'impatto dell'interfaccia utente di diverse curvature e raggi di angoli di visualizzazione arrotondati, il primo risultato da misurare è il pixel fisico che viene ritagliato dalla cornice alla risoluzione nativa, che può quindi essere diviso per il fattore di scala. In questa sezione verrà illustrato un esempio di misurazione dei pixel fisici ritagliati per una visualizzazione ipotetica con le proprietà seguenti:

Proprietà o calcolo	Valore
Dimensioni dello schermo	12,4 pollici
Risoluzione orizzontale	2560
Risoluzione verticale	1600
DPI nativo	243.46
Distanza di visualizzazione	24,5 pollici (tipo di dispositivo portatile)
Zoom ottimale	2.2
Fattore di scala massima	200%
Fattore di scala predefinito	200%
Raggio di arrotondamento destinazione	2,2 mm

Cerchio formato dalla cornice arrotondata

Per questo esempio, si vuole arrotondare la cornice di 2,2 mm. L'arco prodotto da questa quantità di arrotondamento forma un cerchio quarto che può essere sovrapposto con l'angolo del rettangolo di visualizzazione normale, evidenziato in rosso nell'immagine seguente:

Il raggio del cerchio completo viene calcolato con la formula seguente:

25,4 è la conversione di millimetri in pollici, perché i display e DPI vengono misurati in pollici mentre i raggi arrotondati vengono misurati in millimetri. Per la visualizzazione dell'esempio, il risultato è un raggio di 21,09 px. L'area totale di questo cerchio è data dalla formula di area del cerchio standard:

Il cerchio della cornice arrotondata della visualizzazione di esempio ha un'area di 1395,84 px.

Angolo quadrato

Il quadrato che circonda il cerchio di arrotondamento ha una lunghezza laterale uguale al diametro del cerchio, calcolato come segue:

L'area di questo quadrato è data dalla formula di area quadrata standard:

Per questo esempio, il quadrato ha una lunghezza laterale di 42,17 px e un'area di 1778,51 px.

Pixel fisici ritagliati per angolo

Con il raggio del cerchio angolare noto, è possibile calcolare l'area totale ritagliata da questo cerchio e dividere per 4 per ottenere i pixel ritagliati nell'angolo di visualizzazione.

Il numero di pixel ritagliati per angolo per la visualizzazione di esempio è 95,42 px, che include pixel frazionari. Nell'immagine seguente, l'area del quadrante desiderata è evidenziata da vari colori per illustrare approssimativamente i pixel interi ritagliati dalla cornice arrotondata. Questa immagine mostra anche i contorni del cerchio dell'angolo e del quadrato dell'angolo che lo circonda.

Il numero approssimativo di pixel interi ritagliati in questo esempio è 92 px per questo angolo dello schermo.

Pixel effettivi ritagliati

Infine, è possibile dividere i pixel fisici ritagliati dal fattore di scala per determinare il numero di pixel effettivi bloccati.

Con un fattore di scala predefinito del 200%, questo risultato è 47,72 epx ritagliato per angolo per questo esempio.

Radii di arrotondamento consigliato

La quantità di interfaccia utente ritagliata dalle cornici arrotondate di uno schermo è influenzata dal raggio di arrotondamento desiderato, che determina il raggio del cerchio dell'angolo della cornice.

Avviso

In base ai test interni su un dispositivo con raggio di arrotondamento di 3 mm, l'intervallo consigliato di lunghezze del raggio del cerchio angolare che funziona con la progettazione dell'arrotondamento di Windows 11 è di 16-24 pixel effettivi (epx). Qualsiasi raggio al di sopra di questo intervallo può ridurre l'interfaccia utente e non è supportato. Qualsiasi raggio inferiore a questo intervallo non creerà problemi di ritaglio dell'interfaccia utente, ma potrebbe creare una tensione di concentricità tra gli angoli di arrotondamento dello schermo e l'interfaccia utente. In altre parole, la differenza tra il raggio dell'angolo della cornice e il raggio di arrotondamento della finestra inizierà a differire notevolmente e inizierà a influire sulla percezione visiva dell'utente del sistema.

Tenendo conto del fattore di scala predefinito del 200%, l'esempio visualizzato dalla procedura dettagliata ha un cerchio di arrotondamento con un raggio effettivo di 10,55 epx. Pertanto, l'interfaccia utente non verrà ritagliata eccessivamente, ma la differenza nell'angolo di arrotondamento betewen la cornice e gli angoli della finestra arrotondati Windows 11 devono essere presi in considerazione.