20 Най-добри Freebies за амбициозни UX Motion дизайнери

Дизайнерите на интерфейси проявяват по-голям интерес към UX дизайна с анимирани макети, които емулират действията на потребителите. Тези UX макети разчитат на движение с анимирани ефекти за дефиниране как интерфейсът трябва да отговаря на потребителския вход.

Повечето UX дизайнери се научават да използват софтуер за създаване на тези анимации. Двата най-популярни варианта са Adobe After Effects и Principle (само за OS X). Можеш дизайн на интерфейсни макети в програма като Photoshop и преместете потребителските интерфейси в тези програми за анимация.

Ако се интересувате да научите UX анимация, тогава freebies ще бъде огромно предимство. Можете да изучавате работата на другите и да играете с техните проекти, за да видите как работи.

По-долу ще намерите най-добрите безплатни за Принцип и потребители на AE преминаване в UX motion дизайн. Те със сигурност ще ви помогнат да разберете как работи UX анимацията, и как да изградиш собственото си.

1. Изтрийте действие

Прокарване е много често срещано действие в мобилните приложения за различни цели. По подразбиране е използвано действие за преминаване на iOS по подразбиране показване на алтернативни опции за редактиране / изтриване на елементи, и това е точно това, което получавате в тази безплатна игра, създадена от Ramil Derogongun.

Можете да изтеглите безплатния AEP файл за After Effects и да го изпробвате сами. Потребителският интерфейс следва a много проста основна схема с потребителско въвеждане се показва като синя точка. Тези типове потребителски поведения са най-подходящи за показване чрез анимация защото дава на разработчиците възможност да видят как трябва да работи интерфейсът.

2. Прокарване на притурка

Ето още един анимиран макет, който се фокусира върху артикули от количката в слайдшоу. Проектиран от Леон У, тази безплатна анимация на плъзгането идва с PRD файл, който е направен за Принцип.

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

3. Dualshock UI

Ето един невероятно динамичен UX анимационен ефект, споделен от Александър Бойченко. Тази макет се основава на контролера на PlayStation за потребителски интерфейс за мобилни приложения. Тя включва файл за скица и принцип, който можете да изтеглите безплатно.

Това freebie показва как да се създадат преходи тласнете между екраните. Но също така можете да видите как елементите на страницата анимират около екрана в различни посоки.

4. Анимация на менюто на хамбургер

Иконите на хамбургер са все още в ярост в мобилните интерфейси. Това меню икона freebie демонстрира как да анимирайте иконата с три ленти в икона "X".

Това е повтаряща се анимация, така че "Х" също оживява обратно в иконата на менюто за хамбургер. Това е чудесна безплатна игра, за да научите повече векторна манипулация за елементи на потребителския интерфейс.

5. Snapster

Тази безплатна макет е за мобилно приложение, наречено Snapster. Тя се фокусира на екрана за посрещане / включване където потребителите могат да виждат демонстрации на приложението и да научат как тя всъщност функционира.

Това е PRD файл и за съжаление това не се играе добре с After Effects, така че само потребителите на Principle могат да се възползват от това.

6. Зареждане на Spinners

Ето AEP After Effects freebie за подвижни преносители. Тези видове анимирани GIF файлове станаха много популярни, когато Ajax направи своя път в основната уеб разработка.

Сега тези мобилни товарачи са с монета от дузина и дори могат да бъдат силно персонализирани да се поберат определени интерфейси. Тази безплатна идва с AEP файл и файл Sketch за редактиране на векторите, ако искате да ги модифицирате.

7. Предаване на възпроизвеждане / пауза

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

С тази безплатна можете да проучите как да анимирате различни тънки икони във форми и символи. След като научите програмата, става много по-лесно да правите този тип неща, така че помага да имате безплатни за изследване.

8. iPhone Mockup

Въпреки че тази хапка не съдържа директно анимация, тя е предназначена да бъде използвана за производство на iPhone приложения. Това е безплатен iPhone 5S AEP файл за използване в After Effects като шаблон на iPhone.

Просто импортирайте интерфейса си и създайте анимациите в After Effects. След това можете да го включите в този iPhone макет, за да споделите с екипа си.

9. Шаблон за iPhone

Това е друго персонализиран шаблон за After Effects с по-модерен дизайн на iPhone. Freebie се предлага от тази страница в UX in Motion.

Всичко в шаблона е супер лесно да персонализирате. На страницата за изтегляне ще намерите и раздел, озаглавен „Инструкции за видео“, където можете да научите как да анимирате приложението.

10. Микроанимация

Дори и най-малките анимации на приложения могат да окажат голямо влияние върху потребителския опит. Тази безплатна показва a Микроанимация "Харесва ми" всеки път, когато потребител "харесва" публикация.

Иконата на сърцето има своя собствена анимация с добавената снимка на потребителския профил в купчината харесвания. Тази безплатна игра е само за Принцип и вие също имате .Mov файл за изтегляне, ако желаете.

11. Приложение на портфейла

Цифровите портфейли стават все по-популярни и тази безплатна помага за по-лесното проектиране. Получавате файл Sketch с всички сурови векторни елементи, както и безплатен PRD файл за анимация по принцип.

Тази безплатна игра е проектирана от Сергей Биков като забавен малък страничен проект. Но тя може да бъде много образователна, ако я разделиш, и работим с анимацията стъпка по стъпка.

12. iOS Switch

С iOS 7 на Apple, светът получи нов дизайн за включване / изключване на етикети. Това доведе до много различни ефекти, включително и безплатна анимация имитира родния ключ за включване / изключване.

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

13. Ritter App

Ето още една голяма freebie, издадена от Сергей Биков за това, което той нарича Ritter App. Това включва безплатен файл Sketch за векторния интерфейс, заедно със свободен PRD файл за анимацията на Принципа.

Ще получите много различни анимации в тази безплатна, така че мисля, че би било по-полезно за междинен до напреднал дизайнер. Начинаещите могат да научат много и от нея, но могат да имат стръмна крива на учене.

14. Поканете приятели

Всички знаем и обичаме плюс менюто за разгъване на иконите на Google. Е, Jardson Almeida създаде меню „Приятели на поканите“, основано на проста концепция за материалния дизайн.

Всичко беше проектирано в Sketch и внесено в Principle for animation. Получавате и двата файла като безплатни за изтегляне и играете с тях.

15. Плъзнете карта

Ето още едно общо привличане на халява, направено само за потребители на Принцип. Това е интерфейс за прекарване на картата създадени за слайдшоута с общо предназначение или потребителски интерфейси на местни приложения.

Мисля, че това е перфектното халява за начинаещ, който току-що влиза в Принцип. Не е толкова сложно, че ще се почувствате загубени, но все пак не е толкова просто, че ще се почувствате тривиализирани.

16. Чат на картата

Много дизайнери все още използват Photoshop за интерфейси и също така е вярно и за тази безплатна игра с чат. Можете да изтеглите PSD файл за интерфейса и PRD файл за анимацията в Principle.

Това е изненадващо опитомена анимация за стила, но тя все още изглежда страхотно и функционира точно както бихте очаквали в обикновена карта / приложение за геолокация.

17. Зареждане на приложения

Мобилните приложения често използват екрани за зареждане да кажа на посетителите, че нещо се случва в задния панел. Една от любимите ми халюци в тази колекция е тази анимация, създадена от Роман Вагнер.

Той зарежда отделни елементи едно след друго след като екранът за зареждане приключи. Тази анимация е много гладка и напълно надеждна в сферата на дизайна на мобилните приложения.

18. Вградени карти

Включване на потребителя е важна стъпка за всяко ново мобилно приложение. Винаги е хубаво да се включат някои анимации на този етап, затова тези анимации за карти могат да бъдат много полезни за дизайнерите на приложения.

Това е създадено от Austin Baird и е пуснато безплатно, за да бъде използвано във всеки UI / UX проект.

19. Принципни демонстрации

Докато се ровите в Принцип, ще научите много напреднали техники за работен поток. Една от най-добрите безплатни играчи е тази, създадена за творческия екип на Yalantis.

Това е напълно безплатен ресурс за потребителите на Принцип, който може да сваля и да играе. Тя обхваща няколко трика, показващи как да станете професионалист в анимацията на принципа.

20. Падащи менюта

Падащите менюта често използват луди анимации, за да привлекат вниманието ни. Това After Effects freebie използва a анимация на падащи стълби в менюто за отделни елементи, за да ги накарат да се спускат като стълби.

Това може да не е полезно за всички, но със сигурност е чудесен начин да научите повече за анимацията на интерфейса на After Effects.

Заключителни думи

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