Анімації на сайті: які допомагають, а не бісять

Що таке хороша анімація простими словами

Уяви: ти зайшов у гості, а господар замість «привіт» почав стрибати, світити ліхтариком в обличчя і сипати конфетті. Весело? Секунд пʼять. Потім хочеться додому.

Рівно так працює більшість анімацій на сайтах новачків. Кнопки крутяться. Текст влітає із затримкою. Фон переливається, як новорічна ялинка, до якої підключили забагато гірлянд. Людина прийшла щось дізнатися чи купити - а її силоміць розважають.

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

Навіщо вайбкодеру розбиратися в анімаціях

Ти вайбкодер. Ти не малюєш анімації руками - ти просиш ШІ. І ось пастка. Якщо сам не розумієш, який рух допомагає, а який заважає, ШІ за замовчуванням навалить «вау-ефектів». Їх в інтернеті мільйон, він надивився. Сайт стане гіршим - а ти навіть не зрозумієш чому.

Коли основи лежать у тебе в голові, ти:

• отримуєш сайт, який виглядає дорого, а не як лендинг із 2008-го;
• не відлякуєш людей смиканням і гальмами;
• кажеш ШІ конкретно: «тут анімація потрібна, а тут прибери»;
• не злиш тих, у кого від руху на екрані реально паморочиться голова.

Одне правило закриває 90% питань: рух має або вести погляд, або пояснювати, що відбувається, або зберігати звʼязок між екранами. Жодного з трьох - видаляємо.

Чотири правила правильної анімації інтерфейсу

Це витяг із професійної системи анімацій для сайтів. Правила прості. Саме тому їх і порушують найчастіше.

1. Анімація має щось повідомляти

У хорошого руху завжди є робота. І робіт рівно три:

• Веде погляд. Зʼявилася кнопка «Купити» - мʼяко виїхала, щоб ти її помітив.
• Пояснює стан. Крутиться спінер - «вантажу, зачекай». Галочка підстрибнула - «успіх». Поле здригнулося червоним - «помилка».
• Не губить предмет. Вікно не вискочило нізвідки, а виросло з кнопки, по якій ти клікнув - і мозок розуміє, що це одне й те саме.

Не робить жодного з трьох? Це прикрашання. Прибирай без жалю.

2. Чим швидша анімація, тим краще

Улюблена помилка новачка: «зроблю повільніше, щоб було видно, як красиво». Ні. Людина чекає реакції одразу. Довгий рух мозок читає не як «красиво», а як «гальмує».

3. Рухай прозорість і положення, а не розміри

Тут чиста техніка, але зрозуміти її зобовʼязаний навіть вайбкодер. Браузер легко і плавно рухає дві речі: прозорість Прозорість (opacity) - наскільки елемент видимий: від 0 (невидимий) до 1 (повністю видимий). Міняти її дешево і плавно - браузеру це легко. і зсув і масштаб Зсув і масштаб (transform) - переміщення елемента та зміна розміру на око, без перерахунку всієї сторінки. Браузер робить це дуже дешево. .

А ось міняти реальні розміри - ширину, висоту - або координати «зліва/зверху» важко. Браузер через це перераховує всю сторінку наново, і картинка смикається.

4. Поважай тих, кого заколисує від руху

Це не дрібниця і не «для галочки». У частини людей від руху на екрані реально паморочиться голова і починає нудити - це вестибулярна чутливість. У системі - на телефоні та на компʼютері - у них увімкнене налаштування «зменшити рух».

Хороший сайт це бачить і в такому режимі вимикає різкі польоти, залишаючи тільки мʼяку появу. Професійний інструмент робить це сам, і ШІ так вміє - але тільки якщо ти попросиш. Сам він не здогадається.

Анімація-помічник проти анімації-шкідника

Приклад із життя: лендинг, який бісить

Ти просиш ШІ: «зроби красивий лендинг з анімаціями». Він старається з усіх сил. Кожен заголовок влітає з різних боків. Картинки крутяться під час наведення. Кнопки пульсують. Фон переливається. Список послуг виїжджає по рядку з великою паузою.

Відкриваєш - і через десять секунд усередині щось починає дратувати. Начебто «все рухається, красиво ж». А дратує тому, що:

1. Рух нічого не пояснює - він просто є.
2. Усе надто повільно - кожна поява краде в тебе секунду.
3. Список виїжджає по черзі так довго, що ти встигаєш занудьгувати.
4. На телефоні все смикається, бо анімуються розміри.

А ось як попросив би вайбкодер, який прочитав цей урок:

Зроби анімації для лендингу за правилами хорошого руху, а не заради краси.

Анімуй тільки появу та положення елементів - через прозорість і легкий зсув. Не анімуй ширину і висоту: від цього сайт смикається.
Тримай тривалості короткими: натискання кнопки близько 0.15 секунди, поява блоків близько 0.35 секунди. Нічого довше 0.6 секунди.
Кнопки хай трохи відгукуються на наведення і натискання - трішки, без стрибків.
Блоки мʼяко проявляються під час прокручування, але появу списку роби швидкою, без довгої черги.
Обовʼязково поважай системне налаштування «зменшити рух»: у цьому режимі залиш тільки мʼяке проявлення, без польотів.
Кожна анімація має щось означати: завантаження, успіх, помилку чи перехід. Якщо рух нічого не пояснює - не додавай його.

Чек-лист: де анімація доречна, а де зайва

Не впевнений, чи потрібен тут рух? Прожени по чек-листу:

1. Це реакція на дію? Натискання, наведення, відправлення форми - так, легка анімація доречна.
2. Це зміна стану? Завантаження, успіх, помилка, відкрилося вікно - так, рух допомагає зрозуміти, що сталося.
3. Це перехід між екранами? Вікно росте з кнопки, сторінка плавно змінюється - так, зберігає звʼязок.
4. Це просто «щоб ворушилося»? Мети немає - прибирай.
5. Це триває довше секунди? Майже напевно треба пришвидшити.

Часті помилки новачка в анімаціях

• «Зроби красивіше з анімаціями». Надто розмито - ШІ навалить ефектів. Задавай рамки: що, як швидко, навіщо.
• Повільно «щоб було видно». Довгий рух в очах людини = гальма. Тримай 0.15-0.35 секунди.
• Анімувати розміри. Ширина і висота смикаються. Рухай прозорість і положення.
• Нескінченні анімації без сенсу. Вічне мерехтіння і кружляння розтягують увагу. Анімація має щось означати.
• Список, що виїжджає вічність. Рядки зʼявляються по черзі надто довго - і це бісить. Затримку між ними тримай крихітною.
• Забути про «зменшити рух». Комусь від твоїх польотів реально зле. Завжди проси ШІ це врахувати.
• Анімувати все підряд. Коли рухається кожен елемент, увага не чіпляється ні за що. Менше - краще.