Farbrichtlinien für Mobile-Design

  • Freigeben Version: Xanadu
  • Aktualisiert 1. August 2024
  • 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 Legacy-Mobile-Designs in Tokyo und früheren ServiceNow® -Instanzen. Informationen Utah zu und späteren Releases finden Sie unter Next Experience-Design für Mobilgeräte.

    Überlegungen zur Farbauswahl

    Berücksichtigen Sie die folgenden Aspekte, wenn Sie Farben für Ihre Mobile-Anwendungen auswählen:
    • Wie Ihre Farbauswahl mit Farben in anderen Teilen der App aussieht, z. B. Ihren Bildschirmsymbolen und UI-Stilen. Vermeiden Sie die Verwendung zu vieler Farben. Einfache Designs von zwei bis drei Farben ergeben ein saubereres, zugänglicheres Layout.
    • Wie wirkt die Farbauswahl mit Farben in anderen Elementen, die in Ihrer App angezeigt werden können? In Ihren Apps können Elemente wie Wissensartikel und Service Portal-Seiten angezeigt werden. Vermeiden Sie Farbschemata, die mit Ihren vorhandenen Elementen nicht gut funktionieren.
    • Wie können höherer Kontrast oder Komplementärfarben die Aufmerksamkeit Ihrer Benutzer lenken? Verwenden Sie die Farbauswahl, um Bereiche Ihrer Apps hervorzuheben, auf die Benutzer ihre Aufmerksamkeit richten sollen.
    • Wie lässt sich mithilfe von Farben Kontrast für eine bessere Lesbarkeit herstellen? Stellen Sie in Bereichen, in denen Text angezeigt wird, sicher, dass Ihre Text- und Hintergrundfarben ein hohes Maß an Kontrast aufweisen, um sowohl sehbehinderten als auch farbblinden Benutzern gerecht zu werden.
    Wichtig:
    Derzeit unterstützen ServiceNow® Mobile Android-Apps nicht die Verwendung der #RGB-Schreibweise, um Designfarben für die Apps festzulegen. Die #RRGGBB-Schreibweise wird jedoch sowohl von iOS- als auch von Android-Apps unterstützt.

    Design-Farbpositionen in Mobile-Apps

    Dieses Beispiel zeigt die Farben, die im Standarddesign der Mobile-App verwendet werden. Verwenden Sie die Zahlen in diesem Bild, um zu sehen, wo diese Farben in den verschiedenen Bereichen Ihrer Mobile-Apps angezeigt werden. Im Standard-Mobile-Design verwendete Farben

    Mobile Funktionen

    Schauen Sie sich in den folgenden Abbildungen an, wie sich Ihre Farbauswahl auf die Elemente in Ihren Mobile-Apps auswirkt.

    Startseite der Anwendung
    Darstellung, die zeigt, wo auf der Startseite einer Anwendung Designfarben angewendet werden
    Navigationsleiste
    Darstellung, die zeigt, wo in der Navigationsleiste Designfarben angewendet werden
    Liste
    Darstellung, die zeigt, wo in einer Liste Designfarben angewendet werden
    Virtual Agent
    Darstellung, die zeigt, wo Designfarben in Virtual Agent angewendet werden
    Suche
    Darstellung, die zeigt, wo in Suchkomponenten angewendet werden
    Aktionen
    Darstellung, die zeigt, wo in Aktionskarten Designfarben angewendet werden

    Datensatzbildschirm und -komponenten

    Anhand der folgenden Abbildungen können Sie sehen, wie sich Ihre Farbauswahl auf einen Datensatzbildschirm und seine Komponenten in Ihren Mobile-Apps auswirkt.

    Datensatzbildschirm
    Diagramm, das zeigt, wo Designfarben in einem Datensatzbildschirm angewendet werden.
    Prüfliste
    Darstellung, die zeigt, wo in einer Prüfliste Designfarben angewendet werden
    Aktivitätenstrom
    Darstellung, die zeigt, wo in einem Aktivitätenstrom Designfarben angewendet werden
    Links
    Darstellung, die zeigt, wo in Links Designfarben angewendet werden
    E-Signatur
    Darstellung, die zeigt, wo in E-Signaturen Designfarben angewendet werden

    Bildschirmvorlagen

    Schauen Sie sich in den folgenden Abbildungen an, wie sich Ihre Farbauswahl auf die verschiedenen Bildschirmvorlagen in Ihren Mobile-Apps auswirkt.

    Kalender
    Diagramm, in dem gezeigt wird, wo Designfarben in Kalenderbildschirmen angewendet werden.
    Zuordnung
    Diagramm, das zeigt, wo Designfarben in Kartenbildschirmen angewendet werden.
    Hinweis:
    Das Feld Anheftungsfarbe im Listenstream-Datensatz, der Ihrem Kartenbildschirm zugeordnet ist, bestimmt die Farbe der Stecknadeln auf Ihren Karten.
    URL-Vorlage
    Diagramm, das zeigt, wo Designfarben in URL-Vorlagenbildschirmen angewendet werden.

    Benachrichtigungen und Einstellungen

    Schauen Sie sich in den folgenden Abbildungen an, wie sich Ihre Farbauswahl auf die verschiedenen Einstellungs- und Benachrichtigungsbildschirme in Ihren Mobile-Apps auswirkt.

    Notifications
    Darstellung, die zeigt, wo im Benachrichtigungsbildschirm Designfarben angewendet werden
    Einstellungen
    Darstellung, die zeigt, wo im Einstellungenbildschirm Designfarben angewendet werden
    Einstellungen im Offline-Modus
    Darstellung, die zeigt, wo im Einstellungenbildschirm im Offline-Modus Designfarben angewendet werden
    Positionsbestimmungseinstellungen
    Darstellung, die zeigt, wo im Bildschirm für Positionsbestimmungseinstellungen Designfarben angewendet werden
    Anheftungseinstellungen
    Darstellung, die zeigt, wo im Bildschirm für Anheftungseinstellungen Designfarben angewendet werden
    Siri-Kurzbefehl-Einstellungen (nur iOS)
    Darstellung, die zeigt, wo im Bildschirm für Siri-Kurzbefehl-Einstellungen Designfarben angewendet werden

    Modale Fenster

    Verwenden Sie die folgenden Abbildungen, um zu sehen, wie Ihre Farbauswahl in den modalen Android- und iOS-Fenstern angezeigt wird.

    Modale Fenster in Android
    Darstellung, die zeigt, wo in einem modalen Android-Fenster Designfarben angewendet werden
    Modale Fenster in iOS
    Darstellung, die zeigt, wo in einem modalen iOS-Fenster Designfarben angewendet werden