Эффект жидкого стекла в интерфейсах: Руководство по настройке | Pixso

Эффект жидкого стекла — это передовой визуальный шейдер, создающий реалистичную преломляющую поверхность в макетах. В среде профессионального проектирования этот инструмент добавляет интерфейсам оптическую глубину и многослойность. В отличие от простых поверхностных заливок, этот эффект физически меняет восприятие фонового контента под объектом. Прием приобрел массовую популярность благодаря дизайн-системам Apple (iOS и iPadOS) и стал ключевым трендом современного продуктового дизайна. В текущей версии онлайн-платформы Pixso данный рендер применяется к фреймам, их компонентам, копиям компонентов (экземплярам) и наборам компонентов, позволяя собирать визуально насыщенные и динамичные интерфейсы.

Что такое эффект жидкого стекла в проектировании интерфейсов?

Жидкое стекло — это растровый шейдер для фреймов, имитирующий физическое преломление света. Инструмент изменяет визуальное восприятие фона под выделенным слоем, создавая реалистичную объемную линзу.
 

Данный эффект работает не просто как полупрозрачная заливка, а как сложная оптическая среда. Шейдер накладывается поверх объектов фрейма, заставляя нижележащие слои искажаться по законам физики.

Область применения в Pixso: На данный момент движок платформы поддерживает применение эффекта исключительно к следующим элементам:

• Фреймам

• Компонентам фреймов

• Копиям компонентов

• Наборам компонентов

Настройка параметров преломления в Pixso

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

Чтобы найти инструмент, выделите нужный фрейм, перейдите в Панель эффектов, раскройте выпадающий список и выберите «Жидкое стекло». После активации вам станет доступен расширенный стек параметров для тонкой настройки шейдера:

• Угол и интенсивность освещения: Определяет вектор падения виртуального источника света на фрейм (смещение блика) и силу светового пятна.
  

• Равномерное освещение: Распределяет свет по всей площади фрейма, формируя однородную яркость бликов по контуру элемента без акцентированных источников.
  

• Преломление: Контролирует коэффициент искажения света на гранях. Чем выше значение, тем сильнее оптическая деформация окружающих графических элементов.
  

• Глубина: Задает визуальную толщину стеклянной линзы. Усиливает краевые эффекты, делая границы фаски более выразительными и объемными.
  

• Хроматическая дисперсия: Генерирует тонкий цветовой сдвиг (расщепление светового спектра) на границах фрейма. Максимально раскрывается в связке с высокими значениями преломления.
  

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

• Яркость: Корректирует общую экспозицию эффекта, влияя на глобальное восприятие освещенности линзы.
  

• Насыщенность: Управляет интенсивностью цвета преломленных лучей. Позволяет создавать как кричаще-сочные, так и минималистичные матовые поверхности.
  

Практическое применение: Как добавить эффект

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

Жидкое стекло раскрывает свой потенциал именно во взаимодействии с фоном или подложкой.

1. Выделите фрейм: Подготовьте слой, который станет стеклянным объектом.

2. Активируйте шейдер: Нажмите плюс в панели эффектов и переключите тип рендера на «Жидкое стекло».

3. Проверьте искажение: Перемещайте фрейм по холсту над другими элементами, чтобы в реальном времени оценить, как шейдер искажает пиксели бэкграунда.

4. Выполните калибровку: Так как это фоновый эффект, подбирайте параметры индивидуально для каждого слоя. Критическое правило: параметры Преломление и Глубина работают в жесткой связке. Если одно из значений сведено к нулю, рендер стекла станет визуально незаметным.

Совет для профессионалов: Используйте этот шейдер для воссоздания физических объектов интерфейса (например, выпуклых кнопок, иконок-сфер) или стилизации абстрактных графических ассетов для лендингов.

Ограничения бета-версии: Что важно знать

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

Команда Pixso активно дорабатывает этот инструмент рендеринга. На текущем этапе внедрения учитывайте следующие технические ограничения:

• Привязка к типам слоев: Шейдер рендерится только на слоях типа «Фрейм». Применить его к векторным кривым или текстовым узлам пока нельзя. Поддержка новых сущностей появится в будущих обновлениях.
  

• Ограничение экспорта: Слои с наложенным эффектом жидкого стекла не конвертируются и не экспортируются в формат SVG.
  

• Идентичный радиус скругления: Рендер корректно отрабатывает только на фреймах с одинаковым радиусом всех углов. Разные значения скруглений (независимые углы) временно не поддерживаются.
  

• Отсутствие многослойного пересечения: Если один фрейм с жидким стеклом накладывается поверх другого фрейма с таким же эффектом, фоновое стекло перестает влиять на рендер верхнего слоя (эффекты оптически не суммируются).
  

• Недоступность в режиме прототипирования: На данный момент шейдер не отрисовывается в режиме предварительного просмотра интерактивного прототипа.