Принципи анімаційних інтерфейсів користувача: Дісней мертвий

Фотографія передбачалася смертю живопису (ранній дагерреотип)

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

Новий засіб

Коли Пол Деларош близько 1839 року зіткнувся з дагеротипом, він чудово заявив: "З сьогоднішнього дня живопис мертва!"

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

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

Минуло майже сто років, перш ніж фотографи, як Ансель Адамс, Імоген Каннінгем, Едвард Вестон та інші в "Групі f / 64", зробили значне вторгнення у візуальну мову, що виділяє фотографію, а не живопис як унікальний засіб - із власним візуальним мова та принципи, і тим самим вони зробили революцію в галузі фотографії.

Едвард Вестон, Імоген Каннінгем, Ансель Адамс

Дісней вирішив іншу проблему

На щастя, ми стикаємося з такою революцією в анімації інтерфейсу користувача.

У 1981 році Оллі Джонстон та Френк Томас випустили Disney Animation: The Illusion of Life, і представили те, що нині відомо як "12 основних принципів анімації". Ці принципи вирішили проблему створення "реалістичного руху", що виникає при органічних тілах рухатися та реагувати у фізичному просторі (принципи також охоплюють такі речі, як емоційний термін та привабливість персонажа).

Анімація користувальницького інтерфейсу, як частина користувальницького досвіду ледве 20 років і ще перебуває в дитинстві. По мірі появи анімації інтерфейсу користувача єдиними інструментами для опису того, як користувальницький інтерфейс поводиться в часі, були 12 принципів анімації. Так само, як ранні фотографи намагалися зрозуміти фотографію за допомогою правил малювання, дизайнери намагалися зрозуміти анімацію інтерфейсу через правила анімації Діснея.

На поверхні це зрозуміло, оскільки є певна ступінь перекриття. Помітний рух, один із 12 принципів анімації, підсилює почуття «правильності» через рух, що є критичним для досвіду користувача. Без ослаблення, анімація користувальницького інтерфейсу відчуває себе незграбно та дивно.

Повна розбивка очевидна, коли детальніше розглянемо 12 принципів у контексті користувальницького інтерфейсу.

Squash and Stretch надає ваги та гнучкості об’єктам, що є винятком, а не правилом в інтерфейсах користувача.

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

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

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

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

Slow In і Slow Out говорить про те, що об’єктам потрібен час для прискорення та уповільнення. Це надзвичайно актуально, оскільки 100% анімації інтерфейсу повинен використовувати цей принцип. Його зазвичай називають "полегшенням" і є надзвичайно важливим.

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

Вторинна дія корисна і чудово підходить для екранного переходу та налаштування візуальної ієрархії.

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

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

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

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

На закінчення

Тож залишається питання: чому 12 основних принципів анімації точно не описують анімацію інтерфейсу?

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

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

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