кнопки и действия в интерфейсе
Четыре элемента, которыми юзер что-то делает: кнопка, плавающая кнопка, ссылка и чип. Их постоянно путают между собой, и получается интерфейс, где непонятно, что кликается и что случится после клика. Разбираю анатомию, состояния и границы каждого – это первая статья серии по список элементов интерфейса UI Kit
→ Button (кнопка)
Самый заюзанный элемент интерфейса и самый недооцененный
Кнопка – кликабельный элемент для действий юзера. Собирают ее обычно за пару минут как прямоугольник с текстом, а потом удивляются вопросам от разработки
Из чего состоит
- Текст – короткий лейбл, чаще всего с глаголом действия («Продолжить», «Отправить»), а не эссе на полстраницы
- Иконка – опционально. Тебе не нужно в каждую кнопку пихать иконку, смотри на контекст и общую захламленность интерфейса
- Контейнер – размеры, скругления углов, внутренние отступы. Именно он задает кликабельную зону, а не текст и не иконка
При проектировании контейнера учитывай две вещи: как кнопка соседствует с другими элементами, чтобы не было мискликов, и чем по ней будут попадать – мышкой или пальцем
Визуал и состояния
Визуальный стиль – это форма, фон (fill), обводка (stroke), тени по желанию. А вот состояния – та самая штука, про которую забывают чаще всего
Юзер взаимодействует с интерфейсом, а не смотрит на него. Значит кнопка должна отвечать на действие. Минимальный набор: default (по умолчанию), hovered (при наведении), pressed (при нажатии), focused (переход с клавиатуры), loading (если ответ долгий) и disabled (неактивная)
Какие бывают
Не каждая кнопка главная (вот это поворот). Они различаются по значимости, и семантика названий в разных дизайн-системах своя – ориентируйся на сферу применения, а не на название
- Contained (filled) – для главного действия. Самая заметная кнопка на экране за счет высокого контраста и акцентного цвета
- Outlined (stroked) – для вспомогательных действий. Менее заметная, с обводкой и без фона
- Text (ghost) – для второстепенных действий, которые не требуют акцента, но должны оставаться доступными. Без фона и обводки, визуально похожа на ссылку
Разница между вариантами усиливается, если ты используешь не только брендовый цвет, но и нейтральные – серый, черный, белый – и системные: ошибка, успех, предупреждение
Частая ошибка
Собрать три варианта кнопки в одном состоянии и на этом закончить. Такой компонент не переложить в код без догадок, и в макете он выглядит одинаково живым и в активном, и в заблокированном виде
→ Icon Button и FAB (плавающая кнопка)
Строение у них такое же, как у обычной кнопки, но без текста и со своими особенностями
Icon Button – кнопка, где вместо лейбла только иконка. Экономит место, но требует, чтобы иконка читалась однозначно. Если сомневаешься, поймет ли юзер – добавь тултип или верни текст
FAB (Floating Action Button) – плавающая кнопка для основного или самого частого действия экрана. Лежит поверх всего контента, чаще в правом нижнем углу, обычно круглая с иконкой по центру
Что важно с ней не напутать:
- FAB берет на себя одно действие экрана. Две плавающие кнопки рядом – это уже не приоритет, а выбор
- Она перекрывает контент. Проверь, что под ней не прячется последняя строка списка – для этого внизу обычно оставляют отступ
- Ставь FAB только тогда, когда это правда лучший способ показать главное действие. Иногда обычная кнопка внизу формы работает спокойнее
Частая ошибка – микроскопическая зона клика. Иконка 16×16 не равна кнопке 16×16, кликабельная область должна быть больше того, что видно
→ Link (ссылка)
Элемент древнее пирамид, но вопросики вызывает до сих пор. Ссылка – это тонкий инструмент навигации, который должен быть предсказуемым и не притворяться кнопкой
Что должно быть внутри
- Label (текст) – понятное название того, куда юзер попадет. Текст ссылки передает суть целевой страницы, а не «читать подробнее»
- Icon (опционально) – стрелочка из квадрата, если ссылка ведет на внешний ресурс, или иконка файла, если это скачивание
- Underline (подчеркивание) – главный визуальный маркер. Может быть всегда, может появляться при наведении
Состояния: default, hover (смена цвета или появление подчеркивания), active (момент нажатия), visited (подсказка, что тут ты уже была), focused
Варианты по назначению
- Standalone – самостоятельная ссылка под формой или в футере («Забыла пароль?»). Может быть без подчеркивания, но выделена цветом
- Inline – внутри текста, классика. Обязательно контрастирует с основным текстом, иначе юзер пропустит точку перехода
- Action Link – ссылка, которая выполняет простое действие («Развернуть описание»). Не путать с основной кнопкой
Когда ссылка не подходит
- Вместо главного действия. «Купить», «Зарегистрироваться», «Удалить» – это кнопка. Ссылка воспринимается как перемещение, а не как совершение действия
- Пачкой подряд. Если в абзаце каждое второе слово ссылка, текст превращается в синее месиво, которое невозможно читать
→ Chip (чип, фишка)
Кажется примитивом: обводка, заливка и слово внутри. В нормальном ките это многофункциональный элемент, который помогает юзеру фильтровать, выбирать и раскладывать контент по полочкам
Что должно быть внутри
- Container – оболочка со скруглением, обычно полным
- Label – короткая и емкая подпись. Минимум слов, максимум смысла
- Icon – иконка для быстрого считывания категории
- Remove icon – крестик справа, если чип можно удалить, например в выбранных фильтрах
Состояния: default, hover, focused, selected, disabled. Для чипов-фильтров критично четко подсвечивать «выбрано» – без этого юзер не понимает, что фильтр уже применен
Варианты по размеру
- Small – теги под карточками и плотные облака тегов
- Medium – золотой стандарт для фильтров
- Large – мобильные интерфейсы, где нужно попадать пальцем на лету
Когда чип не подходит
- Вместо кнопки, если это целевое действие вроде «Сохранить». Чипы – вспомогательная навигация
- Для длинного текста. Не влезает в строку – значит нужен другой паттерн, чип не должен превращаться в параграф
→ Кнопка, ссылка или чип: что выбрать?
Все три кликаются, поэтому граница между ними размывается. Я держу в голове один вопрос: «что случится после клика?»
- что-то произойдет в системе – отправится форма, сохранятся данные, удалится запись (кнопка)
- юзер переместится – на другую страницу, в другой раздел, на внешний сайт (ссылка)
- изменится набор – включился фильтр, добавился тег, отвалилась категория (чип)
Дальше вопрос значимости: главное действие экрана – contained-кнопка или FAB, вспомогательное – outlined, совсем фоновое – text-кнопка или ссылка
У всех четырех элементов общая логика: анатомия, набор состояний и понятная граница применения. Если один раз собрать их как компоненты с вариантами на токенах, а не рисовать каждый раз заново, интерфейс становится консистентным (предсказуемым), а правок от разработки заметно меньше
Общий список всех элементов лежит в статье список элементов интерфейса UI Kit, а про переменные я писала в что такое токены в дизайне
На модуле 2. UI Kit я подробно разбираю сборку элементов и их использование в интерфейсе
24.08.2026
от хаоса к системе
если не можешь выбрать модуль, пройди короткий тест