Kalkınan UX Hareket Tasarımcıları için En İyi 20 Freebies

Arayüz tasarımcıları, kullanıcı eylemlerini taklit eden animasyonlu örnekler ile UX tasarımına daha fazla ilgi gösteriyor. Bu UX örnekler harekete güvenmek animasyon efektleri ile tanımlamak Bir arayüzün kullanıcı girişine nasıl cevap vermesi gerektiği.

Çoğu UX tasarımcısı bu animasyonları oluşturmak için yazılımı kullanmayı öğrenir. En popüler iki seçenek Adobe After Effects ve İlkedir (yalnızca OS X). Yapabilirsin tasarım arayüzü örnekler Photoshop gibi bir programda ve UI'leri bu programlara taşıyın animasyon için.

UX animasyonu öğrenmekle ilgileniyorsanız, freebies muazzam bir varlık olacaktır. Başkalarının çalışmalarını inceleyebilir ve her şeyin nasıl çalıştığını görmek için tasarımlarıyla oynayabilirsiniz.

Aşağıda sadece İlke ve AE kullanıcıları için en iyi freebies bulacaksınız UX hareket tasarımına girmek. Kesinlikle anlamanıza yardımcı olacaklar UX animasyonu nasıl çalışır, ve kendi inşa etmek nasıl.

1. Eylemi Sil

hızlıca kaydırma mobil uygulamalarda çeşitli amaçlar için çok yaygın bir işlemdir. Varsayılan iOS kaydırma işlemi öğeleri düzenlemek / silmek için alternatif seçenekleri görüntüleme, Ve Ramil Derogongun tarafından yaratılan bu freebie'ye tam olarak ne alıyorsunuz?.

After Effects için ücretsiz AEP dosyasını indirebilir ve kendiniz deneyebilirsiniz. UI bir çok temel tel kafes şeması kullanıcı girişi ile mavi bir nokta olarak görüntülenir. Bu tür kullanıcı davranışları gösterilmesi en iyisidir animasyon yoluyla çünkü geliştiricilere görme şansı veriyor arayüz nasıl çalışması gerekir.

2. Widget Kaydırma

İşte odaklanan başka bir tokatlamak animasyonlu mockup var slayt gösterisindeki alışveriş sepetindeki öğeler. Leon Wu tarafından tasarlanan bu ücretsiz tokatlamak animasyon İlke için yapılan bir PRD dosyası ile birlikte geliyor.

Animasyon son derece basittir ve öğelerin ekranda nasıl hareket etmesi gerektiğini gösterir basınç uygulandığında. Aynı zamanda hafifletici etkisi kaydırma işlemi serbest bırakıldığında.

3. Dualshock UI

İşte Alexander Boychenko'nun paylaştığı inanılmaz dinamik UX animasyon efekti. Bu mockup, mobil uygulama kullanıcı arabirimi için PlayStation Controller'ı temel alır. Ücretsiz olarak indirebileceğiniz bir Eskiz ve İlke dosyası içerir.

Bu freebie, bu geçişlerin nasıl oluşturulacağını gösterir. ekranlar arasında kaydır. Ancak, sayfa öğelerinin ekran etrafında nasıl hareket ettiğini de görebilirsiniz. çeşitli yönlerde.

4. Hamburger Menü Animasyonu

Hamburger simgeleri hala mobil arayüzlerde öfkeli. Bu menü simgesi freebie nasıl yapılacağını gösterir. üç çubuk simgesini "X" simgesinin içine yerleştirin.

Bu bir yinelenen animasyon, bu yüzden "X", bir hamburger menü simgesine geri döner. Bu öğrenmek için harika bir freebie UI elemanları için vektör manipülasyonu.

5. Snapster

Bu ücretsiz mockup Snapster adlı bir mobil uygulama içindir. Odaklanır karşılama / onboarding ekranında kullanıcıların uygulamanın demolarını nerede görebileceğini ve gerçekte nasıl çalıştığını öğrenebilecekleri yerleri.

Bu bir PRD dosyası, ve maalesef bu After Effects ile hoş görünmüyor, bu nedenle yalnızca Prensip kullanıcıları bundan yararlanabilir.

6. Spinners Yükleme

İşte için bir AEP After Effects için freebie mobil yükleme iplikçiler. Bu tür animasyonlu GIF türleri, Ajax ana web geliştirmeye başladığında çok popüler oldu..

Şimdi bu mobil yükleyiciler bir düzine kadar bir düzine ve hatta olabilir yoğun özelleştirilmiş belirli arayüzlere uyması için. Bu freebie, değiştirmek isterseniz vektörleri düzenlemek için bir AEP dosyası ve bir Eskiz dosyası ile birlikte gelir.

7. Geçişi Oynat / Duraklat

Geçiş efektleri genellikle çok basit görünür, ancak aslında iyi miktarda iş gerektirir. Alex Pronsky tarafından oluşturulan bu oynat / duraklat animasyon harika bir örnektir.

Bu freebie ile çeşitli ince çizgi simgelerini nasıl canlandıracağınızı inceleyebilirsiniz. şekiller ve semboller halinde. Programı öğrendikten sonra, bu tür şeyleri yapmak çok daha kolay hale gelir, bu nedenle araştırma için hizmetinizde freebies olması yardımcı olur.

8. iPhone Mockup

Bu freebie doğrudan animasyon içermese de, kullanılması amaçlanmıştır. iPhone uygulamalarında üretim çalışması için. After Effects'te bir iPhone şablonu olarak kullanmak için ücretsiz bir iPhone 5S AEP dosyası.

Basitçe arayüz mockup'ınızı içe aktarın ve After Effects'te animasyonları oluşturun. Daha sonra ekibinizle paylaşmak için bu iPhone cihazına bağlayabilirsiniz..

9. iPhone Şablonu

Bu başka özel After Effects şablonu Birlikte daha modern iPhone tasarımı. Freebie bu sayfadan UX in Motion'ta edinilebilir..

Şablondaki her şey özelleştirmek için süper kolay. İndirme sayfasında, uygulamanın nasıl canlandırılacağını öğrenebileceğiniz "Video Talimatları" etiketli bir bölüm de bulacaksınız..

10. Mikro Animasyon

En küçük uygulama animasyonları bile kullanıcı deneyimi üzerinde büyük bir etki yaratabilir. Bu freebie bir görüntüler "Animasyon" mikro animasyon Ne zaman bir kullanıcı bir gönderiyi "severse".

Kalp simgesi kendi animasyonuna sahip kullanıcının profil fotoğrafı beğeniler yığınına eklendi. Bu freebie sadece İlke için ve ayrıca bir .mov dilerseniz indirmek için dosya.

11. Cüzdan Uygulaması

Dijital cüzdanlar çok daha popüler hale geliyor ve bu freebie tasarımı tasarlamayı kolaylaştırıyor. Tüm ham vektör öğeleri içeren bir Sketch dosyasını ve Principle animasyonu için ücretsiz bir PRD dosyasını alırsınız.

Bu freebie, küçük bir proje olarak Sergey Bykov tarafından tasarlandı. Ama parçalara ayırırsanız ve adım adım animasyon ile çalışırsanız çok eğitici olabilir..

12. iOS Anahtarı

Apple'ın iOS 7'si ile dünya, açma / kapama etiketleri için yeni tasarlanmış bir anahtar aldı. Bu ücretsiz bir animasyon da dahil olmak üzere birçok farklı etkiye yol açtı. yerel açma / kapama düğmesini taklit eder.

Bu dosyada, basit bir hareket hızı ile çok basit bir animasyon efekti elde edersiniz. Anahtar hareket eder ve arka plan yeşile döner, ardından anahtar kapatıldığında geri döner.

13. Ritter Uygulaması

İşte Ritter App dediği şey için Sergey Bykov tarafından yayımlanan başka bir büyük freebie. Bu, vektör arayüzü için ücretsiz Eskiz dosyası ve İlke animasyonu için ücretsiz bir PRD dosyası içerir..

Alacaksınız birçok farklı animasyon Bu freebie içinde, bu yüzden orta-ileri bir tasarımcı için daha yararlı olacağını düşünüyorum. Yeni başlayanlar ondan da çok şey öğrenebilir, ancak dik bir öğrenme eğrisi olabilir.

14. Arkadaşlarını davet et

Google'ın artı simgesi açılır menüsünü hepimiz biliyor ve seviyoruz. Peki, Jardson Almeida, basit bir Materyal Tasarımı konseptine dayanan bir Arkadaş Davet menüsü hazırladı.

Her şey Sketch'de tasarlandı ve animasyon için Prensip'e aktarıldı. Her iki dosyayı da indirebileceğiniz ve oynayabileceğiniz freebies olarak alıyorsunuz.

15. Kart Kaydırma

İşte sadece İlke kullanıcıları için yapılmış başka bir genel swiping freebie var. Bu bir kart kaydırma arayüzü genel amaçlı slayt gösterileri veya yerel uygulama kullanıcı arayüzleri için oluşturulmuş.

Bence bu ilkeye yeni başlayan yeni başlayanlar için mükemmel bir freebie. Kendini kaybolmuş hissedecek kadar karmaşık değil, ama önemsiz hissedecek kadar basit değil..

16. Haritada Sohbet Et

Birçok tasarımcı hala arayüzler için Photoshop kullanıyor ve bu harita sohbet freebie için de geçerli. Arabirim için bir PSD dosyasını ve İlke animasyonu için bir PRD dosyasını indirebilirsiniz..

Stil için şaşırtıcı derecede evcil bir animasyon, ancak yine de harika görünüyor ve tam olarak basit bir harita / konum belirleme uygulamasında beklediğiniz gibi çalışıyor.

17. Uygulama Yükleme

Mobil uygulamalar sıklıkla kullanır yükleme ekranları ziyaretçilere arka uçta bir şeyler olduğunu söylemek. Bu koleksiyondaki favori freebilerimden biri, Roman Wagner'in yarattığı bu yükleme animasyonu..

Tek tek elemanları yükler birbiri ardına yükleme ekranı bittiğinde. Bu animasyon mobil uygulama tasarımı alanında çok yumuşak ve tamamen güvenilir.

18. Onboarding Kartları

Kullanıcı onboarding Her yeni mobil uygulama için çok önemli bir adım. Bu aşamada bazı animasyonlar eklemek her zaman güzeldir, bu onboarding kart animasyonlarının uygulama tasarımcıları için çok yararlı olmasının nedeni budur..

Bu Austin Baird tarafından yaratıldı ve herhangi bir UI / UX projesinde kullanılmak üzere ücretsiz olarak piyasaya sürüldü.

19. İlke Demoları

İlkeye daha fazla girdikçe, çok sayıda gelişmiş iş akışı tekniği öğreneceksiniz. Daha ileri gitmek için en iyi freebies'ten biri, Yalantis yaratıcı ekibi için yaratılmış olanı..

Bu, Principle kullanıcılarının indirmesi ve oynaması için tamamen ücretsiz bir kaynaktır. Principle animasyonunda nasıl profesyonel olunacağını gösteren birkaç püf noktası kapsıyor.

20. Açılır Menüler

Menü açılır menüleri, dikkatimizi çekmek için genellikle çılgın animasyonlar kullanır. Bu After Effects freebie bir kullanır açılır merdiven animasyon münferit elemanlar için onları merdiven gibi düşürmelerini sağlamak için.

Bu herkes için faydalı olmayabilir, ancak After After Effects arayüz animasyonu hakkında bilgi edinmek için kesinlikle harika bir yoldur..

Son sözler

Bu kaynakların tümü kendi projelerinizde indirmek ve oynamak için tamamen ücretsizdir. UX animasyon için yepyeni iseniz, bu freebies inceleyerek çok şey öğreneceksiniz garanti. Başka bir büyük kaynak biliyorsanız, yorumlardaki bağlantıları bırakmakta özgürsünüz.