29 апреля 2020

Как правильно использовать анимацию в дизайне интерфейсов

Пишу об IT и на Python. kungurov.net
Ключевые принципы создания пользовательских интерфейсов для различных платформ. 28 элегантных иллюстраций-сравнений: как нужно делать и как делать нельзя.
Как правильно использовать анимацию в дизайне интерфейсов

В 2020 г. анимация интерфейса – обычное явление. Анимация поясняет взаимодействие между рабочими областями, рассказывает, как пользоваться приложением, и управляет вниманием пользователя. В этой публикации мы рассмотрим основные правила и приемы анимации интерфейса.

1. Продолжительность и скорость анимации

1.1. Как мозг воспринимает анимацию

Когда элементы меняют свое положение (рис. 1), длительность анимации должна быть достаточно медленной: пользователь должен заметить изменение, но не ощутить этот как задержку.

Рис. 1. Используйте правильную продолжительность анимации
Рис. 1. Используйте правильную продолжительность анимации

Исследования показывают, что оптимальная скорость анимации интерфейса (рис. 2) составляет от 200 до 500 мс. Анимация короче 100 мс воспринимается мозгом как мгновенная и пройдет мимо. Все, что дольше 1 секунды, создаёт ощущение замедленности и вызывает скуку.

Рис. 2. Разные длительности анимации интерфейса
Рис. 2. Разные длительности анимации интерфейса

1.2. Длительность анимации на мобильных устройствах

Согласно руководству по материальному дизайну продолжительность анимации для мобильных устройств нужно держать в пределах 200-300 мс (рис. 3). На планшетах на 30% больше – около 400-450 мс: размер экрана больше и объектам требуется преодолеть более длинный путь. На небольших устройствах, таких как смарт-часы, длительность должна быть на 30% меньше – в пределах 150-200 мс.

Рис. 3. Размер экрана влияет на продолжительность анимации
Рис. 3. Размер экрана влияет на продолжительность анимации

1.3. Длительность анимации на десктопах

Веб-анимация на десктопах работает по другим правилам. Так как страницы на десктопах открываются почти мгновенно, длительность анимации по сравнению с мобильными устройствами должна быть короче в 2 раза – между 150 и 200 мс (рис. 4). В случае низкой скорости пользователь может подумать, что компьютер завис или у него возникли проблемы с подключением к интернету.

Рис. 4. Большой экран – быстрая анимация
Рис. 4. Большой экран – быстрая анимация

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

1.4. Влияние размера объекта на его скорость

Продолжительность анимации должна зависеть от размера объекта: маленькие объекты при небольших изменениях должны двигаться быстрее (рис. 5). Большие и многосоставные объекты выглядят реалистичнее, когда анимация длится подольше.

Рис. 5. Влияние размера объекта на скорость анимации
Рис. 5. Влияние размера объекта на скорость анимации

1.5. Закон сохранения энергии

При перемещении/столкновении объектов «кинетическая энергия» объектов должна меняться по физическим законам (рис. 6). Поэтому лучше исключить эффект отскока без потери энергии и замедления движения.

Рис. 6. Резкая анимация (справа) отвлекает внимание
Рис. 6. Резкая анимация (справа) отвлекает внимание

1.6. Эффект размытия

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

Рис. 7. Анимация с эффектом размытия (внизу) и без него (наверху)
Рис. 7. Анимация с эффектом размытия (внизу) и без него (наверху)

1.7. Анимация списков

Элементы списка, например, новостные карточки, должны появляться быстро – от 20 до 25 мс. (рис. 8). В противном случае у пользователя возникнет раздражение.

Рис. 8. Анимация списков должна длиться от 20 до 25 мс
Рис. 8. Анимация списков должна длиться от 20 до 25 мс

2. Ускорение

Чтобы анимация выглядела реалистичной, объект должен двигаться с ускорением или замедлением, как в реальном мире (рис. 9). Это один из принципов анимации, который подробно описан в книге «Иллюзия жизни: анимация Диснея», написанной двумя диснеевскими мультипликаторами – Олли Джонстоном и Томасом Фрэнком.

Рис. 9. Плавная анимация (наверху) выглядит живее
Рис. 9. Плавная анимация (наверху) выглядит живее

2.1. Равномерное движение

Объекты, не подверженные воздействию замедляющей или ускоряющей силы, движутся равномерно, то есть с постоянной скоростью. Такую анимацию называют линейной (linear).

В анимации применяются кривые, отображающие как положение объекта (ось y) изменяется в течение времени (ось x). На рис. 10 приведен пример равномерного движения, во время которого объект проходит одно и то же расстояние за одинаковый промежуток времени. Из-за этого он выглядит искусственно.

Рис. 10. Пример линейного движения в анимации
Рис. 10. Пример линейного движения в анимации

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

2.2. Анимация с ускорением

Анимация с ускорением (ease-in) начинается на низкой скорости, а завершается на высокой. На рис. 11 видно, что автомобиль постепенно увеличивает скорость, то есть движется с ускорением.

Рис. 11. Пример анимации с ускорением (<code class="inline-code">ease-in</code>)
Рис. 11. Пример анимации с ускорением (ease-in)

Такую анимацию используют, когда объекты покидают экран навсегда, например, при смахивании системных уведомлений (рис. 12).

Рис. 12. Пример анимации системного уведомления
Рис. 12. Пример анимации системного уведомления

Даже небольшое изменение скорости (рис. 13) делает объекты более реалистичными и дает возможность влиять на настроение пользователя.

Рис. 13. Разная длительность анимации способна влиять на настроение пользователя
Рис. 13. Разная длительность анимации способна влиять на настроение пользователя

2.3. Анимация с замедлением

В анимации с замедлением (ease-out), объект в начале преодолевает большое расстояние на высокой скорости, затем идет участок, напоминающий линейную зависимость и в конце скорость падает до нуля (рис. 14).

Рис. 14. Пример анимации с замедлением (<code class="inline-code">ease-out</code>)
Рис. 14. Пример анимации с замедлением (ease-out)

2.4. Анимация с ускорением в начале и с замедлением в конце

В анимации с ускорением в начале и замедлением в конце (ease-in-out), объект в начале набирает высокую скорость, затем скорость плавно снижается до полной остановки объекта (рис. 15). Это компромисс между ease-inи ease-out, смягчающий анимацию. Если вы не знаете что использовать, обратите внимание на ease-in-out.


Рис. 15. Анимация с ускорением в начале и замедлением в конце (<code class="inline-code">ease-in-out</code>)
Рис. 15. Анимация с ускорением в начале и замедлением в конце (ease-in-out)

2.5. Асимметричные кривые

Руководство по материальному дизайну рекомендует использовать асимметричные кривые, чтобы придать движению реалистичность: длительность ускорения должна быть меньше длительности замедления (рис. 16). Таким образом, акцент смещается на замедление, концентрируя внимание пользователя на конечном состоянии объекта.

Рис. 16. Асимметричные кривые в анимации интерфейса
Рис. 16. Асимметричные кривые в анимации интерфейса

Анимация с асимметричными кривыми плавнее, не так бросается в глаза и может пригодиться при перемещении объекта из одной части экрана в другую (Рис. 17).

Рис. 17. Движение карточки по асимметричной кривой
Рис. 17. Движение карточки по асимметричной кривой

Другой вариант применения, когда объект исчезает и у пользователя есть возможность вернуть его в любое время, это меню навигации (рис. 18).

Рис. 18. Анимация меню с <code class="inline-code">ease-in-out</code>
Рис. 18. Анимация меню с ease-in-out

Из приведенных примеров можно вывести правило – начальная скорость анимации не должна равняться конечной. Правильное сочетание замедления и ускорения обеспечивает плавные и четкие переходы. В руководстве по материальному дизайну указано, что заключительная часть анимации может быть быстрее начальной, так как она требует меньше внимания, чем следующая задача (рис. 19).


Рис. 19. Появление и исчезновение меню при помощи <code class="inline-code">ease-out</code> и <code class="inline-code">ease-in-out</code> соответственно
Рис. 19. Появление и исчезновение меню при помощи ease-out и ease-in-out соответственно

2.6. Кривые Безье

Для более удобного изменения кривых используют кубическую кривую (функция cubic-bezier()) с двумя управляющими точками: первая точка с координатами (0, 0) (слева внизу) и вторая точка (1, 1) (справа сверху).

Рис. 20. Пример кривых Безье в анимации интерфейса
Рис. 20. Пример кривых Безье в анимации интерфейса

Посмотреть на кривые Безье (рис. 20) можно здесь и здесь.

3. Способы управления вниманием

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

3.1. Равные отношения

Появление всех объектов подчиняется конкретному правилу: последовательное появление карточек сверху вниз воспринимается как один поток и не вызывает раздражения (рис. 21). Хаотическая траектория рассеивает внимание пользователя. Одновременное возникновение элементов также выглядит плохо, так как не создает направления.

Рис. 21. Внимание пользователя при анимации должно быть направлено в одном направлении
Рис. 21. Внимание пользователя при анимации должно быть направлено в одном направлении

Последовательное отображение ячеек таблицы (рис. 22) занимает больше времени, поэтому лучше использовать анимацию по диагонали.

Рис. 22. Пример анимации таблицы по диагонали (слева) и последовательно (справа)
Рис. 22. Пример анимации таблицы по диагонали (слева) и последовательно (справа)

3.2. Вертикальные отношения

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

Рис. 23. Чтобы сфокусировать внимание пользователя выберите ключевой объект для анимации
Рис. 23. Чтобы сфокусировать внимание пользователя выберите ключевой объект для анимации

Определитесь с последовательностью анимации и старайтесь задействовать как можно меньше объектов за раз.

4. Траектория движения

4.1. Движение по прямой

Согласно материальному дизайну, при непропорциональном изменении размеров объекты должны двигаться по дуге, а не по прямой, делая движение более естественным. Под «непропорциональным» изменением имеется в виду, что изменение высоты и ширины объекта при увеличении или уменьшении его размера происходит с разной скоростью, например, в процессе трансформации квадрата в прямоугольник (рис. 24).

Рис. 24. Непропорционально изменяющийся объект должен двигаться по дуге
Рис. 24. Непропорционально изменяющийся объект должен двигаться по дуге

Движение по прямой траектории применяется, когда объект меняет свой размер пропорционально с постоянной скоростью (рис. 25).

Рис. 25. Пропорционально изменяющийся объект должен двигаться по прямолинейной траектории
Рис. 25. Пропорционально изменяющийся объект должен двигаться по прямолинейной траектории

4.2. Движение по кривой

Движение по криволинейной траектории может быть реализовано двумя способами:

  • Vertical out – объект начинает двигаться горизонтально, заканчивает движением по вертикали.
  • Horizontal out – объект начинает двигаться вертикально, заканчивает движение по горизонтали.

Траектория движения объекта по кривой должна совпадать с направлением прокрутки интерфейса. Например, при скроллинге вниз (рис. 26) объект идет сначала вправо, потом вниз. В обратном направлении объект идет наверх, затем налево.

Рис. 26. Траектория движения объекта по кривой должна совпадать с направлением прокрутки интерфейса
Рис. 26. Траектория движения объекта по кривой должна совпадать с направлением прокрутки интерфейса

4.3. Обтекание элементов

Если пути движущихся объектов пересекаются, то объекты должны обтекать друг друга, а не проходить сквозь (рис. 27).

Рис. 27. Пример анимации пересекающихся элементов. Обтекание (слева) и сквозное перемещение (справа)
Рис. 27. Пример анимации пересекающихся элементов. Обтекание (слева) и сквозное перемещение (справа)

Допустимо перемещение объекта над другими объектами (рис. 28). Перемещение «сквозь» или «под» выглядит неправдоподобно.

Рис. 28. Пример перемещения над объектами (слева) и под объектами (справа)
Рис. 28. Пример перемещения над объектами (слева) и под объектами (справа)
***

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

Источники

МЕРОПРИЯТИЯ

Комментарии

ВАКАНСИИ

Добавить вакансию
ML- инженер
Москва, по итогам собеседования

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ