Сьогодні анімацією в інтерфейсах вже нікого і не здивуєш, і не вразиш. Вона показує взаємозв’язки між екранами, пояснює, як користуватись аплікацією, чи просто скеровує увагу користувача. Досліджуючи статті про анімацію, я зрозумів, що всі вони описують надто загальні речі або ж конкретні випадки, але ніде не знаходив ресурсу, на якому були б чітко описані усі правила анімації для розробки інтерфейсів. Тому в даній статті я не напишу нічого нового, просто хочу зібрати усі основні принципи й механіки в одному місці, так щоб іншим дизайнерам не було необхідності шукати додаткову інформацію.
Тривалість й швидкість анімації
Коли елементи змінюють свій стан або розташування, тривалість анімації має бути достатньо повільною, щоб користувач зрозумів, що зміна відбулась, але й достатньо швидкою, щоб не змушувати користувача чекати на неї.
Звертайте увагу на тривалість вашої анімації. Не пришвидшуйте надмірно, але й не давайте користувачу позіхати.
Численні дослідження допомогли встановити оптимальну швидкість для інтерфейсної анімації — від 200 до 500 мс. Вона пов’язана з психологічними властивостями людини. Якщо анімація коротша ніж 100 мс, її неможливо буде сприйняти, — для людини це надто блискавично. Натомість анімація довша за 1 секунду викличе відчуття затримки й може бути нудною для користувача.
Оптимальна тривалість анімації в інтерфейсі
На мобільних пристроях Material Design Guidelines пропонують дизайнерам обмежувати тривалість анімації до 200-300 мс. Якщо ж мова йде про анімацію на планшетах, то тут тривалість повинна бути на 30% довшою, тобто 400-450 мс. Причина проста: оскільки розмір екрану є більшим, то й об’єкти при зміні положення долають довший шлях. Відповідно на носимих пристроях (wearbables) анімація повинна бути коротшою на 30% — від 150 до 200 мс, оскільки шлях для зміни є коротшим через малий розмір екрану.
Розмір мобільних пристроїв визначає тривалість анімації
А от в анімації для вебу діють інші правила. Оскільки ми звикли, що сторінки в браузері відкриваються практично миттєво, то очікуємо, що такими ж будуть й анімовані переходи від одного стану до іншого. Тому їхня тривалість має бути практично вдвічі коротшою, ніж на мобільних пристроях — від 150 до 200 мс. В іншому разі користувач гарантовано подумає, що комп’ютер гальмує або ж в нього проблеми з інтернетом.
Але. Забудьте це правило, якщо використовуєте декоративну анімацію на вашому сайті або ж хочете привернути увагу користувача до певних елементів. У такому випадку анімація таки може тривати довше.
Більший екран = Повільніша анімація? Ні!
Окрім того потрібно пам’ятати, що тривалість анімації потрібно змінювати відповідно до відстані, яку долає об’єкт, а також розмірів об’єкта. І тут немає значення про яку платформу йде мова. Менші елементи або ж анімація, яка містить невеликі зміни, має відбуватись швидше. І навпаки, анімація великих й складних об’єктів виглядає краще, коли відбувається трохи повільніше.
Коли рухаються об’єкти однакового розміру, то першим зупиниться той, який перемістився на меншу відстань.
Якщо ж об’єкти різного розміру, то менші з них повинні рухатись повільніше, оскільки насправді здійснюють більше зміщення в порівнянні з великим об’єктом.
Тривалість анімації залежить від розміру об’єкта та відстані, яку той здолає
Якщо відбувається зіткнення об’єктів, то відповідно до фізичних законів енергія удару має рівномірно розподілитись між об’єктами. Не варто використовувати ефект підстрибування (bounce effect). Це має сенс хіба що у виняткових випадках, коли потрібно привернути додаткову увагу чи підкреслити брендинг.
Ефект підстрибування відволікає увагу користувача
Рух об’єктів має бути чітким, тож не потрібно використовувати ефект розмиття (motion blur). Вибачте, користувачі After Effects, не цього разу. Він взагалі не використовується в інтерфейсній анімації, оскільки його важко відтворити навіть на сучасних мобільних пристроях.
Не використовуйте ефект розмиття в анімації
Однотипний контент (картки з новинами, список мейлів й т.д. ) повинен мати дуже коротку затримку між появою кожного наступного елементу — від 20 до 25 мс. Якщо елементи з’являтимуться повільніше, це може дратувати користувача.
Анімація для однотипного контенту повинна тривати від 20 до 25 мс
Пом’якшення (easing)
Пом’якшення допомагає зобразити рух об’єкта більш природно. Це один з основних принципів анімації і його детально описали в книзі The Illusion of Life: Disney Animation Оллі Джонстон та Франк Томас — одні з провідних аніматорів студії Діснея.
Для того щоб рух не виглядав штучним й механічним, він повинен рухатись з певним прискоренням або сповільненням, як і всі живі об’єкти навколо нас.
Анімація з динамікою виглядає більш природно в порівнянні з лінійною
Лінійний рух
Об’єкти, на які не впливає жодна фізична сила, рухаються лінійно, тобто зі сталою швидкістю. Саме через цей факт вони виглядають штучно для людського ока.
У всіх аплікаціях для роботи з анімацією використовуються криві анімації. Спробую пояснити, як їх потрібно читати й що вони означають. Крива показує, як змінюється положення об’єкта (вісь y) за однакові проміжки часу (вісь х ). У даному випадку зображено лінійний рух, тож за одну одиницю часу об’єкт переміщується на одну й ту ж відстань.
Крива лінійного руху
Лінійний рух можна використовувати у кількох випадках: коли змінюється колір об’єкта та його прозорість, тобто ті стани, коли об’єкт не змінює свого положення.
Ease-in або крива прискорення
У даному випадку на кривій ми бачимо, що спочатку об’єкт долає малу відстань, але поступово зміна положення відбувається швидше, тобто об’єкт рухається з певним прискоренням.
Крива прискорення
Такий тип руху слід використовувати, коли об’єкти на повній швидкості вилітають за межі екрану. Це можуть бути системні нотифікації чи просто картки інтерфейсу. Але варто зазначити, що такий тип кривої потрібно використовувати тільки тоді, коли об’єкти покидають екран назавжди, й ми не можемо їх повторно повернути чи викликати назад.
Крива прискорення «викидає» картку за межі екрану
Крива анімації допомагає задавати правильний настрій. У наступному прикладі тривалість руху і відстань у всіх об’єктів однакові, але змінюючи вигин кривої, можна змінювати емоції і характер анімації.
Зрештою, експериментуючи з кривою, можна максимально уподібнити рух об’єкту до реального світу.
Однакова тривалість і відстань, але різний настрій
Ease-out або крива сповільнення
Це протилежна крива до ease-in, тож спочатку об’єкт долає велику відстань за однаковий проміжок часу, а згодом поступово зменшує її, аж доки цілком не зупиниться.
Крива сповільнення
Даний тип руху варто використовувати, коли елементи з’являються на екрані — на повній швидкості залітають на екран й сповільнюють свій рух до того часу, поки зовсім не зупиняться. Це аналогічно можуть бути різні картки чи об’єкти, які виникають з-поза меж екрану.
Крива сповільнення ефектно виведе на екран картку
Ease-in-out або стандартна крива
Об’єкти, які рухаються згідно з цією кривою, спочатку набирають швидкість, а потім повільно скидають її. Цей тип руху найчастіше використовується в анімації інтерфейсів. Моя порада: якщо сумніваєтесь, який тип руху використовувати у вашій анімації, застосовуйте ease-in-out.
Ease-in-out або стандартна крива
Згідно з рекомендаціями Material Design Guidelines варто використовувати асиметричну криву, вона зробить рух більш природнім й витонченим. Більший акцент варто робити на кінець кривої, ніж на її початок, так щоб об’єкт прискорювався трохи швидше, ніж сповільнював свій рух. Тоді користувач більше звертатиме увагу на кінцевий рух елементу, що дозволить сфокусуватись на новому стані елемента.
Порівняйте рух об’єктів з симетричною та асиметричною стандартною кривою
Ease-in-out використовують, коли елементи рухаються з однієї точки екрану до іншої. У такому випадку анімація не привертає до себе надмірної уваги.
Рух картки на екрані й відповідна асиметрична крива Ease-in-out
Цей тип руху потрібно використовувати, коли елемент зникає поза межі екрану, але користувач може його повернути на попереднє місце в будь-який час. Це, наприклад, стосується бокового меню.
Бокове меню ховається з екрану згідно зі стандартною кривою
Звідси випливає дуже важливе правило, яким нехтує багато дизайнерів-початківців — анімація появи елементів на екрані не дорівнює анімації їхнього зникнення. Щодо випадку з боковим меню — воно з’являється за кривою ease-out, а зникає — за ease-in-out. До того ж за рекомендаціями Google Material Design час появи об’єкта має бути довшим, щоб привернути більше уваги користувача до нового стану об’єкта.
Поява й зникання бокового меню відбувається згідно з ease-out та ease-in-out кривих
Для опису кривих використовуються функція cubic-bezier(). Називається вона кубічною, оскільки будується на чотирьох точках. Перша точка з координатами 0;0 (внизу зліва) й остання — 1;1(зверху справа) — вже визначені на графіку.
Таким чином за допомогою функції cubic-bezier() нам залишається описати всього дві точки на графіку, які задаються чотирма аргументами: перші два — координати x та y першої точки, другі два — координати x та y другої точки.
Для зручної роботи з кривими пропоную використовувати сайти easings.net та cubic-bezier.com. На першому є перелік найпопулярніших кривих, параметри яких ви можете скопіювати в свою програму для прототипування. На другому — можна просто погратись з різними параметрами кривої й побачити, як рухатиметься об’єкт.
Різні типи кривих та їхні значення для функції cubic-bezier()
Хореографія в анімації інтерфейсів
Аналогічно, як і в балетній хореографії — основна ідея полягає в тому, щоб плавно скеровувати увагу користувача при переході з одного стану в інший.
Розділяють два типи хореографії — рівноправну та підпорядковану взаємодію.
Рівноправна взаємодія
Суть цієї хореографії — підпорядкувати появу всіх об’єктів одному певному правилу.
У даному випадку поява всіх карточок сприймається як одна сутність й спрямовує увагу користувача в одному напрямку, а саме зверху вниз. Якщо б ми показали елементи не за порядком, то увага користувача була б розпорошеною. Одночасна поява всіх елементів також виглядала б не дуже добре.
Увагу користувача слід плавно скеровувати в одному напрямку
Якщо ми говоримо про табличний вигляд — то тут ситуація трошки складніша. Увагу користувача потрібно спрямовувати по діагоналі, а не показувати елементи один за одним. Інакше тривалість анімації буде набагато довша й увага користувача буде рухатись зигзагами, а це погано.
Діагональна поява для табличного вигляду
Підпорядкована взаємодія
Підпорядкована взаємодія означає, що у нас є центральний об’єкт, який привертає всю увагу до себе, а всі інші елементи підпорядковуються вже йому. Такий тип анімації дає відчуття порядку й привертає більше уваги до головного контенту.
В іншому випадку користувачу буде важко зрозуміти, за яким об’єктом слідкувати, а його увага буде розпорошеною. Тому якщо у вас є декілька елементів, потрібно чітко визначити послідовність їхньої анімації й одночасно анімовувати якомога менше об’єктів.
Варто анімувати тільки один центральний об’єкт, а всі інші підпорядковувати йому
Згідно з Material Design об’єкти в інтерфейсі, які при русі непропорційно змінюють співвідношення сторін (до прикладу, квадрат перетворюється на прямокутник), повинні рухатись вздовж дуги, а не прямо. Це дозволяє зробити рух більш природним. Також варто пам’ятати, що зміна висоти й ширини об’єкту при збільшенні/зменшенні здійснюється асиметрично, тобто не одночасно.
Об’єкт, який непропорційно змінює свої розміри, має здійснювати рух вздовж дуги
Відповідно рух вздовж прямої застосовується, якщо об’єкт збільшується/зменшується пропорційно. Оскільки зобразити такий рух набагато простіше, то правило «руху вздовж дуги» часто ігнорують. Якщо подивитись на реальні приклади аплікацій, то саме рух вздовж прямої використовують найчастіше.
При пропорційному зміненні розміру, об’єкт має рухатись вздовж прямої
Рух вздовж дуги можна здійснювати двома способами. Перший називається vertical out — горизонтальний рух переходить у вертикальний. Другий — horizontal out — об’єкт починає зміщуватись вертикально, а під кінець переходить у горизонтальний рух.
Спосіб руху об’єкту вздовж кривої повинен співпадати з основною віссю скролінгу інтерфейсу. Наприклад, на наступному прикладі інтерфейс скролиться вверх-вниз, то й відповідно картка розгортається за способом vertical out — рухається спочатку направо, а потім вниз. Зворотній рух відбувається навпаки, тобто картка спочатку піднімається вертикально й закінчує рух горизонтально.
Напрям відкриття/закриття картки має співпадати з віссю скролу інтерфейсу
Якщо під час руху в об’єктів пересікаються траєкторії, то вони не повинні рухатись один крізь інший, а залишати місце для руху іншого об’єкта, сповільнюючись або пришвидшуючись. Як варіант можуть просто відштовхнути інші об’єкти. Чому? Оскільки вважаємо, що всі об’єкти інтерфейсу лежать в одній площині.
Об’єкти не повинні проходити один крізь інший, а залишати місце для руху іншого об’єкта
В іншому разі об’єкт може піднятись над іншими об’єктами, але в жодному разі не пройти чи розчинитись крізь інші об’єкти. А це чому? Оскільки вважаємо, що елементи інтерфейсу взаємодіють відповідно до законів фізики, а жодні тверді не мають таких властивостей.
Об’єкти можуть припідніматись над іншими елементами й тільки тоді здійснювати рух
Висновки
Якщо підсумувати всі вищеописані правила й принципи, то анімація в інтерфейсі повинна відображати рухи, які ми зустрічаємо у навколишньому фізичному світі, — тертя, прискорення тощо. Наслідування поведінки об’єктів з реального світу дозволяє користувачам зрозуміти, що їм очікувати від інтерфейсу.
Правильно виконана анімація є ненав’язливою й особливо не відволікає користувача від його цілей. Якщо ж ні — її потрібно або пом’якшити, або взагалі забрати. Тобто анімація ні в якому разі не повинна сповільнювати користувача або перешкоджати йому виконати завдання.
Але не забувайте, що анімація — це більше мистецтво, ніж наука, тому найкраще просто експериментуйте й тестуйте свої рішення на користувачах.
Оригінал статті за посиланням.