Prototypowy przycisk pływających akcji w pixate

Sep 12, 2025
Jak

Pixate umożliwia szybkie prototyp interaktywne makiety mobilne, które można wyświetlić na urządzeniach z Androidem i iOS. W tym samouczku wykorzyszytujemy go do zbudowania pływającego przycisku akcji (FAB), w tym subcjonowanie. Będziemy zbadać różne techniki i ustawienia w Pixate, takich jak przejścia i warunki.

FAB są używane do promowania działań i przyciągania uwagi użytkownika. Ogólnie główne funkcje aplikacji są dostępne przez fab. Nasze Fab będzie w stylu materialnym, który nadaje się do pięknych, naturalnych interfejsów. Wdrażające elementy projektu materiału jest proste, jeśli używasz Wytyczne Google. na przykład.

Przed nurkowaniem ważne jest, aby zrozumieć, że Pixate wykorzystuje tylko obrazy, więc będziesz chciał mieć zasoby dla indywidualnego projektu gotowy i eksportować do niezbędnej gęstości ekranu. Obrazy używane w tym samouczku są ciągnięte bezpośrednio z Arkusz naklejki do projektowania materiałów . Zapewnia to oświetlenie, cienie, rozmiar i ogólny charakter elementów wyrównują się do wytycznych. Możesz zmienić urządzenie, dla którego jesteś prototypowanie, wybierając odpowiednią opcję z menu wyboru w środku menu na płótnie.

Potrzebujesz również aplikacji mobilnej PIXAT dla Androida lub iOS. Nie ma znaczenia, włączone urządzenie, włączone, ponieważ aplikacja automatycznie skala prototyp, aby pasował do ekranu urządzenia.

Znajdź wszystkie pliki potrzebne do tego samouczka tutaj .

01. Zacznij

Otwórz Pixate, a z ekranu powitalnego kliknij "Utwórz nowy prototyp". Wybierz żądaną lokalizację Zapisz po wyświetleniu monitu i nazwij swój plik.

Po kliknięciu zapytania zostaniesz poproszony o wybranie urządzenia, dla którego prototypowanie. Nie musi to być urządzenie, na którym jesteś podgląd - dla tego przykładu wybieramy Nexus 5. Powinieneś teraz patrzeć na puste płótno.

02. Importuj swoje zdjęcia

Import all the necessary assets for your prototype

Importuj wszystkie niezbędne aktywa dla prototypu

Aby rozpocząć, chcemy zaimportować obrazy dla tego samouczka. Znajdziesz wszystkie używane aktywa tutaj (Wszystkie są dla 3x prototyp). W lewym górnym rogu ekranu kliknij przycisk Middle, a następnie kliknij przycisk "+". Przejdź do folderu, w którym znajdują się twoje zasoby, wybierz wszystkie z nich i kliknij Otwórz.

03. Dodaj i pozycję

Teraz chcemy dodać i pozycjonować zdjęcia Fab i Icon. W Pixate, gdy przeciągasz aktywa na płótno, zostaną utworzone jako warstwa, a nazwa tej warstwy będzie nazwą pliku przesłanego obrazu. W ten sposób odnoszę się do warstw w tym samouczku.

Przeciągnij "Fab_normal" na płótno i umieść warstwę, w której chcesz usiąść. Przeciągnij również aktywa "ICON_ADD" i wyśrodkuj go na fab. Kiedy importujesz "ICON_ADD" i spróbuj zatrzasnąć go do fab, będzie niższy niż punkt środkowy. Aby to naprawić, trzy razy naciśnij strzałkę w górę na klawiaturze. Spowoduje to przesunięcie go do centrum wizualnego.

04. Dodaj swoje fab instancje

Add four instances of the FAB to your blank canvas

Dodaj cztery instancje fab na puste płótno

Teraz dodaj cztery instancje "Fab_option" do płótna. Przeciągnij pierwsze, więc dolne podchody graniczne na szczyt "Fab_normal" i jest wyrównany w pionie.

Wyrównaj pozostałe trzy warstwy "fab_option", więc są wyrównane pionowo i siedzą na drugim. W ten sposób pojawi się menu Fab, gdy zostanie rozszerzone.

05. Dodaj ikony opcji

Dodaj wszystkie ikony opcji ("Icon_school", "ICON_Flight", "ICON_CET" i "ICON_Basket" i "ICON_Basket") i wyrównaj każdemu z nich z instancją przycisku "FAB_OPTION". Ponownie, ponieważ cień jest zawarty w pliku obrazu, środek okręgu nie jest środkiem warstwy. Musisz podbić każdą z ikon o trzech punktach, więc wydają się wyśrodkować.

06. Dodaj prasowane fab

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

Umieść ikonę "Fab_pressed" na szczycie bezruchowej wersji

Wreszcie, dodaj "Fab_pressed" na płótno i umieść go na szczycie "Fab_normal". Szturchnięcie "fab_pressed", więc krawędzie koła dopasowania "Fab_normal". Jest to około trzech punktów w dół z wyrównania środkowego.

07. Warstwy gniazdowania

Warstwy gniazdowania wewnątrz siebie tworzy relację rodzic / dziecko. Umożliwia to zastosowanie animacji do grupy warstw i mają je animować jako jedną jednostkę. Osiąga się on, przeciągając i upuszczając warstwę na innym na liście warstw (w lewym górnym rogu ekranu).

08. warstwy ikon opcji gniazda

Nest the option icon layers into their respective button layers

Gniazduj warstwy ikon opcji w ich odpowiednie warstwy przycisków

Gniazduj warstwy ikony opcji w odpowiednich warstwach przycisków. Na przykład, gniazdo "ICON_SCHOOL" w odpowiednim "fab_option", przeciągając warstwę "ICON_SCHOOL" na liście warstwy opcji.

09. Płukać i odpyT

Powtórz to dla wszystkich opcji menu, upewniając się, że zagnieżdżasz ikony w prawidłowej opcji przycisku. Zapraszamy do zwijania wszystkich warstw opcji, aby uprościć widok listy warstw.

10. Dostosuj właściwości

Zmień kolejność "Fab_pressed", więc znajduje się poniżej "ICON_ADD", ale powyżej "Fab_normal". Teraz wybierz "Icon_add" i kliknij "+" na górze listy warstw. W panelu Właściwości warstwy (w prawym górnym rogu ekranu) zmień wartości szerokości i wysokości, aby dopasować "Fab_pressed" (80 x 92). Zapewni to obszar interaktywny obejmuje całe fab.

11. Dodaj interakcję Dotknij

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

Ustaw próbkę koloru w panelu Właściwości do przezroczystego i dodaj interakcję Dotknij

W panelu Właściwości ustaw próbkę koloru na przezroczystą i umieść warstwę, więc jest wyrównany w środku z "Fab_pressed". Następnie przeciągnij interakcję Dotknij na warstwie na liście. Przytrzymaj cmd. i wybierz wszystkie warstwy "fab_option, a także" fab_pressed ", a następnie ustawić krycie 0. . Nie zmieniaj krycia warstw ikony! Ponieważ dostosowujesz warstwy nadrzędne, nieprzezroczystość ikony jest od nich dziedziczona.

12. Obróć ikonę

Utwórzmy naszą ikonę Fab Ikona On. W pixate animacje mogą odnosić się do stanu innej warstwy. Pozwala to ustawić animację do gry po spełnieniu warunku. Chcemy obracać "ICON_ADD", abyśmy mogli oprzeć na nim warunki inne animacje. Przeciągnij obiektową animację na "ICON_ADD" i ustaw następujące opcje. Oparte na: Dotknij warstwy i Kran , GDYBY: icon_addpng.rotation == 0. , Obróć się do: -225. , Krzywa łagodząca: ułatwiać i sześcienny , Trwanie: 0,3. .

13. Stan odwrotny

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

Dodaj stan odwrotny, aby obrócić ikonę z powrotem do pierwotnej pozycji

Kliknij link "+ warunek" na dole animacji i ustaw następujące czynności: ELS, jeśli: icon_addpng.rotation! = 0 , Obróć się do: 0. , Krzywa łagodząca: ułatwiać i sześcienny , Trwanie: 0,3. .

14. Dodaj fade-in

Adjust the settings so the FAB fades in on tap

Dostosuj ustawienia, aby Fab zniknie w kran

Chcemy, aby opcje Fab zniknęło w kranu. Możemy więc zobaczyć, co robimy, najpierw dodamy fade na przyciskach opcji. Przeciągnij animację znikną do przycisku opcji i ustaw poniższe.

Oparte na: Dotknij warstwy i Kran , GDYBY: icon_addpng.rotation == 0. , Zniknąć do: 100. , Trwanie: 0. . Wtedy "+ warunek" i inaczej, jeśli: icon_addpng.rotation! = 0 , Zniknąć do: 0. , Krzywa łagodząca: ułatwiać i sześcienny . Zrób to dla każdego przycisku opcji.

15. Skaluj rzeczy

W wytycznych dotyczących projektów materialnych opcje skalują się, gdy super jest stuknięty. Ponieważ nasze opcje zaczynają się w pełnej skali, chcemy je skalować, gdy prototypowe obciążenia.

Przeciągnij animację skali na przycisku opcji i ustaw następujące opcje. Oparte na: *EKRAN* i Załadowany , Skala x i skala Y: 0. i czas trwania: 0. Wybierz kotwicę na dole w siatce kotwicy. Zrób to dla każdego przycisku opcji.

16. Opcje animacji.

These settings will apply our animation to the FAB

Te ustawienia zastosują naszą animację do Fab

Teraz ustawmy opcje, aby rozwinąć się, gdy fab jest stuknięty. Przeciągnij animację skali na najwyższym przycisku i ustaw opcje, jak pokazano na powyższym zrzucie ekranu.

17. Opóźnij skale

Podczas dodawania tej animacji do pozostałych przycisków opcji odejmij 0,02 od właściwości opóźnienia. Druga opcja z góry powinna mieć opóźnienie 0,04. , trzecia będzie miała opóźnienie 0,02. , i ostatni 0.0. . Teraz opcje skalują jeden po drugim.

18. Więcej opcji animacji

Add these settings to emulate the FAB being pressed

Dodaj te ustawienia, aby naciskać naciśnięcie Fab

Wreszcie musimy naśladować naciskając Fab. W materialnej konstrukcji cień Fab jest przesunięty i zamazany, aby dać efekt przycisku poruszającego się w kierunku użytkownika, gdy jest stuknięty. Jest to trochę trudne, aby początkowo dowiedzieć się, ponieważ wymaga od nas przekroczenia dwóch oddzielnych warstw.

Przeciągnij animację znikną na "Fab_normal" i "Fab_pressed" i zastosuj ustawienia pokazane na zrzucie ekranu.

19. Gotowy do użycia

Możesz teraz użyć tego pliku dla dowolnych prototypów. Klikając przycisk w prawym górnym rogu płótna, możesz wybrać plik piksujący, który ma się połączyć do tego, który jest obecnie otwarty. Umożliwia to dodawanie elementów takich jak fab do prototypów, nad którymi pracujesz.

20. Dostosuj!

Importuj własne ikony i zmień kolory, jak widzisz. Dzięki krokom tutaj można dodać dodatkowe opcje Fab, a nawet podłączyć kolejne krany i animacje do przycisków opcji.

Trzymaj oko, aby uzyskać więcej komponentów projektowych materiałów z Google i wystrój!

Ten artykuł pierwotnie pojawił się magazyn netto. wydać 281; Kupuj tutaj .

Jak - Najpopularniejsze artykuły

Jak narysować różę: początkujący i zaawansowane wskazówki

Jak Sep 12, 2025

Jak narysować różę - Jak narysować wideo różowe - Jak narysować różę: początkujący - ..

Utwórz świecący Efekt tekstowy Neon

Jak Sep 12, 2025

Często to najprostsze skutki, które wyglądają najbardziej uderzającym, a neon tekst jest taki taki projekt. Znacznie łatwie..

Jak skorygować wadliwą kompozycję

Jak Sep 12, 2025

Stworzyłem oryginalny obraz w ostatnim roku w ubiegłym roku, inspirowany przez rozległe krajobrazy fantasy artystów, takich jak Dongbiao Lu i Ruxing Gao. To była moja pierwsza stylizowan..

Włącz zdjęcia do animacji 3D z Photoshopem

Jak Sep 12, 2025

Wszyscy mamy duży sklep wspomnień wykonanych jako zdjęcia i jest świetny, aby móc wspomnieć. Ale co jeśli mógłbyś iść..

Utwórz oszałamiające krajobrazy w Houdinie

Jak Sep 12, 2025

Używając węzła, podejście proceduralne, oprogramowanie 3D Houdini z SIDEFX zapewnia artystów cyfrowych o niezwykłym poziom..

Jak prototypować aplikację mobilną z Adobe XD

Jak Sep 12, 2025

Ten samouczek pokazujący, jak wykonać prototyp aplikacji mobilnych w Adobe XD, został użyty Adobe XD C..

Jak zaprojektować promocję dla wyimaginowanej marki

Jak Sep 12, 2025

Przy projektowaniu marki, niezależnie od tego, czy jest to ustalony lub uruchomienie, w którym biorąc twórczy przewód, konsystencja we wszystkich punktach dotykowych jest kluczowa. ..

Jak połączyć rzeźbione i malowane mapy przemieszczenia

Jak Sep 12, 2025

Czasami jest bardziej wydajny do łączenia różnych map przemieszczeń w czasie renderowania, a nie rzeźbienia wszystkich. Pow..

Kategorie