Übersicht
Im Rahmen des Pilotprojekts zur Abrechnung mit Auswahlmöglichkeit für Nutzer können teilnehmende Entwickler neben dem Abrechnungssystem von Google Play eine alternative Option zur Abrechnung testen. Dies soll uns helfen, diese Auswahlmöglichkeit für Nutzer genauer unter die Lupe zu nehmen. Diese UX-Richtlinien sorgen für eine einheitliche User Experience und helfen ihnen, fundierte Entscheidungen zu treffen.
Wenn Sie am Pilotprojekt teilnehmen, müssen Sie einen Informationsbildschirm und einen separaten Bildschirm mit Abrechnungsauswahl anzeigen. Der Bildschirm mit den Informationen muss jedem Nutzer nur angezeigt werden, wenn er zum ersten Mal einen Kauf tätigt. Der Bildschirm mit der Abrechnungsauswahl hingegen muss vor jedem Kauf angezeigt werden. Die für Nutzer sichtbaren Meldungen und UI-Spezifikationen für beide Bildschirme müssen gemäß den folgenden Richtlinien implementiert werden.
Land und Sprache auswählen
Wählen Sie das Land und die Sprache Ihrer Nutzer aus, um die entsprechenden UI-Textstrings in den Designspezifikationen unten anzusehen.
Informationen für Nutzer
Der Informationsbildschirm hilft Nutzern, den Kontext der Änderung zu verstehen, und bietet weitere Informationen, die ihnen dabei helfen, eine fundierte Entscheidung zu treffen.
Anzeigezeitpunkt
Der Informationsbildschirm muss Nutzern zu Beginn ihres ersten Kaufs angezeigt werden, nachdem du ein alternatives Abrechnungssystem hinzugefügt hast. Diese Nachricht muss nicht bei nachfolgenden Käufen durch denselben Nutzer angezeigt werden. Blenden Sie den Informationsbildschirm sofort ein, nachdem ein Nutzer eine explizite Aktion zum Starten eines Kaufs ausgeführt hat.
Wann der Preis angezeigt werden soll
Der Kaufpreis muss für Nutzer gut sichtbar und verständlich sein, bevor ihnen entweder der Bildschirm mit den Informationen oder der Bildschirm mit der Abrechnungsauswahl angezeigt wird.
So präsentieren Sie
Der Informationsbildschirm muss am unteren Rand in einem modalen Fenster angezeigt werden. Ein modales Blatt am unteren Rand ähnelt einem modalen Dialogfeld, das vom unteren Bildschirmrand nach oben animiert wird und unten angepinnt bleibt. Es befindet sich über allen UI-Elementen auf dem darunterliegenden Bildschirm. Der darunter liegende Bildschirm ist hinter einem dunklen Gitter verborgen, um darauf hinzuweisen, dass er nicht auf Nutzerinteraktionen reagiert.
Weitere Informationen zum Design und zur Implementierung von modalen unteren Tabellenblättern finden Sie in Google Material Design.
Nutzeraktionen
Die Ansicht am unteren Rand sollte ausgelöst werden, wenn ein Nutzer auf eine Schaltfläche oder ein anderes UI-Element in deiner App tippt, um einen Kauf zu starten. Die Nutzenden können auf dem Informationsbildschirm drei mögliche Aktionen ausführen:
Weiter
Durch Tippen auf die Schaltfläche „Weiter“ wird der Bildschirm mit den Informationen geschlossen und der Bildschirm mit der Abrechnungsauswahl geöffnet.
Weitere Informationen
Durch Tippen auf die Schaltfläche „Weitere Informationen“ wird ein Google-Hilfeartikel in einem Webbrowser geöffnet.
Schließen
Wenn Nutzer die untere Ansicht schließen und zum zugrunde liegenden Bildschirm zurückkehren möchten, können sie dies mit den folgenden Methoden tun:
- Auf eine Stelle außerhalb des unteren Blattbehälters tippen
- Tippen auf die Schaltfläche „Zurück“ des Android-Systems
Der Informationsbildschirm muss nicht noch einmal angezeigt werden, nachdem er geschlossen wurde oder der Nutzer auf „Weiter“ getippt hat.
Beispiel: Wenn der Nutzer in deiner App tippt, um etwas zu kaufen, löst die Schaltfläche den Informationsbildschirm aus.
Designspezifikationen
Der Informationsbildschirm ist in drei Komponenten unterteilt: Titel, Nachricht und Schaltflächen. Alle drei Komponenten sind erforderlich und müssen genau den in diesen Richtlinien definierten Text und die UI-Elemente enthalten. Zeigen Sie keinen zusätzlichen Text oder zusätzliche Bilder auf diesem Bildschirm, Sie können jedoch zusätzlichen Text und Bilder auf anderen Bildschirmen einfügen.
- Titel
- Text 1
- Text 2
- Tasten
- Ansicht am unteren Rand
- Hintergrundgitter
Titel
Text |
Land und Sprache auswählen
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Schriftart | Roboto (auf alle Schriftarten anwenden) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Schriftgröße | 18sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Schriftfarbe | #202124 |
Text 1
Wird verwendet, um wichtige Punkte hervorzuheben, die als kritische Informationen gelten.
Text |
Land und Sprache auswählen
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Schriftgröße | 14sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Zeilenhöhe | 20 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Schriftfarbe | #5F6368 |
Text 2
Wird für sekundäre Informationen mit niedrigerer Priorität verwendet.
Text |
Land und Sprache auswählen
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Schriftgröße | 12 sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Zeilenhöhe | 16 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Schriftfarbe | #5F6368 |
Schaltfläche 1
Text |
Land und Sprache auswählen
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Textausrichtung | Fokussiert | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Schriftgröße | 14sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Schriftstärke | Medium | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Schriftfarbe | #01875F | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Hintergrundfarbe | #FFFFFF | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Abmessungen | Höhe:36, Breite: auf Container skalieren | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Eckenradius | 4dp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Umriss | 1dp, #DADCE0 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Verknüpfen | Links zum Google Play-Hilfeartikel |
Schaltfläche 2
Text |
Land und Sprache auswählen
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Textausrichtung | Fokussiert | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Schriftgröße | 14sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Schriftstärke | Medium | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Schriftfarbe | #FFFFFF | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Hintergrundfarbe | #01875F | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Abmessungen | Höhe:36, Breite: auf Container skalieren | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Eckenradius | 4dp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Verknüpfen | Links zum Bildschirm mit der Abrechnungsauswahl |
Ansicht am unteren Rand
Abmessungen | Höhe: variabel, Breite: 100% |
Eckenradius | 8dp, 8dp, 0, 0 |
Hintergrund | #FFFFFF |
Innenabstände | Links: 24 dp, rechts: 24 dp, oben: 32 dp, unten: 24 dp |
Höhe | 8dp |
Landschaft
Im Querformat ist das untere Tabellenblatt breiter als in der Hochformatansicht, folgt aber ansonsten denselben Designspezifikationen und Funktionalitäten.
Ansicht am unteren Rand | Breite: maximal 500 dp, innerer Abstand: 24 dp |
Titel | Wie Hochformatansicht |
die Botschaft und | Wie Hochformatansicht |
Tasten | Höhe:36, Breite: auf Container skalieren |
Bildschirm mit Abrechnungsauswahl
Auf dem Bildschirm mit der Abrechnungsauswahl werden Nutzern zwei Zahlungsoptionen angezeigt, mit denen sie den Kauf abschließen können. Damit Nutzer eine fundierte Entscheidung treffen können, werden bei jeder Abrechnungsdienstoption auch die verfügbaren Zahlungsmittel angezeigt. Nachdem Nutzer ihre Auswahl getroffen haben, schließen sie ihren Kauf weiterhin über dieses Abrechnungssystem ab.
Anzeigezeitpunkt
Wenn der Nutzer diesen Bildschirm bei einem vorherigen Kauf bereits gesehen hat, sollte er sofort angezeigt werden, nachdem der Nutzer eine explizite Aktion zum Starten eines Kaufs ausgeführt hat.
So präsentieren Sie
Der Bildschirm mit der Abrechnungsauswahl muss in einer modalen Ansicht am unteren Rand angezeigt werden und denselben Spezifikationen wie der Bildschirm mit den Informationen entsprechen.
Gleiche visuelle Darstellung
Die Schaltflächen für das alternative Abrechnungssystem und das Abrechnungssystem von Google Play sollten fair und gleich dargestellt werden. Dazu gehören unter anderem gleiche Schaltflächengrößen, Textgröße/-stil, Tippziele und Symbolgrößen. Fügen Sie keine zusätzlichen Text-, Bild- oder Stiländerungen hinzu, die in diesen Richtlinien nicht definiert sind.
Beispiel: Wenn ein Nutzer in deiner App tippt, um einen Kauf abzuschließen, löst die Schaltfläche nur dann den Bildschirm mit der Abrechnungsauswahl aus, wenn der Nutzer den Informationsbildschirm bereits bei einem vorherigen Kauf gesehen hat.
Designspezifikationen
Der Bildschirm mit der Abrechnungsauswahl besteht aus vier verschiedenen Komponenten: Titel, Beschreibung, Schaltfläche für Entwickler und die Schaltfläche für Google Play. Alle Komponenten müssen verwendet werden und müssen genau den in diesen Richtlinien definierten Text und die UI-Elemente enthalten. Wir bitten Sie, auf diesem Bildschirm keinen zusätzlichen Text oder zusätzliche Bilder einzufügen. Sie können jedoch gerne zusätzlichen Text und Bilder auf anderen Bildschirmen einfügen, die Ihnen gehören.
Visuelle Assets für Google Play und Zahlungssymbole sind über die unten angegebenen Links verfügbar.
Beispiel: In der Hochformatansicht sollte die untere Ansicht 100% der gesamten Bildschirmbreite einnehmen.
- Titel
- Beschreibung
- Entwicklerschaltfläche
- Google Play-Schaltfläche
- Ansicht am unteren Rand
- Hintergrundgitter
Titel
Text |
Land und Sprache auswählen
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Schriftart | Roboto (auf alle Schriftarten anwenden) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Schriftgröße | 18sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Schriftfarbe | #202124 |
Beschreibung
Text |
Land und Sprache auswählen
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Schriftgröße | 14sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Schriftfarbe | #5F6368 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Textlink |
Land und Sprache auswählen
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Linkziel | Links zur Google Play-Hilfe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Schriftgröße | 14sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dekoration | Unterstrichen | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Schriftfarbe | #5F6368 |
Entwicklerschaltfläche
- App-Symbol
- App-Name
- Symbole für Zahlungsmethoden
- Zusätzlicher Indikator
- Maximale Anzahl von Symbolen für Zahlungsmethoden
- Breite: 360 dp
- Breite: 480 dp
Symbole für Zahlungsmethoden
Auf Bildschirmbreite skalieren
Schaltflächencontainer
Umriss | 1pt, #DADCE0 |
Eckenradius | 4dp |
Innenabstände | 16dp, 16dp, 16dp, 16dp |
App-Symbol
Abmessungen | Höhe: 24 dp, Breite: variabel |
Titel
Text | {App-Name} |
Schriftgröße | 14sp |
Schriftfarbe | #202124 |
Zahlungsmethoden
Abmessungen | Höhe: 32 dp, Breite: 20 dp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Eckenradius | 2dp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Menge | Maximal 5, wenn mehr als 5 verfügbar sind, wird eine zusätzliche Anzeige angezeigt | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Zusätzlicher Indikator |
Land und Sprache auswählen
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Schriftgröße | 12 sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Schriftfarbe | #5F6368 |
Google Play-Schaltfläche
- Symbol
- Titel
- Akzeptierte Zahlungsmethoden
- Zusätzlicher Indikator
Schaltflächencontainer
Umriss | 1pt, #DADCE0 |
Eckenradius | 4dp |
Innenabstände | 16dp, 16dp, 16dp, 16dp |
App-Symbol
Bild-Asset | Google Play-Prisma |
Abmessungen | Höhe: 24 dp, Breite: 24 dp |
Titel
Text | Google Play |
Schriftgröße | 14sp |
Schriftfarbe | #202124 |
Zahlungsmethoden
Bild-Asset | Link | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Zusätzlicher Indikator |
Land und Sprache auswählen
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Schriftgröße | 12 sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Schriftfarbe | #5F6368 |
Landschaft
Beispiel: In der Querformatansicht ist das untere Tabellenblatt breiter als in der Hochformatansicht, folgt aber ansonsten denselben Designspezifikationen und Funktionen.
Ansicht am unteren Rand | Breite: maximal 500 dp, innerer Abstand: 24 dp |
Titel | Wie Hochformatansicht |
die Botschaft und | Wie Hochformatansicht |
Tasten | Wie Hochformatansicht |
Weitere Informationen zum Pilotprojekt zur Abrechnung mit Auswahlmöglichkeit für Nutzer und häufig gestellte Fragen finden Sie in der Hilfe.