Verbesserung von Icons für UI-Elemente mit typografischer Ausrichtung und Skalierung

Die Verwendung von Icons in Benutzeroberflächenelementen ist hilfreich. Zusätzlich zur Beschriftung von Elementen können Icons die Absicht eines Benutzerelements für die Benutzer verstärken. Aber ich muss sagen, ich bemerke beim Surfen im Web eine gewisse Ikonausrichtung. Selbst wenn die Ausrichtung des Icons korrekt ist, reagieren Icons oft nicht gut, wenn sich typografische Stile für das Element ändern.

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

Beispiel 1 – Website-Nachrichten

Ich habe dieses Nachrichtenbeispiel auf einer beliebten Medienwebsite gefunden. Die Position des Icons sieht nicht schlecht aus. Aber wenn einige der Stileigenschaften des Elements wie font-size und line-height geändert werden, beginnt es sich aufzulösen.

Identifizierte Probleme

• Das Icon ist absolute vom linken Rand positioniert, unter Verwendung einer relativen Einheit (rem)
• Da das Icon aus dem Fluss genommen wird, erhält das übergeordnete Element einen größeren padding-left-Wert, um den Gesamtabstand zu verbessern – idealerweise ist unser Padding-X einheitlich und alles sieht gut aus, unabhängig davon, ob ein Icon vorhanden ist oder nicht.
• Das Icon (ein SVG) ist ebenfalls in rems dimensioniert – dies ermöglicht keine entsprechende Größenänderung, wenn sich die font-size seines übergeordneten Elements ändert.

Empfehlungen

Wir möchten, dass die Oberkante unseres Icons auf der blauen gestrichelten Linie liegt, aber wir finden oft, dass die Oberkante unseres Icons auf der roten gestrichelten Linie liegt.

Haben Sie jemals ein Icon neben einem Text eingefügt und es lässt sich einfach nicht oben am Text ausrichten? Sie verschieben das Icon vielleicht mit etwas wie position: relative; top: 0.2em in Position. Das funktioniert ganz gut, aber wenn sich typografische Stile in Zukunft ändern, könnte Ihr Icon falsch ausgerichtet aussehen.

Wir können unser Icon zuverlässiger positionieren. Nutzen wir den Grundlinienabstand des Elements (den Abstand von der Grundlinie einer Zeile zur Grundlinie der nächsten Zeile), um dieses Problem zu lösen.

Grundlinienabstand ist font-size * line-height.

Wir speichern das in einer CSS-Custom-Property

--baselineDistance: calc(var(--fontSize) * var(--lineHeight));

Wir können unser Icon dann mit dem Ergebnis von (Grundlinienabstand – Schriftgröße) / 2 nach unten verschieben.

--iconOffset: calc((var(--baselineDistance) - var(--fontSize)) / 2);

Bei einer font-size von 1rem (16px) und einer line-height von 1.5 wird unser Icon um 4 Pixel verschoben.

• Grundlinienabstand = 16px * 1.5 = 24px
• Icon-Offset = (24px – 16px) / 2 = 4px

Demo: Vorher und nachher

Beispiel 2 – Ungeordnete Listen

Das zweite Beispiel, das ich gefunden habe, ist eine unsortierte Liste. Sie verwendet eine Webfont (Font Awesome) für ihr Icon über ein ::before Pseudo-Element. Es gab viele großartige Artikel über die Gestaltung von geordneten und ungeordneten Listen, daher gehe ich nicht auf Details über das relativ neue ::marker Pseudo-Element und dergleichen ein. Webfonts können im Allgemeinen ziemlich gut mit der Icon-Ausrichtung funktionieren, abhängig vom verwendeten Icon.

Identifizierte Probleme

• Keine absolute Positionierung verwendet – bei der Verwendung von Pseudo-Elementen verwenden wir oft nicht Flexbox wie in unserem ersten Beispiel, und absolute Positionierung glänzt hier
• Das Listenelement verwendet eine Kombination aus padding und negativem text-indent zur Unterstützung des Layouts – ich kann dies nie gut hinbekommen, wenn man mehrzeiligen Text und Icon-Skalierbarkeit berücksichtigt.

Empfehlungen

Da wir auch ein Pseudo-Element in unserer Lösung verwenden werden, nutzen wir absolute Positionierung. Die Icon-Größe dieses Beispiels war etwas größer als der daneben liegende Text (ungefähr 2x). Deshalb werden wir die Berechnung der top-Position des Icons ändern. Die Mitte unseres Icons sollte vertikal mit der Mitte der ersten Zeile übereinstimmen.

Beginnen Sie mit der Berechnung des Grundlinienabstands

--baselineDistance: calc(var(--fontSize) * var(--lineHeight));

Verschieben Sie das Icon nach unten mit dem Ergebnis von (Grundlinienabstand – Icon-Größe) / 2.

--iconOffset: calc((var(--baselineDistance) - var(--iconSize)) / 2);

Bei einer font-size von 1rem (16px), einer line-height von 1.6 und einem Icon, das 2x so groß ist wie der Text (32px), erhält unser Icon einen top-Wert von -3,2 Pixel.

• Grundlinienabstand = 16px * 1.6 = 25,6px
• Icon-Offset = (25,6px – 32px) / 2 = -3,2px

Bei einer größeren font-size von 2rem (32px), line-height von 1.2 und einem 64px Icon erhält unser Icon einen top-Wert von -12,8 Pixel.

• Grundlinienabstand = 32px * 1.2 = 38,4px
• Icon-Offset = (38,4px – 64px) / 2 = -12,8px

Demo: Vorher und nachher

Fazit

Für Benutzeroberflächen-Icons haben wir viele Optionen und Techniken. Wir haben SVGs, Webfonts, statische Bilder, ::marker und list-style-type. Man könnte sogar background-colors und clip-paths verwenden, um einige interessante Icon-Ergebnisse zu erzielen. Einige einfache Berechnungen können helfen, Icons auf eine anmutigere Weise auszurichten und zu skalieren, was zu Implementierungen führt, die etwas kugelsicherer sind.

Siehe auch: Vorherige Diskussion über die Ausrichtung von Icons an Text.