Łatwość tworzenia prototypów — samouczek InVision Studio

Jeśli nie spałeś przez pierwszą połowę 2018 roku, prawdopodobnie doskonale zdawałeś sobie sprawę z gorączkowego oczekiwania w społeczności projektantów interaktywnych, które doprowadziło do wydania aplikacji InVision Studio. InVision jest najbardziej znany ze swoich pakietów wtyczek Sketch i Photoshop, takich jak Craft, oraz z tego, że jest platformą do szybkiego przekształcania projektów statycznych interfejsów w prototypy, które można klikać i udostępniać. W zeszłym roku, odważnym krokiem, ogłosili opracowanie własnego oprogramowania do projektowania cyfrowego, aby konkurować z ulubieńcami branży, takimi jak Sketch i Figma.

Produkt był reklamowany jako rewolucyjny i zawierał pewne ważne obietnice dotyczące płynnego przepływu pracy od projektowania do prototypu, złożonej funkcjonalności interakcji, zapierającej dech w piersiach animacji przejścia — i byłby darmowy. InVision wypuścił kilka całkiem ekscytujących zwiastunów i demonstracji, aby zachęcić projektantów. Oczekiwanie wzrosło jeszcze bardziej, gdy pierwsze wydanie wersji beta zostało przesunięte ponad kilka razy na początku roku.

Ponieważ coraz więcej projektantów zaczęło bawić się oprogramowaniem, pojawia się coraz więcej samouczków i przewodników, aby zademonstrować podstawy narzędzia do projektowania interfejsu aplikacji. InVision stworzył również kilka własnych, aby wprowadzić użytkowników do podstaw InVision Studio.

Mimo że wersje wczesnego dostępu zbierają mieszane recenzje, Studio ma kilka interesujących funkcji i duży potencjał. Ten samouczek ma na celu zapoznanie wczesnych użytkowników z podstawami tworzenia prototypów InVision Studio i dodanie kilku podstawowych animacji prototypów.

Stwórz interaktywny prototyp ze zgrabnymi animowanymi przejściami w mgnieniu oka, postępując zgodnie z tym samouczkiem InVision Studio!

Nickel Tour po przestrzeni roboczej InVision Studio

Znaczna część programu Studio powinna być zaznajomiona z projektantami interfejsu użytkownika i każdym, kto korzysta z oprogramowania do projektowania cyfrowego, takiego jak Sketch. Duża część obszaru roboczego zapożycza elementy z interfejsu użytkownika Sketch, z lewym panelem bocznym mieszczącym strony, warstwy i grupy; prawy panel boczny dla inspektorów; oraz kontekstowy pasek narzędzi u góry.

Znajdziesz również wiele takich samych narzędzi, chociaż niektóre funkcje mają inne nazwy. Na przykład „symbol” szkicu jest nazywany w programie Studio komponentem.

Panel interakcji

Na potrzeby tego samouczka skupimy się na wykorzystaniu narzędzi interakcji do tworzenia interaktywnych hotspotów między ekranami i tworzenia płynnych przejść między nimi. Dużo magii będzie się działo w „panelu interakcji” po prawej stronie obszaru roboczego programu Studio.

Prostym sposobem tworzenia interakcji jest wybranie warstwy lub grupy wyzwalającej i naciśnięcie „c” na klawiaturze (lub kliknięcie ikony błyskawicy na górnym pasku narzędzi), co inicjuje niebieski bicz, za pomocą którego można wybrać ekran docelowy. Następnie Studio poprosi projektanta o wybranie gestu lub danych wejściowych użytkownika wyzwalających zdarzenie oraz wybór między zestawem gotowych przejść lub przejściem „ruchu”.

Animacja InVision Studio

Istnieje wiele elementów do świetnego projektowania interakcji, ale prawidłowe wykorzystanie animowanych przejść i mikrointerakcji w interfejsie użytkownika to coś więcej niż tylko dekorowanie okien.

Zwiększają użyteczność i mogą oznaczać różnicę między ukochanym produktem a mylącym bałaganem.

W tym samouczku używamy kombinacji gotowych przejść i przejść ruchu, aby stworzyć prototyp naszej aplikacji. Wstępnie ustawione przejścia są dość proste i będą znane użytkownikom prototypowej platformy online InVision.

Nieco bardziej tajemnicze są zasady rządzące działaniem przejść ruchu między ekranami. Chociaż przy tworzeniu narzędzia bierze się pod uwagę wiele oczywistych względów projektanta — na przykład automatyczne łączenie elementów między ekranami — osiągnięcie pewnych efektów podczas dodawania ruchu do przejść wymaga trochę prób i błędów. Mamy nadzieję, że ten samouczek pomoże projektantom w nieco wygodniejszym eksperymentowaniu z tym, co ma do zaoferowania InVision Studio.

O czym należy pamiętać

Studio obiecuje wiele inteligentnych funkcji związanych z animacjami. Na przykład może tworzyć przejścia ruchu między obiektami zduplikowanymi z jednego obszaru roboczego do drugiego po połączeniu poprzez interakcję. Projektanci mogą następnie dostosować te animacje zgodnie z potrzebami, aby uzyskać piękne wygładzanie i inne efekty ruchu. Poznanie ekscentryczności tego, jak to działa, gdy próbujesz przenieść stos przedmiotów w określonej kolejności, może wymagać cierpliwości i trochę praktyki.

Przejścia ruchu najlepiej sprawdzają się w przypadku obiektów na obszarach roboczych, które zostały zduplikowane względem siebie. Funkcja animacji jest „inteligentna”, ponieważ rozpoznaje zduplikowane obiekty o tych samych nazwach warstw, więc uważaj, aby nie usuwać ani nie zmieniać nazw kluczowych warstw między ekranami (co jest frustrująco łatwym sposobem na zniszczenie świetnej animacji).

Należy pamiętać, że Studio jest wciąż w powijakach, więc projektanci powinni być przygotowani na sporą część błędów. Na przykład przycisk „Podgląd” uruchamia interaktywny podgląd prototypu, ale czasami interakcje w ogóle się nie uruchamiają, w takim przypadku konieczne będzie zapisanie i ponowne otwarcie pliku.

Podczas nauki oprogramowania miałem więcej niż jeden plik, który dziwnie się zepsuł — usuwając wszystkie obszary robocze i uniemożliwiając dostęp do wszystkich paneli narzędzi. Zgłosiłem błąd i nauczyłem się zapisywać wiele wersji moich plików, aby nie stracić zbyt wiele pracy.

Wreszcie, zawsze pomaga być zorganizowanym. Podczas tworzenia prototypu na dowolnej platformie, niezależnie od tego, czy jest to Studio, Sketch czy Marvel, śledzenie obiektów i etykiet warstw pozwoli zaoszczędzić czas i frustrację — zwłaszcza jeśli pracujesz z zespołem lub przekazujesz plik w pewnym momencie. Zanotuj kolejność warstw i grup warstw podczas budowania interakcji; często robi to dużą różnicę w osiągnięciu pożądanego efektu animacji.

Samouczek!

Zaczynajmy! Jeśli jeszcze tego nie zrobiłeś, przejdź do InVision Studio, aby pobrać wersję aplikacji Studio z wcześniejszym dostępem. Po zainstalowaniu programu InVision Studio na komputerze pobierz pliki samouczka tutaj. Po uruchomieniu oprogramowania Studio wybierz otwarcie pliku z miejsca, w którym go zapisałeś.

Krok 1: Otwórz plik i spójrz

Ten interaktywny prototyp będzie przeznaczony na aplikację mobilną o współczesnych artystach z przełomu XIX i XX wieku. Wszystkie ekrany zostały wcześniej utworzone przy użyciu starannego powielania obszaru roboczego, co jest niezbędne do prawidłowego korzystania z funkcji przejścia w ruchu.

Hierarchia ma 3 poziomy głębi, zaczynając od „Domu”, następnie poprzez biografię każdego artysty, a na końcu aż do karuzeli czterech przykładów prac artysty. Zauważysz, że obszar roboczy „Dom” ma małą ikonę domu, która wyznacza początkowy obszar roboczy prototypu.

Samouczek skupi się na tworzeniu prostych ścieżek nawigacyjnych, które łączą te trzy poziomy głębokości. Wykorzystamy narzędzia interakcji i przejścia dostępne w Studio, aby prototyp wyglądał jak odpowiednio interaktywna aplikacja.

Krok 2: Połącz kafelek artysty z biografią artysty

Przejdź do pierwszego obszaru roboczego. Poświęć chwilę, aby rozwinąć grupę warstw „Płytka artysty 1.” Zauważysz trzy zagnieżdżone grupy: jedną dla nazwy artysty, jedną dla wyróżnionego obrazu i trzecią warstwę zawierającą „Bio Text”.

Patrząc na ekran obszaru roboczego, trzecia grupa warstw nie jest od razu widoczna ze względu na sposób, w jaki Studio obsługuje przejścia ruchu — do czego przejdziemy za chwilę. Po prostu zanotuj to na razie.

Wybierz grupę warstw zawierającą wszystkie te elementy: „Płytka artysty 1.” Po wybraniu tej grupy naciśnij „c” na klawiaturze (lub kliknij ikonę błyskawicy na górnym pasku narzędzi), aby zainicjować narzędzie interakcji. Za kursorem pojawi się niebieski bicz, który wybierze ekran docelowy interakcji.

Wybierz obszar roboczy bezpośrednio po prawej stronie zatytułowany „Bio artysty 1”, a zostaniesz poproszony o wybranie wyzwalacza i typu przejścia. Jako wyzwalacz wybierz "Stuknij", a następnie wybierz "Ruch" jako przejście. Następnie możesz wybrać czas trwania przejścia. Ustawmy to przejście na 2 sekundy i naciśnij „Zapisz”.

Kliknij przycisk odtwarzania, aby wyświetlić podgląd prototypu. Czy widziałeś, jak rzeczy poruszają się po ekranie i jak warstwa biologiczna zsuwa się spod obrazu? Gratulacje — stworzyłeś całkiem zręczne przejście do interakcji!

Krok 3: Podłącz przycisk Wstecz do ekranu głównego

Teraz powinniśmy dać użytkownikom możliwość powrotu do ekranu głównego. Przejdź do obszaru roboczego „Artist Bio 1” i wybierz komponent „btn_back” w lewym górnym rogu. Utwórz wyzwalacz tutaj, naciskając „c” i wybierając obszar roboczy „Dom”.

Ponownie ustawmy wyzwalacz na „Dotknij”, interakcję na „Ruch”, a czas trwania na 2 sekundy. Kliknij Podgląd i rozkoszuj się zgrabnymi przejściami otwierania i zamykania, które właśnie utworzyłeś. Zwróć uwagę, że animacja wyzwalana przez zamknięcie kafelka jest odwróceniem animacji odtwarzanej podczas otwierania kafelka.

Krok 4: Połącz galerię

Jeśli zwracasz uwagę na nazwy warstw w pierwszym i drugim obszarze roboczym, możesz zauważyć, że są one identyczne. Dzieje się tak, ponieważ, jak wspomniano wcześniej, animacje Studio automatycznie łączą zduplikowane warstwy z jednego obszaru roboczego do drugiego, jeśli mają tę samą nazwę. Zmiana nazwy tych warstw spowoduje przerwanie łącza animacji, a przejście będzie domyślnie proste, co jest szczególnie trudne dla tych, którzy mają obsesję na punkcie znaczących etykiet warstw.

Chcemy zastosować jeszcze jedno zgrabne przejście ruchu do otwierania karuzeli galerii obrazów. Obszar roboczy zatytułowany „Artist 1 - Image 1” zawiera elementy zduplikowane z obszaru roboczego „Artist Bio 1”, których rozmiar został zmieniony, aby pokazać więcej przykładowego obrazu.

Zacznij od kliknięcia warstwy „Artist Bio 1”, aby wybrać grupę „Polecany obraz”. To będzie wyzwalacz do otwarcia galerii. Utwórz tutaj interakcję „Dotknij”, łącząc się z pierwszym obszarem roboczym w galerii i wybierz „Ruch”. Tym razem ustaw trochę krótszy czas trwania: 1 sekundę.

Aby stworzyć ładne przejście do zamykania galerii, po prostu wybierz warstwę przycisku zamykania w obszarze roboczym „Artist 1 - Image 1” i połącz ją z powrotem z obszarem roboczym „Artist Bio 1”, z tymi samymi ustawieniami, co poprzednio.

Obejrzyj tę animację i podziwiaj, jak ładnie przechodzi prototyp z ekranu biografii artysty na karuzelę obrazów iz powrotem. Połączyliśmy teraz nawigację przez trzy poziomy hierarchii naszej aplikacji!

Krok 5: Połącz wszystkie obrazy z galerii

Zrobiliśmy większość przejść ruchu, które będziemy musieli wykonać, i teraz zaczniemy używać niektórych ustawień animacji w pozostałej części galerii.

Wzorzec interakcji, w którym nasz użytkownik może przeglądać tę karuzelę obrazów, będzie znanym gestem machnięcia. Dobrą wiadomością jest to, że ta ostatnia część jest dość prosta i przy użyciu ustawień animacji programu Studio nie zajmie dużo czasu.

Wybierz planszę artystyczną „Artysta 1 – Obraz 1” i utwórz interakcję, która prowadzi do następnego obszaru roboczego, „Artysta 1 – Obraz 2.”. Tym razem ustaw spust na „Przesuń w lewo”. W przypadku przejścia wybierz „Preset” i wybierz „Push Left” z menu rozwijanego.

Aby utworzyć odwrotną interakcję, wybierz obszar roboczy „Artysta 1 - Obraz 2” i połącz go z poprzednim obszarem roboczym, tylko tym razem za pomocą gestu „Przesuń w prawo” i przejścia „Pchnij w prawo”.

Powtórz ten wzór z kilkoma następnymi obszarami roboczymi, łącząc obszary robocze dla Obrazu 2 z Obrazem 3 i Obrazu 3 z Obrazem 4. To proste!

Aby było to jeszcze bardziej realistyczne, zamknijmy pętlę między obrazem 1 i obrazem 4. Wybierz obszar roboczy dla obrazka 4 i połącz go z obrazem 1. Wybierz wyzwalacz „Przesuń w lewo” i przejście „Pchnij w lewo”, tak jak w przypadku następne zdjęcie z serii. Połącz obszar roboczy Obrazu 1 z Obrazem 4 odwrotną stroną i presto — utworzyłeś zapętloną galerię!

Na koniec wybierz każdy z komponentów „btn_close” w obszarach roboczych galerii obrazów i połącz je z powrotem do obszaru roboczego bio. Tutaj możesz wybrać dowolne przejście, ale wybrałem „Push Right”.

Do tej pory masz całkiem dobrze uporządkowaną ścieżkę nawigacji, którą możesz pochwalić się. Kliknij podgląd i wypróbuj; Twój prototyp powinien działać podobnie jak gif na początku tego samouczka. Daj sobie zasłużone poklepanie po plecach.

Krok 6: Powtórz

Teraz, gdy połączyłeś wszystkie ekrany dla pierwszego przykładu artysty za pomocą zręcznych interakcji, powtórz kroki dla pozostałych dwóch zestawów ekranów w pliku samouczka. Są one zorganizowane w podobny sposób i będzie to dobra praktyka, aby przyzwyczaić się do sposobu działania programu Studio.

Następne kroki

Mamy nadzieję, że ten samouczek zawierał wprowadzenie do niektórych fajnych funkcji prototypowania InVision Studio. Podczas poznawania programu Studio powinieneś spróbować poprawić przejścia za pomocą zaawansowanych narzędzi do animacji. Poeksperymentuj z innymi narzędziami w obszarze roboczym i spróbuj skorzystać z innych samouczków InVision Studio. Dzięki praktyce możesz stać się jednym z czołowych guru projektowania InVision Studio.

Być może napotkałeś po drodze pewne błędy lub nieoczekiwane zachowanie, ale taki jest charakter wypróbowywania nowego oprogramowania. Ludzie z InVision bardzo reagowali na opinie i na pewno będą dalej ulepszać Studio, czyniąc go jeszcze bardziej stabilnym i użytecznym.

Studio to zabawne narzędzie do wypróbowania — i nie ma powodu, aby nie eksperymentować z bezpłatnym narzędziem do tworzenia prototypów aplikacji. Chociaż obecnie nie zastąpi popularnego oprogramowania, takiego jak Sketch, w społeczności projektantów, ma duży potencjał.

Dalsza lektura na blogu Toptal Design:

• Udoskonal swój proces projektowania UX – przewodnik po projektowaniu prototypów
• Potęga Figmy jako narzędzia projektowego
• Prototypowanie z wykorzystaniem rzeczywistych danych — samouczek dotyczący tworzenia ramek
• Podstawowy przewodnik po użyteczności mobilnej
• Najlepsze praktyki i błędy w projektowaniu aplikacji mobilnych