Przewodnik krok po kroku dotyczący animacji interfejsu użytkownika z zasadami i szkicem

Projektowanie interfejsu użytkownika z myślą o animacji i przejściach to świetny sposób na zaplanowanie lepszego doświadczenia użytkownika (UX) dla następnej aplikacji. Animowane mikrointerakcje to doskonały sposób na stymulowanie zaangażowania użytkowników w świecie krótkich okresów uwagi. Właśnie dlatego Airbnb niedawno wprowadził Lottie – swoje „nowe narzędzie o otwartym kodzie źródłowym, które sprawia, że ​​dodawanie animacji do natywnych aplikacji jest bardzo proste”.

Projekty takie jak Lottie pokazują rosnące znaczenie dodawania ruchu jako nowego elementu do tworzenia ulepszonego UX zarówno dla aplikacji, jak i stron internetowych.

W tym samouczku nauczysz się skutecznych technik animacji interfejsu użytkownika przy użyciu Principle for Mac. Po zapoznaniu się z tym przewodnikiem będziesz w stanie zamienić nudne i statyczne makiety w interaktywny prototyp, aby lepiej zaprezentować swoją pracę. Możesz zastosować to, czego się tutaj nauczysz, aby poprawić swój następny skok interfejsu użytkownika i strzały dryblingu.

Zacznijmy.

Pobierz te bezpłatne zasoby do śledzenia.

Będziesz potrzebować tylko aplikacji Principle i Sketch, aby kontynuować. Jeśli jeszcze ich nie masz, możesz pobrać bezpłatną wersję próbną, korzystając z poniższych łączy.

• Pobierz bezpłatną wersję próbną Zasady tutaj.

• Pobierz bezpłatną wersję próbną programu Sketch tutaj.

• Pobierz bezpłatny plik źródłowy samouczka tutaj.

Przegląd podstawowego interfejsu

Jeśli jesteś przyzwyczajony do systemu Mac OS, interfejs Principle będzie wyglądał bardzo znajomo. Ma trzy główne sekcje: pasek boczny, obszar projektowania, który pokazuje obszary robocze oraz okno podglądu, które można zmieniać i przesuwać.

Zrozumienie podstawowych pojęć dotyczących animacji w zasadzie

Animowanie z Zasadą jest stosunkowo proste. Aby rozpocząć, nie musisz mieć tła animacyjnego. W rzeczywistości większość podnoszenia ciężarów jest zautomatyzowana przez zasadę i wystarczy skupić się na tym, co rozpoczyna animację (tj. przycisk, link, zdarzenie przewijania), jak animacja się zaczyna i jak się kończy.

Aby pomóc Ci lepiej śledzić, oto krótki leksykon terminów, które zobaczysz w przewodniku.

• Komponent: Komponent to rodzaj grupowania, który pomaga zawierać elementy, a nawet animacje. Jest to odpowiednik „inteligentnego obiektu” w Photoshopie lub „symbolu” w Illustratorze.
• Wyzwalacz: Sposób uruchamiania animacji – np. przez dotknięcie, przewinięcie, najechanie kursorem itp. W zasadzie wyzwalacz można zdefiniować, wybierając dowolny element w zasadzie i klikając ikonę, która pojawia się po jego prawej stronie z ikoną błyskawicy.
• Przejście: zmiana stanu z jednego obszaru roboczego na inny, tj. przesuwanie w lewo lub w prawo.
• Efekt wygładzania: poziom gładkości przejścia na podstawie tego, jak animacja zaczyna się i kończy.

A. Wyzwalacz i przejście

Pierwszym krokiem do animacji z Principle jest ustawienie wyzwalacza (zachowania lub akcji, która uruchamia animację) na elemencie (tj. przycisku lub linku) oraz zmiana jego początkowego i/lub końcowego stanu (tj. jego pozycji lub skali od początku do końca animacji).

1. Zdefiniuj stan początkowy: jak Twoje elementy interfejsu użytkownika wyglądają na początku przed animacją.
2. Zdefiniuj wyzwalacz: wybierając element interakcji i działanie, które aktywuje animację.
3. Zdefiniuj stan końcowy: sposób wyświetlania elementów na końcu animacji.

Gdy masz już zestaw animacji, możesz go wyświetlić w oknie podglądu.

B. Długość animacji i efekt wygładzania

Domyślnie Principle tworzy półsekundową animację. Czasami to nie wystarczy, aby szczegółowo zobaczyć efekt przejścia. Możesz zmienić czas trwania i efekt „wygładzania” z panelu animacji, wykonując te trzy kroki.

1. Otwórz panel animacji: Wybierz czarne strzałki między dwoma obszarami roboczymi i kliknij przycisk „Animacja” znajdujący się na górnym pasku.
2. Wydłuż długość animacji: Przesuń punkty końcowe niebieskich linii.
3. Zastosuj wygładzanie: Zaznacz wszystkie punkty w kształcie rombu i wybierz „Złagodź oba” z menu rozwijanego, aby wygładzić przejścia.

Co dostaniesz

Ten film pokazuje, co możesz stworzyć po przejściu tego samouczka. Aplikacja demonstracyjna prezentuje paletę kolorów Material Design firmy Google i udostępnia więcej szczegółów po wybraniu koloru. Stworzysz animację ładowania, niektóre przejścia stron z płynnym efektem paralaksy oraz suwak menu.

Upewnij się, że pobrałeś darmowy plik źródłowy samouczka tutaj.

Zacznijmy.

Przejście od pliku szkicu do zasady

1. Przesuń obszary robocze, aby przygotować się na naturalne przejścia między nimi: Na przykład ekran przesuwający się z prawej strony powinien dotykać prawej krawędzi ekranu, który zastępuje animacją.
2. Po ustawieniu pliku szkicu przejdź do Zasady, utwórz pusty dokument o proporcjach 360x640 i kliknij przycisk „Importuj”.

Usuwanie nagłówków ekranów w celu płynnego przewijania

Aby utworzyć płynne przejście między stronami, możesz usunąć każdy nagłówek z wyjątkiem pierwszego. Nagłówki zostały początkowo dodane tylko po to, aby pokazać wygląd i działanie aplikacji. Zachowasz tylko nagłówek na ekranie „Witamy” i będzie on służył jako przyklejony pasek z menu i tytułem aplikacji.

Tworzenie animacji ładowania — kształty

1. Wybierz grupę kształtów ładowania i kliknij „Utwórz komponent” zawierający kształty ładowania i tekst. Utwórz Komponent dla tekstu w pierwszym symbolu; zaraz potem będziemy animować tekst osobno.
2. Wybierz zgrupowane kształty. Wybierz wyzwalacz „Dotknij”, a następnie przeciągnij i upuść na tym samym obszarze roboczym, aby utworzyć duplikat.
3. Drugi obszar roboczy reprezentuje końcowy stan animacji, a grupę można obracać za pomocą właściwości kąta. Nadaj różne wartości kąta „wypełnieniu” i „konturowi”, aby uzyskać ciekawszy efekt.
4. Aby zakończyć, wybierz strzałki między obszarami roboczymi, kliknij „Animacja”, aby otworzyć „panel animacji” i zmień czas trwania, przesuwając punkty końcowe na około 1,00 s.

Tworzenie animacji ładowania — tekst

1. Najpierw utwórz animację slide-up. Wybierz kształt przycisku i zastosuj zdarzenie wyzwalające „Dotknij”. W nowym obszarze roboczym przesuń wszystkie ekrany w górę o 640px (równe aktualnej wysokości obszaru roboczego).
2. Teraz stwórzmy paralaksę. Przejdź do poprzedniego obszaru roboczego, na ekranie powitalnym przesuń kształty geometryczne i tekst w dół przy różnych wartościach Y.
3. Na koniec w panelu animacji wydłuż oś czasu, powiedzmy do 1s. Zastosuj do osi czasu efekt „Ułatwiaj oba” (upewnij się, że zaznaczyłeś wszystkie punkty w kształcie rombu i kliknij dowolną niebieską linię, aby zastosować efekt do wszystkich).
4. Wyświetl podgląd animacji i przesuwaj kształty, aż efekt paralaksy będzie dla Ciebie odpowiedni.

Tworzenie efektu paralaksy — strona powitalna

1. Wybierz komponent wczytywania i zastosuj wyzwalacz „Kliknij”, przeciągając strzałkę z niego w dowolne miejsce obszaru roboczego.
2. Wybierz wszystkie ekrany (z grupy nadrzędnej) i przesuń je w górę o 640px. Ten krok powoduje wyświetlenie ekranu powitalnego.
3. Wróć do poprzedniego obszaru roboczego i przesuń kształty na ekranie „Witamy” w dół. Tworzy to asynchroniczny efekt poślizgu zwany paralaksą.
4. Dostosuj animację, dodając czas przejścia w panelu animacji: Wybierz strzałkę między obszarem roboczym, a następnie przeciągnij punkty końcowe na niebieskich liniach do około 1 sekundy.

Tworzenie efektu paralaksy - Informacje o stronie

1. Wybierz przycisk strzałki w dół (upewnij się, że wybrałeś całą grupę) i zastosuj wyzwalacz „Dotknij”, przeciągając strzałkę w dowolne miejsce obszaru roboczego.
2. Wybierz wszystkie ekrany (z grupy nadrzędnej) i przesuń wszystko w górę o 640px. Ten krok powoduje wyświetlenie ekranu Informacje.
3. Wróć do poprzedniego obszaru roboczego i przesuń kształty na ekranie „Informacje” w dół. Tworzy to asynchroniczny efekt poślizgu zwany paralaksą.

Tworzenie efektu paralaksy - strona kolorów

1. Zastosuj spust „Tap” do przycisku strzałki w dół (upewnij się, że wybrałeś całą grupę), co spowoduje utworzenie nowego obszaru roboczego.
2. Na nowym obszarze roboczym zaznacz wszystkie ekrany i przesuń je w górę o 640px.
3. Na poprzednim obszarze roboczym przesuń kolory i tekst w dół. Zwróć uwagę, że im niżej przesuniesz obiekt, tym dłużej zajmie przesunięcie w górę, więc upewnij się, że używasz innego położenia, aby uzyskać bardziej dynamiczny efekt.
4. Na koniec rozszerz animację i zastosuj „ułatwienie obu” na wszystkich niebieskich osiach czasu w panelu animacji.

Przesuwanie strony z boku — strona wyboru koloru

1. Zastosuj wyzwalacz „Dotknij” do przycisku „Załaduj więcej” na ekranie „Kolory”.
2. W nowym obszarze roboczym przesuń zawartość „Kolory” i „Wybór” w lewo o 360px (szerokość obszaru roboczego)
3. Wróć do poprzedniego obszaru roboczego i przesuń zawartość ekranu w przeciwnym kierunku - w prawo.
4. Pamiętaj, że możesz także animować krycie ekranu przesuwające się od zera do 100%.
5. Baw się czasem trwania animacji i efektem wygładzania, aby dostosować efekt przejścia.

Animowanie ikony menu

1. Zauważ, że każda warstwa i kształt, które miały efekt (np. cienie) z oryginalnego pliku Sketch, są importowane do Principle jako obraz. Jeśli chcesz edytować kształty w Principle, postaraj się nie dodawać żadnego efektu specjalnego przed importem.
2. Biorąc to pod uwagę, używając istniejącej ikony jako przewodnika, narysuj trzy cienkie prostokąty i zgrupuj je, aby utworzyć ikonę menu hamburgera. Teraz możesz usunąć lub ukryć poprzednią ikonę menu.
3. Wybierz nowo utworzoną ikonę i zastosuj do niej wyzwalacz „dotknij”.
4. W nowym obszarze roboczym obróć górny i dolny prostokąt na ikonie menu, upewnij się, że są wyrównane do środka, a środkowemu nie daj żadnego procentu krycia.
5. Aby zobaczyć właśnie utworzoną animację, połącz zmienioną ikonę menu z obszarem roboczym podglądu za pomocą wyzwalacza „Dotknij” i przetestuj ją.

Tworzenie efektu suwaka menu

1. Na obszarze roboczym stanu końcowego przesuń ekrany w prawo, aż łącza menu zostaną wyrównane z lewej strony ikony zamykającego menu.
2. Wybierz wszystko w folderze "Kolory" z wyjątkiem zawartości menu i jasnoszarego tła i zmniejsz krycie do 25 procent. Animacja zniknie zawartość strony, aby skupić się na menu.
3. Wydłuż czas trwania animacji i przejdź do poprzedniego obszaru roboczego, aby nieznacznie przesunąć zawartość menu, aby uzyskać płynny efekt.

Przejście do ekranu kontaktu

1. W otwartym menu zastosuj wyzwalacz „Dotknij” na przycisku „Skontaktuj się z nami”.
2. Na nowo utworzonym obszarze roboczym przesuń wszystkie ekrany w górę o 640 pikseli.
3. Następnie wróć do obszaru roboczego podglądów i przenieś elementy ze strony „Formularz” w dół.
4. Przesuwaj elementy w różnych wartościach Y, aby uzyskać efekt paralaksy.
5. Na koniec wybierz strzałki między obszarami roboczymi, wydłuż długość animacji i zastosuj „Ułatwiaj obie” na niebieskich osiach czasu.

Kończąc się stroną z podziękowaniami

1. Zastosuj wyzwalacz „Dotknij” na przycisku „wyślij wiadomość”.
2. Na nowym obszarze roboczym przesuń wszystkie ekrany w górę o 640 pikseli.
3. Następnie wróć do obszaru roboczego podglądów i przenieś elementy ze strony „Potwierdzenie” w dół.
4. Baw się skalą i obrotem kolorowej ikony, aby uzyskać bardziej dynamiczny efekt.
5. Upewnij się, że dodałeś długość animacji, aby lepiej dostrzec efekt przejścia.

Prostota dodawania animacji z zasadą.

Zasada jest fantastycznym narzędziem do realizacji pomysłów na interakcję z interfejsem użytkownika.

Interfejs jest przyjazny dla komputerów Mac i został stworzony do bezproblemowej współpracy z plikami Sketch.

Zasada automatyzuje większość efektów animacji i przejścia. Wszystko, co musisz zrobić, to zastosować wyzwalacz do kształtu na jednym obszarze roboczym i zmienić dowolną właściwość elementów, które chcesz animować w końcowym obszarze roboczym.

Wszelkie pytania proszę zostawiać w komentarzach poniżej. Chętnie na nie odpowiem.