веб дизайн, приложения, юзабилити, U,-дизайн, web-дизайн, макеты, шаблоны, ссылки, ресурс, ui, интерфейс, анимация
Юзабилити

20 бесплатных анимаций для моушн-дизайнеров

Автор: Ия Пфанштиль19.07.2016

Дизайнеры интерфейсов все чаще используют анимированные макеты, которые имитируют действия пользователей. Эффект анимации показывает, как интерфейс будет отвечать на различные манипуляции.

Большинство UX-дизайнеров используют для создания таких макетов специальное программное обеспечение, например, Adobe After Effects или Principle. Также можно создавать макеты интерфейса в графических редакторах (Photoshop) и перемещать их в перечисленные выше программы для наложения анимации.

Если вы хотите изучить UX-анимацию, перечисленные в этой статье бесплатные ресурсы вам в этом помогут. Проанализируйте работы других дизайнеров, чтобы понять, как это работает.

Ниже вы найдете лучшие бесплатные приложения для UX моушн-дизайна в Principle и AE. Они помогут вам понять, как работает UX-анимация, и как ее создавать.

1. Delete Action

Смахивание – популярное действие в мобильных приложениях. Например, в iOS этот жест используется для показа альтернативных опций или редактирования/удаления. Именно действие удаления показано в этом бесплатном ресурсе для After Effects от Рамиля Дероготгана (Ramil Derogongun). Скачайте AEP файл и попробуйте сами.

веб дизайн, приложения, юзабилити, U,-дизайн, web-дизайн, макеты, шаблоны, ссылки, ресурс, ui, интерфейс, анимация

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

2. Widget Swipe

Это еще один макет анимированного смахивания, который фокусируется на отдельной карточке в слайдшоу. Создан он Леоном Ву (Leon Wu) и доступен в PRD формате для Principle.

веб дизайн, приложения, юзабилити, U,-дизайн, web-дизайн, макеты, шаблоны, ссылки, ресурс, ui, интерфейс, анимация

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

3. Dualshock UI

Невероятно динамичный эффект в UX анимации, созданный Александром Бойченко. Этот макет демонстрирует контроллер PlayStation в интерфейсе мобильного приложения. Бесплатно доступны файлы для Sketch и Principle.

веб дизайн, приложения, юзабилити, U,-дизайн, web-дизайн, макеты, шаблоны, ссылки, ресурс, ui, интерфейс, анимация

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

4. Hamburger Menu Animation

Иконка «гамбургер» очень популярна в мобильных интерфейсах. В этой анимации показано, как можно превратить иконку из трех горизонтальных линий в крестик.

веб дизайн, приложения, юзабилити, U,-дизайн, web-дизайн, макеты, шаблоны, ссылки, ресурс, ui, интерфейс, анимация

Анимация зациклена, поэтому можно увидеть, как «X» превращается обратно в гамбургер. Она научит вас проводить векторные манипуляции с элементами UI.

5. Snapster

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

веб дизайн, приложения, юзабилити, U,-дизайн, web-дизайн, макеты, шаблоны, ссылки, ресурс, ui, интерфейс, анимация

Это PRD файл и он, к сожалению, не работает в After Effects, поэтому использовать его смогут только обладатели Principle.

6. Loading Spinners

Это бесплатный ресурс для After Effects, демонстрирующий анимацию загрузки, которая сейчас пользуется большой популярностью.

веб дизайн, приложения, юзабилити, U,-дизайн, web-дизайн, макеты, шаблоны, ссылки, ресурс, ui, интерфейс, анимация

Предлагается более дюжины вариантов иконок, также их легко можно адаптировать под любой интерфейс. Скачать анимацию можно в формате AEP и Sketch.

7. Play/Pause Transition

Эффект перехода кажется простым, но на его создание требуется много усилий. Этот отличный пример перехода из кнопки «play» в кнопку «pause» создал Алекс Пронски (Alex Pronsky).

play-pause-transition-freebie

 

Ресурс поможет вам понять, как анимировать иконки, придавая им различные формы. Со временем вы научитесь самостоятельно создавать подобный эффект.

8. iPhone Mockup

Хотя в этом ресурсе и нет анимации, он отлично подойдет для создания приложений для iPhone. Скачать iPhone 5S AEP файл можно совершенно бесплатно, после чего использовать его в качестве шаблона в After Effects.

веб дизайн, приложения, юзабилити, U,-дизайн, web-дизайн, макеты, шаблоны, ссылки, ресурс, ui, интерфейс, анимация

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

9. iPhone Template

Еще один шаблон для After Effects с более современным дизайном iPhone. К тому же он содержит анимацию.

веб дизайн, приложения, юзабилити, U,-дизайн, web-дизайн, макеты, шаблоны, ссылки, ресурс, ui, интерфейс, анимация

Шаблон легко настроить, к нему прилагается понятная видео инструкция.

10. Micro Animation

Даже небольшая анимация может значительно повлиять на пользовательский опыт. Здесь показано, как меняется экран, когда пользователь ставит лайк.

веб дизайн, приложения, юзабилити, U,-дизайн, web-дизайн, макеты, шаблоны, ссылки, ресурс, ui, интерфейс, анимация

Помимо оригинальной анимации сердечка, используется эффект добавления фото пользователя к списку лайкнувших. Ресурс доступен для Principle, также можно скачать файл .mov.

11. Wallet App

Электронные кошельки становятся все популярнее, а этот ресурс помогает создать дизайн одного из таких приложений. Для скачивания доступен файл Sketch с векторными элементами, а также бесплатный PRD для анимации в Principle.

веб дизайн, приложения, юзабилити, U,-дизайн, web-дизайн, макеты, шаблоны, ссылки, ресурс, ui, интерфейс, анимация

Анимация была создана Сергеем Быковым в качестве небольшого стороннего проекта. Она может многому вас научить, если в ней как следует разобраться.

12. iOS Switch

С появлением iOS 7 мир познакомился с новым дизайном переключателей on/off. Именно его и повторяет эта анимация.

веб дизайн, приложения, юзабилити, U,-дизайн, web-дизайн, макеты, шаблоны, ссылки, ресурс, ui, интерфейс, анимация

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

13. Ritter App

Еще один бесплатный ресурс от Сергея Быкова под названием Ritter App. Он включает в себя бесплатный Sketch файл для векторного интерфейса и бесплатный PRD файл для анимации в Principle.

веб дизайн, приложения, юзабилити, U,-дизайн, web-дизайн, макеты, шаблоны, ссылки, ресурс, ui, интерфейс, анимация

Здесь представлено много разной анимации, поэтому ресурс больше подойдет для опытных дизайнеров.

14. Invite Friends

Всем нам знакома иконка «+» от Google . Эта анимация использует ее для приглашения друзей и основана на простой концепции Material Design.

веб дизайн, приложения, юзабилити, U,-дизайн, web-дизайн, макеты, шаблоны, ссылки, ресурс, ui, интерфейс, анимация

Дизайн был создан в Sketch и импортирован в Principle для создания анимации. Для скачивания доступны оба фала.

15. Card Swipe

Еще одна анимация смахивания только для пользователей Principle. Создана она для слайдшоу или интерфейсов приложений.

веб дизайн, приложения, юзабилити, U,-дизайн, web-дизайн, макеты, шаблоны, ссылки, ресурс, ui, интерфейс, анимация

Ресурс идеально подойдет новичкам, только осваивающим Principle.

16. Chat on Map

Многие дизайнеры до сих пор используют Photoshop для создания интерфейсов, как, например, этого чата. Вы можете скачать PSD файл интерфейса и PRD файл анимации в Principle.

веб дизайн, приложения, юзабилити, U,-дизайн, web-дизайн, макеты, шаблоны, ссылки, ресурс, ui, интерфейс, анимация

Несмотря на свою простоту, анимация выглядит замечательно и на отлично выполняет свои функции.

17. App Loading

В мобильных приложениях часто используются окна загрузки. Одна из лучших анимаций этого вида – загрузка от Романа Вагнера.

веб дизайн, приложения, юзабилити, U,-дизайн, web-дизайн, макеты, шаблоны, ссылки, ресурс, ui, интерфейс, анимация

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

18. Onboarding Cards

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

веб дизайн, приложения, юзабилити, U,-дизайн, web-дизайн, макеты, шаблоны, ссылки, ресурс, ui, интерфейс, анимация

Он создан Остином Бэрдом (Austin Baird) и доступен бесплатно. Используйте данную анимацию в своих UI/UX проектах.

19. Principle Demos

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

веб дизайн, приложения, юзабилити, U,-дизайн, web-дизайн, макеты, шаблоны, ссылки, ресурс, ui, интерфейс, анимация

Это совершенно бесплатный ресурс для пользователей Principle. В нем используется несколько трюков, которые помогут вам стать настоящим профессионалом Principle.

20. Dropdown Menus

При взаимодействии с меню часто используется яркая анимация, призванная привлечь внимание пользователя. В этом файле для After Effects после закрытия меню элементы появляются один за другим.

веб дизайн, приложения, юзабилити, U,-дизайн, web-дизайн, макеты, шаблоны, ссылки, ресурс, ui, интерфейс, анимация

Анимация может пригодиться далеко не всем, но она поможет узнать немного больше об After Effects.

Все перечисленные выше ресурсы доступны для скачивания совершенно бесплатно. Если вы еще не знакомы с UX анимацией, изучив эти файлы, вы узнаете много нового.

Реакция на статью
поделюсь
9%
интересно
73%
полезно
109%
не уверен
0%
скучно
0%
где автор?
0%
Ия Пфанштиль
Главный редактор, контент-маркетолог, автор. Пять лет пишу о digital. Делюсь открытиями.
Комментарии
Оставить отзыв

You must log in to post a comment