Liquid glass: скляні кнопки iOS 26 через промпт агенту

Що таке liquid glass простими словами

Візьми шматочок матового скла і поклади його поверх улюбленої фотографії. Фото за ним видно - але розмито, мʼяко, ніби крізь запотіле вікно. По краю біжить тонкий відблиск. Тицьнув пальцем - скло трохи ожило. Ось це і є liquid glass, «рідке скло» - фірмовий стиль кнопок і панелей з iOS 26.

Кнопка перестає бути пласким прямокутником із заливкою. Вона стає напівпрозорою скляночкою, крізь яку дихає фон. Звучить як дрібниця. А насправді саме це робить інтерфейс таким «дорогим» і «епловським».

Навіщо вайбкодеру розбиратися у склі

Ти вайбкодер - стилі руками не пишеш. То навіщо тобі взагалі знати, з чого зібране скло? А ось навіщо. Якщо знаєш начинку, ти:

• пояснюєш агенту словами - і він робить з першого разу, а не ліпить каламутне незрозуміло що;
• розумієш, чому скло іноді не видно (спойлер: уся справа у фоні) і як це швидко полагодити;
• не перетворюєш сайт на «скляне пекло», де крізь усе все просвічує, а текст читається через раз;
• говориш з дизайнерами однією мовою - liquid glass, frosted, blur це не магія, а конкретні слова.

«Зроби красиві кнопки» і «зроби кнопки в стилі liquid glass: розмиття фону, легка прозорість, відблиск по краю, заокруглення 16» - це різниця між лотереєю і замовленням за меню.

З чого зібране скло: чотири інгредієнти

Apple називає це «динамічний матеріал». Звучить страшно. Насправді - чотири прості шари один на одному. Запамʼятай їх - і зможеш замовляти скло як каву щоранку.

1. Розмиття фону - серце ефекту

Скло починається з розмиття фону Розмиття фону (blur) - ефект, коли все, що розташоване ЗА кнопкою, показується нечітко, розмазано. Саме через це кнопка виглядає як матове скло, а не просто як прозорий квадрат. . Кнопка не зафарбована суцільним кольором - крізь неї видно те, що під нею, тільки в розфокусі. Прибери розмиття - отримаєш прозорий квадратик. Додай - і одразу «матове вікно». Це найважливіший шар, без нього решта безглузда.

2. Прозорість і легкий відтінок

Скло трохи прозоре - інакше фон крізь нього не дихає. І йому можна задати слабкий відтінок Відтінок (tint) - легке підфарбування скла в якийсь колір. Не суцільна заливка, а ніби скло злегка тоноване. Потрібен, щоб виділити важливу кнопку. : скажімо, головну кнопку підфарбувати у фірмовий колір, щоб вона виділялася на тлі звичайних. В iOS для такої кнопки є навіть окремий «посилений» стиль.

3. Відблиск по краю - те, що оживляє

У справжнього скла по кромці завжди біжить світла смужка, відблиск. Без неї скло пласке і мертве. З нею - обʼємне і живе. Здавалося б, дурниця. А різниця величезна.

4. Реакція на натискання

Хороша скляна кнопка відповідає на палець Інтерактивність (interactive) - кнопка реагує на дотик і наведення миші: трохи підсвічується, грає світлом. Робить інтерфейс живим. В iOS це вмикається окремо - не кожне скло має реагувати. : трохи підсвічується, грає світлом під дотиком. Але є нюанс. Цю реакцію дають не всім підряд, а тільки тому, на що реально натискають - кнопкам і перемикачам. Декоративну скляну картку ніхто не торкає, і реакція їй ні до чого.

Кілька скляних кнопок поруч: один контейнер

Ось тут новачки і спотикаються. Одна скляна кнопка - це завиграшки. А коли їх у ряд кілька, наприклад у нижній панелі, зʼявляється правило: клади їх в один спільний контейнер.

Навіщо? Причини дві. Перша - так скляночки гарно зливаються краями, коли стоять близько, як краплі води, що зʼєднуються в одну. Друга - так швидше: намалювати одне спільне скло на пʼять кнопок легше, ніж пʼять окремих. Пʼять скелець нарізно - це і гальма, і каша на екрані.

Чому скло не вийшло: розбір на прикладі

Ти просиш агента: «зроби мені модні скляні кнопки на сайті». Він бадьоро ліпить напівпрозорі блоки. Дивишся на результат - і не розумієш, у чому підступ. Якісь бліді прямокутники, ніякого «вау», текст місцями взагалі не читається.

Що пішло не так:

1. Кнопки стоять на білому фоні - розмивати нічого, скла не видно.
2. Немає відблиску по краю - скло пласке і мертве.
3. Текст темний поверх темного розмитого фото - зливається в кашу.

А тепер дивись, як замовити скло з розумом:

Зроби на лендингу скляні кнопки в стилі iOS liquid glass. Важливо:

Кнопки мають стояти поверх живого фону - велике фото або яскравий градієнт,
щоб крізь скло було що розмивати.
Ефект скла: розмиття фону за кнопкою, легка прозорість,
світлий відблиск по краю, заокруглення кутів 16.
Головну кнопку «Замовити» злегка підфарбуй у фірмовий teal,
щоб вона виділялася серед звичайних.
Кнопки в нижній панелі поклади в один спільний контейнер,
щоб вони гарно зливалися краями і не гальмували.
Перевір читабельність тексту на склі і в світлій, і в темній темі.
Якщо текст зливається з фоном - додай контраст.

Часті помилки зі скляними кнопками

• Скло на білому чи суцільному фоні. Розмивати нічого - ефекту немає. Дай живий фон, і крапка.
• Робити скляним взагалі все. Скло - для кнопок, панелей і карток, а не для кожного блоку і кожної букви.
• Забути про відблиск. Без відблиску по краю скло виглядає пласким і дешевим. Дрібниця, яка вирішує.
• Кілька скелець без контейнера. Гальма і каша. Сусідні скляночки - в один контейнер.
• Забити на читабельність. Красиве скло, на якому не видно текст, - це зламана кнопка. Перевіряй контраст в обох темах.
• Непрозорий фон під склом. За склом глуха заливка - і вся ідея просвічування тихо вмирає.