Эффект стекла в интерфейсах: почему дизайнеры снова полюбили глассморфизм

Сначала Apple представила дизайн операционной системы с эффектом стекла. Следом интерфейс обновил Telegram, а ленты Dribbble и Behance заполонили полупрозрачные концепты. Глассморфизм в тренде — и это не первая волна его популярности. Разбираемся, почему тренд на эффект стекла снова актуален, как его встретили пользователи и как внедрять жидкое стекло без вреда для юзабилити.

Что такое глассморфизм

Глассморфизм — это прием в дизайне интерфейсов, который имитирует эффект стекла. На сайтах и в приложениях используются полупрозрачные плашки, панели, кнопки и карточки, которые будто парят в пространстве.

У стиля есть характерные черты:

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

Яркие оттенки и градиенты. Используются в качестве подложек. Усиливают контрастность и эффект прозрачности.

Тонкие обводки. Помогают отделить элементы от фона и выстроить визуальную иерархию.

Мягкие тени и блики. Добавляют глубину и подчеркивают фактуру «стекла».

Эволюция тренда

Глассморфизм появился в 2007 году с выходом Windows Vista. Тогда эффект назывался Aero Glass. Он привнес в систему сине-зеленые градиенты и «стеклянные» детали — например, в окне выбора пользователя при запуске компьютера. Панель управления «Проводника», панель поиска, рамка контекстного меню, системные виджеты и другие элементы интерфейса были полупрозрачными.

Решение оказалось тяжеловесным. Компьютеры того времени не всегда справлялись с такой графикой, поэтому часто подтормаживали.

В 2013 году Apple представила iOS 7. ОС получила минималистичный дизайн с яркими цветами и «стеклянными» элементами. Система размывала фон под прозрачным слоем. Цвет и оттенок панели менялись в зависимости от обоев или контента на экране.

Новый дизайн встретили неоднозначно. Пользователи жаловались, что иконки иногда сливаются с фоном, а из-за прозрачности снижается читаемость текста. В ответ на эти отзывы компания добавила настройку Reduce Transparency — она позволяла отключить эффект матового стекла.

Бум глассморфизма пришелся на начало 2020-х. Стиль активно распространялся на дизайнерских платформах Dribbble и Behance. Его популярность подогрели интерфейсы новых операционных систем: macOS Big Sur и Windows 11. Они активно использовали размытие и прозрачные панели, поэтому визуальный язык стал восприниматься как новый тренд.

На Dribbble по тегу #glassmorphism быстро набралось более 3000 работ, новые кейсы появлялись почти ежедневно. Популярность термина в поиске выросла более чем на 1300%.

На макетах стеклянные элементы выглядели эффектно, но на экранах смартфонов часто оказывались неудобны. Из-за проблем с юзабилити стиль редко использовался в реальных продуктах, а большинство работ оставались красивыми концептами для портфолио. 

Новая глава в истории глассморфизма началась с iOS 26. В основе дизайна ОС — стиль Liquid Glass. Виджеты, меню и элементы управления приобрели эффект «жидкого стекла». Помимо привычных цветных иконок, появился режим All Clear, в котором значки становятся почти полностью прозрачными.

Пока что многие пользователи недовольны обновлением. Они отмечают следующие проблемы: 

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

Вслед за Apple стали обновлять интерфейсы крупные приложения. Самый громкий редизайн случился у Telegram. В мессенджере появились эффекты размытия и преломления света. Нижняя панель навигации, панели клавиатуры и стикеров стали прозрачными. 

Пользователи переменам не обрадовались. Они тут же подняли шумиху в соцсетях и вывели в тренды хештег #дуроввернидизайн. 

Почему «стекло» в интерфейсах — снова в тренде

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

Усталость от минимализма. Интерфейсы с плоским дизайном и минимумом декоративных  элементов стали выглядеть однотипно и терять выразительность. Из-за недостатка объема и упрощенных иконок страдает навигация, а продуктам становится сложнее выделяться. 

Эффект премиальности и технологичности. Многие компании стремятся подчеркнуть статус продукта и инновационность. Полупрозрачные интерфейсы помогают вызвать ассоциации с дорогими устройствами и передовыми решениями.

Ностальгия по прошлому. Дизайнеры и пользователи вспоминают свой 2007 год — время, когда цифровые сервисы активно развивались и удивляли. Оно ассоциируется с первыми яркими впечатлениями от интерфейсов, вызывает теплые эмоции и желание вернуть тот период.

Рост производительности устройств. Раньше сложные визуальные эффекты могли замедлять работу интерфейсов. Сейчас устройства справляются с ними гораздо лучше. Это снимает одно из ключевых ограничений и позволяет использовать глассморфизм без ущерба для скорости.

Новые инструменты. В Figma, например, появился эффект Glass — с ним можно сделать эффект стекла в пару кликов. Дизайнеру больше не нужно настраивать прозрачность, тени и другие параметры вручную или подключать сторонние плагины.

Как эффект стекла применяется в интерфейсах

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

Например, стеклянный эффект хорошо подходит для следующих элементов:

Всплывающие окна и подсказки. Благодаря размытому фону пользователь остается в контексте происходящего на странице, даже когда видит перед собой попап.

Карточки товаров. «Стеклянная» цифровая витрина смотрится воздушно и помогает сфокусировать внимание на продукте или услуге.

Меню и панели навигации. Прозрачные элементы управления не загромождают пространство. Они остаются заметными, но не отвлекают от основного контента. 

Иконки и кнопки. Благодаря объему и бликам выделяются на фоне других элементов. Пользователям проще заметить их и совершить целевое действие.

Советы, как использовать эффект стекла

Чтобы «стекло» не мешало юзабилити и не раздражало пользователей, придерживайтесь этих рекомендаций:

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

Добавляйте обводку. Легкая рамка вокруг «стеклянных» блоков отделяет их от фона и других элементов. Без нее пользователю бывает сложно понять, где заканчивается один блок и начинается другой.

Не перебарщивайте с эффектами. Слишком много бликов, отражений или глубоких теней создает визуальный шум и отвлекает внимание от главного. 

Проработайте темную тему. Светлые «стеклянные» блоки могут казаться неестественными на темном фоне. Адаптация прозрачности, цвета и размытия помогает сохранить читаемость и гармоничный вид интерфейса.

Добавляйте больше воздуха. Если стеклянные объекты будут располагаться слишком плотно, они могут отвлекать от текста и кнопок.