P2 — Seznam akcí / Kategorie
Účel obrazovky
Zobrazuje výsledky browsingu — buď obsah kategorie, výsledky vyhledávání, nebo filtrovaný seznam akcí. Hlavní úkol: umožnit uživateli efektivně procházet větší množství akcí a najít tu pravou.
Content Priority
- Header — název kategorie / „Výsledky hledání (N)" s back navigací App Bar / Top NavigationBack Button
- Active filter chips — dismissible chips aktivních filtrů (žánr, datum, město…), tap na chip → otevření S3 Chip / Filter Button
- Sort dropdown — Datum (výchozí), Oblíbenost, Cena vzestupně, Cena sestupně Select / Dropdown
- Počet výsledků — „Nalezeno 374 akcí"
- Event list — vertikální seznam rozšířených event karet Event Card (large)
- Event karta (rozšířená): thumbnail (větší než na P1), název, pořadatel, datum/rozsah dat, místo konání, cena od, status badge (dostupné / málo míst / vyprodáno), žánr tag chips (max 2) Event Card (large)Badge / TagChip / Filter Button
- Loading indicator — spinner na konci seznamu při infinite scroll Loading / Skeleton
- Filtrovat CTA — floating button nebo chip pro otevření filtrů (pokud žádné aktivní) Primary Button
Interakce
| Trigger | Akce | Cíl |
|---|---|---|
| Tap na event kartu | Navigace na detail akce | P3 — Detail akce |
| Tap na filter chip / „Filtrovat" | Otevření filter overlay | S3 — Filtrování |
| Tap na „×" u aktivního filter chip | Odebrání filtru, refresh seznamu | Reload s méně filtry |
| Změna sort dropdown | Přeřazení seznamu | Scroll na top, nové řazení |
| Scroll na konec seznamu | Infinite scroll — načtení další stránky | Loading spinner + append dalších karet |
| Pull-to-refresh | Refresh seznamu | Nová data z API |
| Back button | Návrat | Předchozí obrazovka (P1 nebo P8) |
Stavy
| Stav | Popis | Vizuální chování |
|---|---|---|
| Loading | První načtení | Skeleton: 3 placeholder karty v řadě |
| Loaded | Data dostupná | Seznam event karet |
| Loading more | Infinite scroll pagination | Spinner pod posledním itemem |
| Empty — po filtrování | 0 výsledků po aplikaci filtrů | Ilustrace + „Žádné výsledky — zkuste upravit filtry" + „Resetovat filtry" CTA |
| Empty — kategorie | Kategorie nemá žádné akce | Ilustrace + „V této kategorii zatím nemáme akce" |
| Error | API selhala | Retry CTA |
| Offline | Bez připojení | „Jste offline" banner, cached data pokud existují |
Edge Cases a Error States
| Scénář | Řešení |
|---|---|
| Velmi dlouhý seznam (1000+ akcí) | Infinite scroll po 20 položkách, lazy loading obrázků |
| Uživatel mění sort po scrollu | Scroll na top, plný re-fetch |
| Filtr vrací 0 výsledků | Empty state s „Zkuste méně filtrů" CTA |
| Pagination API timeout | Toast „Nepodařilo se načíst další akce", retry button |
| Event karta bez obrázku | Placeholder s barvou žánru |
| Extrémně dlouhý název akce | Truncate na 2 řádky s „…" |
Mobilní patterny a odlišení od webu
Co děláme jinak
- Infinite scroll místo „Load More" button + pagination — plynulejší mobilní experience
- Floating filter CTA — na webu jsou filtry odkaz nahoře, na mobilu je potřeba víc prominence
- Dismissible filter chips — na webu je „Reset filters" v draweru, na mobilu viditelné inline chips s „×" pro quick reset
- Větší touch targety — event karty mají min. 48dp touch area (Android Material 3 / iOS HIG)
Aplikované patterny
- iOS:
UICollectionViewsDiffableDataSourcepro smooth updates, prefetch pro infinite scroll - Android:
LazyColumnspaging3knihovnou,FilterChip(Material 3) pro aktivní filtry
Reference — Aktuální web
SCR-WEB-05Kategorie Music — search, filter CTA, tag cloud, event karty
SCR-WEB-09Filter drawer — chips, expandable sekce, 'Show Events' CTA
SCR-WEB-10Full-width event karty v listu
SCR-WEB-11Load More + numerická paginationReference — CineStar benchmark
SCR-CS-02Program — location dropdown, horizontal day picker, movie karty s formát badges a showtime buttonyInspirace z CineStar
CineStar má horizontální day picker (pondělí–neděle) jako primární filtr — velmi rychlý přístup k „co dnes hrají". Zvážit podobný pattern pro Colosseum (date ribbon pod header).