Framer Eğitimi: Prototiplerinizi Geliştirmek için 7 Basit Mikro Etkileşim

Framer eğitim serimizin ikinci bölümüne hoş geldiniz. Son makalede, Tasarım modunda Framer kullanmanın temellerini ve tasarımlarımızı hayata geçirmek için bazı basit kodları nasıl yazacağımızı öğrendik. Bu parçada, mikro etkileşimler ve animasyonlu geçişler oluşturmak için Framer'ı kullanmaya odaklanacağız. Prototipleriniz için yedi faydalı etkileşimin nasıl oluşturulacağını anlatacağız.

Neden Küçük Etkileşimleri Prototiplemelisiniz?

Yumuşak hareket, durum değişiklikleri ve ince geçişler, bir kullanıcının belirli eylemler hakkında geri bildirim vererek arayüzünüzü nasıl kullanacağını anlamasına yardımcı olur. Çoğu zaman, bu geçişler gerçek dünyadaki analogları (bir anahtar kontrolünün kaydırılması gibi) yansıtacak veya ortak cihaz etkileşim modellerini (dokun-genişletmek gibi) kullanacak. Bu eğitimde, kullanıcıyı anlamayı yönlendirmek ve kullanıcıyı memnun etmek için arayüze son bir dokunuş ekleyen etkileşimlere odaklanacağız.

Aşağıdaki örneklere bir göz atın. Dünyanın her yerindeki tasarımcılar, çeşitli ürünlerde bu mikro etkileşimleri yaratıyor.

7 Prototip

Bu eğitimde, size her bir mikro etkileşime ve bazı kod parçacıklarına genel bir bakış sunacağım. Birkaç farklı teknik kullanacağız, böylece ürününüze en uygun olanı seçebileceksiniz. Framer Studio'da herhangi bir şey yaratmanın "doğru" bir yolu yoktur; önceki makalemde bahsettiğim gibi, Framer size istediğiniz şekilde yaratmanız için çok fazla özgürlük verir.

Daha önce böyle etkileşimler gördünüz mü? Elbette, aldın! Onları her gün akıllı telefonunuzda görüyorsunuz. Kendinizinkini yaratmanın zamanı geldi.

1. Eylem düğmesi

Eylem düğmesi genellikle geçerli ekranın ana eylemini temsil eder. Bazen içinde birkaç eylem içerir. İkinci durum için bir etkileşim oluşturacağız. Çalışan prototipi buradan indirin: https://framer.cloud/ShBnH

Adım 1: Daire şeklinde üç düğme oluşturun

Başlamak için, içinde bir simge bulunan daire şeklinde bir ana düğme ve ana düğmenin altına yerleştirilmiş iki küçük düğme oluşturun. Tasarım modunda (hedef göstergesi ile) tüm bu katmanları etkileşimli olarak işaretlemeyi unutmayın.

Adım 2: Tüm katmanlar için iki durum tasarlayın

Katmanlar için iki farklı durum oluşturun. Küçük düğmeleri ana düğmenin üzerine taşımak ve simgeyi 45° döndürmek için aşağıdaki kodu kullanın:

 button_1.states.a = y: 427 x: 246 width: 64 height: 64 button_2.states.a = y: 330 x: 246 width: 64 height: 64 icon.states.a = rotation: 45

3. Adım: Bir etkinlik ekleyin

Bu prototipi canlandırmak için bir etkinlik eklemeliyiz. Eylem düğmesine dokunduktan sonra, tüm katmanların durumlarını değiştirin:

 button.onTap -> button_1.stateCycle() button_2.stateCycle() icon.stateCycle()

Adım 4: Bahar animasyonu

Bu noktada, animasyon çok mekanik görünüyor. Bir insan dokunuşu eklemek için, tüm katmanlar için bir yay animasyonu ekleyeceğiz:

 button_1.animationOptions = curve: Spring(tension: 170, friction: 12) button_2.animationOptions = delay: 0.05 curve: Spring(tension: 170, friction: 12) icon.animationOptions = curve: Spring(tension: 250, friction: 5)

Eylem düğmesi gitmeye hazır!

2. Etkileşimli anahtarlar

Aşağıdaki adımlar, kendi anahtar etkileşiminizi oluşturmanıza olanak tanır. Çalışan prototipi buradan indirin: https://framer.cloud/ieypV

Adım 1: Bir anahtar oyun alanı tasarlayın

Yalnızca iki şeye ihtiyacınız olacak: en az iki katman (arka plan ve nokta) içeren anahtarın kendisi ve anahtarı kullandıktan sonra canlandırılacak bazı katmanlar.

2. Adım: Durumlar oluşturun

İlk makaleden, durumları doğrudan Framer Studio'da nasıl tasarlayacağınızı hatırlıyor musunuz? Durumlarınızı istediğiniz gibi tasarlayın veya ayarlarımı kullanın:

 dot.states.a = x: 50 backgroundColor: "rgba(5,106,161,1)" switch_bg.states.a = backgroundColor: "rgba(0,136,205,1)" icon.states.a = opacity: 0 circle.states.a = x: 37 y: 183 width: 301 height: 301 circle_1.states.a = x: 20 y: 166 width: 337 height: 337

3. Adım: Bir etkinlik ekleyin

Prototipin çalışması için anahtara bir olay eklemeliyiz. Anahtara dokunduktan sonra tüm katmanların durumunu değiştireceğiz:

 switch_1.onTap (event, layer) -> dot.stateCycle() switch_bg.stateCycle() circle.stateCycle() circle_1.stateCycle() icon.stateCycle()

4. Adım: Zamanlamayı ayarlayın

Her şeyi daha doğal hale getirmek için tüm durumların zamanını ve gecikmesini ayarlayın:

 dot.animationOptions = time: 0.2 switch_bg.animationOptions = time: 0.2 circle_1.animationOptions = time: 0.5 curve: Spring circle.animationOptions = time: 0.5 delay: 0.05 curve: Spring icon.animationOptions = time: 0.5 curve: Spring

Şimdi prototipimiz tamamlandı!

3. Liste öğesi kaydırma eylemi

Bu, bir listeden öğelerin kaldırılması, arşivlenmesi veya kaydedilmesi için tipik bir etkileşimdir. Sola veya sağa kaydırın ve bir öğe silinecektir. Prototipi buradan indirin: https://framer.cloud/rzMWP

Adım 1: Tasarım modunda bir prototip oluşturun

Dilerseniz kendi tasarımınızı da kullanabilirsiniz. Sadece katmanların aynı yapısını korumanız gerekir. Yukarıdaki resimde görebileceğiniz gibi, tüm liste öğelerinin altında bir “geri al” düğmesi vardır.

2. Adım: Öğeleri sürüklenebilir yapın

Basit tutmak için, yalnızca ilk liste öğesi için bir etkileşim oluşturacağız. İlk olarak, liste öğesini sürüklenebilir yapın: item.draggable = true .

Ardından dikey ekseni kilitleyin: item.draggable.vertical = false .

Sürüklenebilir alanın kısıtlamalarını ayarlayın: item.draggable.constraints

Ve son olarak, boyutu item size: size: item olarak ayarlayın.

Kodun tamamı şöyle görünür:

 item.draggable = true item.draggable.vertical = false item.draggable.constraints = size: item

Artık sola ve sağa kaydırabilirsiniz ve öğe her zaman orijinal konumuna dönecektir.

3. Adım: Durum oluşturun

Ardından, kaldırıldığında liste öğesinin durumunu oluşturun. Sadece x eksenini kullanarak ekranın dışına taşıdım.

 item.states.a = x: -360

4. Adım: Kaydırdıktan sonra durumu değiştirin

Son olarak, etkileşimi başlatmak için bir tetikleyici oluşturmalıyız. Öğeyi ekranın sol tarafına sürüklediğimizde kaldırılmalıdır. Kod şöyle görünecek:

 item.onMove -> if item.x < -70 item.stateCycle("a")

Bu durumda, bir “if” ifadesi kullanıyoruz. Yukarıdaki kod, temel olarak, öğe katmanını 70 pikselden daha fazla hareket ettirdiğimizde, ardından öğe durumunu 'a' durumuna değiştirdiğimizi söylüyor. Framer Studio belgelerinde if ifadeleri hakkında bilgi edinebilirsiniz: https://framer.com/getstarted/programming/#conditional

Adım 5: Dokunduktan sonra işlemi geri alın

Bu etkileşimi neredeyse bitirdik. Geriye kalan tek şey bu eylemi geri almak:

 item_bg.onTap -> item.stateCycle("default")

Önceki öğreticiden bu koda aşina olmalısınız.

6. Adım (isteğe bağlı): Animasyon zamanlamasını ayarlayın

İsterseniz animasyonun zamanlamasını ayarlayabilirsiniz:

 item.animationOptions = time: 0.75 curve: Spring

4. Düğme yükleyici

Bu, kullanıcı için yükleme veya bekleme süreleri gerektiren eylemler için çok faydalı bir etkileşimdir. Bu etkileşimi oluşturduğumuzda, tek tek gerçekleşen birçok animasyonu nasıl yöneteceğinizi öğreneceksiniz. Prototipi buradan indirin: https://framer.cloud/FxmHN

Adım 1: Tasarım modunda bir prototip oluşturun

Dört alt katmana sahip basit bir düğme oluşturun: bir ilerleme çubuğu ve farklı durumlar için üç simge. Düğmemi, görünür bir yükleme simgesi, altta 0 genişliğinde bir ilerleme çubuğu ve iki gizli simgeyle tasarladım.

2. Adım: Bir etkinlik ekleyin

Bu prototipin tamamı, sadece Framer'ın otomatik kod özelliklerini kullanarak tek bir kod satırı yazmadan yapılabilir.

İlk önce bir etkinlik ekleyin. Düğme katmanına bir dokunuşla tüm etkileşimi tetikleyeceğiz:

Bu, Framer'ın sizin için yazdığı kod:

 button.onTap (event, layer) ->

3. Adım: Animasyonları tasarlayın

Tüm animasyonları tasarlamak için Framer'ın otomatik kodlama özelliklerini kullanacağız:

Farklı zamanlamalara sahip dört animasyon tasarladım:

• İlk animasyon, ilerleme çubuğunun genişliğini değiştiriyor.
• İkincisi, yükleme simgesini opaklıkla gizlemektir.
• Üçüncüsü dönüyor ve yükleyici simgesini gösteriyor.
• Sonuncusu, kontrol simgesini gösteriyor ve ölçeklendiriyor.

İşte Framer'ın bu animasyonların her biri için yazdığı kod:

 # change progress bar width progress.animate width: 247 options: time: 1.4 curve: Bezier.ease # hide upload icon upload.animate opacity: 0.00 y: 39 options: time: 0.2 curve: Bezier.ease # show and rotate loader icon load.animate opacity: 1.00 rotation: 360 options: time: 1 curve: Bezier.ease # show and scale check icon done.animate opacity: 1.00 scale: 1.4 options: time: 0.2 curve: Bezier.ease delay: 1.00

4. Adım: Yükleme animasyonunu sıfırlayın

Fark etmiş olabileceğiniz gibi, animasyon bittikten sonra yükleyici simgesini gizlemedik. Bu prototipi bitirmek için şu olayı kullanarak başka bir animasyonu tetikleyin: load.onAnimationEnd ->

 load.animate opacity: 0.00 options: time: 0.2 curve: Bezier.ease

5. Yenilemek için çekin

İçinde bir liste bulunan hemen hemen her ürün bu tür bir etkileşimi kullanır. Kullanıcı, yenilemek için tüm listeyi aşağı çeker. Oluşturmak çok kolay. Prototipi buradan indirin: https://framer.cloud/DgMDw

Adım 1: Yenileme simgesiyle basit bir liste tasarlayın

Doğrudan tasarım moduna geçebiliriz. İki şeye ihtiyacımız var: bir liste ve bir yenileme simgesi. Buradaki en önemli şey, yenileme simgesini opaklıkla gizlemek ve listemize eklemek:

2. Adım: Bir Kaydırma Bileşeni Oluşturun

Listemizi kaydırılabilir hale getirmek istiyoruz. Bunu yapmak için bir kaydırma bileşeni kullanın ve buna bir liste katmanı ekleyin:

 scroll = new ScrollComponent size: Screen scrollHorizontal: false list.parent = scroll.content

3. Adım: Yenile simgesini görünür yapın

Simge için basit bir durum oluşturun:

 icon.states.a = opacity: 1

Adım 4: Aşağı çektikten sonra bir etkinlik ekleyin

Listemiz şu anda kaydırılabilir. Bu, yukarı veya aşağı kaydırdığımızda, tüm kaydırma içeriğinin 'y' ekseni üzerinde hareket ettiği anlamına gelir. Bu bilgiyle bir etkinlik oluşturabiliriz:

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a")

Yine bir “if” ifadesi kullanıyoruz. Liste 180 pikselden fazla aşağı çekilirse (y ekseninde hareket ettirilirse) bir eylemi tetikleyeceğiz. Bu durumda iki katmanı canlandıracağız: liste ve yenileme simgesi.

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1

Listeyi 210 piksel aşağı taşımak ve yenileme simgesini 360 ° döndürmek için "animate" kullanıyoruz.

Adım 5: Tüm durumları sıfırlayın

Prototip neredeyse çalışıyor, ancak yenileme animasyonundan sonra tüm katmanları sıfırlamamız gerekiyor. Bunu yapmak için animasyon bittikten sonra bir olay kullanacağız:

 icon.onAnimationEnd ->

Yenileme simgesinin dönüşünü orijinal konumuna geri getiriyoruz ve durum döngüsünü kullanarak liste ve simge arka plan durumunu sıfırlıyoruz:

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1 icon.onAnimationEnd -> refresh.animate rotation: 0 list.stateCycle("default") icon.stateCycle("default")

Bu kadar!

6. Sürükleme etkileşimi

Bir uygulama içinde bir öğeyi sürüklerken, öğenin kendisinde her zaman bir şeyler olduğunu fark ettiniz mi? Bazen öğe küçülür, belki diğer öğeler bulanıklaşır veya opaklık değişir. Bu tür bir etkileşimi nasıl oluşturacağımızı öğrenelim. Çalışan prototipi buradan indirin: https://framer.cloud/YstiW

Adım 1: Fayanslarla basit bir ızgara tasarlayın

Bir döşeme ızgarası oluşturun ve bunların ana öğenin içinde olduklarından emin olun.

Adım 2: Tüm döşemeleri hedeflemek için “for” döngüsünü kullanın

“ for döngüsü” kulağa korkutucu gelebilir, ancak gerçekten basittir. for döngülerine aşina değilseniz, önce biraz arka planı okuyabilirsiniz: https://framer.com/getstarted/programming/#loops-and-arrays

Izgaramızdaki tüm döşemeleri hedeflemek için for döngüsünü kullanacağız:

 for item in grid.subLayers

Bu basit kod satırıyla, ızgara katmanının içindeki tüm katmanları hedeflediniz.

3. Adım: Fayansları sürüklenebilir yapın

Izgara içindeki her öğeyi sürüklenebilir yapın:

 for item in grid.subLayers item.draggable = true

Adım 4: Bir sürükleme durumu tasarlayın

Tüm öğeler sürüklenirken bir duruma sahip olmalıdır. Koddan başlamanız gerekir, ancak daha sonra bu durumu Katman Düzenleyici'de düzenleyebileceksiniz:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)'

Adım 5: Etkinlikleri sürükleyin

Öğe sürüklenirken farklı durumları tetiklemek için olaylar oluşturmamız gerekiyor. Biz sürüklemeye başladığımızda ilk olay bir eylemi tetikleyecektir:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a")

Öğenin her zaman diğer katmanların üzerinde olduğundan emin olmak için this.bringToFront() öğesini kullandım.

İkinci tetik, öğenin durumunu sıfırlayacaktır:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default")

Bu noktada, çalışan bir prototipimiz var.

6. Adım (isteğe bağlı): Zamanlama ile oynayın

Etkileşim her zaman bir zaman çizelgesi boyunca gerçekleşir. Mükemmel bir etki elde etmek için zaman çizelgesini ayarlamak iyidir:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default") item.animationOptions = time: 0.3 curve: Spring

7. Çoklu "beğen" düğmesi (gelişmiş)

Bu prototipte, daha kısa sürede daha duyarlı etkileşimler oluşturacak olan Framer Studio'da katmanları hedeflemenin farklı bir yolunu göstermek için daha gelişmiş teknikler kullanacağız. Temel kodlamaya aşina değilseniz, önce şu makaleyi okumanızı tavsiye ederim: https://blog.framer.com/code-less-achieve-more-with-arrays-in-framer-c43594d13d59

Bu etkileşim için tasarım kısmını atlayıp bu yazı için özel olarak oluşturduğum bir prototipi kullanacağız: https://framer.cloud/SZMCH

Adım 1: Diziler oluşturun

Framer Studio içindeki katmanların yapısına bir göz atın:

"Liste" grubunda "satır" içinde bir "düğmemiz" var. Düğme katmanlarında bir etkileşim oluşturacağız, bu yüzden onları hedeflememiz gerekiyor. Ama önce, tüm satır katmanlarını bulmalı ve bunları bir dizinin içine koymalıyız:

 rows = list.children buttons = []

Ayrıca tüm "düğme" katmanları için boş bir dizi oluşturdum: buttons = [] .

Adım 2: Diziye bir alt katman ekleyin

"For döngüsü" ile başlayalım:

 for i in rows buttons.push(i.children[0])

Diziye katman eklemek için şunu kullanacağız: buttons.push() . Bu, her "satır" grubunun ilk katmanını bir dizinin içine koyduğumuz anlamına gelir.

3. Adım: Durum ve etkinlik oluşturun

Şimdi “beğen” butonlarımız için bir durum oluşturacağız ve dokunurken onlara bir etkinlik ekleyeceğiz:

 for i in buttons i.states.a = scale: 1.2 hueRotate: -80 i.onTap -> this.stateCycle() i.animationOptions = time: 0.3 curve: Spring

Bu tekniği, önceki tüm prototipleri yeniden oluşturmak ve daha karmaşık hale getirmek için kullanabilirsiniz.

Son Not

Mikro etkileşimler yaratırken en küçük ayrıntılara odaklanıyorsunuz. Her tür eylem tarafından tetiklenen animasyonlar oluşturabilir ve onları kesinlikle mükemmel hale getirebilirsiniz. Aynı prototipi oluşturmanın yüzlerce yolu olduğunu ve ürün tasarımlarınızın gereksinimlerine ve becerilerinize uygun yöntemi kullanmanız gerektiğini unutmayın.

• • •

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