Nauka framera poprzez stworzenie prototypu aplikacji mobilnej

Czasy statycznych interfejsów użytkownika już dawno minęły. Projektowanie interaktywnych prototypów to najlepsze podejście do wyrażania swoich pomysłów i wyjaśniania ich klientom i interesariuszom. Lub, jak ujął to Jerry Cao z UXPin: „Nic nie przybliża Cię do funkcjonalności produktu końcowego niż prototypowanie. To prototyp, który ożywia wrażenia użytkownika ”.

Prototypowanie jest ważną częścią nowoczesnego procesu projektowania UX. Próbowałem wielu narzędzi i myślę, że Framer Studio (oparte na Framer Library) jest jednym z najlepszych, jeśli chodzi o tworzenie prototypów interfejsu użytkownika. Tak więc w poniższym samouczku chciałbym nauczyć Cię podstaw tworzenia ramek.

Czego się nauczysz? Jeśli wiesz, czym jest Framer i chciałbyś dowiedzieć się więcej o tym, jak go używać, lub jeśli nie wiesz, czym jest Framer, ale chciałbyś dowiedzieć się nieco więcej o zaawansowanych technikach prototypowania, uważam, że jest to samouczek dla Ciebie! Pod koniec samouczka powinieneś być w stanie stworzyć prototyp aplikacji mobilnej, a także nauczysz się trochę kodu CoffeeScript. Poprowadzę Cię po drodze i dostarczę Ci pliki, które ułatwią Ci rozpoczęcie pracy.

Uwaga o programie Framer Studio, bibliotece programu Framer, platformach i skrótach

Zanim przejdziemy dalej, ważna uwaga : ten samouczek dotyczy Framer Studio, która jest aplikacją tylko dla komputerów Mac. Framer Studio jest zasilany przez bibliotekę Framer, która jest open-source i bezpłatna. Sama biblioteka Framer może być używana we wszystkich systemach operacyjnych (Mac, Windows i Linux). Jak dotąd nie jest dostępna żadna wersja Framer Studio dla systemu Windows; istnieje jednak sposób, aby biblioteka ramek działała w systemie operacyjnym Windows z Atom. (Jeśli ciekawi cię Windows, przeczytaj „Jak uruchomić Framer JS w systemie Windows” lub „Używanie Framer w systemie Windows z Atom.”) Ponadto zauważ, że ponieważ używam Framer Studio na komputerze Mac, w moim samouczku Do skrótów będę używał notacji Mac.

Co to jest ramka?

Istnieją dwie główne kategorie narzędzi do tworzenia prototypów (więcej o nich później), ale Framer to narzędzie, które należy do osobnej kategorii. Możesz go używać do prostych przejść i szybkiego prototypowania, a także do tworzenia mikrointerakcji i zaawansowanych animacji. Daje Tobie — projektantowi — najwyższą moc tworzenia interakcji bez żadnych ograniczeń narzucanych przez graficzny interfejs użytkownika i predefiniowane narzędzia.

Nauka kodu

W Framer kod jest twoją najwyższą mocą projektowania. Czy to oznacza, że ​​musisz nauczyć się kodować? TAk. Czy projektanci powinni kodować? Ten temat ma wieki i było kilka dobrych punktów zarówno dla „tak”, jak i „nie”; tutaj chciałbym przedstawić Wam nieco inne podejście do tego zagadnienia.

W niedawnym artykule Shawn Hickman powiedział:

„Toczy się ciągła debata na temat tego, czy projektanci powinni nauczyć się kodować, czy nie. Chociaż z przyjemnością omówię to szczegółowo, myślę, że warto spojrzeć na to z innej perspektywy. Co próbujesz osiągnąć? W moim przypadku , chciałem wysłać produkt”.

I również:

„Framer jest niesamowitym narzędziem dla projektantów do nauki kodowania. Możliwość obejrzenia wyników swojego kodu na żywo pomogła mi nauczyć się, co się właściwie dzieje. Framer nauczył mnie podstawowych rzeczy, takich jak zmienne, pętle for i funkcje. Nic nadzwyczajnego , ale całkowicie konieczne."

To prowadzi mnie do kolejnego ważnego punktu. Moim zdaniem Framer jest jednym z najbardziej przyjaznych projektantom podejść do kodowania. I chociaż prototypy nigdy nie są tworzone z kodem gotowym do produkcji, programiści nadal będą czerpać korzyści i będą mogli wykorzystać niektóre informacje z twojego kodu. Wreszcie lepiej zrozumiesz, jak wszystko działa pod maską i zbudujesz fundament pod dalszy rozwój swoich umiejętności.

Co to jest CoffeeScript?

Językiem używanym w Framer jest CoffeeScript. Świetna wiadomość dla początkujących: jest to uproszczona wersja JavaScript, więc krzywa uczenia się nie jest zbyt stroma.

Według oficjalnej strony internetowej:

CoffeeScript to język, który kompiluje się w JavaScript. Jest to próba wyeksponowania dobrych części JavaScriptu w prosty sposób.

Jest jeszcze jedna wielka zaleta używania CoffeeScript: jest to zasadniczo technologia internetowa, więc wszystko, co tworzysz w Framer, działa później jako JavaScript! Aby przejść dalej w tym samouczku, musisz znać tylko odrobinę programowania.

Przydatne zasoby

Ponieważ będziemy pisać trochę CoffeeScript, jeśli potrzebujesz pomocy w rozpoczęciu, polecam najpierw zapoznać się z następującymi zasobami:

• „Kod”, programista
  Przewodnik programowania Framera.
• „Kurs ramowy”, Greg Rog
  Mój samouczek wideo o CoffeeScript.
• „Wprowadzenie do CoffeeScript”, Jeffrey Biles, SitePoint
• „Krótkie wprowadzenie do CoffeeScript”, JumpstartLab
• „Wprowadzenie do Framera”, Meng To
  Wysoce polecane źródło, w którym można nauczyć się kilku podstawowych podstawowych rzeczy na temat Framer.

Uwaga na temat wersji framer

Samouczek działa (i był testowany) na Framer w wersji 111 . Jeśli jeszcze nie zaktualizowałeś do 111, zdecydowanie polecam pobrać go i zaktualizować. Jeśli chodzi o przyszłe aktualizacje programu Framer, prawdopodobnie przyszła wersja programu Framer wprowadzi więcej nowych funkcji i może mieć wpływ na kod tego samouczka.

Dlaczego prototypowanie jest ważne?

Porównaj te podejścia z prezentacją tego samego pomysłu. Możesz użyć modelu szkieletowego, takiego jak ten:

Lub ten sam pomysł można przedstawić za pomocą prostego, ale potężnego prototypu:

Wyobraź sobie, że przedstawiasz ten pomysł grupie ludzi. Jak myślisz: który z nich byłby lepszy? Nawet gdyby szkielet zawierał więcej istotnych informacji, miałby mniejszy wpływ wizualny. A ludzie nie czytają uważnie dokumentacji szkieletowej.

Wyjaśnienie pomysłu za pomocą interaktywnego prototypu pozwoliłoby im lepiej zrozumieć Twoją wizję. Czasami nawet prototyp o niskiej wierności mówi tysiąc słów. (Ten sam pomysł podzielił Paul Boag: „Ludzie często mają problem z wyobrażeniem sobie, co lepiej wygląda. Prototyp pozwala im to zobaczyć. Może sprzedać potencjał znacznie lepiej niż jakakolwiek liczba dokumentów lub prezentacji.”)

Jeśli obraz jest wart 1000 słów, prototyp jest wart 1000 spotkań.

— Daniel Burka, #aeadenver 2017

Często zdarza się, że trzeba przekonać osoby, których wiedza na temat prezentowanej koncepcji jest ograniczona. Z drugiej strony posiadanie działającego prototypu przed opracowaniem rzeczywistej aplikacji może przynieść naprawdę znaczący wgląd na etapie testowania użytkowników. Dlatego uważam, że prototypowanie jest tak ważne i atrakcyjne.

Ogólnie rzecz biorąc, prototypy można podzielić na dwie główne kategorie. Pierwszym z nich jest szybkie prototypowanie , w którym łączysz statyczne ekrany z punktami aktywnymi w celu tworzenia prostych przejść. Można to osiągnąć za pomocą narzędzi takich jak Marvel, Adobe XD i Figma.

Druga kategoria to szczegółowe prototypy z mikrointerakcjami , takie jak animacje skupione na jednym zadaniu (np. ustawienie alarmu, wybór akcji itp.). Możesz stworzyć tego typu prototyp za pomocą narzędzi takich jak Principle, Flinto i Origami. Udoskonalenie prototypu za pomocą animacji daje możliwość stworzenia bardziej angażującego doświadczenia związanego z prototypowaniem.

Pamiętasz, jak powiedziałem, że Framer to narzędzie, które należy do własnej kategorii? Dzieje się tak dlatego, że można go wykorzystać zarówno do szybkiego prototypowania, jak i tworzenia mikrointerakcji i dość zaawansowanych animacji. Zobaczmy jak!

Twój pierwszy projekt wykonany za pomocą Framer

Zacznijmy od interfejsu użytkownika Framera.

Framer ma dwa dobrze zintegrowane widoki : kod i projekt. Tworzysz układy i obrazy w widoku projektu, a następnie dodajesz wszystkie potrzebne elementy interaktywne w widoku kodu. W widoku kodu będziesz mógł wtedy dodawać animacje i mikrointerakcje. Framer nie ma zastępować wybranego przez ciebie narzędzia do projektowania (chociaż po ostatniej grudniowej aktualizacji, wydaje się, że Framer zaczyna również celować w rynek narzędzi do projektowania ekranów; opublikował przegląd nowych funkcji projektowania), ale dla szybkie prototypy, widok projektu jest w porządku.

Później, przy bardziej wyrafinowanych projektach, będziesz mógł również importować pliki ze Sketch lub Figma. Ale najpierw przejdźmy od razu do widoku projektu i stwórzmy prosty układ za pomocą kilku podstawowych narzędzi projektowych.

Praca w widoku projektu

Gdy po raz pierwszy otworzysz Framer Studio, otworzy się ono w widoku projektu. Odkryjesz, że większość skrótów, które znasz z innych narzędzi do projektowania (takich jak Szkic), również działa tutaj. Naciśnij A (lub F ), aby przełączyć się na narzędzie Ramka, i wybierz predefiniowane ustawienie wstępne iPhone'a 8 z panelu właściwości po prawej stronie.

Uwaga: w najnowszej aktualizacji Framer nazwy obszarów roboczych zostały zmienione na „ramki”, a cała koncepcja uległa zmianie. Czym dokładnie są ramki? Ramki to kontenery inteligentnego układu, które mogą być używane zarówno jako ekrany, jak i elementy interfejsu. Ramki mogą być również używane jak plasterki, aby szybko eksportować ikony w określonych rozmiarach. Jeśli znasz trochę HTML, możesz myśleć o ramkach jak o elementach div , a także możesz zagnieżdżać ramki wewnątrz siebie, aby zdefiniować elementy układu, takie jak paski nawigacji, paski kart, karty, przyciski itp. W dalszej części samouczka , czasami będę odnosić się do ramek jako „ekranów” (aby dać ogólne pojęcie, że jest to osobny ekran naszej aplikacji) — ale technicznie ekrany to tylko ramki.

Więcej informacji na temat ramek znajdziesz na stronie pomocy „Ramki a kształty”.

Uwaga o jednostkach

W Framer mierzymy rzeczy w jednostkach zwanych punktami . Każdy punkt może reprezentować inną liczbę pikseli, w zależności od gęstości pikseli urządzenia fizycznego, na którym będziesz testować. Ponieważ wszystko, co projektujesz w programie Framer, jest tworzone jako wektor, nie ma się czym martwić. Ponadto najlepiej jest używać wektorowych plików SVG, które są obsługiwane przez program Framer; jeśli musisz zaimportować pliki PNG lub JPG, upewnij się, że mają wystarczająco wysoką rozdzielczość.

W ten sposób przygotowałem logo Smashing Magazine. Aby zaimportować go do Framera, po prostu przeciągam go i upuszczam na płótnie.

Ostatnim elementem tej ramki jest prosty przycisk, wykonany za pomocą innej zagnieżdżonej ramki (wciśnij F lub A ), w której znajduje się ramka tekstowa. Naciśnij klawisz T , aby przejść do narzędzia Tekst i narysuj pole tekstowe od lewej do prawej, wyrównując tekst do środka pola w panelu właściwości i dodając trochę tekstu.

Przydatna wskazówka : Tekst jest automatycznie dodawany jako warstwa podrzędna do utworzonego obiektu ramki. Aby uzyskać do niego dostęp bezpośrednio na płótnie, przytrzymaj Command podczas klikania.

Zaprojektujmy drugi ekran (ramkę). Będziemy używać ogólnego nagłówka i stopki, które zostaną automatycznie zastosowane do naszego prototypu (oznacza to, że podczas pracy nad projektem pominiesz wysokość zarówno nagłówka, jak i stopki).

Głównym elementem na tym ekranie będzie lista sześciu przycisków, każdy o wysokości 115 punktów. W sumie nasze ramki powinny mieć 6 × 115 = 690 points wysokości. Ponieważ jest nieco wyższy niż samo urządzenie, później będzie się automatycznie przewijał w podglądzie. Użyłem ikony hamburgera z panelu ikon:

Dodałem również kilka pól tekstowych, a także gradienty jako wypełnienie. Oto jak to wygląda:

Zaznaczmy wszystkie przyciski i wciśnijmy Command + Return , aby scalić je w nową ramkę — nowy pojemnik na te przedmioty (które nazwałem „elementami”). Teraz dodaj górną i dolną ramkę (które będą używane jako nagłówek i stopka), a następnie umieść je na górze elementów listy.

W przypadku innych ramek użyj podobnych prostych kształtów i narzędzi, aby stworzyć strukturę, którą widzisz poniżej.

Nie będę wchodził w szczegóły każdego elementu projektu ze względu na podstawową naturę narzędzi, których będziesz używać. Jeśli jednak chcesz zacząć od gotowego do użycia pliku Framer, możesz go pobrać.

Zanim przejdziemy dalej, chciałbym, abyś zapoznał się z kilkoma rzeczami:

• Trzeci ekran z menu musi mieć taką samą wysokość jak najwyższy (możesz łatwo zduplikować poprzednią klatkę, naciskając Command + D ).
• Konwencja nazewnictwa elementów w panelu warstw ma kluczowe znaczenie. Zachowaj je tak, jak jest w moim pliku projektu, lub zwróć uwagę na to, jak przynoszę ich nazwy.

Przejście od projektu do kodu

Aby wprawić w ruch, musisz uzyskać dostęp do widoku kodu. Możesz przełączać się między widokami, naciskając Command + 1 i Command + 2 . Zanim zaczniesz kodować interakcje, musisz włączyć dostępność ramek z widoku projektu w widoku kodu (domyślnie nie są one włączone). Aby włączyć ramkę do pracy w widoku kodu, kliknij ikonę celu obok jej nazwy w panelu warstw.

Teraz możesz wskazać tę ramkę w kodzie, po prostu używając jej nazwy.

Przydatna wskazówka: zachowaj prostą konwencję nazewnictwa elementów w panelu warstw; staraj się unikać spacji i znaków specjalnych; nie zaczynaj nazwy od cyfry. Dobrym pomysłem jest użycie camelCase lub podkreśleń ( _ ). Ale jeśli używasz myślników ( - ), będziesz musiał zastąpić je podkreśleniami ( _ ) w kodzie.

Najpierw upewnij się, że dla wszystkich ramek włączono kierowanie na nie w widoku kodu za pomocą ikony celu (aby zobaczyć pełną listę ramek, kliknij w dowolnym miejscu pustego obszaru roboczego poza dowolną ramką). Włącz także wszystkie ramki wewnątrz pierwszej ramki dla widoku kodu. Teraz naciśnij Command + 2 i uruchommy trochę kodu!

Ważna aktualizacja: od 20 grudnia 2017 r. aktualizacja programu Framer ( wersja 108 ) można było kierować tylko w kodzie do ramek i obiektów tekstowych; ale w nowszej aktualizacji ( wersja 109 , wydana 23 stycznia 2018 r.), zespół Framer dodał opcję również kierowania na kształty i ścieżki. Chociaż mój samouczek używa tylko ramek i obiektów tekstowych, dobrze jest również wiedzieć, że kształty i ścieżki mogą teraz być również kierowane w kodzie. Zauważysz również, że (jak już wspomniano) narzędzie Obszar roboczy zostało zastąpione narzędziem Ramka, więc pasek boczny narzędzi może wyglądać nieco inaczej niż na zrzutach ekranu; dzieje się tak, ponieważ większość artykułu została przygotowana przed aktualizacją Framera z 20 grudnia 2017 r.

Dodawanie interaktywności w Framer

Nie jest moim zamiarem uczyć Cię CoffeeScript w tym artykule, ale postaram się jak najlepiej wyjaśnić kod, którego użyłem w tym przykładzie. Mamy nadzieję, że będziesz w stanie to zrozumieć nawet bez wcześniejszego doświadczenia z CoffeeScript. Biorąc to pod uwagę, jeśli jesteś nowy w CoffeeScript lub JavaScript, zdecydowanie sugeruję najpierw zapoznać się z przewodnikiem pomocy.

Teraz stwórzmy nasze pierwsze animacje. Zbadamy proste przejścia, tworząc animację wprowadzającą na pierwszy ekran. W widoku projektu ustawiliśmy sposób, w jaki nasza aplikacja ma dbać o animację elementów. Na naszym pierwszym ekranie chcemy animować właściwości scale i rotation logo. Najpierw ustawiamy właściwość scale na 0 (co sprawi, że logo będzie niewidoczne), a następnie ustawimy jego obrót na -360 :

 logo.scale = 0 logo.rotation = -360
logo.scale = 0 logo.rotation = -360

Następnie ożywimy je do ich pierwotnych wartości. Oto blok kodu, którego możesz użyć:

 logo.animate properties: scale: 1 rotation: 0
logo.animate properties: scale: 1 rotation: 0

Pamiętaj o wcięciu . Właściwości animowane powinny być wcięte w nowych liniach, a my używamy metody animate , aby wprawić je w ruch. Teraz powinieneś być w stanie zobaczyć, jak działa twoja pierwsza animacja! Możesz go nieco poprawić, tworząc bardziej naturalny ruch. Zrobimy to dzięki wygładzaniu — koncepcji, która umożliwia nam zmianę ruchu tak, aby był bardziej realistyczny. Dodajmy jeszcze jedną linię na dole:

 logo.animate properties: scale: 1 rotation: 0 curve: "spring(100,15)"
logo.animate properties: scale: 1 rotation: 0 curve: "spring(100,15)"

Ponownie zwróć uwagę na wcięcie. Eksperymentuj z wartościami w nawiasach, aby uzyskać różne wyniki. Możesz przeczytać więcej o łagodzeniu w dokumentacji Framera.

Animacja powinna teraz wyglądać tak:

Ustawmy jeszcze kilka właściwości początkowych:

 bg.backgroundColor = "black" button.scale = 2 button.y = button.y + 200
bg.backgroundColor = "black" button.scale = 2 button.y = button.y + 200

W ostatniej linii ustawiamy pozycję przycisku tak, aby znajdował się poniżej kanwy — najpierw sprawdzamy aktualną pozycję za pomocą button.y , a następnie dodajemy kolejne 200 punktów na osi pionowej, aby przesunąć ją w dół. Następnym krokiem jest stworzenie animacji; zróbmy to najpierw dla tła:

 bg.animate backgroundColor: "#FF7744"

A teraz chcemy poczekać, aż zakończy się animacja logo, a następnie uruchomić animację przycisku. Jednym ze sposobów byłoby opóźnienie animacji, tak jak to:

 button.animate properties: scale: 1 y: button.y - 200 delay: .5

To opóźnia go o pół sekundy. O wiele lepszym rozwiązaniem byłoby poczekanie na zakończenie animacji logo, a następnie uruchomienie kodu. Ten fragment kodu wprowadza zdarzenia Framer (które omówimy nieco więcej w dalszej części tego artykułu). To wygląda tak:

 logo.onAnimationEnd -> button.animate scale: 1 y: button.y - 200

Jak widać, możesz nawet pominąć properties: line, gdy nie używasz wygładzania; ale jeśli chcesz dodać trochę fajnego złagodzenia, to musi tam być. Zakończmy czymś takim:

 logo.onAnimationEnd -> button.animate properties: scale: 1 y: button.y - 200 curve: "spring"

Jest to więc jeden ze sposobów tworzenia animacji w programie Framer; inni używaliby obiektów lub stanów animacji. Dodatkową wskazówką byłoby zbadanie właściwości, klikając małą ikonę obok numeru wiersza, gdzie można dostosować różne wartości.

OK, animacja wygląda teraz tak:

Skryptowanie interakcji

W Framer jest mnóstwo gotowych komponentów i fragmentów kodu — fragmentów kodu, których możesz użyć w swoich prototypach. Jednym z nich jest składnik przepływu, który umożliwia automatyczne przechodzenie między ekranami, a także udostępnia dodatkowe funkcje, takie jak definiowanie nagłówka i stopki, które będą pojawiać się na każdym ekranie. Zacznijmy od stworzenia komponentu przepływu:

 flow = new FlowComponent flow.showNext(home)

Pierwsza linia jest jak deklaracja zmiennej. Ale wartość tutaj faktycznie tworzy nowy obiekt FlowComponent . Teraz możemy użyć tej niestandardowej nazwy, flow , aby uzyskać dostęp do komponentu flow w dowolnym momencie. Druga linia wykorzystuje jedną z metod wbudowanych w komponent flow — showNext , która, jak sama nazwa wskazuje, wyświetla ekran, który chcemy zobaczyć w następnej kolejności. W tym przypadku pokaże nam pierwszy ekran naszego prototypu. Jako parametr przekazujemy nazwę pierwszej klatki. To wystarczy, aby umieścić go w składniku przepływu i wyświetlić pierwszy ekran.

Następnie definiujemy nagłówek i stopkę. Jeśli nie włączyłeś ich w widoku projektu, będziesz musiał wrócić za pomocą Command + 1 i w widoku projektu kliknąć ikonę celu dla ramek „górnego paska” i „dolnego paska”. Jak widać, możesz także zgrupować zawartość w widoku projektu Command + Return ), a następnie włączyć nową ramkę, aby była dostępna w kodzie. Wracając do widoku kodu, możesz teraz użyć następujących wierszy:

 flow.header = top_bar flow.footer = bottom_bar

Zapewne zauważyłeś, że kiedy wywołujesz flow i umieszczasz później kropkę, Framer wyświetla listę popularnych metod i właściwości, których możesz użyć. Warto przejrzeć listę i sprawdzić propozycje metod i właściwości. A jeśli chcesz dowiedzieć się więcej, do dokumentacji prowadzi mała ikona.

W programowaniu obiektowym ta koncepcja jest bardzo ważna. Weźmy za przykład samochód; właściwościami byłyby takie rzeczy jak kolor, marka, moc i tak dalej. Metody byłyby gotowymi funkcjami, które można uruchomić w razie potrzeby (na przykład startTheEngine() ). Metodę można rozpoznać po nawiasach, a czasami możesz chcieć przekazać niektóre parametry do tej konkretnej funkcji (na przykład startTheEngine(gear1) ). W tym kontekście użyliśmy już metody showNext() ; teraz używamy właściwości header i footer i ustawiamy je na odpowiednich warstwach.

Inną techniką, której będziesz często używać w programie Framer, jest ukrywanie i odkrywanie warstw. Na przykład, jako decyzja projektowa, chcemy ukryć nagłówek i stopkę na pierwszym ekranie. Możesz to zrobić za pomocą następujących wierszy kodu:

 flow.header.visible = false flow.footer.visible = false

Tutaj używamy visible właściwości w nagłówku i stopce komponentu przepływu. CoffeeScript ma być tak intuicyjny i zbliżony do zwykłego angielskiego, jak to tylko możliwe; więc zamiast false , możesz nawet powiedzieć no , aby to ukryć i yes , aby to ujawnić (zamiast true ).

Wskazówka: spróbuj wybrać dowolne wiersze kodu i naciśnij Command + / , aby je skomentować, aby nie zostały wykonane.

Czas wykorzystać moc komponentu przepływu, aby przejść do następnego ekranu naszej aplikacji. Najpierw upewnij się, że następna ramka jest dostępna w widoku kodu, a także ramka button_get_started , której użyjemy, aby przejść do następnego ekranu. Poniższy kod właśnie to robi:

 button_get_started.onTap -> flow.showNext(list) flow.header.visible = true flow.footer.visible = true

To, co tutaj robimy, to kolejna konwencja: możemy odpowiadać na dane wejściowe użytkownika i wchodzić w interakcje z tak zwanymi zdarzeniami . Do wyboru są różne zdarzenia, takie jak stukanie, klikanie, stukanie siłą, najeżdżanie i wiele innych. Możesz przechwycić takie zdarzenia i wykonać kod, gdy użytkownik wykonuje akcję. Używamy zdarzenia onTap iw odpowiedzi na to ( -> ) wykonujemy kod, który jest wcięty poniżej. W komponencie przepływu pokazujemy ramkę listy, a także nagłówek i stopkę.

Teraz, gdy wiesz już o wydarzeniach i animacjach, możesz jeszcze bardziej dostosować ekran główny i eksperymentować ze zdarzeniami. Na przykład możesz dodać animację stuknięcia do przycisku:

 button.onTouchStart -> this.animate properties: scale: 1.1 backgroundColor: "#f1f1f1" curve: "spring"

Tutaj użyłem zdarzenia onTouchStart , aby zobaczyć animację przed przejściem do następnego ekranu, która jest wyzwalana, gdy użytkownik puści palec (zdarzenie onTap lub onClick ).

Odkryłeś już pewien potencjał komponentu przepływu, na przykład automatyczne przejście do następnego ekranu. Ale magia dopiero się zaczęła! Jak widać, lista przewija się automatycznie. Problem polega na tym, że widzimy czerń (tło komponentu przepływu), gdy docieramy do góry lub dołu i przewijamy jeszcze bardziej. Możesz zmienić kolor po prostu ustawiając to (szary kolor, który mamy w nagłówku i stopce):

 flow.backgroundColor = "#555555"

Teraz czas na pokazanie menu. Upewnij się, że masz włączony menu_button dla kodu i wykonaj następujące wiersze kodu:

 menu_button.onTap -> flow.showOverlayLeft(menu)

Używamy metody showOverlayLeft() i przekazujemy nazwę ramki jako parametr. W rezultacie ekran jest animowany z lewej strony, a menu jest ukrywane po kolejnym dotknięciu, a nawet ukrywane po dotknięciu poza samym menu. Wszystko to w jednej linijce kodu!

Apple nie wydaje się zachęcać do korzystania z menu hamburgerów w aplikacjach na iOS, więc użyłem menu jedynie jako przykładu tego, co Framer może zrobić szybko i skutecznie. Jeśli tworzysz prototyp prawdziwej aplikacji na iOS, rozważ ścisłe przestrzeganie wytycznych Apple dotyczących interfejsu.

Możesz uzyskać dostęp do tego fajnego trybu prezentacji, klikając ikonę pełnego ekranu w oknie podglądu. Możliwe jest również przetestowanie swojego prototypu bezpośrednio na urządzeniu mobilnym! Możesz korzystać z podglądu na żywo w bezpłatnej aplikacji, dostępnej zarówno na iOS, jak i Androida. Testowanie prototypów na rzeczywistych urządzeniach jest niezbędne, ponieważ daje najdokładniejszy podgląd tego, jak projekt będzie wyglądał i działał.

Jeśli jesteś początkującym, prawdopodobnie rozumiesz większość samouczka do tej pory, ale możesz nie sądzić, że możesz to zrobić samodzielnie. Oto małe zadanie.

Jak widzieliście, zamknąłem menu, klikając pusty obszar po prawej stronie (demonstrując magię komponentu przepływu). Teraz spójrz na dokumentację komponentu przepływu i spróbuj wymyślić, jak wykonać następujące zadanie: Chcemy, aby przycisk „x” zamykał menu i wyświetlał poprzedni ekran. Zanim przejdziesz dalej, spróbuj odkryć, jaki jest właściwy sposób, aby to zrobić i samodzielnie napisz wiersze kodu.

Jeśli w tym momencie nadal nie jest to jasne, nie martw się! Pod koniec samouczka stanie się łatwiejszy do zrozumienia. CoffeeScript, którego tutaj użyjemy (po włączeniu elementu close_button dla widoku kodu), jest następujący:

 close_button.onTap -> flow.showPrevious()

Tutaj showPrevious() jest tylko metodą komponentu przepływu, która pozwoli Ci przejść do ostatniego ekranu. Teraz spróbuj ponownie napisać kod samodzielnie. Będziesz musiał połączyć article_list i arrow_button z kodem i sprawić, by article_list wyświetlał odpowiedni ekran, a arrow_button przechodziła do poprzedniego. W razie potrzeby będziemy też musieli ukryć i pokazać nagłówek i stopkę.

Gratulacje, jeśli udało Ci się to zrobić! Oto kod, którego użyłem:

 article_list.onTap -> flow.showNext(detail) flow.header.visible = false flow.footer.visible = false arrow_button.onTap -> flow.showPrevious() flow.header.visible = true flow.footer.visible = true

Pobieranie danych dla naszego prototypu

Teraz, gdy mamy już szkielet naszego prototypu, nadszedł czas na zbadanie bardziej zaawansowanych funkcji Framera. Bedzie fajnię! W rzeczywistości użyjemy prawdziwych danych z naszej aplikacji. Będzie to wyglądać o wiele bardziej sensownie niż generowanie jakiejś fikcyjnej zawartości wypełniacza. I może to zabrzmieć trochę przerażająco, ale nie bój się — to kolejna rzecz w twoim zestawie umiejętności. Jeśli ta część artykułu jest dla Ciebie trudna, po prostu trzymaj się danych statycznych. Ma to na celu pokazanie bardziej zaawansowanym użytkownikom, że mogą poradzić sobie z prawdziwymi danymi w programie Framer.

To podejście jest podobne do stosowanego podczas pracy ze zmiennymi i zestawami danych w programie Adobe Photoshop. Jeśli jesteś ciekawy, przeczytaj więcej: „Tworzenie grafiki opartej na danych w Photoshopie”.

Właściwie najpierw chciałbym przedstawić Ci prostsze rozwiązanie, ale nadal takie, które da Ci kontrolę nad tekstem z kodu! Wróć do widoku projektu i umieść tekst w polach w nawiasach klamrowych, na przykład: {item_1} {item_2} ...

Upewnij się, że pola tekstowe są włączone dla widoku kodu, aw widoku kodu możesz umieścić wszystkie wstępnie zdefiniowane ciągi w tablicy . (Polecam przeczytanie „Cheat Sheet: Loops & Arrays”, jeśli chcesz dowiedzieć się więcej o tablicach.)

W skrócie, tablica działa jak zmienna, która może zawierać więcej niż jeden element:

 categories = ["Graphic Design", "Mobile Apps", "Web Design", "User Experience", "Front-End Dev", "User Research"]

Teraz, gdy mamy już naszą tablicę, spróbujmy wyświetlić dane. Aby to zrobić, najpierw użyjemy polecenia print , które wypisuje wynik do konsoli. Możesz to od razu przetestować:

 print "Hello World"

Konsolę można odświeżyć, naciskając Command + R . Dostęp do danych jest tak prosty, jak to:

 print categories

Ten wiersz kodu wyświetli wszystkie dane w tablicy categories . Dzięki tablicom możesz łatwo uzyskać dostęp do poszczególnych elementów, które są indeksowane w tablicy, umieszczając liczbę w nawiasach, w ten sposób:

 print categories[2]

To zwróci trzecią pozycję w kolekcji, ponieważ zaczynamy liczyć od zera. Użyjmy teraz funkcji szablonu TextLayer dostępnej w programie Framer, aby zaktualizować dwa pierwsze ciągi:

 item1_txt.template = categories[0] item2_txt.template = categories[1]

Możesz wypełnić pozostałe pola! Ten prosty przykład pozwala nam zarządzać polami tekstowymi bezpośrednio z kodu, dzięki czemu możemy dynamicznie zmieniać tekst!

Gdzie iść stąd?

Dobrze zrobiony! W tym momencie powinieneś być w stanie odnaleźć się w programie Framer i stworzyć kilka prostych prototypów.

Uwaga: zachęcam do wypróbowania mojego własnego kursu wideo na temat Framer — niektóre lekcje można obejrzeć za darmo. Również książka Framer autorstwa Tes Mat jest doskonałym źródłem do nauki i zrozumienia Framer i CoffeeScript. Książka nie jest darmowa, ale możesz przeczytać jej przykładowy rozdział (przed podjęciem decyzji, czy chcesz ją kupić).

Mam nadzieję, że ta część artykułu okazała się przydatna. Do tego momentu stosowaliśmy proste sposoby, aby nasz prototyp działał. Ale Framer to znacznie więcej! Dlatego napisałem dodatkową sekcję bonusową z bardziej zaawansowanymi technikami. Jeśli masz ochotę na wyzwanie, przejdź do następnej części: JSON!

Uzyskiwanie dostępu do danych z formatu JSON (sekcja samouczka bonusowego)

Jako potężną alternatywę dla poprzedniego rozwiązania możesz użyć zewnętrznego API i połączyć się z nim bezpośrednio. Chociaż w tym konkretnym przykładzie jest to trochę przesada, bardziej zaawansowani użytkownicy skorzystają z tego pomysłu. Najpierw zakomentuj kod odpowiedzialny za wypełnienie pól tekstowych (wybierz kod i naciśnij Command + / ). Najłatwiejszym sposobem jest posiadanie pliku lokalnie i załadowanie go do programu Framer. Najlepiej byłoby, gdyby był to plik JSON, który można uzyskać na różne sposoby, na przykład:

• użyj mojego przykładowego pliku JSON,
• stworzyć go od podstaw za pomocą narzędzia takiego jak Dummi czy JSON Editor Online,
• użyć fikcyjnych danych z List,
• pobierz odpowiedni plik od programisty, z którym pracujesz.

Ale czekaj, co to jest JSON?

JSON (JavaScript Object Notation) to lekki format wymiany danych. Ludziom łatwo jest czytać i pisać. Maszyny mogą łatwo analizować i generować. JSON to format tekstowy, który jest całkowicie niezależny od języka, ale wykorzystuje konwencje znane programistom z rodziny języków C, w tym C, C++, C#, Java, JavaScript, Perl, Python i wiele innych. Te właściwości sprawiają, że JSON jest idealnym językiem wymiany danych.

Możesz używać prawdziwych danych w całym procesie projektowania! Jeśli używasz Sketch, możesz to zrobić za pomocą rozszerzenia InVision Craft. Może załadować lokalny lub zdalny plik JSON i pobrać dane do użycia w układzie. Aby dowiedzieć się więcej, zapoznaj się ze szczegółowym artykułem Christiana Krammera „Craft for Sketch Plugin: Designing with Real Data”. Przeczytaj także tutorial Wojciecha Dobry Framer „Prototypowanie z wykorzystaniem Real Data”.

Teraz umieśćmy ten plik w folderze projektu. Za każdym razem, gdy zapisujesz nowy projekt Framer, tworzy on folder z nazwą twojego projektu. Uzyskaj do niego dostęp w Finderze i umieść plik JSON obok pliku .coffee w tej strukturze.

Plik JSON, z którym pracuję, wygląda tak:

Użyjemy danych kategorii w Framer i zastąpimy fikcyjną zawartość, którą mamy w przyciskach na ekranie listy. Upewnij się tylko, że nadałeś polom odpowiednie nazwy (w moim przypadku item1-txt , item2-txt , itd.) oraz że włączyłeś je dla widoku kodu z ikoną celu.

Załadujmy kanał do Framera:

 data = JSON.parse Utils.domLoadDataSync "feed.json"

Używamy JSON.parse , a także klasy Utils — parowania, które wykona całą ciężką pracę związaną z tłumaczeniem JSON na ludzki język i umieszczeniem tego wszystkiego w data (nazwa, której używaliśmy). Aby wyświetlić dane z góry naszego pliku .json teraz, możemy je wydrukować:

 print data.categories

Z obiektu danych możemy wyodrębnić poszczególne pozycje, jak w poprzednim przykładzie.

 print data.categories[2]

Stwórzmy tablicę ze wszystkimi polami tekstowymi:

 textfields = [item1_txt, item2_txt, item3_txt, item4_txt, item5_txt, item6_txt]

To jest uproszczony przykład, więc nawet jeśli jesteś mniej doświadczony, powinieneś być w stanie podążać dalej. Możesz spróbować zrobić to lepiej, uruchamiając pętlę, jeśli czujesz się pewniej. Mówiąc o pętlach, użyjemy jednej z nich, aby umieścić elementy w polach tekstowych. To wygląda tak:

 for i in [0...6] textfields[i].text = data.categories[i]

Loops enable you to run the same code many times. It starts with for , and then we define a variable, which I've called i . This variable will hold whatever information we pass and then will increment with each loop. In this case, we pass numbers from 0 to 5 — [0...6] is just a way of saying this. You can check out the values of i in the loop by doing the following:

 print i

We need it to loop exactly six times (0,1,2,3,4,5), so that we can address each fild on one iteration. Putting i at the end of textfields will return textfields[0] , textfields[1] , and so on; this way, we can address all of the text fields in the array. Again, if you want to double-check, print it! Put more simply, what we've done here is just an easier way of saying this:

 item1_txt.text = data.categories[0] item1_txt.text = data.categories[1] item1_txt.text = data.categories[2] ...

It's easier to grasp, but code-wise, this solution is not elegant at all. That is why we were using a loop here.

The result of our work is that all of the data is populated in the text fields:

Let's add some links to these items so that we can go to the detail screen. Doing it in the loop is a smart move because we can again add it all at once. Here is the next part of the for in loop (remember to keep the indentation).

 textfields[i].onTap -> flow.showNext(detail) flow.header.visible = false

If you want to be more elegant, you can make the items tappable, not only the text. Remember, however, that you have to add them to an array first; so, just before the loop, you can put this:

 items = [item1, item2, item3, item4, item5, item6]

Then, in the loop, change textfields[i] to items[i] . This whole code block will now look like this:

 textfields = [item1_txt, item2_txt, item3_txt, item4_txt, item5_txt, item6_txt] items = [item1, item2, item3, item4, item5, item6] for i in [0...data.categories.length] textfields[i].text = data.categories[i] items[i].onTap -> flow.showNext(detail) flow.header.visible = false

If you want to take this to the next level and display different data depending on the button clicked, my hint is to use this in the event, or get the information from the event by putting (e) next to onTap . I do not recommend doing that now, though: Going crazy with the data is not necessary here. Our main goal is to create a prototype, not a real complex application. Keep that in mind. This JSON example was merely to demonstrate that it is possible to use real data in a Framer prototype.

You probably noticed that we're hiding the header here. That is because we've created a separate header for the detail view. There is a simple arrow icon that we want to link back to the previous screen. This is the block of code we'll use:

 arrow_button.onTap -> flow.showPrevious() flow.header.visible = true flow.footer.visible = true

Again, showPrevious() is a ready-made method of the flow component, and I just looked it up in the docs!

Our simple prototype is ready, and it looks like this:

You can download the complete Framer file. Surely, you can tweak it with extra animations, screens and even more data (loaded from a JSON file). I did not want to make it more complex because I wanted to keep the tutorial concise. But trust me, you have enough information to finish this prototype yourself. Just start experimenting with it and you'll see: It's so much fun. Udanego kodowania!