İçerik
- Sketch'ten içe aktar
- Maske ve avatar katmanları oluşturun
- Durumları tanımlayın
- Durumlar arasında canlandırma
- Gerçek bir mobil cihazda deneyin
Tasarım prototiplemesinin arkasındaki mantık yeni değil - tarayıcıda tasarımla ilgili tüm vızıltılarla aynı. Bir tasarımı gerçek bağlamında gördüğünüzde, tamamen farklıdır. Bir arayüzün nasıl işleyeceği ve hissedeceği konusunda varsayımlar yapmanız gerekmediğinde daha iyi kararlar alırsınız. Bu fazladan bir iş gibi görünebilir, ancak tasarımınızın çalıştığını görerek elde edebileceğiniz içgörüler paha biçilmezdir.
Framer, kod tabanlı yeni bir prototip oluşturma aracıdır. Sketch'te (veya Photoshop) her zaman yaptığınız gibi örnekler oluşturabilir ve bunları Framer'a içe aktarabilirsiniz. Sonra biraz CoffeeScript yazın ve çok şey başarabilirsiniz.
Size Framer'da prototip oluşturmanın temellerini, iki görünüme sahip bir iOS uygulama prototipi örneğini kullanarak öğreteceğim: profil görünümü ve kullanıcının avatar resminin yakınlaştırılmış görünümü. Genişletilmiş fotoğraf görünümünün nasıl açılıp kapanacağının prototipini oluşturacağız ve ayrıca onu canlandıracağız. Çevrimiçi demoyu buradan görüntüleyin (kaynak kodunu görmek için sol üst köşedeki simgeye tıklamanız yeterlidir). Ayrıca framerjs.com adresinden edinebileceğiniz ücretsiz Framer deneme sürümüne de ihtiyacınız olacak.
Sketch'ten içe aktar
İlk adım, katmanları Sketch'ten Framer'a içe aktarmaktır. Tasarım Sketch'te açıkken Framer'da İçe Aktar düğmesini tıklamanız ve ardından gelen iletişim kutusunda doğru dosyayı seçmeniz yeterlidir. Framer, her katmandan görüntüleri otomatik olarak içe aktaracak ve aşağıdaki gibi bir kod aracılığıyla erişilebilir hale getirecektir:
sketch = Framer.Importer.load "içe aktarılmış / profil"
İçe aktarılan katmanlara erişmek için bu değişkeni kullanın. Örneğin, Sketch dosyasında 'content' adlı katmana referans vermek için, Framer'a sketch.content yazarsınız.
Maske ve avatar katmanları oluşturun
Bu prototipin temel işlevi, dokunulduğunda avatar görüntüsünü genişletmek ve sonra tekrar dokunulduğunda kapatmaktır. İlk olarak, iki maske katmanı oluşturacağız - iç içe geçmiş bir maske veya başka bir maskenin içinde bir maske. Hoş, ince bir açılış ve kapanış efekti oluşturmak için her iki maskeyi aynı anda canlandıracağız. HeaderMask katmanı, avatar fotoğrafını genişletildiğinde bir dikdörtgene kırpacak ve maske katmanı onu profil görünümünde küçük bir daire şeklinde kırpacaktır.
HeaderMask katmanını şu şekilde oluşturun:
headerMask = yeni Katman genişliği: Screen.width, yükseklik: 800 backgroundColor: "şeffaf"
İlk kod satırı, yeni katmanı oluşturur ve adlandırır. Ardından, CoffeeScript’in girinti sözdizimini kullanarak genişlik, yükseklik ve arka plan özelliklerini ayarlarız. Avatar fotoğrafı genişletildiğinde alttaki katmanlar görünmesi için şeffaf bir arka plan kullanacağız.
Ardından maske katmanını oluşturun:
maske = yeni Katman genişliği: 1000, yükseklik: 1000 backgroundColor: "şeffaf", borderRadius: 500 y: sketch.header.height - 100 superLayer: headerMask ölçeği: 0.2, originY: 0
Yeni bir katman oluşturuyoruz ve aynı şekilde özellikleri belirliyoruz. Büyük borderRadius bu katmanı bir daire haline getirir. Maske katmanını, Sketch'ten içe aktarılan başlık katmanıyla örtüşecek şekilde konumlandırıyoruz. Ayrıca yüzde 20 veya 0,2'ye ölçeklendireceğiz. Sıfır başlangıç noktası, görüntünün bağlantı noktasını veya kaydını üst kenara ayarlar.
Kalan özellik olan superLayer, oluşturduğumuz headerMask katmanını bu yeni katmanın üst öğesi olarak ayarlar. Framer'da maskeleme bu şekilde çalışır. Basitçe superLayer özelliğini ayarlayın ve ana katman çocuğu maskeleyecektir.
Ardından, avatar grafiğini oluşturmalı ve bu yeni maskelerin içine yerleştirmeliyiz. Kırpma sınırlarını yakınlaştırmak ve hareketlendirmek için avatar katmanını manuel olarak oluşturacağız. Proje klasörünün "resimler" alt klasörüne bir fotoğraf kopyalayın. Ardından bu görüntüyü kullanarak bir katman oluşturun:
avatar = yeni Katman resmi: "images / avatar.png" genişlik: mask.width, yükseklik: mask.height superLayer: mask, force2d: true
Avatarın süper katmanını maske katmanı olarak ayarladığımıza dikkat edin. Her ikisi de artık headerMask içinde yuvalanmıştır. Ayrıca genişliği ve yüksekliği, resmin maskelenmiş alanı tamamen doldurması için ayarlıyoruz.
Son olarak, animasyon için kullanacağımız maskenin Y konumunu saklamak için bir değişken oluşturacağız. Ekrandan daha büyük olduğu için yatay olarak ortalayacağız.
maskY = mask.y mask.centerX ()
Durumları tanımlayın
Bir animasyon oluşturmanın ilk adımı, başlangıç ve bitiş durumlarını tanımlamaktır. Framer'da durumlar, kodla yazılmış ana kareler gibidir. Eyalet, yalnızca bir mülkler koleksiyonudur. Her katmanın varsayılan bir durumu vardır. Bu prototip için, bu varsayılan, animasyon için başlangıç noktası görevi görecek, bu nedenle her katman için yalnızca ikinci bir durum ayarlamamız gerekiyor.
Durumlar için sözdizimi çok basittir. Katmanı referans alın, layer.states.add () yöntemini kullanın ve ardından dahil edilecek özellikleri listeleyin.
sketch.content.states.add (hide: {opacity: 0}) headerMask.states.add (taşıma: {y: 120}) mask.states.add (büyüme: {ölçek: 1.1, y: maskY - 420})
Sketch'ten içe aktarılan ve diğer tüm profil ekranı öğelerini içeren içerik katmanı için ikinci durum tamamen şeffaf olmalıdır. Bu şekilde, avatar genişletildiğinde, siyah bir arka plana sahip oluruz ve geri kalan içe aktarılan simgeler ve öğeler görünecektir.
İkinci kod satırı, headerMask için bir durum yaratır ve bu durum onu 120'lik bir Y konumuna indirir. Bu, avatar fotoğrafı büyütüldüğünde başlığın ve kapat düğmesinin ekranın üst kısmında gösterilmesini sağlar. Ayrıca avatar fotoğrafının kırpma sınırlarını da canlandıracak.
Son olarak, maske katmanı için yeni bir durum, daha önce oluşturduğumuz maskY değişkenini kullanarak onu hem ölçeklendirecek hem de yukarı taşıyacaktır. Maske katmanının orijini (veya bağlantı noktası) üst kenarı olduğundan, görüntünün merkezinin görünür olması için onu 420 piksel yukarı taşımamız gerekir.
Durumlar arasında canlandırma
Varsayılan durumlar ve az önce oluşturduğumuz yeniler arasında animasyon uygulamak için yalnızca dört satır daha koda ihtiyacımız var. Avatar katmanında bir tıklama işleyici ayarlayacağız. Bir kullanıcı profil ekranında ona dokunduğunda, durumları değiştirerek genişletilmiş görünüme geçeceğiz. Tekrar dokunulduğunda, küçük bir daireye dönmesi için varsayılan durumlara geri döneceğiz. Aynı kod satırları her iki etkileşimi de ele alır:
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
Bu bloğun ilk satırı, avatar katmanındaki tıklama işleyicisini ayarlar. Her dokunulduğunda, nasıl kırpıldığına veya hangi boyutta olduğuna bakılmaksızın, aşağıdaki ifadeler çalışacaktır.
Daha sonra her katmana başvururuz ve durumları değiştirmek için layer.states.next () yöntemini kullanırız. Layer.states.next () kullandığınızda, Framer dahili varsayılan animasyon ayarlarını kullanacaktır. Bu son derece kullanışlıdır, ancak animasyon eğrilerini inceleyerek daha da iyi animasyonlar oluşturabilirsiniz.
Burada olduğumuz gibi durumları kullanırken, layer.states.animationOptions özelliğini kullanarak her animasyon eğrisini ayrı ayrı kolayca değiştirebilirsiniz. Sadece üç küçük ayarlamayla, animasyon tamamen farklı hissediyor:
sketch.content.states.animationOptions = eğri: "kolaylık", zaman: 0.3 headerMask.states.animationOptions = eğri: "yay (150, 20, 0)" mask.states.animationOptions = eğri: "yay (300, 30, 0) "
Yavaş yavaş kaybolan içerik katmanı için basit bir eğri ön ayarı seçeceğiz, hareket hızı artıracağız ve çok hızlı olması için animasyon süresini 0,3 olarak ayarlayacağız.
HeaderMask ve maske katmanları için bir yay eğrisi kullanın. Amaçlarımız için, yay eğrisi değerlerinin animasyonun hızını ve sekmesini değiştirdiğini bilmeniz yeterlidir. Maske katmanının değerleri, animasyonunu headerMask ve içerikten çok daha hızlı hale getirecektir. Yay eğrisi ayarları hakkında daha fazla ayrıntı için framerjs.com/docs adresindeki Framer belgelerine bakın.
Gerçek bir mobil cihazda deneyin
Tasarımı gerçek bir cihazda görmek, emülatör kullanmaktan çok daha etkilidir ve işinizde faydalarını göreceksiniz. Framer, yerel ağınız üzerinden prototipinize bir URL sunan yerleşik bir sunucu olan bir yansıtma özelliği içerir. Cihazınızı kullanarak URL'yi ziyaret etmeniz yeterlidir.
Framer'da kendi tasarımlarınızın prototipini oluşturmak için bilmeniz gereken her şeyi öğrendiniz. Ne için bekliyorsun?
Kelimeler: Jarrod Drysdale
Jarrod Drysdale bir yazar, tasarım danışmanı ve dijital ürün üreticisidir. Bu makale ilk olarak net dergisinin 270. sayısında yayınlandı.
Bunu beğendin mi? Bunları oku!
- Sketch'te tıklanabilir, canlı prototipler oluşturun
- Blog nasıl başlatılır
- En iyi fotoğraf editörleri
