Samouczek framera: 7 prostych mikrointerakcji, aby ulepszyć swoje prototypy

Witamy w drugiej części naszej serii samouczków Framer. W poprzednim artykule dowiedzieliśmy się o podstawach korzystania z Framera w trybie projektowania, a także o tym, jak napisać prosty kod, aby nasze projekty ożyły. W tym artykule skupimy się na wykorzystaniu Framer do tworzenia mikrointerakcji i animowanych przejść. Omówimy, jak stworzyć siedem przydatnych interakcji dla swoich prototypów.

Dlaczego powinieneś prototypować małe interakcje?

Płynny ruch, zmiany stanu i subtelne przejścia pomagają użytkownikowi zrozumieć, jak korzystać z interfejsu, przekazując mu informacje zwrotne na temat określonych działań. Często te przejścia będą echem rzeczywistych analogów (takich jak przesuwanie przełącznika) lub wykorzystują typowe wzorce interakcji urządzenia (takie jak dotknięcie, aby rozwinąć). W tym samouczku skupimy się na interakcjach, które dodają interfejsowi końcowego szlifu, aby pomóc w zrozumieniu i wzbudzić zachwyt użytkownika.

Spójrz na poniższe przykłady. Projektanci na całym świecie tworzą te mikrointerakcje w różnych produktach.

7 prototypów

W tym samouczku przedstawię przegląd każdej mikrointerakcji i kilka fragmentów kodu. Będziemy używać kilku różnych technik, dzięki czemu będziesz mógł wybrać tę, która najlepiej pasuje do Twojego produktu. Nie ma „właściwego” sposobu na stworzenie czegokolwiek w Framer Studio — jak wspomniałem w poprzednim artykule, Framer daje ci dużą swobodę tworzenia tak, jak chcesz.

Czy widziałeś już takie interakcje? Jasne, masz! Widzisz je codziennie na swoim smartfonie. Czas stworzyć własny.

1. Przycisk akcji

Przycisk akcji często reprezentuje główną akcję bieżącego ekranu. Czasami zawiera kilka akcji w środku. W drugim przypadku stworzymy interakcję. Pobierz działający prototyp tutaj: https://framer.cloud/ShBnH

Krok 1: Utwórz trzy przyciski w kształcie koła

Na początek utwórz jeden główny przycisk w kształcie koła z ikoną w środku i dwa mniejsze przyciski umieszczone pod przyciskiem głównym. Nie zapomnij oznaczyć wszystkich tych warstw jako interaktywnych w trybie projektowania (za pomocą wskaźnika celu).

Krok 2: Zaprojektuj dwa stany dla wszystkich warstw

Utwórz dwa różne stany dla warstw. Użyj poniższego kodu, aby przesunąć mniejsze przyciski nad główny i obrócić ikonę o 45°:

 button_1.states.a = y: 427 x: 246 width: 64 height: 64 button_2.states.a = y: 330 x: 246 width: 64 height: 64 icon.states.a = rotation: 45

Krok 3: Dodaj wydarzenie

Aby ten prototyp był animowany, musimy dodać wydarzenie. Po dotknięciu przycisku akcji zmień stany wszystkich warstw:

 button.onTap -> button_1.stateCycle() button_2.stateCycle() icon.stateCycle()

Krok 4: Wiosenna animacja

W tym momencie animacja wygląda bardzo mechanicznie. Aby dodać ludzki charakter, dodamy animację wiosny dla wszystkich warstw:

 button_1.animationOptions = curve: Spring(tension: 170, friction: 12) button_2.animationOptions = delay: 0.05 curve: Spring(tension: 170, friction: 12) icon.animationOptions = curve: Spring(tension: 250, friction: 5)

Przycisk akcji jest gotowy do pracy!

2. Interaktywne przełączniki

Poniższe kroki pozwolą Ci stworzyć własną interakcję z przełącznikiem. Pobierz działający prototyp tutaj: https://framer.cloud/ieypV

Krok 1: Zaprojektuj plac zabaw dla przełączników

Potrzebne będą tylko dwie rzeczy: sam przełącznik, który zawiera co najmniej dwie warstwy (tło i kropka) oraz kilka warstw do animacji po użyciu przełącznika.

Krok 2: Utwórz stany

Czy pamiętasz z pierwszego artykułu, jak projektować stany bezpośrednio w Framer Studio? Zaprojektuj swoje stany tak, jak lubisz, lub użyj moich ustawień:

 dot.states.a = x: 50 backgroundColor: "rgba(5,106,161,1)" switch_bg.states.a = backgroundColor: "rgba(0,136,205,1)" icon.states.a = opacity: 0 circle.states.a = x: 37 y: 183 width: 301 height: 301 circle_1.states.a = x: 20 y: 166 width: 337 height: 337

Krok 3: Dodaj wydarzenie

Aby prototyp działał, musimy dodać zdarzenie do przełącznika. Po dotknięciu przełącznika zmienimy stan wszystkich warstw:

 switch_1.onTap (event, layer) -> dot.stateCycle() switch_bg.stateCycle() circle.stateCycle() circle_1.stateCycle() icon.stateCycle()

Krok 4: Dostosuj czas

Aby wszystko było bardziej naturalne, dostosuj czas i opóźnienie wszystkich stanów:

 dot.animationOptions = time: 0.2 switch_bg.animationOptions = time: 0.2 circle_1.animationOptions = time: 0.5 curve: Spring circle.animationOptions = time: 0.5 delay: 0.05 curve: Spring icon.animationOptions = time: 0.5 curve: Spring

Teraz nasz prototyp jest gotowy!

3. Akcja przesuwania pozycji na liście

Jest to typowa interakcja służąca do usuwania, archiwizowania lub zapisywania elementów z listy. Przesuń palcem w lewo lub w prawo, a element zostanie usunięty. Pobierz prototyp tutaj: https://framer.cloud/rzMWP

Krok 1: Utwórz prototyp w trybie projektowania

Jeśli chcesz, możesz użyć własnego projektu. Musisz tylko zachować tę samą strukturę warstw. Jak widać na powyższym obrazku, pod wszystkimi elementami listy znajduje się przycisk „cofnij”.

Krok 2: Spraw, aby przedmioty można było przeciągać

Dla uproszczenia utworzymy interakcję tylko dla pierwszego elementu listy. Najpierw ustaw element listy jako przeciągany: item.draggable = true .

Następnie zablokuj oś pionową: item.draggable.vertical = false .

Ustaw ograniczenia obszaru do przeciągania: item.draggable.constraints

I na koniec ustaw rozmiar na rozmiar przedmiotu: size: item .

Tak wygląda cały kod:

 item.draggable = true item.draggable.vertical = false item.draggable.constraints = size: item

Teraz możesz przesuwać palcem w lewo i w prawo, a element zawsze powróci do swojej pierwotnej pozycji.

Krok 3: Utwórz stan

Następnie utwórz stan dla elementu listy po jego usunięciu. Po prostu przesunąłem go poza ekran za pomocą osi X.

 item.states.a = x: -360

Krok 4: Zmień stan po przesunięciu

Na koniec musimy stworzyć wyzwalacz, aby rozpocząć interakcję. Gdy przeciągamy element na lewą stronę ekranu, należy go usunąć. Kod będzie wyglądał tak:

 item.onMove -> if item.x < -70 item.stateCycle("a")

W tym przypadku używamy instrukcji „if”. Powyższy kod w zasadzie mówi, że gdy przesuniemy warstwę elementu o więcej niż 70px, to zmień stan elementu na stan 'a'. Możesz przeczytać o instrukcjach if w dokumentacji Framer Studio: https://framer.com/getstarted/programming/#conditional

Krok 5: Cofnij akcję po dotknięciu

Już prawie skończyliśmy z tą interakcją. Pozostało tylko cofnąć tę akcję:

 item_bg.onTap -> item.stateCycle("default")

Powinieneś znać ten kod z poprzedniego samouczka.

Krok 6 (opcjonalnie): Dostosuj czas animacji

Jeśli chcesz, możesz dostosować czas animacji:

 item.animationOptions = time: 0.75 curve: Spring

4. Przycisk ładujący

Jest to bardzo przydatna interakcja dla akcji, które wymagają ładowania lub czasu oczekiwania dla użytkownika. Kiedy stworzymy tę interakcję, nauczysz się zarządzać wieloma animacjami, które dzieją się pojedynczo. Pobierz prototyp tutaj: https://framer.cloud/FxmHN

Krok 1: Utwórz prototyp w trybie projektowania

Utwórz prosty przycisk z czterema warstwami podrzędnymi: paskiem postępu i trzema ikonami różnych stanów. Zaprojektowałem mój przycisk z widoczną ikoną przesyłania, paskiem postępu na dole o szerokości 0 i dwiema ukrytymi ikonami.

Krok 2: Dodaj wydarzenie

Cały ten prototyp można wykonać bez pisania ani jednej linii kodu, po prostu używając funkcji autokodowania w Framer.

Najpierw dodaj wydarzenie. Całą interakcję wywołamy stuknięciem w warstwę przycisków:

Oto kod, który napisał dla Ciebie Framer:

 button.onTap (event, layer) ->

Krok 3: Zaprojektuj animacje

Wykorzystamy funkcje autokodowania Framer do projektowania wszystkich animacji:

Zaprojektowałem cztery animacje w różnym czasie:

• Pierwsza animacja to zmiana szerokości paska postępu.
• Drugi to ukrywanie ikony przesyłania z przezroczystością.
• Trzecia obraca się i pokazuje ikonę ładowarki.
• Ostatni pokazuje i skaluje ikonę wyboru.

Oto kod, który Framer napisał dla każdej z tych animacji:

 # change progress bar width progress.animate width: 247 options: time: 1.4 curve: Bezier.ease # hide upload icon upload.animate opacity: 0.00 y: 39 options: time: 0.2 curve: Bezier.ease # show and rotate loader icon load.animate opacity: 1.00 rotation: 360 options: time: 1 curve: Bezier.ease # show and scale check icon done.animate opacity: 1.00 scale: 1.4 options: time: 0.2 curve: Bezier.ease delay: 1.00

Krok 4: Zresetuj animację ładowania

Jak mogłeś zauważyć, nie ukryliśmy ikony programu ładującego po zakończeniu animacji. Aby ukończyć ten prototyp, uruchom kolejną animację za pomocą tego zdarzenia: load.onAnimationEnd ->

 load.animate opacity: 0.00 options: time: 0.2 curve: Bezier.ease

5. Pociągnij, aby odświeżyć

Prawie każdy produkt z listą w środku korzysta z tego typu interakcji. Użytkownik rozwija całą listę, aby ją odświeżyć. Bardzo łatwo jest stworzyć. Pobierz prototyp tutaj: https://framer.cloud/DgMDw

Krok 1: Zaprojektuj prostą listę z ikoną odświeżania

Możemy przejść od razu do trybu projektowania. Potrzebujemy dwóch rzeczy: listy i ikony odświeżania. Kluczową rzeczą jest ukrycie ikony odświeżania z kryciem i umieszczenie jej na naszej liście:

Krok 2: Utwórz komponent przewijania

Chcemy, aby nasza lista była przewijalna. Aby to zrobić, użyj komponentu scroll i dodaj do niego warstwę listy:

 scroll = new ScrollComponent size: Screen scrollHorizontal: false list.parent = scroll.content

Krok 3: Spraw, aby ikona odświeżania była widoczna

Utwórz prosty stan dla ikony:

 icon.states.a = opacity: 1

Krok 4: Dodaj wydarzenie po rozwinięciu

Nasza lista jest teraz przewijalna. Oznacza to, że kiedy przewijamy w górę lub w dół, cała zawartość przewijania porusza się na osi 'y'. Dzięki tej wiedzy możemy stworzyć wydarzenie:

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a")

Ponownie używamy stwierdzenia „jeśli”. Jeśli lista zostanie rozciągnięta (przesunięta na osi y) o więcej niż 180px, uruchomimy akcję. W tym przypadku będziemy animować dwie warstwy: listę i ikonę odświeżania.

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1

Używamy „animacji”, aby przesunąć listę w dół o 210 pikseli i obrócić ikonę odświeżania o 360°.

Krok 5: Zresetuj wszystkie stany

Prototyp już prawie działa, ale po animacji odświeżania musimy zresetować wszystkie warstwy. W tym celu użyjemy zdarzenia po zakończeniu animacji:

 icon.onAnimationEnd ->

Animujemy obrót ikony odświeżania z powrotem do jej pierwotnej pozycji i za pomocą cyklu stanów resetujemy stan tła listy i ikony:

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1 icon.onAnimationEnd -> refresh.animate rotation: 0 list.stateCycle("default") icon.stateCycle("default")

Otóż ​​to!

6. Interakcja przeciągania

Czy zauważyłeś, że podczas przeciągania elementu do aplikacji zawsze coś się dzieje z samym elementem? Czasami element się kurczy, inne elementy są zamazane lub zmienia się krycie. Nauczmy się tworzyć tego rodzaju interakcję. Pobierz działający prototyp tutaj: https://framer.cloud/YstiW

Krok 1: Zaprojektuj prostą siatkę z płytkami

Utwórz siatkę płytek i upewnij się, że znajdują się one wewnątrz elementu nadrzędnego.

Krok 2: Użyj pętli „for”, aby wskazać wszystkie kafelki

„ for loop” może brzmieć przerażająco, ale jest naprawdę proste. Jeśli nie jesteś zaznajomiony z pętlami for , możesz najpierw przeczytać trochę tła: https://framer.com/getstarted/programming/#loops-and-arrays

Użyjemy pętli for , aby wskazać wszystkie kafelki w naszej siatce:

 for item in grid.subLayers

Za pomocą tego prostego wiersza kodu kierowałeś wszystkie warstwy w warstwie siatki.

Krok 3: Spraw, aby płytki można było przeciągać

Spraw, aby każdy element wewnątrz siatki można było przeciągać:

 for item in grid.subLayers item.draggable = true

Krok 4: Zaprojektuj stan przeciągania

Wszystkie elementy powinny mieć stan podczas przeciągania. Musisz zacząć od kodu, ale później będziesz mógł edytować ten stan w Edytorze warstw:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)'

Krok 5: Przeciągnij wydarzenia

Musimy tworzyć zdarzenia, które wyzwalają różne stany podczas przeciągania elementu. Pierwsze zdarzenie uruchomi akcję, gdy zaczniemy przeciągać:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a")

Użyłem this.bringToFront() , aby upewnić się, że element zawsze znajduje się nad innymi warstwami.

Drugi wyzwalacz zresetuje stan elementu:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default")

W tym momencie mamy działający prototyp.

Krok 6 (opcjonalnie): Graj z czasem

Interakcja zawsze odbywa się na osi czasu. Aby uzyskać idealny efekt, warto dostosować oś czasu:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default") item.animationOptions = time: 0.3 curve: Spring

7. Wiele przycisków „lubię to” (zaawansowane)

W tym prototypie użyjemy bardziej zaawansowanych technik, aby pokazać inny sposób kierowania warstw w Framer Studio, co pozwoli zbudować bardziej responsywne interakcje w krótszym czasie. Jeśli nie znasz podstaw kodowania, zachęcam do przeczytania najpierw tego artykułu: https://blog.framer.com/code-less-achieve-more-with-arrays-in-framer-c43594d13d59

Do tej interakcji pominiemy część projektową i użyjemy prototypu, który stworzyłem specjalnie na potrzeby tego artykułu: https://framer.cloud/SZMCH

Krok 1: Utwórz tablice

Spójrz na strukturę warstw wewnątrz Framer Studio:

Mamy „przycisk” wewnątrz „wiersza” w grupie „lista”. Będziemy tworzyć interakcję na warstwach przycisków, więc musimy na nie celować. Ale najpierw musimy znaleźć wszystkie warstwy wierszy i umieścić je w tablicy:

 rows = list.children buttons = []

Utworzyłem również pustą tablicę dla wszystkich warstw „przycisków”: buttons = [] .

Krok 2: Dodaj podwarstwę do tablicy

Zacznijmy od „pętli for”:

 for i in rows buttons.push(i.children[0])

Aby dodać warstwy do tablicy, użyjemy: buttons.push() . Oznacza to, że umieszczamy pierwszą warstwę każdej grupy „wierszy” wewnątrz tablicy.

Krok 3: Utwórz stan i wydarzenie

Teraz utworzymy stan dla naszych przycisków „lubię to” i dodamy do nich zdarzenie podczas stukania:

 for i in buttons i.states.a = scale: 1.2 hueRotate: -80 i.onTap -> this.stateCycle() i.animationOptions = time: 0.3 curve: Spring

Możesz użyć tej techniki, aby odtworzyć wszystkie poprzednie prototypy i uczynić je bardziej złożonymi.

Ostatnia uwaga

Tworząc mikrointerakcje, skupiasz się na najdrobniejszych szczegółach. Możesz tworzyć animacje wyzwalane przez dowolny rodzaj akcji i czynić je absolutnie doskonałymi. Pamiętaj, że istnieją setki sposobów na stworzenie tego samego prototypu i powinieneś użyć metody, która pasuje do Twoich umiejętności i potrzeb projektów produktów.

• • •

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