Анімація у продуктовому дизайні: типи та приклади використання

Роль анімації в продуктовому дизайні надзвичайно важлива. На думку фахівців Nielsen Norman Group, вона не тільки привертає увагу користувачів і викликає у них позитивні емоції, але й надає продукту сучасного вигляду. Анімація забезпечує чіткий зворотний зв'язок про дії користувачів, завдяки чому інтерфейс стає інтуїтивно зрозумілим.

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

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

Поява та зникнення через зміну непрозорості

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

Користувачам буде легше орієнтуватися в інтерфейсі, якщо під час переходу між екранами елементи поступово зникатимуть або з'являтимуться завдяки змінам у непрозорості. Це можна легко реалізувати, налаштувавши значення непрозорості від 100 до 0 (і навпаки) у будь-якому інструменті проєктування чи прототипування.

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

Анімація забезпечує м'який і плавний перехід (праворуч), що підвищує залучення користувачів і спонукає їх активніше взаємодіяти з меню.

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

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

Ось як змінюються непрозорість та масштаб текстових елементів у цьому випадку:

Плавний перехід досягається завдяки використанню двох заголовків — маленького та великого. З ефектом масштабування (Scale) та поступовою зміною непрозорості (Opacity) перехід між шарами виглядає так, ніби ми бачимо один анімований заголовок, який з'єднує два стани екрану.

Масштабування пожвавлює переходи

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

Ось кілька прикладів масштабування текстових шарів.

Послідовний напрямок руху

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

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

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

Однак, коли справа доходить до перегляду постів, напрямок руху змінюється на протилежний:

Зліва: щоб переглядати пости, потрібно прокручувати сторінку вгору чи вниз.

Справа: оскільки навігація вертикальна, пости переглядаються горизонтально.

Загальний напрямок можна позначити навіть при відкритті меню:

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

Праворуч: пункти меню з'являються зліва, що вказує на горизонтальне переміщення по контенту.

Збалансована швидкість

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

Як стверджують фахівці Nielsen Norman Group, ідеальна швидкість анімації для більшості випадків становить від 100 до 500 мс. Орієнтуйтеся на ці значення і коригуйте їх відповідно до потреб вашого продукту.

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

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

Розставляйте пріоритети, упорядковуйте та групуйте

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

Якби всі елементи з'являлися на екрані одночасно, він здавався б перевантаженим і складним. Саме тому реалізовано каскадний перехід: спочатку з'являються найважливіші елементи (заголовок та графік під ним), а другорядні елементи (текст та картки) з'являються з затримкою.

Перед нами ще один приклад складного переходу. Коли екран відтворення згортається, обкладинка зменшується, а ім'я виконавця та назва треку з'являються із затримкою. Завдяки цьому перехід виглядає максимально плавно. Ось як це працює:

Зліва показано, як трансформується оверлей програвача: ім'я виконавця, назва треку та елементи керування плеєром «з'їжджають» вниз і стають прозорими.

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

Продумайте просторову модель

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

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

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

Як ми вже з'ясували в пункті 3, ці дві програми мають різну навігаційну структуру. Тут показано, як організовані переходи між екранами.

Висновок

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