Почему «тот синий квадратик» — это не техническая документация

Давайте признаемся: каждый из нас бывал в ситуации, когда на совещании пытаешься объяснить баг и говоришь что-то вроде «вот эта синяя штука рядом с кнопкой». Коллега-разработчик вежливо кивает, не понимая ровным счётом ничего.

Это не просто неудобство. В эпоху AI-ассистентов и vibe coding точность описания важна как никогда. Когда вы пишете промпты дляcoding agents, размытые формулировки дают размытые результаты. Напишете «сделай выпадающий список покрасивее» — получите именно то, что просили, то есть хаос. А вот «style the combobox with a clear button and appropriate focus ring» — и ваш AI внезапно выдаёт именно то, что вы себе представляли.

Пробел в терминологии

Вот в чём загвоздка: у каждого элемента интерфейса есть своё название. Некоторые интуитивны — button, checkbox, slider. Другие удивительно точны и даже приятны на слух. «Traffic Lights» — это кнопки закрытия/свёртывания окна в macOS (да, те самые красный-жёлтый-зелёный кружки). «Bento Grid» описывает современный макет с плитками разного размера. «Scrim» — технический термин для полупрозрачного overlay за модальным окном.

Этот разрыв между обывательским языком и профессиональной терминологией создаёт реальные проблемы. Дизайнеры и разработчики часто говорят на разных языках. Заказчики просят «то уведомление, которое выскакивает», имея в виду toast или snackbar — а это, между прочим, разные вещи с разным поведением.

Почему это критично для AI-разработки

Если вы используете AI coding assistants (а давайте будем честными — если ещё не используете, то скоро будете), то слова, которые вы выбираете, напрямую влияют на результат. Подумайте: современные UI-фреймворки содержат тысячи компонентов. Описывая то, что вам нужно, вы по сути переводите своё видение на язык, который AI должен интерпретировать.

Промпт «add a segmented control with an active state» даст куда лучший результат, чем «тот переключатель вроде табов, где один выбран». AI не угадывает ваши намерения — он следует вашему описанию. Чем точнее язык, тем меньше итераций, меньше переписок и код, который действительно совпадает с вашей картиной в голове.

За пределами очевидного

Некоторые UI-термины удивительно специфичны. «Visual Effect Material» или «Vibrancy» — это тот самый полупрозрачный размытый эффект, который macOS использует по всему интерфейсу. «Easing» или timing functions контролируют ощущение от анимаций — резкие ли движения, пружинистые или плавные. Это не педантичные разграничения; это разница между интерфейсами, которые ощущаются механическими, и теми, которые кажутся живыми.

Другие различия критически важны для accessibility. «Focus Ring» — это не просто визуальный индикатор; это способ навигации для пользователей клавиатуры. Понимание того, что :focus-visible ведёт себя иначе, чем обычный focus indicator, имеет огромное значение при создании инклюзивных приложений.

Прокачиваем словарный запас

Не нужно заучивать все термины из визуального справочника, чтобы улучшить свою работу. Начните с малого. Выберите три элемента, которые вы регулярно путаете — возможно, popovers и dropdowns или tooltips и hover cards. Понимание, когда использовать каждый из них, превращает выбор компонента из гадания в осознанное решение.

Настоящий сдвиг происходит, когда терминология становится частью вашего рабочего языка. Вместо «вот эта штука» вы говорите «resize handle» или «scrim overlay» или «popover container». И внезапно все в комнате понимают, о чём идёт речь.

Итого

Придумывать названия — сложно. Даже великий Мартин Фаулер признавал, что нейминг — одна из самых трудных сторон разработки. UI-элементы не исключение: мы взаимодействуем с ними постоянно, но редко задумываемся об их правильных названиях.

Будь то отладка с разработчиком, промптинг AI-ассистента или попытка загуглить, почему CSS-анимация выглядит не так — знание правильной терминологии открывает доступ к более быстрым решениям и более чёткой коммуникации.

Так что в следующий раз, когда встретите «ту штуку» в интерфейсе, потратьте минуту, чтобы узнать её настоящее имя. Ваше будущее «я» — и все, с кем вы работаете, — скажут вам спасибо.

А если нужен быстрый справочник под рукой? Проект NameThatUI — это удобный визуальный словарь как раз для таких случаев. Добавьте в закладки. Используйте. Ваше общение улучшится практически сразу.