Глассморфизм (glassmorphism) в 2024
Glassmorphism — это тенденция визуального дизайна, набирающая популярность с 2020 года и занимающая видное место в дизайн-системах Apple и Microsoft. Глассморфные элементы выглядят как матовое стекло. Правильное использование этого стиля может помочь дизайнерам эффективно создать визуальную иерархию и глубину. Однако без четкого понимания принципов визуального дизайна - глассморфизм может создать серьезные проблемы.
Из этого можно сделать вывод - эти системы дизайна направлены на создание глубины, сложного фона, чтобы подчеркнуть или сдержать определенные части интерфейса. При работе с материалами мы получаем систему консистентных паттернов.
Структура стиля
- Непрозрачность
- Размытие
- Градиент
- Обводка (границы)
Градиент использует два или более цветов, цветовых оттенков или непрозрачностей цвета и плавно смешивает их. Градиенты можно применять как к заливкам, так и к обводкам элемента. Вы можете добавить обводку с низкой непрозрачностью или градиентом вокруг компонента, чтобы создать иллюзию толщины. К заливке компонента также можно применять градиенты, чтобы имитировать отражение света на реальном стекле.
Стоит учитывать:
- Чем больше размытие фона, тем лучше, особенно для сложных фонов
- Чем ближе объект к нам, тем больше света он притягивает
- Если это возможно, дайте пользователям возможность управлять настройками контрастности или прозрачности. Например, специальные возможности Apple позволяют пользователям уменьшать прозрачность или увеличивать контраст, сводя к минимуму или полностью удаляя размытие гласморфных компонентов. Эти параметры позволяют адаптировать интерфейс для пользователей с плохим зрением.
Вывод
Глассморфизм лучше применять в меру, чтобы создать ощущение объёма.Можно использовать готовые инструменты для проектирования, например, SwiftUI от Apple, чтобы не создавать глассморфные материалы с нуля и избежать возможных проблем.
В противном случае необходимо учитывать, как фоновые элементы влияют на полупрозрачные компоненты, при этом сохраняя визуальную иерархию и доступность интерфейса.