Adobe XD: Otomatik Animate Özelliği Nasıl Kullanılır

Sep 10, 2025

Nasıl Yapılır

(Resim Kredisi: Adobe)

Prototipleme oyununun geç girişine rağmen, Adobe XD, mevcut en iyi ve en hızlı ve en hızlı ve mevcut olan prototipleme araçlarından biridir. Prototipleme, tasarım yaşam döngüsündeki kilit bir işlemdir, aynı zamanda tasarımcıların ve DEV ekiplerinin iş akışı bakımı ile yardım ederek gelişmesinde hayati bir rol oynar.

Tasarımcılar olarak, genellikle kullanıcı deneyimi iş akışının çeşitli aşamalarını tasarlamak için birçok alete ihtiyacımız var. Adobe, tasarımları test etmek için kullanılabilecek, tel kafesleri oluşturarak, DEV ekibine ve ayrıca işbirliğine dayalı tasarımı (listemize bakınız) tel kafes araçları daha fazla seçenek için).

Otomatik Animasyon özelliği, Adobe XD'nin, prensip gibi sorunsuz mikro etkileşimler ve animasyonlar oluşturmak için de kullanılabileceği anlamına gelir. Bu, tasarımcıların zengin prototip deneyimlerini, onboarding akışlarından, mobil atlıkarınlar için animasyonlardan, ilerleme göstergeleri ve daha fazlasını yapmalarına yardımcı olur. Bu özellikle ilgili en iyi yanı, öğrenmesi ve yürütmeniz basit olmasıdır.

Bu yazıda, otomatik animasyon özelliğini kullanarak basit mikro animasyonların nasıl oluşturulacağını açıklayacağım. Hem jest tabanlı hem de musluk tabanlı etkileşimlere bakacağız.

Henüz Adobe XD'siniz yoksa, indir Adobe XD gönderin ve sonra favorimizi kontrol edin Adobe XD Eklentileri .

01. Fav veya Sil'e eklemek için hareketleri kaydırın

Kaydırma etkileşimleri, mobil uygulamalardaki en yaygın kullanılan mikro etkileşimlerden biridir. Bu örnek için, bir müzik çalma listesine bakalım. İlk sanatboard için, içinde beş şarkı ile bir çalma listesi ekranı oluşturacağız. Her şarkı bireysel bir karttır ve esasen her kart sola doğru kaydırıldığında, şarkıyı çalma listesinden çıkarması gerekir. Bir kart doğru kaydırıldığında, şarkıyı kuyruğa eklemelidir.

Başlayalım ve ilk kartı oluşturalım. Şarkının adı, sanatçının adı, şarkının uzunluğu ve derecelendirme gibi temel ayrıntılar ekleyebilirsiniz. Şimdi tüm bu öğeleri tek bir katmana getirin. Benzer kartların beşi yapıldığı kadar çoğaltın. Onları zevkinize göre düzenleyebilirsiniz.

İlk kart için - C1 - Delete eylemi için sol bir kaydırma ekleyeceğiz. Öyleyse, kırmızı bir arka plana sahip küçük bir kare oluşturalım, aşağıdaki ekran görüntüsünde gösterildiği gibi bazı Sil metinleri ve bir simge ekleyin. Tüm bu maddeleri A1 adlı bir katmana gruplandırın. Şimdi C1 ve A1'i bir katman l'de içine birleştirin - böylece A1, C1'in sağ tarafındadır.

02. İkinci kartı oluşturun

İkinci kart için - C2 - benzer bir şekilde doğru kaydırma eylemini sıraya koymak için bir ek ekleyeceğiz. Simge, metin ve yeşil arka plan ile bir grup A2 oluşturun. C2 grubunun soluna ekleyin ve L2 adlı bir kombine katman oluşturun. Şimdi, ilk sanat kartı (S1) tamamlandı. Tüm sanat kartını iki kez iki kez kopyalayalım - S2 ve S3. Swipe ve S3'ü silmek için SQILE ve S3 için SQUIUE için ekledikçe kullanacağız. Bunu yapmak için, bu iştahların her biri için bazı değişiklikler yapmamız gerekiyor. Her iki swipes için ayarlar:

● S1 - A1 ve A2 ile% 0 opaklığını değiştirin ve L1, L2'yi düzenleyin, böylece merkez hizalıdırlar.

● S2 - L1 kartını düzenleyin, böylece L1'in sağ kenarı diğer kartlarla hizalanır. A2 ila% 0 opaklığını değiştirin.

● S3 - L2 kartını düzenleyin, böylece L2'nin sol kenarı diğer kartlarla hizalanır. A1 ile% 0 opaklığını değiştirin.

03. Çalışma panolarını canlandırın

Artık sanat tahtaları tamamen kurulduğunda, bir sonraki adım onları canlandırmaktır. Bunu, aletin sol üst tarafındaki prototip moduna girerek yapabilirsiniz. Şimdi S1 Artboard'da, L1 katmanına tıklayın ve aracın sağ tarafında, Otomatik Animate ve Giderimi Otomatik Animate ve Giderimi Otomatik Animate ve Hedef S2'ye ayarlama işlemini ayarlayarak bir etkileşim ekleyin. Tercihlerinize göre hafifletmeyi de ekleyebilirsiniz. Bu etkileşimi, aracın sağ üst tarafındaki Oynat düğmesine tıklayarak test edin. S1 manto üzerinde, L2 katmanına tıklayın ve aynı ayarları kullanarak benzer bir etkileşim ekleyin, ancak bu durumda, hedefi S3'e ayarlayın. Bu etkileşim sol kaydırmayı yaratacaktır.

04. Kartınızı genişletin

Bakacağımız ikinci etkileşim, çoğunlukla bir listeden veya ürün kataloğundan geçtiğiniz ve bunlardan birine tıkladığınızda, ürün hakkında daha fazla ayrıntı olan yeni bir sayfaya girdiğinizde, çoğu uygulama ve web sitesinde görülür. . Otomatik Animate, bu tür bir etkileşimi canlandırmak için süper basittir. Bu örnek için, bir ürün kataloğu sayfası oluşturarak başlayalım. Örneğin, örneğin bir cep telefonu (örneğin olan), giyim, vb. İçin bir cep telefonu (S1), hamburger menüsü ve bir profil simgesiyle bir başlık çubuğu oluşturabilirsiniz.

05. Resimler ve detaylar üzerinde çalışın

Şimdi, katalog öğelerinin sayısıyla bir başlık metin öğesi oluşturun. Ürün kartlarının her biri için, bir resmin, telefonun, fiyat ve derecelendirmelerin adını alacağız. Bu kartları C1'e C6 arayabiliriz. Bunu yapmanın en iyi yolu, birinci kartı (C1) oluşturmak ve daha sonra takım panelinin sağ üst köşesinde bulunan, tekrar ızgara olarak adlandırılan bir XD'nin şaşırtıcı bir özelliğini kullanın. Bu, hizalamayı ve aralığı sağlam tutmak, kolaylıkla eşyaları çoğaltmanıza olanak sağlar. Bu çalışmada kurulum tamamlandı. İkinci kartı canlandıracağız, bu yüzden bu kartın unsurlarını çözmek önemlidir, böylece XD otomatik animasyon yapabilir.

06. İkinci sanattayı tasarlayın

Şimdi ikinci sanatboard üzerinde çalışmak için. İlk mantarı çoğaltın ve C1, C3-C6 kartlarını silin. Bu sayfayı oluşturmak için mevcut kartı C2'yi kullanacağız, böylece katmanların isimleri aynıdır. İlk önce, kartın arka planını genişletin, böylece başlık çubuğunun altındaki sayfayı kapsayacak şekilde. Artık diğer eşyaları istediğimiz herhangi bir şekilde düzenleyebiliriz - temel fikri, kartın S1'in nasıl olduğundan farklı olması gerektiği, çünkü geçişi görebileceğiniz zamandır. Bu nedenle, cep telefonunun adını 25px'a çarpalım ve cesurlaştıralım. Benzer şekilde, fiyatın boyutunu arttırın ve mobil adın altına yerleştirin. Sonra önemli bölüm - cep telefonunun görüntüsüdür. Boyutunu önemli ölçüde arttırmanız ve aynı zamanda merkezde hizalamanız gerekir.

07. Son dokunuşları uygulayın

Her şeyi düzenlemek ve tasarımı sonlandırın, derecelendirmeleri ve yıldızları her şeyin altındaki ve sola doğru düzenleyin. Bu sanat tahtası, ürünün ayrıntılı versiyonunu temsil ettiğinden, artık hafıza, telefonun mevcut renkleri, telefonun mevcut renkleri, telefonla verilen aksesuarlar, tercihlerinize göre ek bilgiler ekleyebilirsiniz. Art Tahtayı kaydırırken her şey takip edecek. Ayrıca, Hamburger'in başlık simgesini de değiştirebilir, kullanıcının önceki çalışma kartına geri dönmesini sağlamak için. İlk sanattada simge adını eşleştirmek için simgenin adını değiştirmeyi unutmayın.

08. Mikro etkileşimi oluşturun

Mikro etkileşimi oluşturmak için şimdi prototip moduna gidelim. Bunu yapmak için, ArtBoard S1'deki C2 kartını seçin ve Mavi oku ArtBoard S2'ye sürükleyin. Sağ taraftaki etkileşim panelinde, tetiği musluk olarak ayarlayın, S2 olarak otomatik animasyon ve varış noktası olarak işlem yapın. Pürüzsüz etkileşimler için, hafifletmek için kolaylıkla gidermek ve 0.4 veya 0.6 saniyelik bir süre. Artboard S2'deki arka ok simgesine tıklayın ve oku S1'e sürükleyin. Bunun için aynı ayarları kullanabilirsiniz. Şimdi S1'e tıklayın ve sihri görmek için prototipi oynatın. C2 kartının kesildiğinde pürüzsüz bir animasyona uyacaksınız. Animasyonun daha pürüzsüz hale getirmek için hafifletme ayarlarını ayarlayın.

09. Temellerin ötesine geç

Artık basit etkileşimlerin nasıl oluşturulacağı konusunda temel bir fikriniz var. Birden fazla çalışma panoları arasında pürüzsüz geçişleri görmek için elemanların, boyutların ve şekillerin renklerini değiştirerek otomatik animasyona da deneyebilirsiniz. Tetikleyicilere dokunma ve sürüklemeye ek olarak, tasarımcıların belirli bir tuş musluğundaki prototipleri tetiklemek için klavye tuşlarını ve GamePad tuşlarını kullanmak gibi deneylerinin deneyebileceği başka tetikleyiciler de vardır. Ayrıca, Alexa, Siri vb. İçin ses prototipleri oluşturabileceğiniz ve tasarlayabileceğiniz bir mod vardır, burada cümleler atayabileceğiniz ve bunları spesifik cevaplar almak için konuşabiliyorsunuz.

Daha fazla oku:

En İyi Web Sitesi İnşaatçıları
Bilmeniz gereken Adobe XD kısayolları (ama muhtemelen yapmaz)
Adobe XD ile prototipler inşa et

Adobe XD: Otomatik Animate Özelliği Nasıl Kullanılır

01. Fav veya Sil'e eklemek için hareketleri kaydırın

02. İkinci kartı oluşturun

03. Çalışma panolarını canlandırın

04. Kartınızı genişletin

05. Resimler ve detaylar üzerinde çalışın

06. İkinci sanattayı tasarlayın

07. Son dokunuşları uygulayın

08. Mikro etkileşimi oluşturun

09. Temellerin ötesine geç

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

Master versiyonu kontrolü

GreenSock Animation Platform ile başlayın

CSS değişkenleriyle siteyi nasıl ayarlanır

Bir Chatbot Arayüzü Nasıl Yapılır

Geliştirici becerilerinizi geliştirmek için 4 ipucu

Üç.js kullanarak WebGL ile başlayın

Bir köpek kalem portresi çizin

Van Gogh gibi bir portre boya

Kategoriler