Анімація інтерфейсів навіщо анімувати, як потрібно і як не потрібно, apptractor

Саша Тихонов. український дизайнер, арт-директор і співзасновник студії Flyphant. в блозі "Дизайн шинок" написав навіщо анімувати інтерфейс, як треба працювати з анімацією і як не треба.

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

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

Навіщо анімувати

до моргання
Під час моргання (просто темрява)
Відразу після моргання

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

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

Навіщо анімувати інтерфейс? Щоб користувач простіше сприймав інформацію і менше напружував мозок.

як анімувати

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

Часто в інтерфейсах зустрічається лінійна анімація (з постійною швидкістю). Природним такі рухи не назвеш.

Але варто елементу (кнопці, екрану, зміни кольору) додати прискорення і уповільнення, то анімація стає набагато природніше.

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

Для Material design є гайдлайни. які наочно пояснюють, як треба анімувати і як не треба. Ці гайдлайни підходять для анімації інтерфейсів будь-якої платформи.

Як анімувати інтерфейс? Без лінійної анімації.

подробиці

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