Framer Eğitimi: Çarpıcı Etkileşimli Prototipler Nasıl Oluşturulur

Aşağıdaki örnek prototiplere bir göz atın. Bunlar Framer'da yapıldı. Bu eğitimden sonra, kısa sürede kendi çarpıcı animasyonlu prototiplerinizi oluşturmaya başlayabileceksiniz.

Framer bir hafta önce en yeni versiyonuyla çıktı ve prototipleme pazarı asla eskisi gibi olmayacak. Framer prototipleme aracı eskiden ustalaşması zordu, ancak en doğru ve sınırsız prototipleme yazılımı olarak kullanışlıydı. Şimdi işler değişti. Framer şimdi Design + Code + Collaborate özellikleriyle birlikte geliyor, yani prototipinizi doğrudan Framer'ın içinde oluşturabilir, herhangi bir üçüncü taraf yazılımı ve herhangi bir kodlama becerisi olmadan tamamen işlevsel bir prototip geliştirebilirsiniz.

Burada, önceden herhangi bir kodlama bilgisi gerektirmeden basit Framer kodunun nasıl kullanılacağını öğreteceğim. Animasyonlu ve etkileşimli prototipler oluşturmak için Framer'da tasarım ve kod modundan en iyi özellikleri nasıl birleştireceğinizi öğreneceksiniz. Şimdi bu eğitime geçelim ve prototiplerinizi geliştirmek için bazı küçük kod parçacıkları alalım.

Çerçeveleyici Temelleri

Başlayalım! Sadece framer.com'a gidin ve deneme sürümünü indirin. Size tamamen işlevsel demolarının iki haftasını veriyorlar ve bana güvenin, bu prototipleme yazılımı hakkında çok şey öğrenmek için yeterli zaman.

Kurulumdan sonra, sağladıkları bazı örnekleri incelemek ve onlarla biraz oynamak isteyebilirsiniz. İşiniz bittiğinde, prototip oluşturmaya başlama zamanı.

(Bu Framer eğitiminde, doğrudan Framer.js'de prototip oluşturmaya odaklanacağım. Ayrıca Framer'de prototip oluşturmaya başlamanın başka yolları olduğunu da bilmelisiniz. Örneğin, doğrudan Sketch dosyalarıyla çalışabilirsiniz. Bu iş akışını aşağıda anlatacağım. başka bir makale.)

Yepyeni Framer – Tasarım Modu

Bu makalede, minimum kod kullanımıyla dakikalar içinde üç harika prototip oluşturacağız: temel etkileşimler, kaydırma bileşeni ve sayfa bileşeni

Framer'ın en yeni sürümü harika bir yeni özelliğe sahiptir: tasarım modu. Sketch veya Figma'da yaptığınız gibi hemen hemen aynı şekilde çalışmanıza izin verir. Vektör katmanları oluşturabilir, görüntüleri içe aktarabilir veya metin katmanları oluşturup stil oluşturabilirsiniz. Tüm bunlar, herhangi bir üçüncü taraf uygulaması olmadan hızlı bir şekilde prototip oluşturmak istediğinizde çok kullanışlı hale gelir.

Uygulama Tipi Tasarım Oluşturalım

Bu öğreticinin ilk bölümünde, Framer prototipimiz için bir oyun alanı hazırlayacağız. Üç farklı katman türü ile uygulama tipi bir tasarım oluşturacağız: vektör, resim ve metin.

Adım 1: Basit bir düğme ve arka plan oluşturun.

Tasarımınıza başlamak için, tasarım modu olan ilk sekmeyi seçin ve Sketch'teki gibi bir çalışma yüzeyi ekleyin. Bu eğitimde, bir iPhone 7 prototipi üzerinde çalışacağız, bu yüzden çalışma yüzeyi boyutum olarak bu ön ayarı seçtim. Ayrıca mavi bir arka plan dolgusu ekledim.

Ardından, dikdörtgen aracını seçin ve basit bir yuvarlak düğme şeklinde bir şekil oluşturun.

Adım 2: Resimli bir kart ekleyin.

Katman eklemenin ikinci yöntemi, sürükle ve bırak özelliğidir. Bilgisayarınızdan herhangi bir görüntü dosyasını seçebilir, Framer'a bırakabilir ve sağ kenar çubuğunu kullanarak biçimlendirebilirsiniz. Basit bir illüstrasyon kullandım ve onu bir kart olarak şekillendirdim.

3. Adım: Bir uygulama başlığı ekleyin.

Framer ayrıca bir metin katmanı eklemenizi sağlar. Yine, stil vermek temelde herhangi bir grafik yazılımındakiyle aynıdır. Yazı tipi, boyut, hizalama, harf aralığı ve daha fazlasını seçebilirsiniz.

Adım 4: Framer'a hangi katmanların etkileşimli olduğunu söyleyin.

Framer prototipimize başlamadan önce bir adımımız daha var. Sadece Framer'e hangi katmanların etkileşimli olacağını söylememiz gerekiyor. Katman panelinin içindeki katman adının yanındaki noktayı tıklamanız yeterlidir. Daha fazla kullanım için her katmanı uygun şekilde adlandırmak iyidir. Katmanlarıma kart ve düğme adını verdim.

Adım 5 (Bonus): Global renklerinizi tanımlayın.

İyi bir uygulama, tüm prototip için bazı değişkenler tanımlamaktır. Kullanacağınız renk paletini, tipografiyi ve temel boyutları baştan ayarlayabilirsiniz. Bu, hat boyunca zaman kazanmanıza yardımcı olur.

Renklerinizi ayarlarken, onları kod düzenleyicide adlandırın ve uygun “=” işaretinden sonra HEX, RGB veya RGBa değerlerini sağlayın. Tüm değişkenleri kodunuzun en üstünde tutmayı unutmayın.

 # variables ------------------------------- blue = "#005D99" green = "#3DBE8B" white = "#FFFFFF"

Adım 6 (Bonus): Göreceli konum ekleme.

Yeni Framer ile prototipinizi duyarlı tutmak çok kolay. Tasarım modundan göreli konumları aşağıda gösterildiği gibi ayarlayabilirsiniz:

Katman konumunu doğrudan kodda hizalamak ve hesaplamak için yararlı olan özelliklerin kısa bir listesi. Katman konumlarını hesaplamak için gerekli matematiği yapabilirsiniz. Bu, daha sonra etkileşimler eklediğinizde ve prototipinizi duyarlı tutmak istediğinizde gerekli hale gelir.

 # This is how you can align layer position: x: Align.center(0) # align layer horizontaly x: Align.center(200) # align layer horizontaly with 200 offset x: Align.right(0) x: Align.left(0) y: Align.center(0) # align layer verticaly y: Align.top(0) y: Align.bottom(0) # You can use also some variables width: Screen.width # current device width height: Screen.height # current device height # As a reference you can also user layer names x: layerA.x # layerA horizontal position y: layerA.y # layerA vertical position width: layerA.width # layerA width height: layerA.height # layerA height # You can combine all of this into the simple math to calculate position or dimensions width: Screen.width / 2 - layerA.width

Artık Hazırsınız—Projemize Başlayalım

Farklı Framer katmanları oluşturduk. Artık etkileşimli oyun alanımız kullanıma hazır.

En sonunda! Sıkıcı kısım sona erdi. Şimdi biraz etkileşim tasarımı zamanı.

Tüm prototipi buradan indirin.

1. Bir Düğme Geri Bildirim Etkileşimi Oluşturma

Herhangi bir etkileşimi tasarlamak için, gerçekleşmesi için bir tetikleyiciye ihtiyacımız var. Neredeyse her şey olabilir: bir ekrana dokunma, bir animasyonun sonu, bir görüntünün yüklenmesinin sonu veya telefonunuzun ivmeölçeri.

Adım 1: Etkileşim için etkinlik oluşturma.

Basit tutacağız. Aşağıdaki komutu kullanarak, dokunduğunuzda bir düğme geri bildirimi oluşturalım:

 layerA.onTap (event, layer) ->

Framer az önce bu kod satırını sizin için yazdı. Bu, düğme katmanına dokunduğunuzda bir şey olacağı anlamına gelir.

Adım 2: Etkinliğe animasyon ekleme.

Bu tetikleyiciden sonra bir animasyon başlatalım. Bunu yapmak için, katman panelindeki düğme katmanının yanındaki noktayı tıklayın ve ardından Animasyon Ekle öğesini seçin. Bir animasyon eklerken, Framer animasyon düzenleme moduna geçer. Katmanın herhangi bir parametresini ölçekleyebilir, taşıyabilir, döndürebilir veya değiştirebilirsiniz:

Framer birkaç satır daha kod ekledi. (Endişelenmeyin; animasyonunuzu yine de animasyon paneliyle düzenleyebilirsiniz.)

 button.onTap (event, layer) -> button.animate borderRadius: 27 borderWidth: 10 borderColor: "rgba(115,250,121,1)" options: time: 0.30 curve: Bezier.ease

Tebrikler! Az önce ilk etkileşiminizi yarattınız. Şu anda yalnızca bir kez çalışıyor, ancak bunu düzelteceğiz. Bu animasyonu yalnızca bir kez tetikleyebilmenizin nedeni, animasyon bittikten sonra hiçbir şey olmayacak şekilde ayarlanmış olmasıdır. İlk animasyon bittikten sonra tüm parametreleri eski haline döndürmemiz gerekiyor.

Adım 3: Animasyonu sıfırlama.

Neredeyse daha önce yaptığımız gibi başka bir etkinlik ekleyin. Aradaki fark, animasyon sona erdiğinde bir olay aramamızdır:

Bu sefer Framer tarafından eklenen kod şöyle görünecek:

 button.onAnimationEnd (event, layer) ->

Bu nedenle, düğme katmanındaki animasyon bittiğinde, düğme katmanı parametrelerini sıfırlayacak bir sonraki animasyonu ekleyebiliriz:

 button.onAnimationEnd (event, layer) -> button.animate borderWidth: 100 borderColor: "rgba(255,255,255,1)" borderRadius: 100 options: time: 0.3 curve: Bezier.ease

Bu kadar! Artık düğmemize dokunduktan sonra çalışan geri bildirimlerimiz var.

2. Kart Katmanı Etkileşimleri için Farklı Durumlar Oluşturma

Tamam, artık bir animasyonu nasıl tasarlayacağınızı ve tetikleyeceğinizi biliyorsunuz. Daha sıklıkla, bir katmanın farklı durumlarını tasarlamanız gerekir. Konum, boyut veya opaklık gibi yalnızca bazı parametreleri değiştirerek aynı katmanın birden çok durumunu tasarlayabilirsiniz.

Adım 1: Bir kart katmanı için durum ekleme ve oluşturma.

Karta durum eklemenin yolu, bir animasyon eklemekle hemen hemen aynıdır. Kart katmanının yanındaki noktayı tıklamanız ve ardından Durum Ekle'yi tıklamanız gerekir. Artık durum düzenleme moduna geçtiniz. İstediğiniz gibi tasarlayın:

Lütfen kodun girintisine dikkat edin. İlk satırdan başlamalıdır.

Kart katmanım için iki farklı durum tasarladım:

 card.states.a = width: 248 height: 287 x: 63 y: 190 borderWidth: 10 borderColor: "rgba(115,250,121,1)" card.states.b = x: 139 y: 529 width: 98 height: 98 borderRadius: 49 borderWidth: 1 borderColor: "rgba(255,255,255,1)"

Adım 2: Etkinlik ekleme.

Çalışması için sadece bir adım daha var. Bu durumları değiştirmek için bir event oluşturmalıyız.

 button.onTap -> card.stateCycle()

Bunun yaptığı, her eylem yaptığınızda katmanın tüm durumlarını tek tek değiştirmektir. Bu nedenle, bizim durumumuzda, düğme katmanına her dokunduğumuzda, kart durumuna geçiyoruz. Daha fazla durum oluşturmak ve bunları doğru şekilde tetiklemek isterseniz, aşağıdaki snippet sizin için çok daha iyi olacaktır:

 button.onTap -> card.stateSwitch("b")

Bu snippet, katmanın belirli bir durumunu tetiklemek istediğinizde kullanışlıdır.

Prototipimde yaptığım son ayarlama, durumlar arasındaki animasyon hızı ve eğrisindeki bir değişikliktir:

 card.animationOptions = curve: Spring time: 0.8 

Eventler ile yapabileceğiniz daha çok şey var ama bu noktada neredeyse her türlü temel etkileşimi oluşturabileceksiniz. Gördüğüm en iyi yazılı belgelerden biri.

Framer'da Çalışmanızı Hızlandırma: Bileşenler

İşinizi hızlandırmak için bileşenler eklemenin zamanı geldi. Bu noktadan itibaren bu öğreticiden en iyi şekilde yararlanmak için bu prototipi indirin.

1. Birinci Bileşen: Kaydırma

Prototipimizi biraz değiştirdim. Şimdi elimizde bir liste var ama yüksekliği ekran çözünürlüğünün üzerinde. Prototipte tüm listeyi görebilmek için scrolling oluşturmamız gerekiyor.

Adım 1: Katmanlar oluşturma ve bileşenleri ayarlama.

Ekranımızdan daha büyük bir yüksekliğe sahip bir katman oluşturarak başlayalım. Bu katmanı etkileşimli olarak işaretleyin ve liste olarak adlandırın. Ardından kod moduna geçin. Bu sefer kullanışlı sol kenar çubuğunu kullanmayacağız. Tüm ekranımızı kaydırılabilir olacak şekilde ayarlayalım:

 scroll = new ScrollComponent width: Screen.width height: Screen.height

Bu kod, mevcut cihazın genişliği ve yüksekliği ile görünmez bir alan oluşturur.

Adım 2: Framer'a hangi katmanları kaydırmak istediğinizi söyleyin.

Henüz bir şey olmadı. Framer'e hangi katmanların kaydırılabilir olması gerektiğini söylemeliyiz. Bunu yapmak için kaydırma bileşenine liste katmanımızı ekliyoruz:

 list.parent = scroll.content

Adım 3: Dikey kaydırmayı kilitleme.

Şimdi kaydırmamıza izin var, ancak bu her yöne oluyor. Kaydırmayı dikey bir eksende kilitlememiz gerekiyor:

 scroll.scrollHorizontal = false 

Vay! Yalnızca beş satırlık basit kodla uygulamanızın içinde bir kaydırma oluşturdunuz.

2. Sayfa Bileşeni: Ekranı Ekrana Kaydırma

Ekranlar arasında geçiş yapmak için çok popüler bir etkileşim kaydırmadır. Buradaki fikir, kaydırma bileşenine çok benzer. Çalışan bir prototipi buradan indirebilirsiniz.

Adım 1: Bileşenin ayarlanması.

İlk olarak, kod düzenleyicide sihrin gerçekleşeceği bir "kutu" oluşturmalıyız:

 page = new PageComponent width: 315 height: Screen.height x: Align.center scrollVertical: false clip: false # the content outside the box won't be clipped

Bu noktada, buradaki tüm kodlara aşina olmalısınız. Bu, bileşenin ve alanının basit bir kurulumudur. Şimdi kaydırmak için bazı katmanlar oluşturmamız gerekiyor.

2. Adım: Katmanlar oluşturma

İlk prototip tasarımımızı kullanacağız ve biraz değiştireceğiz. Bir kart resmi yerine bu sefer iki resim içe aktardım.

İlk başta, çalışma yüzeyini iki kat daha geniş yapmalıyız. Çalışma yüzeyi özellikleri panelinde genişliği bulun ve iki ile çarpın (veya yalnızca *2 ekleyin). Kartları yan yana yerleştirin, mavi nokta ile etkinleştirin ve uygun şekilde adlandırın: card1 ve card2 .

Adım 3: Sayfa bileşenine katmanlar ekleme.

Kod düzenleyicideki kodumuzun sonuna şunu eklemeliyiz:

 card1.parent = page.content card2.parent = page.content

Bu, bu katmanları bileşene eklediğimiz anlamına gelir.

Sayfa bileşeni artık kullanıma hazır!

Son söz

Hepsi bu, Millet! Umarım bu Framer eğitimini, piyasadaki en güçlü prototip oluşturma aracıyla yolculuğunuza başlamak için faydalı bulmuşsunuzdur. Ayrıca, Facebook'taki Framer grubuna katılmayı da düşünmelisiniz. Etrafta devasa bir topluluk var ve yeni başladığınızda size yardımcı oluyorlar.

Framer'ın içinde daha da derine inmek isterseniz, Framer belgelerini okumayı deneyin.

• • •

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