UX Profesyonelleri için 12 Ücretsiz AE Öğreticisi
Modern web tasarımı, içerik tasarımı, simge çalışması ve UX tasarım stratejileri . Bir yeni trend kullanım mikrointeraksiyonların web ve mobil projelerde.
Bunlar final projesinde harika görünüyor ama statik bir mockup ile yapmak çok kolay değil. Böylece tasarımcılar, harekete dayalı örnekler oluşturmak için After Effects gibi animasyon programlarını topladılar.
Bu beceri grubunu öğrenmeye çalışıyorsanız, bu ücretsiz videoları YouTube'da tavsiye ederim. Size her şeyi öğretmeyecekler, ancak temel bilgileri ele alacak ve yeteneklerinizi ilerletmek için sağlam bir temel oluşturacaklar.
1. Düğme UI Animasyonlu
Bu çok kısa UI animasyonu öğretici, az sayıda AE deneyimi ile yeni başlayanlar için idealdir. Arayüz üzerinden çalışmak için biraz sabır gerektiriyor ancak talimatlar berrak.
Web siteleri veya mobil uygulamalar için harika çalışabilecek küçük bir düğme animasyon efekti oluşturmayı öğreneceksiniz.
Bu muhteşem bir şey değil ama sonunda bu konsept üzerinde daha güçlü bir kavrayış elde edeceksiniz.
2. Prototip Hareket
Yapabileceğiniz başka bir basit animasyon gibi kayan bir menü Bu videoda . After Effects'te bir menüyü nasıl canlandıracağınızı ve yazılımdaki tek tek katmanlarla nasıl çalışacağınızı öğretir.
Bu, 40 dakikadan fazla adım adım rehberlikle oldukça uzun bir öğreticidir. Ama sonuna kadar görebiliyorsan zamana değecek.
3. AE Simge Animasyonu
Küçük simge animasyonları doğrudan ara yüze eklemez, ancak kullanıcı deneyimini geliştirebilirler. Bu ikon hareketleri, daha önce bahsedilen küçük mikrointeractyonlarla ilgilidir.
Ve bu simge animasyonu tut mikrointeraksiyonlar hakkında kolay takip edilen yönleri anlatır. İndirebilirsin bile ücretsiz simgeler PSD / AI formatında ve animasyon için bunları kullanın.
Ancak bu, kendi simgelerini sıfırdan yaratan ve onları üretim için canlandıran ikon tasarımcıları için de kullanışlıdır.
4. Hareketli UI / UX imleçleri
Birçok tasarımcı, bir arayüzün nasıl çalışması gerektiğini göstermek için UX animasyonları yaratır. Bu, içeriğin sayfa boyunca nasıl hareket ettiğini görmek istediğiniz için, doğal olarak fare tıklamaları / swipes içerecektir.
Eğer istersen imleç hareketlerini ekle örneklerinize o zaman bu eğitim sizin için. Oldukça kısa bir rehber, sadece 15 dakikadır, ancak bilgi süper değerlidir ve hem mobil hem de web tasarımcıları için uygundur.
5. iPhone Uygulama Arayüzü
Kullanıcı odaklı bir animasyonun iyi bir örneği Bu Tipik bir iPhone uygulaması girdisi izler. Bireysel form alanlarını dolduran bir iPhone uygulaması aracılığıyla bir kullanıcının yolunu oluşturuyorsunuz.
Bu süreç, insanların bu sürecin neye benzediğini bildiğinden beri, pek de öyle görünmeyebilir.
Ancak, benzersiz bir akışa sahip bir web sayfası veya uygulama tasarlıyorsanız, tüm kullanıcı davranışlarının giriş bilgilerini girmeye ve belki de daha fazlasına göstermesine yardımcı olur.
6. Uygulama Sayfası
Mobil uygulama tasarımcıları çok sayfalı arayüzler için sayfa swipes kullanabilir. Bunlar galeriler ve paginated efektler için harika çalışıyor.
İçinde bu kısa eğitim Birkaç efekti kullanarak, After Effects ile sayfa kaydırma animasyonlarını nasıl oluşturacağınızı öğreneceksiniz. Bu video ücretsiz Hareket halindeyken UX bir ton benzer eğitici ve özel atölye çalışmaları var.
UX hareketinin konusu web'de pek ele alınmıyor, ancak bu adamlar ayrıntılara gerçekten çok iyi giden birkaç iyi kişiden biri. Daha fazla bilgi edinmek için tüm YouTube kanallarına göz atın.
7. Jelly UI Animasyonları
Muhtemelen Android uygulamalarında veya hatta web'de garip sıvı-jöle menüleri gördünüz. Bunlar çok yaygın değil çünkü kodda yeniden oluşturmak zor, ancak Bu Jelly UI öğretici En azından animasyonları sıfırdan oluşturabilirsiniz.
Hareket halindeki UX'ten başka bir freebie ve sadece yaklaşık 5 dakika sürüyor.
Ama After Effects ve genel UX animasyon süreci hakkında çok şey öğreneceksiniz. Özellikle vektörlerin nasıl içe aktarılacağı ve bir zaman çizelgesi üzerinde bu dosyalarla nasıl çalışılacağı - gerçekten sadece arayüz animasyonu çalışmalarının temelleri.
8. Unfolding Animasyonu
Bu animasyonun doğrudan arayüzü etkilediğini söyleyemem, web sitenizin logosuna ekleyebileceğiniz harika bir şey. Unfolding animasyonlar brandable görsel oluşturmak için çoğunlukla video girişlerinde kullanılır.
Ancak, web siteleri de benzer açıklanmayan animasyonlara sahip olabilir. SVG grafikleri ve temel JS animasyonları.
Logo animasyonları oluşturmak istemeseniz bile, bu eğitici size basit bir AE arayüzü iş akışı üzerinden yol gösterebilir. Halatları çok stres olmadan öğrenmek için mükemmeldir.
9. Temel UI Prototip Animasyonları
Mobil uygulama menüleri, farklı animasyon teknikleriyle birçok farklı stilde gelir. Bu kullanıcı arayüzü eğitimi flyout bubble icon menüsünü nasıl canlandıracağınızı öğretir.
Bu ilk olarak Yol uygulamasına aktarıldı ancak o zamandan beri Android ve iOS cihazları için ortak bir trend haline geldi.
Bu 20 dakikalık videoda, simge animasyonu ve menü tasarımı için fikirler alacaksınız. Çalışmak oldukça kolay ve zaman kazanmak için iş akışı için önceden tasarlanmış simgeleri kullanabilirsiniz.
10. 3D Katman Bölmeleri
Sunum animasyonu, müşteri çalışması veya fikirlerinizi bir takımın önünde paylaşmak için değerlidir. Bu nerede bu 3D katman animasyonu öğretici yardımcı olabilir.
Farklı katman elemanlarını nasıl parçalayacağınızı ve onları tam arayüzden nasıl ayıracağınızı öğretir. Uygulamanın / web sitesinin nasıl çalışması gerektiğini görüntülemek için farklı sayfa öğelerini bile gösterebilirsiniz.
Bunun kişisel işler için değerli olacağını düşünemiyorum, ancak özellikle ticari gösteriler için öğrenmek için harika bir etki.
11. iOS 8 Anahtarları
Animasyonlu açma / kapama anahtarları ilk olarak iOS'un ilk sürümlerinde ortaya çıktı ve Android ve genel web sitelerine yayıldı.
En iyi UI anahtarları özel animasyonlara sahiptir ve takip ederek kendi oluşturabilirsiniz bu 25 dakikalık öğretici . Şimdilik anahtar grafiklerine sahip olduğunuzu varsayar, ancak indirebilirsin bir freebie PSD ve bunun yerine kullan.
Ayrıca, bu animasyonu gelecekte tasarlayacağınız herhangi bir anahtar için de kullanabilirsiniz. Sadece UI / UX için After Effects'e giren biri için harika bir öğretici.
12. Pürüzsüz Simge Animasyonları
Listemdeki son Bu detaylı simge hareket tut Birkaç farklı vektör şekilleri kullanarak. Sadece 30 dakikayı geçen ve birkaç farklı tekniği kapsayan oldukça detaylı bir rehber.
After Effects ile ilgili yolunuzu öğrendikten sonra, bu fikirleri diğer simge stillerine uygulayabilirsiniz. Bu yüzden bu eğitici yeni başlayanlar için çok iyi; UE / UX tasarımcıları için özel tekniklerle AE arayüzünde nasıl çalışacağınızı öğretir.
Ancak bu eğiticilerin herhangi biri, UX animasyon becerilerinizi geliştirecek, dolayısıyla gözlerinizi yakalayan yer işaretlerinden emin olun.
