Pixate'de bir yüzer eylem düğmesi prototipi

Sep 10, 2025
Nasıl Yapılır

PIXATE, Android ve iOS cihazlarında önizlenebilecek etkileşimli mobil mockupları hızlı bir şekilde prototip yapmanızı sağlar. Bu eğitimde, alt seçenekler de dahil olmak üzere bir yüzer eylem düğmesi (FAB) oluşturmak için kullanacağız. Geçiş ve koşullar gibi pixate'deki farklı teknikleri ve ayarları keşfedeceğiz.

Fabs, eylemi teşvik etmek ve bir kullanıcının dikkatini çekmek için kullanılır. Genel olarak bir uygulamanın ana fonksiyonlarına bir fab üzerinden erişilir. Fab'miz, güzel, doğal hissi arayüzlerine kendini ödünç veren malzeme tasarım tarzında olacaktır. Kullanırsanız malzeme tasarım öğeleri uygulamak basittir Google'ın kuralları referans için.

Dalışmadan önce, pixate'in yalnızca görüntüleri kullandığını anlamak önemlidir, bu nedenle bireysel projeniz için varlıkları hazırlamak ve gerekli ekran yoğunluğuna aktarmak isteyeceksiniz. Bu eğitimde kullanılan görüntüler doğrudan Malzeme Tasarım Sticker Sac . Bu, elemanların aydınlatmasını, gölgelerinin, boyutunu ve genel havasının yönlendirmeleri ile hizalanmasını sağlar. Tuval menü çubuğunun ortasındaki flyout menüsünden uygun seçeneği seçerek prototipliyseniz, cihazı değiştirebilirsiniz.

Ayrıca Android veya iOS için Pixate Mobile uygulamasına da ihtiyacınız olacak. Uygulama, cihazınızın ekranınıza sığacak şekilde prototipi otomatik olarak ölçeklendireceği için hangi cihazın önizleneceği önemli değil.

Bu eğitim için ihtiyacınız olan tüm dosyaları bulun İşte .

01. Başlayın

Pixate'i açın ve hoşgeldiniz ekranından 'Yeni bir prototip oluştur'u tıklayın. İstediğiniz zaman kaydetme yerini seçin ve dosyanızı adlandırın.

Kaydet'i tıklattığınızda, prototipliyseniz cihazı seçmeniz istenir. Bu, önizlediğiniz cihaz olmasına gerek yok - bu örnek için Nexus 5.'yu seçiyoruz. Şimdi boş bir tuvaleye bakmalısınız.

02. Resimlerinizi alın

Import all the necessary assets for your prototype

Prototipiniz için gerekli tüm varlıkları alın

Başlamak için, bu öğretici için görüntüleri almak istiyoruz. Kullandığım tüm varlıkları bulacaksın İşte (Bunların hepsi 3x prototip içindir). Ekranın sol üst köşesinde, Orta sekmesine tıklayın ve ardından '+' düğmesini tıklayın. Varlıklarınızın bulunduğu klasöre gidin, hepsini seçin ve Aç'ı tıklatın.

03. Ekleme ve konum

Şimdi fab ve simge görüntülerini eklemek ve konumlandırmak istiyoruz. Pixate'de, varlıkları tuvalle sürüklediğinizde, katman olarak oluşturulurlar ve katmanın adı, yüklediğiniz görüntünün dosya adı olacaktır. Bu, bu eğitim boyunca katmanlara atıfta bulunacağım.

'Fab_normal' tuvaline sürükleyin ve tabakayı fab'ın oturmasını istediğiniz yere yerleştirin. Ayrıca 'icon_add' varlığını sürükleyip fab üzerinde ortalayın. 'İcon_add' ithal ettiğinizde ve Fab'e yapıştırmayı deneyin, merkez noktasından daha düşük olur. Bunu düzeltmek için, klavyenizdeki yukarı oku üç kez vurun. Bu, görsel merkeze dürtecek.

04. Fab örneklerinizi ekleyin

Add four instances of the FAB to your blank canvas

Fab'in dört örneğini boş tuvalinize ekleyin

Şimdi tuval için dört örnek 'FAB_OPTION' ekleyin. Birincisini, alt kenarlık 'FAB_NORMAL' en üstüne yapıştırın ve dikey olarak merkez hizalıdır.

Kalan üç 'FAB_OPTION' katmanlarını hizalayın, böylece dikey olarak orta hizalı ve birbirlerinin üstüne otururlar. Genişletildiğinde FAB menüsünün nasıl görüneceği budur.

05. Seçenek simgelerini ekleyin

Tüm seçenek simgelerini ('icon_school', 'icon_flight', 'icon_cake' ve 'icon_basket') tuvaline ekleyin ve her birini 'FAB_OPTION' düğmesinin bir örneğiyle hizalayın. Yine, gölge görüntü dosyasına dahil edildiğinden, dairenin merkezi katmanın merkezi değil. Simgelerin her birini yaklaşık üç noktaya çarpmanız gerekir, böylece merkezli görünürler.

06. Preslenmiş Fab'ı ekleyin

Place the 'FAB_pressed' icon on top of the unpressed version

'Fab_Pressed' simgesini, edilmemiş versiyonun üstüne yerleştirin

Son olarak, tuval için 'fab_pressed' ekleyin ve 'FAB_NORMAL' kısmına yerleştirin. 'Fab_pressed' dürtmek, böylece dairenin kenarları 'fab_normal' eşleşir. Bu, civarın kapasiteli hizalamasından yaklaşık üç nokta.

07. Yuvalama Katmanları

Birbirinin içindeki iç içe geçmiş katmanlar ebeveyn / çocuk ilişkisi yaratır. Bu, bir grup katmana animasyonları uygulamanıza ve bir birim olarak canlandırmanıza olanak sağlar. Katman listesinde (ekranın sol üst köşesinde) bir tabakayı diğerine sürükleyerek ve bırakarak elde edilir.

08. Yuva seçeneği simgesi katmanlar

Nest the option icon layers into their respective button layers

Seçenek simgesi katmanlarını kendi düğme katmanlarına yerleştirin

Seçenek simgesi katmanlarını kendi düğme katmanlarına yerleştirin. Örneğin, 'icon_school' katmanını seçeneğin katman listelemesine sürükleyerek 'icon_school' '' de 'FAB_OPTION' içine yerleştirin.

09. Durulama ve Tekrarla

Bunu tüm menü seçenekleri için tekrarlayın, doğru düğme seçeneğinin altındaki simgeleri iç içe geçtiğinizden emin olun. Katman listesi görünümünü basitleştirmek için tüm seçenek katmanlarını daraltmaktan çekinmeyin.

10. Özellikleri ayarlayın

'Fab_Pressed' dosyasını yeniden sıralayın, böylece 'icon_add' altında oturur, ancak 'fab_normal' yukarısındadır. Şimdi 'icon_add' seçeneğini seçin ve Katman Listesinin üstündeki '+' düğmesini tıklayın. Katman özellikleri panelinde (ekranın sağ üst köşesinde) 'fab_pressed' (80 x 92) eşleşmesi için genişliği ve yükseklik değerlerini değiştirin. Bu, etkileşimli alanın tüm fab'ı kapsadığını garanti eder.

11. Bir musluk etkileşimi ekleyin

Set the colour swatch in the Properties panel to transparent, and add a Tap interaction

Özellikler panelindeki renk örneğini saydam olarak ayarlayın ve bir musluk etkileşimi ekleyin

Özellikler panelinde, renk örneğini saydam olarak ayarlayın ve katmanı yerleştirin, böylece 'fab_pressed' ile merkez hizalıdır. Ardından, listedeki katmanın üzerindeki bir musluk etkileşimini sürükleyin. Bastırmak cmd ve 'FAB_OPTION' katmanlarını ve 'fab_pressed' olanların yanı sıra opaklığı ayarla 0 . Simge katmanlarının opaklığını değiştirmeyin! Ebeveyn katmanlarını ayarladığınız için, simge katmanlarının opaklığı onlardan devralınır.

12. Simgeyi döndürün

Fab simgemizi dokunalım, muslukta döndürelim. Pixate'de, animasyonlar başka bir katmanın durumuna başvurabilirler. Bu, bir durum yerine getirildikten sonra bir animasyon yapmanızı sağlar. 'İcon_add''u döndürmek istiyoruz, böylece diğer animasyonların koşullarını buna dayanabiliriz. Döndürme animasyonunu 'icon_add' üzerine sürükleyin ve aşağıdaki seçenekleri ayarlayın. Dayalı: Dokunun katmanı ve Dokunmak , EĞER: icon_addpng.Rotation == 0 , Döndürün: -225 , Kolaylık eğrisi: kolaylaştırmak ve kübik , Süre: 0.3 .

13. Ters Durum

Add a reverse condition to rotate the icon back to its original position

Simgeyi orijinal konumuna geri döndürmek için ters bir durum ekleyin.

Animasyonun altındaki '+ Koşul' bağlantısını tıklayın ve aşağıdakileri ayarlayın: EĞER: icon_addpng.Rotation! = 0 , Döndürün: 0 , Kolaylık eğrisi: kolaylaştırmak ve kübik , Süre: 0.3 .

14. Fade-in ekleyin

Adjust the settings so the FAB fades in on tap

Ayarları ayarlayın, böylece FAB muslukta kaybolur.

Fab seçeneklerinin musluğa kaybolmasını istiyoruz. Böylece ne yaptığımızı görebiliriz, önce SEÇMELİ düğmelerine ekleyeceğiz. Bir solma animasyonunu bir seçenek düğmesine sürükleyin ve aşağıdakileri ayarlayın.

Dayalı: Dokunun katmanı ve Dokunmak , EĞER: icon_addpng.Rotation == 0 , Solmak: 100 , Süre: 0 . Sonra '+ Koşul' ve eğer: icon_addpng.Rotation! = 0 , Solmak: 0 , Kolaylık eğrisi: kolaylaştırmak ve kübik . Bunu her seçenek düğmesi için yapın.

15. Bir şeyleri aşağıya indirin

Malzeme tasarım yönergelerinde, Fab terk edildiğinde seçenekler ölçeklendirin. Seçeneklerimiz tam ölçekte başladığından, prototip yüklendiğinde onları ölçmek istiyoruz.

Bir ölçek animasyonunu bir seçenek düğmesine sürükleyin ve aşağıdaki seçenekleri ayarlayın. Dayalı: *EKRAN* ve Yüklendi , Ölçek X ve Ölçek Y: 0 ve süresi: 0. Ankraj ızgarasında alttan orta çapa seçin. Bunu her seçenek düğmesi için yapın.

16. Animasyon Seçenekleri

These settings will apply our animation to the FAB

Bu ayarlar animasyonumuzu fab'a uygulayacaktır.

Şimdi fab terk edildiğinde genişletilecek seçenekleri ayarlayalım. Bir ölçek animasyonunu en üst düğmeye sürükleyin ve seçenekleri yukarıdaki ekran görüntüsünde gösterildiği gibi ayarlayın.

17. Ölçekleri geciktirin

Bu animasyonu seçenek düğmelerinin geri kalanına eklerken, eğer gecikme özelliğinden 0.02'yi çıkarın. Üstten ikinci seçenek bir gecikmelidir. 0.04 , üçüncünün bir gecikmesi olacak 0.02 ve son 0.0 . Şimdi seçenekler birbiri ardına birini ölçeklendirecek.

18. Daha fazla animasyon seçenekleri

Add these settings to emulate the FAB being pressed

Fab preslenmiş olması için bu ayarları ekleyin

Son olarak, basılarak fab taklit etmemiz gerekir. Malzeme tasarımında, Fab'in gölgesi aşağı doğru kaydırılır ve düğmenin kullanıcıya doğru hareket ederken etkisini verecek şekilde bulanıklaştırılır. Bu, başlangıçta anlamak için biraz zordur, çünkü iki ayrı katmanı kaydırmamızı gerektirir.

Bir solma animasyonunu 'Fab_Normal' ve 'fab_pressed' üzerine sürükleyin ve ekran görüntüsünde gösterilen ayarları uygulayın.

19. Kullanıma hazır

Şimdi bu dosyayı prototiplerinizin herhangi biri için kullanabilirsiniz. Tuvalin sağ üst köşesindeki düğmeye tıkladığınızda, şu anda açık olana birleştirmek için bir pixate dosyası seçebilirsiniz. Bu, bu fab gibi bileşenleri zaten üzerinde çalıştığınız prototiplere eklemenizi sağlar.

20. Özelleştirin!

Kendi simgelerinizi alın ve uygun gördüğünüz renkleri değiştirin. Buradaki adımlarla ek fab seçenekleri ekleyebilir ve daha sonraki muslukları ve animasyonları seçenek düğmelerine ekleyebilirsiniz.

Google'dan daha fazla pixate malzeme tasarım bileşenleri için bir göz atın ve tasarlayın!

Bu makale başlangıçta ortaya çıktı net dergisi Sayı 281; buradan satın al .

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

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

Nasıl Yapılır Sep 10, 2025

(Resim Kredisi: Adobe) Prototipleme oyununun geç girişine rağmen, Adobe XD, mevcut en iyi ve en hızlı ve en hız..

6 basit adımda 3D manzara oluşturun

Nasıl Yapılır Sep 10, 2025

Bir parça yaratmak 3d sanat Doğal görünümlü bir manzara ile bir meydan okuma gibi görünebilir, ancak doğr..

Photoshop'ta gerçekçi dalgalar nasıl boyanır

Nasıl Yapılır Sep 10, 2025

Okyanus sahnelerini boyarken Photoshop CC , resim projelerimin çoğunda olduğu gibi, konuyu iyi bir şekilde kavrayabilmemizi sağlamak için bazı deniz fotoğraf referansla..

3D çalışmanızı kubbe ışıkları ile aydınlatın

Nasıl Yapılır Sep 10, 2025

Dome ışıklarının kullanımı, son on yılda CGI yaratımındaki en büyük ilerlemelerden biri olmuştur. Hesaplamalı olara..

Suluboya Usta Negatif Boyama

Nasıl Yapılır Sep 10, 2025

Olumsuz boyama, boyamayı ifade eder. olumsuz boşluk Bu olumlu şekilleri tanımlar. Bu özellikle geleneksel suluboya ile özellikle önemlidir, burada boyama şeylerin ış�..

Büyülü parlayan runları nasıl boyanır

Nasıl Yapılır Sep 10, 2025

Bu eğitimde, parlayan gibi görünen mistik runları nasıl boyayacağınızı gösteririm. Parlayan şeyleri boyamak için form..

Bir fotoğrafı bir VR setine dönüştürme

Nasıl Yapılır Sep 10, 2025

Tipik olarak, birisi artırılmış gerçeklik veya sanal gerçekliği değerlendirdiğinde, video oyunlarını düşünüyor ola..

10 En İyi Houdini Öğreticileri

Nasıl Yapılır Sep 10, 2025

Houdini, birçok Hollywood filminde kullanılan VFX oluşturma araçları olan güçlü bir canavardır. Ancak ilk öğrenme eğrisi diktir, bu yüzden bu ders listesini, Sıvı etkilerinden ..

Kategoriler