Mikro etkileşimler oluşturmak için Adobe XD'yi kullanın

Feb 4, 2026

Nasıl Yapılır

(Resim Kredisi: Adobe)

Adobe XD, tasarımcıların ve DEV ekiplerinin iş akışı bakımı ile geliştirilmesinde geliştirilmesinde hayati bir rol oynayan tasarım yaşam döngüsündeki en önemli süreçlerden biri olan prototipleme konusunda yardımcı olabilir. Son zamanlarda prototipleme manzarasında bazı önemli değişiklikler yapıldı: Tasarımcılar seçim için bozuluyor.

Tıpkı diğer birçok disiplin gibi, her şeyi başarabilen tek bir tasarım ve prototipleme aracı yoktur. Farklı aşamalar benzersiz bir araç seti gerektirir. Tasarımcıların yalnızca Photoshop ve Escra'ya güvendiği günler geçti. Büyük UI tasarım araçları olsa da, hızlı kullanıcı akışları ve tel kafesleri için yeteneklere sahip değiller ( tel kafes araçları Daha fazla tel yanma seçeneği için).

Şimdi tasarımlarda artan miktarda etkileşim ile - animasyonlar, jestler ve ses kontrolü gibi - tüm bu prototipleme yeteneklerini elde edebilecek ve hala işleri basit tutabilecek bir araç bulmak zordur. Kodlama bu etkileşimleri yaratmanın bir yoludur, ancak zaman alıcıdır. Neyse ki, Adobe XD, 'Otomatik Animate' adlı kullanışlı bir özelliği içeren prototipleme aracına bir güncelleme yaparak kurtarmaya geldi. Güçlü araç kümesine en büyük ilavedir.

Adobe Creative Cloud Get

Buradaki fikir basittir: Otomatik Animate, tasarımcıların bir sanat tahtasını çoğaltarak veya bir nesnenin özelliklerini değiştirerek interaktif animasyonlarla interaktif prototipler oluşturmasını sağlar. Bu özellikler, X ve Y'nin, opaklığın, rotasyonun boyutları, konumları gibi herhangi bir şey olabilir. Önceden Adobe XD, kayma, itme ve çözme gibi temel etkileşimler sundu.

Yeni özelliklerin eklenmesiyle, tasarımcılar kolayca harekete dayalı animasyonlar oluşturabilir, bu da kullanıcının çoklu ekranlar arasında gezindiklerinde zihinsel bilgi akışı modelleri oluşturmasına yardımcı olacaktır. Bu, geçici olarak ekranın içine veya dışındaki görsel hiyerarşiler, CTA'lar veya mesajlar oluşturmak için de kullanılabilir.

Bu yazıda, Adobe XD'nin bu yeni otomatik animate özelliğini kullanarak basit mikro animasyonların nasıl oluşturulacağını açıklayacağım. Başlamadan önce, nesnelerin otomatik animasyon için nasıl ele alınması gerektiği konusunda dikkat edilmesi gereken birkaç şey var:

Bir nesne veya öğe hedef artaboda değilse, genellikle önizlendiğinde kaybolur.
İlk sanatta bir öğe bulunmadığında, kaybolma eğilimindedir.
Etkileşimleri oluşturacak olan prototip modundayken her zaman iştahları tel
Animasyonlar oluşturmak için, nesnelerin ve elemanların katmanlardaki eşleşen isimleri ve ayrıca grupların adını eşleştirin.

Otomatik Animate kullanarak bir devlet değişikliği yapın

Adobe XD tutorial — Basitçe gelebilir, ancak iki şekil ile başlamanız gerekir. (Görüntü Kredi: Vamsi Batchu)

Otomatik Animate kullanarak basit bir devlet değişikliği örneği yaparak başlayalım. Bu örnekte, değişecek özellikler genişlik, yükseklik ve renktir. Herhangi bir otomatik animasyon geçişi için, ikiden fazla çalışmaya ihtiyacınız var.

İlk sanattada, bir şekil çizin - örneğimizde, 500px x 200px'lik yeşil bir dikdörtgendir. Bu sanattayı çoğaltın ve ikinci sanat panosundaki dikdörtgeni seçin. Genişliği 1000'e ve 500'e kadar artırarak dikdörtgenin özelliklerini değiştirmemiz gerekir. Opaklığı% 50'ye değiştirmek veya rengini pembe yapmak gibi daha fazla değişiklik yapabilirsiniz.

Şimdi sol üst köşedeki prototip sekmesine tıklayın. İlk arttoyu seçin ve oku ikinci iştahta kullanarak bağlayın. Bunu yaptığınızda, tetik, eylem, hedef ve gevşeme gibi parametreleri ayarlamak için kullanılabilecek uygulamanın sağında bir etkileşim sekmesi vardır. Her parametre ihtiyaçlarınıza göre özelleştirilebilir. Tap, sürükle ve zamanlamaya dahil olmak üzere beş tip tetik vardır - animasyonu başlatır.

Eylem sekmesini varsayılan olarak otomatik animate olarak ayarlayın ve örneğimizde sadece iki çalışma tablosu olduğundan, Hedef sekmesini ArtBoard'a ayarlayın. Ayrıca, seçilebilecek ve zamanlanmış birden fazla pürüzsüz geçiş vardır. Otomatik Animate'in sihrini yaptığını görmek için üstündeki Oynat simgesine tıklayın ve dikdörtgeni canlandırın. Eşzamanlı olarak değiştirilmesi gereken ikiden fazla unsur olduğunda, bu elemanların adlarının her iki sanattada da aynı olduğundan emin olun. Bu, uygulamayı bu iki öğenin canlandırılması gerektiğini bildirecektir.

Kartları genişlet

Şimdi daha fazla etkileşimde ve birden fazla unsur içeren bir örneğe ilerler. Bunun için bir karttan oluşan ilk sanat kartını oluşturarak başlayalım. Kart, bir başlık, açıklama ve alt okuma görüntüleme geçmişinde bir bağlantı gibi unsurlara sahip olacaktır. Bağlantının yanında, aşağı bakacak bir ok simgesi olacak. Kullanıcı bağlantıyı tıkladığında, kart önceki girişleri göstermek için bir çekmece gibi açılır. Bu tıklama / musluk fonksiyonunda olduğundan, önceki girişler ilk sanatta oluşturulmamalıdır.

Sonra, bu sanattayı çoğalttık ve kartın birkaç özelliğini değiştiriyoruz. Yapılacak ilk şey, genişletilmiş bir duruma benzemesini sağlamak için dikdörtgen kartın yüksekliğini arttırmaktır. Başlık ve aşağıdaki açıklama değişmeden yapılmalıdır. Şimdi daha önce bahsettiğimiz girişleri ekleme zamanı.

Kart için üç giriş olduğunu hayal edin. Her girişin ana resimde gösterildiği gibi bir giriş adı, giriş tarihi ve bir düğmeye sahiptir. Bir giriş grubu oluşturmak için bir giriş oluşturabilir ve iki kez çoğaltabilirsiniz. Onları ana resimde gösterildiği gibi düzenleyin ve Geçmişi Görüntüleme Metin bağlantısını bu girişlerin altına yerleştirin. Genişletilmiş bir durumda olduğundan, yukarı bakacak şekilde ok simgesini döndürün. Bu kadar. Çalışma panolarını kurmayı tamamladınız.

Animasyonu oluşturmak için, ilk artkana gidin ve sol üst köşeden Prototip sekmesine tıklayın. Şimdi ilk sanattodundaki Geçmişi Görüntüle bağlantısını tıklayın ve prototip bağlantısını ikinci araca sürükleyin. Bu, görüntüleme geçmişini tetiği bağlar. Tetikleyiciyi Otomatik Animate'e dokunmak ve harekete geçirmek için sağdaki etkileşim sekmesindeki özellikleri değiştirin. Pürüzsüz çekmece animasyonunu görmek için test edin. Animasyonun yeterince düzgün olmadığını görürseniz, etkileşim sekmesindeki gevşeme seçeneğinde değişiklik yapın.

Sürükle animasyonları yapmak

Sürükle, mobil etkileşimler söz konusu olduğunda en yaygın animasyonlardan biridir. İki iştahlı basit bir örnek deneyelim. İlk sanatta için, herhangi bir renk ve boyutta bir daire oluşturarak başlayın. Şimdi 250px genişliğinde bir dikdörtgen ve 25 piksel yükseklikte oluşturun. Bu dikdörtgeni sekiz kez çoğaltın, her bir kopya arasında 20px boşluğunu koruyun, böylece bir yığın oluşturur. Bu sanattayı çoğaltmadan önce daireyi ilk dikdörtgenin üzerine yerleştirin.

İkinci sanatboard için yapılacak çok şey yok. Sadece çoğaltılmış dikdörtgenlerin her biri arasındaki boşluğu azaltın, böylece sıkıştırılmış gibi hissettirir. İlk artabeye benzer şekilde, daireyi ilk dikdörtgenin üzerine yerleştirin. Son adım, sol üst köşeden prototip sekmesine tıklayarak prototip etmektir. Şimdi ilk sanattadan daireye tıklayın ve bir tetikleyiniz. Tıpkı önceki örnekler gibi, tetiği otomatik animate olarak sürüklemek ve eylemi sürüklemek ve eylem ayarlayarak sağdaki etkileşim sekmesindeki özellikleri değiştirin. Animasyonu önizlemek için Oynat düğmesine tıkladığınızda, blok küre tarafından sıkıştırılıyormuş gibi pürüzsüz bir eylem görebilirsiniz.

Sonsuz yükleyici animasyonları oluşturun

Adobe XD'nin en iyi özelliklerinden biri, otomatik animasyonun birden fazla çalışma panoları arasında uygulanabileceğidir. Böyle bir animasyon yapmak için, sadece özelliklerden birinde basit değişiklikler yapmanız gerekir.

Bir pilin doldurulacağı bir yükleme animasyonu oluşturalım. Bunu mükemmel hale getirmenin anahtarı, ilk sanat kartını doğru şekilde hazırlamaktır. İlk sanat tahtası, resimde gösterildiği gibi bir batarya yer tutucusu vardır. Dikdörtgen şekiller kullanılarak oluşturulabilir. Yer tutucunun içindeki gerçek pil için, ilk sanat tahtası boş olmalıdır (bu% 0'ı temsil eder). Bu sanattayı çoğaltın ve yer tutucunun içine mükemmel uyum sağlayan 50 piksel yüksekliğe sahip yeşil bir dikdörtgen oluşturun. Benzer kopyalar oluşturun, böylece akünün üçüncü sanatta yüksekliği 50 piksel ve benzeri arttırılır. Artboard tamamen dolu olana kadar devam edin.

Şimdi bu sanattalar arasında bir sonsuz bir döngü oluşturmalıyız, böylece senkron yükleme animasyonu yaratır. Bunun için, prototip moduna gidin, ilk artkan'a tıklayın ve prototip okunu ikinci araca sürükleyin. Etkileşim panelindeki özellikleri değiştirin, tetiği zamana ayarlayarak ve ardından gecikmeyi 0 saniyeye ayarlayarak, bu da önizlendiğinde ikinci araca canlandıracak. Son saniyeyi en son üçüncü ve benzeri birinci olarak birbirine bağlayarak, aynı değişiklikleri en sonunda birincisine bağlamadan önce yapın. Sonsuz bir döngü oluşturmak için tüm sanattaları başarıyla ilişkilendirdik. Yüklenmeyi daha yumuşak hale getirmek için gereksinimlerinize göre gevşetme ve süre ayarlarını değiştirin.

Adobe XD kullanılarak denenebilecek tonlarca varyasyon var olmasına rağmen, aracın mevcut yetenekleri sınırlıdır ve hala geliştirme ekibi tarafından güncellenmektedir. Bu nedenle, ilke gibi araçlarla karşılaştırıldığında, XD'nin sınırlı bir araç kümesi olduğu gibi hissedebilirsiniz. Ancak, Adobe, aracı öğrenmek ve kullanmak için aracı basit hale getirmek için mükemmel bir iş yaptı. Karmaşık etkileşimler oluşturmak biraz zaman ve çaba gerektirebilir, ancak XD'nin otomatik animate özelliği kullanılarak tamamen ulaşılabilir. Anahtar, hareketli nesnelerin temellerini anlamak, yeniden boyutlandırmak, katmanlar eklemek ve tetikleyici kullanmaktır.

Bu makale başlangıçta 326'da ortaya çıktı. ağ , dünyanın web tasarımcıları ve geliştiricileri için lider dergisi. Satın almak Sayı 326 veya abone olun .

Daha fazla oku:

40 parlak WordPress öğreticileri
11 Şaşırtıcı JavaScript Çerçeveleri
Neumorfizm gerçekten 2020'nin en sıcak eğilimi mi?

Mikro etkileşimler oluşturmak için Adobe XD'yi kullanın

Otomatik Animate kullanarak bir devlet değişikliği yapın

Kartları genişlet

Sürükle animasyonları yapmak

Sonsuz yükleyici animasyonları oluşturun

Nasıl Yapılır - En Popüler Makaleler

Bir kol nasıl çizilir

Photoshop Renk Değişimi: Bilmeniz Gereken 2 Araçlar

Photoshop'ta renkli animasyon sanatı nasıl boyanır

3DS Max'teki büyük ölçekli ortamlar

Otantik bir manga çizgi roman şeridi nasıl oluşturulur

İzometrik tipografi nasıl tasarlanır

Suluboya ile Cileler Nasıl Oluşturulur

Photoshop CC'sinde ressam efektler oluşturun

Kategoriler