Популярное
#floating-social-dock•beginner•Тип: interaction
Плавающая панель соцсетей и мессенджеров
Фиксированная вертикальная панель быстрых контактов (Telegram, WhatsApp, Телефон) с эффектом раскрытия лейблов при наведении и аккуратной мобильной адаптацией.
#floating#social#dock#fixed#hover-expand#mobile-sheet#contacts
Инженерный разбор & UX-логика
Плавающая группа кнопок быстрой связи, жестко закреплённая относительно окна браузера (viewport). Остаётся на одном месте при вертикальном скролле страницы.
💡 Почему это работает: Снижает барьер первого касания до 1 клика. Пользователю не нужно искать блок контактов в подвале сайта — кнопка связи всегда в зоне видимости большого пальца или курсора.
Где использовать
- Лендинги услуг и продуктов с высокой конверсией в диалог в мессенджерах (Telegram, WhatsApp)
- Интернет-магазины для оперативной связи с менеджером поддержки
- Корпоративные порталы и визитки агентств
- Личные портфолио AI-инженеров и вайбкодеров
Частые архитектурные ошибки
- Использование z-index без изоляции кликов, из-за чего прозрачный контейнер панели блокирует клики по ссылкам под ней
- Отсутствие aria-label на иконках — скринридеры читают их как безымянные ссылки
- Слишком громоздкий вид на мобильных экранах, перекрывающий основной текст
Готовые рецепты экранов с этим паттерном
РЕЦЕПТ СБОРКИ • saas
Конверсионный экран запуска SaaS-продукта
Сборка экрана первого впечатления: Sticky Blur Header + Асимметричная Bento-сетка ключевых фич + Плавающий док мессенджеров + Единые дизайн-токены.
Открыть Master-промпт рецептаРЕЦЕПТ СБОРКИ • landing
Лендинг услуг AI-инженера и агентства
Проверенная связка для продажи услуг внедрения AI: плавающий контактный док + юридический виджет + конверсионные блоки.
Открыть Master-промпт рецепта