Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
Ü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.