После выхода первой беты iOS 26 о новом дизайне интерфейсов Apple из Жидкого стекла (Liquid Glass) сложилось мнение, которое легко описывают три слова: смело, красиво, нечитаемо.
Я решил разобраться, насколько серьёзно Apple отнеслась к ребрендингу своих ОС.
Дело в том, что со времён iOS 7 компания представила много изменений в интерактивности и структуре систем. Но широко их не обсуждали, новой «эпохой» это не считалось, а сама компания делала акцент на этих небольших нововведениях только в гайдлайнах для разработчиков.
Чтобы разобраться, что вообще из себя представляет это Жидкое стекло, почему пропустили момент с нечитаемостью и возможно ли исправить ситуацию за следующие три месяца, посмотрел ролики сессий WWDC от Apple, интервью с главой ПО в компании Крейгом Федериги и полистал новую документацию .
Оказалось, что Apple создала целую систему визуального языка со своей логикой, а не просто перекрасила кнопки в стеклянные. Вполне вероятно, что этот материал с нами надолго, но есть и хорошие новости: он очень адаптируется.
Разбираемся по порядку.
КРАТКО◦ Почему «стекло» и почему «жидкое»
◦ Как по слоям устроено Жидкое стекло
◦ Кнопки более продуманны, чем кажется
◦ В дизайне будут использовать три варианта стекла
◦ Как интерфейс использует HDR для усиления эффекта
◦ Почему это продолжение идей последних трёх лет
Зачем Apple придумала этот материал. Два свойства, которые меняют всё
Официально Apple называет Liquid Glass новым цифровым мета-материалом.
Он имеет два ключевых свойства:
▪︎ Постоянно преломляет свет и придаёт ему новую форму
▪︎ Сам изменяется и ведёт себя как неплотная жидкость, похожая на воду.
Главная философия тут в том, чтобы интерфейс естественно отзывался на прикосновения и в то же время его легко было адаптировать под огромное разнообразие приложений.
Apple сделала так, что операционные системы не только по-новому выглядят, но и фундаментально по-новому воспринимаются.
> По словам дизайнером, Liquid Glass разработано так, чтобы сделать взаимодействие с приложениями более естественным, погружающим и бесшовным. Для его отображения разработчикам нужно вставить всего пару строк кода и нет необходимости симулировать ничего вручную.
В документации Apple чётко прописала, что новый материал можно использовать только для элементов управления и навигации.
Жидкое стекло нельзя использовать внутри контента, например, в качестве фона, разделитей или подложек для названий. Для этого продолжают предлагать стандартные материалы, которые ранее были основными. Включают размытие, насыщенность и режим наложения.
⚠️ Исключением являются переключатели и слайдеры, которые превращаются из векторных фигур в Жидкое стекло, когда с ними взаимодействуют.
Иначе это нарушит четкую визуальную иерархию между функциональными элементами и содержимом приложения.
Но раз остальные «материалы» остались, зачем тогда нужен новый?
Почему «стекло» и почему «жидкое»
В интервью глава ПО в Apple Крейг Федериги сказал, что стекло в интерфейсе визуально занимает меньше места, чем векторные полупрозрачные и заполненные одним цветом фигуры.
Это в свою очередь, помогает задействовать всю площадь экрана от края до края для отображения контента. Будто интерфейса в принципе нет.
В компании при этом считают, что, парадоксально, использование стеклянных кнопок создают ощущение, будто интерфейс более чёткий, тактильный и заметный по сравнению с плоскими формами и однотонными подложками.
Отмечу по личному ощущению на примере iPadOS 26, что в динамике всё так и есть.
Пока интерфейс или контент под ним движутся, кнопки выглядят как настоящие и их действительно хочется нажать с большим предвкушением.
Но в статике на данный момент есть проблема с читаемостью. Впрочем, ниже объясню, почему исправление этого не будет проблемой.
Для подчёркивания динамичности Liquid Glass компания совместила свойства двух материалов: стекла и воды.
🔍 Стекло имеет свойство линзирования, которое позволяет нам на интуитивном уровне воспринимать объём без дополнительной сознательной обработки.
Линзирование эффективно помогает считывать контекст за счёт того, что деформация, скручивание и искажение света моментально передают положение, движение и форму кнопок.
Это большой шаг вперёд после плоских интерфейсов, объемность которых ограничивалась размытием и тенью и продолжала выглядеть искусственно.
💧 Вода умеет принимать любую нужную форму в свойственной ей лёгкой динамике. Это подходит для быстрой смены кнопок в интерфейсе, который постоянно трансформируется.
Движение жидкости и метаморфозы капель также легко считаются подсознанием и дают простое понимание, какая кнопка из какой вытекает и как вернуться обратно.
Теперь посмотрим, из каких слоёв оно состоит. Это не просто фигура с нарисованным эффектом искажения.
Как по слоям устроено Жидкое стекло
При разработке в Apple заметили, что использование обычного стекла делает текст на его фоне плохо читаемым. Поэтому в компании изобрели многослойность, которая сделала Liquid Glass податливым.
Получилась следующая структура.
▪︎ Контент отображается над всеми кнопками. Им может быть иконка или текст. Иногда этого слоя нет – как в тумблерах настроек.
Так Apple делит Жидкое стекло на компоненты
▪︎ Отражающий является первым слоем жидкого стекла. Отражает свет по бокам и даёт градиентный блик. Даёт хорошее представление о силуэте объекта и хорошо подчёркивает, как теперь освещение реагирует на движение устройства. Те самые острые чёрные и белые края – это тоже он.
▪︎ Диффузный слой иногда добавляется, чтобы рассеять свет и сделать стекло более матовым для лучшей читаемости.
▪︎ Рефракционный слой делает ту самую магию преломления изображения под собой, который и превращают кнопку в «стекло».
Рефракционный слой преломляет изображение под ним
▪︎ Контрастный слой добавляется для создания эффекта концентрации света под кнопкой за счёт рефракции. Изогнутая линза таким же образом делает объект в поле её зрения ярче.
▪︎ Тени делают элементы более очерченными и дают хорошее представление о том, где интерфейс находится и насколько он интерактивен.
Тени меняются чаще всех: если под кнопкой появился текст, тень становится более явной, чтобы создать ощутимое разделение между контентом.
Тени остались и добавляют объёма. Также они стали динамическими и при нажатии, и при смене яркости контента под кнопкой
Причём, тень появляется только под самой плотной частью «стекла», то есть по бокам. Центральная, которая лучше пропускает и меньше искривляет свет, остаётся светлой.
> Для отзывчивости во время прикосновения материал подсвечивается изнутри.
Кнопка концентрирует свет в центре при нажатии
Такая многослойность позволяет автоматически корректировать читаемость кнопок в зависимости от контента под ними.
За счёт заранее продуманной динамической корректировки каждого отдельного свойства Apple легко изменит читаемость текста, которая так не устроила многих после установки первой бета-версии iOS 26.
Кнопки более продуманны, чем кажется
В создании системы учли много деталей.
▪︎ Уход в круглые формы в первую очень обоснован многолетним использованием округлых углов самих устройств.
В 2025 году абсолютно все экраны компьютеров Apple не имеют прямых углов (исключением остаются дисплеи). Поэтому логично, что интерфейс должен органично встраиваться в них.
Форма сама по себе напоминает естественную анатомию пальца, а вместе с линзированием по краям ещё больше кажется дружелюбной для нажатия.
Благодаря новому материалу и округлости интерфейс теперь больше похож на набор подушечек для пальцев, чем на кнопки.
▪︎ Для добавления реализма кнопки не просто затухают или проявляются через непрозрачность. Теперь они наращивают свой вес через постепенное усиление искривление света и линзирование.
Это сохраняет свойства стекла, как если бы его на самом деле подносили ближе к контенту.
▪︎ Элементы постоянно меняют оттенок, динамический диапазон, рассеивание – каждый в своём темпе и интенсивности. Это сохраняет оптическое постоянство несмотря на объективные изменения в характеристиках.
Когда стекло меняется и становится крупнее, чтобы отобразить окна контекстного меню и инструментов, характеристики материала также меняются. Линза начинает отбрасывать более глубокие тени, рассеивание увеличивается, а эффекты преломления и матовости усиливается.
При этом после увеличения стекло больше не меняет цвет и степень рассеивания, поскольку такие перемены будут отвлекать.
Кроме этого, материал делится на три вида под разные сценарии.
В дизайне будут использовать три варианта стекла
Это стекло называется «обычным», Regular. Совсем чуть-чуть матовое, постоянно адаптируется
Окрашенное стекло является вариацией «обычного». Нужно для акцентов и отбрасывает цветную тень
Это стекло называется «чистым», Clear. Используют только при наложении на видео или игры, всегда с подложкой
Компания разработала два основных вида стекла с одним подвидом:
Обычное используется почти во всех элементах. Оно адаптируется под разные условия, как рассказывал выше.
⤷ Окрашенное стекло является вариацией обычного. Для этого меняют цвет только контрастного слоя с сохранением остальных свойств. Используется для акцентных кнопок вроде «Корзина» и «Проверить заказ».
Прозрачное используют только при накладывании на высокодинамичный яркий контент вроде видео обязательно с применением тёмной подложки для читаемости.
Для каждого также разработаны свои правила использования.
Теперь интерфейс глубоко использует HDR
Хотя OLED-экраны с поддержкой HDR используются компанией с 2017 года, а сейчас большинство дисплеев умеет его отображать, в интерфейсе Apple начала использовать его свойства впервые только с появлением Apple Intelligence.
С релизом 26-ых версий ОС дизайнеры расширяют применение расширенного динамического диапазона через световые акценты.
Когда вы нажимаете на кнопку из жидкого стекла, она естественным образом «собирает» преломлённый свет в центре, как это делают настоящие линзы, сведённые вместе.
Чтобы эффект усилить, дисплей локально подсвечивает кнопку ярче, чем это возможно при использовании обычного цветового диапазон SDR – отсюда реализм и больше «жизни» при взаимодействии.
Почти все иконки, получили HDR-блики по краям, даже сторонние
То же касается бликов не только на самих иконках, но и на гранях векторных фигур внутри них.
Если присмотреться, буква «М» в приложении Яндекс Метро теперь тоже переливается более ярким светом, чем весь остальной интерфейс даже при максимальной яркости, хотя разработчики приложения ничего для этого не делали.
Вероятно, именно поэтому в IOS 26 появилась возможность делать снимки экрана с поддержкой HDR в формате HEIF.
Что в итоге. Жидкое стекло прямо продолжает идеи Dynamic Island и Camera Control. А ещё это первая реалистичная симуляция материала в операционных системах
В том же интервью после WWDC 26 Крейг Федериги рассказал, что для точной имитации материала команда дизайнеров создала сотни образцов из разного стекла, через которые затем оценивали оптические свойства разных форм при разных же условиях.
Компания разработала не только адаптивный материал, состоящий из нескольких слоёв, каждый из которых непрерывно меняет свои свойства.
Apple также создала и прописала чёткие правила, где использование Liquid Glass уместно, и что применять его нужно только для самых главных, стоящих на вершине иерархии интерактивных элементов: меню, панель инструментов, контекстное меню, переключатели.
Очевидно, что в новый дизайн вложена не одна сотня миллионов долларов. Сюда вошли:
• Разработка и прописывание кода симулированного материала
• Полировка его ресурсозатратности аккумулятора
• Зарплаты дизайнеров
• Производство стеклянных образцов
• Создание конструктора иконок
• Прописывание документации
• Перевёрстка приложений и другое.
Компания наверняка захочет придерживаться его в ближайшие годы.
В Windows Vista с Aero-дизайном блики и тени были нарисованы вручную, а прозрачность не искажала контент за ней
Тут важно отметить и другое. Liquid Glass сравнивают с Aero в Windows Vista и Aqua, которую Apple сама упоминала. Но 20 лет назад эти дизайны были полностью статичными и нарисованными вручную. Это была обычная картинка с элементами прозрачности, а не сложная система послойной интерпретации динамичного контента.
Liquid Glass является первым настоящим симулированным материалом в операционных системах, который ведёт себя как настоящий в любых условиях и формах.
🕹️/🎞️ Если проводить аналогию.
Новое Жидкое стекло Apple запрограммировано быть интерактивным с сохранением реалистичности как в играх, а не вручную подогнано «выглядеть близко к реальности» в конкретных окнах, как делают CGI-графику под нужные сцены в фильмах.
И всё это с сохранением плавности до 120 кадров в секунду в реальном времени.
Стекло – не единственный тренд, который вводит Apple. Главный дизайнер iOS 7 Джонни Айв наделал шума с 3D-иконками в приложении AirBnb, и похожие появились в новом приложении Apple Games
Сейчас у материала только две проблемы: его динамическое изменение слишком бросается в глаза и читаемость текста и иконок на прозрачных панелях слишком плохая.
Обе уже учтены на фундаментальном уровне и поправляются сменой пары строк кода. Потому есть большая вероятность, что к осени мы всё-таки увидим отполированную и очень красивую версию системы.
Некоторые дизайнеры уже считают, что через несколько версий, году к 2028, эффекты искажения и преломления света сделают менее броскими.
Однако, если мы посмотрим, как выглядел плоский дизайн iOS 7 от Джонни Айва и как за 12 лет он эволюционировал в анимациях и гибкости, в ближайшие 10 лет мы, наоборот, скорее всего будем наблюдать бòльший уход в 3D-интерфейсы.
Тот же Айв сотрудничает с Airbnb и именно он помог создать новый 3D-дизайн новых иконок, которыми уже два месяца восхищаются в 𝕏. Apple кроме нового стекла также сделала несколько иконок в похожем стиле, например, в приложении Apple Games.
Такие изменения будут дальше развивать идею слияния софта и железа в единый опыт, который Apple озвучила на WWDC 25. Но на самом деле начала уже давно – с появлением Dynamic Island в iPhone 14 Pro и Camera Capture в iPhone 16.
(30 голосов, общий рейтинг: 4.90 из 5)
31 комментариев
Форум →