P1 — Home / Feed
Účel obrazovky
Hlavní vstupní bod aplikace. Uživatel sem přichází po otevření app — musí okamžitě vidět relevantní akce a mít jasnou cestu k nákupu. Funkčně jde o discovery feed kombinující personalizované a editorské sekce, jeden promo hero, výběr města a rychlý přístup k vyhledávání přes ikonu v headeru.
Content Priority
Seřazeno od nejdůležitějšího — co uživatel vidí první:
- Hero promo banner (statický) — jedna promo položka na session; rotace obsahu z CMS je per session (ne carousel). Maximální výška 240 px. Žádné auto-scroll, žádné swipe gesto. Pokud CMS vrátí 0 položek, hero se neskytuje a feed začíná první sekcí. Hero Banner
- Výběr města (city chip) — v headeru chip ve tvaru „Praha ▼“ (aktuální město + chevron). Tap otevře bottom sheet se seznamem měst. Při prvním spuštění aplikace nabídnout automatickou lokaci (permission) a předvyplnit město podle GPS; fallback manuální výběr ze seznamu. Chip / Filter ButtonBottom Sheet
- Sekce „Doporučujeme" — editorský výběr; velké karty 280×200 px, horizontální scroll v režimu 1 karta + peek další, odkaz „Zobrazit vše". Section HeaderEvent Card (large)Carousel / Horizontal Scroll
- Sekce „Bestsellery" — top prodejní akce; stejný horizontální pattern jako ostatní sekce, ale na kartách číslo pořadí #1–#5 jako overlay (ranking). Section HeaderEvent Card (small)Carousel / Horizontal ScrollBadge / Tag
- Sekce „Nedávno prohlížené" — kompaktní karty 100×130 px, 3 viditelné v řádku (horizontální scroll); data z local storage; sekci zobrazit jen pokud uživatel prohlédl ≥ 2 akce. Section HeaderEvent Card (small)Carousel / Horizontal Scroll
- Sekce „Nová představení" — kompaktní vertikální karty 140×180 px, horizontální scroll; badge „Premiéra" kde platí. Section HeaderEvent Card (small)Carousel / Horizontal ScrollBadge / Tag
- Sekce „Předplatné a abonmá" — karty předplatného s logem pořadatele, cenou a CTA; horizontální layout konzistentní s feedem. Section HeaderSubscription CardCarousel / Horizontal Scroll
- Sekce „Z magazínu" — karty článků / blog ([F2+] — zobrazit jen pokud je obsah dostupný z CMS). Section HeaderArticle CardCarousel / Horizontal Scroll
- Event karta (opakovaná komponenta): thumbnail, název akce, datum nebo rozsah dat, místo konání, cena od, status badge (dostupné / málo míst / vyprodáno). V pravém horním rohu ikona ♡ (oblíbené): tap přepne stav favorite se scale animací (bez navigace na detail). Event Card (small)Badge / TagIcon Button
- Header bar — logo Colosseum, city chip, search ikona. Notifikační zvoneček není v [MVP] — přibude [F1] v rámci notifikačního centra.
- Spodní tab bar — PROGRAM | PROZKOUMAT | VSTUPENKY | PROFIL (položka discovery není pojmenovaná „Hledat").
Interakce
| Trigger | Akce | Cíl |
|---|---|---|
| Tap na event kartu (mimo ♡) | Navigace na detail | P3 — Detail akce |
| Tap na ♡ na kartě | Toggle oblíbené + scale animace | Lokální / API stav favorite |
| Tap na „Zobrazit vše" u sekce | Seznam s příslušným filtrem | P2 — Seznam akcí |
| Tap na search ikonu v header | Fullscreen search overlay | P8 — Vyhledávání |
| Tap na city chip „Město ▼" | Bottom sheet — výběr města | Přepnutí města, reload sekcí |
| Výběr města v sheetu | Zavření sheetu + refresh feedu | Nová data pro lokalitu |
| Tap na statický hero / CTA na hero | Deep link na detail akce nebo kampaň | P3 nebo promo landing |
| Pull-to-refresh | Aktualizace feedu | Nová data z API, scroll na top |
| Scroll dolů | Lazy loading dalších sekcí | Postupné načítání sekcí |
| Tap „Pokračovat" (active order stripe) | Návrat do rozpracované objednávky | Checkout / košík dle stavu |
[F1]: Tap na notifikační zvoneček (v budoucím headeru nebo v rámci centra) → notifikační centrum (viz S19 v inventáři obrazovek).
Stavy
| Stav | Popis | Vizuální chování |
|---|---|---|
| Loading | První načtení feedu | Skeleton: shimmer pro hero (pokud se očekává), řady placeholder karet podle typu sekce (velká / kompaktní) |
| Loaded | Data z API dostupná | Plný obsah; hero je jeden statický blok bez animace přepínání slideů |
| Error | API nedostupné | Centrovaná ilustrace + „Nepodařilo se načíst" + „Zkusit znovu" |
| Offline | Žádné připojení | Cached data (poslední úspěšné načtení) + sticky offline banner pod header: „Jste offline — zobrazujeme uložená data" |
| Pull-to-refresh | Uživatel táhne dolů | Spinner / indikátor, po dokončení zmizí |
| Empty — žádné akce ve městě | API vrací 0 akcí pro zvolené město | Empty state: copy typu „V tomto městě zatím nemáme akce" + CTA změnit město (otevře city picker) |
| Active order | Rozpracovaná objednávka s časovačem | Oranžový banner nad tab barem: „Rozpracovaná objednávka — 12:34 zbývá" + primární „Pokračovat"; tap → obnovení checkout / košíku |
Edge Cases a Error States
| Scénář | Řešení |
|---|---|
| První spuštění — lokace | Nabídnout autolokaci; po odmítnutí otevřít city picker nebo výchozí město dle produktové politiky |
| Hero: 0 položek z CMS | Hero skrýt; feed začíná první sekcí |
| Hero: 1 položka | Jedna statická plachta 240 px — bez pageru a bez gest |
| „Nedávno prohlížené": < 2 položky v local storage | Sekci nezobrazovat |
| [F2+] „Z magazínu" bez článků | Sekci nezobrazovat |
| Sekce má < 2 položky | Skrýt „Zobrazit vše", případně celou sekci dle PRD |
| Event karta bez obrázku | Placeholder s barvou kategorie / žánru a názvem akce |
| Pomalé připojení | Lazy obrázky s blur placeholderem; text ihned |
| Odpojení během pull-to-refresh | Toast „Nelze aktualizovat — zkontrolujte připojení", ponechat stará data |
| City picker (bottom sheet) | Full-height nebo standardní sheet se searchable listem měst + potvrzení výběru; zavření swipe down / tap mimo |
Mobilní patterny a odlišení od webu
Co přebíráme z webu
- Horizontální sekce s event kartami (discovery pattern)
- Výběr města (na webu tabs; na mobilu chip + sheet)
- Promo plachty (na webu často vícero; v app jedna statická per session)
Co děláme jinak a proč
- Pull-to-refresh místo manuálního reload — nativní mobilní pattern
- Skeleton loading místo holého spinneru — lepší perceived performance
- City chip v headeru + bottom sheet — šetří vertikální místo oproti sticky řádku tabů
- Bottom tab bar — PROGRAM | PROZKOUMAT | VSTUPENKY | PROFIL (položka Prozkoumat nahrazuje dřívější pojmenování „Hledat" u spodní navigace; fulltextové hledání zůstává přes ikonu v headeru → P8)
- Vizuální diferenciace sekcí — velké vs. kompaktní karty, ranking overlay, badge Premiéra, magazín jen když je obsah
- Oblíbené na kartě — ♡ v rohu karty; web často řeší favorite až na detailu
- Notifikace v [MVP] ne v headeru — sjednocení s F1 notifikačním centrem; MVP header zůstává jednoduchý
Aplikované patterny
- iOS:
UIRefreshControl, compositional layout / horizontální sekce,TabViewpro spodní navigaci,UISheetPresentationControllerpro city picker - Android:
SwipeRefreshLayout,LazyRowv Compose, Material NavigationBar, ModalBottomSheet pro výběr města
Reference — Aktuální web
SCR-WEB-01Hero banner, search, city tabs, promo bannery
SCR-WEB-02'Our selection for you' — horizontální event karty
SCR-WEB-03Nadcházející akce, city filter tabs, subscription
SCR-WEB-04Newsletter, footer kontaktyReference — CineStar benchmark
SCR-CS-01Dark theme homepage — hero banner, promo carousel, sekce Promítáme/Brzy uvedemeInspirace z CineStar
CineStar používá tmavý theme s výraznými promo bannery. Hero prostor je velký (cca 40 % viewport). Sekce jsou jasně oddělené. Navigace: location dropdown + search + favorites + notifications v horním baru. Bottom tab bar: Domů, Program, CineStar Club, Moje nákupy, Přihlásit se. U Colosseum MA je hero úmyslně nižší a statický; spodní taby a výběr města se řídí wireframy P1.