Google setzt sich dafür ein, die Rassengerechtigkeit für schwarze Gemeinschaften zu fördern. Siehe wie.
Diese Seite wurde von der Cloud Translation API übersetzt.
Switch to English

Designrichtlinien für Android-Einstellungen

In diesem Dokument werden die Grundsätze und Richtlinien für alle Personen hervorgehoben, die entweder Android-Plattformeinstellungen, GMS-Kerneinstellungen (Google-Einstellungen) oder Entwickler entwerfen, die Einstellungen für ihre Android-App entwerfen.

Design-Prinzipien

Geben Sie einen guten Überblick

Benutzer sollten in der Lage sein, einen Blick auf die Einstellungsbildschirme zu werfen und alle einzelnen Einstellungen und ihre Werte zu verstehen.

Abbildung 1. Die Einstellungen und ihre aktuellen Werte werden auf dem Bildschirm der obersten Ebene 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 Elementen 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

Machen Sie Einstellungen leicht zu finden

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. Wenn Sie die Einstellung also an mehreren Stellen einfügen, können Benutzer dieses Element leichter finden.

Erstellen Sie für doppelte Einstellungen einen separaten Bildschirm für die Einstellung und haben Sie Einstiegspunkte von verschiedenen Orten.

Abbildung 3 und 4. "Standardbenachrichtigungston" wird sowohl auf dem Bildschirm "Benachrichtigung" als auch auf dem Bildschirm "Ton" angezeigt

Verwenden Sie einen eindeutigen Titel und Status

Machen 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:

  • Stellen 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 "Benachrichtigen". Ausnahme: Wenn zum Verständnis der Einstellung ein Verweis auf den Benutzer erforderlich ist, verwenden Sie die zweite Person ("Sie") anstelle der ersten Person ("Ich").

Titel sollten vermeiden:

  • Allgemeine Begriffe wie Festlegen, Ändern, Bearbeiten, Ändern, Verwalten, Verwenden, Auswählen oder Auswählen.
  • Wiederholen von Wörtern aus dem Abschnittsteiler oder dem Subscreen-Titel.
  • Fachjargon.

Seitentypen

Einstellungsliste

Dies ist der häufigste Bildschirmtyp. Es ermöglicht das Zusammenfügen mehrerer Einstellungen. Einstellungslisten können eine Mischung aus Steuerelementen wie Schaltern, Menüs und Schiebereglern sein.

Wenn eine Kategorie viele Einstellungen enthält, können sie zusammengefasst werden. Weitere Informationen finden Sie unter Gruppierung und Teiler .

Abbildung 5. Beispiel für eine Einstellungsliste

Listenansicht

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

Abbildung 6. Beispiel für eine Listenansicht

Entitätsbildschirm

Auf dem Entitätsbildschirm werden die Einstellungen eines bestimmten Elements wie einer App, eines Kontos, eines Geräts, eines Wi-Fi-Netzwerks usw. angezeigt.

Visuell wird das Objekt oben mit einem Symbol, einem Titel und einem Untertitel angezeigt. Alle Einstellungen auf diesem Bildschirm müssen sich auf diese Entität beziehen.

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

Abbildung 8. Beispiel für den im Speicher verwendeten Entitätsbildschirm

Master-Einstellung

Die Master-Einstellung wird am besten verwendet, wenn eine gesamte Funktion wie Wi-Fi oder Bluetooth ein- oder ausgeschaltet werden kann. Durch Verwendung eines Schalters am oberen Bildschirmrand kann der Benutzer diese Funktion problemlos 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 Haupteinstellung verwendet werden, da dieser Bildschirmtyp längeren Fußzeilentext ermöglicht.

Wenn eine Einstellung von mehreren Bildschirmen aus dupliziert oder verknüpft werden muss, verwenden Sie die Haupteinstellung. Da es sich bei der Haupteinstellung um einen separaten Bildschirm handelt, vermeiden Sie, dass für dieselbe Einstellung mehrere Schalter an verschiedenen Orten vorhanden sind.

Abbildung 9. Beispiel für die Master-Einstellung im Bildschirm "App-Benachrichtigungen". Durch Ausschalten des Master-Umschalters wird die gesamte Funktion für diese App deaktiviert

Abbildung 10. Beispiel für eine Master-Einstellung, die im App-Benachrichtigungsbildschirm bei deaktiviertem Master-Umschalter verwendet wird

Optionsfeld Auswahlfeld

Dieser Bildschirm wird verwendet, wenn der Benutzer 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 neben Schiebereglern, Menüs oder Schaltern verwendet werden.

Ein Optionsfeld kann oben ein Bild und unten einen Fußzeilentext enthalten. Die einzelnen Optionsfelder können einen Untertext zusammen mit einem Titel enthalten.

Abbildung 11. Optionsfelder sollten nicht in der Einstellungsliste verwendet werden

Abbildung 12. So verwenden Sie Optionsfelder in den Einstellungen korrekt

Komponenten

Ab Android 8.0 werden in der Aktionssymbolleiste Suche und Hilfe sowie andere verwandte Aktionen angezeigt. Überlaufmenüs werden nicht empfohlen, da Benutzer möglicherweise keine in diesen Menüs versteckten Aktionen 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 : Platzieren Sie die primäre Aktion vor der Suche, während Sie erweiterte Aktionen in das Überlaufmenü einfügen.

Wenn alle Aktionen erweitert sind oder nur für eine kleine Gruppe von Benutzern nützlich sind, sollten Sie alle Aktionen in das Überlaufmenü einfügen.

Abbildung 15. Symbolleiste mit einem Überlaufmenü für Aktionen

Entitätsheader

Der Entity-Header kann nur eine Überschrift oder eine Überschrift mit Subtext anzeigen (für den Subtext sind mehrere Zeilen zulässig). Die folgende Aktion ist optional. Sie können maximal zwei Aktionen ausführen.

Abbildung 16. Entitätsheader

Das Symbol und die Überschrift (App1) werden unter der Überschrift (App-Info) gescrollt.

Abbildung 17. Der Titel der App-Informationen ist Teil der Symbolleiste, während der Rest des Bildschirms darunter gescrollt wird

Der Titel ist obligatorisch. Sie sollten auch einen Untertext 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üverknüpfung mit Symbol, Titel und Untertext

Abbildung 19. Menüverknüpfung mit Titel und Untertext

Abbildung 20. Menüverknüpfung nur mit Titel

Menü-Link mit Symbol, Titel, Subtext und einem separaten Trefferziel auf der rechten Seite

Andere Tap-Ziele sollten die Themenfarbe verwenden.

Abbildung 21. Beispiel für ein Zielmenü mit zwei Tippen

Menüverknüpfung mit Symbol, Titel, Untertext und Statistik / Nummer / Alarmsymbol

Numerische Werte wie Prozentsatz und Zeit können rechts zusammen mit dem Untertext angezeigt werden, während unten ein Balkendiagramm angezeigt werden kann.

Normalerweise werden die numerischen Werte rechts angezeigt, damit Benutzer sie leicht einsehen 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 diese durch einen Teiler gruppiert und getrennt werden. Im Gegensatz zu älteren Android-Versionen werden Teiler 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 einen Teiler einfügen.

Abbildung 23. Mit Teilern gruppierte Einstellungen

Schalter

Wechseln Sie mit Symbol, Titel und Untertext

Abbildung 24. Wechseln Sie mit Symbol, Titel und Untertext

Wechseln Sie mit Titel und Untertext

Abbildung 25. Wechseln Sie mit Titel und Untertext

Nur mit Titel wechseln

Titel können von einem Symbol auf der linken Seite begleitet werden.

Abbildung 26. Nur mit Titel wechseln

Listenelement + Schalter

Sie können ein Listenelement mit einem Schalter kombinieren. Das Tippen auf die linke Seite der vertikalen Linie wirkt wie eine Verknüpfung und führt den Benutzer zum nächsten Bildschirm. Die rechte Seite verhält sich wie ein Standardschalter.

Für das Listenelement auf der linken Seite ist ein Titel obligatorisch. Das Symbol und der Untertext sind optional.

Abbildung 27. Listenelement und Schalter

Schieberegler

Das Symbol ist im Schieberegler optional.

Abbildung 28. Schieberegler

Bildschirmtaste

Positive Aktionen verwenden die Themenfarbe, 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. Negative Aktionen umfassen 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 Taste für "Jetzt einschalten"

Progressive Offenlegung (Erweitert)

Einstellungen, die nicht häufig verwendet werden, sollten ausgeblendet werden. Verwenden Sie "Erweitert" nur, wenn mindestens 3 Elemente ausgeblendet werden müssen.

Hier zeigt der Untertext die Titel der Einstellungen, die ausgeblendet sind. Der Untertext sollte nur eine Zeile sein. Zusätzlicher Text wird mit einem Auslassungszeichen abgeschnitten.

Abbildung 31. Erweitert auf dem Bildschirm "Anzeige"

Dropdown-Menüs sind verfügbar. Idealerweise sollten Sie stattdessen ein Dialogfeld oder einen Optionsfeld-Auswahlbildschirm verwenden. Dies wird empfohlen, um die Einstellungen zu vereinfachen, da derzeit drei verschiedene Muster für die Einzelauswahl verfügbar sind.

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, dass zu viele Schalter auf dem Bildschirm angezeigt werden.

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

Die Verwendung von Links in Einstellungen wird nicht empfohlen. Verwenden Sie Links nur, wenn dies unbedingt erforderlich ist. Links sollten eine Akzentfarbe ohne Unterstreichung verwenden.

Abbildung 34. In den Einstellungen verwendeter Link

Fußzeilentext kann verwendet werden, um erklärenden Inhalt hinzuzufügen. Die Fußzeile sollte immer einen Teiler oben haben. Die Fußzeile wird am unteren Bildschirmrand angezeigt. Fußzeilen können bei Bedarf Links haben.

Abbildung 35. Fußzeilentext

Muster

Daten

Kritische Daten können in einem Diagramm wie einem Balken oder Kreisdiagramm angezeigt werden. Diese Daten können im Entity-Header angezeigt werden. Beispiele sind mobile Daten und Speicher.

Andere weniger kritische Daten können mithilfe einer regulären Listenansicht dargestellt werden.

Abbildung 36. Beispiel für die Speicherung

Abbildung 37. Beispiel für ein Netzwerk

Benutzererziehung

Einige Funktionen erfordern möglicherweise eine Erklärung oder eine Schulung der Benutzer. 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 zum Hinzufügen einer Erklärung verwendet werden kann.

Abbildung 38. Einstellung mithilfe von Animation und Fußzeilentext

Formen

Wenn das Formular ein Eingabefeld enthält, verwenden Sie einen normalen Dialog. Dies bietet Benutzern eine einfache Möglichkeit, eine einzelne Eingabe einzugeben.

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 Dialogfeld

Suchergebnisse

Die Suchergebnisse zeigen den Titel, den Untertext (falls verfügbar) und den Breadcrumb-Speicherort der Einstellung.

Abbildung 40. Suchergebnis