Designrichtlinien für Android-Einstellungen

In diesem Dokument werden die Prinzipien und Richtlinien für alle beschrieben, die entweder Android-Plattformeinstellungen, GMD-Haupteinstellungen (Google Einstellungen) oder Entwickler entwerfen, die Einstellungen für ihre Android-App entwerfen.

Designprinzipien

Einen guten Überblick geben

Nutzer sollten einen Blick auf die Einstellungsbildschirme werfen und alle einzelnen Einstellungen und ihre Werte verstehen können.

Abbildung 1: Einstellungen und ihre aktuellen Werte werden auf der obersten Bildschirmebene angezeigt.

Elemente intuitiv organisieren

Platzieren Sie häufig verwendete Einstellungen oben auf dem Bildschirm. Begrenzen Sie die Anzahl der Einstellungen auf einem Bildschirm. Es kann schwierig sein, mehr als 10 bis 15 Elemente zu präsentieren. Erstellen Sie intuitive Menüs, indem Sie einige Einstellungen auf einen separaten Bildschirm verschieben.

Abbildung 2: Gängige Einstellungen befinden sich oben auf dem Bildschirm

Einstellungen leicht auffindbar machen

In einigen Fällen kann es hilfreich sein, eine einzelne Einstellung auf zwei verschiedenen Bildschirmen zu duplizieren. In verschiedenen Situationen kann es vorkommen, dass Nutzer eine Einstellung ändern. Wenn die Einstellung an mehreren Stellen angegeben ist, können Nutzer das Element leichter finden.

Erstellen Sie für doppelte Einstellungen einen separaten Bildschirm mit Einstiegspunkten an verschiedenen Stellen.

Abbildung 3 und 4: "Standard-Benachrichtigungston" erscheint sowohl auf dem Bildschirm "Benachrichtigung" als auch auf dem

Verwenden Sie einen eindeutigen Titel und Status.

Verwenden Sie kurze und aussagekräftige Titel. Vermeiden Sie ungenaue Titel wie „Allgemeine Einstellungen“. Unter dem Titel wird der Status angezeigt, um den Wert der Einstellung hervorzuheben. Zeigen Sie die spezifischen Details an, anstatt nur den Titel zu beschreiben.

Bei der Festlegung deiner Videotitel solltest du die folgenden Punkte beachten:

  • Platzieren Sie den wichtigsten Text Ihres Labels an erster Stelle.
  • Formulieren Sie negative Wörter wie „nicht“ oder „nie“ in neutrale Begriffe wie „blockieren“ um.
  • Verwenden Sie unpersönliche Labels wie „Benachrichtigungen“ anstelle von „Benachrichtigung erhalten“. Ausnahme: Wenn zum Verständnis der Einstellung der Verweis auf den Nutzer erforderlich ist, verwenden Sie die zweite Person („Sie“) anstelle der ersten Person („I“).

Titel sollten Folgendes vermeiden:

  • Allgemeine Begriffe wie „Festlegen“, „Ändern“, „Bearbeiten“, „Ändern“, „Verwalten“, „Verwenden“, „Auswählen“ oder „Auswählen“.
  • Wörter aus der Trennlinie oder dem Titel des untergeordneten Bildschirms werden wiederholt.
  • Fachjargon

Seitentypen

Liste der Einstellungen

Dies ist der am häufigsten verwendete Bildschirmtyp. Es können mehrere Einstellungen zusammengefügt werden. Einstellungslisten können eine Kombination aus Steuerelementen wie Schaltern, Menüs und Schiebereglern sein.

Wenn es viele Einstellungen in einer Kategorie gibt, können sie gruppiert werden. Weitere Informationen finden Sie unter Gruppierung und Trennlinien.

Abbildung 5: Beispiel für eine Einstellungsliste

Listenansicht

In der Listenansicht wird eine Liste von Elementen wie Apps, Konten und Geräten angezeigt. Steuerelemente zum Filtern oder Sortieren können dem Bildschirm hinzugefügt werden.

Abbildung 6: Beispiel für die Listenansicht

Entitätsbildschirm

Auf dem Entitätsbildschirm werden Einstellungen für ein bestimmtes Element wie eine App, ein Konto, ein Gerät, ein WLAN usw. angezeigt.

Das Element wird oben visuell mit einem Symbol, einem Titel und einer Unterüberschrift angezeigt. Alle Einstellungen auf diesem Bildschirm müssen sich auf diese Entität beziehen.

Abbildung 7: Beispiel für den Entitätsbildschirm, der in den App-Informationen verwendet wird

Abbildung 8: Beispiel für den Entitätsbildschirm, der in Storage verwendet wird

Haupteinstellung

Die Haupteinstellung wird am besten verwendet, wenn eine ganze Funktion aktiviert oder deaktiviert werden kann, z. B. WLAN oder Bluetooth. Über einen Schalter am oberen Bildschirmrand kann der Nutzer diese Funktion steuern. Wenn Sie die Funktion über die Haupteinstellung deaktivieren, werden alle anderen zugehörigen Einstellungen deaktiviert.

Wenn für ein Element eine längere Textbeschreibung erforderlich ist, kann die Haupteinstellung verwendet werden, da dieser Bildschirmtyp einen längeren Fußzeilentext ermöglicht.

Wenn eine Einstellung dupliziert oder von mehreren Bildschirmen aus verknüpft werden muss, verwenden Sie die Haupteinstellung. Da die Haupteinstellung ein separater Bildschirm ist, vermeiden Sie es, mehrere Schalter an unterschiedlichen Stellen für dieselbe Einstellung zu verwenden.

Abbildung 9: Beispiel für die Haupteinstellung des App-Benachrichtigungsbildschirms: Wenn Sie die Ein/Aus-Schaltfläche deaktivieren, wird die gesamte Funktion für diese App

Abbildung 10. Beispiel für die Haupteinstellung auf dem Bildschirm für App-Benachrichtigungen mit deaktivierter Haupteinstellung

Auswahlbildschirm für Optionsfelder

Dieser Bildschirm wird verwendet, wenn der Nutzer eine Auswahl für eine Einstellung treffen muss. Optionsfelder können entweder in einem Dialogfeld oder auf einem separaten Bildschirm angezeigt werden. Optionsfelder sollten nicht zusammen mit Schiebereglern, Menüs oder Schaltern verwendet werden.

Ein Optionsfeldbildschirm kann oben ein Bild und am unteren Rand einen Fußzeilentext enthalten. Die einzelnen Optionsfelder können Subtext und einen Titel enthalten.

Abbildung 11. In der Einstellungsliste sollten keine Optionsfelder verwendet werden

Abbildung 12. So verwendest du die Optionsfelder in den Einstellungen

Komponenten

Ab Android 8.0 enthält die Aktionssymbolleiste die Suche und Hilfe sowie andere zugehörige Aktionen. Überlaufmenüs werden nicht empfohlen, da Nutzer möglicherweise keine Aktionen entdecken, die in diesen Menüs ausgeblendet sind.

Für Symbolleisten ohne bildschirmspezifische Aktionen. Such- und Hilfeaktionen anzeigen.

Abbildung 13. Symbolleiste mit Such- und Hilfeaktionen

Symbolleisten mit einer Aktion: Blenden Sie die Aktion vor der Suche ein.

Abbildung 14: Symbolleiste mit einer Aktion vor den Such- und Hilfeaktionen

Symbolleisten mit mehr als einer Aktion: Platzieren Sie die primäre Aktion vor der Suche und fügen Sie die erweiterten Aktionen in das Dreipunkt-Menü ein.

Wenn alle Aktionen erweitert oder nur für eine kleine Gruppe von Nutzern nützlich sind, sollten Sie alle Aktionen aus dem Dreipunkt-Menü platzieren.

Abbildung 15. Symbolleiste mit Dreipunkt-Menü für Aktionen

Entitätsheader

Der Entitätsheader kann nur eine Überschrift oder eine Überschrift mit Subtext enthalten. Für den Untertext sind mehrere Zeilen zulässig. Die folgende Aktion ist optional. Es sind maximal zwei Aktionen möglich.

Abbildung 16. Entitätsheader

Der Teil für das Symbol und die Überschrift (App1) wird unter der Überschrift (App-Info) angezeigt.

Abbildung 17. Der Titel der App-Info hier ist Teil der Symbolleiste, während der Rest des Bildschirms darunter scrollt.

Der Titel ist ein Pflichtfeld. Sie sollten auch einen Untertext anzeigen, der den Status der Einstellung hervorhebt. Die Verwendung eines Symbols ist optional.

Der Titeltext sollte prägnant sein. Lange Titel können in der nächsten Zeile fortgesetzt werden, anstatt sie abzuschneiden. Aktivieren Sie Menüs oder Aktionen nicht bei längerem Drücken.

Beispiele:

Abbildung 18. Link zur Speisekarte mit Symbol, Titel und Untertext

Abbildung 19. Link zur Speisekarte mit Titel und Untertext

Abbildung 20: Link zur Speisekarte nur mit Titel

Link zur Speisekarte mit Symbol, Titel, Text und separatem Trefferziel auf der rechten Seite

Für andere Tippziele sollte die Designfarbe verwendet werden.

Abbildung 21. Beispiel für das Zielmenü durch zweimaliges Tippen

Link zur Speisekarte mit Symbol, Titel, Subtext und Statistiken/Nummer/Benachrichtigungssymbol

Numerische Werte wie Prozentsatz und Zeit können rechts zusammen mit dem Subtext angezeigt werden, während darunter ein Balkendiagramm angezeigt wird.

In der Regel werden die numerischen Werte rechts dargestellt, damit Nutzer sie leicht anzeigen und vergleichen können.

Abbildung 22. Beispiel für ein Menü mit Symbol, Titel, Statistik und Grafik

Gruppierung und Trennung

Wenn ein Bildschirm viele Einstellungen hat, können diese durch eine Trennlinie gruppiert und getrennt werden. Im Gegensatz zu älteren Android-Versionen werden Trennlinien jetzt verwendet, um Einstellungen in einer Gruppe zu gruppieren, anstatt einzelne Einstellungen zu trennen.

Wenn die Einstellungen in einer Gruppe eng miteinander verbunden sind, können Sie eine Gruppenüberschrift hinzufügen. Wenn Sie eine Gruppenüberschrift verwenden, sollten Sie immer eine Trennlinie einfügen.

Abbildung 23. Einstellungen mithilfe von Trennlinien gruppiert

Wechseln

Mit Symbol, Titel und Subtext wechseln

Abbildung 24: Mit Symbol, Titel und Subtext wechseln

Mit Titel und Subtext wechseln

Abbildung 25. Mit Titel und Subtext wechseln

Wechsel nur mit Titel

Titel können durch ein Symbol auf der linken Seite begleitet werden.

Abbildung 26. Nur mit Titel wechseln

Listeneintrag plus Schalter

Sie können Listenelemente mit einem Schalter kombinieren. Durch Tippen auf die linke Seite der vertikalen Linie werden Nutzer zum nächsten Bildschirm weitergeleitet. Die rechte Seite verhält sich wie ein Standard-Switch.

Für den Listeneintrag auf der linken Seite ist ein Titel erforderlich. Das Symbol und der Untertext sind optional.

Abbildung 27. Listenelement und Schalter

Schieberegler

Das Symbol im Schieberegler ist optional.

Abbildung 28: Schieberegler

Bildschirmschaltfläche

Für positive Aktionen wird die Designfarbe verwendet, für negative Aktionen dagegen grau. Zu den positiven Aktionen gehören das Öffnen einer App, das Installieren einer App oder das Hinzufügen eines neuen Elements. Negative Aktionen sind das Löschen von Daten, das Deinstallieren einer App oder das Löschen von Elementen.

Abbildung 29. Graue Schaltflächen für „Deinstallieren“ und „Beenden erzwingen“

Abbildung 30: Blaue Schaltfläche für „Jetzt aktivieren“

Fortschreitende Offenlegung (erweitert)

Einstellungen, die nicht häufig verwendet werden, sollten ausgeblendet werden. Verwenden Sie „Erweitert“ nur, wenn mindestens 3 Elemente ausgeblendet werden.

Hier zeigt der Untertext die Titel der ausgeblendeten Einstellungen an. Der Subtext sollte nur aus einer Zeile bestehen. Zusätzlicher Text wird durch Auslassungspunkte abgeschnitten.

Abbildung 31. „Erweitert“ auf dem Bildschirm „Display“

Es sind Drop-down-Menüs verfügbar, aber idealerweise sollten Sie stattdessen ein Dialogfeld oder ein Optionsfeld verwenden. Dies wird empfohlen, um die Einstellungen zu vereinfachen, da es drei verschiedene Muster für die Einzelauswahl gibt.

Bei Bedarf können Sie Drop-down-Menüs verwenden, wenn die Einstellung einfache Optionen enthält.

Abbildung 32. Drop-down-Menü

Kästchen

Verwenden Sie nach Möglichkeit Switch-over-Kästchen.

Kästchen können verwendet werden:

  • Für negative Aktionen wie das Einschränken von Apps oder das Blockieren eines Dienstes.
  • Um zu vermeiden, dass zu viele Schalter auf dem Bildschirm angezeigt werden.

Abbildung 33. Kästchen werden verwendet, um die Anzahl der Schalter auf diesem Bildschirm zu reduzieren

Die Verwendung von Links in den Einstellungen wird nicht empfohlen. Verwenden Sie Links nur dort, wo es unbedingt erforderlich ist. Links sollten eine Akzentfarbe und keine Unterstreichung haben.

Abbildung 34: In den Einstellungen verwendeter Link

Mit dem Fußzeilentext können Sie erklärende Inhalte hinzufügen. Die Fußzeile sollte oben immer eine Trennlinie haben. Die Fußzeile wird unten auf dem Bildschirm angezeigt. Fußzeilen können bei Bedarf Links enthalten.

Abbildung 35. Fußzeilentext

Muster

Daten

Wichtige Daten können in einem Diagramm wie einem Balken- oder Kreisdiagramm dargestellt werden. Diese Daten können im Entitäts-Header angezeigt werden. Beispiele hierfür sind mobile Daten und Speicher.

Andere weniger wichtige Daten können in einer normalen Listenansicht dargestellt werden.

Abbildung 36: Beispiel für „Speicher“

Abbildung 37. Beispiel für Netzwerk

Nutzerschulungen

Für einige Funktionen sind möglicherweise Erklärungen oder Erklärungen erforderlich. Sie können neben Text auch eine Animation oder ein Bild verwenden. Die Animation oder das Bild sollte oben auf dem Bildschirm angezeigt werden, während der Fußzeilentext zum Hinzufügen einer Erklärung verwendet werden kann.

Abbildung 38: Einstellung mit Animation und Fußzeilentext

Formulare

Wenn das Formular ein Eingabefeld hat, verwenden Sie ein normales Dialogfeld. So können Nutzende ganz einfach eine einzelne Eingabe eingeben.

Wenn das Formular jedoch mehrere Felder enthält, kann es sinnvoll sein, ein Vollbilddialogfeld zu verwenden. Dies bietet mehr Platz auf dem Bildschirm, um die Felder in einem klaren Muster anzuordnen.

Abbildung 39. Formular mit einem normalen Dialogfeld

Suchergebnisse

In den Suchergebnissen werden der Titel, der Subtext (falls verfügbar) und der Navigationspfad der Einstellung angezeigt.

Abbildung 40: Suchergebnis