Перейти до вмісту

Спроєктувала дизайн‑систему iOS 26 «Liquid Glass»

Спроєктувала дизайн‑систему iOS 26 «Liquid Glass» та канонічний реєстр компонентів, дотримання якого забезпечували правила лінтингу для запобігання розбіжностям UI.

  • Window, frosted glass, glass
    Фото: MabelAmber / Pixabay
  • Facade, glass facade, building
    Фото: wal_172619 / Pixabay

єдиний перелік компонентів, цілісність якого стереже лінтер

Ситуація. UI без спільної візуальної мови й фіксованого набору компонентів розповзається, і дуже швидко. Кожен новий екран винаходить власні кнопки, бейджі й картки, щоразу трохи інакші, і ці дрібні неузгодженості накопичуються, доки продукт не почне виглядати нецілісним, а будь‑яка зміна не змусить правити п’ять саморобних версій одного й того самого.

Завдання. Дизайн‑система мала бути досить цілісною, щоб виглядати продуманою, і досить захищеною від порушень, щоб не розмитися, щойно в команди завал роботи.

Дія. Візуальну мову й систему компонентів спроєктовано як одне ціле. Мова — це стиль «Liquid Glass» з iOS 26: напівпрозорі панелі з розмиттям фону, багатошарові тіні, трохи заломлення світла, пружинні анімації, — і все це зібрано з утиліт Tailwind. Поверх неї — канонічний набір компонентів, з яких має складатися кожен екран: Card, Label, Button, GlassIconButton, DirectoryGrid та інші. Тримається все це завдяки лінтингу: правила відхиляють саморобний бейдж чи чіп і вказують натомість на канонічний компонент, тож систему підтримує інструментарій, а не те, чи не забуде про неї той, хто сьогодні робить рев’ю. А документацію доповнюють конкретні нотатки від помилки до її виправлення, тож настанова звучить як «ось так неправильно, а ось так правильно», а не як абстрактний принцип.

Результат. UI лишається послідовним і відповідає бренду, а одноразові компоненти, які інакше поширилися б, перехоплюють ще до того, як це станеться. Візуальна узгодженість перестала залежати від дисципліни кожного, і тепер її стереже інструментарій, — а лише така узгодженість і переживає дедлайн.

Одна частина довшого переліку — і він увесь на цьому сайті.

Кожен запис написано однаково: ситуація, завдання, що ми зробили і що змінилося.

Переглянути весь перелік