Festgelegtes Design in Constellation
Das Pega Constellation-Designsystem folgt einem festgelegten Design. Darunter versteht man mehrere zweckmäßige, vorkonfigurierte Standarddesigns und -vorlagen für eine schnellere Gestaltung. Designer können damit Seiten und Abläufe erstellen, bei denen die Benutzerbedürfnisse im Mittelpunkt stehen. Festgelegtes Design:
- wird sukzessive angepasst, wenn neue Anwendungsfälle entdeckt oder reguliert werden
- schließt die Anpassung von Mustern und Komponenten nicht aus
- zielt darauf ab, die Time-to-Market zu verkürzen und stärker die Benuzterbedürfnisse in den Mittelpunkt zu stellen
Mehr Zeit für wichtige Entscheidungen mit einem festgelegten Design
Bei der Gestaltung gibt es viele Möglichkeiten, ein Problem zu lösen, zum Beispiel die Position der Schaltfläche Next in einem Modal. Einige Unternehmen platzieren die Schaltfläche unten rechts in Anlehnung an das Umblättern von Buchseiten. Andere Unternehmen platzieren es in der unteren Mitte, um einen natürlicheren Lesefluss zu erzielen. Wieder andere Unternehmen richten die Schaltfläche linksbündig aus, wenn wichtige Eingaben oder Informationen oben im Modal angezeigt werden. All diese Lösungen mögen zwar zu einer besseren Einheitlichkeit und Lesbarkeit beitragen, aber solche kleinen Entscheidungen beanspruchen sowohl Planungszeit als auch Implementierungsressourcen in allen Teams. Ein festgelegtes Design löst viele dieser Probleme im Sinne der Designer. Einfacher ausgedrückt: Mit einem festgelegten Design können Sie sich besser auf den Modal-Inhalt konzentrieren und darauf, ob das Modal für den User Flow in der Anwendung Sinn ergibt.
Die folgende Abbildung veranschaulicht, wie ein Modal während des Workflows des Benutzers angezeigt wird:
Festgelegte Designkonzepte im Pega Constellation-Designsystem
Das Constellation-Designsystem verwendet eine Reihe von Tools und Konzepten in einer präskriptiven Form. Anwendungsdesigner und Personen, die eng mit Designern zusammenarbeiten, sollten mit den folgenden Begriffen vertraut sein: Design-Token, Themes, Muster und Komponenten.
Design-Tokens
Design-Token sind Tools, mit denen wichtige Design- und UX-Prinzipien über mehrere Channels und Technologien hinweg vermittelt werden. Token werden verwendet, um Stilelemente für das Web, Desktops, Mobilgeräte, Tools und Anwendungen zu vereinheitlichen. Sie sind für die Verwendung mit Pega-Platform-Anwendungen von entscheidender Bedeutung, da diese native und Webdesign-Elemente vereinen.
Das Constellation-Designsystem umfasst vier Arten von Design-Token:
| Design-Token-Typ | Description | Beispiele |
|---|---|---|
| Primitive (Grundlage) | Darstellung von unformatierten Design-Elementen |
|
| Meaningful (Bedeutung) | Mit Primitive-Token verknüpfte Funktion |
|
| Component-shared (gemeinsam genutzte Komponenten) | Sich wiederholende Komponententeile, die auf Komponenten-Token basieren und von mehreren Komponenten gemeinsam genutzt werden können; verwenden häufig sowohl Primitive- als auch Meaningful-Token |
|
| Component-specific (komponentenspezifisch) | Alle Komponenten verfügen über einen Satz von Token, die für diese Komponente spezifisch sind und jedes Stilelement (vom Abstand bis zum Layout) definieren. Diese können eine Kombination aus Primitive-, Meaningful- oder Component-shared Token verwenden. |
|
Einige Design-Token lassen sich für ein benutzerdefiniertes Branding beim Anpassen Ihrer Anwendungen bearbeiten. Beispiele hierfür sind Meaningful-Token wie base.palette.brand-primary oder das Ändern von Basic-Token, wie die Standardfarbfamilie.
Themes
Themes sind einfache Einstellungen, mit denen eine Anwendung nach Markenstandards gestaltet werden kann.
Die folgende Abbildung zeigt drei Theme-Beispiele, die das Branding für Text, Farben und Schaltflächen vorgeben:
Muster
Muster sind wiederholbare und skalierbare Kombinationen von Komponenten und Benutzerabläufen, die eine einheitliche User Experience schaffen.
Die folgende Abbildung zeigt drei Beispiele für Muster, die in einer Anwendung wiederverwendet werden können:
Einige Beispiele für Muster im Constellation-Designsystem:
- Workflows zum Suchen und Auswählen von Inhalten, z. B. „Search & Select“ oder die Suchergebnisse
- Systemmeldungen und -rückgaben, z. B. Fehlerbenachrichtigungen, Empty States oder Warnungen
- Navigationsinformationen wie die Hauptnavigation oder Breadcrumbs
- Durchlaufen von Arbeitsphasen (Stages)
Komponenten
Komponenten sind UI-Elemente und -Kombinationen, die eine bestimmte Funktion erfüllen.
Die folgende Abbildung zeigt ein allgemeines UI-Element, ein Textfeld:
Komplexe Komponenten mit einem bestimmten geschäftlichen Ziel, die in jedem Kontext funktionieren können, werden als Widgets bezeichnet. Ein Beispiel hierfür ist ein Welcome-Widget auf der Startseite, mit dem Sie die Nachricht für Benutzer festlegen, wenn sie sich erstmals bei Ihrer Anwendung anmelden.
Prüfen Sie mit der folgenden Interaktion Ihr Wissen:
Vorgegebene User Experience
Ein gutes Designsystem ist ganzheitlich, leicht erweiterbar und sorgt für eine vorgegebene User Experience. Designmuster, UI-Komponenten, das technische Verhalten und die visuellen Vorgehensweisen ergänzen sich gegenseitig und sollen auf bestimmte Weise verwendet werden, um allgemeine Geschäftsprobleme zu lösen, die Geschwindigkeit und den Workflow für Benutzer zu verbessern sowie gesetzliche Anforderungen wie eine Barrierefreiheit oder Lokalisierung zu erfüllen (oder zu übertreffen).
Dies bedeutet jedoch nicht, dass es innerhalb eines Designsystems keine Flexibilität oder Kreativität gibt. Viele endgültige Entscheidungen über die Platzierung, die Darstellung von Inhalten, den Ablauf der zu erledigenden Aufgaben und das Branding einer Anwendung bleiben dem Designer überlassen, der das System gestaltet. Als Designer organisieren Sie Ideen, optimieren Abläufe und konzentrieren sich auf das, was wirklich wichtig ist: Benutzern dabei zu helfen, ihre Ziele zu erreichen und die Anforderungen des Unternehmens zu erfüllen.
Die folgende Abbildung zeigt die Beziehung zwischen verschiedenen Teilen eines Designsystems:
Prüfen Sie mit der folgenden Interaktion Ihr Wissen:
Dieses Thema ist im folgenden Modul verfügbar:
If you are having problems with your training, please review the Pega Academy Support FAQs.
Möchten Sie uns dabei helfen, diesen Inhalt zu verbessern?