Was ist die Vision für das Discourse-Designsystem?

Ich würde gerne benutzerdefinierte Themes und Komponenten erstellen, die mit dem Discourse-Designsystem übereinstimmen und sich auf konsistente und harmonische Weise in die App einfügen.

Allein wenn ich mir den Code und die Art und Weise ansehe, wie Stile im Kern definiert und angewendet werden, fällt es mir schwer, den Überblick zu behalten und die Vision des Designsystems zu erfassen.

Ich werde versuchen, dies in drei Hauptthemen zu unterteilen: Farbe, Typografie und Abstände.

Farbe

Vor zwei Jahren wurde eine numerische Skala für einige Werte eingeführt. Ich glaube, es wurde erwähnt, dass diese nur zur Ergänzung der benannten Farbtransformationen dient. Für den tertiären Farbwert sieht es jetzt so aus:

Ich sehe beide Modelle im neuen Code im Kern angewendet. Ist die langfristige Idee, sie nebeneinander zu verwenden, oder gibt es eine andere Vision?

Sollte es in jedem Fall eine numerische Skala für alle vier Hauptfarbwerte geben? Im Moment gibt es sie nur für Primär- und Tertiärfarben, aber nicht für Sekundär- und Quartärfarben.

Typografie

Derzeit sind drei verschiedene Arten von Schriftgrößenprogressionen definiert:

Diese wurden auch seit über zwei Jahren nicht mehr aktualisiert. Sollten diese im neuen Code überhaupt verwendet werden? Ehrlich gesagt habe ich die Multiplikatordefinitionen nie angefasst, da es schwierig ist, die tatsächliche endgültige Schriftgröße zu definieren. Aber auch die Basis-Schriftartdefinitionen verstehe ich nicht. Die definierte Skala wäre:

  • 13px - 14px - 15px - 17px - 19px

Aber wenn ich mir die tatsächlichen Schriftgrößen ansehe, ist die Standardskala mehr oder weniger:

  • 13px - 15px - 17,25px - 22px - 26px

Abstände

Ich sehe, dass neue Elemente wie die Seitenleiste Root-Variablen für Abstände einführen. Zum Beispiel:

image

Das erleichtert definitiv die Anpassung des Seitenleistenlayouts. Aber es überträgt sich nicht auf andere Layout-Elemente. Andererseits sehe ich keine grundlegenden Abstandsdefinitionen, die konsistentere Layout-Anpassungen in der gesamten App ermöglichen würden. Ist dies in irgendeiner Weise auf der Roadmap?

Gesamt

Es wäre toll zu wissen, ob es Pläne gibt, sich in Richtung eines konsistenteren und einfacheren Designsystems zu bewegen?

Es scheint im Moment einfach zu viele zusammenhanglose und eigenständige Definitionen zu geben, und sie machen es ziemlich schwierig, ein konsistentes und rhythmisches Layout mit einem Gefühl von Leichtigkeit (und Freude :slight_smile: ) zu erstellen.

Ich verstehe, dass es eine große App mit vielen verschiedenen Elementen ist. Ich habe jedoch nur einen kleinen Test auf der Standard-Listenansicht durchgeführt:

Dies ist ein Neuaufbau mit jedem Abstandswert, der aus einer sehr einfachen geometrischen Progression (2px/4px/8px/16px/32px/64px) gewählt wurde. Und Schriftgrößen aus nur 4 Werten:

Es scheint mir, dass es aus Design-Sicht keine Notwendigkeit für die Anzahl der eindeutigen Definitionen gibt, die jetzt in der gesamten App vorhanden sind?

14 „Gefällt mir“

Dies ist etwas, das wir tun wollten und auf das wir uns nach und nach in kleinen Schritten zubewegt haben, aber es ist nichts, was auf einmal geschehen kann. Jede Änderung, die wir vornehmen, verursacht potenzielle Theme-Regressionen auf Tausenden von Websites (und wir müssen viele davon für unsere Kunden beheben), daher dauert es lange, kleine Änderungen vorzunehmen.

Wir führen auch seit einiger Zeit Ember-Modernisierungsarbeiten durch, die ebenfalls die Behebung von Regressionen und die Refaktorierung bestehender Themes erfordern. Dies ist noch im Gange und wird ebenfalls Zeit in Anspruch nehmen, um alles zu aktualisieren (z. B. könnte der Austausch unseres Widgetsystems leicht 6 weitere Monate dauern). Es gibt viele Prioritäten, die abgewogen werden müssen.

Es gibt keine vorgesehene Richtung außer mehr Konsistenz. Wir haben erwogen, unsere Basisstile zu entkoppeln, damit das standardmäßige “unthemed” Discourse viel weniger CSS hat (was die Wartung von Themes erleichtern könnte) – aber das ist im Moment nur eine Idee.

Ich denke, diese wurden “nach Bedarf” hinzugefügt, daher hatten wir keinen Bedarf an zusätzlichen Sekundär-/Quartärskalen. Wir haben keine Pläne, die benannten Versionen zu entfernen, daher kann entweder für absehbare Zeit verwendet werden.

Die kleinsten/kleineren/größeren/größten Größen sind für die Benutzereinstellung der Textgröße. Meistens müssen diese nicht geändert werden.

Die em-Skala basiert ungefähr auf einer klassischen typografischen Skala (z. B. The typographic scale). Eine gleichmäßigere Skala wie 13-15-17-19 erzeugt nicht viel Kontrast und alles bleibt eher klein, es sei denn, man hat viele Schritte. Auf einer klassischen Skala nehmen die Abstände zwischen den Skalen mit der Größe zu, um mehr Kontrast zu erzeugen.

Die Idee hinter der em-basierten Skala ist, dass alles in der App proportional skaliert werden kann und einzelne Bereiche der App proportional skaliert werden können. Ich könnte also so etwas tun:

.sidebar-wrapper {
  font-size: 20px;
}

und alles darin würde proportional skaliert, ohne jede einzelne Schriftgröße und alle zugehörigen Abstände ändern zu müssen.

Intern ist das Feedback ähnlich wie Ihr eigenes, da Entwickler genau wissen wollen, welche Schriftgröße sie unabhängig vom Kontext erhalten, was ein Nachteil des Systems ist. Idealerweise würden wir uns nicht um exakte Größen kümmern und könnten einfach sagen: “Das sollte einen Schritt nach oben gehen, weil ich es größer haben möchte”, aber dieses mentale Modell scheint nicht natürlich zu kommen.

Es gibt den Wunsch, zu einem rem-basierten System zu wechseln, aber wie bereits erwähnt … dies würde wahrscheinlich lange dauern, da es so viele bestehende Websites betreffen würde. Ich würde auch die Browser-Standardbasis von 16px gegenüber unseren 15px bevorzugen, aber ähnliche Geschichte (es waren früher 14px! Wir haben also zumindest einen Schritt gemacht).

Die rem-Skala wird für Überschriften in gekochten Post-Inhalten verwendet, da das Verschachteln von Überschriften-Tags mit ems bedeutete, dass Einzelpersonen den Text unendlich skalieren und Layoutprobleme verursachen konnten.

Ja, es ist ein paar Mal aufgetaucht … (ich klinge wie eine kaputte Schallplatte, aber…) es müsste eine sehr schrittweise Änderung sein, um Regressionen auf bestehenden Websites zu vermeiden. Im Moment fügen wir gemeinsame Variablen innerhalb bestimmter Bereiche hinzu, während wir sie aktualisieren, was ein Schritt in die richtige Richtung ist.

Die Geschwindigkeit, mit der diese Dinge geschehen, ist verständlicherweise etwas frustrierend, aber die meiste Zeit der Geschichte von Discourse gab es überhaupt keinen Vollzeit-Designer. Das Designteam ist in den letzten zwei Jahren auf 7 angewachsen (einschließlich dedizierter Designer für Kundenprojekte, die meist außerhalb der Öffentlichkeit stattfinden), daher werden wir hoffentlich jetzt schneller zu mehr Konsistenz übergehen.

12 „Gefällt mir“

Vielen Dank für die Erklärungen, Kris! Das ist wirklich hilfreich.

Ich habe also nur ein sehr kleines Problem. Ich denke manchmal, es könnte hilfreich sein, die allgemeine Erwartungshaltung in Bezug auf das Produkt zu ändern. Um zu etablieren, dass Discourse sich schnell weiterentwickelt.

Das könnte nett sein, aber ich glaube, es würde trotzdem einfachere Griffe erfordern. Es gibt einfach so viele Vorlagen. Selbst wenn jede davon ein einfacheres CSS hat, wenn ich sie nicht auf orchestrierte Weise ändern kann, ist es immer noch viel Arbeit.

Es ist ein schönes mentales Modell. Ich würde es vielleicht vorziehen, genaue Größen zu haben, weil sie so viel einfacher anzuwenden sind. Zum Beispiel hat jemand ein Designsystem, ich wende einfach die Zahlen an und schaue mir das Ergebnis an. Während ich sonst das Gefühl hätte, zwei Systeme aufeinander abstimmen zu müssen. Ich müsste also sowohl ihren Charakter verstehen als auch ihre gemeinsame Melodie finden.

5 „Gefällt mir“

Ich denke mehr darüber nach… Ich könnte mehrere Visionen für ein Discourse-Designsystem haben.

Discourse Design System-95
Ein praktisches Designsystem mit standardisierten atomaren Bausteinen. Das wäre wohl immer ein notwendiger erster Schritt.


Ein System, das einige High-Level-Komponenten abstrahiert. Für Discourse könnten dies Moderation, Anerkennung, Information usw. sein.


Ein gemeinsames System von Mustern für Online-Gespräche. Ähnlich dem grundlegenden Umfang eines Systems wie Material Design.

2 „Gefällt mir“