İlke ve Taslak ile Kullanıcı Arayüzü Animasyonu için Adım Adım Kılavuz

Animasyon ve geçişler göz önünde bulundurularak bir UI arayüzü tasarlamak, bir sonraki uygulamanız için daha iyi bir kullanıcı deneyimi (UX) planlamanın harika bir yoludur. Animasyonlu mikro etkileşimler, dikkat süresinin kısa olduğu bir dünyada kullanıcı katılımını teşvik etmenin mükemmel bir yoludur. Airbnb'nin kısa süre önce "yerel uygulamalara animasyon eklemeyi çok kolaylaştıran yeni açık kaynak aracı" olan Lottie'yi tanıtmasının nedeni budur.

Lottie gibi projeler, hem uygulamalar hem de web siteleri için gelişmiş UX oluşturmak için yeni bir unsur olarak hareket eklemenin artan önemini gösteriyor.

Bu öğreticide, Mac için Principle'ı kullanarak etkili UI animasyon tekniklerini öğreneceksiniz. Bu kılavuzu okuduktan sonra, çalışmanızı daha iyi sergilemek için donuk ve statik maketleri etkileşimli prototiplere dönüştürebileceksiniz. Bir sonraki UI adımınızı ve Dribbble şutlarınızı geliştirmek için burada öğreneceklerinizi uygulayabilirsiniz.

Başlayalım.

Takip Etmek İçin Bu Ücretsiz Kaynakları İndirin.

Takip etmek için yalnızca Prensip ve Çizim uygulamalarına ihtiyacınız olacak. Henüz sahip değilseniz, aşağıdaki bağlantıları kullanarak ücretsiz deneme sürümünü indirebilirsiniz.

• Ücretsiz bir İlke deneme sürümünü buradan indirin.

• Ücretsiz Sketch deneme sürümünü buradan indirin.

• Ücretsiz eğitim kaynak dosyasını buradan indirin.

İlke Arayüzüne Genel Bir Bakış

Mac OS'ye alışkınsanız, Principle'ın arayüzü size çok tanıdık gelecektir. Üç ana bölümü vardır: bir kenar çubuğu, çalışma yüzeylerini gösteren bir tasarım alanı ve yeniden boyutlandırıp hareket ettirebileceğiniz önizleme penceresi.

Temel Animasyon Kavramlarını İlke Olarak Anlamak

Principle ile canlandırmak nispeten basittir. Başlamak için bir animasyon arka planına sahip olmanız gerekmez. Aslında, ağır kaldırmanın çoğu Principle tarafından otomatikleştirilir ve yalnızca bir animasyonu neyin başlattığına (yani bir düğme, bir bağlantı, bir kaydırma olayı), animasyonun nasıl başladığına ve nasıl bittiğine odaklanmanız gerekir.

Daha iyi takip etmenize yardımcı olmak için, kılavuz boyunca göreceğiniz kısa bir terimler sözlüğü burada.

• Bileşen: Bileşen , öğeleri ve hatta animasyonları içermeye yardımcı olan bir tür gruplandırmadır. Photoshop'ta bir "akıllı nesnenin" veya Illustrator'da bir "sembolün" eşdeğeridir.
• Tetik: Bir animasyonu başlatmanın bir yolu - yani dokunarak, kaydırarak, gezdirerek, vb. Prensipte, İlke içindeki herhangi bir öğe seçilerek ve sağ tarafında bir şimşek simgesiyle görünen simgeye tıklanarak bir tetikleyici tanımlanabilir.
• Geçiş: Bir çalışma yüzeyinden diğerine durum değişikliği, yani sola veya sağa kayma.
• Kolaylaştırma efekti: Animasyonun nasıl başlayıp bittiğine bağlı olarak bir geçişin yumuşaklık düzeyi.

A. Tetikleme ve Geçiş

İlke ile canlandırmanın ilk adımı, bir öğe (yani bir düğme veya bağlantı) üzerinde bir tetikleyici (animasyonu başlatan davranış veya eylem) ayarlamak ve ilk ve/veya son durumunu (yani konumu veya ölçeğini) değiştirmektir. animasyonun başından sonuna kadar).

1. Bir başlangıç ​​durumu tanımlayın: Animasyon gerçekleşmeden önce UI öğelerinizin başlangıçta nasıl göründüğü.
2. Tetikleyiciyi tanımlayın: etkileşim öğesini ve animasyonu hangi eylemin etkinleştirdiğini seçerek.
3. Son durumu tanımlayın: animasyonun sonunda öğelerin nasıl görüntülendiği.

Animasyonu ayarladıktan sonra, önizleme penceresinde önizleyebilirsiniz.

B. Animasyon Uzunluğu ve Kolaylaştırma Etkisi

İlke varsayılan olarak yarım saniyelik bir animasyon oluşturur. Bazen geçiş etkisini ayrıntılı olarak görmek için bu yeterli değildir. Bu üç adımı takip ederek animasyon panelinden süreyi ve “yumuşatma” efektini değiştirebilirsiniz.

1. Animasyon Panelini Açın: İki çalışma yüzeyi arasındaki siyah okları seçin ve üst çubukta bulunan “Canlandır” düğmesine tıklayın.
2. Animasyon uzunluğunu uzatın: Mavi çizgilerin uç noktalarını taşıyın.
3. Hareket Hızı Uygula: Elmas şeklindeki tüm noktaları seçin ve geçişleri yumuşatmak için açılır menüden "İkisini de Kolaylaştır"ı seçin.

Ne alacaksın

Bu video, bu eğitimden geçtikten sonra neler yaratabileceğinizi gösterir. Demo uygulaması, Google'ın Materyal Tasarımı renk paletini gösterir ve bir renk seçtiğinizde size daha fazla ayrıntı verir. Bir yükleme animasyonu, yumuşak paralaks efektli bazı sayfa geçişleri ve bir menü kaydırıcısı oluşturacaksınız.

Ücretsiz öğretici kaynak dosyasını buradan indirdiğinizden emin olun.

Başlayalım.

Bir Eskiz Dosyasından İlkeye Geçiş

1. Aralarındaki doğal geçişlere hazırlanmak için çalışma yüzeylerini hareket ettirin: Örneğin, sağdan kayan bir ekran, animasyonun üzerinde yerini aldığı ekranın sağ kenarına dokunmalıdır.
2. Sketch dosyanız hazır olduğunda, İlke'ye geçin, 360x640 oranına uygun boş bir belge oluşturun ve “İçe Aktar” düğmesine tıklayın.

Sorunsuz Kaydırma İçin Ekran Başlıklarını Kaldırma

Sayfalar arasında kesintisiz bir geçiş oluşturmak için ilki hariç her bir başlığı kaldırabilirsiniz. Başlıklar başlangıçta yalnızca uygulamanın görünümünü ve hissini sergilemek için eklendi. Başlığı yalnızca “Hoş Geldiniz” ekranında tutacaksınız ve menü ve uygulama başlığıyla birlikte bir çubuk olarak hizmet verecek.

Yükleme Animasyonunu Oluşturma - Şekiller

1. Yükleme şekilleri grubunu seçin ve yükleme şekillerini ve metnini içeren "Bileşen Oluştur"a tıklayın. İlk sembol içindeki metin için bir Bileşen oluşturun; hemen ardından metni ayrı olarak canlandıracağız.
2. Gruplandırılmış şekilleri seçin. "Dokunma" tetikleyicisini seçin ve bir kopya oluşturmak için aynı çalışma yüzeyinin üzerine sürükleyip bırakın.
3. İkinci çalışma yüzeyi, animasyonun son durumunu temsil eder ve açı özelliğini kullanarak grubu döndürebilirsiniz. Daha ilginç bir etki yaratmak için “dolgu” ve “anahat”a farklı açı değerleri verin.
4. Bitirmek için, çalışma yüzeyleri arasındaki okları seçin, "animasyon panelini" açmak için "Canlandır"a tıklayın ve bitiş noktalarını yaklaşık 1,00 s'ye kaydırarak süreyi değiştirin.

Yükleme Animasyonunu Oluşturma - Metin

1. İlk önce, yukarı kaydırma animasyonunu oluşturun. Düğme şeklini seçin ve "Tap" tetikleyici olayını uygulayın. Yeni çalışma yüzeyinde tüm ekranları 640 piksel yukarı taşıyın (geçerli çalışma yüzeyi yüksekliğine eşit).
2. Şimdi paralaksı oluşturalım. Önceki çalışma yüzeyine gidin, karşılama ekranında geometrik şekilleri ve metni farklı Y değerlerinde aşağı taşıyın.
3. Son olarak, animasyon panelinin içinde, zaman çizelgesini 1s'ye kadar uzatın. Zaman çizelgesine bir “İkisini de Kolaylaştır” efekti uygulayın (elmas şeklindeki tüm noktaları seçtiğinizden emin olun ve efekti tümüne uygulamak için herhangi bir mavi çizgiye tıklayın).
4. Animasyonunuzu önizleyin ve paralaks efekti size iyi gelene kadar şekilleri hareket ettirin.

Paralaks Etkisi Oluşturma - Hoş Geldiniz Sayfası

1. Yükleme bileşenini seçin ve çalışma yüzeyinin herhangi bir yerinden bir oku sürükleyerek “Dokunma” tetikleyicisini uygulayın.
2. Tüm ekranları seçin (ana gruptan) ve 640 piksel yukarı taşıyın. Bu adım, Hoş Geldiniz ekranını ekrana getirir.
3. Önceki çalışma yüzeyine dönün ve “Hoş Geldiniz” ekranındaki şekilleri aşağı doğru hareket ettirin. Bu, paralaks adı verilen eşzamansız kayma efektini yaratır.
4. Animasyon panelinin içindeki geçişe zaman ekleyerek animasyonu ayarlayın: Çalışma yüzeyi arasındaki oku seçin, ardından mavi çizgiler üzerindeki uç noktaları yaklaşık 1sn'ye sürükleyin.

Paralaks Etkisi Oluşturma - Hakkında Sayfası

1. Aşağı ok düğmesini seçin (tüm grubu seçtiğinizden emin olun) ve çalışma yüzeyinin herhangi bir yerinden bir oku sürükleyerek “Dokunma” tetikleyicisini uygulayın.
2. Tüm ekranları seçin (ana gruptan) ve her şeyi 640 piksel yukarı taşıyın. Bu adım, Görünümde Hakkında ekranını getirir.
3. Önceki çalışma yüzeyine dönün ve “Hakkında” ekranındaki şekilleri aşağı doğru hareket ettirin. Bu, paralaks adı verilen eşzamansız kayma efektini yaratır.

Paralaks Etkisi Oluşturma - Renkler Sayfası

1. "Dokunma" tetikleyicisini aşağı ok düğmesine uygulayın (tüm grubu seçtiğinizden emin olun) ve bu yeni bir çalışma yüzeyi oluşturacaktır.
2. Yeni çalışma yüzeyinde tüm ekranları seçin ve 640 piksel yukarı taşıyın.
3. Önceki çalışma yüzeyinde renkleri ve metni aşağı doğru hareket ettirin. Bir nesneyi ne kadar aşağı hareket ettirirseniz, yukarı kaydırmanın o kadar uzun süreceğini unutmayın, bu nedenle daha dinamik bir efekt oluşturmak için farklı yerleştirme kullandığınızdan emin olun.
4. Son olarak, animasyonu genişletin ve animasyon panelindeki tüm mavi zaman çizelgelerine bir "ikisini de kolaylaştır" uygulayın.

Sayfayı Yandan Kaydırma - Renk Seçim Sayfası

1. “Renkler” ekranındaki “Daha Fazla Yükle” düğmesine bir “Dokunma” tetikleyicisi uygulayın.
2. Yeni çalışma yüzeyinde, "Renkler" ve "Seçim" içeriğini 360 piksel (çalışma yüzeyi genişliği) sola taşıyın
3. Önceki çalışma yüzeyine dönün ve ekran içeriğini ters yönde - sağa taşıyın.
4. Ayrıca ekranın opaklığını yüzde sıfırdan yüzde 100'e kaydırarak canlandırabileceğinizi unutmayın.
5. Geçiş efektini ayarlamak için animasyon süresi ve yumuşatma efektiyle oynayın.

Menü Simgesini Canlandırma

1. Sketch orijinal dosyasından etkisi olan (gölgeler gibi) herhangi bir katman ve şeklin bir görüntü olarak Principle'a aktarıldığını unutmayın. Prensip içindeki şekilleri düzenlemeniz gerekiyorsa, içe aktarmadan sonra herhangi bir özel efekt eklememeye çalışın.
2. Bununla birlikte, mevcut simgeyi kılavuz olarak kullanarak üç ince dikdörtgen çizin ve hamburger menü simgesini oluşturmak için bunları gruplayın. Artık önceki menü simgesini silebilir veya gizleyebilirsiniz.
3. Yeni oluşturulan simgeyi seçin ve ona bir "dokunma" tetikleyicisi uygulayın.
4. Yeni çalışma yüzeyinde, menü simgesindeki üst ve alt dikdörtgeni döndürün, merkeze hizalı olduklarından emin olun ve ortadakine yüzde sıfır opaklık verin.
5. Yeni oluşturduğunuz animasyonu görmek için, değiştirilen menü simgesini bir "Dokunma" tetikleyicisiyle önizleme çalışma yüzeyine geri bağlayın ve test edin.

Menü Kaydırıcı Efekti Oluşturma

1. Son durum çalışma yüzeyinde, menü bağlantıları kapanış menüsü simgesinin soluna hizalanana kadar ekranları sağa hareket ettirin.
2. Menü içeriği ve açık gri arka plan dışında “Renkler” klasöründeki her şeyi seçin ve opaklığı yüzde 25'e düşürün. Animasyon, menüye odaklanmak için sayfa içeriğini solduracaktır.
3. Animasyon süresini uzatın ve yumuşak bir efekt oluşturmak için menü içeriğini hafifçe hareket ettirmek için önceki çalışma yüzeyine gidin.

İletişim Ekranına Geçiş

1. Açık menüde, "Bize Ulaşın" düğmesine bir "Dokunma" tetikleyicisi uygulayın.
2. Yeni oluşturulan çalışma yüzeyinde tüm ekranları 640 piksel yukarı taşıyın.
3. Ardından önizleme çalışma yüzeyine geri dönün ve öğeleri "Form" sayfasından aşağı taşıyın.
4. Paralaks efekti oluşturmak için öğeleri farklı Y değerlerinde hareket ettirin.
5. Son olarak, çalışma yüzeyleri arasındaki okları seçin, animasyon uzunluğunu uzatın ve mavi zaman çizelgelerine "İkisini de Kolaylaştır"ı uygulayın.

Teşekkür Sayfasıyla Biten

1. "Mesaj gönder" düğmesine bir "Dokunma" tetikleyicisi uygulayın.
2. Yeni çalışma yüzeyinde tüm ekranları 640 piksel yukarı taşıyın.
3. Ardından önizleme çalışma yüzeyine geri dönün ve öğeleri "Onay" sayfasından aşağı taşıyın.
4. Daha dinamik bir efekt oluşturmak için renkli simge için ölçek ve döndürme ile oynayın.
5. Geçiş efektini daha iyi algılamak için animasyon uzunluğunu eklediğinizden emin olun.

Prensiple Animasyon Eklemenin Basitliği.

İlke, UI etkileşim fikirlerinizi hayata geçirmek için harika bir araçtır.

Arayüz Mac dostudur ve Sketch dosyalarıyla sorunsuz çalışacak şekilde oluşturulmuştur.

İlke, animasyon ve geçiş efektinin çoğunu sizin için otomatikleştirir. Tek yapmanız gereken, bir çalışma yüzeyindeki şekle bir tetikleyici uygulamak ve son çalışma yüzeyinde canlandırmak istediğiniz öğelerin özelliklerini değiştirmek.

Lütfen sorularınızı aşağıdaki yorumlarda bırakın. Onlara cevap vermekten mutluluk duyarım.