Arayüz Tasarımı: Animasyon Kullanımı

Uygulama geliştirirken Apple Tasarım Prensiplerinden faydalanarak doğru animasyonlar ile büyüleyici bir kullanıcı deneyimi oluşturabilirsin.

Sabah Kemal Cansu
TurkishKit
3 min readMay 10, 2019

--

Merhaba TurkishKit okuyucuları👋, yeni bir tasarım yazısı ile karşınızdayız 🎉Bugünkü konumuz iOS uygulamalarında kullanmanız gereken animasyon kuralları ve teknikleri.

Animasyonlar, kullanıcı ve içerik arasında görsel bir duygu oluşturur. Doğru kullanım sağlandığında animasyon kullanıcıya durumu aktarabilir, geri bildirim verebilir veya kullanıcıların aksiyon almalarına yardımcı olabilir.

iOS uygulamalarınızda animasyon kullanmayı düşünüyorsanız uymanız gereken kurallar ve teknikler var. Bu kural ve teknikler uygulamanızdaki mizanpajı bozmadan ve kullanıcılarınızın kafasını karıştırmadan ilermenizi sağlar.

Animasyonları Mantıklı Kullanın.

Uygulamalarınızda kullanacağınız animasyonlara karar verirken mantıklı düşünün ve sadece animasyon kullanmak için animasyon kullanmayın. Efekt ve animasyonları kullanırken mutlaka kullanıcıyı bir sonuca bağlayın ve animasyon sonucunda beklentisini karşılayın.

Karmaşıklığı önlemek, uygulamanızdaki keyfi arttırmak, belirli derinlik algıları oluşturmak ve sürükleyici bir deneyim algısı sağlamak için animasyonlar tercih edilmektedir.

Animasyon Örneklendirmeleri — iOS Uygulamaları

Animasyonlar çoğu zaman kullanıcıları yönlendirme amacı ile de kullanılmaktadır. Örneğin; kullanıcının telefonu bir yere tutması veya sağa sola sallaması gerekiyorsa bunlar animasyon ile ifade edilebilir ve kullanıcı bu sayede daha rahat aksiyona geçirilebilir.

Animasyon ile hareket tarifi — Apple Pay — iOS Uygulamaları

Yumuşak Geçişler, Akıcı Deneyim.

Uygulamalarınızda animasyon kullanmaya karar verdiğiniz zaman yapmanız gereken temel şeylerden bir tanesi de yumuşak geçişler kullanmak. Fiziksel tabanlı kaydırma, yumuşak geçişler ve sakin animasyonlar iOS kullanıcıları için alışılmış animasyon türleridir. Eğer bir oyun geliştirmiyorsanız kesinlikle yumuşak geçişli animasyonlar kullanmanız tavsiye edilir aksi halde kullanıcı sert geçişler nedeniyle sürükleyici veya akıcı bir deneyim yaşayamaz.

Yumuşak geçişler ile işlem başlatma ve sonlandırma — iPad Apps

Keskin geçişler kullanıcıda hata veya ‘yarım kaldı’ hissiyatı yaratabilir. Akışa animasyon ile başladıysanız bitişi de animasyon ile yaparsanız, kullanıcı o animasyon ile işlemini tamamladığını hisseder ve akıcı bir deneyim gerçekleştirmiş olur.

iOS Uygulama Arası Geçişler
Apple Watch Animasyon

Bırakın kullanıcı karar versin.

Animasyonları kullanırken dikkat etmeniz gereken noktalardan bir tanesi de kullanıcya karar verme opsiyonunu tanımak. Animasyonlar ortalama 100–500ms ile kullanıcıların karşısına çıkmalıdır. Daha fazla süren animasyonlar kullanıcıda hata, donma veya açılmama hissiyatı uyandıracağı gibi daha az süre verilen animasyonlar “keskin” bir yapıya sahip olacaktır.

Animasyon süreleri ve hareket görüntüleri

Kullanıcılar diledikleri zaman animasyonları kapatabilmelidirler. Düşük batarya uyarıları, bekleme sürelerinde azalma, hız ve kullanılabilirlik çoğu zaman kullanıcıların animasyonları kapatmasını tetikleyebiliyor ve kapatılamayan animasyonlar ise kullanıcıyı sıkıyor hatta çoğu zaman uygulamayı bırakmasına sebep olabiliyor.

Akıcı bir kullanıcı deneyimi gerçekleştirmek için animasyonların olup olmayacağına bırakın kullanıcı karar versin.

Böylelikle iOS uygulaması geliştirirken nasıl animasyonlar kullanmanız gerektiğini bu yazımızda öğrenmiş olduk. Tasarım alanında nasıl animasyon oluşturabileceğimizi ilerleyen yazılarımızda öğreneceğimiz de hatırlatmak isterim. Başka bir yazıda görüşmek üzere! 🤗

Swift Öğrenin. Uygulama Geliştirin. Sınırların Ötesine Geçin.

Hem kod yazmaya yeni başlayanların hem de profesyonellerin rahatlıkla takip edebilecekleri 40 saatlik videolu eğitim ile Swift programlama dilini derinlemesine keşfedin. Eğitim boyunca karşılaşacağınız problemleri birebir online görüşmelerde çözün.

Bizi daha yakından takip etmek istiyorsanız, sosyal medya hesaplarımıza aşağıdan ulaşabilirsiniz!

Twitter | Instagram | Facebook

--

--