Verbesserung der Ikonen für UI -Elemente mit typografischer Ausrichtung und Skala

Die Verwendung von Symbolen in Benutzeroberflächenelementen ist hilfreich. Zusätzlich zur Elementkennzeichnung können Symbole die Absicht eines Benutzerelements für Benutzer verstärken. Aber ich muss sagen, ich bemerke ein bisschen Ikone -Fehlausrichtung beim Durchsuchen des Webs. Auch wenn die Ausrichtung des Symbols korrekt ist, reagieren Symbole häufig nicht gut, wenn sich typografische Stile für die Elemente ändern.

Ich habe ein paar Beispiele in der realen Welt zur Kenntnis genommen und ich möchte meine Gedanken darüber teilen, wie ich sie verbessert habe. Ich hoffe, diese Techniken können anderen helfen, Benutzeroberflächenelemente zu erstellen, die typografische Änderungen besser berücksichtigen und gleichzeitig die ursprünglichen Ziele des Designs aufrechterhalten.

Beispiel 1 - Site -Messaging

Ich fand dieses Messaging -Beispiel auf einer beliebten Medienwebsite. Die Position des Ikons sieht nicht so schlecht aus. Aber wenn es einige der Stileigenschaften des Elements wie Schriftgröße und Linienhöhe ändert, beginnt es sich zu entwirren.

Identifizierte Probleme

• Das Symbol ist absolut von der linken Kante mit einer relativen Einheit (REM) positioniert.
• Da das Symbol aus dem Fluss genommen wird, erhält dem Elternteil einen größeren Padding-Links-Wert, um den Gesamtabstand zu unterstützen. Idealerweise ist unser Polster-X einheitlich und alles sieht gut aus, ob ein Symbol vorhanden ist oder nicht
• Das Symbol (es ist ein SVG) ist ebenfalls in REMS gegründet. Dies ermöglicht die jeweilige Größenänderung nicht, wenn sich die Schriftgröße seiner Eltern ändert

Empfehlungen

Wir möchten, dass die obere Kante unseres Symbols an der blauen gestrichelten Linie liegt, aber wir finden oft die obere Kante unseres Symbols an der roten gestrichelten Linie.

Haben Sie jemals ein Symbol neben einem Text eingefügt und es wird sich einfach nicht mit der Spitze des Textes übereinstimmen? Sie können das Symbol mit so etwas wie Position einsetzen: Relativ; Oben: 0,2em. Dies funktioniert gut genug, aber wenn sich typografische Stile in Zukunft ändern, könnte Ihr Symbol falsch ausgerichtet sein.

Wir können unsere Ikone zuverlässiger positionieren. Verwenden wir den Grundlinienabstand des Elements (die Entfernung von der Grundlinie einer Zeile zur Grundlinie der nächsten Zeile), um dies zu lösen.

Die Basislinienabstand ist Schriftgröße * -Leitungshöhe .

Wir werden das in einer CSS -benutzerdefinierten Eigenschaft aufbewahren:

 -Baselinedistance: calc (var (-fontsize) * var (-lineHeight));

Wir können dann unser Symbol mit dem Ergebnis von (Basislinienabstand - Schriftgröße) / 2 nach unten bewegen.

 --iconOffset: calc ((var (-baselinedistance)-var (-fontsize)) / 2);

Mit einer Schriftgröße von 1REM (16px) und einer Linienhöhe von 1,5 wird unser Symbol 4 Pixel bewegt.

• Basislinienabstand = 16px * 1,5 = 24px
• Icon offset = (24px - 16px) / 2 = 4px

Demo: Vor und nachher

Beispiel 2 - ungeordnete Listen

Das zweite Beispiel, das ich gefunden habe, ist eine ungeordnete Liste. Es verwendet eine Web-Schriftart (Schriftart fantastisch) für sein Symbol über A :: vor Pseudo-Element. Es gab viele großartige Artikel über das Styling sowohl bestellte als auch nicht ordnungsgemäße Listen, sodass ich nicht auf Details über den relativ neuen :: Marker-Pseudo-Element und dergleichen werde. Web -Schriftarten können im Allgemeinen ziemlich gut mit der Symbolausrichtung funktionieren, abhängig vom verwendeten Symbol.

Identifizierte Probleme

• Keine absolute Positionierung verwendet-bei Verwendung von Pseudoelementen verwenden wir Flexbox nicht oft wie unser erstes Beispiel und die absolute Positionierung leuchtet hier
• Das Listenelement verwendet eine Kombination aus Polsterung und negativem textbezogenem Innenarch

Empfehlungen

Da wir in unserer Lösung auch ein Pseudoelement verwenden, nutzen wir die absolute Positionierung. Die Symbolgröße dieses Beispiels war etwas größer als seine benachbarte Kopie (ca. 2x). Aus diesem Grund werden wir verändern, wie wir die oberste Position des Symbols berechnen. Die Mitte unserer Ikone sollte sich vertikal mit der Mitte der ersten Linie ausrichten.

Beginnen Sie mit der Berechnung der Basislinienentfernung:

 -Baselinedistance: calc (var (-fontsize) * var (-lineHeight));

Bewegen Sie das Symbol mit dem Ergebnis von (Basisabstand - Symbolgröße) / 2 .

 --iconOffset: calc ((var (-baselinedistance)-var (-iconsize)) / 2);

Mit einer Schriftgröße von 1REM (16px), einer Zeilenhöhe von 1,6 und einer 2x-Größe der Kopie (32px) erhält unser Symbol einen Top-Wert von -3,2 Pixel.

• Baseline Distanz = 16px * 1,6 = 25,6px
• Icon offset = (25,6px -32px) / 2 = -3.2px

Mit einer größeren Schriftgröße von 2REM (32px), einer Linienhöhe von 1,2 und 64px-Symbol erhalten unser Symbol einen Top-Wert von -12,8 Pixel.

• Baseline -Abstand = 32px * 1,2 = 38,4px
• Icon offset = (38,4px -64px) / 2 = -12,8px

Demo: Vor und nachher

Abschluss

Für Benutzeroberflächen -Symbole haben wir viele Optionen und Techniken. Wir haben SVGs, Web-Schriftarten, statische Bilder, :: Marker und Listenstil-Typ. Man könnte sogar Hintergrundfarben und Clip-Bads verwenden, um einige interessante Icon-Ergebnisse zu erzielen. Durch die Durchführung einiger einfacher Berechnungen können Symbole auf anmutigere Weise ausgerichtet und skalieren, was zu Implementierungen führt, die kugelsicherer sind.

Siehe auch: Vorherige Diskussion über das Ausrichten von Symbol auf Text.

Das obige ist der detaillierte Inhalt vonVerbesserung der Ikonen für UI -Elemente mit typografischer Ausrichtung und Skala. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!