Přestaňte ukazovat prstem. Proč na slovíčkách v UI záleží

Přestaňte ukazovat prstem. Proč na slovíčkách v UI záleží

Čec 17, 2026 ui design developer tools vibe coding web development design systems ai-assisted development frontend development ux terminology

Proč je slovíčko v UI designu tvůj nejlepší kamarád

Budiž kvitováno — všichni jsme tam byli. Sedíte na poradě, snažíte se vysvětlit bug, a místo "vložený kurzor" řeknete "ta modrá čárka". Vývojář naproti vám zdvořile přikývne, aniž by měl tušení, o čem mluvíte.

Tohle není jen trapný moment u kafe. V éře AI-asistovaného programování a vibe coding precisionmátiky hraje terminology klíčovou roli. Když píšete prompt pro coding agenta, vágní popis = vágní výsledky. Řekněte "ať ten dropdown vypadá líp" a dostanete přesně to, co jste si řekli — hotový chaos. Řekněte ale "styluj combobox s clear buttonem a focus ringem" a najednou vám AI dodá přesně to, co jste měli na mysli.

Terminologická propast

UI design je záludný v tom, že každý prvek má svůj název. Některé jsou jasné — button, checkbox, slider. Jiné jsou překvapivě specifické a občas až roztomilé. "Traffic Lights" označuje ovládací prvky okna v macOS (ty červené, žluté a zelené kuličky). "Bento Grid" popisuje moderní layout s různě velkými dlaždicemi. "Scrim" je technický termín pro ten poloprůhledný overlay za modálním oknem.

Tenhle guláš mezi běžnou řečí a správnou terminologií způsobuje reálné problémy. Designéři a vývojáři si často povídají, ale jeden druhého nechápou. Stakeholdeři chtějí "tu notifikační věc, co vyskočí" — ale myslí tím "toast" nebo "snackbar". A ano, tyto dvě věci jsou různé a mají odlišné use cases.

Proč je to důležité pro AI coding

Pokud používáte AI coding asistenty (a pokud ne teď, tak brzy určitě budete), slova, která volíte, přímo ovlivňují kód, který dostanete. Zamyslete se nad tím: moderní UI frameworky mají tisíce komponent. Když popisujete, co chcete, v podstatě překládáte svou vizi do promptu, který musí AI interpretovat.

Prompt jako "přidej segmented control s active state" vám dá mnohem lepší výsledky než "ta taboidní věc, kde je jeden vybraný". AI nehádá vaše záměry — řídí se podle vašeho popisu. Přesnější jazyk znamená méně iterací, míň ping-pongu a kód, který skutečně odpovídá vaší mentální představě.

Za hranicí evidentního

Některé UI termíny jsou rozkošně specifické. "Visual Effect Material" neboli "Vibrancy" popisuje ten translucentní, rozmazaný efekt, který macOS používá všude možně. "Easing" nebo "timing functions" řídí, jak animace působí — jestli jsou svižné, pružné nebo hedvábně hladké. Tyhle rozdíly nejsou jen pedantské kraviny; reprezentují rozdíl mezi interfaces, které působí mechanicky, a těmi, které působí živě.

Jiné distinkce jsou překvapivě zásadní pro accessibility. "Focus Ring" není jen vizuální indikátor — je to způsob, jakým se keyboard uživatelé navigují. Pochopení, že :focus-visible se chová jinak než standard focus indicator, je enormně důležité při stavění inkluzivních aplikací.

Budujte svou UI slovní zásobu

Nemusíte memorovat každý termín z vizuálního slovníku, abyste zlepšili svou práci. Začněte malinkato. Vyberte si tři prvky, které si pravidelně pletete — třeba popovers versus dropdowns, nebo tooltips versus hover cards. Pochopení, kdy použít který, promění váš výběr komponent z hádání na záměrný akt.

Skutečná změna přijde, když se terminologie stane součástí vašeho designového a vývojářského slovníku. Místo "ta věc" začnete říkat "resize handle" nebo "scrim overlay" nebo "popover container". Najednou všichni u stolu přesně vědí, o čem mluvíte.

Závěrem

Pojmenovávat věci je těžké. I velký Martin Fowler kdysi prohlásil, že naming conventions patří k nejtěžším aspektům software development. UI prvky nejsou výjimkou — interagujeme s nimi neustále, ale zřídka se zastavíme, abychom se naučili jejich správná jména.

Ať už debugujete s vývojářem, píšete prompt pro AI asistenta, nebo se snažíte zjistit, proč vaše CSS animace vypadá divně — znát správnou terminologii odemkne rychlejší řešení a jasnější komunikaci.

Takže až příště narazíte na "tu věc" v interfacu, zastavte se na moment a zjistěte si její skutečné jméno. Vaše budoucí já — a všichni, se kterými pracujete — vám poděkují.

A pokud potřebujete rychlý reference? Projekt NameThatUI je šikovný vizuální slovník přesně pro tyhle momenty. Bookmarkujte ho. Používejte ho. Vaše komunikace se zlepší téměř okamžitě.

Read in other languages:

RU BG EL UZ TR SV FI RO PT PL NB NL HU IT FR ES DE DA ZH-HANS EN