InVision Studio: przegląd i przegląd

InVision Studio to narzędzie do tworzenia prototypów i animacji, które pozwala szybko tworzyć zaawansowane, wektorowe projekty ekranów dzięki elastycznym warstwom i nieskończonej kanwie. Jest uważany za jedno z najlepszych dostępnych narzędzi do prototypowania o wysokiej wierności. Dzięki InVision Studio możesz przyspieszyć przepływ pracy; tworzyć ciekawe, interaktywne prototypy; komunikować swoje projekty zespołowi i klientom; przetestuj swoje projekty; i odsuń pytania, wątpliwości i zmiany projektowe przed etapem rozwoju.

InVision Studio jest częścią pakietu narzędzi InVision, który obejmuje również InVision Cloud, w której można łączyć, przechowywać i udostępniać kompletny przepływ pracy projektowej produktu, oraz InVision DSM, menedżera systemu projektowania i biblioteki, w której można przechowywać i kontrolować wszystkie komponenty marki i UX. InVision Studio może być używany na komputerach Mac i Windows. Możesz również importować pliki Sketch.

Funkcje InVision Studio

Po pobraniu aplikacji InVision Studio otrzymasz wybór projektów do stworzenia. Po wybraniu tego, co chcesz zaprojektować, otrzymasz prezentację interfejsu.

Aby dodać warstwę lub komponent, kliknij znak plus u góry. Po dodaniu komponentu wszystkie opcje pojawiają się po prawej stronie.

Przyjrzyjmy się niektórym wartym uwagi funkcjom InVision.

Zmieniaj rozmiar i przycinaj obrazy bez masek.

Ta funkcja, zwana inteligentnym przycinaniem obrazów, automatycznie przycina obrazy podczas zmiany rozmiaru. Jest to podobne do tworzenia wypełnienia obrazem w programie Sketch, a następnie ustawienia go na „wypełnienie”, ale w mniejszej liczbie kroków i w bardziej intuicyjny sposób. Inteligentne przycinanie obrazu jest przeznaczone do zdjęć, których ognisko znajduje się w pobliżu środka. Najlepiej też przyciąć do okręgu, prostokąta lub zaokrąglonego prostokąta. W przypadku obrazów, które mają inny punkt skupienia lub ciekawszy kształt, warto utworzyć maskę, aby uzyskać dostęp do większej liczby opcji dostosowywania.

Źródło: LearnInVisionStudio.com

Napraw elementy podczas przewijania.

Naprawianie nagłówka i stopki nie jest nowością w InVision, ale naprawianie innych elementów już tak. Ustaw przewijanie w poziomie, w pionie lub w obu, a następnie wybierz element, który chcesz naprawić, klikając ikonę pinezki w prawym górnym rogu.

Połącz kilka obszarów roboczych w jedną animację.

Zegar zapewnia kontrolę nad wieloma obszarami roboczymi, które chcesz przekształcić w jedną animację. Możesz także zapętlić animację, aby ostatni punkt obszaru roboczego znajdował się w pierwszym. Lub możesz mieć wieloetapową animację bezpośrednio do innej części swojego projektu. Złożone animacje, takie jak ta, są idealne do wprowadzenia i zakończenia wideo.

Twórz wyzwalacze machnięcia dla animacji paralaksy.

Wyzwalacze przesuwania mogą tworzyć efekty paralaksy i inne rodzaje animacji, które pojawiają się podczas przewijania.

Twórz responsywne prototypy bez pisania kodu.

Dzięki responsywnym prototypom możesz tworzyć wszystko w oparciu o procenty i zmieniać rozmiar każdego elementu na podstawie rozmiaru obszaru roboczego. Następnie możesz tworzyć prototypy, które reagują na wszelkiego rodzaju ekrany. Ułatwia to tworzenie makiet o różnych rozmiarach. Ponadto ustawienie projektu jako „z możliwością zmiany rozmiaru” w Studio spowoduje automatyczną zmianę jego rozmiaru podczas wyświetlania w przeglądarce.

Źródło: LearnInVisionStudio.com

Odbij prototypy na swoim telefonie.

Jeśli chcesz przetestować animację lub prototyp na telefonie, możesz ją udostępnić, wybrać „lustro”, a następnie zeskanować kod QR w aplikacji mobilnej.

Używaj skrótów podobnych do szkicu.

Jeśli obecnie używasz programu Sketch, znasz już skróty używane przez program InVision Studio — prawie wszystkie są takie same, zwłaszcza jeśli chodzi o inspektora, warstwy i pasek narzędzi.

Przełączaj się między jasnymi i ciemnymi motywami.

Osoby niebędące projektantami mogą nie zdawać sobie sprawy, jak przydatna jest ta funkcja. Podczas projektowania jasnego interfejsu pomocny może być dodatkowy kontrast ciemnego motywu (i na odwrót).

Współpracuj z zespołem w czasie rzeczywistym.

Współpraca i przepływ pracy są uproszczone, a członkowie zespołu mogą projektować i komentować w czasie rzeczywistym. Dzięki globalnej synchronizacji i aktualizacjom w czasie rzeczywistym nikt nie będzie poza pętlą.

Projektowanie w InVision Studio w przeglądarce

Chcę szybko pokazać, jak wygląda praca z przeglądarkową wersją programu InVision Studio. Pokrótce omówimy projektowanie tablicy, tworzenie prototypu i korzystanie z trybu odręcznego.

Projektowanie tablicy

Twoje centrum dowodzenia znajduje się w prawym górnym rogu ekranu. Pięć ikon oznacza:

• Edytuj nagłówek
• Ustaw typ układu
• Ustawienia
• Uwagi
• Udział

Edytuj nagłówek

Pobawiłem się trochę główką. Po kliknięciu „Edytuj nagłówek” pojawiły się następujące opcje:

Wymieniłem obraz i tekst, lekko go zamazałem i dodałem niewielką nakładkę, aby tekst się wyróżniał. Szczególnie podoba mi się opcja „Rozmiar” – wystarczy najechać na nią myszą i wybrać jeden z trzech rozmiarów.

Ustaw typ układu

Następnie zmieniłem typ układu na „Szczegółowy”. Dotyczy to bloków treści pod nagłówkiem, które pojawią się podczas przewijania w dół.

Edycja dodatkowych sekcji

Jeśli najedziesz kursorem na prawo od tytułu sekcji, zobaczysz trzy ikony. Strzałka w dół to „Przenieś sekcję w dół”, a „X” to „Usuń tytuł sekcji”. Jeśli go usuniesz, a następnie zmienisz zdanie, możesz po prostu najechać kursorem na ten sam obszar i będziesz mieć możliwość dodania nowego tytułu sekcji.

Klikając znak plus po prawej stronie strzałki i „X”, otrzymasz nowe menu. Od lewej do prawej ikony oznaczają:

• Dodaj próbkę koloru
• Dodaj notatkę
• Przesyłanie pliku

Po najechaniu kursorem na blok treści ponownie zobaczysz opcje zmiany rozmiaru, takie jak w przypadku nagłówka. Wybranie innego rozmiaru spowoduje automatyczną aktualizację reszty układu w celu dopasowania bloków. Kliknięcie bloku treści otwiera okno po prawej stronie.

Najechanie na jeden z kolorów na pasku pokaże jego kod koloru. To okno jest również miejscem, w którym członkowie zespołu mogą zostawić komentarz na temat tego konkretnego bloku projektowego.

Tworzenie prototypu

Bawiłem się też prototypem wersji demonstracyjnej, aby pokazać, jakie są opcje.

Tutaj twoje centrum sterowania znajduje się na dole. Zaczynając od ikony oka od lewej do prawej, ikony wyglądają następująco:

• Tryb podglądu
• Tryb budowania
• Tryb komentarzy
• Tryb inspekcji
• Tryb historii
• Udostępnianie społecznościowe
• Prześlij ekrany
• Konfiguracja
• Stan ekranu

Tryb odręczny

Tryb odręczny zaczyna się od interaktywnej demonstracji, która szybko pokazuje, jak z niego korzystać. Następnie pracujesz z nieskończonym płótnem, aby złożyć swój projekt w całość. Jeśli pracujesz w aplikacji, możesz wysłać do członka zespołu link „Współpracuj na żywo, korzystając z funkcji Freehand”, aby mógł on rysować i dodawać tekst do projektu w czasie rzeczywistym.

Ceny InVision Studio

Bezpłatny abonament obejmuje jeden prototyp z nieograniczoną liczbą współpracowników i ekranów. Jeśli to wszystko, czego potrzebujesz, nigdy nie musisz płacić. Dema nie wliczają się do limitu. Jeśli zaprojektujesz więcej niż jeden prototyp, otrzymasz sześć dni bezpłatnego dostępu do tworzenia nieograniczonej liczby prototypów. Następnie będziesz musiał dokonać aktualizacji, aby tworzyć i używać dodatkowych prototypów. Jeśli chcesz uaktualnić, oto ich plany:

Końcowe przemyślenia

W porównaniu z innymi narzędziami do projektowania, InVision Studio może być trochę powolne, a czasem zabużone – nie oznacza to, że ogólnie jest wolne, po prostu wolniejsze (czasami) niż inne podobne narzędzia, takie jak Adobe XD, Figma i Sketch. Osobiście nie spotkałem się z tym problemem, ale często pojawia się on w recenzjach. Ponadto InVision Studio nie oferuje obsługi wtyczek, więc jeśli jest to dla Ciebie ważne, rozważ zamiast tego Sketch.

Jednak jeśli chodzi o prototypowanie, InVision Studio jest trudne do pokonania, zwłaszcza jeśli musisz współpracować z zespołem. Może nie jest tak potężny jak Adobe XD, ale wciąż jest jednym z najlepszych narzędzi do prototypowania, jakie znajdziesz.

Interfejs programu InVision Studio jest łatwy do nauczenia i obsługi, a ikony są eleganckie i nowoczesne. Jest też dużo pomocy w postaci samouczków, wycieczek i linków do dodatkowych wskazówek. (Teraz to powiedziawszy, czytałem recenzje, które mówią coś przeciwnego, więc przypuszczam, że to kwestia gustu.) W InVision Studio jest bardzo mało zgadywania i możesz przejść od razu do tego, co masz robić: tworzyć.

Podczas projektowania złotą zasadą jest stosowanie złotego podziału. Sprawdź mój ostateczny przewodnik dotyczący używania i zrozumienia Złotego Podziału.

Polecany obraz za pośrednictwem Visual Generation / shutterstock.com