Farbrichtlinien für Mobile-Design

  • Freigeben Version: Australia
  • Aktualisiert 12. März 2026
  • 2 Minuten Lesedauer

    • Erfahren Sie, wie die Farben, die Sie in Ihren Mobile-Designs auswählen, auf Ihre Mobile-Anwendungen angewendet werden.

    Wichtig:
    Verwenden Sie veraltetes mobiles Design für Tokyo Und früher ServiceNow® Instanzen. Für Utah Und spätere Releases finden Sie unter Next Experience-Design für Mobilgeräte.

    Überlegungen zur Farbauswahl

    Berücksichtigen Sie die folgenden Informationen, wenn Sie Farben für Ihre mobilen Anwendungen auswählen:
    • Wie Ihre Farbauswahl mit Farben in anderen Teilen der App aussieht, z. B. Ihren Bildschirmsymbolen und UI-Stilen. Verwenden Sie nicht zu viele Farben. Einfache Designs von zwei bis drei Farben führen zu einem saubereren, zugänglicheren Layout.
    • Wie Ihre Farbauswahl mit Farben in anderen Elementen aussieht, die in Ihrer App angezeigt werden können. Elemente wie Wissensartikel und Serviceportal-Seiten können in Ihren Apps angezeigt werden. Vermeiden Sie Farbschemata, die nicht gut mit Ihren vorhandenen Elementen funktionieren.
    • Wie ein höherer Kontrast, ergänzende Farben den Fokus Ihres Anwenders lenken können. Verwenden Sie die Farbauswahl, um Bereiche Ihrer Apps hervorzuheben, die die Aufmerksamkeit Ihres Anwenders erfordern.
    • Wie Farbe verwendet werden kann, um Kontrast für eine bessere Lesbarkeit zu schaffen. Stellen Sie in Bereichen, in denen Text angezeigt wird, sicher, dass Ihre Text- und Hintergrundfarben einen hohen Kontrast aufweisen, um sowohl sehbehinderte als auch farbblinde Anwender zu berücksichtigen.
    Wichtig:
    Derzeit ServiceNow® Mobile Android Apps unterstützen die Verwendung der #RGB-Schreibweise nicht, um Designfarben für die Apps anzugeben. Die Notation #RRGBB wird jedoch von beiden unterstützt iOS Und Android Apps.

    Standorte der Designfarbe in mobilen Apps

    Dieses Beispiel zeigt die Farben, die im standardmäßigen Mobile-App-Design verwendet werden. Verwenden Sie die Zahlen in diesem Bild, um zu sehen, wo diese Farben in den verschiedenen Bereichen Ihrer mobilen Apps angezeigt werden. Farben, die im standardmäßigen mobilen Design verwendet werden

    Mobile Funktionen

    Verwenden Sie die folgenden Abbildungen, um zu sehen, wie sich Ihre Farbauswahl auf die Elemente in Ihren mobilen Apps auswirkt.

    Anwendungsstartseite
    Diagramm, wo Designfarben auf einer Anwendungsstartseite angewendet werden.
    Navigationsleiste
    Diagramm, wo Designfarben in der Navigationsleiste angewendet werden.
    Liste
    Diagramm, wo Designfarben in einer Liste angewendet werden.
    Virtual Agent
    Diagramm, wo Designfarben in Virtual Agent angewendet werden.
    Suchen
    Diagramm, in dem Designfarben in Suchkomponenten angewendet werden.
    Aktionen
    Diagramm, wo Designfarben auf Aktionskarten angewendet werden.

    Datensatzbildschirm und Komponenten

    Verwenden Sie die folgenden Abbildungen, um zu sehen, wie sich Ihre Farbauswahl auf einen Datensatzbildschirm und seine Komponenten in Ihren mobilen Apps auswirkt.

    Datensatzbildschirm
    Diagramm, wo Designfarben auf einem Datensatzbildschirm angewendet werden.
    Prüfliste
    Diagramm, wo Designfarben in einer Prüfliste angewendet werden.
    Aktivitätenstrom
    Diagramm, in dem Designfarben in einem Aktivitätenstrom angewendet werden.
    Links
    Diagramm, wo Designfarben in Links angewendet werden.
    E-Signatur
    Diagramm, wo Designfarben in E-Signaturen angewendet werden.

    Bildschirmvorlagen

    Verwenden Sie die folgenden Abbildungen, um zu sehen, wie sich Ihre Farbauswahl auf die verschiedenen Bildschirmvorlagen in Ihren mobilen Apps auswirkt.

    Kalender
    Diagramm, wo Designfarben auf Kalenderbildschirmen angewendet werden.
    Karte
    Diagramm, wo Designfarben auf Kartenbildschirmen angewendet werden.
    Hinweis:
    Die Farbe anheften Das Feld im Listenstream-Datensatz, das Ihrem Kartenbildschirm zugeordnet ist, bestimmt die Farbe der Stifte auf Ihren Karten.
    URL-Vorlage
    Diagramm, wo Designfarben auf URL-Vorlagenbildschirmen angewendet werden.

    Einstellungen und Benachrichtigungen

    Verwenden Sie die folgenden Abbildungen, um zu sehen, wie sich Ihre Farbauswahl auf die verschiedenen Einstellungen und Benachrichtigungsbildschirme in Ihren mobilen Apps auswirkt.

    Benachrichtigungen
    Diagramm, wo Designfarben auf dem Benachrichtigungsbildschirm angewendet werden.
    Einstellungen
    Diagramm, wo Designfarben auf dem Einstellungsbildschirm angewendet werden.
    Offline-Modus-Einstellungen
    Diagramm, wo Designfarben auf dem Bildschirm mit den Einstellungen für den Offline-Modus angewendet werden.
    Positionsbestimmungseinstellungen
    Diagramm, wo Designfarben auf dem Bildschirm mit Positionseinstellungen angewendet werden.
    PIN-Einstellungen
    Diagramm, wo Designfarben auf dem Bildschirm „PIN-Einstellungen“ angewendet werden.
    Einstellungen für Siri-Verknüpfungen (nur iOS)
    Diagramm, wo Designfarben auf dem Bildschirm mit den Einstellungen für Siri-Verknüpfungen angewendet werden.

    Modale Fenster

    Verwenden Sie die folgenden Abbildungen, um zu sehen, wie Ihre Farbauswahl in Ihren modalen Modalen für Android und iOS angezeigt wird.

    Modale Android-Elemente
    Diagramm, wo Designfarben in modalen Android-Elementen angewendet werden.
    IOS-Modale
    Diagramm, wo Designfarben in iOS-Modalen angewendet werden.