Základní prvky musí vypadat stejně v tabulce, formuláři, pracovním okně i modální vrstvě. Tohle je sjednocovací kontrola před návrhem skutečných obrazovek produktů.
Co právě hodnotíme
Proporce, vzhled a stavy společných UI prvků, jejich optické centrování a jednotné použití v kombinaci.
Co je pouze DEMO
Ukázková jména workflow, tabulková data a scénáře v editoru. Neslouží jako finální návrh produktových obrazovek.
Co zatím není uzavřeno
Rozpor starší P6 specifikace versus Compact hustota a původní tmavý toast versus sémantické barevné varianty V2.
01 / FOUNDATION
Materiálový jazyk
Žádná změna schválené barevnosti. Pouze jednotné role a použití.
REFERENCE / V1 + V2
Barvy, povrchy a informace
Teplé základní plochy, oranžová akce, tmavě hnědá navigace a decentní zlatá.
Návrhové tokeny
Accent#F4781C · hlavní akce
Navigation#412F20 · tmavý shell
Gold#D9BD83 · jemná linka
Page#FAF6F1 · teplý základ
Zásada: barva sama nestačí k předání informace. Stav musí mít také text, symbol nebo jiný srozumitelný indikátor. Všechny společné prvky musí používat sémantické tokeny, nikoli vlastní náhodné barvy.
02 / BUTTONS & ACTIONS
Jedna hierarchie tlačítek
Pro stejnou akci stejná komponenta. Nezávisle na tom, zda je v tabulce, okně nebo modalu.
PATTERN CANDIDATE
Akční varianty
Jasná primární akce, podpůrná sekundární, tichá a destruktivní.
Button
Normální stav
Riziko, malé rozměry, zakázaný stav
Pravidlo: v jedné skupině rozhodování zpravidla právě jedna dominantní primární akce. Neschovávat destruktivní akce pod stejnou oranžovou variantu.
Ikonografie a stavové rozměry
Stejný optický střed, stejný formát SVG, viditelný focus.
IconButton
Ikona + label / pouze ikona
Async stav
Hover + focus + loading
Pravidlo: centrální ikona má vlastní obal typu IconButton a není nechtěně posunutá marginem textového span. Každý icon-only button má popis pro čtečku.
03 / INPUTS & FORMS
Jednotné formulářové prvky
Stejné labely, výšky, spodní nápověda a chybové hlášení bez poskakování řádků.
PATTERN CANDIDATE
Textová pole a validace
Stejná výška inputu i v páru s chybovou hláškou.
Input
! Zadej platnou e-mailovou adresu.
Volitelný kontext. Údaje zůstávají jen v prohlížeči.
Výběry a přepínače
Jedna vizuální rodina, přístupné chování, jasný vybraný stav.
Select · Radio · Switch
Stejná prémiová nabídka s vyhledáváním jako ve schválené referenci V2.
Nahrání souboru a stavy formuláře
Skutečný file input zůstává přístupný; stylizovaný obal nesmí skrývat ovládání klávesnicí.
FileUpload
Žádný soubor nevybrán
04 / STATES & FEEDBACK
Stavy, toasty a potvrzení
Vizuálně klidné, ale s jasně čitelnou závažností a správnou hierarchií.
PATTERN CANDIDATE
Významové stavy
Barva + text. Rozlišení v tabulce, hlavičce i toastu.
Status · Toast
AktivníČekáChybaKoncept
Otestuj hlášení
Potvrzení se stejnými komponentami
Modal používá Button a status stejným způsobem jako celá aplikace.
AlertDialog
Potvrdit publikaci?Čeká
Zvolená položka se po potvrzení předá do dalšího kroku. Tohle je pouze vzhledové demo dialogu.
05 / COMPOSITION
Stejné komponenty ve skutečné skladbě
Ukázka tabulky s filtrem, stavy a detailovým panelem. Data i proces jsou ilustrační.
DEMO ONLY / obsah
Seznam workflow + kontextové akce
Každé tlačítko, stav a filtr má stejný vzhled jako výše; vizuální kontrola kompozice.
Pattern Candidate / Chrome
Aktivní workflow
4 položky
Workflow
Stav
Odpovědný
Akce
Příklad obecné kompozice · nikoli Flow product screen
06 / DESIGN DEBT
Co musíme sjednotit před V4
Konkrétní otevřené nesoulady. Nic z toho není automaticky schválená výjimka.
Čeká na rozhodnutí / audit
Oblast
Co máme
Co je potřeba uzavřít
Stav
Výška ovládání
V2 Compact 35 px, Comfort 43 px; starší P6 říká 44 px minimum.
Explicitně určit finální density a význam výšek. Nepředstírat, že jsou normy shodné.