Adobe XD: Jak korzystać z funkcji Auto-Animate

Jan 12, 2026

Jak

(Kredyt obrazu: Adobe)

Pomimo późnego wejścia do gry prototypowania, Adobe XD jest jednym z najlepszych i najszybszych dostępnych narzędzi do prototypowania. Prototypowanie jest kluczowym procesem w cyklu życia projektowego, ale także odgrywa istotną rolę w rozwoju, pomagając projektantom i dev zespołom z utrzymaniem przepływu pracy.

Jako projektanci często potrzebujemy wielu narzędzi do zaprojektowania różnych etapów przepływu pracy w doświadczeniu użytkownika. Adobe jest aktywnie innowacyjny narzędzie między platformami, które mogą być używane do testowania wzorów, tworzenie szkieletów, wyłączania specyfikacji do zespołu dev, a także projektowanie współpracy (zob. Naszą listę Narzędzia szkieletowe Więcej opcji).

Funkcja automatycznego animacji oznacza, że Adobe XD może być również używany do tworzenia płynnych mikro-interakcji i animacji, takich jak narzędzia, takie jak zasada. Pomaga to projektantom rzemiosło bogatych doświadczeń prototypowych, z przepływów Onboardingowych, animacji dla karuzeli mobilnych, wskaźników postępów i więcej. Najlepszą częścią tej funkcji jest to, że jest to proste do nauki i wykonania.

W tym artykule będę wyjaśnić, jak tworzyć proste mikro animacje za pomocą funkcji Auto-Animate. Patrzymy na interakcje oparte na gestach i dotkniętych.

Jeśli jeszcze nie masz Adobe XD, zobacz naszym jak Pobierz Adobe XD. Post, a następnie sprawdź nasze ulubione Wtyczki Adobe XD. .

01. Przesuń gesty, aby dodać do ulubionych lub usuwania

Interakcje przerzucające są jedną z najczęściej używanych mikro-interakcji na aplikacjach mobilnych. W tym przykładzie spójrzmy na listę odtwarzania muzyki. W pierwszym podręczniku, stworzemy ekran odtwarzania z pięcioma piosenkami w nim. Każda piosenka jest indywidualną kartą i zasadniczo, gdy każda karta jest przesuwana w lewo, powinna usunąć utwór z listy odtwarzania. Gdy karta jest przesuwana w prawo, należy dodać utwór do kolejki.

Zacznijmy i utwórzmy pierwszą kartę. Możesz dodać podstawowe dane, takie jak nazwa utworu, nazwa artysty, długość utworu i oceny. Teraz Grupuj wszystkie te elementy do jednej warstwy. Duplikuj go do pięciu podobnych kart. Możesz je edytować w oparciu o swój gust.

Dla pierwszej karty - C1 - zamierzamy dodać lewą szybę do usuwania akcji. Utwórzmy więc mały kwadrat z czerwonym tłem, dodaj trochę tekstu Usuń i ikonę, jak pokazano na zrzucie ekranu poniżej. Grupuj wszystkie te przedmioty do warstwy zwanej A1. Teraz łączą C1 i A1 w warstwę L - aby A1 jest po prawej stronie C1.

02. Utwórz drugą kartę

Dla drugiej karty - C2 - zamierzamy dodać dodaj do akcji w kolejce w podobny sposób. Utwórz grupę A2 z ikoną, tekstem i zielonym tłem. Dodaj go po lewej stronie grupy C2 i utwórz łączną warstwę o nazwie L2. Teraz pierwszy twórczość (S1) jest kompletny. Dwukrotnie powierzmy całą literę, w dwa stany - S2 i S3. Będziemy używać S2 do usunięcia Swipe i S3 do dodania do kolejki Swipe. Aby to zrobić, musimy dokonać pewnych zmian dla każdego z tych stolików. Oto ustawienia obu swiper:

● S1 - Zmień nieprzezroczystość A1 i A2 do 0% i Ułóż L1, L2, więc są wyrównane w środku.

● S2 - Ułóż kartę L1, dzięki czemu prawa krawędź L1 jest wyrównana do innych kart. Zmienić krycie od A2 do 0%.

● S3 - Ułóż kartę L2, więc lewa krawędź L2 jest wyrównana do innych kart. Zmienić krycie od 1 do 0%.

03. Animuj stawki

Teraz, gdy stawki są całkowicie skonfigurowane, następnym krokiem jest ich animowanie. Możesz to zrobić, przechodząc do trybu prototypu na górnej lewej stronie narzędzia. Teraz na arce tablicy S1 kliknij warstwę L1 i dodaj interakcję po prawej stronie narzędzia, ustawiając wyzwalacz do przeciągania, akcji do automatycznego animacji i przeznaczenia do podręcznika S2. Możesz także dodać luz na podstawie swoich preferencji. Sprawdź tę interakcję, klikając przycisk Odtwórz w prawym górnym rogu narzędzia. Na tablicy S1 kliknij warstwę L2 i dodaj podobną interakcję przy użyciu tych samych ustawień, ale w tym przypadku ustawić miejsce do S3. Ta interakcja utworzy lewe przesuwanie.

04. Rozwiń swoje karty

Druga interakcja, na którą będziemy patrzeć, jest powszechnie widocznie w większości aplikacji i stron internetowych, w których przechodzą przez listę lub katalog produktów i po kliknięciu jednego z nich, zostaniesz wykonany na nową stronę z większą ilością szczegółów dotyczących produktu . Auto-Animate sprawia, że jest bardzo prosty do animacji tego rodzaju interakcji. W tym przykładzie zacznijmy, tworząc stronę katalogu produktów. Można wybrać jakikolwiek produkt, na przykład telefon komórkowy (który będzie naszym przykładem), odzież itp. W przypadku pierwszego podręcznika (S1) utwórz pasek nagłówka z menu hamburgera i ikoną profilu.

05. Pracuj na obrazach i szczegółach

Teraz utworzyć element tekstowy nagłówka z liczbą elementów katalogowych. Dla każdej z kart produktów będziemy mieć jeden obraz, nazwę telefonu, ceny i oceny. Możemy zadzwonić do tych kart C1 do C6. Najlepszym sposobem na to jest stworzenie pierwszej karty (C1), a następnie użyj niesamowitej funkcji XD Called Powtórz Grid, który znajduje się w prawym górnym rogu panelu Narzędzia. Umożliwia to powielenie łatwości elementów, utrzymując nienaruszone wyrównanie i odstępy. Konfiguracja tego stylu jest kompletna. Onimujemy drugą kartę, więc ważne jest, aby odgrupować elementy tej karty, więc XD może wykonać automatyczną animację.

06. Zaprojektuj drugi podwórko

Teraz, aby pracować nad drugim podręcznikiem. Duplikuj pierwszej tablicy i usuwać karty C1, C3-C6. Używamy istniejącej karty C2, aby zbudować tę stronę, więc nazwy warstw są takie same. Najpierw rozszerz tło karty, aby zakryje całą stronę poniżej paska nagłówka. Możemy teraz zorganizować inne przedmioty w jakikolwiek sposób, w jaki chcemy - podstawową ideą jest to, że powinno być różne od tego, jak karta była w tablicy S1, ponieważ właśnie widać przejście. Z tego powodu wpadnijmy nazwę telefonu komórkowego do 25px i sprawicie, że pogrubi się. Podobnie zwiększyć rozmiar ceny i umieść go poniżej nazwy mobilnej. Następna jest ważną częścią - obraz telefonu komórkowego. Musisz znacząco zwiększyć swój rozmiar, a także wyrównać go w środku.

07. Zastosuj wykończenia

Aby sporytować wszystko i sfinalizować projekt, zorganizować oceny i gwiazdy poniżej wszystkiego i w lewo. Ponieważ ta arceta reprezentuje szczegółową wersję produktu, możesz teraz zawierać dodatkowe informacje na temat telefonu, takiego jak pamięć, dostępne kolory telefonu, akcesoria podane przez telefon i tak dalej, na podstawie preferencji. Wszystko inne będzie podążać za przewijaniem tablicy. Można również zmienić ikonę nagłówka hamburgera, aby umożliwić użytkownikowi powrót do poprzedniej tablicy S1. Pamiętaj, aby zmienić nazwę ikony, aby dopasować nazwę ikony w pierwszej kolejce.

08. Utwórz mikropranacię

Chodźmy teraz do trybu prototypu, aby utworzyć mikropranacię. Aby to zrobić, wybierz kartę C2 w tablicy S1 i przeciągnij niebieską strzałkę do tablicy S2. W panelu interakcji po prawej stronie ustaw wyzwalacz jako stuknij, działanie jako automatyczny animowany i cel jako S2. W przypadku płynniejszych interakcji dobrze jest iść z łatwością do łagodzenia i czasu 0,4 lub 0,6 sekundy. Kliknij ikonę strzałki tylnej na rysunku S2 i przeciągnij strzałkę do S1. Możesz użyć tych samych ustawień, aby to spójne. Teraz kliknij S1 i odtwarzaj prototyp, aby zobaczyć magię. Będziesz obserwować gładką animację, gdy karta C2 jest stukana. Dostosuj ustawienia łańcuchowe, aby animować płynniejszy.

09. Wyjdź poza podstawy

Masz teraz podstawową ideę, jak tworzyć proste interakcje. Możesz także spróbować automatycznego animacji poprzez zmianę kolorów elementów, rozmiarów i kształtów, aby zobaczyć płynne przejścia między wieloma literami. Oprócz wyrównawek dotknij i przeciągają, istnieją inne wyzwalacze, które projektanci mogą eksperymentować, takich jak przy użyciu klawiszy klawiatury i klawiszy Gamepad do wyzwalania prototypów na określonym kluczu. Istnieje również tryb, w którym można utworzyć i projektować prototypy głosowe dla Alexa, Siri i tak dalej, gdzie można przypisać zdania i mówić je, aby uzyskać konkretne odpowiedzi.

Czytaj więcej:

The. Najlepszy budowniczych stron internetowych.
Skróty Adobe XD powinieneś wiedzieć (ale prawdopodobnie nie)
Zbuduj prototypy z Adobe XD

Adobe XD: Jak korzystać z funkcji Auto-Animate

01. Przesuń gesty, aby dodać do ulubionych lub usuwania

02. Utwórz drugą kartę

03. Animuj stawki

04. Rozwiń swoje karty

05. Pracuj na obrazach i szczegółach

06. Zaprojektuj drugi podwórko

07. Zastosuj wykończenia

08. Utwórz mikropranacię

09. Wyjdź poza podstawy

Jak - Najpopularniejsze artykuły

Czy twój Apple Icloud Storage jest pełny? Oto jak uwolnić przestrzeń

Jamstack: Buduj szybsze, bardziej wydajne strony internetowe

Utwórz perspektywę w programie Adobe Illustrator

Użyj tabl.js, aby włączyć dane na interaktywne diagramy

Wyrównaj znaki gry z kreatywnym montażem

Jak uchwycić światło z olejem

Jak zacząć od Sass

Jak zaprojektować animowany bohater

Kategorie