Анимация в веб-дизайне Лекция 1 Анимация Анимация — это переход состояния объекта из одного в другое за определенный промежуток времени. Цель анимации ►вовлечь пользователя; ►упростить навигацию и подачу контента; ►создать нужный образ бренда, вызвать эмоции; ►акцентировать внимание на важной информации; ►мотивировать на совершение целевых действий. Вовлечение пользователя Вовлечение пользователя Упрощение подачи контента Создание нужного образа бренда Создание нужного образа бренда Создание нужного образа бренда Акцент на важной информации Акцент на важной информации Когда не стоит делать креативную анимацию? Концепция разрабатывается строго под задачу бизнеса и ожидания ЦА. Эффектов должно быть умеренно, без переборов. Любой излишек будет раздражать пользователя и оттолкнёт от предложения. В некоторых областях с анимацией по умолчанию нужно быть осторожными. Когда не стоит делать креативную анимацию? Виды анимации по назначению ► функциональная анимация; ► эстетическая анимация. Пример Виды анимации по охвату ► частная анимация; ► глобальная анимация. Пример Частная или глобальная? Виды анимации в зависимости от последовательности ► параллельная анимация; ► анимация с задержкой; ► групповая анимация. Параллельная, с задержкой или групповая? Виды анимации по объектам, к которым она применяется ► анимация интерфейсов; ► анимация текста; ► анимация фоновых объектов; ► анимация фона. Много примеров Ключевые характеристики анимации ► длительность; ► плавность (easing); ► свойства. Длительность Чтобы презентовать анимацию было проще, каждому анимированному элементу нужно прописать длительность (мс). Большое влияние на выбор длительности имеет площадь, которую занимает анимация. Чем выше разрешение экрана и больше площадь анимации, тем длиннее ролик. Длительность Оптимальное время действия на экране, ― 200–500 мс. Для анимации элементов дизайна на мобильных телефонах ― 200–300 мс. Для планшетов ― 400–450 мс. Для экранов смарт-часов ― 150–200 мс. Длительность Длительность Скорость анимации также зависит от их роли: ► вспомогательные анимации (появление подсказок, изменение цвета нажатой кнопки) обычно быстрее; ► сложные анимации (побуждающие к действию, вовлекающие пользователя в интерактив) должны привлекать больше внимания, поэтому они медленнее. Плавность (easing) Плавность помогает сделать движение в сложных анимациях более реалистичным и за счёт этого привлечь большее внимание пользователя. Наиболее популярные сценарии: ease-in ― ускорение и ease-out ― замедление. Плавность (easing) Постоянная скорость используется, например, в простых вспомогательных анимациях, построенных на изменении цвета и прозрачности. Они не должны сильно отвлекать пользователя: их основная задача ― органично дополнять дизайн, поэтому заострять на них внимание с помощью плавности не стоит. Свойства Эти параметры, прописываемые в техническое задание, объясняют, что именно мы трансформируем. Меняться может прозрачность, цвет, форма, масштаб, расположение ― как вместе, так и по отдельности. Стратегии анимации ► анимация ожидания (подходит для действий, которые занимают определенное количество времени); ► анимация повествования (можно рассказать историю - только не текстом, а картинками, гифками, короткими мультфильмами); ► анимация подтверждения (анимация как бы подтверждает каждое действие).
