Велика інструкція з анімації в UX/UI-дизайні
Будь-яку статтю можна зберегти в закладки на сайті, щоб прочитати її пізніше.
Режим читання збільшує текст, прибирає все зайве зі сторінки та дає можливість зосередитися на матеріалі. Тут ви можете вимкнути його в будь-який момент.
Дизайнер компанії SoftServe Тарас Скитський написав інструкцію з використання анімації у UX/UI-дизайні. Vector публікує переклад статті з дозволу автора.
Зараз складно здивувати когось анімацією в інтерфейсах. Переглядаючи статті про анімацію, я бачив лише загальні факти та приклади її використання. Але не знайшов матеріалу, де були б зібрані та детально описані усі правила використання анімації в інтерфейсах. У цій статті я зберу докупи усі правила та принципи для дизайнерів-початківців.
Тривалість та швидкість анімації
Коли елементи змінюють свою форму або розташування, тривалість анімації повинна бути достатньою, щоб користувач помітив зміни. Але водночас не надто довгою, щоб не змушувати його чекати.
Згідно з Material Design Guideline, оптимальна тривалість анімації в інтерфейсах може коливатися від 200 мс до 500 мс. Ці цифри базуються на будові нашого мозку. Анімацію коротше за 100 мс важко помітити, а рух довше однієї секунди наш мозок вважатиме затримкою.
Гайди з Material Design радять обирати для мобільних пристроїв такі анімації, що мають тривалість 200-300 мс, а на планшетах — 400-450 мс. Пояснюється це легко: на великих екранах для переміщення потрібно більше часу. На розумних годинниках краще обрати тривалість у 150-200 мс.
У веб-анімації працюють інші правила. Ми звикли, що сайти у браузері завантажуються миттєво, тому і очікуємо, що всі зміни також будуть миттєвими. Тому тривалість переміщення елементів у веб-інтерфейсах повинна бути меншою — 150-200 мс. У іншому випадку користувач буде вважати, що є якісь проблеми з комп’ютером чи інтернетом. Але правила існують, щоб їх порушувати. Якщо ви використовуєте анімацію творчо або намагаєтесь привернути увагу —тривалість може бути довшою.
Незалежно від платформи, тривалість анімації залежить не лише від пройденої відстані, але і від розміру об’єкту. Маленькі елементи повинні рухатися швидше, тому анімація з великими та складними елементами повинна бути повільнішою. Між двома елементами однакового розміру першим зупиняється той, що пройшов менший шлях.
У разі зіткнення об’єктів, енергія від цього повинна бути розповсюджена між ними згідно з законами фізики. Тому краще знехтувати ефектом пружності. Використовуйте його лише в окремих випадках, коли у цьому є сенс.
Переміщення об’єктів повинно бути чітким, тому не варто використовувати розмиття протягом руху (motion blur). Так, фанати After Effects, не цього разу. Цей ефект важко відтворити навіть на сучасних смартфонах, тому в анімації інтерфейсів він не використовується взагалі.
Елементи списку повинні відтворюватися з невеликою затримкою: наступний йтиме через 20-25 мс після попереднього. Повільніша поява може викликати роздратування.
Пом’якшення (Easing)
Пом’якшення робить рух об’єкту більш природнім. Це один із основних принципів анімації. Він ретельно описаний у книзі «The Illusion of Life: Disney Animation» авторства двох діснеївських аніматорів Оллі Джонстона та Франка Томаса. Щоб анімація не виглядала механічною та штучною, об’єкт має рухатись із певним прискоренням або затримкою. Так само, як речі фізичного світу.
Лінійний рух
Об’єкти, що не зазнають впливу якоїсь фізичної сили, рухаються лінійно. Інакше кажучи, зі сталою швидкістю. І саме тому вони виглядають дуже ненатурально для людського ока.
Всі програми для анімації використовують так звані «криві анімації». Я спробую пояснити, як їх читати і що вони означають. Крива показує, як позиція об’єкта (вісь Y) змінюється протягом одного інтервалу часу (вісь X). Тут рух лінійний, тож об’єкт проходить відстань, що дорівнює проміжку часу.
Лінійний рух можна використовувати лише якщо змінюється колір чи прозорість об’єкта. Загалом, такий рух використовується тоді, коли об’єкт не змінює позицію.
Крива прискорення (Ease-in)
На цій кривій видно, як повільно спочатку позиція об’єкту змінюється. Згодом вона поступово прискорюється.
Цю криву варто використовувати, коли об’єкт вилітає за межі екрана на повній швидкості. Це можуть бути сповіщення системи чи картки інтерфейсу. Але варто пам’ятати, що це стосується лише об’єктів, які полишають межі екрана назавжди і їх ніяк не можна повернути.
Крива анімації допомагає висловити правильний настрій. На прикладі нижче видно, що протяжність руху та дистанція для всіх об’єктів однакові. Але найменші зміни забарвлюють настрій анімації. І звісно, зміна кривої дає можливість рухати об’єкти якнайбільш схожим до реального способом.
Крива сповільнення (Ease-out)
Протилежна до кривої ease-in, крива затримки швидко рухає об’єкт і повільно зменшує швидкість до моменту зупинки. Цей тип кривої краще застосовувати, коли елемент раптово виникає на екрані і заповнює його. Це також стосується різних сповіщень, які вистрибують з-за меж екрану.
Стандартна крива (Ease-in-out)
Ця крива надає об’єкту певної швидкості і повільно зводить її знову до нуля. Такий тип руху застосовується найчастіше у анімації інтерфейсів. Якщо ви сумніваєтесь, яку криву використати у вашій роботі, обирайте стандартну.
Відповідно до Material Design Guideline, краще використовувати асиметричну криву, щоб рух здавався більш реалістичним. Закінчення кривої має бути більш підкреслене, ніж її початок. Так, щоб тривалість прискорення була меншою за тривалість сповільнення. У цьому випадку користувач зверне більше уваги на фінальний рух об’єкта і його кінцеве положення.
Ease-in-out стосується руху об’єкта з однієї частини екрана в іншу. Така анімація уникає помітного та драматичного ефекту.
Той самий тип руху має використовуватися, коли елемент зникає з екрана, але його можна повернути. Це стосується, наприклад, списку навігації.
Із попереднього витікає фундаментальне правило, яким зазвичай нехтують початківці: Початок анімації не рівний закінченню анімації.
Навігаційний список виникає за кривою сповільнення та зникає за стандартною кривою. Крім того, згідно Google Material Design, час виникнення об’єкту має бути довшим, щоб привернути уваги до нього.
Для опису кривих використовується кубічна крива Безьє. Вона кубічна, бо побудована на 4 параметрах. Початок графіку — координата 0;0 (зліва внизу). Кінець — координата 1;1 (справа згори). Вони вже позначені на графіку. Перші два параметри — координати X та Y першої точки. Дві інші – координати X та Y другої точки.
Для полегшення вашої роботи із графіками раджу зазирнути на сайти Easings та Cubic-bezier. На першому є список найбільш вживаних кривих, параметри яких ви можете скопіювати у ваш проект. Другий ресурс дає можливість погратися із різними параметрами кривих і одразу ж подивитися на результат.
Хореографія анімації інтерфейсів
Так само як у балеті, ідея анімації полягає у тому, щоб спрямувати увагу користувача у певному напрямку в момент переходу від одного стану в інший. Є два типи хореографії — взаємодія рівності та підлеглості.
Взаємодія рівності
Такий тип хореографії означає, що поява усіх об’єктів підкорюється одному спільному правилу. Наприклад, коли поява всіх карток сприймається як єдиний потік, що спрямовує увагу користувача в одному напрямку — згори донизу. Якщо не слідувати порядку, увага буде розсіюватися. А поява усіх елементів водночас також виглядатиме погано.
Для вигляду таблиці це стає дещо складнішим. Тут фокус користувача має бути спрямований по діагоналі. Показувати елементи по одному — погана ідея, тому що це зробить анімацію повільною. І увага буде розподілятися зигзагоподібно, а це неправильно.
Взаємодія підкорення
Цей тип означає, що є один центральний об’єкт, а всі інші залежать від нього. Така анімація дає відчуття порядку та привертає більше уваги до основного контенту.
Часто користувачу складно розібратися, на якому об’єкті сконцентруватися, тому його увага розсіюється. Якщо у вас є кілька елементів, які ви хочете оживити, треба чітко визначити послідовність їх руху і анімувати мінімальну кількість об’єктів за раз. Створюйте анімацію тільки для центрального елементу, а решту підкоріть основному. Інакше не буде зрозуміло, за яким об’єктом слідкувати.
Згідно Material Design, коли рухливі об’єкти трансформуються непропорційно, вони мають рухатися дугою, а не по прямій. Це допомагає зробити рух більш природнім. Пропорційний рух — це зміна висоти та ширини елементу шляхом асиметричного збільшення/зменшення.
Рух уздовж лінії використовують коли об’єкт змінює свій розмір пропорційно. Оскільки зробити такий рух набагато легше, правило диспропорційної дуги часто ігнорують.
Руху по кривій можна досягнути двома способами: вертикальний і горизонтальний вихід.
- При вертикальному виході крива починає рухатися горизонтально і закінчується вертикальним рухом.
- При горизонтальному — навпаки: об’єкт починає рух вертикально і закінчує горизонтально.
Якщо шляхи рухливих об’єктів перетинаються, вони не можуть рухатися разом. Об’єкти мають залишати достатньо простору для руху іншої форми, сповільнюючись чи прискорюючись.
Також рухлива форма може трохи піднятися над іншими. Але не розчиняючись і не рухаючись через інші об’єкти.
Висновки
Анімація в інтерфейсі має показувати рухи, які ми знаємо із фізичного світу — тертя, прискорення і так далі. Імітуючи поведінку об’єктів реального світу, ми можемо створити послідовність, яка допомагає користувачам зрозуміти інтерфейс.
Якщо анімація побудована правильно, то вона не нав’язується і не відволікає людей від їх цілей. Але не забувайте, що анімація — це радше мистецтво, ніж наука. Тому найкращий варіант — експериментувати і тестувати свої рішення на живих юзерах.
