Фрикадельки (Meatballs menu).
Фрикадельки (Meatballs menu) — это кнопка в виде трех маленьких круглых точек (обычно расположены горизонтально), которая открывает список дополнительных действий. Точки напоминают фрикадельки, отсюда и «meatballs». Чаще всего её используют, чтобы спрятать второстепенные или технические команды — по клику открывается список дополнительных действий или опций.
Кстати, тут есть забавный нюанс: по сути, «фрикадельки» делают ровно то же самое, что и кебаб‑меню. Функционально никакой разницы — и там, и там ты прячешь набор действий за иконкой. Разница только в картинке, у кебаба точки стоят вертикально (как кусочки на шампуре), а у фрикаделек — горизонтально.
Ещё момент: выбор между ними часто зависит от платформы, для которой делаешь интерфейс. В Android привычнее видеть кебаб (вертикальные точки) — это часть гайдлайнов Material Design. А в iOS чаще используют именно «фрикадельки». Такой блок из трех точек хорошо ложится в стиль системы. Так что иногда дизайнер даже не выбирает «что лучше», а просто следует правилам платформы.
Что это и для чего нужен
Meatballs menu — это способ спрятать второстепенные действия, чтобы не загромождать интерфейс. Его ставят, когда:
- Нужно держать экран чистым. Основные кнопки (вроде «Сохранить» или «Опубликовать») оставляют на виду, а всё остальное убирают в «фрикадельки».
- Не самые частые действия. Если пользователь нажимает «Экспорт» раз в неделю, нет смысла делать для этого большую кнопку.
- Хочется сгруппировать технические операции. Версионирование, логи, настройки отображения, копирование ID — всё это удобно собрать в одном месте.
По сути, это «ящик с редко используемыми инструментами», не мелькает перед глазами, но всегда под рукой.
Где и когда использовать
Чаще всего «фрикадельки» встречаются в:
- Таблицах и списках. В крайней колонке строки, чтобы дать доступ к действиям по конкретной строке без растягивания таблицы.
- Карточках и блоках контента. На карточке задачи, товара, статьи — чтобы спрятать «Архивировать», «Дублировать», «Скопировать ссылку».
- Админ‑панелях и дашбордах. Где много технических команд и важно не захламить экран.
- Редакционных и продуктовых инструментах. В редакторах макетов, CMS, конструкторах страниц — для действий вроде «Вернуть к предыдущей версии», «Показать метаданные».
- Мобильных приложениях. Когда места мало, а набор действий большой: «фрикадельки» экономят пространство и сохраняют понятную структуру.
Из каких элементов состоит
- Кнопка‑триггер. Кнопка из трех круглых точек. Может быть с фоном или без, с тенью или плоским — зависит от стиля системы.
- Выпадающее меню. Список действий, который появляется при клике (или тапе).
- Пункты меню. Названия команд: «Редактировать», «Удалить», «Экспорт», «Поделиться» и т. д.
- Разделители и группы. Иногда пункты делят на секции (например, «Действия» и «Информация»), чтобы было легче ориентироваться.
- Иконки у пунктов. У команд могут быть маленькие иконки для быстрого распознавания (корзина, стрелка, документ).
Описание работы
Всё довольно просто:
- Пользователь видит кнопку с горизонтальными точками.
- Нажимает на него (или делает долгий тап на мобильном).
- Появляется список действий — обычно рядом с кнопкой, чтобы не перекрывать основной контент.
- Пользователь выбирает нужный пункт — действие выполняется, меню закрывается.
- Иногда после выбора меню остаётся открытым, если дальше нужно выбрать ещё что‑то (редкий кейс).
На мобильных часто добавляют визуальную подсказку: при тапе меню может появляться снизу, чтобы его было удобно нажимать большим пальцем.
Практические советы для дизайнеров
- Не прячьте частые действия. Если «Удалить» или «Редактировать» используют в 70–80 % случаев, лучше вынести их как отдельные кнопки.
- Делайте кнопку заметной, но не кричащей. Триггер должен быть контрастным, но не перебивать основной контент.
- Пишите понятные названия пунктов. «Настройки» — слишком абстрактно, а «Настроить отображение столбцов» — сразу ясно, что произойдёт.
- Группируйте пункты, если их больше 5–7. Разделите на «Действия», «Информация», «Экспорт/Импорт» — так пользователю проще ориентироваться.
- Учитывайте размер области нажатия. На мобильных делайте зону клика не меньше 44×44 px, чтобы по кнопке было удобно попасть пальцем.
- Показывайте состояние. Если действие уже выполнено или недоступно (например, «Экспорт» нельзя сделать для черновика), делайте пункт неактивным или добавляйте подсказку при наведении.
Примеры из реальных интерфейсов
- CRM и трекеры задач. В таблице задач в крайней колонке стоит Meatballs menu: «Дублировать задачу», «Переместить в другой проект», «Показать историю изменений».
- CMS и редакционные панели. На карточке статьи или страницы — «Опубликовать», «Отправить на модерацию», «Копировать ссылку», «Посмотреть статистику».
- Конструкторы и дизайн‑инструменты. В списке слоёв или компонентов: «Заблокировать», «Скрыть», «Экспортировать как PNG».
- Банковские и финансовые приложения. В строке транзакции: «Повторить платёж», «Скачать чек», «Добавить в избранное».
- Маркетплейсы и каталоги. На карточке товара в админке: «Редактировать описание», «Обновить фото», «Снять с публикации».
Частые ошибки
- Прячут самые востребованные действия. Если «Скачать» или «Поделиться» нажимают чаще всего, не надо прятать это в «фрикадельки»: пользователь будет раздражён лишним кликом.
- Слишком длинный список внутри. Если в меню больше 8–10 пунктов, пользователю сложно быстро найти нужное. Лучше вынести главное наружу или разбить на подменю.
- Мелкие точки и маленькая зона клика. На мобильном по крошечным точкам трудно попасть — это повышает количество ошибок.
- Непонятные формулировки. «Опции», «Настройки», «Ещё» — ничего не говорят пользователю. Лучше писать конкретно: «Скопировать ID», «Посмотреть логи», «Вернуть к версии от 12.10».
- Нет обратной связи. Пользователь нажал, а ничего не происходит или непонятно, что случилось. Всегда давайте понятный результат: всплывающее сообщение, изменение статуса, открытие окна.