Inhaltsverzeichnis
1. Definition
Designsystem: Eine grundlegende Sammlung gemeinsam nutzbarer Designsprachen, die Designwerte, Semantik, Syntax und Kontext umfasst.
Styleguide: Ein physisches oder digitales Dokument, das die Stile, Komponenten, Beispiele und Prinzipien eines Designsystems enthält und deren Verwendung erklärt.
Musterbibliothek: Ein organisierter Satz wiederverwendbarer Komponenten, der normalerweise Codebeispiele, Designrichtlinien und Anwendungsfälle enthält.
Komponente: Ein unabhängiger und wiederverwendbarer Stil, der eine bestimmte Schnittstelle oder Funktion darstellt.
2. Designsystem
2.1 Designsystem
Ein Designsystem ist eine Bibliothek wiederverwendbarer Designspezifikationen und -komponenten, die Designern und Entwicklern dabei hilft, hochwertige digitale Produkte innerhalb konsistenter visueller und Interaktionsmuster zu erstellen. Es handelt sich um eine Sammlung von Design-, Entwicklungs-, Dokumentations- und Verwaltungstools, die ein konsistentes Markenerlebnis und Benutzererlebnis über Teams und Projekte hinweg bieten. Es umfasst typischerweise Dinge wie Designprinzipien, Farben, Schriftarten, Typografie, Symbole, Komponenten, Vorlagen, Styleguides, Interaktionsmuster und Codebibliotheken. Durch den Einsatz eines Designsystems können Teams Produkte schneller erstellen, Designfehler reduzieren, Konsistenz und Wartbarkeit verbessern sowie Zeit und Ressourcen sparen.
Das Designsystem ist eine gemeinsame Sprache im Team, und der Kern der Sprache besteht darin, eine reibungslose Kommunikation im System sicherzustellen. Programmiersprachen ermöglichen es Menschen, mit Computern zu kommunizieren, und alltägliche gesprochene Sprachen ermöglichen es Menschen, mit jedem zu kommunizieren, der dieselbe Sprache spricht. Die Designsprache gibt den Designideen Ihres Teams Bedeutung und hilft, diese Bedeutung zwischen den Teams zu kommunizieren. Wenn eine gemeinsame Sprache verwendet wird, wird die Kommunikation von Ideen einheitlicher und konkreter, was die Kommunikation erleichtert.
Selbst wenn Sie kein Designsystem haben, nutzt Ihr Team es. Überlegen Sie, wie Sie Designideen kommunizieren. Bestimmte Wörter definieren bestimmte Arten von Schnittstellenelementen. Bestimmte Komponenten sollten anders aussehen und anders interagieren. Ohne sich die Mühe zu machen, es zu dokumentieren, haben Sie alle eine gemeinsame Annahme darüber, wie die Dinge funktionieren. Ohne Dokumentation sind die Annahmen natürlich möglicherweise nicht immer konsistent.
Um sicherzustellen, dass Ihre Designsprache konsistenter und klarer ist, sollte Ihr Team einen Styleguide erstellen.
2.2 Styleguide
Ein Styleguide ist ein Dokument, das Vorgaben und Richtlinien für das Erscheinungsbild und den Klang einer Marke oder eines Produkts enthält. Es umfasst in der Regel standardisierte Regeln und Richtlinien, die für Konsistenz und Einheitlichkeit der Marke sorgen und Unterstützung für Design und Schreiben bieten. Styleguides umfassen typischerweise Designelemente (wie Farben, Schriftarten, Symbole und Bilder), Typografie und Layout, Markenstimme (wie Wortlaut, Stil und Klangidentität) und Nutzungsrichtlinien (wie Markennamen, Logos und andere). Identifikatoren). Der Hauptzweck eines Styleguides besteht darin, sicherzustellen, dass eine Marke oder ein Produkt über alle Kanäle und Medien hinweg ein einheitliches Erscheinungsbild, ein einheitliches Erscheinungsbild und eine einheitliche Stimme behält und so die Bekanntheit und Wiedererkennbarkeit der Marke erhöht.
Ein Designleitfaden ist eine physische oder digitale Darstellung eines Designsystems. Durch die Bezugnahme auf den Design-Styleguide können Teammitglieder beginnen, die verschiedenen Teile und Entscheidungen zu verstehen, die das System definieren.
Vor dem Aufkommen des Internets wurden Styleguides in erster Linie dazu verwendet, Standards und Stile für das Schreiben und Druckdesign zu definieren, und Bücher wie das AP Stylebook oder das Chicago Manual of Style sind immer noch die beliebteste Methode für Autoren und Redakteure, um Konsistenz und Definition aufrechtzuerhalten bei den meisten großen Verlagen erhältlich. Eine grundlegende Ressource für Best Practices.
Heutzutage erstellen digitale Verlage und Produktdesignteams Styleguides, um die Designsprache ihres Teams zu festigen. Styleguides helfen ihnen, etablierte Normen zu kodifizieren, bestehende Muster und Verfahren zu dokumentieren und neue Mitglieder schnell auf den neuesten Stand zu bringen.
Ein Styleguide für digitales Design kann einige oder alle der folgenden Elemente enthalten:
- Design-Prinzipien
- Empfohlene Vorgehensweise
- Marken-Styleguide
- Schreibstile
- Ikonographie
- Bilder
- Musterbibliothek
- Code-Styleguide
- Vorlagen
- 工具（Werkzeuge & Dienstprogramme）
- Weitere Dokumentation
2.3 Komponente
Komponente bezieht sich auf ein wiederverwendbares, unabhängiges UI-Element mit bestimmten Funktionen. Komponenten bestehen typischerweise aus HTML-, CSS- und JavaScript-Code und können durch einfaches Aufrufen oder Kopieren und Einfügen in verschiedenen Abschnitten oder Seiten verwendet werden. Der Einsatz von Komponenten kann die Entwicklungseffizienz verbessern und zudem die Konsistenz und Wartbarkeit des Schnittstellendesigns sicherstellen. Zu den allgemeinen Komponenten gehören Schaltflächen, Formulare, Navigation, Karten, Dialogfelder usw. Komponenten können auf Basis verschiedener Frameworks oder Bibliotheken wie React, Angular, Vue usw. entwickelt werden oder sie können mit rein nativem HTML, CSS und JavaScript entwickelt werden. Das komponentenbasierte Entwicklungsmodell ist zu einem wichtigen Trend in der modernen Webentwicklung geworden und bietet eine bessere Skalierbarkeit und Wartbarkeit für die Entwicklung von Webanwendungen und Websites.
3. Stilbibliothek
Wie Sie oben sehen können, ist die Stilbibliothek nur ein Teil des Styleguides. Sie stellen zwar inhaltlich und anwendungstechnisch den größten Teil eines Styleguides dar, ersetzen jedoch nicht den Styleguide als Ganzes.
Beim Aufbau Ihrer Stilbibliothek sollten Sie für jedes hinzugefügte Muster die folgenden Fragen berücksichtigen:
- Schemaname:
- Visuelle Leistung:
- Design-Elemente
- Codebeispiel
- Verformung
- Beispiel
- Vorsichtsmaßnahmen
- Verwandte Elemente