1. Як анімація з'явилася в веб-дизайні?
2. Поліпшення юзабіліті за допомогою анімації
3. Використання анімації в матеріал-дизайні
4. Поради щодо використання анімації на веб-сайтах

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

Як анімація з'явилася в веб-дизайні?

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

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

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

Поліпшення юзабіліті за допомогою анімації

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

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

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

Сайт Etechevent з анімованими елементами

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

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

Сайт Interactive Apps

Використання анімації в матеріал-дизайні

Анімація в веб-дизайні є надзвичайно корисною річчю, якщо тільки вона не використовується виключно в декоративних цілях. Розробники інтерфейсів тепер часто використовують анімації для поліпшення робочого простору. Навіть Google розуміє важливість наявності рухомих елементів для юзабіліті. Власне, так і з'явився гугловський «Material design». Матеріал-дизайн стає все більш і більш модним. Сьогодні його використовують в різних додатках і в дизайні веб-сайтів. Секрет його популярності криється в підвищеній увазі до того, як буде сприйматися елемент, як рух може розповісти користувачам більше про те, що це за елемент і як його використовувати.

У своєму " Керівництві по матеріал-дизайну »Google стверджує, що рух елементів може повідомити користувачів про те, що об'єкт є легким, важким, гнучким або ж великих / малих. Анімації повинні використовуватися, щоб забезпечувати у користувачів краще розуміння природи об'єктів, а також те, як це може бути і має використовуватися в структурі чого-небудь. «Рух в матеріал-дизайні мають бути відображати подібність з реальною поведінкою фізичних об'єктів без шкоди елегантності, простоті і красі».

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

Поради щодо використання анімації на веб-сайтах

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

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

Сайт The Happy Forecast

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

Переконайтеся, що ваші анімації адаптивні. Адаптивний дизайн веб-сайту життєво необхідний, якщо ви бажаєте досягти успіху. Але, якщо він добре виглядає і працює лише на десктопних системах, ви можете втратити користувачів, що віддають перевагу серфить з мобільних пристроїв. Існує безліч інструментів для створення адаптивних анімацій на кшталт Adobe After Effects або Invision. Також таке можна проробляти в деяких CMS (Webdlow або MotoCMS), частиною яких є можливість створення адаптивних анімованих ефектів. Вони пропонують різні типи анімацій, які можуть бути використані на сайті для поліпшення юзабіліті та дизайну в цілому:

Поява (зліва, справа, зверху, знизу);

• Імітація удару в екран;
• обертання;
• ковзання;
• Спалах і пульсація;
• Зрушення і желеподібний ефект;
• Хитання і ін.

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

Сайт Laerepenger c витонченої анімацією

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

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

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

Наведемо як приклад декілька сайтів, дуже вдало використовують анімаційні ефекти:

Kikk

JD Consulting Company

VN Star

Soane Capital Financial Firm

Nodeplus Digital Agency

Creative Cruise

Pomade Digital Agency

Puca Jewels

Carioca Promo

Ultranoir Website

Mahno Personal

Animated Scenery Vintage Farm