01 / Наблюдение

Эффект не должен спорить с содержимым

Полупрозрачные поверхности помогают отделить меню или плавающую панель от фона. Но если текст постоянно лежит поверх пёстрых градиентов, контраст начинает зависеть от положения декоративных элементов. Это плохо и для чтения, и для предсказуемости интерфейса.

02 / Подход

Практика умеренного использования

Сначала сделайте блок читаемым на сплошном фоне: задайте непрозрачный базовый цвет, достаточный контраст и чёткую границу. Затем добавьте прозрачность там, где она помогает понять слои. Следите за производительностью на бюджетном телефоне: большое количество областей с размытием может быть неоправданной ценой за незначительный декоративный эффект.

Пример

Для закреплённой шапки лёгкая полупрозрачность может быть оправданна; для абзацев статьи обычно лучше обычная поверхность.

03 / Практика

Три пункта для проверки

  1. Отключите blur и убедитесь, что иерархия сохраняется.
  2. Проверьте контраст на светлом и тёмном фоне.
  3. Не накладывайте несколько стеклянных панелей друг на друга.