Android-Design

Android Design

Wie Google Android-Apps mit Material 3 Expressive gestaltet, übersetzt in Entscheidungen und Compose-Code. Expressive ist keine separate Designsprache: Es ist Material 3 plus optionale APIs, Komponenten und Designtaktiken, die Google als „Erweiterungspaket“ bezeichnet. Die Richtlinien, Forschungsergebnisse und API-Namen hier stammen von m3.material.io, den Android-Designleitfäden (developer.android.com/design/ui), dem Wear OS Design Guide, Google I/O- und Android Developers-Vorträgen sowie androidx-Quellen.

Der rote Faden: Ein Bildschirm fühlt sich gestaltet an, wenn die Betonung bewusst gesetzt wird. Ordne, wofür der Bildschirm da ist, und setze dann Größe, Farbkontrast, Form, Typografie, Container und Bewegung auf das Hauptziel, weniger auf das nächste und fast nichts auf den Rest. Standard-Material-Code gibt jedem Element das gleiche Gewicht, weshalb es wie eine Vorlage aussieht.

Zitate und Regeln, die mit (Google) markiert sind, stammen aus Googles Anleitung. Regeln, die mit (Standard) markiert sind, sind die Ausgangspunkte dieser Fähigkeit: Befolge sie, es sei denn, die Ausrichtung des Bildschirms gibt einen Grund, dies nicht zu tun.

Oberflächen. Diese Fähigkeit zielt auf Telefon-, Tablet-, Desktop- und Wear OS-App-Bildschirme ab. Lies für einen Wear OS-Bildschirm zuerst references/wear-os.md; es hat Vorrang vor dieser Datei, wo sie abweichen. Verwende die Fähigkeit wear-compose-m3 für Gerüst und Migration. Wear Kacheln, Zifferblätter und Homescreen-Widgets liegen außerhalb dieser Fähigkeit: Verwende die Fähigkeit wear-widgets für Wear-Widgets und -Kacheln und die Glance-Fähigkeiten für Homescreen-Widgets.

Visuelle Werkzeuge

Die Implementierung oder Überprüfung von echtem Compose-Code erfordert die compose-preview-CLI und die Fähigkeiten compose-preview und compose-ui-builder: Lies und befolge compose-preview, die die Werkzeugauswahl, das Rendern und die Fehlerbehebung besitzt. Für eine UI-Builder-Designanforderung befolge compose-ui-builder. Diese Fähigkeit besitzt die Designentscheidungen und die Bildschirmprüfung. Wenn eine Abhängigkeit nicht verfügbar ist, melde dies und verweise den Benutzer auf den README-Einrichtungsabschnitt dieses Repositorys, anstatt Werkzeuge zu installieren oder einen anderen Renderer zu verwenden.

Erkundung oder Implementierung

Wenn die Anfrage das Design einer neuen App, eines neuen Bildschirms oder ein Redesign betrifft (es nach Polieren, einer visuellen Richtung oder Material 3 Expressive fragt oder diese Fähigkeit nennt), beginne mit einem Vorschlag, auch wenn es „bauen“ sagt: Befolge die Fähigkeit android-design-explore, zeige ihren Vorschlag in der Vorschau-App und warte auf die Zustimmung des Benutzers zu einer Richtung, bevor du Compose schreibst. Überspringe den Vorschlag, wenn der Benutzer dies sagt („Überspringe den Vorschlag“, „Code es einfach“) oder ein genehmigter Vorschlag bereits existiert; portiere einen genehmigten Vorschlag mit den „Genehmigen und portieren“-Schritten dieser Fähigkeit, die mit export_kotlin beginnen.

Ein einfaches Bauen, das nicht nach Design fragt, geht direkt zum Code und wendet die folgenden Entscheidungen und die Bildschirmprüfung an.

Änderungen innerhalb eines bestehenden Designs (eine Korrektur, eine Anpassung, eine Überprüfung, ein neuer Zustand eines genehmigten Bildschirms) gehen direkt zum eigentlichen Projekt unter seinen eigenen Genehmigungs- und Branch-Regeln, unter Verwendung der folgenden Designentscheidungen und der Bildschirmprüfung.

0. Vor dem Schreiben der UI

Beantworte diese in deiner Antwort vor jeglichem Code, ein oder zwei Sätze pro Punkt. Das Überspringen dieses Schrittes führt zu generischen Bildschirmen.

1. Ordne die Ziele. Was ist die eine primäre Aufgabe auf diesem Bildschirm? Was ist sekundär und tertiär? (Google: „Vereinfachen auf eine primäre Aufgabe pro Seite.“)
2. Wähle eine Richtung. Nenne den emotionalen Charakter des Bildschirms, den Inhalt oder die Interaktion, die ihn definiert, und eine visuelle Idee, die Typografie, Bildmaterial, Farbe und Form zusammenhält. Jede Antwort muss eine Entscheidung nennen („das gesamte Set in großen Ziffern füllt das obere Drittel“), kein Adjektiv („modern, sauber“). Wenn die Idee beschreibt, wie die meisten Apps dieses Typs bereits aussehen, ist es noch keine Idee.
3. Entscheide den Heldenmoment. Ist dieser Bildschirm einer der ein oder zwei Heldenmomente des Produkts (die emotionalste oder zentralste Interaktion)? Wenn ja, plane, wie mehrere Taktiken dort zusammenwirken. Wenn nein, halte es ruhig (Google).
4. Wähle die Farbquelle. Dynamisch (Hintergrundbild), Marke (ein generiertes Schema) oder inhaltsbasiert (aus einem Bild auf dem Bildschirm). Siehe Abschnitt 4.
5. Setze Betonung nach Rang. Das primäre Ziel erhält die meiste Betonung, normalerweise zuerst die Größe. Sekundäre Ziele erhalten weniger Taktiken; tertiäre erhalten Container und Typografie (Google). Inhalt kann den Bildschirm dominieren, wenn er das Produkt ist, solange die primäre Aktion unverkennbar bleibt.
6. Wähle Komponenten aus der Tabelle in Abschnitt 9, nicht aus der Erinnerung an älteres Material.
7. Beantworte die Anpassungsfrage. Für jede Größenklasse, die du rendern wirst (kompakt; mittel oder erweitert; groß oder extra groß), nenne, was der zusätzliche Raum enthüllt: einen zweiten Bereich, eine erweiterte Leiste, mehr Details. Verwende die fünf Fragen in references/layout.md, beginnend mit „Was soll enthüllt werden?“. Die Navigation bleibt konsistent: Wenn ein größeres Layout eine Leiste hat, hat das kompakte eine Navigationsleiste für die gleichen Ziele. Für einen steuerungsbasierten Bildschirm wie einen Mediaplayer fließen die Steuerelemente neu und der Inhalt wird enthüllt. Ein größeres Layout, das nur den Telefoninhalt breiter darstellt, hat es nicht beantwortet: „Zusätzlicher Raum bedeutet nicht nur, dasselbe größer zu machen.“ (Google)

Dann gestalte den Bildschirm (Abschnitt 8), baue ihn und führe die Bildschirmprüfung am gerenderten Ergebnis durch.

1. Theme-Einrichtung

Expressive benötigt androidx.compose.material3:material3 1.5.0-alpha oder neuer. Stabiles 1.4.0 hat fast keine dieser APIs. Suche die neueste 1.5.x-Version in den Maven-Metadaten, anstatt einer erinnerten zu vertrauen; Alpha-APIs verschieben sich noch zwischen den Versionen. Aktuelle Alphas erfordern auch compileSdk 37 und Android Gradle Plugin 9.1 oder neuer.

@Composable
fun AppTheme(dark: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
    val context = LocalContext.current
    val colorScheme = when {
        Build.VERSION.SDK_INT >= 31 -> if (dark) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        dark -> darkColorScheme()
        else -> expressiveLightColorScheme()
    }
    MaterialExpressiveTheme(
        colorScheme = colorScheme,
        motionScheme = MotionScheme.expressive(),
        typography = AppTypography, // Google Sans Flex Voices plus eine optionale Markenschriftart, siehe Abschnitt 5
        content = content,
    )
}

• Es gibt kein expressiveDarkColorScheme; verwende darkColorScheme() oder ein generiertes dunkles Schema.
• MaterialShapes, toShape(), LoadingIndicator und ContainedLoadingIndicator benötigen noch @OptIn(ExperimentalMaterial3ExpressiveApi::class). Alles andere hier ist in den 1.5.0-Alphas nicht experimentell.
• Vollständige Einrichtung, Seed-Schemas, benutzerdefinierte Typ-Skalen, Formmorphing, Bewegungsspezifikationen, Abstände und Versionshinweise: Lies references/theming.md, wenn du ein Theme einrichtest oder änderst.

2. Betonung und Hierarchie

Betonung ist, wie Menschen die primäre Aktion finden: Größere Schlüsselaktionen und bewusste Hierarchie reduzieren Fehler und machen wichtige UI-Elemente schneller auffindbar (Google).

• Größe ist der lauteste Hebel, und sie ist relativ. „Die wichtigste Aktion oder der Haupt-Call-to-Action (CTA) sollte das größte Element sein“ (Google): Größere Schlüsselaktionen bedeuten weniger Fehler und zufriedenere Benutzer, daher führt die primäre Aktion die Aktionen um sie herum an, unabhängig von deren Größe. Inhalt steht nicht in Konkurrenz dazu: Eine Zusammenfassungskarte oder eine Listenzeile kann physisch größer sein. Beginne mit der Standardgröße der Komponente mit der stärksten Füllung (einem kleinen Button; für einen FAB empfiehlt Google „Medium FAB ist für die meisten Situationen empfohlen“) und vergrößere sie nur so weit, bis sie ihre Mitbewerber anführt; ein Fokuspunkt pro Bildschirm, und wenn alles groß ist, ist nichts groß. Gruppierte Aktionen teilen standardmäßig eine Größe („alle Buttons in einer Standardgruppe sollten gleich groß sein“), und die primäre Aktion führt durch Füllung oder Form: Googles Gruppenregel ist „am größten, am breitesten oder am visuell auffälligsten.“ Extra groß gehört zu einem steuerungsgeführten Helden, wie einem Player oder einer Atemsitzung, wo die Steuerung der Inhalt des Bildschirms ist. Das Label setzt die Untergrenze: Google sagt „Schneide Label-Text nicht ab oder umbreche ihn nicht“ und ein Container „sollte nicht schmaler als sein Label-Text sein.“ Wenn ein Label in seiner Container (eine Telefon-breite Karte, ein Bereich) in der gewählten Größe nicht auf eine Zeile passt, kürze es auf 1 bis 3 Wörter, gib dem Button mehr Platz oder verkleinere eine Größe (Google: Größe kann „über verschiedene Breakpoints hinweg“ ändern, und Betonung kommt „durch Größe, Farbe oder Form“).
• Platzierung: Setze die Schlüsselaktion dorthin, wo Hände und Augen bereits sind. Googles E-Mail-Studie: Das Verschieben von Senden von einem kleinen Symbol in der oberen Leiste zu einem größeren Button direkt über der Tastatur, in secondary gemacht, ließ die Leute es 4x schneller finden; Auras Startbildschirm platziert seinen extra großen Startbutton unten, als letztes im vertikalen Fluss. Wähle die Position aus der Interaktion und dem Platz, den der Inhalt benötigt (Standard).
• Die primäre Aktion erhält die stärkste Füllung (Google: Primäre Rollen gehen an entscheidende Calls-to-Action; gefüllte Buttons sparsam). Sekundäre Aktionen sind tonal oder Standard; Toggles wie Favoriten zeigen den Zustand mit einem gefüllten Icon oder einem tonalen Container, nicht mit einer zweiten lauten Füllung, die mit dem Hauptsteuerelement konkurriert.
• Kontrast zwischen Rollen, nicht eine Rolle überall: primary für die Hauptaktion, secondary oder secondaryContainer für unterstützende Steuerelemente, tertiary für Status oder Akzente. Die Verwendung von primary und primaryContainer für alles ebnet den Bildschirm ein.
• Container: Gruppiere verwandte Elemente in Containern; gib dem wichtigsten Inhalt „ausreichend Platz und die hellste Oberfläche.“
• Zusammenfassungen unterstützen die Aufgabe, sie übertrumpfen sie nicht. Wenn das primäre Ziel darin besteht, auf einer Liste zu handeln (Gewohnheiten abhaken, auf Nachrichten antworten), muss das nächste bearbeitbare Element das einladendste auf dem Bildschirm bleiben. Stat-Karten können fett sein, aber gib bearbeitbaren Zeilen klare Container und lass erledigte Elemente zurücktreten (leisere Farbe, keine starke Füllung), gruppiert nach Zustand, nicht vermischt (Abschnitt 8). Selektionshervorhebung ist für das, was der Benutzer gewählt hat, nicht für das, was fertig ist.
• Arbeitsreihenfolge: Baue zuerst die Hierarchie auf (Größe, Farbe, Abstand, Platzierung, Container), dann füge einzigartige Betonung (Form, Skalierung, Morph) hinzu, um Erfolg oder Fortschritt zu feiern.

Googles ausgearbeitetes Beispiel: die Aura-Atem-App

Jeder Bildschirm setzt Betonung nach Zielrang. Verwende dies als Denkmuster.

Bildschirm	Rang	Betonung
Start	Primär: eine Sitzung starten	Extra großer „Atmen starten“-Button in dunklem primary auf einer weichen Oberfläche, unten auf dem Bildschirm. Einstellungen als Listenelemente in secondary gruppiert. Tägliche Nachricht in einem weichen Container, geringste Betonung.
Sitzung	Heldenmoment	Eine bildschirmfüllende Blumenform (MaterialShapes.Flower und Sunny) wächst und schrumpft mit jedem Atemzug in einer Frühlingsbewegung; lebendiges Gelb beim Einatmen; riesige Countdown-Ziffern gegen kleine Labels; Pause/Stopp klein unten; Navigationsleiste ausgeblendet.
Bericht	Sekundär	Weniger Taktiken „um die kognitive Belastung zu reduzieren“: Metriken in einheitlichen Blumenformen, hervorgehobene Zahlen, ein mittlerer (nicht XL) Fertig-Button.
Fortschritt	Tertiär	Dezent: Schlüsseldaten in primary, erledigte Tage als kleine sekundäre Formen, Zahlen „groß genug zum Überfliegen, aber sie dominieren nicht.“

Ihre Lektion von v1 zu v2: Ungruppierte Einstellungen ähnlicher Größe und inkonsistenter Farbe konkurrierten um Aufmerksamkeit; das Gruppieren über einem extra großen Button führte von „überladen zu ruhig.“

3. Heldenmomente und Zurückhaltung

„Heldenmomente verwenden mehrere ausdrucksstarke Taktiken, um von vorhersehbaren oder gleichmäßig angewendeten Designideen abzuweichen.“

• Ein Heldenmoment schichtet Typografie, Form, Farbe, Bewegung und flexible Komponenten auf die Schlüsselinteraktion des Produkts: den Telefonwähler, einen Mediaplayer, ein erreichtes Ziel, eine Atemsitzung. Frage: Ist es emotional wirkungsvoll? und Ist es eine Schlüsselinteraktion?
• Ein oder zwei pro Produkt. Sie sind „kurz, entzückend, überraschend und unerwartet“; mehr überwältigt.
• Sekundärbildschirme verwenden weniger Taktiken. Kombiniere nicht jede Taktik überall.
• In einem Heldenmoment bewegt sich eine benutzerdefinierte Sache: Halte den Text stabil, während sich die Form bewegt (Google). Integrierte Komponenten-Morphs (ein Button, der beim Drücken seine Form ändert) zählen nicht.
• Wenn Inhalt das Produkt ist, ist der Inhalt der Held. In Playern, Galerien und Reisen gib dem Albumcover oder Foto Skalierung und lass seine Farbe den Bildschirm bestimmen. Eine Bibliotheksform-Maske, ein randloser Hintergrund oder ein Titel, der über das Bild gelegt wird, sind Optionen, keine Anforderungen: Ein gewöhnlicher abgerundeter Zuschnitt ist genauso stark, wenn die Komposition um ihn herum die Idee trägt.
• Behalte vertraute Muster. Expressive stilisiert die Muster; es ersetzt sie nicht. In Googles Tests sah eine als verstreutes Albumcover neu aufgebaute Playlist „modern und aufregend“ aus, aber die Leute erkannten es nicht als Playlist, und das Entfernen von Textlabels aus E-Mail-Aktionen beeinträchtigte die Benutzerfreundlichkeit. Kontext ist auch wichtig: Was zu einem Mediaplayer passt, passt möglicherweise nicht zu einer Banking-App.
• „Keine Menge an Emotion kann einen Mangel an Klarheit ausgleichen.“ Expressive schärft einen Bildschirm, der bereits funktioniert; es rettet keinen verwirrten.

4. Farbe

• Der Generator erstellt die Palette; du weist die Rollen zu. Die Farbdienstprogramme von Material verwandeln eine Quellfarbe in die Akzent-, Oberflächen-, Hell- und Dunkelrollen (Google). Nimm die generierte Palette, wie sie kommt, und verwende die Designarbeit darauf, welches Element welche Rolle bekommt.
  • Dynamisch (Hintergrundbild) ist Googles Empfehlung und bietet Personalisierung. Das M3 Expressive-Update hat dynamische Farbe an der Quelle verbessert („höhere Chroma über alle Farbtöne hinweg“); Apps bekommen es automatisch. Die App teilt sich die Farbtöne mit dem Rest des Telefons, daher kommt ihre Identität aus Hierarchie, Form und Typografie.
  • Marke gibt der App ihre eigene Identität: ein Schema, das aus der Markenfarbe mit Material Theme Builder oder mit MaterialKolor zur Laufzeit im Standard-Palettenstil generiert wird (Theming-Referenz). Erhöhe keinen Palettenstil, um „ausdrucksstärker“ auszusehen: PaletteStyle.Expressive von MaterialKolor ist eine farbverschiebende Schema-Variante, die nichts mit M3 Expressive zu tun hat, und sie zieht die Palette vom Farbton der Marke weg.
  • Inhaltsbasiert färbt einen enthaltenen Bereich vom durchdringendsten Farbton eines Bildes auf dem Bildschirm. Verwende es für Karten, Heldenbereiche oder Teilbildschirme als Akzent, der mit dem Inhalt wechselt; ersetze nicht die gesamte App-Palette.

5. Typografie

Google Sans Flex Voices ist die empfohlene Schriftfamilie für M3 Expressive. Sie ist in vier „Voices“ (Schnitte) mit eigenem Charakter erhältlich. Wenn die App Google Sans noch nicht lizenziert hat, verwende die nächste verfügbare Variable-Schriftart mit ähnlicher Weite. Lade die Schriftartdateien mit der herunterladbaren Schriftart aus dem Google Fonts-Provider in Compose.

• Die Voice wählen: Ordne die Voice der primären Aufgabe des Bildschirms zu. „Thoughtful“ (Serifenlos, normal bis mittel) für die meisten Inhalte, um die Aufgabe zu erledigen. „Serene“ (Serifenlos, hell) für Bildschirme, bei denen Inhalt im Mittelpunkt steht (Lesen, Fotos). „Expressive“ (Serifenlos, breit) für Schlagzeilen und Heldenmomente in kurzen Phrasen. „Peaceful“ (Serifenlos, komprimiert) für Platzersparnis oder ruhige Daten (Dashboards, Uhren). Eine Voice pro Bildschirmabschnitt; mische sie nicht auf Elementebene.
• Schriftgröße und Rolle: Verwende die Material-3-Typ-Skala als Grundlage. Für Schlagzeilenkarten oder Heldenmomente kann die Größe vergrößert werden, behalte aber die Voice-Struktur bei.
• Benutzerdefinierte Schriftart: Die App kann eine einzelne Markenschriftart für Schlagzeilen hinzufügen (Google: eine Markenschriftart identifiziert die App). Gib in AppTypography die Familien an: display und headline erhalten die Markenschriftart; der Rest behält Google Sans Flex bei.
• Wenn Google Sans Flex nicht verfügbar ist und keine benutzerdefinierte Schriftart hinzugefügt wird, verwende FontFamily.SansSerif für die gesamte Skala.

Siehe references/theming.md für die vollständige Typskalen-Einrichtung mit FontVariation.Settings und Beispielen.

6. Komponentenauswahl

Wähle Komponenten aus dieser Tabelle anstatt aus dem Gedächtnis älterer Material-Versionen. Jede Zeile gibt die empfohlene Verwendung und den Expressive-Standard an.

Komponente	Verwendung	Expressive-Standard
FAB	Primäre Aktion auf einem Bildschirm	MediumFloatingActionButton (Standard) für einfache Aktionen; LargeFloatingActionButton für Helden oder starke Hierarchie.
Button	Aktionen in Formularen, Karten, Dialogen	FilledButton für primary; FilledTonalButton für secondary; OutlinedButton für tertiary.
Top-App-Leiste	Navigation, Aktionen, Titel	CenterAlignedTopAppBar für Startbildschirme; TopAppBar für Detail- oder Liste.
Karte	Enthaltene Informationen für eine Entität	Standard Card mit elevation = CardDefaults.cardElevation(defaultElevation = 2.dp).
Navigationsleiste	Primäre Navigation auf kompakten Bildschirmen	NavigationBar mit 3-5 Zielen.
Rails	Navigation auf mittleren/erweiterten Bildschirmen	NavigationRail mit Symbolen und Beschriftungen.
Tab-Leiste	Inhaltswechsel unter einem einheitlichen Thema	TabRow für horizontale Registerkarten.
Schieberegler	Wertebereich-Anpassung	Standard Slider.
Switch	Binäre Ein/Aus-Umschaltung	Standard Switch mit colors = SwitchDefaults.colors(checkedTrackColor = MaterialTheme.colorScheme.primary).

7. Layout-Anpassung

• Kompakt (Telefon): Einzelbereich-Layouts mit unterer Navigation.
• Mittel (Tablet, gefaltet): Seitenleiste oder Registerkarten für die Navigation; Zweibereichs-Layout für Listen/Detail (Google: „Ein Zweibereichs-Layout zeigt eine Liste und ein Detail nebeneinander an.“).
• Erweitert (Desktop, großes Tablet): Drei-Bereichs-Layout (Navigation, Liste, Detail) oder ein Vollbild für Heldeninhalte.
• Antwort auf die Enthüllungsfrage: Für jede Größenklasse benenne, was der zusätzliche Raum enthüllt. Die Navigation bleibt konsistent: Wenn ein größeres Layout eine Rails hat, hat das kompakte eine Navigationsleiste für die gleichen Ziele.

Siehe references/layout.md für die fünf Enthüllungsfragen und ausführliche Layout-Muster.

8. Erstellen des Bildschirms

1. Kreiere Inhalte: Schreibe den Inhalt für den Bildschirm, verwende echte Daten oder Platzhalter.
2. Wende Designentscheidungen an: Wende die Entscheidungen aus Abschnitt 0 auf das Layout an: Größe, Farbe, Platzierung, Container.
3. Baue die Hierarchie: Verwende Größe als primären Hebel; füge dann Farbe, Form und Bewegung hinzu.
4. Füge Bewegung hinzu: Verwende MotionScheme.expressive() für Standard-Bewegung; für Heldenmomente füge benutzerdefinierte Bewegung hinzu.
5. Optimiere für die Barrierefreiheit: Stelle sicher, dass Farbkontraste ausreichend sind (mindestens 4,5:1 für normalen Text, 3:1 für großen Text). Füge Inhaltsbeschreibungen für Symbole und Bilder hinzu.
6. Teste und überprüfe: Führe die Bildschirmprüfung durch.

9. Bewegung

• Standard-Bewegung: MotionScheme.expressive() bietet eine Grundlinie mit beschleunigten, verlangsamten und standardmäßigen Kurven. Verwende animate*AsState für einfache Animationen und AnimatedContent für den Übergang zwischen Zuständen.
• Heldenmoment-Bewegung: Verwende benutzerdefinierte Bewegung für den einen beweglichen Teil des Helden. Beispielsweise AnimatedVisibility mit einem Dehnungseffekt für eine blühende Form.
• Übergänge: Verwende AnimatedContent mit fadeIn/fadeOut und slideInHorizontally/slideOutHorizontally für Bildschirmübergänge.

Bildschirmprüfung

Führe dies auf dem gerenderten Bildschirm durch, bevor er als fertig betrachtet wird.

1. Enthält der Bildschirm ein klares Ziel? Die primäre Aktion sollte sofort erkennbar sein. Wenn nein, kehre zu Abschnitt 0 zurück.
2. Gibt es einen einzigen Fokuspunkt? Ein Heldenelement (größte, auffälligste Aktion). Wenn mehrere um Aufmerksamkeit konkurrieren, reduziere.
3. Ist die Hierarchie konsistent? Größe, Farbe, Container und Abstand spiegeln die Rangfolge der Ziele wider.
4. Sind die Container klar? Gruppierte Elemente sind durch Container getrennt; der primäre Container hebt sich ab.
5. Ist die Farbe korrekt zugewiesen? primary nur für die Hauptaktion; secondary für unterstützende Steuerelemente; tertiary für Status/Akzente.
6. Ist die Typografie der Aufgabe angemessen? Die Voice passt zur Bildschirmaufgabe.
7. Wurde die Layout-Anpassung beantwortet? Für jede Größenklasse wurde die Enthüllungsfrage beantwortet.
8. Wurde Bewegung hinzugefügt? Mindestens Standard-Bewegung über MotionScheme.expressive(). Für einen Heldenmoment eine benutzerdefinierte Bewegung.
9. Ist der Bildschirm auf verschiedenen Bildschirmgrößen funktional? Teste kompakt, mittel und erweitert.
10. Ist die Barrierefreiheit gewährleistet? Ausreichende Kontraste, Inhaltsbeschreibungen vorhanden.

Anhang: Material-3-Expressive-API-Referenz

Die folgenden APIs sind verfügbar in androidx.compose.material3:material3 1.5.0-alpha und höher. Für eine vollständige Liste siehe die offizielle Dokumentation.

• MaterialExpressiveTheme – Wendet das Expressive-Theme an.
• MotionScheme.expressive() – Standard-Bewegungsschema.
• MaterialShapes – Klasse für Expressive-Formen (Blume, Sonne, etc.).
• toShape() – Konvertiert eine MaterialShapes-Konstante in eine Shape.
• LoadingIndicator – Expressive Ladeanzeige.
• ContainedLoadingIndicator – In einem Container eingeschlossene Ladeanzeige.
• expressiveLightColorScheme() – Helles Expressive-Farbschema.
• dynamicLightColorScheme() / dynamicDarkColorScheme() – Dynamische Farbschemata ab API 31.

Markiere alle Nutzungen experimenteller APIs mit @OptIn(ExperimentalMaterial3ExpressiveApi::class).