Leitfaden für abgerundete Anzeigeumrandungen

Übersicht

Als Teil der einzigartigen neuen Designsprache Windows 11 spielen abgerundete Ecken eine integrale Rolle im Aussehen und Verhalten der Benutzeroberfläche. Die gesamte Wahrnehmung der Rundung im System wird durch die Softwarerunde, die vom Betriebssystem gesteuert wird, und Hardwarerunden, die von OEM-Partnern gesteuert werden, geprägt. In diesem Thema finden Sie Microsoft-Anleitungen für OEM-Partner zur Rundung von Hardwareanzeigen, um die beste Benutzer- und Entwicklerfreundlichkeit zu erreichen.

Während OEM-Partner ihre Hardwaredesigns mit unterschiedlichen Hardwarerunden- und Anzeigeeigenschaften unterscheiden können, unterstützt das Betriebssystem nur die Rundung, die mit Windows 11 ausgeliefert wird. Wir unterstützen keine beliebigen Radien für Software, um beliebige Radien für Hardware aufgrund hoher Komplexität in der Systemimplementierung zu entsprechen, und um die Belastung für das App-Entwickler-Ökosystem zu vermeiden, um gegen eine unbegrenzte Anzahl von Software- und Hardware-Radii-Kombinationen zu programmieren. Daher hilft Ihnen dieses Thema dabei, die effektiven Pixel zu berechnen, die Ihre Hardwarerunde basierend auf dem Anzeigeskalafaktor ausschneiden wird, sodass Sie wissen können, welche Hardwareradien sicher verwendet werden können, ohne die Benutzeroberfläche zu beeinträchtigen.

Hinweis

Alle Skalierungsfaktoren in diesem Thema beziehen sich auf die Desktop-Skalierung.

Lineare Skalierung der Software

Windows 11 mit zwei Radii zum Runden verfügbar sind – 4 px für Steuerelemente wie Schaltflächen und Eingabefelder und 8 px für Flyoutmenüs und Haupt-App-Fenster. Für die Zwecke dieses Themas ist der 8 px-Radius der Standardsoftware-Rundungsradius.

Das Design der Softwarerunde in Windows 11 basiert auf einem 8 Px-Radius mit 96 DPI, und dies skaliert linear wie in der folgenden Tabelle dargestellt:

DPI-Skalierungsfaktor	Gerundete Fenster pixel
100 %	8
150%	12
200 %	16

Diese einfache lineare Beziehung dient dazu, zu veranschaulichen, wie Windows seine Rundung skaliert, aber letztlich, wie viel Clipping auftritt, hängt von der nativen Auflösung des Bildschirms ab und was der Skalierungsfaktor ist. Beispielsweise wird eine Anzeige mit einem Standardskalafaktor von 200 % die Benutzeroberfläche kleiner als die gleiche Anzeige auf 100 % abschneiden, da 100 % den Inhalt im Vergleich zu den vorgesehenen 200 % kleiner machen würde. In diesem Beispiel wird ein effektives Pixel mit einem physischen Pixel mit 100% identisch, sodass mehr Pixel abgeschnitten werden.

Berechnen des Windows-Standard-Skalierungsfaktors und der effektiven Auflösung

Die Menge der benutzeroberflächenausschnitten, die gerundete Bezeln auftreten, ist durch den Skalierungsfaktor des Betriebssystems und die Größe der Anzeige betroffen, eine Standardeinstellung, für die das System basierend auf den folgenden Formeln und Variablen ausgewählt wird.

Wichtig

Da fast alle Benutzer den Standardskalafaktor nicht ändern, sollte es der Basiswert für alle Berechnungen sein, die sich auf ui-Clipping beziehen, indem gerundete Ränder verwendet werden.

Pixeldichte

Die erste Variable in der Standardformatierformel, die Windows kennen muss, ist die Dichte von Pixeln pro Zoll (DPI) der Anzeige. Dies wird von der folgenden Formel angegeben und wird von dem Displayhersteller vorbestimmt:

Betrachtungsabstand

Da sich die Anzeigeabstand darauf auswirkt, wie große Objekte auf dem Bildschirm angezeigt werden, wenn sie mit systemeigener DPI kombiniert werden, wird der Systemfaktor bei der Entscheidung über einen Standardskalafaktor in seine Berechnungen einbezogen. Der Anzeigeabstand einer Anzeige basiert ungefähr auf der physischen Größe und dem Gerätetyp, wie in der folgenden Tabelle dargestellt:

Hinweis

Diese Liste ist für alle möglichen Gerätetypen nicht vollständig.

Gerätetyp	Abstand anzeigen (in Zoll)
Kleines Tablet	16,3
Tablet	20
Laptop	24,5
Desktop	28
TV	84

Optimales Zoomen

Optimaler Zoom ist die genaue Dezimalstufe der Skalierung, die Windows glaubt, für eine Anzeige am besten geeignet. Dies entspricht ungefähr dem Standard-Skalierungsfaktor, der den optimalen Zoom und die Rundung auf die nächste 25 % Inkrement innerhalb eines bereichsbezogenen Bereichs übernimmt. Windows berechnet die optimale Zoomstufe für eine Anzeige basierend auf der nativen DPI und dem Anzeigeabstand. Beachten Sie, dass 96 der Standard-DPI ist und 28 der Standardansichtsabstand im System ist.

Max- Skalierungsfaktor

Die endgültigen Informationen von Windows müssen einen Standardskalafaktor bestimmen, ist der maximale Skalierungsfaktor einer Anzeige oder der Ebene, über der er inhalte nicht skalieren wird, um Barrierefreiheitsprobleme zu verhindern (z. B. ein Meldungsfeld so groß, dass die Schaltfläche "OK" auf dem Bildschirm ist). Der max. Skalierungsfaktor wird durch die vertikale Auflösung der Anzeige bestimmt.

Vertikale Auflösung	Max- Skalierungsfaktor
< 900	100 %
>= 900 und < 1080	125%
>= 1080 und < 1440	150%
>= 1440 und < 1800	200 %
>= 1800	250%

Standard-Skalierungsfaktor

Schließlich wird der Standardskalafaktor basierend auf dem optimalen Zoom entschieden. Effektiv rundet der Standardskalafaktor einfach den optimalen Zoom auf die nächste 25 %-Inkrementierung mit mindestens 100 % und maximal dem Max-Skalierungsfaktor ab.

Optimales Zoomen	Standard-Skalierungsfaktor
<1.2.	100 %
>= 1.2 und < 1.43	125%
>= 1.43 und < 1.78	150%
>= 1.78 und < 2.32	200 %
>= 2.32 und < max. Skalierungsfaktor	250%
> Max- Skalierungsfaktor	Max- Skalierungsfaktor

Berechnen der effektiven Auflösung

Sobald der Standardskalafaktor bekannt ist, wird die native Auflösung skaliert, um die effektive Auflösung für die Anzeige zu bestimmen.

Exemplarische Vorgehensweise – Messen effektiver Pixel, die durch gerundete Hardware-Bezeln geklickt werden

Bei der Auswertung der Ui-Auswirkungen verschiedener Krümmungen und Radien von abgerundeten Anzeigeecken ist das erste Ergebnis, das gemessen werden soll, die physische Pixel sind, die von dernden Auflösung abgeschnitten werden. Dies kann dann durch den Skalierungsfaktor unterteilt werden. In diesem Abschnitt werden wir ein Beispiel zum Messen der physischen Pixel durchlaufen, die für eine hypothetische Anzeige mit den folgenden Eigenschaften gekippt wurden:

Eigenschaft oder Berechnung	Wert
Bildschirmgröße:	12,4 Zoll
Horizontale Auflösung	2560
Vertikale Auflösung	1600
Native DPI	243.46
Betrachtungsabstand	24,5 Zoll (Laptop-Gerätetyp)
Optimales Zoomen	2.2
Max- Skalierungsfaktor	200 %
Standard-Skalierungsfaktor	200 %
Zielrundenradius	2,9 mm

Kreis, der durch die gerundete Zel gebildet wird

In diesem Beispiel möchten wir die Zel um 2,2 mm runden. Der von dieser Menge gerundete Bogen bildet einen Viertelkreis, der mit der Ecke des normalen Anzeigerechtecks überlagert werden kann, hervorgehoben in Rot in der folgenden Abbildung:

Der Radius für den vollständigen Kreis wird mit der folgenden Formel berechnet:

25,4 ist die Konvertierung von Millimetern in Zoll, da Displays und DPI in Zoll gemessen werden, während Rundungsradien in Millimetern gemessen werden. Dies führt zum Beispiel zu einem Radius von 21,09 px. Der Gesamtbereich dieses Kreises wird durch die Standardkreisformel angegeben:

Der gerundete Kreis des Beispiels weist einen Bereich von 1395,84 px auf.

Eckplatz

Das Quadrat, das den rundlichen Kreis umgibt, weist eine Seitenlänge auf, die dem Durchmesser des Kreises entspricht, berechnet wie folgt:

Die Fläche dieses Quadrats wird durch die Standardfeldformel angegeben:

Für unser Beispiel weist das Quadrat eine Seitenlänge von 42,17 px und einen Bereich von 1778,51 px auf.

Physische Pixel, die pro Ecke geclippt sind

Mit dem Radius des bekannten Eckkreises können wir den Gesamtbereich berechnen, der von diesem Kreis geausschnittt wird und um 4 geteilt wird, um die Pixel zu erhalten, die in der Anzeigeecke geausschnittt sind.

Die Anzahl von Pixeln, die pro Ecke geausschnittt sind, ist 95,42 px, die Bruchpixel enthält. Im folgenden Bild wird der gewünschte Quadrantenbereich durch verschiedene Farben hervorgehoben, um ganz ungefähr ganze Pixel zu veranschaulichen, die von der gerundeten Zel geausschnittt wurden. Dieses Bild zeigt auch die Gliederungen des Eckkreises und das Eckeck, das ihn umgeben.

Die ungefähre Anzahl ganzer Pixel in diesem Beispiel ist 92 px für diese Ecke der Anzeige.

Effektive Pixel geausschnittt

Schließlich können wir die physischen Pixel trennen, die durch den Skalierungsfaktor gekappt wurden, um zu bestimmen, wie viele effektive Pixel ausgeblendet werden.

Mit einem Standard-Skalierungsfaktor von 200 % führt dies zu 47,72 epx pro Ecke für unser Beispiel.

Empfohlene Rundungsradii

Die Menge der benutzeroberfläche, die durch die gerundeten Ränder eines Bildschirms gerundet wird, wird durch den gewünschten Rundungsradius beeinflusst, der den Radius des Eckkreises bestimmt.

Warnung

Basierend auf internen Tests auf einem Gerät mit 3 mm Rundungsradius ist der empfohlene Bereich von Eckkreisradienlängen, die mit Windows 11 Rundendesign arbeiten, 16-24 effektive Pixel (epx). Jeder Radius oberhalb dieses Bereichs kann die Benutzeroberfläche beeinträchtigen und wird nicht unterstützt. Jeder Radius unterhalb dieses Bereichs erstellt keine Ui-Clipping-Bedenken, kann jedoch eine Konzentrierungsspannung zwischen den Rundungswinkeln der Anzeige und der Benutzeroberfläche erstellen. Mit anderen Worten, der Unterschied zwischen dem Eckradius und dem Rundungsradius des Fensters beginnt stark zu unterscheiden und wird beginnen, die visuelle Wahrnehmung des Systems des Benutzers zu beeinflussen.

Unter Berücksichtigung des Standardskalafaktors von 200 % weist das Beispiel aus unserer exemplarischen Vorgehensweise einen Rundungskreis mit einem effektiven Radius von 10,55 epx auf. Daher wird die Benutzeroberfläche nicht übermäßig geausschnittt, sondern der Unterschied im Rundungswinkel betewen die Zel und die Windows 11 gerundeten Fensterecke müssen berücksichtigt werden.