12 darmowych samouczków AE dla profesjonalistów UX
Nowoczesne projektowanie stron internetowych obejmuje wiele ruchomych elementów, takich jak projektowanie treści, praca ikonami i Strategie projektowania UX . Jednym z nowych trendów jest użycie mikrointerakcji w projektach internetowych i mobilnych.
Wyglądają świetnie w końcowym projekcie, ale nie są tak łatwe do wykonania przy pomocy statycznej makiety. Dlatego projektanci wybierają programy animacyjne, takie jak After Effects, do tworzenia makiet opartych na ruchu.
Jeśli próbujesz nauczyć się tego zestawu umiejętności, gorąco polecam te darmowe filmy na YouTube. Nie nauczą cię wszystkiego, ale omówią podstawy i dadzą ci solidne podstawy do rozwijania swoich umiejętności.
1. Animowany interfejs użytkownika przycisku
To bardzo krótka animacja interfejsu użytkownika samouczek jest idealny dla początkujących, którzy mają mało doświadczenia z AE. Wymaga trochę cierpliwości do pracy przez interfejs, ale instrukcje są krystalicznie czyste.
Nauczysz się tworzyć mały efekt animacji przycisku, który może doskonale sprawdzać się w witrynach i aplikacjach mobilnych.
To nie jest nic spektakularnego, ale na końcu będziesz miał o wiele mocniejsze pojęcie o tej koncepcji.
2. Prototyp Motion
Kolejną prostą animacją, jaką możesz zrobić, jest przesuwne menu, takie jak w tym wideo . Uczy on animować menu w After Effects i pracować z poszczególnymi warstwami oprogramowania.
Jest to dość długi samouczek z ponad 40 minutami wskazówek krok po kroku. Ale warto poświęcić czas, jeśli można go do końca zobaczyć.
3. Animacja ikony AE
Małe animacje ikon nie dodają bezpośrednio do interfejsu, ale mogą zwiększyć wygodę użytkownika. Te ruchy ikon odnoszą się do wspomnianych wcześniej małych mikrointerakcji.
I ten tutorial animacji ikon mówi o mikrointerakcji z łatwymi do śledzenia wskazówkami. Możesz nawet pobrać darmowe ikony w formacie PSD / AI i użyj ich do animacji.
Jest to jednak przydatne także dla projektantów ikon, którzy tworzą od zera własne ikony i chcą je animować do produkcji.
4. Animowane kursory UI / UX
Wielu projektantów tworzy animacje UX, aby pokazać, jak interfejs powinien działać. To oczywiście oznacza kliknięcia / przeciągnięcia myszą, ponieważ chcesz zobaczyć, w jaki sposób treść porusza się po stronie.
Jeśli chcesz dodaj ruchy kursora do swoich makiet, ten samouczek jest dla Ciebie. Jest to dość krótki przewodnik, trwający zaledwie 15 minut, ale informacje są niezwykle cenne i odpowiednie dla projektantów mobilnych i internetowych.
5. Interfejs aplikacji na iPhone'a
Kolejny dobry przykład animacji skoncentrowanej na użytkowniku ten po typowym wprowadzeniu aplikacji na telefon iPhone. Tworzysz ścieżkę użytkownika za pośrednictwem aplikacji na iPhone'a wypełniającej poszczególne pola formularza.
Samo to może nie wydawać się dużo, ponieważ ludzie wiedzą, jak wygląda ten proces.
Ale jeśli projektujesz stronę lub aplikację, która ma unikalny przepływ, wtedy możesz pokazać całe zachowanie użytkownika od wprowadzania informacji do logowania, a może nawet więcej.
6. Przesunięcia strony aplikacji
Projektanci aplikacji mobilnych mogą korzystać z funkcji przeciągania stron dla wielostronnych interfejsów. Doskonale sprawdzają się w galeriach i efektach paginacji.
W ten krótki samouczek nauczysz się tworzyć animacje przesuwania strony za pomocą After Effects, korzystając z kilku istniejących makiet. Ten film jest bezpłatny UX in Motion gdzie mają mnóstwo podobnych samouczków i prywatnych warsztatów.
Temat poruszania się w UX nie jest zbytnio poruszany w Internecie, ale ci goście są jednym z niewielu dobrych, którzy naprawdę zagłębiają się w szczegóły. Sprawdź cały kanał YouTube, jeśli chcesz dowiedzieć się więcej.
7. Animacje Jelly UI
Prawdopodobnie widziałeś dziwne płynne menu w aplikacjach na Androida lub w całej sieci. Nie są one zbyt powszechne, ponieważ są trudne do odtworzenia w kodzie, ale z ten samouczek Jelly UI możesz przynajmniej zbudować animacje od zera.
To kolejny freebie z UX w ruchu i to tylko około 5 minut.
Ale dowiesz się dużo o After Effects i ogólnym procesie animacji UX. W szczególności sposób importowania wektorów i pracy z tymi plikami na osi czasu - tak naprawdę tylko podstawy działania animacji interfejsu.
8. Rozwijanie animacji
Chociaż nie mogę powiedzieć, że ta animacja wpływa bezpośrednio na interfejs, jest to coś fajnego, co można dodać do logo witryny. Rozkładanie animacji są najczęściej używane w przypadku filmów wideo w celu stworzenia wizualnego wizerunku marki.
Ale strony internetowe mogą również mieć podobne rozwijanie animacji za pomocą Grafika SVG i podstawowe animacje JS.
Nawet jeśli nie chcesz tworzyć animacji z logo, samouczek ten może poprowadzić Cię przez prosty proces roboczy interfejsu AE. Idealny do nauki lin bez większego stresu.
9. Podstawowe animacje prototypowe interfejsu użytkownika
Menu aplikacji mobilnych dostępne jest w wielu różnych stylach przy użyciu różnych technik animacji. Ten samouczek interfejsu użytkownika uczy animować menu ikony dymka wysuwanego.
Zostało to po raz pierwszy przypisane do aplikacji Path, ale od tego czasu stało się powszechnym trendem dla urządzeń z Androidem i iOS.
W tym 20-minutowym filmie pojawi się pomysł na animację ikon i projektowanie menu. Praca z nim jest bardzo łatwa i można użyć wstępnie zaprojektowanych ikon dla przepływu pracy, aby zaoszczędzić czas.
10. 3D Layer Podziały
Animacje prezentacyjne są cenne dla pracy klienta lub dzielenia się pomysłami przed zespołem. To tam gdzie ta animacja warstwy 3D samouczek może pomóc.
Uczy ona dzielenia różnych elementów i oddzielania ich od pełnego interfejsu. Możesz nawet pokazać różne elementy strony, aby wyświetlić sposób działania aplikacji / witryny.
Nie mogę sobie wyobrazić, że byłoby to cenne dla osobistej pracy, ale jest to fajny efekt, aby nauczyć się szczególnie na koncertach komercyjnych.
11. Przełączniki iOS 8
Animowane przełączniki on / off pojawiły się we wczesnych wersjach iOS i od tego czasu rozprzestrzeniły się na Androida i ogólne strony internetowe.
Najlepsze przełączniki interfejsu użytkownika mają niestandardowe animacje i możesz tworzyć własne, wykonując następujące czynności ten 25-minutowy samouczek . Zakłada, że masz już grafikę przełącznika, ale możesz też pobrać darmowy PSD i zamiast tego użyj tego.
Dodatkowo możesz zmienić przeznaczenie tej animacji na dowolny typ przełącznika, który zaprojektujesz w przyszłości. Świetny samouczek dla osób, które dopiero wchodzą w After Effects dla UI / UX.
12. Animacje płynnych ikon
Ostatnia na mojej liście jest ten szczegółowy instruktor ruchu ikon używając kilku różnych kształtów wektorowych. Jest to dość szczegółowy przewodnik, który trwa nieco ponad 30 minut i obejmuje kilka różnych technik.
Po zapoznaniu się z After Effects możesz zastosować te pomysły do innych stylów ikon. Dlatego ten samouczek jest tak doskonały dla początkujących; uczy on, jak pracować w interfejsie AE z konkretnymi technikami dla projektantów UI / UX.
Ale każdy z tych tutorialów poprawi twoje umiejętności animacji UX, więc pamiętaj, aby dodać do zakładek wszystkie, które przyciągają wzrok.
