Liquid Glass — Apple змінює гру

Blog

Liquid Glass в iOS 26 — нова ера адаптивного дизайну

IOS

Оновлення iOS 26 — це не просто зміна інтерфейсу. Apple запустила повноцінну дизайн-мову нового покоління під назвою Liquid Glass. Вперше з часів iOS 7 компанія повністю переосмислила взаємодію користувача з мобільним UI.

Що таке Liquid Glass?

Liquid Glass — це прозора, багатошарова естетика інтерфейсу, де елементи виглядають як фізичне скло: з глибинами, рефракцією, динамічними реакціями на контекст. Усе рухається, переливається й адаптується до фону, жестів і вмісту.

Це не окремий стиль, а системне рішення — ядро нового UI-підходу, що об’єднує iPhone, iPad, Mac, Watch та VisionOS в єдину візуальну екосистему.

Що оновили в iOS 26?

App Icon
  • Іконки отримали скляну глянцеву фактуру.
  • Панелі управління й сповіщення стали напівпрозорими з ефектом глибини.
  • Текст і елементи змінюють контрастність залежно від фону.
  • На екрані блокування елементи інтерфейсу адаптуються під розташування контенту.
  • Новий Control Center тепер виглядає як прозора матова поверхня.
Control

Apple реалізувала це через оновлений графічний рушій із підтримкою живих ефектів, анімацій та контекстних реакцій у реальному часі.

Як це виглядає?

Як адаптувати Liquid Glass у своїх проєктах?

Для дизайнерів та фронтенд-розробників Liquid Glass відкриває новий UX-підхід, але потребує обережної імплементації.

У Figma: Liquid Glass у Figma
  • Використовуй «background blur» зі зниженою opacity.
  • Працюй з ефектами розмиття: поєднуй background blur, inner shadow та texture.
  • Уникай білого тексту на яскравих фото — перевіряй контрастність у плагінах Able або Stark.

У CSS:

 
.liquid_glass {
  backdrop-filter: blur(8px) saturate(1.2);
  background-color: #ffffff10;
  border: 1px solid #ffffff10;
  box-shadow:
    inset 2px 2px 3px -1px #ffffff70,
    inset -2px -2px 3px -1px #ffffff70,
    inset 0 0 16px #ffffff50,
    0 4px 12px -2px #ffffff40;
}

У TailwindCSS:

<button class="backdrop-blur bg-white/10 border border-white/10 saturate-120 shadow-[inset_2px_2px_3px_-1px_#ffffff70,inset_-2px_-2px_3px_-1px_#ffffff70,inset_0_0_16px_#ffffff50,0_4px_12px_-2px_#ffffff40] rounded-full w-32 h-32 text-white/80 text-4xl">×</button>

See the Pen Tab by Sparklingman (@sparklingman) on CodePen.

CodePen Example →

Чи виправдовує Liquid Glass очікування?

З точки зору дизайну — це прорив. Apple запропонувала не просто глянцевий UI, а живий інтерфейс, що реагує на зміни контенту. Але для частини користувачів виникли проблеми з читабельністю — прозорість не завжди доречна.

На щастя, Apple додала інструменти доступності:

  • Reduce Transparency — затемнює фонові шари.
  • Increase Contrast — додає границі та посилює читабельність.

Чому саме цей напрям?

Apple не перша у цій грі. Але вона перша, хто інтегрував ефект скла як платформну філософію. Це логічне продовження VisionOS, де інтерфейс стає середовищем. Скло, глибина, прозорість — це не про естетику, це про гнучкість взаємодії в епоху просторових інтерфейсів.

Підсумок

З оновленням iOS 26 Apple чітко дала зрозуміти, що майбутнє інтерфейсів — це динаміка, гнучкість і середовище, яке адаптується до користувача. Liquid Glass — це не просто візуальний стиль, а спроба створити інтерфейс, що відчувається фізично: як скло, яке реагує на контекст, жести та глибину. Для дизайнерів це відкриває нові виклики й водночас — інструменти для ще глибшої взаємодії.

Втім, цей прорив вимагає відповідальності: дизайнери повинні враховувати доступність, контрастність і чіткість. У гонитві за wow-ефектом легко втратити користувача. Liquid Glass — це сигнал: UI перестає бути просто інтерфейсом і стає досвідом, який ми створюємо на перетині естетики, функції та етики.

Практика в Figma

Щоби підтримати дизайнерську спільноту, я створив короткий урок, де показую, як зробити ефект Liquid Glass у Figma. Це покрокове відео з реальним прикладом інтерфейсу, де використано розмиття фону, накладення кольору та побудову адаптивного UI-компонента. Якщо хочеш реалізувати цей стиль у власних проєктах — просто переглянь відео нижче.

Поділитися:
Назад