Правила анимации интерфейсов
Один мой друг говорил: “Не люблю анимацию в интерфейсах”. После юзабилити-тестирования оказалось, что он не замечал большую часть анимации в приложениях. Явные анимации привлекали внимание и отвлекали от выполнения задач. Такие анимации и раздражали.
Как делать анимацию в интерфейсе, чтобы не вызвать негатив пользователей 👇
Придерживайтесь паттернов
При дизайне анимации лучшее решение это — придерживаться привычных паттернов.
Пользователям важно, чтобы интерфейс соответствовал ожиданиям. Это ускоряет взаимодействие с программой, ведь так не приходится анализировать каждый новый экран и каждый элемент. Если ожидание и реальность совпадают, то использовать приложение легко, не возникает ментальных конфликтов. Так дизайнеры проектируют интуитивно понятные интерфейсы.
Тоже самое касается и анимации. Не изобретайте велосипед. Ментальная модель пользователей уже содержит понимание какая анимация какому элементу интерфейса соответствует. Отличающаяся, непривычная анимация отвлекает.
К тому же использование привычных паттернов в анимации сделает процесс дизайна и разработки быстрее, так как такие анимации уже поддерживаются в нативных компонентах или готовых библиотеках компонентов.
Продумайте тайминг
Слишком долгая анимация — это популярная ошибка при разработке. Если для выполнения действия приходится ждать пока проиграется анимация, то поздравляю, вы спроектировали неудобный интерфейс! Пользователям нужны быстро отвечающие программы. Незачем добавлять эстетику так, что время на выполнение задачи пользователя увеличится и взаимодействие с интерфейсом будет прерываться на ожидание.
Мое решение из практики — следовать гайдлайнам. У Material Design гайды по анимации интерфейсы с таймингом. Если коротко, стандартная длительность перехода с одного экрана на другой — 300–600 мс, появление всплывающих окон и средних объектов — 250–400 мс, анимаций небольших объектов — 50–200 мс. Скрытие элементов интерфейса с экрана стоит ещё делать короче, чем появление. Не стоит делать анимацию дольше, так как приложение или сайт будет восприниматься слишком медленным.
Используйте нелинейную интерполяцию
Анимация — это способ визуально связать интерфейс с привычным пользователю физическим миром. Дизайнеры создают аналогию механического движения предметов в анимации элементов интерфейса. Вы не увидите мяч, листок с дерева или автомобиль, которые будут перемещаться с постоянной скоростью: они либо ускоряются, либо замедляются.
Поэтому не стоит использовать линейную интерполяцию, потому что это не похоже на “настоящее” движение вокруг. Кажется, что равномерное движение линейной интерполяции — очевидный выбор, но на самом деле оно создает эффект искусственности анимации. Стандартных интерполяций ease-in и ease-out достаточно для задач анимации в интерфейсе. Замедление ease-out используют для появления объектов, а ускорение ease-in для скрытия.
Анализируйте цель анимации
Прежде чем разрабатывать анимацию, подумайте зачем. Проанализируйте цель анимации. Может вы хотите подчеркнуть взаимосвязь экранов, подсказать пользователю жесты или дать обратную связь на взаимодействие. От цели зависят средства и приемы, которые вы будете применять при дизайне.
Анимацию интерфейсов лучше проектировать типичной и не бросающейся в глаза. Но иногда можно осознанно нарушить правила, если это помогает достичь цели. Возможно, вы отойдете от привычных паттернов, чтобы перетянуть взгляд пользователя к конкретному элементу интерфейса. Ведь дизайнер управляет вниманием пользователя, а анимация — это средство.
