Liquid Glass: новый тренд или это уже было?
Apple показала бета-версию нового дизайна — Liquid Glass. Выглядит красиво, очень классные микроанимации. Полупрозрачные панели смотрятся стильно, но текст на них плохо читается, в целом с контрастностью и доступностью как будто не очень, но это бета.
Впрочем, сам подход интересный. Вообще стекло давно вдохновляет дизайнеров. Я решила посмотреть, как развивались "стеклянные" интерфейсы — и почему мы снова к ним возвращаемся. Да и вообще, есть ли хоть что-то новое в этом Liquid Glass?
Нулевые
Вообще если говорить про стеклышки и прозрачность, нельзя не вспомнить одну из первых моделей Apple IMac G3. Внешне он кардинально отличался от унылых серых коробок того времени. Если кто смотрел «Тайны Смолвиля» —там у одной из героинь стоял такой вот компьютер — мне он просто космическим казался тогда.
Вот эту пластиково-прозрачную глянцевость Apple переносят и в интерфейсы, и на сайт.
Потом эти леденцовые кнопки появятся много где - ICQ, Winamp, разные сайты.
Эра Vista и мода на прозрачные плашки
Windows Vista вышла в январе 2007 года. В ней использовался графический интерфейс Windows Aero. Заголовки окон, панели сделали полупрозрачными, с лёгким блюром нижележащего контента. И выглядело это круто. За счет блюра и наложения цвета контент в плашках и кнопках хорошо (относительно) читался, а сам эффект выглядел достаточно необычно. Ну и леденцовые кнопки никуда не делись.
Забываем прозрачность: плоский дизайн
Ну а потом пришёл плоский дизайн, прозрачность стала не очень актуальной — больше игрались с цветом, типографикой, формой.Но совсем прозрачность не исчезла. В баннерах, в интерфейсах, в концептах — её всё равно использовали. Ну потому что классно выглядит, что уж.
Вспоминаем прозрачность: глассморфизм
Примерно с 2020 года снова появилась мода на «матовое стекло» — глассморфизм — полупрозрачные элементы, с лёгким размытием, светлой рамкой, имитирующей отсвет на стеклянной кромке. Такие штуки быстро стали популярны на Dribbble и Behance.
Apple тоже это использовали — в macOS Big Sur и iOS 15 появились полупрозрачные меню и панели.
Придумываем стекло заново
Liquid Glass кажется вполне логичным продолжением всей этой прозрачно-стеклянной темы.
Что тут нового?
- Искажение нижележащего изображения по краям плашки. Многие дизайнеры уже попытались повторить, но у Apple искажение именно по краям, и этого в фигме достаточно сложно добиться. В тех примерах, которые я видела — получается искажение по всей поверхности стеклянной плашки. В Figma уже пообещали добавить эффект как у Apple, я лично жду, потому что обожаю разные "стекляшечные" эффекты.
- Микроанимации, имитирующие эффект "жидкого стекла"—плашки плавно перетекают одна в другую при взаимодействии, растягиваются.
- Более реалистичные отсветы на кромках - они "взаимодействуют" с контентом ниже.
Конкретно у Liquid glass пока явные проблемы с контрастностью, но я думаю это поправят. В целом, это логичное и достаточно интересное переосмысление темы стекла)
Если вам интересны такие штуки, у меня есть Telegram-канал «Про дизайн и всякое». Там я пишу короткие заметки про интерфейсы, тренды и просто занимательное по теме.