Gravity UI Design System: Wie man seine eigene Oberfläche einfach erstellt

Hallo zusammen, ich bin Alexey Sizikov, Leiter der Abteilung User Experience bei Yandex Cloud. In diesem Artikel möchte ich eine Neuigkeit teilen: Wir haben unser Design-System und unsere Komponentenbibliothek Gravity UI als Open Source veröffentlicht.

Mit der Komponentenbibliothek Gravity UI lassen sich moderne Benutzeroberflächen bauen. Sie umfasst:

• ein Set grundlegender React-Komponenten;
• eine Baukasten-Bibliothek für Landingpages;
• ausführliche Guides zur Verwendung der Komponenten;
• eine Bibliothek in Figma;
• ein Set fertiger Icons mit insgesamt fast 600 Varianten;
• ChartKit — ein Paket zur Datenvisualisierung;
• Yagr — ein High-Performance-Chart-Rendering auf Basis von uPlot;
• I18n — ein Paket zur Lokalisierung der Oberfläche
• und außerdem mehr als 25 nützliche Bibliotheken.

Unter dem Cut — eine Geschichte darüber, warum wir Gravity UI entwickelt haben, wie wir es einsetzen, welche Besonderheiten und Vorteile unser Ansatz hat und wie wir es weiterentwickeln wollen. Außerdem: wie man in eigenen Projekten verschiedene Farbschemata einrichtet und warum wir vier Themes statt der üblichen zwei haben.

Was sind die Besonderheiten von Gravity UI

Auf realer Erfahrung basierend

Eines der Unterscheidungsmerkmale unseres Design-Systems ist, dass es sich auf Basis der Bedürfnisse unserer Nutzer weiterentwickelt — die meisten von ihnen sind Entwickler. Mehr noch: Unsere Designer sind eng mit den Produkten verbunden, an denen sie arbeiten. Jeder Designer betreut mehrere Services mit eigenen Nutzungsszenarien. Nachdem eine Lösung in ihren Services getestet wurde, gibt der Product Designer sie an andere Services weiter, um sicherzustellen, dass sie funktioniert und den Entwicklern hilft.

Zum Beispiel entwickelte sich die Side-Navigation-Komponente anfangs nur mit Logo und Menüpunkten. Später haben wir zur удобства einen пункт mit allen Services und einer Suche hinzugefügt. Und als wir einen Service bekamen, in dem es nötig war, direkt im Seitenmenü eine neue Entität anzulegen, erschien eine separate Plus-Schaltfläche. Danach kamen Menübereiche mit Trennern für komplexe Services mit vielen Menüpunkten hinzu sowie die Schaltfläche “Weitere Punkte”.

Flexible Variabilität

Viele Komponenten von Gravity UI lassen sich für unterschiedliche Szenarien konfigurieren. Zum Beispiel hat die Komponente pagination mehrere Anzeigevarianten: mit Gesamtseitenzahl, vollständigen Button-Beschriftungen, der Möglichkeit, zu einer конкретной Seite zu springen und die Anzahl der Einträge pro Seite zu ändern — эта Variante ist für eine große Zahl von Seiten рассчитана. Wenn ihr hingegen einen Use Case habt, bei dem es nur wenige Ergebnisse gibt, könnt ihr einen kompakten Modus nutzen oder sogar die Zahlen ausblenden und nur Pfeile anzeigen.

Breiter Einsatzbereich

Mit Gravity UI kann man sowohl eine einfache Administrationsoberfläche als auch ein komplexes Dashboard mit Diagrammen bauen. Hier sind einige Beispiele dafür, was man mit unserem Design-System umsetzen kann:

• Landingpages,
• Admin-Oberflächen,
• Dashboards,
• Diagramme,
• CRM,
• Analytik-Services.

Zum Beispiel haben unsere Kollegen dieses Dashboard gebaut:

Man kann auch eine einfache Landingpage erstellen. Zum Beispiel ist die Website mit unseren Open-Source-Projekten auf Komponenten von Gravity UI aufgebaut.

Mehr als 150 Mitwirkende

Unser Ökosystem entwickelt sich ständig weiter und verbessert sich. Neben dem Feedback aus unserer Entwickler-Community erhalten wir Vorschläge von mehr als 100 Services, die unser Design-System bereits verwenden.

Ein Beispiel: Anfangs hatten wir zwei Themes — dunkel und hell. Dann bekamen wir Feedback von Teams, die die Oberfläche auf Fernseher übertragen, um Diagramme anzusehen oder während des Standups. Der Punkt ist, dass man die Oberfläche auf dem Fernseher schlecht sieht. Ein ähnliches Problem haben auch Nutzer mit alten oder minderwertigen Monitoren.

Als Ergebnis haben wir für jedes Theme eine erhöhte Kontraststufe entwickelt. Sie erhöht die Helligkeit der dunklen und hellen Farben sowie der semantischen Farben. Das wird über CSS-Styles konfiguriert und in den Nutzereinstellungen gesteuert.

Übrigens könnt ihr jetzt тоже euren Beitrag leisten. Dafür schickt PRs an GitHub oder hinterlasst Kommentare in Figma.

Wie man mit Gravity UI arbeitet

Interface an die eigene Marke anpassen

Im Folgenden erzähle ich, was man sonst noch mit Gravity UI machen kann. Ich beginne mit der Möglichkeit, das Design-System an die eigene Marke anzupassen. Als YDB Open Source ging, standen wir vor der Aufgabe, ein einheitliches Design-System zu behalten, es aber gleichzeitig für verschiedene Marken unverwechselbar zu machen. Dafür haben wir eine separate Gruppe von CSS-Variablen erstellt. Sie umfasst Markenfarben, Schriften und Border-Radii. Im Code sieht das wie ein kleiner Block aus:

.g-root {
    --g-font-family-sans: 'Inter', sans-serif;

    --g-text-header-font-weight: 600;
    --g-text-subheader-font-weight: 600;
    --g-text-display-font-weight: 600;
    --g-text-accent-font-weight: 600;

    --g-color-base-brand: rgb(117, 155, 255);
    --g-color-base-brand-hover: rgb(99, 143, 255);
    --g-color-base-selection: rgba(82, 130, 255, 0.05);
    --g-color-base-selection-hover: rgba(82, 130, 255, 0.1);
    --g-color-line-brand: rgb(117, 155, 255);
    --g-color-text-brand: rgb(117, 155, 255);
    --g-color-text-brand-contrast: rgb(255, 255 ,255);
    --g-color-text-link: rgb(117, 155, 255);
    --g-color-text-link-hover: rgb(82, 130, 255);

    --g-border-radius-xs: 3px;
    --g-border-radius-s: 5px;
    --g-border-radius-m: 6px;
    --g-border-radius-l: 8px;
    --g-border-radius-xl: 10px;
    --g-border-radius-2xl: 16px;
}

In dieser Gruppe kann man die Schrift, die Farbe der Akzent-Buttons und die Rundungen ersetzen. So lässt sich ein einziges Design-System für verschiedene Marken nutzen und gleichzeitig das Corporate Design bewahren. Wenn euch diese Option nicht passt, könnt ihr ein eigenes Farbschema erstellen. Eine подробная Anleitung findet ihr in der Dokumentation.

Es ist wichtig zu beachten, dass die Änderung der Markenfarben die Hauptoberfläche nicht beeinflusst. Das ist besonders wichtig für Elemente, in denen semantische Farben verwendet werden: Zum Beispiel bedeutet Rot weiterhin einen Fehler und Grün einen Erfolg.

Komponenten in Figma

Zur удобства unserer Arbeit hat unser Designerteam alle Zustände der Komponenten vorbereitet und in Figma hochgeladen. Bei Bedarf kann man eine Kopie der Bibliothek erstellen und versuchen, das Interface direkt im Tool zusammenzubauen.

Mit dem letzten Update werden in der Bibliothek nicht mehr alle vier Themes dupliziert. Standardmäßig arbeitet ihr im hellen Theme, aber im Bereich Layer könnt ihr jedes Element oder die ganze Seite auf ein anderes Theme umschalten.

Alle Elemente der Bibliothek sind auf der Seite Overview dargestellt. Dort könnt ihr die нужige Komponente finden und zur Seite mit allen Zuständen des Elements wechseln. Außerdem hat jede Komponente ein Anwendungsbeispiel.

Fast 600 Icons

Icons sind eines der обязательных Elemente von Design und Usability. Sie helfen, Inhalte zu organisieren und zu strukturieren, Akzente zu setzen und die Wahrnehmung von Informationen zu verbessern. Auf den ersten Blick ist es nicht besonders schwierig, ein Icon-Pack zu erstellen. Aber wir standen vor einer Herausforderung bei der Erstellung von Icons für сложные Metaphern wie virtuelle Maschinen, Datenbanken und verschiedene Diagrammtypen.

Um die Icon-Suche bequemer zu machen, haben wir ein spezielles Naming- System verwendet. Jetzt kann man dasselbe Icon finden, indem man unterschiedliche Bezeichnungen eingibt. Zum Beispiel kann man, um ein Icon mit einem Pfeil zu finden, eines dieser Wörter eingeben: arrow, enter, move, login.

Guides

Wie ich oben уже geschrieben habe, bestand unser Ziel darin, dass Entwickler typische Interfaces einfach erstellen können, используя die Beschreibungen der Komponenten in unserem Guide. Wir wollten diesen Prozess einfach machen — ohne dass man für jedes Element einen Designer ansprechen muss. Derzeit haben wir bereits fünf Beispiele interner Services, die vollständig von Entwicklern erstellt wurden — ausschließlich mithilfe der Guides.

Natürlich lässt sich diese Aufgabe nicht allein mit Entwicklerhand lösen: Es gibt so oder so komplexe Szenarien, die die Aufmerksamkeit eines UX/UI-Spezialisten erfordern. Dennoch konnten wir einen значlichen Teil der Belastung von unseren Designern nehmen.

In den Guides hat das Designerteam die Komponenten beschrieben und Empfehlungen für deren Einsatz gegeben und dabei Beispiele für die richtige und falsche Herangehensweise gezeigt. Ihr könnt sie euch auf dieser Seite ansehen.

Wie man Gravity UI nutzt

Alles, was ihr tun müsst, ist, den Befehl in die Konsole einzugeben:

git clone git@github.com:gravity-ui/uikit-example-cra.git my-project && cd my-project
npm i 
npm run start

Eine ausführlichere Anleitung gibt es auf der Startseite des Repositories auf GitHub.

Alle Komponenten von Gravity UI könnt ihr im UIkit ansehen, und die passende Bibliothek für eure Anforderungen könnt ihr in Libraries auswählen.

Zusammenfassend möchte ich noch einmal betonen: Gravity UI ist ein Design-System, das aus der realen Erfahrung unserer Nutzer, den Bedürfnissen der Entwickler und der Expertise der Designer gewachsen ist. Das macht es praktisch und effektiv. Und теперь kann es jeder бесплатно nutzen, der möchte.

Wir стремимся, das Projekt noch besser zu machen, indem wir die Bedürfnisse und Rückmeldungen unserer Nutzer berücksichtigen. Kommt zu uns auf GitHub, reicht PRs ein, schreibt Kommentare in Figma und teilt Beispiele eurer Nutzung.