UI-Politur: Kontrast, Abstaende, Typografie, Bewegung
Kein Redesign — Schwarz/Rot, 4 Tabs und Lieder/Kategorie bleiben. Grundlage sind die Design-Skills: ui-ux-pro-max (Barrierefreiheit, Touch, Typografie, Bewegung), ui-design/mobile-android (Material 3) und die Token-Disziplin aus Hue. Behobene Maengel (messbar, nicht Geschmack): - Text in Colors.white38 an 17 Stellen = 3,4:1 Kontrast, WCAG verlangt 4,5:1. Ersetzt durch drei benannte Stufen (text1 15,9:1 / text2 8,8:1 / text3 4,9:1). theme_kontrast_test.dart rechnet die Verhaeltnisse bei jedem Lauf nach, statt sie zu behaupten. - SubTabs waren ~38 dp hoch (Material 3 verlangt 48), ohne Ripple und ohne Uebergang. Jetzt 48 dp, InkWell, AnimatedContainer, und die Auswahl wird Vorlesehilfen als Zustand gemeldet (Semantics.selected). - mini_player.dart: Expanded UM eine feste Hoehe herum — zwei widerspruechliche Angaben. Entschaerft. - Emoji in Bedienelementen der Einstellungen (jeweils neben einem echten Icon) entfernt. Neu in shared/theme.dart: MeloSpace (8er-Raster), MeloRadius, MeloMotion, Farbrollen text1/2/3 + border + hairline, minTouchTarget, vollstaendiges textTheme (7 Stufen) und Themes fuer Listen, Sheets, Snackbars, Fortschritt, Trenner. 318 Tests gruen (23 neue, 1 uebersprungen), flutter analyze ohne Befund. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FpPu4nuKjKKeX1RpdDeX81
This commit is contained in:
co-authored by
Claude Opus 5
parent
2df85e650e
commit
bc861f6087
@@ -5,6 +5,60 @@ Format angelehnt an [Keep a Changelog](https://keepachangelog.com/de/1.0.0/).
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
### ✨ UI-Politur: Kontrast, Abstände, Typografie, Bewegung (2026-08-21)
|
||||
|
||||
Kein neues Design — dasselbe Melo in sauber. Schwarz/Rot, die vier Tabs und
|
||||
Lieder/Kategorie bleiben unverändert.
|
||||
|
||||
- 🔍 **Behoben: blasse Schrift war nicht mehr lesbar.** An 17 Stellen stand
|
||||
Text in `white38`. Nachgerechnet sind das **3,4:1** Kontrast — die
|
||||
Barrierefreiheits-Grenze liegt bei **4,5:1**. Betroffen waren unter anderem
|
||||
Metadaten, Equalizer und Wiedergabelisten. Alle Textfarben laufen jetzt über
|
||||
drei benannte Stufen, und ein Test **rechnet die Kontraste bei jedem Lauf
|
||||
nach** (WCAG 2.1) — behauptet wird nichts mehr.
|
||||
| Stufe | Wofür | Kontrast |
|
||||
|---|---|---|
|
||||
| `text1` | Titel | 15,9:1 |
|
||||
| `text2` | Künstler, Untertitel | 8,8:1 |
|
||||
| `text3` | Anzahl, Zeit, Hinweis | 4,9:1 |
|
||||
- 👆 **Behoben: die Reiter waren zu klein zum Treffen.** *Lieder · Kategorie ·
|
||||
Künstler* waren nur ~38 dp hoch — Android verlangt **48 dp**, sonst tippt
|
||||
man im Gehen daneben. Jetzt volle 48 dp, mit spürbarer Rückmeldung beim
|
||||
Antippen (vorher gab es keine) und weichem Übergang statt hartem Sprung.
|
||||
Vorlesehilfen bekommen die Auswahl jetzt als Zustand gemeldet, nicht nur
|
||||
als weiße Farbe.
|
||||
- 📏 **Abstände nach festem Raster.** Vorher standen überall Einzelwerte
|
||||
(12, 9, 10, 18 …). Jetzt fünf benannte Stufen auf einem 8er-Raster —
|
||||
deshalb wirken Listen und Karten ruhiger, ohne dass etwas verschoben wurde.
|
||||
- 🔤 **Eine Schriftgrößen-Skala statt 52 Einzelangaben.** Sieben Stufen von
|
||||
der Bildschirm-Überschrift bis zum Beiwerk, mit passender Zeilenhöhe. Kein
|
||||
Text ist kleiner als 12.
|
||||
- 🎛️ **Mini-Player überarbeitet.** Der Abspiel-Knopf ist jetzt rot gefüllt
|
||||
und volle 48 dp groß — der wichtigste Knopf der Leiste lässt sich ohne
|
||||
Hinsehen treffen. Die Leiste blendet sich ein und aus, statt aufzupoppen,
|
||||
und ist durch eine Haarlinie vom Inhalt getrennt.
|
||||
🐛 Nebenbei ein Layout-Fehler entschärft: die Zeile lag in einem `Expanded`
|
||||
**um** eine feste Höhe herum — zwei widersprüchliche Angaben.
|
||||
- 🖼️ **Karten und Cover bekommen einen Umriss** statt eines Schattens. Auf
|
||||
Schwarz ist ein Schatten unsichtbar; eine Haarlinie trennt sauber.
|
||||
- 🚫 **Emoji raus aus Bedienelementen.** In den Einstellungen stand
|
||||
„🌐 Navidrome", „🌟 Favoriten-Sync" — jeweils direkt neben einem echten
|
||||
Symbol. Emoji werden von Vorlesehilfen vorgelesen („Globus mit Meridianen")
|
||||
und sehen auf jedem Gerät anders aus. Die Symbole bleiben, die Emoji sind weg.
|
||||
- 🔧 **Details für Technikinteressierte:**
|
||||
- Neu in `shared/theme.dart`: `MeloSpace`, `MeloRadius`, `MeloMotion`,
|
||||
Textstufen `text1/2/3`, `border`, `hairline`, `minTouchTarget` sowie ein
|
||||
vollständiges `textTheme` und Themes für Listen, Sheets, Snackbars,
|
||||
Fortschritt und Trenner.
|
||||
- Neu: `test/shared/theme_kontrast_test.dart` (rechnet WCAG-Kontraste,
|
||||
Raster und Typo-Skala nach) und `test/shared/sub_tabs_test.dart`
|
||||
(48 dp, Rückmeldung, Semantik, Übergang).
|
||||
- Grundlage: Regeln aus **ui-ux-pro-max** (Priorität 1 Barrierefreiheit,
|
||||
2 Touch, 6 Typografie/Farbe, 7 Bewegung), **ui-design/mobile-android**
|
||||
(Material 3: 48 dp, Theme über `context`) und die Token-Disziplin aus
|
||||
**Hue** (Primitives → benannte Rollen).
|
||||
- ✅ **Getestet:** 318 Tests grün (23 neue), `flutter analyze` ohne Befund.
|
||||
|
||||
### 📋 Backlog-Datei angelegt (2026-08-21)
|
||||
- Neu: `BACKLOG.md` — bewusst zurückgestellte Punkte an einer Stelle, damit
|
||||
nichts stillschweigend liegen bleibt. Drin stehen aktuell der übersprungene
|
||||
|
||||
Reference in New Issue
Block a user