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!