Prototypowanie sieci za pomocą Framer

Framer to naprawdę potężne narzędzie, które może prototypować wszystko, co możesz wymyślić, ale jeśli spojrzysz na Galerię Framera, szybko zauważysz coś:

Spośród 54 przykładów, 48 z nich to aplikacje, 4 dla Apple Watch, 1 dla iPada i 1 dla Apple TV. Czy Framer jest nawet przeznaczony do "tradycyjnego" projektowania stron internetowych?

Absolutnie.

W IBM Design większość moich projektów jest tworzona dla korporacyjnych aplikacji internetowych. Większość projektantów, z którymi współpracuję Naszkicować (włącznie ze mną). Te pliki szkicu są następnie prototypowane za pomocą narzędzia takiego jak InVision lub odtworzone i prototypowane w kodzie. Jako początkujący programista w zespole projektowym mam wyjątkową pozycję, w której zarówno projektuję, jak i koduję prototypy.

Po zapoznaniu się z podstawami programu Framer postanowiłem dodać go do mojej pracy i to naprawdę poprawiło mój proces projektowania. Jedną z najpotężniejszych części jest możliwość importowania statycznego pliku Szkic do Framer i przekształcania go w realistyczny, interaktywny prototyp w stosunkowo krótkim czasie.

Dzięki temu nie muszę tracić cennego czasu na początku procesu odtwarzania projektów w kodzie. Mogę szybciej uzyskiwać pomysły przed interesariuszami i użytkownikami. Mogę zapisać kodowanie na później, gdy projekt będzie bardziej zestalony.

Po użyciu Framer przez kilka miesięcy, oto kilka rzeczy, których się nauczyłem:

Zaplanuj i określ zakres swoich prototypów

Zanim zacznę projekt, decyduję o kilku rzeczach:

Co staram się osiągnąć?

Niezależnie od tego, czy prototyp jest przeznaczony do testowania przez użytkownika, czy też ma powstać konceptualizacja pomysłu, jaka jest minimalna ilość pracy niezbędnej do zrealizowania mojego pomysłu lub uzyskania wglądu w testowanie? Nie jestem po prostu leniwy;), to pomaga zdecydować o niezbędnych interakcjach, animacjach i ekranach, które są potrzebne.

Im więcej czasu poświęcasz na projekt, tym bardziej się przywiązujesz. Im więcej przywiązuje się, tym mniej prawdopodobne jest, że wprowadzisz niezbędne zmiany.

Użyjmy powyższego prototypu jako przykładu.

Pracowałem nad nowym projektem i chciałem zbadać, jak wyglądałby układ oparty na karcie z "tasowaniem" animacji pomiędzy stanami. Naszkicowałem podstawową ideę, którą chciałem stworzyć i wykorzystałem to jako punkt wyjścia.

Jeśli ty Spójrz w gotowym prototypie tylko pierwsza karta jest klikalna w każdym kroku. Nie ma sposobu na powrót, brak stanów unoszących się w powietrzu, zawartość na ostatnim ekranie nie jest kompletna i nie jest idealnie doskonała w pikselach. Żadne z nich nie było konieczne, aby przedstawić mój pomysł, więc nie poświęcałem czasu na ich uwzględnianie. Framer może zrobić prawie wszystko, ale to nie znaczy, że powinieneś spróbować zrobić wszystko w swoim prototypie.

Twórz przepływy UI za pomocą niesamowitego modułu ViewController firmy Andreas

Możesz użyć ViewController Sketch plugin do tworzenia przepływów interfejsu użytkownika bezpośrednio w Sketch. Szybko przekształć swoje projekty w klikalne prototypy bez konieczności pisania kodu.

To świetnie nadaje się do zaprezentowania pracy zainteresowanym stronom i jest naprawdę proste. Zamiast przechodzić przez plik szkicu z tuzin obszarów roboczych lub pliku .pdf, możesz zaprezentować interaktywny prototyp lub udostępnić hostowany adres URL projektu Framer.

W zależności od tego, co próbuję osiągnąć, mogę skończyć pisząc kod dla rzeczy takich jak efekty najeżdżania, animacje i wejścia tekstowe dla dodatkowego efektu realizmu i interaktywności. Ponownie, jako projektant, zdecyduj, co jest konieczne, aby uzyskać dobry pomysł i odpowiednio go wdrożyć.

Sprawdzić Andreas Twórz przepływy UI za pomocą artykułu Szkic i Framer aby dowiedzieć się więcej o wtyczce.

Mikrointerakcje

Myślę, że jest kilka powodów, dla których mobilne prototypowanie jest bardzo popularne w Framer, a jednym z nich jest to, że mikrointerakcje wydają się dużo bardziej powszechne na urządzeniach mobilnych. Ale nie musi tak być! Myślę, że projektanci internetu mogą być lepsi, aby nasza praca miała więcej ruchu, a Framer jest w tym naprawdę dobry.

To tylko prosty przykład szybkiej interakcji, którą zrobiłem przy użyciu pliku Szkic, który wykonał już projektant w moim zespole. Odkrywanie takich interakcji zajmuje kilka minut.

Jasne, ale dlaczego nie po prostu kodować?

Jako programista z przodu, wiele moich projektów zostanie ostatecznie zakończonych zakodowanym prototypem. Następnie używam tego prototypu jako podstawy do napisania kodu początkowego do produktu, pracującego wzdłuż inżynierii bocznej. Dlaczego więc nie pisać kodu od samego początku?

Jak wspomniałem wcześniej, prędkość. Potrafię szybko opracować pomysły, które albo ja lub inny projektant wykonaliśmy już poprzez importowanie ich z Sketch do Framer. To świetne rozwiązanie na wczesnym etapie procesu projektowania, w którym szybko odkrywasz pomysły i wdrażasz opinie. Mogę poruszać się dość szybko w kodzie, ale Framer przenosi go na wyższy poziom.

Innym powodem jest wolność. Prosty fakt, że cały mój kod napisany w programie Framer zostanie wyrzucony, jest naprawdę świetny. Pozwala mi to wypróbować rzeczy, których nie chciałbym inaczej, i być nieco bardziej luźnym z moim kodem. Mogę poświęcić 15 minut na zbadanie pomysłu, a następnie wyrzucić go bez żadnych wyrzutów sumienia.

Kilka porad i wskazówek

Ty (lub projektant, z którym pracujesz) prawdopodobnie będziesz musiał ustawić pliki Szkiców nieco inaczej.

Pogrupuj swoje warstwy. Warstwy, które nie należą do grupy, są ignorowane
Unikaj używania spacji w nazwach grup
Ukryte warstwy w Szkicie są nadal importowane, ale ich widoczność zostanie ustawiona na fałsz.
Twórz proste, unikalne nazwy obszarów roboczych
Minus (-) na końcu obszaru roboczego wyklucza jego importowanie do Framer

Spłaszcz wszystkie warstwy w Szkicach, które pozostaną statyczne. Poprawi to czas ładowania twojego projektu, który jest szczególnie dobry podczas tworzenia prototypu o większym obciążeniu. Możesz to zrobić, dodając gwiazdkę (*) na końcu warstwy w Szkicu.

Warto poświęcić trochę czasu projektantom w swoim zespole, aby dowiedzieć się, jak skonfigurować pliki szkiców, aby najlepiej pasowały do obiegu pracy i tego, co najlepiej sprawdza się w zespole.

Kiedy importujesz plik Szkic do Framer, zobaczysz coś takiego:

# Import file "design" sketch = Framer.Importer.load("imported/design@1x")

Zamień szkic na $, a teraz możesz użyć $, aby odwoływać się do warstw szkicu, oszczędzając sobie pisania setek szkiców słów:

$ = Framer.Importer.load("imported/design@1x")

Użyj zwykłego fragmentu kursora "Normal Cursor", aby uzyskać normalny wskaźnik myszy:

document.body.style.cursor = "auto"

and then scale them down, so they're extra crisp. Importuję projekty @ 2x, a następnie skalowuję je w dół, dzięki czemu są wyjątkowo ostre. Zauważ, że nie wydaje się, aby to współgrało z wymienionym wyżej modułem ViewController.

Framer.Device.contentScale = .5

Szkic i Framer używają różnych domyślnych obszarów roboczych / urządzeń w Internecie. Szkic wykorzystuje 1440 × 1024, podczas gdy Framer używa 1440 × 900. Wybieram 1440 × 900. Nie myśl, że jesteś ograniczony do 900 pikseli na wysokość, ale możesz łatwo tworzyć przewijane strony w Framer.

[- Ten artykuł był pierwotnie opublikowane na Medium , opublikowano za zgodą autora -]

framer prototypowanie prototypowanie dla sieci prototypowanie ze szkicu używając ramek