UI-анимация
Что это?
UI-анимация - добавление визуальных эффектов UI-элементам и компонентам, чтобы сделать их интерактивными.
Для чего нужно это знать?
Интерфейсы перенимают характеристики реального мира. В жизни все взаимосвязано, и один объект влияет на другой: если мы начнем двигать лист бумаги по столу, то увидим траекторию и скорость его движения, так как эти параметры зависят от начального импульса нашей руки. Не может быть такого, что в один момент лист бумаги сам по себе переместился в конечную точку и мы не увидели, как это происходило. Неживые интерфейсы без анимаций выглядят в точности так же — топорно и неестественно, так как наш глаз видит несоответствие с реальным миром. Напротив, взаимодействие с правильно анимированными объектами на экране выглядит логично для нашего мозга, он понимает связь между объектами — то, как они меняются после определенных действий, — и интерфейс становится более легким и предсказуемым при работе с ним. Анимация дает ощущение интерактива, отсылку к реальному миру. Еще анимация может подсказывать пользователю следующее действие, объяснять связь между предыдущим и текущим состоянием и давать ощущение контроля над интерфейсом.
Какие базовые понятия включает этот навык?
Существует 5 основных типов анимации: - Загрузка и прогресс; - Изменение состояния; - Навигация; - Микровзаимодействия; - Брендинг. 1. Загрузка и прогресс Такие анимации показывают пользователям, где они находятся или что происходит. Загрузка: демонстрация того, что система работает. Например, троббер (круглый индикатор) или индикатор с процентами показывают пользователю, что в настоящий момент идет загрузка страницы или происходит обработка информации. Подобные анимации критически важны, поскольку в противном случае люди могли бы подумать, что сайт (или продукт) перестал работать и просто покинули бы интерфейс, не дождавшись окончания загрузки! Прогресс: анимации, которые показывают пользователям, на каком этапе пути они находятся и сколько действий им еще предстоит выполнить. К примеру, индикатор выполнения в верхней части страницы оформления заказа на сайте электронной коммерции обновляется каждый раз, когда клиент приближается к окончанию процесса. 2. Изменение состояния Зачастую дизайнеры используют анимацию, чтобы сообщить о текущем состоянии цифрового продукта или элемента. Один из примеров — кнопка, которая остается темной и неактивной, пока пользователь не заполнит все обязательные поля формы. Лишь в этом случае состояние кнопки меняется на активное (или кликабельное), и человек сразу понимает, что на нее можно нажать и продолжить работу. 3. Структура и навигация Анимация элементов навигации помогает пользователям ориентироваться в интерфейсе и находить нужную информацию. С помощью анимации дизайнеры показывают посетителям, какую страницу или вкладку они просматривают, либо создают переходы между страницами, демонстрирующие, в каком направлении они перемещаются. UI-анимация также позволяет эффективно проинформировать пользователей об иерархической структуре сайта или продукта, что делает опыт взаимодействия с интерфейсом более приятным. 4. Микровзаимодействия Микровзаимодействия дают людям обратную связь и информацию на основе их действий или изменений системы. Эта обратная связь почти всегда включает анимации того или иного типа. 5. Брендинг Анимации — фантастический способ повысить узнаваемость бренда и сделать взаимодействие с аудиторией эффективнее. Дизайнеры часто используют забавные анимации логотипов, чтобы придать бренду беспечный и доброжелательный вид.
Где я могу освоить этот навык?
Освоить навык «UI-анимация» ты можешь проходя обучение на нашем менторинге по программе «UX/UI Дизайнер». В первом проекте ты познакомишься с этим навыком и с тем, как с ним работать, а в следующих трех укрепишь свои знания, посредством использования знаний, полученных на первом этапе.