Hemen Çıkma Oranlarını Azaltmak için Özel Yükleme Animasyonları Nasıl Oluşturulur

Başlangıçta bir trompet olarak bilinen bir yükleme animasyonu, veri toplamanın veya arayüz oluşturmanın ilerlemesini belirtmek için kullanılır. Bunu belirtmek için bir zamanlar sıkıcı bir ilerleme çubuğu kullanabilseniz de, o günler geride kaldı.

Bugün, CSS, jQuery veya basit animasyonlu GIF'lerden yararlanan iyi hazırlanmış bir animasyon, arayüzlerinizi canlandırmak ve ürününüze kişilik eklemek için bir fırsattır.

Düşünceli animasyonlar, içeriğinizin yüklenmesini beklerken kullanıcılarınızı eğlendirebilir. İyi bir yükleme animasyonu, beklentileri yönetmeye yardımcı olur ve ilgiyi koruyarak kullanıcı deneyimini geliştirir.

Bu eğitimde, temel şekiller oluşturmak için Sketch'i ve basit özel yükleme animasyonlarını hızla oluşturmak için Principle'ı kullanacağız. (Bu uygulamaların ikisi de Mac içindir.) Trello, Flickr, Slack ve daha fazlası tarafından kullanılan renkli yükleme animasyonlarını nasıl oluşturacağınızı öğreneceksiniz.

Hadi hadi bakalım.

Gevşek Yükleme Animasyonu

Sketch'te, kenarları 50 piksel veya her biri 100 piksel yarıçaplı dört yuvarlak kare çizin. Mükemmel daireler gibi görünmeleri gerekir, ancak animasyonda çizgi germe efekti oluşturmak için köşeleri yuvarlatılmış kareler kullanıyoruz.

Dört şekli, her iki kenarı arasında 150 piksel boşluk olan hayali bir kare oluşturacak şekilde yerleştirin. Dört farklı renk uygulayın (#35BA90 yeşil, #69CADD mavi, #EBA900 sarı ve #E20661 pembe).

Şekilleri İlke'ye aktarın, gruplayın ve grubu yuvalamak için "Bileşen Oluştur" u tıklayın.

İç içe grubun içine gidin ve çalışma yüzeyini 15 derece döndürün. Ardından her bir daireyi seçin ve orijinal konumuna geri döndürün (15 derece geriye doğru). Bu, düz bir çizgide esneme etkisi yaratır.

Çalışma yüzeyine bir "Otomatik" tetikleyici uygulayın ve ardından her yuvarlak dikdörtgeni çalışma yüzeyinin karşı tarafına 295 piksel uzunluğunda uzatın. Her iki çalışma yüzeyindeki her şekle %75 opaklık verin.

İkinci çalışma yüzeyine başka bir "Otomatik" tetikleyici uygulayın. Yeni çalışma yüzeyinde, her satırı orijinal 50 piksel genişliğine, ancak orijinal konumunun zıt tarafına küçültün.

Bir "Otomatik" tetikleyici ile son çalışma yüzeyini ilkine bağlayın. Son sonucu önizlemek için "Ebeveyne Dön" düğmesini tıklayın.

İpucu: “Ebeveyne Dön”e gittiğinizde, ana grubu Slack'e daha çok benzemek için -30 derece döndürebilirsiniz. Ayrıca, "Canlandır" panelinin içindeki animasyon hızını değiştirebilir ve geçişleri yumuşatmak için "İkisini de Kolaylaştır" efekti uygulayabilirsiniz.

Trello Yükleme Animasyonu

Sketch'i kullanarak 100 piksellik mavi bir kare çizin. 60 piksel genişliğinde ve 140 piksel yüksekliğinde beyaz bir dikdörtgen çizin. 30 piksellik bir üst ve sol kenar boşluğu ile önceki karenin sol üst köşesine hizalayın. Bu beyaz dikdörtgeni çoğaltın, 30 piksel sağ kenar boşluğuyla karenin sağına hizalayın ve yüksekliğini 70 piksele düşürün.

Çalışma yüzeyini İlke'ye aktarın ve yeni bir ana kare oluşturmak için "Otomatik" tetikleyiciyi uygulayın. Yeni sanat tahtasında, beyaz dikdörtgenlerin yüksekliklerini ters çevirin (sol dikdörtgeni 70px ve sağdaki dikdörtgeni 140px yapın). Geçişi yumuşatmak için "Animate" panelinde bir "Kolaylaştır" efekti uygulayın.

yuvarlanan daire

Sketch üzerinde bir daire çizin. "Tire" ve "Boşluk" değerleriyle ve dolgusuz 10 piksellik bir kenarlık uygulayın. Kenarlık için daha sonra oluşturacağınız döndürme efektini vurgulayacak bir “Açısal Gradyan” rengi kullanın.

Yeni bir İlke dosyası açın ve daireyi Sketch'ten aktarmak için “İçe Aktar” düğmesini kullanın. Arka arkaya iki "Otomatik" tetikleyici uygulayın.

Döndürme efekti oluşturmak için orta çalışma yüzeyindeki daireyi seçin ve "Açı" değerini 360 derece olarak değiştirin. Ardından üçüncü daireyi seçin ve sol panelde ona farklı bir ad verin (yani “kopyala”). Bu sonsuz dönüşü taklit eder.

Son olarak, başka bir "Otomatik" tetikleyici ile üçüncü çalışma yüzeyini ilkine geri bağlayın. Çalışma yüzeyleri 1 ve 2 arasındaki zaman çizelgesine "Doğrusal" bir geçiş uygulayın. Önizleme penceresinde az önce oluşturduğunuz animasyonu kontrol edin.

Flickr Yükleme Animasyonu

Yan yana mavi bir daire ve pembe bir daire çizin. Bunları İlke'ye aktarın ve yeni bir çalışma yüzeyi oluşturmak için bir "Otomatik" tetikleyici uygulayın.

Dairelerin konumlarını ters çevirin ve üçüncü bir çalışma yüzeyi oluşturmak için yeni bir "Otomatik" tetikleyici uygulayın. Bu yeni çalışma yüzeyinde, sol paneldeki dairelerin katmanının sırasını ters çevirin.

Dördüncü bir çalışma yüzeyi oluşturmak için üçüncü bir "Otomatik" tetikleyici uygulayın. Bu son çalışma yüzeyinde, dairelerin konumunu bir kez daha ters çevirin ve son çalışma yüzeyinden ilkine son bir "Otomatik" tetikleyici uygulayın.

Yükleme Türü

İlke üzerinde yeni bir proje oluşturun ve Metin aracını kullanarak “YÜKLENİYOR” yazın. Metni sola hizalayın ve çalışma yüzeyinde dikey olarak ortalayın.

Arka arkaya beş kez bir "Otomatik" tetikleyici uygulayın. Son çalışma yüzeyi döngüsünden beşinci tetikleyiciyi ilk çalışma yüzeyine geri getirin.

İlk çalışma yüzeyinden başlayarak ve sağa hareket ederek, orijinal “YÜKLENİYOR” metninin yanına sırasıyla sıfır, bir, iki, üç, iki ve bir nokta eklemek için her çalışma yüzeyindeki metni düzenleyin. Çalışma yüzeylerinin ilerlemesi şöyle görünmelidir:

YÜKLENİYOR YÜKLENİYOR. YÜKLENİYOR.. YÜKLENİYOR… YÜKLENİYOR.. YÜKLENİYOR.

Artık az önce oluşturduğunuz animasyonu önizleyebilirsiniz.

Titreşen Noktalar

60 piksellik bir noktayı takip edin. Bir nokta daha kopyalayıp yapıştırın ve 60 piksel sağa yerleştirin. 60 piksel boşluk da dahil olmak üzere her iki noktanın da çalışma yüzeyinizde mükemmel bir şekilde ortalandığından emin olun.

Arka arkaya dört kez bir "Otomatik" tetikleyici uygulayın.

İkinci çalışma yüzeyinde ikinci noktayı 30 piksele küçültün.

Üçüncü çalışma yüzeyinde, ikinci noktayı 0 piksele ve ilk noktayı 30 piksele küçültün.

Dördüncü çalışma yüzeyinde, ikinci noktayı tekrar 30 piksele ölçeklendirin ve ilk noktayı 0 piksele kadar küçültün.

Beşinci çalışma yüzeyinde, ilk noktayı 30 piksele küçültün ve çalışma yüzeyini bir "Otomatik" tetikleyici ile ilk panoya geri bağlayın.

yuvarlanan noktalar

Altı kenarlı bir kalıpta bulacağınız düzenlemeye beş nokta yerleştirin. Çalışma yüzeyini İlke'ye aktarın ve ortalayın.

Çalışma yüzeyine bir "Otomatik" tetikleyici uygulayın.

Yeni çalışma yüzeyinde nokta grubunu 360 derece döndürün.

Bir "Otomatik" tetikleyici ile ikinci çalışma yüzeyini birinciye geri bağlayın.

titreşimli daire

5 piksel kenarlığı olan ancak dolgusu olmayan 150 piksellik bir daire içinde merkeze hizalanmış 50 piksellik bir daire ile başlayın.

Arka arkaya üç kez bir "Otomatik" tetikleyici uygulayın.

İlk çalışma yüzeyinde, çizgi daireyi 50 piksele ve iç daireyi 10 piksele küçültün.

Üçüncü çalışma yüzeyinde, çizgi çemberini 200 piksele kadar ölçeklendirin ve ona %0 opaklık verin. İç daireyi 150 piksele kadar ölçeklendirin ve %50 opaklık verin.

Son çalışma yüzeyinde, iç daireyi 200 piksele kadar ölçeklendirin ve ona %0 opaklık verin. Çizgi dairesini 50 piksele kadar ölçeklendirin ve %25 opaklık verin.

Son çalışma yüzeyine bir "Otomatik" tetikleyici uygulayın. %50 opaklıkla iç daireyi 10 piksele küçültün.

Bir "Otomatik" tetikleyici ile son çalışma yüzeyini ilkine bağlayın.

atlama noktaları

Aralarında 50 piksel boşluk olacak şekilde 50 piksel yüksekliğinde üç mükemmel daireyi hizalayın.

Bir "Otomatik" tetikleyici uygulayın. İkinci çalışma yüzeyinde, ilk daireyi 50 piksel yukarı taşıyın.

İkinci panoya bir "Otomatik" tetikleyici uygulayın. Üçüncü çalışma yüzeyinde, ilk iki daireyi seçin ve bunları 50 piksel yukarı taşıyın. Üç daire çapraz bir çizgide uzanmalıdır.

Üçüncü panoya bir "Otomatik" tetikleyici uygulayın. Dördüncü çalışma yüzeyinde, ilk daireyi 50 piksel aşağı hareket ettirin. Son iki daireyi seçin ve onları 50 piksel yukarı taşıyın.

Dördüncü panoya bir "Otomatik" tetikleyici uygulayın. Beşinci çalışma yüzeyinde, ilk iki daireyi 50 piksel aşağı hareket ettirin. Son daireyi seçin ve 50 piksel yukarı taşıyın.

Beşinci panoya bir "Otomatik" tetikleyici uygulayın. Altıncı çalışma yüzeyinde, son iki daireyi 50 piksel aşağı taşıyın.

Son olarak, ilk çalışma yüzeyine geri dönün, ilk noktayı 50 piksel yukarı taşıyın ve bir "Otomatik" tetikleyici ile son çalışma yüzeyini ilkine bağlayın. Son sonucu önizleyebilirsiniz.

Klasik Yükleyici

Sketch'te bir daire çizin ve ona dolgusuz 20 piksellik gri bir kenarlık verin.

Üzerine aynı dairenin bir kopyasını yapıştırın ve kopya dolgusunu farklı bir renkle değiştirin. Bu örnek için mavi kullanacağız.

Mavi dairenin dörtte biri ile örtüşen bir kare çizin. Dikdörtgen katmanını daire katmanının altına taşıyın ve dikdörtgen katmanına “Maske” uygulayın.

İlke'ye gidin ve Sketch resmini “İçe Aktar” düğmesiyle içe aktarın.

İlk çalışma yüzeyine bir "Otomatik" tetikleyici uygulayın ve mavi daireyi 360 derece döndürün.

İkinci çalışma yüzeyine ikinci bir "Otomatik" tetikleyici uygulayın. Oluşturulan üçüncü daire katmanını "kopyala" olarak yeniden adlandırın ve bir "Otomatik" tetikleyiciyle ilk çalışma yüzeyine geri bağlayın.

Çözüm

Bu denenmiş ve gerçek yükleme animasyonlarından birkaçını oluşturma alıştırması yaptıktan sonra, burada öğrenilen becerileri kullanarak kendi uygulamalarınız için benzersiz bir animasyon oluşturma becerilerinizden emin olmalısınız.

Biraz hayal gücü ve Sketch and Principle'da bulunan kullanışlı araçlarla, birkaç dakika içinde uygulamanızın tasarımına uyan benzersiz bir yükleme animasyonu oluşturabilirsiniz. Kullanıcılarınız, profesyonel görünümü ve uygulamanızın sıkı çalıştığını gösteren samimi göstergeyi takdir edeceklerdir.

• • •

Toptal Tasarım Blogunda daha fazla okuma:

• eCommerce UX – En İyi Uygulamalara Genel Bir Bakış (Infografik ile)
• Ürün Tasarımında İnsan Merkezli Tasarımın Önemi
• En İyi UX Tasarımcı Portföyleri – İlham Veren Vaka Çalışmaları ve Örnekler
• Mobil Arayüzler için Sezgisel İlkeler
• Öngörülü Tasarım: Büyülü Kullanıcı Deneyimleri Nasıl Yaratılır