В этой статье
Scott
Эффект жидкого стекла — это передовой визуальный шейдер, создающий реалистичную преломляющую поверхность в макетах. В среде профессионального проектирования этот инструмент добавляет интерфейсам оптическую глубину и многослойность. В отличие от простых поверхностных заливок, этот эффект физически меняет восприятие фонового контента под объектом. Прием приобрел массовую популярность благодаря дизайн-системам Apple (iOS и iPadOS) и стал ключевым трендом современного продуктового дизайна. В текущей версии онлайн-платформы Pixso данный рендер применяется к фреймам, их компонентам, копиям компонентов (экземплярам) и наборам компонентов, позволяя собирать визуально насыщенные и динамичные интерфейсы.
Что такое эффект жидкого стекла в проектировании интерфейсов?
Жидкое стекло — это растровый шейдер для фреймов, имитирующий физическое преломление света. Инструмент изменяет визуальное восприятие фона под выделенным слоем, создавая реалистичную объемную линзу.
Данный эффект работает не просто как полупрозрачная заливка, а как сложная оптическая среда. Шейдер накладывается поверх объектов фрейма, заставляя нижележащие слои искажаться по законам физики.
Область применения в Pixso: На данный момент движок платформы поддерживает применение эффекта исключительно к следующим элементам:
Фреймам
Компонентам фреймов
Копиям компонентов
Наборам компонентов
Настройка параметров преломления в Pixso
Панель эффектов платформы Pixso содержит восемь базовых параметров жидкого стекла. Они обеспечивают точный контроль преломления, освещения, дисперсии и размытия фона строго внутри контура элемента.
Чтобы найти инструмент, выделите нужный фрейм, перейдите в Панель эффектов, раскройте выпадающий список и выберите «Жидкое стекло». После активации вам станет доступен расширенный стек параметров для тонкой настройки шейдера:
Угол и интенсивность освещения: Определяют вектор падения виртуального источника света на фрейм (смещение блика) и силу светового пятна.
Равномерное освещение: Распределяет свет по всей площади фрейма, формируя однородную яркость бликов по контуру элемента без акцентированных источников.
Преломление: Контролирует коэффициент искажения света на гранях. Чем выше значение, тем сильнее оптическая деформация окружающих графических элементов.
Глубина: Задает визуальную толщину стеклянной линзы. Усиливает краевые эффекты, делая границы фаски более выразительными и объемными.
Хроматическая дисперсия: Генерирует тонкий цветовой сдвиг (расщепление светового спектра) на границах фрейма. Максимально раскрывается в связке с высокими значениями преломления.
Размытие: Регулирует степень размытия фона строго внутри границ фрейма. Повышает читаемость и контрастность стеклянного элемента на сложных, пестрых подложках.
Яркость: Корректирует общую экспозицию эффекта, влияя на глобальное восприятие освещенности линзы.
Насыщенность: Управляет интенсивностью цвета преломленных лучей. Позволяет создавать как кричаще-сочные, так и минималистичные матовые поверхности.
Практическое применение: Как добавить эффект
Для активации жидкого стекла выделите рабочий фрейм в Pixso, перейдите в панель эффектов и задайте шейдер. Обязательно регулируйте глубину и преломление для создания объемного макета.
Жидкое стекло раскрывает свой потенциал именно во взаимодействии с фоном или подложкой.
Выделите фрейм: Подготовьте слой, который станет стеклянным объектом.
Активируйте шейдер: Нажмите плюс в панели эффектов и переключите тип рендера на «Жидкое стекло».
Проверьте искажение: Перемещайте фрейм по холсту над другими элементами, чтобы в реальном времени оценить, как шейдер искажает пиксели бэкграунда.
Выполните калибровку: Так как это фоновый эффект, подбирайте параметры индивидуально для каждого слоя. Критическое правило: параметры Преломление и Глубина работают в жесткой связке. Если одно из значений сведено к нулю, рендер стекла станет визуально незаметным.
Совет для профессионалов: Используйте этот шейдер для воссоздания физических объектов интерфейса (например, выпуклых кнопок, иконок-сфер) или стилизации абстрактных графических ассетов для лендингов.
Ограничения бета-версии: Что важно знать
Сейчас эффект жидкого стекла находится на стадии бета-тестирования. Инструмент работает только с фреймами, у которых все углы скруглены одинаково, не поддерживает векторный экспорт, наложение и режим прототипов.
Команда Pixso активно дорабатывает этот инструмент рендеринга. На текущем этапе внедрения учитывайте следующие технические ограничения:
Привязка к типам слоев: Шейдер рендерится только на слоях типа «Фрейм». Применить его к векторным кривым или текстовым узлам пока нельзя. Поддержка новых сущностей появится в будущих обновлениях.
Ограничение экспорта: Слои с наложенным эффектом жидкого стекла не конвертируются и не экспортируются в формат SVG.
Идентичный радиус скругления: Рендер корректно отрабатывает только на фреймах с одинаковым радиусом всех углов. Разные значения скруглений (независимые углы) временно не поддерживаются.
Отсутствие многослойного пересечения: Если один фрейм с жидким стеклом накладывается поверх другого фрейма с таким же эффектом, фоновое стекло перестает влиять на рендер верхнего слоя (эффекты оптически не суммируются).
Недоступность в режиме прототипирования: На данный момент шейдер не отрисовывается в режиме предварительного просмотра интерактивного прототипа.
