Посібник із принципів Motion Design

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

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

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

Просто запитайте будь-кого, хто вперше використовує анімовані елементи інтерфейсу. Години зусиль дають аматорські результати. Щось таке просте, як карта, що ковзає по екрану, виглядає незграбно. Чому так?

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

Витоки моушн-дизайну

Поєднання моушн дизайну та UX є відносно новим, але його коріння сягає Діснея. Френк Томас і Оллі Джонстон були одними з найцінніших аніматорів Уолта Діснея та ключових учасників таких класичних творів, як Pinnochio, Bambi, and Fantasia. Їхні 12 основних принципів анімації залишаються впливовими на анімаційну графіку для кіно, телебачення та цифрового контенту.

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

Сучасні дизайнери спробували вистроїти міст. Одним із найбільш показових прикладів є 10 принципів моушн дизайну, екранізація Disney експертом з анімації Хорхе Р. Канедо Естрада . Тим не менш, висновки вимагають перекладу, якщо вони мають бути цілісно застосовані до дизайну цифрових продуктів.

10 принципів моушн дизайну
10 принципів моушн дизайну

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

Встановлюючи 12 принципів UX в русі , Вілленскомер:

  • Відрізняє моушн-дизайн від UI анімації

  • Пояснює, як рух сприяє зручності використання

  • Розкриває внутрішню роботу основної рухової поведінки

Motion Design і UX: важливі відмінності

Перш ніж торкнутися принципів моушн-дизайну, важливо висвітлити ключові відмінності, які з’являються в маніфесті Вілленскомера.

Рух — це більше, ніж орнамент

Моушн-дизайн — це не є синонім UI анімації. Це вкрай важливо, оскільки анімація інтерфейсу користувача майже завжди розглядається як косметична думка, що не має жодного відношення до UX (хіба що для додання шарму).Рух — це не прикраса, це поведінка, а поведінка може лише допомогти або завадити взаємодії з користувачем.

Два типи взаємодії: у реальному та нереальному часі

  • Взаємодія в реальному часі забезпечує миттєвий зворотний зв’язок, коли користувачі маніпулюють елементами інтерфейсу користувача на екрані. Іншими словами, поведінка рухів миттєво реагує на введення користувача.

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

(Stan Yakusevich)
(Stan Yakusevich)
(Vitaly Rubtsov)
(Vitaly Rubtsov)

Анімація підтримує зручність використання

  • Очікування: коли користувачі взаємодіють з елементами UI, яку анімацію вони очікують побачити? Моушн відповідає очікуванням чи викликає плутанину?

  • Безперервність: чи забезпечує взаємодія послідовну поведінку рухів протягом усього досвіду користувача?

  • Розповідь: чи пов’язані взаємодії та рухи, які вони викликають, із логічним перебігом подій, який задовольняє наміри користувача?

  • Взаємозв’язок: як просторові, естетичні та ієрархічні атрибути елементів UI пов’язані один з одним і впливають на прийняття рішень користувачами? Як рух впливає на взаємозв’язки елементів?

12 принципів дизайну руху для цифрових продуктів

1. Easing

Easing імітує, як реальні об’єкти прискорюються та сповільнюються з часом. Це стосується всіх елементів інтерфейсу користувача, які демонструють рух.

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

(Saptarshi Prakash)
(Saptarshi Prakash)

2. Offset and Delay

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

Offset та delay створюють ієрархію між елементами UI, які рухаються одночасно і повідомляють, що вони пов’язані, але різні. Повна синхронізаціїя часу, швидкісті і відстані між елементами, яка змінюється в шаховому порядку, призводить до тонкого ефекту «один за одним».

Коли користувачі подорожують між екранами, Offset та delay сигналізують про наявність кількох варіантів взаємодії.

Gapsy Studio
Gapsy Studio

3. Parenting

Parenting зв’язує властивості одного елемента UI з властивостями інших. Коли змінюється властивість у Parenting елементі, зв’язані властивості дочірніх елементів також змінюються. Усі властивості елементів можуть бути пов’язані один з одним.

Наприклад, позиція Parenting елемента може бути прив’язана до масштабу дочірнього елемента. Коли Parenting елемент рухається, дочірній елемент збільшується або зменшується.

Parenting створює зв’язки між елементами інтерфейсу користувача, установлює ієрархію та дозволяє кільком елементам спілкуватися з користувачами одночасно. Ось чому Parenting є найбільш ефективним, коли взаємодія відбувається в реальному часі.

(Ayoub Kada)
(Ayoub Kada)

4. Transformation

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

З точки зору UX, трансформація — це ефективний способіб показати юзерам статус цілі. Це особливо корисно, коли перехід між елементами UI пов’язаний із процесом початку та кінця.

(Aaron Iker)
(Aaron Iker)

5. Value Change (Зміна значення)

Відображення цінності (числові, текстові чи графічні) представлені у великій кількості в цифрових інтерфейсах, які з’являються в різноманітних продуктах — від банківських додатків до персональних календарів і сайтів електронної комерції. Оскільки ці представлення пов’язані з наборами даних, які існують у дійсності, вони можуть змінюватися.

Зміна значення передає динамічну природу подання даних і повідомляє користувачам, що дані є інтерактивними і на них можна певною мірою впливати. Коли значення вводяться без руху, бажання користувачів взаємодіяти з даними зменшується.

(Taras Migulko)
(Taras Migulko)

6. Masking

Masking — це стратегічне виявлення та приховування елементів UI. Змінюючи форму та масштаб периметра елемента, Masking сигналізує про зміну корисності, дозволяючи самому елементу залишатися ідентифікованим. З цієї причини детальні візуальні елементи, такі як фотографії та ілюстрації, є ідеальними кандидатами.

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

(SELECTO)
(SELECTO)

7. Overlay

У двовимірному просторі немає глибини, і елементи інтерфейсу можуть переміщатися лише вздовж осі X та Y. Overlay створює ілюзію розрізнення переднього та заднього планів у двовимірному UI просторі. Імітуючи глибину, Overlay дозволяє приховувати та показувати елементи відповідно до потреб користувача.

Інформаційна ієрархія є важливим фактором під час використання Overlay. Наприклад, перше, що користувачі повинні побачити в програмі для створення нотаток, це список своїх нотаток. Потім Overlay можна використовувати, щоб відкрити додаткові параметри для кожного повідомлення, як-от «Видалити » чи «Архівувати».

(Karan Kapoor)
(Karan Kapoor)

8. Cloning

Cloning — це поведінка руху, коли один елемент інтерфейсу користувача розділяється на інші.

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

(Ariuka)
(Ariuka)

9. Obscuration

Obscuration надає юзерам заклик до взаємодії, водночас показуючи підказку на екрані, за яким потрібно слідувати. Гарні приклади: навігаційні меню, екрани доступу та вікна папок.

(Kyle Abarquez)
(Kyle Abarquez)

10. Parallax

Паралакс відображається, коли два (чи більше) елементи інтерфейсу користувача рухаються одночасно, але з різною швидкістю. І тут знову метою є встановлення ієрархії.

  • Інтерактивні елементи рухаються швидше та з’являються на передньому плані.

  • Неінтерактивні елементи рухаються повільніше та відступають на задній план.

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

(Tubik)
(Tubik)

11. Dimensionality

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

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

(Sang Nguyen)
(Sang Nguyen)

12. Dolly і Zoom

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

  • Dolly: Dolly виникає, коли точка зору користувача стає ближчою до (чи далі від) елемента UI. Уявіть собі людину з камерою, яка підходить до квітки, щоб зробити знімок ближче.

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

(Yanosh)
(Yanosh)
Victor Aldabalde
Victor Aldabalde

Анімація — це спілкування

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

Завантажити курс After Effects

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


🖤Дякую за увагу!

Блог Motion Richy — Створюй інакше!

Поділись своїми ідеями в новій публікації.
Ми чекаємо саме на твій довгочит!
Мам! Я моушн-дизайнер
Мам! Я моушн-дизайнер@motionrichy

6.8KПрочитань
0Автори
30Читачі
На Друкарні з 30 квітня

Більше від автора

  • 10 сайтів безкоштовних ілюстрацій

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

    Теми цього довгочиту:

    Ілюстрації
  • Правило банана в UX/UI дизайні

    «Правило банана» в дизайні UX/UI — це простий, але потужний принцип, який може допомогти переконатися, що веб-сайт або додаток є простими для розуміння та використання.

    Теми цього довгочиту:

    Дизайн
  • Закон читабельності: проектування типографіки

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

    Теми цього довгочиту:

    Ui-ux

Вам також сподобається

Коментарі (0)

Підтримайте автора першим.
Напишіть коментар!

Вам також сподобається