Повне керівництво по правильному використанню анімації у UX

Пропоную вашій увазі переклад дуже крутий статті по анімації інтерфейсу.
The ultimate guide to use of proper animation in UX автора Taras Skytskyi.

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

Тривалість і швидкість анімації

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

Використовуйте правильну тривалість анімації. Не робіть його занадто швидкої і не залишайте користувачеві багато часу на нудьгу

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

Тривалість анімації, яку краще мати в своїх інтерфейси

На мобільних пристроях, Material Design Guidelines також пропонує обмежити тривалість анімації до 200-300 мс. Що стосується планшетів, тривалість повинна бути більше 30% — близько 400-450 мс. Причина проста: розмір екрану більше, тому об’єкти долають більш довгий шлях, коли вони змінюють положення. На гаджетах тривалість повинна бути відповідно на 30% коротше — близько 150-200 мс, тому що на меншому екрані преодолеваемое відстань коротше.

Розмір мобільних пристроїв впливає на тривалість анімації

Веб-анімація відпрацьовує по-іншому. Оскільки ми звикли до майже миттєвого відкриття веб-сторінок в браузері, ми також очікуємо швидкого переходу між різними станами. Таким чином, тривалість веб-переходів повинна тривати приблизно в 2 рази коротше, ніж на мобільних пристроях — від 150 до 200 мс. В інших випадках користувач неминуче думає, що комп’ютер зависає або має проблеми з підключенням до Інтернету.

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

Великий екран комп’ютера = Повільна анімація? Ні за що!

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

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

Маленькі об’єкти в порівнянні з великими об’єктами рухаються повільніше, так як вони роблять великі зміщення.

Тривалість анімації відрізняється в залежності від розміру об’єкта і пройденої відстані

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

Читайте також  Як зменшити розмір фото файлу

Уникайте використання ефекту підстрибування, оскільки він відволікає увагу

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

Не використовуйте ефект розмиття в анімації

Елементи списку (картки новин, списки адрес електронної пошти і т. д.) Повинні мати дуже невелику затримку відображення. Кожна поява нового елемента має тривати від 20 до 25 мс. Більш повільне поява елементів може дратувати користувача.

Анімація для елементів списку повинна тривати 20-25 мс

Пом’якшення

Пом’якшення допомагає зробити рух об’єкта більш природним. Це один з основних принципів анімації, який детально описаний в книзі «Ілюзія життя: Дісней Анімація», написаної двома ключовими аніматорами Діснея — Оллі Джонстоном і Френком Томасом.
Щоб анімація не виглядала механічно і штучно, об’єкт повинен рухатися з деяким прискоренням або уповільненням — точно так само, як всі живі об’єкти у фізичному світі.

Анімація з ослабленням виглядає більш природною порівняно з лінійною

Лінійне рух

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

Всі програми для анімації використовують анімаційні криві. Я спробую пояснити, як їх читати і що вони означають. Крива показує, як змінюється положення об’єкта (вісь y) за одні і ті ж інтервали часу (вісь x). У поточному випадку рух є лінійним, тому об’єкт переміщається на одне і те ж відстань одночасно

Крива лінійного руху.

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

Крива посилення або прискорення

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

Крива прискорення

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

Крива прискорення для викиду карти з екрану.

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

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

Однакова тривалість і відстань, але різні настрої

Крива ослаблення або уповільнення

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

Крива уповільнення

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

Крива гальмування для наочності

Крива посилення і ослаблення або стандартна крива

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

Читайте також  Що не забути, приймаючи макет сайту від дизайнера, або дрібниць не буває

Стандартна крива

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

См. Різницю між симетричною і асиметричною стандартної кривої

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

Переміщення елемента на екрані і відповідна крива асиметрична

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

Панель навігації ховається з екрану з допомогою стандартної кривої

З цих прикладів випливає фундаментальне правило, яким багато новачків нехтують — початкова анімація не дорівнює кінцевій анімації. Як і у випадку з панеллю навігації — вона з’являється з кривою уповільнення і зникає зі стандартної кривої. Крім того, згідно з Google Material Design, час появи об’єкта повинно бути більше, щоб залучити більше уваги.

Зовнішній вигляд і зникнення бічного меню виконується з уповільненням і стандартної кривої відповідно

Для опису кривих використовується функція cubic-bezier(). Вона називається кубічним, тому що заснована на чотирьох точках. Перша точка з координатами 0; 0 (внизу зліва) і остання з координатами 1; 1 (вгорі праворуч) вже визначені на графіку.

Виходячи з цього, нам потрібно описати тільки дві точки на графіку, які даються чотирма аргументами функції cubic-bezier(): перші два є координатами x і y першої точки, а другими є координати x і y другої точки.

Щоб спростити роботу з кривими, я пропоную використовувати сайти easings.net і cub-bezier.com. Перший містить список найбільш часто використовуваних кривих, параметри яких ви можете скопіювати в інструмент прототипування. Другий джерело дає вам можливість грати з різними параметрами кривої і відразу бачити, як об’єкти будуть рухатися.

Різні типи кривих і їх параметри функції

cubic-bezier()

 

Хореографія в інтерфейсах анімації

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

Існує два типи хореографії — рівна і підпорядковане взаємодія.

Рівне взаємодія

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

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

Увагу користувача слід надсилати в одному напрямку

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

Діагональний вигляд табличного відображення елементів

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

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

Читайте також  Проект wideNES — виходимо на межі екрану NES

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

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

Згідно Material Design, коли рухомі об’єкти непропорційно трансформуються, вони повинні рухатися по дузі, а не по прямій. Це допомагає зробити рух більш природним. «Пропорційно» я маю на увазі, що зміна висоти і ширини об’єкта шляхом збільшення / зменшення здійснюється асиметрично, тобто з різною швидкістю (наприклад, квадратний елемент перетворюється в прямокутник).

Рух об’єкта, яке непропорційно змінює його розмір, повинно розташовуватися уздовж дуги

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

Пропорційне зміна розміру виконується по прямій лінії

Рух по кривій може бути досягнуто двома способами: перший називається Вертикальний вихід об’єкта починає рухатися горизонтально і закінчується вертикальним рухом; другий — горизонтальний вихід об’єкта починає рухатися вертикально і закінчується горизонтальним рухом.

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

Напрямок розгортання / згортання об’єкта повинна збігатися з віссю інтерфейсу

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

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

В іншому випадку рухомий об’єкт може піднятися над іншими об’єктами. Але знову не перетинаються з іншими об’єктами. Навіщо? Оскільки ми вважаємо, що елементи інтерфейсу ведуть себе у відповідності з законами фізики, і ніякі тверді об’єкти в реальному світі не здатні це зробити.

Об’єкти можуть підніматися над іншими об’єктами, а потім переміщатися

Висновки

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

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

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

Джерело: The ultimate guide to use of proper animation in UX
Автор: Taras Skytskyi.

Степан Лютий

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

You may also like...

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *