Вічне прагнення до плинності
У світі, де відео пропонує нам 120 кадрів в секунду, а екрани мають частоту понад 240 Гц, ми як ніколи прагнемо плинності. І це в усіх сферах, тому Інтернет йде туди. Плавний сайт як у завантаженні, так і в самій навігації обов’язково буде набагато приємнішим.
Тож, яка радість, коли з’явилися функції CSS3! Переходи між станами, анімації тощо. Але ми жадібні, тому ми хотіли піти далі з webGL та іншими таємничими прийомами, щоб щось відбулося. Чудово, ми не в Інтернеті для перегляду статичних PDF-файлів. Так ідеально, тут ми готові зробити тверкер всі розділи наших веб-сторінок.
Кожен потроху експериментує, бере в руки нові коди, присвоює принципи більш просунутих анімацій. Це гарно. Як і з багатьма речами, вам доведеться надмірно експериментувати, щоб зрозуміти, що відчувається збалансованим. І це так і сьогодні. Це безперечно (або відкрити дискусію про нашу Twitter), що анімація значно покращує роботу користувачів.
Анімація направляє, інформує, змушує людей чекати, підтримує певні елементи та робить це без блискіток чи інших великих червоних стрілок.
Сублімувати чекаю...
Існує кілька способів очікування, залежно від контексту, але за допомогою завантажувача (ступінь 0) або індикатора прогресу, зміни розміру контейнера для відображення всього вмісту, завантаження і, отже, прогресивного відображення вмісту... ви можете досягти успіху: або супроводжувати або розважати користувача, поки він чекає, або надавати йому інформацію про його очікування.
Анімація степпера, створення ефекту фокусування, який рухається, автоматичний повзунок — це деякі рішення, які можуть керувати користувачем у його подорожі. Або попередньо пережувавши роботу за нього, або супроводжуючи його.
Іноді він також використовується, щоб отримати довіру: деякі компаратори симулують навантаження, щоб відобразити результати, щоб таким чином змусити повірити в складність свого завдання.
Споживайте з помірністю?
У нас також є наведення, яке додано до анімації. Наскільки важливо розуміти, над якими кнопками ви наводите курсор, немає потреби бачити анімацію повернення, яка змушує ваш погляд зупинитися на кнопці, яку ви вже залишили.
Ефекти зовнішнього вигляду модалів, сторінок, карток тощо часто є хорошими прикладами анімацій, які не приносять нічого, крім затримки перед доступом до вмісту.
Людське око (і мозок) сильне, але не зможе зосередитися, якщо на сторінці буде 7 одночасних рухів, або якщо він вважає, що певні анімації є неочікуваними (у сенсі аномалії для цього кадру - це). Якщо око рухається скрізь, користувач не швидко знаходить свою інформацію, а швидко повертається до конкурентів (більше ніяких післяробок, які оплачує ваш стартап).
знайти баланс, це дає сенс
І навпаки, я думаю, що ми також повинні прийняти певні анімації, які можуть здатися безкоштовними.
#1 Ті, які служать «вау-ефектом» (а не млинці)
Але вони стосуються певних типів сайтів, яким потрібно грати на емоціях, щоб захопити користувача (переважно сайти подій, портфоліо). Якщо ваш банк почне віддавати вас додому за допомогою 3D-анімації руху миші, ви можете злякатися.
#2 Ті, які додають емоційний вимір основним анімаціям
Давайте візьмемо приклад, він, безсумнівно, буде більш показовим: оновлення списку, яке запускається при прокручуванні вгору. Незалежно від того, чи це обертається колесо, чи запуск ракети, ви знаєте, що запитувана дія виконана, і що щось відбувається. Робота виконана з точки зору розуміння, але я думаю, що ракета матиме більший ефект, це приємний маленький сюрприз, який може перегукувати ідентичність. Самородок, вишня, я майже закладаю, що ви перезавантажитеся вдруге, щоб переглянути.
Вони здавалися вільними, тому що додана вартість полягає не в тому значенні, яке вони можуть нести (хоча), а в емоціях, які вони приносять.
Анімація має сенс, це не ця «нова» іграшка, яку ми абсолютно хочемо використовувати та тестувати у всіх проектах і ситуаціях. Саме тому ми знаходимо рекомендації щодо анімації матеріал. Представлені анімації прості й підтримують сенс чи значення читання, ієрархію. Це навіть перша категорія їхнього сайту на вкладці анімації: «розуміння руху” (“зрозумілі анімації”).
Тому мати сенс є частиною хорошої практики. Але Google не говорить нам не робити занадто багато. Мені це не здається приводом для зловживань у цьому напрямку. Google також залишається в аспекті користувача і не говорить про емоційний аспект, який можуть принести певні анімації.
ВІДНЯТИ
Здебільшого, анімація повинна доповнювати користувацький досвід, підкреслювати ієрархію, надавати сенс і допомагати в розумінні навігації, не затьмарюючи функціональність. Однак не слід нехтувати емоційним аспектом веб-сайту та його ідентичністю. Важливо також вміти виділятися за допомогою анімації.
Ми будемо йти повільно, як маленький перець, який приходить, щоб оживити ваше нове кулінарне творіння. Це займає трохи, але занадто багато, і це жахливий біль у животі.
- Анімації повинні супроводжувати досвід, підтримувати тему та надавати значення
- Не забувайте про емоційний аспект, який може принести анімація
- Коли їх занадто багато, або коли вони занадто позначені, вони мають перевагу над змістом, над дією. Око відволікається, і це порушує плинність досвіду, порушуючи основні та основні функції.
Жульєн, UI-дизайнер @UX-Republic
