20 najlepszych darmowych gadżetów dla aspirujących projektantów ruchu UX
Projektanci interfejsów są bardziej zainteresowani projektowaniem UX dzięki animowanym makietom, które emulują działania użytkownika. Te makiety UX polegać na ruchu z efektami animowanymi do zdefiniowania jak interfejs powinien reagować na dane wprowadzane przez użytkownika.
Większość projektantów UX uczy się używać oprogramowania do tworzenia tych animacji. Dwie najbardziej popularne opcje to Adobe After Effects i Principle (tylko OS X). Możesz projektowanie makiet interfejsu w programie takim jak Photoshop i przenieś interfejsy użytkownika do tych programów do animacji.
Jeśli jesteś zainteresowany nauką animacji UX, gratisy będą ogromnym atutem. Możesz studiować pracę innych i bawić się ich projektami, aby zobaczyć, jak to wszystko działa.
Poniżej znajdziesz najlepsze gratisy dla użytkowników Principle i AE wchodzenie w projekt ruchu UX. Z pewnością pomogą ci zrozumieć jak działa animacja UX, i jak zbudować własny.
1. Usuń akcję
Przesuwanie to bardzo popularna akcja w aplikacjach mobilnych do różnych celów. Domyślna akcja przesuwania iOS wyświetl alternatywne opcje edycji / usuwania elementów, i to jest dokładnie to, co dostajesz w tym freebie stworzonym przez Ramila Derogonguna.
Możesz pobrać darmowy plik AEP dla After Effects i wypróbować go samodzielnie. Interfejs użytkownika a bardzo prosty schemat szkieletowy z wejściem użytkownika wyświetlanym jako niebieska kropka. Te typy zachowań użytkowników są najlepiej widoczne poprzez animację ponieważ daje programistom szansę zobaczenia jak powinien działać interfejs.
2. Widget Swipe
Oto kolejna animowana makieta, która się skupia na elementach koszyka w pokazie slajdów. Ta darmowa animacja została zaprojektowana przez Leona Wu i zawiera plik PRD, który jest stworzony dla zasady.
Animacja jest niezwykle prosta i pokazuje, jak przedmioty powinny poruszać się po ekranie gdy zostanie zastosowane ciśnienie. Czujesz także efekt łagodzenia za każdym razem, gdy zostanie zwolniona operacja przesuwania.
3. Interfejs Dualshock
Oto niezwykle dynamiczny efekt animacji UX, który podziela Alexander Boychenko. Ta makieta jest oparta na kontrolerze PlayStation dla aplikacji mobilnej interfejsu użytkownika. Zawiera plik szkicu i zasady, który można pobrać za darmo.
Ten darmowy program pokazuje, jak tworzyć przejścia przesuń między ekranami. Ale możesz również zobaczyć, jak animowane są elementy strony na ekranie w różnych kierunkach.
4. Animacja menu hamburgera
Ikony hamburgerów wciąż są wściekłe w interfejsach mobilnych. Ta ikona menu freebie pokazuje, jak to zrobić animuj ikonę trójbarwną na ikonie „X”.
To jest powtarzanie animacji, więc „X” wraca do ikony menu hamburgera. To świetny darmowy program do nauki manipulacja wektorami dla elementów interfejsu użytkownika.
5. Snapster
Ta darmowa makieta jest przeznaczona dla aplikacji mobilnej o nazwie Snapster. To wyostrza na ekranie powitania / pokładu gdzie użytkownicy mogą zobaczyć prezentacje aplikacji i dowiedzieć się, jak ona działa.
Jest to plik PRD i niestety nie działa to dobrze z After Effects, więc tylko użytkownicy Principle mogą z niego skorzystać.
6. Ładowanie wirówek
Oto darmowy darmowy program AEP After Effects ruchome obrotowe załadunki. Tego typu animowane GIF-y stały się bardzo popularne, gdy Ajax wkroczył do głównego nurtu tworzenia stron internetowych.
Teraz te mobilne ładowarki to dziesiątki, a nawet mogą być mocno dostosowany dopasować niektóre interfejsy. Ten freebie jest wyposażony w plik AEP i plik Szkicu do edycji wektorów, jeśli chcesz je zmodyfikować.
7. Play / Pause Transition
Efekty przejścia często wydają się bardzo proste, ale w rzeczywistości wymagają dużej ilości pracy. Ta animacja odtwarzania / pauzy stworzona przez Alexa Pronsky'ego jest doskonałym przykładem.
Z tym darmowym narzędziem możesz sprawdzić, jak animować różne ikony cienkich linii w kształty i symbole. Gdy nauczysz się tego programu, znacznie łatwiej będzie robić tego typu rzeczy, więc warto mieć darmowe gadżety do badań.
8. Makieta iPhone'a
Chociaż ten darmowy program nie zawiera bezpośrednio animacji, ma być używany do pracy produkcyjnej na aplikacjach iPhone'a. To darmowy plik iPhone 5S AEP do wykorzystania w After Effects jako szablon iPhone'a.
Wystarczy zaimportować makietę interfejsu i utworzyć animacje w After Effects. Następnie możesz podłączyć go do tej makiety iPhone'a, aby udostępnić ją swojemu zespołowi.
9. Szablon iPhone'a
To jest inny niestandardowy szablon After Effects z bardziej nowoczesny design iPhone'a. Freebie jest dostępne na tej stronie w UX in Motion.
Wszystko w szablonie jest super łatwy do dostosowania. Na stronie pobierania znajdziesz także sekcję „Instrukcje wideo”, w której możesz dowiedzieć się, jak animować aplikację.
10. Mikro animacja
Nawet najmniejsze animacje aplikacji mogą mieć duży wpływ na wrażenia użytkownika. Ten darmowy użytkownik wyświetla a Mikro animacja „Lubię” ilekroć użytkownik „lubi” posta.
Ikona serca ma własną animację ze zdjęciem profilu użytkownika dodanym do stosu polubień. Ten darmowy jest tylko dla zasady i masz także .mov plik do pobrania, jeśli chcesz.
11. Aplikacja Portfel
Portfele cyfrowe stają się coraz bardziej popularne, a ten darmowy sprawia, że łatwiej je zaprojektować. Dostajesz plik szkicu ze wszystkimi surowymi elementami wektorowymi oraz darmowy plik PRD dla animacji zasad.
Ten darmowy projekt został zaprojektowany przez Siergieja Bykova jako zabawny projekt poboczny. Ale może to być bardzo pouczające, jeśli go rozłączysz i będziesz pracował z animacją krok po kroku.
12. Przełącznik iOS
Dzięki systemowi iOS 7 firmy Apple świat otrzymał świeżo zaprojektowany przełącznik do etykiet on / off. Doprowadziło to do wielu różnych efektów, w tym bezpłatnej animacji naśladuje natywny włącznik / wyłącznik.
W tym pliku uzyskasz bardzo prosty efekt animacji z prostym dopasowaniem. Przełącznik przesuwa się, a tło zmienia kolor na zielony, a następnie powraca po wyłączeniu przełącznika.
13. Aplikacja Ritter
Oto kolejny wielki freebie wydany przez Siergieja Bykowa za to, co nazywa aplikacją Ritter. Obejmuje to darmowy plik szkicu dla interfejsu wektorowego oraz bezpłatny plik PRD dla animacji zasad.
Dostaniesz wiele różnych animacji w tym darmowym, więc myślę, że byłoby bardziej przydatne dla średnio zaawansowanego projektanta. Początkujący mogą się również wiele nauczyć, ale mogą mieć stromą krzywą uczenia się.
14. Zaproś przyjaciół
Wszyscy znamy i kochamy menu wysuwane ikony plus Google. Cóż, Jardson Almeida stworzył menu Friends Invite oparte na prostej koncepcji Material Design.
Wszystko zostało zaprojektowane w szkicu i zaimportowane do zasady dla animacji. Dostajesz oba pliki jako gratisy do pobrania i zabawy z nimi.
15. Przesunięcie karty
Oto kolejny ogólny przesuwający freebie tylko dla użytkowników Principle. To jest interfejs przesuwania karty stworzony dla pokazów slajdów ogólnego przeznaczenia lub rodzimych interfejsów aplikacji.
Myślę, że jest to idealny freebie dla początkującego, który dopiero wchodzi w zasadę. Nie jest tak skomplikowane, że poczujesz się zagubiony, ale nie jest to takie proste, że poczujesz się trywializowany.
16. Czat na mapie
Wielu projektantów nadal używa Photoshopa do interfejsów, a także dotyczy tego darmowego czatu na mapie. Możesz pobrać plik PSD dla interfejsu i plik PRD dla animacji zasad.
Jest to zaskakująco oswojona animacja dla stylu, ale nadal wygląda świetnie i działa dokładnie tak, jak można by tego oczekiwać po prostej aplikacji do map / geolokalizacji.
17. Ładowanie aplikacji
Często korzystają z aplikacji mobilnych ekrany ładowania powiedzieć odwiedzającym, że coś się dzieje w zapleczu. Jednym z moich ulubionych darmowych gadżetów w tej kolekcji jest animacja ładowania stworzona przez Romana Wagnera.
Ładuje poszczególne elementy jeden po drugim po zakończeniu ładowania ekranu. Ta animacja jest bardzo płynna i całkowicie wiarygodna w dziedzinie projektowania aplikacji mobilnych.
18. Karty pokładowe
Onboarding użytkownika to kluczowy krok dla każdej nowej aplikacji mobilnej. Zawsze miło jest dołączyć niektóre animacje na tym etapie, dlatego te animacje kart pokładowych mogą być bardzo pomocne dla projektantów aplikacji.
Został stworzony przez Austina Bairda i wydany za darmo, aby można go było używać w dowolnym projekcie UI / UX.
19. Zasady Demo
W miarę zgłębiania zasad poznasz wiele zaawansowanych technik przepływu pracy. Jednym z najlepszych darmowych gadżetów jest ten stworzony dla zespołu kreatywnego Yalantis.
Jest to całkowicie darmowy zasób dla użytkowników zasad do pobrania i zabawy. Obejmuje kilka sztuczek pokazujących, jak zostać profesjonalistą w animacji zasad.
20. Rozwijane menu
Menu rozwijane często zawierają szalone animacje, które przyciągają naszą uwagę. Ten darmowy program After Effects używa animacja schodów w menu dla poszczególnych elementów, aby upuścić je jak schody.
Może to nie być użyteczne dla wszystkich, ale z pewnością jest świetnym sposobem na poznanie animacji interfejsu After Effects.
Ostatnie słowa
Wszystkie te zasoby są całkowicie bezpłatne do pobrania i zabawy z własnymi projektami. Jeśli jesteś nowy w animacji UX, gwarantuję, że nauczysz się wiele, studiując te gratisy. Jeśli wiesz, że inne świetne zasoby, możesz wrzucić linki do komentarzy.
