20 Кращих Халява для Початківців UX Motion дизайнерів
Дизайнери інтерфейсу цікавляться дизайном UX анімаційними макетами, які імітують дії користувачів. Ці макети UX покладатися на рух для визначення анімованих ефектів як інтерфейс повинен реагувати на вхід користувача.
Більшість дизайнерів UX навчаються використовувати програмне забезпечення для створення цих анімацій. Два найбільш популярні варіанти - Adobe After Effects і Principle (лише для OS X). Ти можеш дизайн інтерфейсу-макету у програмі, подібній до Photoshop, і перемістити інтерфейс користувача в ці програми для анімації.
Якщо ви зацікавлені в вивченні UX-анімації, то халява стане величезним активом. Ви можете вивчати роботу інших, і грати з їх проектами, щоб побачити, як все це працює.
Нижче ви знайдете найкращі безкоштовні користувачі для принципів і користувачів AE потрапляючи в дизайн UX-руху. Вони обов'язково допоможуть вам зрозуміти як працює анімація UX, і як побудувати свій власний.
1. Видалити дії
Проведення дуже поширена дія в мобільних додатках для різних цілей. Для цього використовується функція розгортання iOS за замовчуванням відображати альтернативні параметри для редагування / видалення елементів, і це саме те, що ви отримаєте в цій халяві, створеній Рамілом Дерогунгуном.
Ви можете завантажити безкоштовний файл AEP для After Effects і спробувати його самостійно. Інтерфейс користувача наступний дуже проста схема каркаса з введенням користувача, що відображається у вигляді синьої точки. Ці типи поведінки користувачів найкраще показуються через анімацію тому що це дає розробникам можливість побачити як повинен працювати інтерфейс.
2. Віджет Проведіть пальцем
Ось ще один анімаційний макет, що фокусується на кошику в слайд-шоу. Розроблена Леоном Ву, ця безкоштовна анімація за допомогою сервісу PRD має файл PRD, створений для принципу.
Анімація надзвичайно проста і демонструє, як елементи повинні рухатися по екрану коли застосовується тиск. Ви також відчуєте себе послаблюючий ефект кожен раз, коли відхиляється дія.
3. Dualshock UI
Ось неймовірно динамічний ефект анімації UX, який поділяє Олександр Бойченко. Цей макет базується на контролері PlayStation для інтерфейсу мобільних додатків. Вона включає в себе ескіз і принцип файлу можна завантажити безкоштовно.
Ця халява показує, як створити переходи проведіть між екранами. Але ви також можете побачити, як елементи сторінки анімують навколо екрану у різних напрямках.
4. Анімація меню гамбургера
Іконки з гамбургерами все ще бушують у мобільних інтерфейсах. Цей значок меню халява демонструє, як це зробити анімувати піктограму з трьома рядками в піктограму "X".
Це повторюється анімація, так що "X" також оживляє назад у значок меню гамбургера. Це велика халява, щоб дізнатися векторні маніпуляції для елементів інтерфейсу.
5. Snapster
Цей безкоштовний макет для мобільних додатків під назвою Snapster. Вона фокусується на екрані привітання / ввімкнення де користувачі можуть бачити демо-версії програми та дізнатися, як вона насправді функціонує.
Це PRD-файл, і, на жаль, це не дуже приємно з After Effects, тому тільки користувачі Принципу можуть скористатися цим.
6. Завантаження шпильок
Ось AEP After Effects freebie для мобільні навантажувальні блешні. Ці типи анімованих GIF-файлів стали дуже популярними, коли Ajax пробивалася в основну веб-розробку.
Тепер ці мобільні навантажувачі - це десяток, і вони навіть можуть бути сильно налаштовані для відповідності певним інтерфейсам. Ця халява поставляється з файлом AEP і файлом Sketch для редагування векторів, якщо ви хочете змінити їх.
7. Перехід відтворення / паузи
Ефекти переходу часто здається дуже простим, але насправді вимагає хорошого обсягу роботи. Ця анімація відтворення / паузи, створена Олексом Пронським, є прекрасним прикладом.
З цією халявою ви можете вивчити, як анімувати різні іконки тонкої лінії у фігури та символи. Як тільки ви дізнаєтеся про програму, вам стане набагато простіше виконувати цей тип речей, тому вам допомагає мати безкоштовні засоби для дослідження.
8. Макет iPhone
Хоча ця халява безпосередньо не містить анімації, вона призначена для використання для виробничої роботи над додатками iPhone. Це безкоштовний файл iPhone 5S AEP для використання в After Effects як шаблон iPhone.
Просто імпортуйте макет інтерфейсу та створіть анімацію в After Effects. Тоді ви можете підключити його до цього iPhone макету, щоб поділитися з вашою командою.
9. Шаблон для iPhone
Це ще одне користувальницький шаблон After Effects з більш сучасний дизайн iPhone. Халява можна отримати на цій сторінці UX in Motion.
Все в шаблоні дуже легко налаштувати. На сторінці завантаження ви також знайдете розділ "Інструкції з відео", де можна дізнатися, як анімувати програму.
10. Мікроанімація
Навіть найменші анімації програм можуть мати великий вплив на досвід користувачів. Ця халява відображає a Мікроанімація "подобається" щоразу, коли користувач "любить" публікацію.
Значок серця має власну анімацію з фотографією профілю користувача додано до стека "любить". Ця халява тільки для Принципу, і у Вас також є a .mov завантажте файл, якщо бажаєте.
11. Додаток гаманця
Цифрові гаманці стають все більш популярними, і ця халява полегшує розробку. Ви отримаєте файл "Ескіз" з усіма сирими елементами вектора, а також безкоштовний файл PRD для анімації "Принцип".
Ця халява була розроблена Сергієм Биковим як цікавий маленький бічний проект. Але це може бути дуже освіченим, якщо ви розібрати його, і працювати з анімацією крок за кроком.
12. iOS Switch
З iOS 7 від Apple, у світі з'явився свіжопризначений перемикач для вмикання / вимикання ярликів. Це призвело до багатьох різних ефектів, включаючи безкоштовну анімацію, яка імітує вбудований вимикач.
У цьому файлі ви отримуєте дуже простий ефект анімації з базовим ослабленням. Перемикач переміщується, а фон стає зеленим, потім повертається назад, коли вимикач вимкнено.
13. Ritter App
Ось ще одна велика халява, випущена Сергієм Биковим за те, що він називає Ritter App. Це включає в себе безкоштовний файл Sketch для векторного інтерфейсу, а також безкоштовний файл PRD для анімації Principle.
Ви отримаєте багато різних анімацій у цій халяві, так що я думаю, що це було б більш корисно для проміжного до просунутого дизайнера. Початківці також можуть багато чому навчитися в цьому, але можуть мати круту криву навчання.
14. Запросити друзів
Ми всі знаємо і любимо плюс меню flyout Google. Ну, Jardson Almeida створив меню Friends Invite на основі простої концепції Material Material.
Все було розроблено в Sketch, і імпортоване в Principle for animation. Ви отримуєте як файли як безкоштовні для завантаження, так і іграшки з ними.
15. Проведіть картку
Ось ще одне загальне видалення халяви, зроблене тільки для користувачів Принципу. Це інтерфейс картки проведіть створено для показу слайдів загального призначення або власних інтерфейсів програм.
Я думаю, що це ідеальна халява для початківця, який тільки потрапляє в Принцип. Це не так вже й складно, що ви відчуєте себе втраченим, але це не так просто, що ви будете відчувати себе тривіальним.
16. Чат на карті
Багато дизайнерів до цих пір використовують Photoshop для інтерфейсів, і це також стосується халяви для чату на карті. Ви можете завантажити PSD-файл для інтерфейсу і PRD-файл для анімації Principle.
Це дивовижна ручна анімація для стилю, але вона все ще виглядає чудово і функціонує точно так, як ви очікуєте в простій програмі для карт / геолокації.
17. Завантаження програми
Мобільні програми часто використовують екрани завантаження повідомити відвідувачам, що щось відбувається в бекенді. Однією з моїх улюблених халяв у цій колекції є анімація, створена Романом Вагнером.
Він завантажує окремі елементи один за одним після завершення завантаження екрана. Ця анімація дуже гладка, і повністю заслуговує на довіру в області дизайну мобільних додатків.
18. Картки
Користувач на борту є важливим кроком для кожного нового мобільного додатка. На цій стадії завжди приємно включати деякі анімації, тому ці анімації на картках можуть бути дуже корисними для дизайнерів програм.
Це було створено Остін Бейрд, і випущений безкоштовно для використання на будь-якому UI / UX проекту.
19. Принцип демос
Якщо ви підете далі в Принцип, ви дізнаєтеся багато передових технологій робочого процесу. Один з кращих халяв, що йдуть далі, це створений для творчої команди Yalantis.
Це абсолютно безкоштовний ресурс для користувачів Принципалу для завантаження та відтворення. Він охоплює кілька трюків, які показують, як стати професіоналом анімації.
20. Випадаючі меню
У спадному меню часто використовуються божевільні анімації, щоб захопити нашу увагу. Ця халява After Effects використовує a випадаюче сходи анімація в меню для окремих елементів, щоб зробити їх падіння, як сходи.
Це може не бути корисним для всіх, але це, звичайно, відмінний спосіб дізнатися про анімацію інтерфейсу After Effects.
Заключні слова
Всі ці ресурси повністю вільні для завантаження та іграшки у власних проектах. Якщо ви новачок у UX анімації, я гарантую, що ви багато дізнаєтеся, вивчаючи ці безкоштовні. Якщо ви знаєте будь-які інші великі ресурси, не соромтеся відкидати посилання в коментарях.
