Анімація у веб-дизайні: що має знати та вміти веб-дизайнер?

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

Соцмережі, корпоративні сайти, лендинги, програми, ігри та операційні системи - всі вони використовують анімації різної складності. Навіщо? Тому, що сучасному користувачеві подобається динамічний, а не статичний контент. Кожна приємна оку анімація – невелика порція дофаміну. Ледве відчутна, але достатня, щоб сайти та програми з початку двохтисячних сьогодні здавались нам абсолютно «дерев'яними» та непривабливими.

Отже, сьогодні йтиметься про анімації у веб-дизайні. Про їх ключові характеристики, можливості та переваги використання. Буде цікаво!

Ключові характеристики анімації

Анімація у веб дизайні будується на трьох основних характеристиках. Це плавність, властивості та швидкість.

Плавність (easing)

Easing - це значення, яке демонструє, з якою швидкістю видозмінюється елемент за певний часовий проміжок. Цей параметр не можна плутати зі швидкістю анімації. Останній має певну постійну величину, тоді як плавність — мінлива. Уявіть, що ви штовхаєте машину. Спочатку повільно, а потім поступово набираєте швидкість. Це найпростіший спосіб пояснити таку характеристику як плавність.

Характеристика easing дозволяє додати реалізму складнішим анімаціям і зробити їх приємнішими для ока.

Найпопулярніші сценарії використання параметра easing - ease-in та ease-out:

• Ease-in – плавне прискорення. Саме воно використовується при створенні спливаючих банерів на сайтах та додатках. І це хороша практика, тому що миттєва поява банера або будь-якої іншої інформації на екрані може лише відлякати людину та викликати неприємні враження.
• Ease-out – плавне уповільнення. Тобто спочатку анімація швидка, а ближче до завершення сповільнюється і плавно зупиняється. Яскравий приклад використання – стрічка Instagram. Якщо ви свайпнете знизу вгору і відпустіть палець, стрічка прокручуватиметься, поступово плавно зупиняючись, а потім прокрутка зупиниться.

Також є linear-анімація – однаково плавна. І ease in out - плавне прискорення та уповільнення, але з прискоренням "посередині".

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

Властивості

Властивості анімації свідчать, що ми трансформуємо. А трансформувати можна практично що завгодно - колір елемента, його розмір, форму, рівень прозорості та навіть наявність цього елемента на сторінки після спрацювання анімації.

Зверніть увагу! Якщо ви застосовуєте кілька властивостей до анімації, необхідно описувати кожну з них, щоб уникнути плутанини.

Тривалість та швидкість

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

Згідно з гайдлайнами Google Material Design, тривалість анімації для різних пристроїв має бути такою:

• Для смартфонів - 200-300 мілісекунд
• Для планшетів - 400-450 мілісекунд
• Для смарт-годин - 150-200 мілісекунд

Дуже важливо навчитися дотримуватися балансу. Якщо анімація буде дуже швидкою, користувач може її просто не вловити. А якщо занадто повільною, то буде враження, що сайт або додаток «гальмує». Зазвичай прості анімації, такі як лайк або натискання на інтерактивну кнопку швидше. А складні та багаторівневі – більш плавні тривалі.

Хореографія в анімаціях

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

Насправді, хореографія анімації — це тема для окремої великої статті. Але якщо максимально її узагальнити та виділити головне, ми можемо виділити два основні типи хореографії — лінійний (рівноправний) рух та підлегла взаємодія. Про них йтиметься далі.

Лінійний рух

Це досить простий вид анімаційної хореографії. Його суть у тому, що зовнішній вигляд та анімація об'єктів підпорядковуються одному заданому правилу.

Наведемо загальнозрозумілий приклад: соціальні мережі чи месенджери. Наприклад, скроліть стрічку публікацій у Instagram або список чатів у Telegram. Інтерфейс при цьому рухається в чіткій послідовності, весь потік – з однією швидкістю, жодні елементи не вибиваються з нього. А тепер уявіть, що в цей час на екрані, наприклад, із затримкою з'являється рекламний блок, який вантажиться довше за основний контент, та ще й різко зміщує цей контент. Увага розсіюється, користуватися сайтом або програмою стає некомфортно.

Дуже важливо, використовуючи анімації, звертати увагу користувача в одному векторі, не примушуючи його погляд метатися убік.

Підлегла взаємодія

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

І навпаки, якщо у складній анімації не використовувати підлеглу взаємодію, рух виглядатиме хаотичним і навіть неприємним для очей. Непоганий приклад використання підлеглої взаємодії – перетягування піктограм на екрані смартфона. Коли ви перетягуєте значок, інші значки зміщуються щодо нього, тим самим поступаючись місцем.

Як показати анімацію та передати її в роботу

Передача анімації - дуже нетривіальне завдання, яке можна вирішити декількома способами. Ми розглянемо ці способи від більш простого до складнішого.

Анімації у Figma

Figma — зручний хмарний графічний редактор, який підтримує прості анімації. Ви можете відобразити екран початкової та кінцевої точки анімації, створити зв'язок між ними та описати характер анімації. Варіантів багато: миттєва анімація, розчинення, рух назовні або всередину. Крім того, у Figma можна налаштовувати плавність анімації (Easing) та її тривалість.

Ділитись анімацією у Figma простіше простого – достатньо скинути клієнту посилання на ваш прототип. При цьому можна поділитися як усім прототипом, так і окремими елементами, додавши до них при необхідності текстові пояснення та коментарі. Це зручно, але слід пам'ятати, що Figma не працює зі складними анімаціями.

Анімація у After Effects

Якщо анімація у веб-дизайні складна та багаторівнева, в хід вступає After Effects – професійний програмний продукт від Adobe. Тут можна змонтувати та підготувати стильний ролик, у якому будуть продемонстровані анімації будь-якої складності з унікальними авторськими ефектами та переходами. Так, часу доведеться витратити більше, ніж під час роботи з Figma. Але результат того вартий.

До речі, не завжди є потреба демонструвати кожен анімаційний елемент у відео. Нормальна практика, коли у відеодемонстрацію включають лише найпоказовіші та найважливіші фрагменти. Головне — продемонструвати спільну ідею та стилістику.

Якщо ми говоримо про складні анімаційні сценарії, то розумним кроком буде створення розкадровок, де досить наочно і зрозуміло продемонстровано, як взагалі розвиватиметься анімаційний сюжет.

Передача ролика розробникам

Коли веб дизайн анімація буде передаватися розробникам, ви також можете використовувати розкадрування. Для зручності ми рекомендуємо малювати їх у Figma та ділитися посиланням. Але в принципі лише вам вирішувати, як вчинити. Якщо хочете, можете зробити розкадровку від руки та передати особисто до рук.

До речі, розкадрування дуже зручні під час контролю над версткою, щоб на кожному етапі можна було звіритися з первісними кадрами.

Порада! Вам не обов'язково намагатися робити розкадрування максимально деталізованими. Головне — робити їх зрозумілими, давати детальні описи та описувати всі зазначені вище параметри: властивості, плавність та тривалість.

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

Замість висновку

Анімації - невід'ємна частина сучасного Інтернету, це факт. А чим вищі будуть потужності гаджетів і швидкість інтернету, тим складніше та цікавіше стануть анімації. І тим ширшими будуть можливості їх використання.

Ми у Wezom Академії вже зараз приділяємо особливу увагу роботі з анімаціями на курсі "Web-дизайн з нуля до крутого портфоліо". І це лише мала частина всього того, що вивчають наші студенти – майбутні графічні та веб-дизайнери. Якщо вам цікава ця тема та ви хочете спробувати свої сили у веб-дизайні, саме час розпочати!