Размытый полупрозрачный фон под панелями и карточками выглядит современно и хорошо продаётся на этапе показа макета. У приёма есть цена: он бьёт по читаемости, потому что фон под текстом меняется, и по скорости отрисовки, потому что размытие — дорогая операция. Ниже разбираем, где эффект уместен, где от него лучше отказаться и как применять его так, чтобы интерфейс не пострадал.
Где приём работает
- Липкая шапка поверх содержимого. Полупрозрачность показывает, что страница продолжается под ней, и не создаёт ощущения обрыва.
- Панель поверх фотографии — при условии, что под текстом есть затемнение или сплошная подложка.
- Модальное окно. Затемнённая подложка отделяет окно от страницы и не даёт вниманию расползаться.
- Небольшие плашки поверх изображения: цена, статус, метка, срок доставки.
- Панель управления в медиапроигрывателе, где под ней всё равно постоянно меняется картинка.
Общее у этих случаев одно: прозрачность несёт смысл, а не украшает. Она показывает связь слоёв — что находится над чем и что можно увидеть, если убрать верхний элемент.
Где приём мешает
| Случай | Что происходит | Что делать вместо |
|---|---|---|
| Текст поверх пёстрой фотографии | Контраст меняется от кадра к кадру, часть текста нечитаема | Сплошная подложка под текстом |
| Формы и таблицы | Границы полей теряются, ошибиться проще | Непрозрачный фон, читаемость важнее эффекта |
| Длинные тексты | Чтение утомляет, глаз цепляется за фон | Обычный фон, прозрачность только у обрамления |
| Несколько размытых слоёв подряд | Заметно тормозит прокрутка на телефонах | Один слой размытия на экран |
| Уведомления и предупреждения | Важное сообщение теряется на фоне | Плотный цвет и контрастный текст |
| Шапка над каталогом | Названия и цены просвечивают сквозь панель | Плотный фон при прокрутке |
Контраст: как проверять
Главная ошибка — проверять контраст на одном кадре. Если под панелью прокручивается содержимое, фон под текстом меняется постоянно, и оценивать нужно худший случай.
- Найдите самый светлый и самый тёмный участок фона, который может оказаться под текстом.
- Проверьте контраст текста на обоих: он должен проходить норму в каждом.
- Отдельно проверьте мелкий текст и подписи — к ним требования жёстче.
- Не забудьте про иконки и границы полей: к ним тоже применяются требования по контрасту.
- Проверьте оба оформления, если на сайте есть светлая и тёмная темы.
Если пройти проверку не получается, обычно помогает не изменение прозрачности, а сплошная подложка под текстовым блоком: прозрачность остаётся по краям панели, а читаемость сохраняется.
Производительность
Размытие пересчитывается при каждой прокрутке и относится к дорогим операциям отрисовки. На рабочем компьютере разработчика это не заметно, на среднем телефоне прокрутка со стеклянной шапкой нередко начинает дёргаться.
- Ограничивайте площадь размытых элементов: узкая шапка дешевле полноэкранной панели.
- Не держите на экране несколько размытых слоёв одновременно.
- Избегайте размытия у элементов, которые постоянно перерисовываются: анимаций, слайдеров.
- Проверяйте на реальном устройстве среднего класса, а не только в режиме эмуляции.
- Учитывайте системную настройку уменьшенной анимации и упрощайте эффект для тех, кто её включил.
Доступность
Полупрозрачные панели чаще других приёмов создают проблемы людям со слабым зрением и тем, кто пользуется устройством на ярком свету. Экран телефона на солнце теряет контраст, и текст, который в помещении читался, на улице пропадает совсем.
- Проверяйте интерфейс не только в тёмной комнате: вынесите телефон на дневной свет.
- Не используйте прозрачность как единственный признак состояния элемента — недоступная кнопка должна отличаться не только бледностью.
- Оставляйте видимую рамку у полей ввода: на размытом фоне их границы теряются первыми.
- Учитывайте, что часть пользователей увеличивает шрифт системно, и текст на панели станет крупнее, а панель — теснее.
Как объяснить отказ от эффекта заказчику
Спор о прозрачности почти всегда сводится к вкусу, и это тупик. Мы переводим разговор в проверяемые вещи: показываем два варианта одной страницы на телефоне заказчика, даём прокрутить и просим прочитать цену на карточке. Обычно решение принимается за минуту и без аргументов про моду.
Если эффект важен для образа продукта, компромисс находится почти всегда: размытие остаётся в шапке и модальных окнах, а карточки, формы и таблицы получают плотный фон. Ощущение стиля сохраняется, а читаемость не страдает.
Запасной вариант
Поддержка размытия в браузерах широкая, но не полная, а на слабых устройствах браузер может отключить эффект самостоятельно. Поэтому оформление должно оставаться читаемым и без него.
- Задавайте плотный цвет фона как основу, а размытие добавляйте поверх.
- Проверьте, как выглядит панель, если эффект не применился: текст должен читаться.
- Не завязывайте на прозрачность передачу смысла: активный пункт меню не должен отличаться только ей.
Как мы применяем это на проектах
- Решаем, несёт ли прозрачность смысл в конкретном месте, или это украшение.
- Ограничиваем приём одним-двумя элементами на экран.
- Под текстом ставим плотную подложку, прозрачность оставляем по краям.
- Проверяем контраст в худшем случае и в обеих темах оформления.
- Смотрим прокрутку на среднем телефоне и сравниваем с версией без эффекта.
- Если разница в плавности заметна, отказываемся от эффекта: скорость важнее.
Короткий чек-лист перед публикацией
- Текст на панели читается на самом светлом и самом тёмном участке фона.
- На экране не больше одного-двух размытых элементов.
- Прокрутка на среднем телефоне идёт плавно.
- Без поддержки эффекта оформление остаётся корректным.
- Формы, таблицы и уведомления сделаны на плотном фоне.
- Прозрачность нигде не является единственным признаком состояния.
Вывод
Эффект хорош как акцент на одном-двух элементах: он подчёркивает слои и делает интерфейс легче. Как основа оформления он ухудшает читаемость и скорость — то есть ровно те свойства, которые сильнее всего влияют на результат. Решение принимается не по макету на большом мониторе, а по проверке на телефоне и по контрасту в худшем кадре.
Мы начинаем с задач пользователя, а не с визуального приёма, и проверяем решения до вёрстки. Обсудим аудит юзабилити и консалтинг: разберём интерфейс по шагам и покажем, что мешает посетителям.
Мы начинаем с задач пользователя, а не с макета: UX/UI-проектирование помогает не переделывать интерфейс после запуска.
