Wie wir die Typografie auf der Avito-Website / Sudo Null IT News verbessert haben

Hallo alle! Mein Name ist Denis Sbitny, ich leite das Designteam im Avito-Designsystem. In diesem Artikel zeige ich Ihnen, wie wir einen neuen Ansatz für Typografie gewählt, ihn im Design beschrieben und die Implementierung in der Entwicklung vereinfacht haben.

Dieser Artikel kann sowohl für Designer als auch für Entwickler von Interesse sein. Alles wird hier sein: Einzüge, Größen, Zeilenabstand und natürlich Token.

Plattformfunktionen des Avito-Designsystems

Das Avito-Designsystem besteht aus einer Reihe von Stilen, Komponenten, Regeln und Mustern, die die Entwicklung beschleunigen und das Aussehen eines Produkts prägen.

Avito hat vier Plattformen, die vom Designsystem unterstützt werden:

In diesem Artikel werde ich die Typografie beschreiben, die wir für Desktop und MAV erstellt haben, ohne iOS und Android zu beeinträchtigen.

Warum haben Sie sich entschieden, die Typografie zu aktualisieren?

Die Größen und Zeilenabstände in der Typografie des alten Designsystems wurden auf der Grundlage eines Koeffizienten gewählt, der es einfach macht, es zu beschreiben und einen Zwischenstil hinzuzufügen.

Aber dieser Ansatz hat seine Nachteile. Da die Schrift jeder Größe im System die gleichen Proportionen von Zeilenabstand und Punktgröße hat, gibt es Probleme mit der Balance. Beispielsweise verwendet eine 16-Punkt-Schrift einen Zeilenabstand von 24 Pixeln und ergibt mit einer langen Linie einen optisch schönen Textstreifen. Führendes Größenverhältnis: 24/16 = 1,5. Für die 32-Punkt-H2-Überschrift wurde jedoch fast das gleiche Verhältnis verwendet und führte zu einem Vorsprung von 46 Pixeln. Dies führte dazu, dass eine Kopfzeile von einer anderen abbrach:

Dieses Problem wird deutlicher, wenn der Titel in einem Popup platziert wird. Daher ist es notwendig, dafür eine dichtere Durchfahrt zu wählen.

Was und wie hat sich im Stil verändert

Mein Art Director, Viktor Lushin, kam einmal zu mir und bot mir an, an Avitos neuem Look&Feel zu arbeiten. Also fingen wir an, den Stil erst abends gemeinsam auszuarbeiten, dann mit einem größeren Team und im normalen Arbeitsmodus. Die Typografie ist zu einem der Grundelemente von Avitos neuem Stil geworden.

Wir haben den Zeilenabstand der Schriftstile geändert, die Schriftgrößen jedoch beibehalten, da sie die Größe der Steuerelemente beeinflussen. Hier muss ich sagen, dass wir alle Satzschriften und darauf basierende Steuerelemente bedingt in die Größen L, M, S – Groß, Mittel, Klein unterteilen. Wir haben bewusst Assoziationen zu Konfektionsgrößen gesucht, damit die Benutzer unseres Systems sie leicht verstehen und sich merken können.

Statt metrischer Schönheit haben wir der optischen Schönheit den Vorrang gegeben. Unsere Typografie sieht jetzt besser aus:

Pop-ups werden gesammelter:

Wir haben die Systemschrift Arial im Web belassen. Avito hat strenge Anforderungen an die Download-Geschwindigkeit – dies erlaubt uns nicht, benutzerdefinierte Schriftarten zu verwenden.

Übergang von einem vertikalen Gitter zu einer Reihe von Polsterungen

Früher wurde im Avito-Designsystem vorgeschlagen, Objekte auf einem Raster mit einem 5-Pixel-Modul zu platzieren, aber es funktioniert nicht gut bei kleinen Größen. Beispielsweise ist ein Modul von 5 Pixeln viel für das Snippet-Layout.

Wir argumentierten so: Benutzer möchten eine optisch ausgewogene Seite sehen, und es ist ihnen egal, dass wir eine Art Raster unter der Haube haben. Daher haben wir uns entschieden, darauf zu verzichten und eine Reihe von Einrückungen einzuführen: 2, 4, 6, 8, 10, 12, 16, 20, 24, … 48, 56, 64 … Damit wir genügend Flexibilität haben kleine Größen.

Wir haben diesen Satz von Einkerbungen in die Abstandshalterkomponente genäht, deren Werte in Tokens abgelegt wurden. Spacer funktioniert nicht nur in der Typografie, sondern auch beim Andocken von Objekten auf der Seite. Das Designsystem stellt Avito-Entwicklern die API dieser Einrückungen zur Verfügung. Sie können nur dieses Set legal verwenden.

Arbeiten mit Einzügen

Der nächste Schritt bestand darin, festzulegen, welche Einzüge in typischen Fällen verwendet werden sollten. In welchem ​​Abstand sollten beispielsweise Schriftsätze der Größen L, M, S unter der Überschrift H2 platziert werden? Das ist notwendig, damit diese Kombination für verschiedene Designer gleich aussieht, sonst gibt es genau so viele Variationen, wie es Designer in Avito gibt.

Dazu skizzierten wir Schriftkombinationen auf der Seite, als ob wir einen Artikel aus den uns zur Verfügung stehenden Schriftstilen setzen würden. Wir haben auch Fälle wie das Verbinden von Überschriften und Unterüberschriften mit Text berücksichtigt. Alles sollte gut lesbar sein: Überschriften sollten Textblöcke trennen und nicht zu zwei Absätzen auf einmal gehören.

Wir haben also eine Hierarchie von Überschriften.

Und die erste Einzugstabelle für gängige Kombinationen von Schriftpaaren.

Dichtes und spärliches Layout

Wir haben bereits den Embryo eines ziemlich bequemen Systems. Der Designer musste sich nicht mehr den Kopf zerbrechen und überlegen, welchen Einzug er zum Pumpen von Titel und Schriftart wählen sollte – dafür gab es eine Tabelle.

Die erfundenen Einzüge funktionierten gut auf der Werbekarte, der Seite mit den Websiteeinstellungen, im Abschnitt “Hilfe” – im Allgemeinen überall dort, wo viel Text vorhanden war. Es gab jedoch ein Problem in Fällen, in denen der Text klein ist. Vor allem, wenn Titel und Zeile kurz sind. Und noch schlimmer, wenn sich Titel und Text auf einen sichtbaren Block beschränken:

Damit solche Blöcke nicht auseinanderfallen und gut aussehen, müssen Sie sie fest auslegen.

So kamen wir zu den Begriffen „sparse“ und „dense“ Layout.

Die Grundlage für ein spärliches Layout ist der Abstand zwischen den Absätzen der größten Schriftart im Paar, während es für ein dichtes Layout der Zeilenabstand ist.

Wo dichtes Layout verwendet wird:

Es hilft, Text fast eng zu verbinden, während ein spärliches Layout hilft, Texte mit mehreren Absätzen zu verbinden.

Vollständiger Satz Einzüge

In Gesprächen mit unseren Webentwicklern sind wir zu dem Schluss gekommen, dass wir Padding für jedes Schriftpaar implementieren können, das standardmäßig abgelegt wird.

Entwickler müssen nur Text-Tags verwenden:

<h2>Hallo</h2><p>” src=”https://habrastorage.org/getpro/habr/upload_files/fff/408/786/fff408786071335983c9f2ad1a41f432.svg” width=”193″ height=”22″/><img class=

Dabei stellte sich heraus, dass einige Systemkonstanten zu berücksichtigen sind. Im Web stapeln wir beispielsweise Blöcke, die durch H2-Überschriften in einem Abstand von 56 Pixeln und H3 in einem Abstand von 32 Pixeln getrennt sind. So ist es in der Tabelle dargestellt.

Reaktion der Designer

Wir haben diese Lösung in unsere Richtlinien aufgenommen und den Designern vorgestellt. Ihnen gefiel die Idee, alle Einrückungen in eine übersichtliche Tabelle zu packen.

So reagierten Designer auf das Erscheinen des Tisches im Corporate MessengerSo reagierten Designer auf das Erscheinen des Tisches im Corporate Messenger

Alle Schriftparameter sowie Arrays von Einrückungen zwischen Schriftpaaren haben wir in Tokens genäht. Als Ergebnis haben wir ein flexibles System bekommen, mit dem Sie jede neue Typografie in Avito einfach starten können: Ändern Sie die Schriftart, passen Sie den Zeilenabstand an, passen Sie bei Bedarf die Einzugstabellen an und … Voila! Die neue Typografie ist fertig.

Designer verwenden die Schriftbibliothek und die Einzugstabelle, und Entwickler müssen nicht darüber rätseln, welchen Einzug sie wählen sollen: Alles wird standardmäßig abgelegt.

Vorheriger Artikel: Wie man Daten in Cold Storage einfügt

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *