Dieses Dokument hebt die Prinzipien und Richtlinien für alle hervor, die entweder Android-Plattformeinstellungen, GMS-Kerneinstellungen (Google-Einstellungen) entwerfen, oder alle Entwickler, die Einstellungen für ihre Android-App entwerfen.
Design-Prinzipien
Sorgen Sie für einen guten Überblick
Benutzer sollten in der Lage sein, einen Blick auf die Einstellungsbildschirme zu werfen und alle individuellen Einstellungen und ihre Werte zu verstehen.
Abbildung 1. Einstellungen und ihre aktuellen Werte werden auf dem obersten Bildschirm angezeigt
Elemente intuitiv organisieren
Platzieren Sie häufig verwendete Einstellungen oben auf dem Bildschirm. Begrenzen Sie die Anzahl der Einstellungen auf einem Bildschirm. Das Anzeigen von mehr als 10-15 Artikeln kann überwältigend sein. Erstellen Sie intuitive Menüs, indem Sie einige Einstellungen auf einen separaten Bildschirm verschieben.
Abbildung 2. Allgemeine Einstellungen befinden sich oben auf dem Bildschirm
Stellen Sie sicher, dass Einstellungen leicht zu finden sind
In einigen Fällen kann es hilfreich sein, eine einzelne Einstellung auf zwei verschiedenen Bildschirmen zu duplizieren. Verschiedene Situationen können Benutzer dazu veranlassen, eine Einstellung zu ändern, sodass die Aufnahme der Einstellung an mehreren Stellen den Benutzern hilft, dieses Element zu finden.
Erstellen Sie für doppelte Einstellungen einen separaten Bildschirm für die Einstellung und haben Sie Einstiegspunkte von verschiedenen Stellen.
 |  |
Abbildung 3 & 4. „Standardbenachrichtigungston“ wird sowohl auf den Bildschirmen „Benachrichtigung“ als auch „Ton“ angezeigt
Verwenden Sie einen klaren Titel und Status
Gestalten Sie die Titel Ihrer Einstellungen kurz und aussagekräftig. Vermeiden Sie vage Titel wie „Allgemeine Einstellungen“. Zeigen Sie unter dem Titel den Status an, um den Wert der Einstellung hervorzuheben. Zeigen Sie die spezifischen Details an, anstatt nur den Titel zu beschreiben.
Titel sollten:
- Setzen Sie den wichtigsten Text Ihres Etiketts an die erste Stelle.
- Formulieren Sie negative Wörter wie „nicht“ oder „nie“ in neutrale Begriffe wie „blockieren“.
- Verwenden Sie unpersönliche Bezeichnungen wie „Benachrichtigungen“ anstelle von „Mich benachrichtigen“. Ausnahme: Wenn zum Verständnis der Einstellung auf den Benutzer verwiesen werden muss, verwenden Sie die zweite Person („Sie“) und nicht die erste Person („Ich“).
Titel sollten vermeiden:
- Oberbegriffe, wie z. B. festlegen, ändern, bearbeiten, modifizieren, verwalten, verwenden, auswählen oder auswählen.
- Wiederholen von Wörtern aus dem Abschnittsteiler oder dem Titel des Unterbildschirms.
- Fachjargon.
Seitentypen
Einstellungsliste
Dies ist die häufigste Bildschirmart. Es ermöglicht, dass mehrere Einstellungen zusammen platziert werden. Einstellungslisten können eine Mischung aus Steuerelementen wie Schaltern, Menüs und Schiebereglern sein.
Wenn es viele Einstellungen in einer Kategorie gibt, können sie zusammen gruppiert werden. Weitere Einzelheiten finden Sie unter Gruppierung und Trennwände .
Abbildung 5. Beispiel einer Einstellungsliste
Listenansicht
Die Listenansicht wird verwendet, um eine Liste mit Elementen wie Apps, Konten, Geräten und mehr anzuzeigen. Dem Bildschirm können Steuerelemente zum Filtern oder Sortieren hinzugefügt werden.
Abbildung 6. Beispiel einer Listenansicht
Entitätsbildschirm
Der Entitätsbildschirm wird verwendet, um die Einstellungen eines bestimmten Elements wie einer App, eines Kontos, eines Geräts, eines Wi-Fi-Netzwerks usw. anzuzeigen.
Visuell wird die Entität oben mit einem Symbol, Titel und Untertitel angezeigt. Alle Einstellungen auf diesem Bildschirm müssen sich auf diese Entität beziehen.
Abbildung 7. Beispiel eines Entitätsbildschirms, der in App-Info verwendet wird
Abbildung 8. Beispiel für einen Entitätsbildschirm, der im Speicher verwendet wird
Master-Einstellung
Die Master-Einstellung wird am besten verwendet, wenn eine ganze Funktion ein- oder ausgeschaltet werden kann, z. B. Wi-Fi oder Bluetooth. Durch die Verwendung eines Schalters am oberen Rand des Bildschirms kann der Benutzer diese Funktion einfach steuern. Wenn Sie die Master-Einstellung zum Deaktivieren der Funktion verwenden, werden alle anderen zugehörigen Einstellungen deaktiviert.
Wenn eine Funktion eine längere Textbeschreibung benötigt, kann die Master-Einstellung verwendet werden, da dieser Bildschirmtyp einen längeren Fußzeilentext zulässt.
Wenn eine Einstellung von mehreren Bildschirmen dupliziert oder verknüpft werden muss, verwenden Sie die Master-Einstellung. Da die Haupteinstellung ein separater Bildschirm ist, vermeiden Sie mehrere Schalter an verschiedenen Stellen für dieselbe Einstellung.
Abbildung 9. Beispiel für die im App-Benachrichtigungsbildschirm verwendete Master-Einstellung; Durch Deaktivieren des Master-Schalters wird die gesamte Funktion für diese App deaktiviert
Abbildung 10. Beispiel einer Master-Einstellung, die auf dem App-Benachrichtigungsbildschirm verwendet wird, wobei der Master-Umschalter deaktiviert ist
Auswahlbildschirm für Optionsfelder
Dieser Bildschirm wird verwendet, wenn der Benutzer eine Auswahl für eine Einstellung treffen muss. Optionsfelder können entweder in einem Dialog oder auf einem separaten Bildschirm angezeigt werden. Optionsfelder sollten nicht zusammen mit Schiebereglern, Menüs oder Schaltern verwendet werden.
Ein Bildschirm mit Optionsfeldern kann oben ein Bild und unten Fußzeilentext enthalten. Die einzelnen Radio-Buttons können Subtext zusammen mit einem Titel haben.
Abbildung 11. Optionsfelder sollten nicht in der Einstellungsliste verwendet werden
Abbildung 12. So verwenden Sie Optionsfelder in den Einstellungen richtig
Komponenten
Header
Ab Android 8.0 bietet die Aktionssymbolleiste Such- und Hilfefunktionen zusammen mit anderen verwandten Aktionen. Von Überlaufmenüs wird abgeraten, da Benutzer in diesen Menüs versteckte Aktionen möglicherweise nicht entdecken.
Für Symbolleisten ohne bildschirmspezifische Aktionen. Such- und Hilfeaktionen anzeigen.
Abbildung 13. Symbolleiste mit Such- und Hilfeaktionen
Für Symbolleisten mit einer Aktion : Präsentieren Sie die Aktion vor der Suche.
Abbildung 14. Symbolleiste mit einer Aktion vor den Such- und Hilfeaktionen
Für Symbolleisten mit mehr als einer Aktion : Erwägen Sie, die primäre Aktion vor der Suche zu platzieren, während Sie erweiterte Aktionen in das Überlaufmenü aufnehmen.
Wenn alle Aktionen erweitert oder nur für eine kleine Gruppe von Benutzern nützlich sind, sollten Sie alle Aktionen im Überlaufmenü platzieren.
Abbildung 15. Symbolleiste mit einem Überlaufmenü für Aktionen
Entitätsheader
Die Kopfzeile der Entität kann nur eine Überschrift oder eine Überschrift mit Untertext anzeigen (für den Untertext sind mehrere Zeilen zulässig). Die folgende Aktion ist optional. Sie können maximal zwei Aktionen haben.
Abbildung 16. Header der Entität
Das Symbol und der Überschriftenteil (App1) scrollen unter der Überschrift (App-Info).
Abbildung 17. Der App-Info-Titel hier ist Teil der Symbolleiste, während der Rest des Bildschirms darunter scrollt
Menü-Link
Der Titel ist obligatorisch. Sie sollten auch Subtext anzeigen, der den Status der Einstellung hervorhebt. Die Verwendung eines Symbols ist optional.
Versuchen Sie, den Titeltext kurz zu halten. Wenn Titel lang sind, können sie in der nächsten Zeile fortgesetzt werden, anstatt abgeschnitten zu werden. Aktivieren Sie keine Menüs oder Aktionen bei langem Drücken.
Beispiele:
Abbildung 18. Menülink mit Symbol, Titel und Subtext
Abbildung 19. Menülink mit Titel und Subtext
Abbildung 20. Menülink nur mit Titel
Menülink mit Icon, Titel, Subtext und einem separaten Trefferziel rechts
Andere Tap-Ziele sollten die Designfarbe verwenden.
Abbildung 21. Beispiel eines Zwei-Tipp-Zielmenüs
Menülink mit Symbol, Titel, Subtext und Statistik-/Nummern-/Alarmsymbol
Numerische Werte wie Prozent und Zeit können rechts zusammen mit dem Subtext angezeigt werden, während unten ein Balkendiagramm angezeigt werden kann.
Normalerweise werden die numerischen Werte auf der rechten Seite angezeigt, damit Benutzer sie leicht überblicken und vergleichen können.
Abbildung 22. Beispiel eines Menüs mit Symbol, Titel, Statistik und Grafik
Gruppierung & Teiler
Wenn ein Bildschirm viele Einstellungen hat, können sie gruppiert und durch eine Trennlinie getrennt werden. Im Gegensatz zu älteren Android-Versionen werden jetzt Teiler verwendet, um Einstellungen in einer Gruppe zu gruppieren, anstatt einzelne Einstellungen zu trennen.
Wenn die Einstellungen in einer Gruppe eng miteinander verwandt sind, können Sie eine Gruppenüberschrift hinzufügen. Wenn Sie eine Gruppenüberschrift verwenden, sollten Sie immer eine Trennlinie einfügen.
Abbildung 23. Mit Trennlinien gruppierte Einstellungen
Schalter
Wechseln Sie mit Symbol, Titel und Subtext
Abbildung 24. Schalter mit Symbol, Titel und Subtext
Wechseln Sie mit Titel und Subtext
Abbildung 25. Schalter mit Titel und Subtext
Nur mit Titel wechseln
Titel können von einem Symbol auf der linken Seite begleitet werden.
Abbildung 26. Wechseln Sie nur mit Titel
Listenelement + Schalter
Sie können einen Listeneintrag mit einem Schalter kombinieren. Das Tippen auf die linke Seite der vertikalen Linie wirkt wie ein Link und führt den Benutzer zum nächsten Bildschirm. Die rechte Seite verhält sich wie ein Standardschalter.
Für den Listeneintrag auf der linken Seite ist ein Titel obligatorisch. Das Symbol und der Subtext sind optional.
Abbildung 27. Listenelement und Schalter
Schieberegler
Das Symbol im Schieberegler ist optional.
Abbildung 28. Schieberegler
Schaltfläche auf dem Bildschirm
Positive Aktionen verwenden die Designfarbe, während negative Aktionen grau sind. Positive Aktionen können das Öffnen einer App, das Installieren einer App, das Hinzufügen eines neuen Elements usw. umfassen. Zu den negativen Aktionen gehören das Löschen von Daten, das Deinstallieren einer App, das Löschen von Elementen usw.
Abbildung 29. Graue Schaltflächen für „Deinstallieren“ und „Stopp erzwingen“
Abbildung 30. Blaue Schaltfläche für „Jetzt einschalten“
Progressive Offenlegung (Fortgeschritten)
Einstellungen, die nicht häufig verwendet werden, sollten ausgeblendet werden. Verwenden Sie "Erweitert" nur, wenn mindestens 3 Elemente zu verbergen sind.
Hier zeigt der Subtext die Titel der Einstellungen, die ausgeblendet sind. Der Subtext sollte nur eine Zeile lang sein. Zusätzlicher Text wird mit Auslassungspunkten abgeschnitten.
Abbildung 31. Erweitert auf dem „Display“-Bildschirm verwendet
Dropdown-Menü
Drop-down-Menüs sind verfügbar, aber idealerweise sollten Sie stattdessen einen Dialog- oder Radiobutton-Auswahlbildschirm verwenden. Dies wird empfohlen, um die Einstellungen zu vereinfachen, da es derzeit drei verschiedene Muster für die Einzelauswahl gibt.
Bei Bedarf können Dropdown-Menüs verwendet werden, wenn die Einstellung einfache Optionen enthält.
Abbildung 32. Dropdown-Menü
Kontrollkästchen
Verwenden Sie nach Möglichkeit Schalter über Kontrollkästchen.
Kontrollkästchen können verwendet werden:
- Für negative Aktionen wie das Einschränken von Apps oder das Blockieren eines Dienstes.
- Um zu vermeiden, zu viele Schalter auf dem Bildschirm zu haben.
Abbildung 33. Kontrollkästchen werden verwendet, um die Anzahl der Schalter auf diesem Bildschirm zu reduzieren
Verknüpfungen
Die Verwendung von Links in den Einstellungen wird nicht empfohlen. Verwenden Sie Links nur dort, wo es unbedingt erforderlich ist. Links sollten eine Akzentfarbe ohne Unterstreichung verwenden.
Abbildung 34. In den Einstellungen verwendeter Link
Fusszeile
Fußzeilentext kann verwendet werden, um erklärenden Inhalt hinzuzufügen. Die Fußzeile sollte oben immer eine Trennlinie haben. Die Fußzeile wird am unteren Bildschirmrand angezeigt. Fußzeilen können bei Bedarf Links enthalten.
Abbildung 35. Fußzeilentext
Muster
Daten
Kritische Daten können in einem Diagramm wie einem Balken- oder Tortendiagramm angezeigt werden. Diese Daten können im Entitätskopf angezeigt werden. Beispiele sind mobile Daten und Speicherung.
Andere, weniger kritische Daten können mithilfe einer regulären Listenansicht dargestellt werden.
Abbildung 36. Beispiel für Speicher
Abbildung 37. Beispiel für Netzwerk
Benutzerschulung
Einige Funktionen erfordern möglicherweise eine Erklärung oder Benutzerschulung. Sie können eine Animation oder ein Bild zusammen mit Text verwenden. Die Animation oder das Bild sollte oben auf dem Bildschirm angezeigt werden, während der Fußzeilentext verwendet werden kann, um eine Erklärung hinzuzufügen.
Abbildung 38. Einstellung mit Animation und Fußzeilentext
Formen
Wenn das Formular nur ein Eingabefeld hat, verwenden Sie einen normalen Dialog. Dies bietet Benutzern eine einfache Möglichkeit, eine einzelne Eingabe vorzunehmen.
Wenn das Formular jedoch mehrere Felder enthält, sollten Sie einen Vollbilddialog verwenden . Dies bietet mehr Platz auf dem Bildschirm, um die Felder in einem klaren Muster anzuordnen.
Abbildung 39. Formular mit einem normalen Dialog
Suchergebnisse
Die Suchergebnisse zeigen den Titel, Subtext (falls verfügbar) und die Breadcrumb-Position der Einstellung.
Abbildung 40. Suchergebnis