Samouczek framera: jak tworzyć oszałamiające interaktywne prototypy

Spójrz na przykładowe prototypy poniżej. Zostały one zrobione w Framer. Po tym samouczku będziesz mógł w mgnieniu oka zacząć tworzyć własne oszałamiające animowane prototypy.

Framer wyszedł ze swoją najnowszą wersją tydzień temu, a rynek prototypów już nigdy nie będzie taki sam. Narzędzie do prototypowania Framer było kiedyś trudne do opanowania, ale przydatne jako najbardziej dokładne i nieograniczone oprogramowanie do prototypowania. Teraz wszystko się zmieniło. Framer jest teraz wyposażony w funkcje Design + Code + Collaborate, co oznacza, że ​​możesz stworzyć swój prototyp bezpośrednio w Framer, tworząc w pełni funkcjonalny prototyp bez żadnego oprogramowania innych firm i bez żadnych umiejętności kodowania.

Tutaj nauczę Cię, jak używać prostego kodu Framer bez wymaganej wcześniejszej znajomości kodowania. Dowiesz się, jak łączyć najlepsze funkcje z trybu projektowania i kodowania w Framer, aby tworzyć animowane i interaktywne prototypy. Przejdźmy więc do tego samouczka i pobierz kilka małych fragmentów kodu, aby ulepszyć swoje prototypy.

Podstawy tworzenia ramek

Zacznijmy! Wystarczy wejść na framer.com i pobrać wersję próbną. Dają ci dwa tygodnie w pełni funkcjonalnego demo i zaufaj mi, to wystarczająco dużo czasu, aby dowiedzieć się dużo o tym oprogramowaniu do prototypowania.

Po instalacji możesz chcieć przejrzeć niektóre z podanych przez nich przykładów i trochę się nimi pobawić. Kiedy skończysz, nadszedł czas, aby rozpocząć prototypowanie.

(W tym samouczku Framer skupię się na tworzeniu prototypów bezpośrednio w Framer.js. Powinieneś również wiedzieć, że istnieją inne sposoby na rozpoczęcie tworzenia prototypów w Framer. Na przykład możesz pracować bezpośrednio z plikami Sketch. Omówię ten przepływ pracy w inny artykuł.)

Całkowicie nowy framer – tryb projektowania

W tym artykule stworzymy trzy fajne prototypy w ciągu kilku minut przy minimalnym wykorzystaniu kodu: podstawowe interakcje, komponent przewijania i komponent strony

Najnowsza wersja Framera ma świetną nową funkcję: tryb projektowania. Pozwala pracować prawie tak samo, jak w Sketchu lub Figma. Możesz tworzyć warstwy wektorowe, importować obrazy lub tworzyć i stylizować warstwy tekstowe. Wszystko to staje się bardzo przydatne, gdy chcesz szybko prototypować bez aplikacji innych firm.

Stwórzmy projekt typu aplikacji

W pierwszej części tego samouczka przygotujemy plac zabaw dla naszego prototypu Framer. Stworzymy projekt typu aplikacji, z trzema różnymi rodzajami warstw: wektorową, graficzną i tekstową.

Krok 1: Utwórz prosty przycisk i tło.

Aby rozpocząć projektowanie, wybierz pierwszą kartę — czyli tryb projektowania — i dodaj obszar roboczy, tak jak w Szkicu. W tym samouczku będziemy pracować nad prototypem iPhone'a 7, więc wybrałem to ustawienie jako rozmiar mojego obszaru roboczego. Dodałem również wypełnienie niebieskiego tła.

Następnie wybierz narzędzie prostokąta i utwórz kształt w postaci prostego okrągłego przycisku.

Krok 2: Dodaj kartę z obrazem.

Drugą metodą dodawania warstw jest funkcja przeciągania i upuszczania . Możesz wybrać dowolny plik obrazu z komputera, upuścić go do Framer i nadać mu styl za pomocą prawego paska bocznego. Użyłem prostej ilustracji i stylizowałem ją na kartę.

Krok 3: Dodaj tytuł aplikacji.

Framer umożliwia również dodanie warstwy tekstowej. Znowu stylizacja jest w zasadzie taka sama jak w każdym oprogramowaniu graficznym. Możesz wybrać czcionkę, rozmiar, wyrównanie, odstępy między literami i nie tylko.

Krok 4: Poinformuj Framera, które warstwy są interaktywne.

Przed uruchomieniem naszego prototypu Framer mamy jeszcze jeden krok. Musimy tylko powiedzieć Framerowi, które warstwy będą interaktywne. Wystarczy kliknąć kropkę obok nazwy warstwy w panelu warstw. Dobrze jest odpowiednio nazwać każdą warstwę do dalszego użytku. Nazwałem moją kartę warstw i przycisk .

Krok 5 (Bonus): Zdefiniuj swoje globalne kolory.

Dobrą praktyką jest zdefiniowanie pewnych zmiennych dla całego prototypu. Możesz ustawić paletę kolorów, typografię i podstawowe wymiary, których będziesz używać od samego początku. Pomaga to zaoszczędzić czas.

Kiedy konfigurujesz kolory, po prostu nazwij je w edytorze kodu i podaj wartości HEX, RGB lub RGBa po odpowiednim znaku „=”. Pamiętaj, aby wszystkie zmienne znajdowały się na samej górze kodu.

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

Krok 6 (Bonus): Dodanie względnej pozycji.

Dzięki nowemu Framerowi bardzo łatwo jest utrzymać responsywność prototypu. Pozycje względne można ustawić w trybie projektowania , jak pokazano poniżej:

Oto krótka lista właściwości, które są przydatne do wyrównywania i obliczania położenia warstwy bezpośrednio w kodzie. Możesz wykonać niezbędną matematykę, aby obliczyć pozycje warstw. Staje się to konieczne, gdy później dodajesz interakcje i chcesz, aby Twój prototyp był responsywny.

 # 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

Teraz wszystko gotowe — zacznijmy nasz projekt

Stworzyliśmy różne rodzaje warstw Framer. Teraz nasz interaktywny plac zabaw jest gotowy do pracy.

Wreszcie! Nudna część dobiegła końca. Teraz nadszedł czas na projekt interakcji.

Pobierz cały prototyp tutaj.

1. Tworzenie interakcji z informacją zwrotną o przycisku

Aby zaprojektować jakąkolwiek interakcję, potrzebujemy wyzwalacza, aby to się stało. Może to być prawie wszystko: dotknięcie ekranu, koniec animacji, koniec ładowania obrazu lub akcelerometr telefonu.

Krok 1: Tworzenie wydarzenia do interakcji.

Zachowamy prostotę. Utwórzmy informację zwrotną przycisku po jego dotknięciu, używając następującego polecenia:

 layerA.onTap (event, layer) ->

Framer właśnie napisał dla ciebie ten wiersz kodu. Oznacza to, że po dotknięciu warstwy przycisków coś się stanie.

Krok 2: Dodanie animacji do wydarzenia.

Zacznijmy animację po tym wyzwalaczu. Aby to zrobić, kliknij kropkę obok warstwy przycisku w panelu warstw, a następnie wybierz Dodaj animację . Kiedy dodajesz animację, Framer przechodzi do trybu edycji animacji. Możesz skalować, przesuwać, obracać lub zmieniać dowolny parametr warstwy:

Framer dodał jeszcze kilka linijek kodu. (Nie martw się — nadal możesz edytować swoją animację za pomocą panelu animacji.)

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

Gratulacje! Właśnie utworzyłeś swoją pierwszą interakcję. W tej chwili działa tylko raz, ale naprawimy to. Powodem, dla którego możesz uruchomić tę animację tylko raz, jest to, że po jej zakończeniu nic się nie wydarzy. Musimy zresetować wszystkie parametry po zakończeniu pierwszej animacji do stanu poprzedniego.

Krok 3: Resetowanie animacji.

Dodaj kolejne wydarzenie, prawie tak samo jak wcześniej. Różnica polega na tym, że szukamy wydarzenia po zakończeniu animacji:

Tym razem kod dodany przez Framera będzie wyglądał tak:

 button.onAnimationEnd (event, layer) ->

Tak więc, gdy animacja na warstwie przycisków zostanie zakończona, możemy dodać następną animację, która zresetuje parametry warstwy przycisków :

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

Otóż ​​to! Mamy teraz działającą informację zwrotną po dotknięciu naszego przycisku.

2. Tworzenie różnych stanów dla interakcji warstwy karty

Ok, teraz wiesz, jak zaprojektować animację i ją uruchomić. Częściej trzeba projektować różne stany warstwy. Możesz zaprojektować wiele stanów tej samej warstwy, zmieniając tylko niektóre parametry, takie jak położenie, rozmiar lub krycie.

Krok 1: Dodawanie i tworzenie stanów dla warstwy karty.

Sposób dodania stanu do karty jest prawie taki sam, jak dodawanie animacji. Musisz kliknąć kropkę obok warstwy karty , a następnie kliknąć Dodaj stan . Teraz wskoczyłeś do trybu edycji stanu. Zaprojektuj tak, jak lubisz:

Proszę zwrócić uwagę na wcięcie kodu. Powinien zaczynać się od pierwszego rzędu.

Zaprojektowałem dwa różne stany dla mojej warstwy kart :

 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)"

Krok 2: Dodawanie wydarzeń.

Jest jeszcze tylko jeden krok, aby to zadziałało. Musimy stworzyć wydarzenie dla zmiany tych stanów.

 button.onTap -> card.stateCycle()

Powoduje to zmianę wszystkich stanów warstwy jeden po drugim, za każdym razem, gdy wykonujesz akcję. Tak więc w naszym przypadku za każdym razem, gdy klikamy warstwę przycisków , zmieniamy stan karty . Jeśli chcesz utworzyć więcej stanów i poprawnie je wywołać, poniższy fragment będzie działał dla Ciebie znacznie lepiej:

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

Ten fragment kodu jest przydatny, gdy chcesz wyzwolić określony stan warstwy.

Ostatnią poprawką, jaką wprowadziłem do mojego prototypu, jest zmiana szybkości animacji i krzywej między stanami:

 card.animationOptions = curve: Spring time: 0.8 

Z wydarzeniami można zrobić znacznie więcej , ale w tym momencie będziesz w stanie stworzyć prawie każdą podstawową interakcję. Jest to jedna z najlepiej napisanych dokumentacji, jakie kiedykolwiek widziałem.

Przyspieszenie pracy w Framer: Komponenty

Nadszedł czas, aby dodać komponenty, które przyspieszą Twoją pracę. Aby od tego momentu jak najlepiej wykorzystać ten samouczek, pobierz ten prototyp.

1. Pierwszy składnik: przewijanie

Zmodyfikowałem nieco nasz prototyp. Teraz mamy w środku listę, ale jej wysokość jest powyżej rozdzielczości ekranu. Musimy stworzyć przewijanie, aby móc zobaczyć całą listę w prototypie.

Krok 1: Tworzenie warstw i konfigurowanie komponentów.

Zacznijmy od stworzenia warstwy o wysokości większej niż nasz ekran. Oznacz tę warstwę jako interaktywną i nazwij ją listą . Następnie przejdź do trybu kodu. Tym razem nie użyjemy poręcznego lewego paska bocznego. Ustawmy cały nasz ekran tak, aby był przewijalny:

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

Ten kod tworzy niewidoczny obszar o szerokości i wysokości bieżącego urządzenia.

Krok 2: Powiedz Framerowi, jakie warstwy chcesz przewijać.

Nic się jeszcze nie wydarzyło. Musimy powiedzieć Framerowi, które warstwy powinny być przewijalne. Aby to zrobić, dodajemy naszą warstwę listy do komponentu scroll:

 list.parent = scroll.content

Krok 3: Blokowanie przewijania w pionie.

Możemy teraz przewijać, ale dzieje się to we wszystkich kierunkach. Musimy zablokować scroll na osi pionowej:

 scroll.scrollHorizontal = false 

Wow! Utworzyłeś zwój w swojej aplikacji za pomocą zaledwie pięciu wierszy prostego kodu.

2. Komponent strony: Przesuwanie ekranu do ekranu

Bardzo popularną interakcją do przełączania między ekranami jest machnięcie. Pomysł tutaj jest bardzo podobny do komponentu przewijania. Tutaj możesz pobrać działający prototyp.

Krok 1: Konfiguracja komponentu.

Najpierw musimy stworzyć „pudełko” w edytorze kodu, w którym wydarzy się magia:

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

W tym momencie powinieneś zapoznać się z całym kodem tutaj. To tylko prosta konfiguracja komponentu i jego obszaru. Teraz musimy utworzyć kilka warstw do przeciągnięcia.

Krok 2: Tworzenie warstw

Wykorzystamy nasz pierwszy prototypowy projekt i trochę go zmodyfikujemy. Zamiast jednego obrazu karty, tym razem zaimportowałem dwa obrazy.

Najpierw musimy dwa razy powiększyć obszar roboczy. W panelu właściwości obszaru roboczego znajdź szerokość i pomnóż ją przez dwa (lub po prostu dodaj *2 ). Umieść karty obok siebie, aktywuj je niebieską kropką i nazwij je odpowiednio: card1 i card2 .

Krok 3: Dodawanie warstw do komponentu strony.

Na końcu naszego kodu w edytorze kodu musimy dodać:

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

Oznacza to, że dodajemy te warstwy do komponentu.

Komponent strony jest teraz gotowy do pracy!

Ostatnie słowo

To wszystko, ludzie! Mam nadzieję, że ten samouczek dotyczący tworzenia ramek okazał się przydatny do rozpoczęcia przygody z najpotężniejszym narzędziem do tworzenia prototypów na rynku. Powinieneś także rozważyć dołączenie do grupy Framer na Facebooku. Wokół jest ogromna społeczność, która jest pomocna, gdy zaczynasz.

Jeśli chcesz zagłębić się w program Framer, spróbuj przeczytać dokumentację programu Framer.

• • •

Dalsza lektura na blogu Toptal Design:

• eCommerce UX – przegląd najlepszych praktyk (z infografiką)
• Znaczenie projektowania zorientowanego na człowieka w projektowaniu produktu
• Najlepsze portfolio projektantów UX – inspirujące studia przypadków i przykłady
• Zasady heurystyczne dla interfejsów mobilnych
• Projekt przewidujący: jak tworzyć magiczne doświadczenia użytkownika