6 принципов функциональной анимации: как сделать правильные переходы

Ник Бабич из агентства RingCentral на Medium рассказал, как правильно делать анимацию в приложениях. мы перевели его статью и предлагаем вам.

Функциональная анимация это та, которая имеет четкую, логическую цель. Она снижает когнитивную нагрузку, подчеркивает изменения и устанавливает более тесный контакт в пространственных отношениях. Но есть и еще одна важная вещь. Анимация вдыхает жизнь в пользовательский интерфейс.

Движения могут сделать поверхности живыми, умножая и деля их, изменяя формы и размеры. Вы должны использовать функциональную анимацию для плавного проведения пользователей по навигационным контекстам, для объяснения изменений в расположении элементов на экране, для утверждения иерархии элементов.

Удачный дизайн движений описывается шестью следующими характеристиками.

1. Отзывчивый

Визуальная обратная связь очень важна в дизайне UI. Она работает из-за естественного желания пользователя получать подтверждение действий. В реальной жизни кнопки, элементы управления и объекты отвечают на наше взаимодействие, и люди ожидают, что так оно и будет работать.

Пользовательский интерфейс должен быстро отвечать на действие пользователя именно в момент действия, показывать связь между новыми данными и элементом или действием, вызвавшими их. Прекрасно ощущать, находясь в приложении, что вы всегда знаете, что происходит.

2. Ассоциативный

Связывайте вновь созданные поверхности или элементы с тем, что их создало. Логика, стоящая за этим, заключается в том, что такая ассоциативная связь поможет пользователю понять только что случившиеся на экране изменения и их причину.

Ниже вы можете видеть два примера меню. В первом меню появляется далеко от точки касания, что ломает связь с ним.

Во втором меню появляется прямо в точке касания. Это привязывает элемент к нему.

Еще один пример – действие кнопки, чей функционал может меняться в зависимости от условий. Кнопки «Play» и «Stop», вероятно, самый распространенный пример такого рода элементов управления. Превращение кнопки проигрывания в кнопку паузы означает, что два этих действия связаны между собой и что нажатие первой приведет к появлению второй. Вы должны анимировать переход между состояниями так, чтобы он выглядел плавным, а не дискретным.

3. Естественный

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

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

4. Указывающий

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

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

Пользователи Mac OS могут видеть функциональную анимацию при свертывании окна. Анимация связывает первое и второе состояние.

Еще один хороший пример – переход parent-to-child, когда пользователь выбирает элемент в списке или карточку для более детального просмотра. Это взаимодействие позволяет пользователю понимать контекст.

5. Быстрый

Когда элемент перемещается между состояниями, движение должно быть достаточно быстрым, чтобы не ждать его, но и достаточно медленным, чтобы понимать переход.

Не делайте медленную анимацию, так как она создает ненужную задержку и может продлить ожидание.

Анимация нескольких элементов может вызвать уже продолжительную задержку.

Делайте так, чтобы пользователю не приходилось ждать завершения анимации.

Делайте переходы короткими, так как пользователь будет видеть их часто. Анимация должна длиться меньше 300 миллисекунд.

6. Ясный

Не делайте в переходах сразу много всего, это может привести к путанице, когда несколько элементов должны двигаться в разных направлениях или даже пересекаться при этом.

Переход должен быть четким, простым и последовательным. Помните, в анимации больше – это меньше. Так что нужно сосредоточиться на тех практических вещах, которые дает анимация пользователю.

Заключение

Прежде всего – анимация не случайна. За каждым действием должна быть цель. Движения ведут к ней, сосредотачиваясь на главном так, чтобы пользователь не потерялся. Неважно, забавное ваше приложение или самое серьезное на свете, использование принципов анимации поможет вам предоставить пользователям четкий, быстрый и последовательный опыт.

Творите с осторожностью. Обращайте внимание на каждую деталь – так вы преуспеете в создании лучшего интерфейса между человеком и компьютером.