Konfigurieren Sie ein Next Experience Design

Fügen Sie die von Ihnen erstellten Stile zu hinzu Next Experience Design zum Ändern des Erscheinungsbilds der Anwender-Experience.

Vorbereitungen

Stellen Sie sicher, dass sich die folgenden Systemeigenschaften in befinden sys_properties.list Sind auf festgelegt Wahr :

• glide.ui.polaris.experience
• glide.ui.polaris.dark_themes_enabled: Zur Wiederverwendung von Next Experience Dunkle Variante in diesem Design.

Erforderliche Rolle: Administrator

Warum und wann dieser Vorgang ausgeführt wird

Die Next Experience Enthält zwei Themen, Polaris und Coral. Sie können beide Designs als Ausgangspunkt wiederverwenden oder anpassen, wenn Sie eigene Designs erstellen oder ändern.

Warum und wann dieser Vorgang ausgeführt wird

Hinweis:

Wenn Sie ein Design anpassen, das Sie mit erstellt haben Themengenerator Und geben Sie einen ungültigen JSON-Code ein. Sie können Ihren Designdatensatz nicht speichern. Während Sie im UX-Designdatensatz arbeiten, können Sie mit zur Seite Editor navigieren Öffnen Sie in Themengenerator Schaltfläche. Weitere Informationen finden Sie unter Verwalten oder bearbeiten Sie ein Design mit Themengenerator.

Prozedur

1. Navigieren zu Alle > Now-Experience-Framework > Designverwaltung > Designsan.
2. Erstellen Sie einen Designdatensatz, indem Sie auswählen Neu .
3. Geben Sie einen Namen und eine Beschreibung für Ihr Design ein.
4. Wählen Sie das Symbol „zusätzliche Aktionen“ aus Und wählen Sie aus Speichern .
5. Auf der Zusammensetzung: App-Design Fügen Sie Zeilen ein, um Stile hinzuzufügen, die Ihrem Design zugeordnet sind.
   Sie weisen Werte in vier Spalten zu:

   Anwendungsbereich

   Überschreibt das Basisdesign. Anwender, die die Anwendbarkeitsbeschränkungen erfüllen, sehen diese Überschreibungen in ihrem Design und nicht im Basisstil. Beispielsweise kann ein Stil mit verschiedenen Schriftarten auf Manager angewendet werden. Anwender, die die Manager-Anwendbarkeit erfüllen, sehen die verschiedenen Schriftarten in Next Experience UI, die die Designwerte des Basissystems überschreibt. Administratoren müssen kein gesamtes Design mit Änderungen für die entsprechende Zielgruppe kopieren oder erstellen.

   Hinweis:

   Wenn Sie die Einschränkung der Anwendbarkeit leer lassen, wird der Stil auf alle Anwender angewendet.

   Reihenfolge

   Gibt an, wann der Stil angewendet wird. Je höher die Reihenfolge bedeutet, desto größer ist ihre Priorität.

   Hinweis:

   Wenn Sie einen anwenderdefinierten Stil verwenden möchten, stellen Sie sicher, dass Ihre Stilreihenummer höher ist als der Standard-Polaris- oder Korallenstil.

   Stil

   Konfiguriert vier Hauptstile. Sie können die Stilnamen, die in den angegebenen Polaris- oder Coral-Designs verwendet werden, nicht bearbeiten, aber Sie können den JSON-Code, der jedem Stil zugeordnet ist, aus einem Design kopieren und in das Formular Ihres anwenderdefinierten Stils einfügen und bearbeiten.

   • Farben: Gibt die Farbeigenschaften des Designs und alle Basisvarianten an, die Sie hinzufügen möchten. Im Basisabschnitt des Farbstils wird eine Teilmenge der Farben, die das Design verwendet, mit Rot, Grün, Blau (RGB) definiert. Das Design generiert mehr als 20 Verläufe dieser Farben in der Anwendung.
   • Form und Formular: Gibt das Erscheinungsbild der Ränder sowie der Schaltflächen und anderer UI-Steuerelemente an.
   • Bilder: Fügt Bilder hinzu, die im Design Ihrer Anwendung verwendet werden.
   • Typografie: Gibt die Schriftarten an, die in der gesamten Anwendung verwendet werden.

   Typ

   Gibt zwei Typen an: Core und Variante. Die Core-Stile umfassen Farbe, Form und Form, Typografie und Bilder. Varianten geben eine andere Version des Designs an, z. B. die verschiedenen Farben, die Anwender auswählen können. Die häufigste Variante ist eine dunkle Version des Designs. Das dunkle Design ist die einzige Variante, die im Lieferumfang enthalten ist Next Experience. Weitere Informationen finden Sie unter Arbeiten mit Designs in Next Experience.

6. Wählen Sie aus Stil Feld und wählen Sie das Suchsymbol aus .
7. Wählen Sie Neu.
8. Wählen Sie Primär, Sekundär und Neutrale Farben aus.
   Hinweis:

   Ein Design besteht aus mehreren Variablen, daher können Sie feststellen, dass die standardmäßige Polaris- oder Coral-Designfarbe an verschiedenen Stellen auftritt.
9. Wenn Sie die Branding-Farben Ihrer Organisation haben, navigieren Sie zum Farbgenerator unter https://theme.deoprototypes.com/color-generator-algo-v1.
10. Wählen Sie aus Automatisch Generieren Schaltfläche.

    Ein Modal wird angezeigt und fordert Sie auf, die drei Farben Ihrer Organisation einzugeben.

11. Geben Sie Ihre Hex-Codewerte für die Farben Ihrer Organisation ein.
12. Wählen Sie Aus Generieren .
13. Sammeln Sie Ihre CSS-Variablen, indem Sie auswählen JSON kopieren .
14. Füllen Sie das Formular „UX-Stil“ aus.

    Feld	Beschreibung
    Name	Name Ihres UX-Stils.
    Typ	Zentral Variante Weitere Informationen zu Typen finden Sie unter Unterschied zwischen Kernstilen und Varianten .
    Stil	Werte für die Farben, Formen und Formulare. Einige der Werte sind Farben, einige, z. B. Ränder, sind Pixelwerte. Wichtig: JSON-Code muss wie im folgenden Beispiel gezeigt umgebrochen werden.
    Anwendung	Umfang des UX-Stils.

15. Wählen Sie Absenden.
16. Wählen Sie Aktualisieren.

Nächste Maßnahme

Informationen zum Veröffentlichen Ihres anwenderdefinierten Designs finden Sie unter Veröffentlichen Sie mehrere Designs in Next Experience.