Designsysteme
Lernziele
Nachdem Sie diese Lektion abgeschlossen haben, sind Sie in der Lage, die folgenden Aufgaben auszuführen:
- Nennen der Merkmale und Funktionen eines guten Designsystems
- Beschreiben, wie Designer und Entwickler Designsysteme verwenden, zu ihnen beitragen und sie verwalten
- Erläutern, wie das Salesforce Lightning Design System (SLDS) Entwicklern die Erstellung von Lösungen in der Salesforce-Plattform erleichtert
- Beschreiben, wie und warum sich SLDS von den meisten Designsystemen unterscheidet
Das Salesforce Lightning Design System (SLDS) gibt es jetzt in zwei Versionen.
Salesforce Lightning Design System 2 (SLDS 2) wurde im Rahmen von Spring ‘25 eingeführt. Das ursprüngliche SLDS heißt jetzt SLDS 1.
Bei diesem Trailhead-Badge liegt der Schwerpunkt auf Designsystemen im Allgemeinen, auf SLDS als Ganzem und auf SLDS 1. Wenn Sie weitere Informationen über SLDS 2 erhalten möchten, absolvieren Sie den Trail Erste Schritte mit SLDS 2.
SLDS 2 basiert auf einem neuen CSS-Framework, das die Struktur mithilfe von Styling Hooks von der visuellen Gestaltung trennt. Styling Hooks sind benutzerdefinierte CSS-Eigenschaften, die eine weitergehende Anpassung und Themenbildung ermöglichen, sodass Sie schneller einzigartige Erfahrungen erstellen können.
Sie können SLDS 2 aktivieren, indem Sie das Thema "Salesforce Cosmos" (Salesforce-Kosmos) in Ihrer Organisation auswählen. Siehe Salesforce Cosmos-Thema und SLDS 2-Verfügbarkeit (Beta).
Was ist ein Designsystem?
Bevor wir uns näher mit dem Lightning Design System und seinen magischen Kräften befassen, sollten wir erst einmal den Begriff Designsystem definieren.
Definition von "Designsystem" |
Erläuterung |
|---|---|
|
Ein Designsystem ist eine Sammlung aus wiederverwendbaren Elementen der Benutzeroberfläche, den so genannten Komponenten, und wiederholbaren Entwurfsmustern. Zu den Komponenten können Schaltflächen, Menüs, Klänge, Animationen, optische Muster und mehr zählen. In einigen Designsystemen sind die Komponenten voll funktionsfähig und basieren auf einer UI-Plattform. Andere Systeme, wie SLDS, stellen plattformunabhängige Komponenten zur Verfügung. Die Komponenten stellen HTML und CSS bereit, jedoch keinen funktionalen Code. Ein Muster ist eine wiederverwendbare, dokumentierte Lösung für häufige Probleme oder Aufgaben von Benutzern. Ein Muster besteht aus einer bestimmten Kombination von Komponenten, Layouts und Interaktionen, die ein vollständiges Benutzererlebnis schaffen. Im Gegensatz zu einer einfachen Komponente bietet ein Muster Kontext und bewährte Methoden für ein Benutzerziel oder einen Prozess, wie beispielsweise ein mehrstufiges Formular oder einen Anmeldebildschirm. Einfach ausgedrückt, geben UI-Muster vor, wie Komponenten organisiert sind und interagieren, um eine optimale Benutzererfahrung zu bieten. |
Ein Designsystem ist ein umfassender Satz von Standards, der als Leitfaden für die Entwicklung von Produkten dient. Es umfasst eine Bibliothek mit Mustern, Komponenten, Richtlinien und bewährten Methoden und gewährleistet Konsistenz über alle Designs hinweg. Designsysteme bieten einen ganzheitlichen Rahmen und ein gemeinsames Vokabular für Teams und optimieren so den Produktentwicklungsprozess. Designmuster bieten hingegen einzelne Lösungen und sind einzelne Elemente innerhalb der umfassenderen Architektur eines Designsystems. Stellen Sie sich Komponenten als Bausteine und Muster, Regeln und Richtlinien als detaillierte Anweisungen für die Verwendung dieser Bausteine vor. |
Ein Designsystem orientiert sich an klaren und zugänglichen Standards, Prinzipien und Richtlinien. |
Die Komponenten eines Designsystems sind stark standardisiert und haben ein wiedererkennbares Erscheinungsbild. Muster bieten strukturierte, zielgerichtete Pläne zum Kombinieren und Verwenden von Komponenten. |
|
Entwickler kombinieren Komponenten und Muster, um eine Benutzeroberfläche zu entwerfen. Entwickler implementieren die von Designern erstellten UI-Designs, indem sie die Komponenten des Designsystems auf vielfältige Weise kombinieren, um Anwendungen in HTML und JavaScript zu erstellen. Designrichtlinien dienen als Anweisungen für den Zusammenbau von Komponenten zu Mustern für spezifische Anwendungsfälle. Wenn für die Komponentendesigns Komponentencode vorhanden ist, verlassen sich Entwickler auf diesen Code. Andernfalls erstellen Entwickler die Benutzeroberfläche mit ihrem eigenen HTML- und JavaScript-Code. Sie nutzen die Muster und Richtlinien des Designsystems, um den Code zu erstellen. |
Die Komponenten als solche haben eigentlich keine Funktion, doch wenn Sie die Bausteine zusammensetzen, können Sie praktisch alles damit bauen. |
Ein gutes Designsystem ist:
-
skalierbar: Mit zunehmender Reife eines Designsystems werden weniger Zeit und Geld für die Erstellung grundlegender Elemente (Bausteine) aufgewendet. Entwickler verwenden diese Elemente produkt- und funktionsübergreifend wieder.
-
effizient: Designsysteme sparen Zeit und Energie, indem sie Designer und Entwickler die Freiheit geben, sich auf Benutzerfreundlichkeit und Bedeutung zu konzentrieren.
-
visuell konsistent: Die detaillierten Anweisungen eines Designsystems (Muster, Regeln, Richtlinien) sind zweckorientiert. Seine ästhetischen Elemente ergeben sich aus den Benutzeranforderungen. Standardisierte Komponenten unterstreichen sowohl den visuellen Stil als auch das Branding, wodurch Produkte und Funktionen ein einheitliches Erscheinungsbild bekommen und eine konsistente Benutzererfahrung bieten.
-
freigegeben: Wiederverwendbare, dokumentierte und barrierefrei zugängliche Elemente fördern die Zusammenarbeit und erleichtern es, Projektteile zu delegieren oder auf der Arbeit anderer aufzubauen.
Loslegen mit der Erstellung
Genau wie mit Bausteinen, können Sie mit einem Designsystem sofort mit der Anwendungserstellung beginnen. Dank der Verwendung vorkonfigurierter Komponenten können Sie sich darauf konzentrieren, komplexe Probleme zu lösen und die bestmögliche Benutzererfahrung zu schaffen.
Ein weiterer Riesenvorteil von Designsystemen besteht darin, dass Sie damit Designaufgaben in großem Maßstab verwalten können. Die Bibliothek aus Komponenten, Mustern, Regeln und Richtlinien, trägt dazu bei, dass die Ergebnisse der vielen Designer, Entwickler, Teams und Produkte konsistent bleiben. Ein Designsystem entwickelt sich parallel mit geänderten Anforderungen und ermöglicht es Designern und Entwicklern, Schnittstellen und Tools innerhalb einer komplexen Plattform schnell und einfach zu aktualisieren.
Die Beteiligten
Ein Designsystem ist nur so gut wie seine Beteiligten.
-
Verbraucher sind die Designer, Entwickler und Beteiligten, die Elemente des Designsystems zum Erstellen Anwendungen verwenden. Die Verbraucher kommen sowohl von innerhalb als auch von außerhalb des Unternehmens, welches das Designsystem entwickelt hat, wenn das Unternehmen, wie etwa Salesforce, ein Ökosystem mit Kunden hat, die Anwendungen auf Grundlage der Unternehmensplattform erstellen.
-
Beitragende erstellen die Elemente und Muster, aus denen das Designsystem besteht. Bei jeder Release kann jeder Beitragende neue Muster, Komponenten oder Richtlinien bzw. Änderungen an bestehenden Elementen oder Richtlinien vorschlagen.
-
Kuratoren sind die Wächter des Designsystems. Dieses Team aus Engineering-Mitarbeitern, Produktentwicklern und visuellen Designern pflegt das Designsystem, prüft seinen Code und schult die Community in seiner Nutzung. Kuratoren prüfen vorgeschlagene Änderungen und bauen sie ein, um das Designsystem weiterzuentwickeln.
Da Sie dies lesen, sind Sie wahrscheinlich ein SLDS-Verbraucher oder -Beitragender.
Das Lightning Design System bei Salesforce
Bei Salesforce setzen wir voll auf Designsysteme. Ein Grund für die Leistungsstärke der Salesforce Platform besteht darin, dass sie sich an die komplexen Anforderungen einer Vielzahl von Benutzern anpasst.
Außerdem wachsen wir unglaublich schnell und vergrößern sowohl unseren Produktumfang als auch unsere Mitarbeiterzahl. Durch dieses Wachstum erfüllen wir mehr Benutzeranforderungen. Dazu müssen wir unbedingt effizient und in großem Maßstab ein stimmiges Produkterlebnis gestalten.
SLDS unterstützt Salesforce-Teams dabei. Mit für spezifische Anwendungsfälle geltenden Mustern können Designer schneller iterieren und effizienter konsistente Lösungen erstellen. Komponentenentwicklern steht immer das aktuellste Framework zur Verfügung mit sauberem, barrierefrei zugänglichem Markup und pixelperfektem CSS, sodass sie schneller und fehlerfreier arbeiten können. Kunden und Partner erstellen Anpassungen auf der Salesforce Platform und nutzen dafür ein häufig aktualisiertes, sauberes und konsistentes System, das klare Erläuterungen und Designbeispiele enthält und ein Reverse Engineering der Software damit unnötig macht.
Die meisten Designsysteme bieten voll funktionsfähigen Code. Da SLDS jedoch so viele verschiedene Codebasen unterstützt (etwa Lightning-Webkomponenten (LWC) und React), muss es unabhängig bleiben. Salesforce stellt funktionalen Code bereit, der viele der SLDS-Komponentendesigns über die Lightning-Basiskomponenten implementiert. (Wenn Sie mehr darüber erfahren möchten, wie sich SLDS von anderen Designsystemen unterscheidet, klicken Sie am Ende dieser Einheit in "Ressourcen" auf den entsprechenden Link.)
Als nächstes machen wir einen Abstecher in die Vergangenheit, ganz weit zurück bis zur Geburtsstunde von SLDS.