Представьте, захотелось выйти из дома, вероятно, что возьметесь за ручку у двери, дерните её, а дверь распахнется
Захотелось приготовить ужин? Ставите блюдо на плиту и готовите
Реальная жизнь наполнена движением, оно повсюду — объекты двигаются и меняются в ответ на прилагаемые к ним усилия
По этой причине статичные интерфейсы воспринимать сложно
Большая часть анимации в интерфейсах нужна для микровзаимодействия (это незначительные движения). То есть состояние интерфейса не меняется глобально, но важно для пользователя:
- Показывают на изменение от действия пользователя. Когда добавляется товар в корзину, то нужно подтверждение, что данный товар теперь в корзине. Когда же заказ оформлен на сайте, то нужно убедиться, что он оплачен. Вот тут то помогает короткая анимация. Она подтвердит действие пользователь
- Показывает изменение, вне зависимости от действия пользователя. К примеру, подсветка лайка в соц.сети красным
- Отражение текущего статуса системы. Загрузки страницы будет напряженной, если не будет никакой анимации. Движение элементов подсказывают, что процесс идет и скоро прогрузит страницу
- Отображение ввода данных. Ввод в любой поисковик, где курсор будет двигаться, и при наборе запроса буквы появляться по одной
Оплата или ввод паролей - тут микровзаимодействия разнообразны: данные скрываются или по ходу ввода подсвечиваться, при неверном вводе - Показывают что делать. При наведении курсор на разделы и кнопки, меняют цвет или увеличиваться. Это указывает пользователю куда можно кликать
Крупная анимация в интерфейсах также нужна — тут показаны глобальные перемены в системы или показывает пользователю как решить его задачу
Важные функции такой анимации:
- Показывает открытие новой страницы. Часто смена страниц на происходит быстро. А показан только результат — открытие страницы. Иногда в интерфейсах смена страницы происходит медленнее и с интересными эффектами. К примеру - элементы страницы выдвигаются на передний план
- Скроллинг страницы. Вид бесконечной ленты — популярный способ при создании контента. Тут пользователь может привычно, как в соц.сетях, листать сайт
- Показ всплывающего окна. Может выводить баннер с рекламой, подсказкой или чатом. Pop-ap появляются на экране при помощи разных эффектов. При этом исчезают или скрываются в панель
- Приглашают в историю, игру. При помощи моушн-дизайна расскажите пользователю о себе. Таким способом легко преподнести информацию или вовлечь в развлекательный интерактив
Которые виды анимации уже встречали? Нaпишите
Оптимизируем и оцифруем работу вашей компании в on-line
