In Experience Builder umfasst ein Design verschiedene Designspezifikationen, durch die das Aussehen der App größtenteils bestimmt wird. Mit den Designeinstellungen können Sie Farben, Schriftarten, Schaltflächen-Styles und weitere Darstellungseinstellungen global für die gesamte App festlegen, anstatt diese Einstellungen für einzelne Widgets und andere App-Elemente ändern zu müssen.
In den Designeinstellungen werden Primär- und Sekundärfarben, Funktionsfarben für Informations- und Erfolgsmeldungen, Warnungen und Fehler sowie neutrale Farben definiert, die Sie alle anpassen können, um sicherzustellen, dass die visuelle Identität Ihrer App mit dem Branding Ihrer Organisation oder Ihren persönlichen Vorlieben übereinstimmt. Sie können die Farben von Oberflächen wie Seiten, Zellen des Widgets "Tabelle" und Fenstern sowie die Farben interaktiver Elemente wie Dropdown-Schaltflächen, Umschaltflächen im aktivierten und deaktivierten Zustand und der Tastaturfokusanzeige festlegen. Das Design hat außerdem Auswirkungen auf die Typografie, den Rahmenradius von App-Elementen, den Unterstreichungsstil für Linktexte und vieles mehr. Auf das Layout oder den Inhalt der App wirkt sich das Design nicht aus.
Das Design definiert das Standardaussehen vieler App-Elemente. In den Einstellungen für Widgets, Seiten und andere Elemente können Sie das App-Design jedoch überschreiben, um die Darstellung einzelner Elemente zu ändern.
Um die Designeinstellungen für eine Experience Builder-App oder Vorlage anzuzeigen, klicken Sie auf Design, um das Fenster Design zu öffnen.
Auswählen eines Designs
Wenn Sie das Fenster Design öffnen, wird eine Liste mit vorgefertigten Designs angezeigt. Symbole auf den Miniaturansichten der Designs zeigen an, ob es sich bei dem jeweiligen Design um ein helles Design 
oder ein dunkles Design 
handelt.
Sie haben die Auswahl zwischen den folgenden vorgefertigten Designs:
- Prime: Ein helles Design mit Blau und Violett als Primär- und Sekundärfarben. Hierbei handelt es sich um das Standarddesign.
- Astro: Ein dunkles Design mit Blau und Violett als Primär- und Sekundärfarben.
- Ocean: Ein helles Design mit Blau und Grün als Primär- und Sekundärfarben.
- Velvet: Ein helles Design mit Rot und Blau als Primär- und Sekundärfarben.
- Abyss: Ein dunkles Design mit Violett und Blau als Primär- und Sekundärfarben.
- Meadow: Ein helles Design mit Grün und Braun als Primär- und Sekundärfarben.
- Festgelegtes Design: Synchronisierung des Designs mit der Einstellung Festgelegtes Design in Ihrer Organisation. Wenn Sie dieses Design auswählen, können Sie weder die Farbe noch die Typografie oder andere Designeinstellungen anpassen. Wenn Sie dieses Design nicht auswählen, können Sie trotzdem Farben aus dem festgelegten Design der Organisation auswählen, wenn Sie die Farbeinstellungen für ein Widget konfigurieren.
Hinweis:
In der Aktualisierung von ArcGIS Online vom Oktober 2025 wurde ein neues Designsystem eingeführt. In allen Apps, die nach dieser Aktualisierung erstellt wurden, wird das neue System verwendet. In allen Apps, die vor dieser Aktualisierung erstellt wurden, werden die Designs des vorherigen Systems beibehalten, es sei denn, Sie ändern die Designs in den Einstellungen unter Design.
Beachten Sie, dass beim Wechsel von einem alten Design zu einem neuen Design in einer vorhandenen App einige Teile der App möglicherweise nicht wie erwartet angezeigt werden, da verschiedene Designvariablen nicht auf die gleiche Weise zugeordnet werden. Es wird empfohlen, das alte App-Design beizubehalten.
Beim Wechsel zu einem neuen Design sollten Sie ein Design mit dem gleichen Modus wie das alte Design auswählen. Wechseln Sie von einem alten hellen Design zu einem neuen hellen Design oder von einem alten dunklen Design zu einem neuen dunklen Design.
Anpassen des Designs
Nachdem Sie ein Design ausgewählt haben, klicken Sie auf Anpassen, um zusätzliche Designeinstellungen anzuzeigen.
Hinweis:
Klicken Sie auf Zurücksetzen, um die Standardeinstellungen eines Designs wiederherzustellen.
Farbeinstellungen
Mit den Einstellungen auf der Registerkarte Farbe werden die Farben für verschiedene Teile der App definiert.
Sie können die Farbauswahlkomponente verwenden, um Branding-Farben, Funktionsfarben, neutrale Farben, Oberflächenfarben und Farben für interaktive Elemente zu definieren.
Branding- und Funktionsfarben
Branding-Farben sind die Farben, die in der App am häufigsten verwendet werden. Sie sind die Hauptfarben, die verwendet werden, um Aufmerksamkeit zu erzeugen und Interaktivität zu vermitteln.
- Primärfarben sind für die auffälligsten Komponenten der Bedienoberfläche vorgesehen, wie z. B. unverankerte Aktionsschaltflächen, Schaltflächen mit besonderer Hervorhebung und Aktivzustände. Sie sollten Sie für Füllungen, Texte und Symbole verwenden, die Sie deutlich hervorheben möchten.
- Sekundärfarben sind für weniger auffällige Füllungen, Texte und Symbole der Bedienoberfläche vorgesehen.
Funktionsfarben werden in Benachrichtigungen verwendet, wie z. B. Meldungen, die anzeigen, dass ein Widget einen Task erfolgreich ausführt.
- Infofarben werden für Informationsmeldungen verwendet.
- Erfolgsfarben werden für Erfolgsstatusmeldungen verwendet, wie z. B. Meldungen, die anzeigen, dass ein Widget-Prozess erfolgreich war.
- Warnfarben werden für Warnmeldungen verwendet.
- Fehlerfarben werden für Fehlermeldungen verwendet, wie z. B. Meldungen, die anzeigen, dass ein Widget-Prozess fehlschlägt.
Sie können die Farbauswahlkomponente verwenden, um eine Grundfarbe für jede der sechs Branding- und Funktionsfarben zu definieren.
Um Apps dynamischer zu gestalten, verwendet Experience Builder verschiedene Schattierungen der einzelnen Farben in der gesamten App. Neben jeder Branding- und Funktionsfarbe wird in einer Vorschau Text in drei verschiedenen Farbschattierungen angezeigt, und zwar in einer hellen Schattierung, einer Hauptschattierung und einer dunklen Schattierung. Die Textfarbe wird zur Optimierung von Kontrast und Anzeige automatisch ausgewählt.
Bei Schaltflächen werden die drei Farbschattierungen beispielsweise verwendet, um Zustände und Interaktion zu vermitteln. In der folgenden Abbildung wird für die Schaltfläche die primäre Designfarbe verwendet. Die Standardfarbe der Schaltfläche ist die Hauptschattierung, die Farbe für den Zustand beim Daraufzeigen ist die dunkle Schattierung und die Farbe für den gedrückten Zustand ist die helle Schattierung.
Hinweis:
Die Farbe des gedrückten Zustandes einiger Schaltflächen kann sich von der hellen Schattierung unterscheiden, da beim Drücken einiger Schaltflächen ein Ripple-Animationseffekt ausgelöst wird. Die Animation enthält einen Transparenzeffekt, durch den die Farbe der Schaltfläche heller angezeigt wird.
Für Informations-, Erfolgs-, Warn- und Fehlermeldungen werden ebenfalls alle drei Farbschattierungen verwendet.
Wenn Sie die standardmäßigen Branding- oder Funktionsfarben ändern, können Sie das Kontrollkästchen Meine Farbauswahl optimieren aktivieren, um automatisch Schattierungen der von Ihnen gewählten Farben zu generieren, die für Kontrast und Anzeige optimal sind.
Neutrale Farben
Neutrale Farben definieren die Grundfarben der Anwendung. Genauer gesagt definieren sie die Standardfarbe von Text, Hintergründen, Rahmen und Trennlinien.
Unter Neutral können Sie die Farbauswahl verwenden, um eine neutrale Grundfarbe auszuwählen. Basierend auf dieser Grundfarbe werden 13 Schattierungen angezeigt. Dies sind alle neutralen Farben, die in der App verwendet werden.
Gemeinsam bilden die Branding-Farben, die Funktionsfarben und die neutralen Farben die Designfarben, die in der Farbauswahlkomponente in Widget- und Seiteneinstellungen sowie anderen Elementeinstellungen angezeigt werden, in denen Sie Farben definieren können.
Farben von Oberflächen und interaktiven Elementen
Sie können die Farbeinstellungen unter Oberfläche verwenden, um die Farben von Elementhintergründen und auf diesen Elementen angezeigtem Text zu definieren. Standardmäßig sind diese Farben mit den neutralen Farben verknüpft.
- Die Seitenfarben gelten für Seiten, Abschnitte und die Hauptanzeigen von Bildschirmgruppen.
- Die Container-Farben gelten für Kachel-Widgets, Listenelemente in Listen-Widgets und Zellen in Tabellen-Widgets.
- Die Überlagerungsfarben gelten für Fenster, QuickInfos, modale Elemente und Pop-ups.
Sie können die Farbeinstellungen unter Interaktive Elemente verwenden, um die Farben von Elementen wie Dropdown-Menüschaltflächen, Paginierungsschaltflächen, aktiven Registerkarten in Menüs und Umschaltflächen zu definieren.
- Die Standardfarbe gilt für den Standardzustand der interaktiven Schaltflächen. Standardmäßig ist diese Farbe mit den neutralen Farben verknüpft.
- Die Farbe für den Auswahlzustand gilt für den Auswahlzustand der interaktiven Schaltflächen. Standardmäßig ist diese Farbe mit der primären Designfarbe verknüpft.
- Die Farbe Tastaturfokus gilt für den Indikator, der zeigt, auf welches interaktive Element der App-Seite der Tastaturfokus gesetzt ist. Dies ist beim Navigieren in der App mit der Tastatur hilfreich. Standardmäßig ist diese Farbe mit der primären Designfarbe verknüpft.
Hinweis:
Standardmäßig sind alle Farben von Oberflächen und interaktiven Elementen entweder mit den neutralen Farben oder der primären Designfarbe verknüpft. Beim Ändern der neutralen oder primären Designfarbe ändern sich auch die verknüpften Farben. Wenn Sie die Farben von Oberflächen oder interaktiven Elementen mit der zugehörigen Farbauswahl ändern, dann wird die Verknüpfung zwischen diesen Farben und den neutralen oder primären Designfarben aufgehoben. Sie können aber auf Zurücksetzen klicken, um diese Verknüpfung wiederherzustellen.
Wenn Sie die Farben von Oberflächen oder interaktiven Elementen ändern, werden die zugehörigen Textfarben automatisch in Farben mit ausreichendem Kontrast geändert. Das minimale Kontrastverhältnis lautet 3:1. Wenn Sie eine Textfarbe in eine Farbe ändern, die dem Kontraststandard nicht entspricht, wird eine Warnung mit der Aufforderung, eine andere Farbe auszuwählen, angezeigt.
Typografie-Einstellungen
Auf der Registerkarte Typografie können Sie die folgenden textbezogenen Einstellungen ändern:
- Schriftart: Wählen Sie Schriftarten für Überschriften und Textkörper aus.
- Überschriften: Wählen Sie eine Schriftart für den Überschriftentext aus.
- Text: Wählen Sie eine Schriftart für den Textkörper aus. Der Textkörper umfasst alle weiteren App-Texte, einschließlich Beschriftungen.
- Schriftgröße: Verwenden Sie die Gleitskala, um die allgemeine Schriftgröße zu definieren. Die Größen reichen von Sehr klein bis Sehr groß. Kleinere Schriftgrößen ermöglichen es, mehr Textinhalt in einem Bereich unterzubringen, während größere Schriftgrößen das Lesen erleichtern.
Experience Builder enthält Standardschriftarten. Sie können Schriftarten hinzufügen, indem Sie in den Dropdown-Menüs für die Schriftart auf Google Fonts hinzufügen klicken. Das Fenster Google Fonts hinzufügen wird angezeigt, in dem Sie eine Schriftart-URL in ein Textfeld eingeben können. Klicken Sie auf OK, um die Schriftart hinzuzufügen.
Weitere Designeinstellungen
Auf der Registerkarte Mehr können Sie die folgenden Einstellungen ändern:
- Rahmenradius: Wählen Sie einen allgemeinen Style für den Rahmenradius von App-Elementen aus. Der Rahmenradius wirkt sich auf die Form der Kantenübergänge von Elementen aus, wie z. B. von Containern, Schaltflächen und Eingabefeldern. Sie können festlegen, dass der Rahmenradius durch das ausgewählte Design definiert wird, oder eine der Optionen Kein, Klein, Mittel, Groß oder Sehr groß auswählen.
- Komponenten: Passen Sie die Darstellung von Eingabefeldern und Linktext an.
- Eingabefeld: Wählen Sie eine Farbe für Eingabefelder aus. Eingabefelder umfassen Texteingabefelder, Suchfelder, die Standardzustände von Kontrollkästchen, Optionsschaltflächen und Umschalter.
- Link: Wählen Sie einen Unterstreichungsstil und eine Farbe für Linktext aus. Sie können festlegen, dass der Unterstreichungsstil durch das ausgewählte Design definiert wird, oder eine der Optionen Keine Unterstreichung, Durchgezogene Unterstreichung oder Gepunktete Unterstreichung auswählen.